Create new tab navigation helper

[MAILPOET-5091]
This commit is contained in:
David Remer
2023-06-30 08:13:30 +03:00
committed by Aschepikov
parent a5e00a08ef
commit 768ed43f9e
2 changed files with 19 additions and 9 deletions

View File

@@ -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}`}

View File

@@ -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();
}