Add interactive elements to email tab

[MAILPOET-5092]

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/emails/actions.tsx

@@ -1,5 +1,37 @@
+import {__} from "@wordpress/i18n";
+import {DropdownMenu} from "@wordpress/components";
+import {moreVertical, pencil, seen} from "@wordpress/icons";
 
-
-export function Actions({id}): JSX.Element {
-  return <p>Actions for {id}</p>
+type ActionsProps = {
+  id:number;
+  previewUrl:string;
+}
+export function Actions({id, previewUrl}:ActionsProps): JSX.Element {
+  const controls = [
+    {
+      title: __('Preview email', 'mailpoet'),
+      icon: seen,
+      onClick: () => {
+        window.location.href = previewUrl
+      },
+    },
+    {
+      title: __('Edit email', 'mailpoet'),
+      icon: pencil,
+      onClick: () => {
+        window.location.href = `?page=mailpoet-newsletter-editor&id=${id}&context=automation`
+      },
+    },
+  ]
+  return <div style={{display:"flex",justifyContent:"center",alignItems:"center"}}>
+    <p><a href={`admin.php?page=mailpoet-newsletters#/stats/${id}`}>{__('Statistics', 'mailpoet')}</a></p>
+
+    <DropdownMenu
+      className="mailpoet-automation-listing-more-button"
+      label={__('More', 'mailpoet')}
+      icon={moreVertical}
+      controls={controls}
+      popoverProps={{ position: 'bottom left' }}
+    />
+  </div>
 }

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/emails/cell.tsx

@@ -1,23 +1,17 @@
 type CellProps = {
-  value: number | string;
+  value: number | string | JSX.Element
   subValue?: number | string;
-  link?: string;
   badge?: string;
   badgeType?: string;
   className?: string;
 }
-export function Cell({value, subValue, link, badge, badgeType, className}: CellProps): JSX.Element {
+export function Cell({value, subValue, badge, badgeType, className}: CellProps): JSX.Element {
 
-  const badgeElement = badge ? <span className={`mailpoet-analytics-badge`}>{badge}</span> : null
-  const mainElement = link === undefined ?
-    <p className={`mailpoet-analytics-main-value ${className??''} ${badgeType??''}`}>
+  const badgeElement = badge ? <span className="mailpoet-analytics-badge">{badge}</span> : null
+  const mainElement = <div className={`mailpoet-analytics-main-value ${className??''} ${badgeType??''}`}>
       {badgeElement}
       {value}
-    </p> :
-    <p className={`mailpoet-analytics-main-value ${badgeType??''}`}>
-      {badgeElement}
-      <a href={link}>{value}</a>
-    </p>
+    </div>
 
 
   return (

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/emails/rows.tsx

@@ -1,3 +1,4 @@
+import {Tooltip} from "@wordpress/components";
 import {__, sprintf} from "@wordpress/i18n";
 import {EmailStats} from "../../../store";
 import {Actions} from "./actions";
@@ -27,6 +28,12 @@ function percentageBadgeCalculation(percentage:number) : {badge: string, badgeTy
 }
 
 export function transformEmailsToRows(emails: EmailStats[]) {
+
+  const openOrders = () => {
+    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
@@ -45,7 +52,7 @@ export function transformEmailsToRows(emails: EmailStats[]) {
       },
       {
         display: <Cell
-          value={email.sent.current}
+          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)
@@ -75,7 +82,18 @@ export function transformEmailsToRows(emails: EmailStats[]) {
       },
       {
         display: <Cell
-          value={email.orders.current}
+          value={
+          <Tooltip text={__('View orders', 'mailpoet')}>
+            <a href="#" onClick={
+              (e) => {
+                e.preventDefault();
+                openOrders()
+              }
+            }>{
+              email.orders.current
+            }
+            </a>
+          </Tooltip>}
         />,
         value: email.orders.current
       },
@@ -92,7 +110,7 @@ export function transformEmailsToRows(emails: EmailStats[]) {
         value: email.unsubscribed.current
       },
       {
-        display: <Actions id={email.id} />,
+        display: <Actions id={email.id} previewUrl={email.previewUrl} />,
         value: null
       },
     ]

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/index.tsx

@@ -23,20 +23,24 @@ export function Tabs(): JSX.Element {
   const tabs = [
     {
       name: 'automation-flow',
+      className: 'mailpoet-analytics-tab-flow',
       title: __('Automation flow', 'mailpoet'),
     },
   ];
   if (hasEmails) {
     tabs.push({
       name: 'automation-emails',
+      className: 'mailpoet-analytics-tab-emails',
       title: __('Emails', 'mailpoet'),
     });
     tabs.push({
       name: 'automation-orders',
+      className: 'mailpoet-analytics-tab-orders',
       title: _x('Orders', 'WooCommerce orders', 'mailpoet'),
     });
     tabs.push({
       name: 'automation-subscribers',
+      className: 'mailpoet-analytics-tab-subscribers',
       title: __('Subscribers', 'mailpoet'),
     });
   }

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/store/types.ts

@@ -17,6 +17,7 @@ export type EmailStats = {
   id: number;
   order: number;
   name: string;
+  previewUrl: string;
   sent: CurrentAndPrevious;
   opened: CurrentAndPrevious;
   clicked: CurrentAndPrevious;

mailpoet/lib/Automation/Integrations/MailPoet/Analytics/Controller/OverviewStatisticsController.php

@@ -11,6 +11,7 @@ use MailPoet\Entities\StatisticsOpenEntity;
 use MailPoet\Newsletter\NewslettersRepository;
 use MailPoet\Newsletter\Statistics\NewsletterStatisticsRepository;
 use MailPoet\Newsletter\Statistics\WooCommerceRevenue;
+use MailPoet\Newsletter\Url as NewsletterUrl;
 
 class OverviewStatisticsController {
   /** @var NewslettersRepository */
@@ -19,12 +20,17 @@ class OverviewStatisticsController {
   /** @var NewsletterStatisticsRepository */
   private $newsletterStatisticsRepository;
 
+  /** @var NewsletterUrl */
+  private $newsletterUrl;
+
   public function __construct(
     NewslettersRepository $newslettersRepository,
-    NewsletterStatisticsRepository $newsletterStatisticsRepository
+    NewsletterStatisticsRepository $newsletterStatisticsRepository,
+    NewsletterUrl $newsletterUrl
   ) {
     $this->newslettersRepository = $newslettersRepository;
     $this->newsletterStatisticsRepository = $newsletterStatisticsRepository;
+    $this->newsletterUrl = $newsletterUrl;
   }
 
   public function getStatisticsForAutomation(Automation $automation, Query $query): array {
@@ -71,6 +77,7 @@ class OverviewStatisticsController {
       $data['emails'][$newsletterId]['unsubscribed']['current'] = $statistic->getUnsubscribeCount();
       $data['emails'][$newsletterId]['orders']['current'] = $statistic->getWooCommerceRevenue() ? $statistic->getWooCommerceRevenue()->getOrdersCount() : 0;
       $data['emails'][$newsletterId]['revenue']['current'] = $statistic->getWooCommerceRevenue() ? $statistic->getWooCommerceRevenue()->getValue() : 0;
+      $data['emails'][$newsletterId]['previewUrl'] = $this->newsletterUrl->getViewInBrowserUrl($newsletter);
       $data['emails'][$newsletterId]['order'] = count($data['emails']);
     }