Apply prettier

2023-06-19 08:20:55 +03:00
parent c03a3becc4
commit 8b1d51fcd6
7 changed files with 305 additions and 184 deletions
--- a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/overview/index.tsx
+++ b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/overview/index.tsx
@@ -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,
+        )}
      />,
    );
  }
--- a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/emails/cell.tsx
+++ b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/emails/cell.tsx
@@ -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>
-  )
+  );
 }
--- a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/emails/index.tsx
+++ b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/emails/index.tsx
@@ -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}
+    />
+  );
 }
--- a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/emails/rows.tsx
+++ b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/emails/rows.tsx
@@ -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,
      },
-    ]
-  })
+    ];
+  });
 }
--- a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/emails/summary.tsx
+++ b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/emails/summary.tsx
@@ -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;
--- a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/formatter/index.tsx
+++ b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/formatter/index.tsx
@@ -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);
 }
--- a/mailpoet/assets/js/src/global.d.ts
+++ b/mailpoet/assets/js/src/global.d.ts
@@ -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;