Apply prettier

This commit is contained in:
David Remer
2023-06-19 08:20:55 +03:00
committed by Aschepikov
parent c03a3becc4
commit 8b1d51fcd6
7 changed files with 305 additions and 184 deletions

View File

@@ -8,7 +8,7 @@ import { select, useSelect } from '@wordpress/data';
import { MailPoet } from '../../../../../../mailpoet';
import { OverviewSection, storeName } from '../../store';
import { locale } from '../../../../../config';
import {formattedPrice} from "../../formatter";
import { formattedPrice } from '../../formatter';
function getEmailPercentage(
type: 'opened' | 'clicked',
@@ -120,7 +120,9 @@ export function Overview(): JSX.Element | null {
key="overview-revenue"
label={__('Revenue', 'mailpoet')}
delta={getWooCommerceDelta('revenue').toFixed(2) as unknown as number}
value={formattedPrice(overview.data !== undefined ? overview.data.revenue.current : 0)}
value={formattedPrice(
overview.data !== undefined ? overview.data.revenue.current : 0,
)}
/>,
);
}

View File

@@ -1,23 +1,37 @@
type CellProps = {
value: number | string | JSX.Element
value: number | string | JSX.Element;
subValue?: number | string;
badge?: string;
badgeType?: string;
className?: string;
}
export function Cell({value, subValue, badge, badgeType, className}: CellProps): JSX.Element {
const badgeElement = badge ? <span className="mailpoet-analytics-badge">{badge}</span> : null
const mainElement = <div className={`mailpoet-analytics-main-value ${className??''} ${badgeType??''}`}>
};
export function Cell({
value,
subValue,
badge,
badgeType,
className,
}: CellProps): JSX.Element {
const badgeElement = badge ? (
<span className="mailpoet-analytics-badge">{badge}</span>
) : null;
const mainElement = (
<div
className={`mailpoet-analytics-main-value ${className ?? ''} ${
badgeType ?? ''
}`}
>
{badgeElement}
{value}
</div>
);
return (
<div className="mailpoet-automation-analytics-emails-table-cell">
{mainElement}
<p className="mailpoet-automation-analytics-table-subvalue">{subValue}&nbsp;</p>
<p className="mailpoet-automation-analytics-table-subvalue">
{subValue}&nbsp;
</p>
</div>
)
);
}

View File

