Create new tab navigation helper
[MAILPOET-5091]
This commit is contained in:
@@ -1,10 +1,12 @@
|
|||||||
import { Tooltip } from '@wordpress/components';
|
import { Tooltip } from '@wordpress/components';
|
||||||
import { __, sprintf } from '@wordpress/i18n';
|
import { __, sprintf } from '@wordpress/i18n';
|
||||||
|
import { addQueryArgs } from '@wordpress/url';
|
||||||
import { EmailStats } from '../../../store';
|
import { EmailStats } from '../../../store';
|
||||||
import { Actions } from './actions';
|
import { Actions } from './actions';
|
||||||
import { locale } from '../../../../../../config';
|
import { locale } from '../../../../../../config';
|
||||||
import { Cell } from './cell';
|
import { Cell } from './cell';
|
||||||
import { formattedPrice } from '../../../formatter';
|
import { formattedPrice } from '../../../formatter';
|
||||||
|
import { openTab } from '../../../navigation/open_tab';
|
||||||
|
|
||||||
const percentageFormatter = Intl.NumberFormat(locale.toString(), {
|
const percentageFormatter = Intl.NumberFormat(locale.toString(), {
|
||||||
style: 'percent',
|
style: 'percent',
|
||||||
@@ -47,13 +49,6 @@ function percentageBadgeCalculation(percentage: number): {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function transformEmailsToRows(emails: EmailStats[]) {
|
export function transformEmailsToRows(emails: EmailStats[]) {
|
||||||
const openOrders = () => {
|
|
||||||
const tab: HTMLButtonElement | null = document.querySelector(
|
|
||||||
'.mailpoet-analytics-tab-orders',
|
|
||||||
);
|
|
||||||
tab?.click();
|
|
||||||
};
|
|
||||||
|
|
||||||
return emails.map((email) => {
|
return emails.map((email) => {
|
||||||
// Shows the percentage of clicked emails compared to the number of sent emails
|
// Shows the percentage of clicked emails compared to the number of sent emails
|
||||||
const clickedPercentage = calculatePercentage(
|
const clickedPercentage = calculatePercentage(
|
||||||
@@ -138,10 +133,12 @@ export function transformEmailsToRows(emails: EmailStats[]) {
|
|||||||
value={
|
value={
|
||||||
<Tooltip text={__('View orders', 'mailpoet')}>
|
<Tooltip text={__('View orders', 'mailpoet')}>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href={addQueryArgs(window.location.href, {
|
||||||
|
tab: 'automation-orders',
|
||||||
|
})}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
openOrders();
|
openTab('orders');
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{`${email.orders}`}
|
{`${email.orders}`}
|
||||||
|
@@ -0,0 +1,13 @@
|
|||||||
|
type ValidTabs = 'automation-flow' | 'emails' | 'orders' | 'subscribers';
|
||||||
|
export function openTab(tab: ValidTabs): void {
|
||||||
|
const classMap: Record<ValidTabs, string> = {
|
||||||
|
'automation-flow': 'mailpoet-analytics-tab-flow',
|
||||||
|
emails: 'mailpoet-analytics-tab-emails',
|
||||||
|
orders: 'mailpoet-analytics-tab-orders',
|
||||||
|
subscribers: 'mailpoet-analytics-tab-subscribers',
|
||||||
|
};
|
||||||
|
const tabElement: HTMLButtonElement | null = document.querySelector(
|
||||||
|
`.${classMap[tab]}`,
|
||||||
|
);
|
||||||
|
tabElement?.click();
|
||||||
|
}
|
Reference in New Issue
Block a user