@@ -1,10 +1,10 @@
import {TableCard} from "@woocommerce/components/build";
import {useSelect} from "@wordpress/data";
import {EmailStats, OverviewSection, storeName} from "../../../store";
import {__} from "@wordpress/i18n";
import {useEffect, useState} from "react";
import {calculateSummary} from "./summary";
import {transformEmailsToRows} from "./rows";
import { useEffect, useState } from 'react';
import { TableCard } from '@woocommerce/components/build';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { calculateSummary } from './summary';
import { transformEmailsToRows } from './rows';
import { EmailStats, OverviewSection, storeName } from '../../../store';
const headers = [
{
@@ -14,42 +14,42 @@ const headers = [
{
key: 'sent',
label: __('Sent', 'mailpoet'),
isLeftAligned:false,
isNumeric: true
isLeftAligned: false,
isNumeric: true,
},
{
key: 'opened',
label: __('Opened', 'mailpoet'),
isLeftAligned:false,
isNumeric: true
isLeftAligned: false,
isNumeric: true,
},
{
key: 'clicked',
label: __('Clicked', 'mailpoet'),
isLeftAligned:false,
isNumeric: true
isLeftAligned: false,
isNumeric: true,
},
{
key: 'orders',
label: __('Orders', 'mailpoet'),
isLeftAligned:false,
isNumeric: true
isLeftAligned: false,
isNumeric: true,
},
{
key: 'revenue',
label: __('Revenue', 'mailpoet'),
isLeftAligned:false,
isNumeric: true
isLeftAligned: false,
isNumeric: true,
},
{
key: 'unsubscribed',
label: __('Unsubscribed', 'mailpoet'),
isLeftAligned:false,
isNumeric: true
isLeftAligned: false,
isNumeric: true,
},
{
key: 'actions',
label: ''
label: '',
},
];
@@ -58,41 +58,64 @@ export function Emails(): JSX.Element {
overview: s(storeName).getSection('overview'),
})) as { overview: OverviewSection };
const [visibleEmails, setVisibleEmails] = useState<EmailStats[] | undefined>(undefined);
const [visibleEmails, setVisibleEmails] = useState<EmailStats[] | undefined>(
undefined,
);
const [currentPage, setCurrentPage] = useState(1);
const [rowsPerPage, setRowsPerPage] = useState(5);
//const [rowsPerPage, setRowsPerPage] = useState(25);
useEffect(
() => {
setVisibleEmails(overview.data !== undefined ? Object.values(overview.data.emails).splice((currentPage-1)*rowsPerPage, rowsPerPage): undefined)
}, [overview.data]
)
const [rowsPerPage, setRowsPerPage] = useState(25);
useEffect(() => {
setVisibleEmails(
overview.data !== undefined
? Object.values(overview.data.emails).splice(
(currentPage - 1) * rowsPerPage,
rowsPerPage,
)
: undefined,
);
}, [overview.data, currentPage, rowsPerPage]);
const rows = visibleEmails !== undefined ? transformEmailsToRows(visibleEmails) : [];
const rows =
visibleEmails !== undefined ? transformEmailsToRows(visibleEmails) : [];
const summary = calculateSummary(visibleEmails??[]);
return <TableCard
title=""
caption=""
onQueryChange={ (type:string) => (param) => {
if (type === 'paged') {
setCurrentPage(param);
setVisibleEmails(overview.data !== undefined ? Object.values(overview.data.emails).splice((param-1)*rowsPerPage, rowsPerPage): undefined)
} else if(type==='per_page') {
setCurrentPage(1);
setRowsPerPage(param);
setVisibleEmails(overview.data !== undefined ? Object.values(overview.data.emails).splice(0, param): undefined)
const summary = calculateSummary(visibleEmails ?? []);
return (
<TableCard
title=""
caption=""
onQueryChange={(type: string) => (param: number) => {
if (type === 'paged') {
setCurrentPage(param);
setVisibleEmails(
overview.data !== undefined
? Object.values(overview.data.emails).splice(
(param - 1) * rowsPerPage,
rowsPerPage,
)
: undefined,
);
} else if (type === 'per_page') {
setCurrentPage(1);
setRowsPerPage(param);
setVisibleEmails(
overview.data !== undefined
? Object.values(overview.data.emails).splice(0, param)
: undefined,
);
}
}}
query={{ paged: currentPage, sort: { key: 'email', direction: 'asc' } }}
rows={rows}
headers={headers}
showMenu={false}
rowsPerPage={rowsPerPage}
onRowClick={() => {}}
totalRows={
overview.data !== undefined
? Object.values(overview.data.emails).length
: 0
}
}
}
query={ {paged: currentPage, sort: {key: 'email', direction: 'asc'}} }
rows={ rows }
headers={ headers }
showMenu={ false }
rowsPerPage={ rowsPerPage }
onRowClick={ () => {} }
totalRows={ overview.data !== undefined ? Object.values(overview.data.emails).length : 0 }
summary={ summary }
isLoading={ overview.data === undefined }
/>
summary={summary}
isLoading={overview.data === undefined}
/>
);
}

View File

@@ -1,118 +1,170 @@
import {Tooltip} from "@wordpress/components";
import {__, sprintf} from "@wordpress/i18n";
import {EmailStats} from "../../../store";
import {Actions} from "./actions";
import {locale} from "../../../../../../config";
import {Cell} from "./cell";
import {formattedPrice} from "../../../formatter";
import { Tooltip } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { EmailStats } from '../../../store';
import { Actions } from './actions';
import { locale } from '../../../../../../config';
import { Cell } from './cell';
import { formattedPrice } from '../../../formatter';
const percentageFormatter = Intl.NumberFormat(locale.toString(), { style: 'percent', maximumFractionDigits: 2 });
const percentageFormatter = Intl.NumberFormat(locale.toString(), {
style: 'percent',
maximumFractionDigits: 2,
});
function calculatePercentage(value: number, base: number, canBeNegative = false) : number {
function calculatePercentage(
value: number,
base: number,
canBeNegative = false,
): number {
if (base === 0) {
return 0;
}
const percentage = (value * 100) / base;
return (canBeNegative) ? percentage - 100 : percentage;
return canBeNegative ? percentage - 100 : percentage;
}
function percentageBadgeCalculation(percentage:number) : {badge: string, badgeType: string} {
function percentageBadgeCalculation(percentage: number): {
badge: string;
badgeType: string;
} {
if (percentage > 3) {
return {badge: __('Excellent', 'mailpoet'), badgeType: 'mailpoet-analytics-badge-success'}
return {
badge: __('Excellent', 'mailpoet'),
badgeType: 'mailpoet-analytics-badge-success',
};
}
if (percentage > 1) {
return {badge: __('Good', 'mailpoet'), badgeType: 'mailpoet-analytics-badge-success'}
return {
badge: __('Good', 'mailpoet'),
badgeType: 'mailpoet-analytics-badge-success',
};
}
return {badge: __('Average', 'mailpoet'), badgeType: 'mailpoet-analytics-badge-warning'}
return {
badge: __('Average', 'mailpoet'),
badgeType: 'mailpoet-analytics-badge-warning',
};
}
export function transformEmailsToRows(emails: EmailStats[]) {
const openOrders = () => {
const tab: HTMLButtonElement | null = document.querySelector('.mailpoet-analytics-tab-orders');
const tab: HTMLButtonElement | null = document.querySelector(
'.mailpoet-analytics-tab-orders',
);
tab?.click();
}
};
return emails.map((email) => {
// Shows the percentage of clicked emails compared to the number of sent emails
const clickedPercentage = calculatePercentage(email.clicked.current, email.sent.current);
const clickedPercentage = calculatePercentage(
email.clicked.current,
email.sent.current,
);
const clickedBadge = percentageBadgeCalculation(clickedPercentage);
return [
{
display: <Cell
className='mailpoet-automation-analytics-email-name'
value={email.name}
// translator: %d is the order number of the email, first email, second email, etc.
subValue={sprintf(__('Email %d', 'mailpoet'), email.order)}
/>,
value: email.name
display: (
<Cell
className="mailpoet-automation-analytics-email-name"
value={email.name}
// translator: %d is the order number of the email, first email, second email, etc.
subValue={sprintf(__('Email %d', 'mailpoet'), email.order)}
/>
),
value: email.name,
},
{
display: <Cell
value={<Tooltip text={__('View sending status', 'mailpoet')}><a href={`?page=mailpoet-newsletters#/sending-status/${email.id}`}>{email.sent.current}</a></Tooltip>}
subValue={
// Shows the percentage of sent emails compared to the previous email
percentageFormatter.format(calculatePercentage(email.sent.current, email.sent.previous, true)/100)
}
/>,
value: email.sent.current
},
{
display: <Cell
value={email.opened.current}
subValue={
// Shows the percentage of opened emails compared to the number of sent emails
percentageFormatter.format(calculatePercentage(email.opened.current, email.sent.current)/100)
}
/>,
value: email.opened.current
},
{
display: <Cell
value={email.clicked.current}
className={ email.sent.current > 0 ? 'mailpoet-automation-analytics-email-clicked' : '' }
subValue={percentageFormatter.format(clickedPercentage/100)}
badge={email.sent.current > 0 ? clickedBadge.badge : undefined}
badgeType={email.sent.current > 0 ? clickedBadge.badgeType : undefined}
/>,
value: email.clicked.current
},
{
display: <Cell
value={
<Tooltip text={__('View orders', 'mailpoet')}>
<a href="#" onClick={
(e) => {
e.preventDefault();
openOrders()
}
}>{
email.orders.current
display: (
<Cell
value={
<Tooltip text={__('View sending status', 'mailpoet')}>
<a
href={`?page=mailpoet-newsletters#/sending-status/${email.id}`}
>
{email.sent.current}
</a>
</Tooltip>
}
</a>
</Tooltip>}
/>,
value: email.orders.current
subValue={
// Shows the percentage of sent emails compared to the previous email
percentageFormatter.format(
calculatePercentage(
email.sent.current,
email.sent.previous,
true,
) / 100,
)
}
/>
),
value: email.sent.current,
},
{
display: <Cell
value={formattedPrice(email.revenue.current)}
/>,
value: email.revenue.current
display: (
<Cell
value={email.opened.current}
subValue={
// Shows the percentage of opened emails compared to the number of sent emails
percentageFormatter.format(
calculatePercentage(email.opened.current, email.sent.current) /
100,
)
}
/>
),
value: email.opened.current,
},
{
display: <Cell
value={email.unsubscribed.current}
/>,
value: email.unsubscribed.current
display: (
<Cell
value={email.clicked.current}
className={
email.sent.current > 0
? 'mailpoet-automation-analytics-email-clicked'
: ''
}
subValue={percentageFormatter.format(clickedPercentage / 100)}
badge={email.sent.current > 0 ? clickedBadge.badge : undefined}
badgeType={
email.sent.current > 0 ? clickedBadge.badgeType : undefined
}
/>
),
value: email.clicked.current,
},
{
display: (
<Cell
value={
<Tooltip text={__('View orders', 'mailpoet')}>
<a
href="#"
onClick={(e) => {
e.preventDefault();
openOrders();
}}
>
{email.orders.current}
</a>
</Tooltip>
}
/>
),
value: email.orders.current,
},
{
display: <Cell value={formattedPrice(email.revenue.current)} />,
value: email.revenue.current,
},
{
display: <Cell value={email.unsubscribed.current} />,
value: email.unsubscribed.current,
},
{
display: <Actions id={email.id} previewUrl={email.previewUrl} />,
value: null
value: null,
},
]
})
];
});
}

View File

@@ -1,36 +1,64 @@
import {__} from "@wordpress/i18n";
import {locale} from "../../../../../../config";
import {EmailStats} from "../../../store";
import {formattedPrice} from "../../../formatter";
import { __ } from '@wordpress/i18n';
import { locale } from '../../../../../../config';
import { EmailStats } from '../../../store';
import { formattedPrice } from '../../../formatter';
export function calculateSummary(rows:EmailStats[]) {
export function calculateSummary(rows: EmailStats[]) {
if (rows.length === 0) {
return [];
}
const data = rows.reduce((acc, row) => {
acc.sent += row.sent.current;
acc.opened += row.opened.current;
acc.clicked += row.clicked.current;
acc.orders += row.orders.current;
acc.unsubscribed += row.unsubscribed.current;
acc.revenue += row.revenue.current;
return acc;
}, {
sent: 0,
opened: 0,
clicked: 0,
orders: 0,
unsubscribed: 0,
revenue: 0,
});
const data = rows.reduce(
(acc, row) => {
acc.sent += row.sent.current;
acc.opened += row.opened.current;
acc.clicked += row.clicked.current;
acc.orders += row.orders.current;
acc.unsubscribed += row.unsubscribed.current;
acc.revenue += row.revenue.current;
return acc;
},
{
sent: 0,
opened: 0,
clicked: 0,
orders: 0,
unsubscribed: 0,
revenue: 0,
},
);
const summary = [
{ label: __('sent', 'mailpoet'), value: Intl.NumberFormat(locale.toString(), { notation: 'compact' }).format(data.sent) },
{ label: __('opened', 'mailpoet'), value: Intl.NumberFormat(locale.toString(), { notation: 'compact' }).format(data.opened) },
{ label: __('clicked', 'mailpoet'), value: Intl.NumberFormat(locale.toString(), { notation: 'compact' }).format(data.clicked) },
{ label: __('orders', 'mailpoet'), value: Intl.NumberFormat(locale.toString(), { notation: 'compact' }).format(data.orders) },
const summary = [
{
label: __('sent', 'mailpoet'),
value: Intl.NumberFormat(locale.toString(), {
notation: 'compact',
}).format(data.sent),
},
{
label: __('opened', 'mailpoet'),
value: Intl.NumberFormat(locale.toString(), {
notation: 'compact',
}).format(data.opened),
},
{
label: __('clicked', 'mailpoet'),
value: Intl.NumberFormat(locale.toString(), {
notation: 'compact',
}).format(data.clicked),
},
{
label: __('orders', 'mailpoet'),
value: Intl.NumberFormat(locale.toString(), {
notation: 'compact',
}).format(data.orders),
},
{ label: __('revenue', 'mailpoet'), value: formattedPrice(data.revenue) },
{ label: __('unsubscribed', 'mailpoet'), value: Intl.NumberFormat(locale.toString(), { notation: 'compact' }).format(data.unsubscribed) },
{
label: __('unsubscribed', 'mailpoet'),
value: Intl.NumberFormat(locale.toString(), {
notation: 'compact',
}).format(data.unsubscribed),
},
];
return summary;

View File

@@ -1,7 +1,7 @@
import CurrencyFactory from "@woocommerce/currency/build";
import {MailPoet} from "../../../../../mailpoet";
import CurrencyFactory from '@woocommerce/currency/build';
import { MailPoet } from '../../../../../mailpoet';
export function formattedPrice(price: number) : string {
export function formattedPrice(price: number): string {
const storeCurrency = CurrencyFactory(MailPoet.WooCommerceStoreConfig);
return storeCurrency.formatAmount(price);
}

View File

@@ -82,15 +82,17 @@ declare module '@woocommerce/blocks-checkout' {
function registerCheckoutBlock(options: CheckoutBlockOptions): void;
}
type WooCommerceStoreConfig = {
precision: number | string | null;
decimalSeparator: string;
thousandSeparator: string;
code: string;
symbol: string;
symbolPosition: 'left' | 'right' | 'left_space' | 'right_space';
priceFormat?: string;
} | undefined
type WooCommerceStoreConfig =
| {
precision: number | string | null;
decimalSeparator: string;
thousandSeparator: string;
code: string;
symbol: string;
symbolPosition: 'left' | 'right' | 'left_space' | 'right_space';
priceFormat?: string;
}
| undefined;
interface Window {
ajaxurl: string;