Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add NewsletterStats to Storybook [MAILPOET-3000]

Browse Source
This commit is contained in:
wxa
2020-07-30 23:25:57 +03:00
committed by Veljko V
parent beb11abaef
commit ab8ca18ec7
2 changed files with 67 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
assets/js/src/common/listings/_stories/newsletter_stats.tsx Normal file
View File

@@ -0,0 +1,66 @@
import React from 'react';
import { addHours, subHours } from 'date-fns';
import MailPoet from 'mailpoet';
import NewsletterStats from '../newsletter_stats';
import Heading from '../../typography/heading/heading';
MailPoet.I18n.add('excellentBadgeName', 'Excellent');
MailPoet.I18n.add('excellentBadgeTooltip', 'Congrats!');
MailPoet.I18n.add('goodBadgeName', 'Good');
MailPoet.I18n.add('goodBadgeTooltip', 'Good stuff.');
MailPoet.I18n.add('averageBadgeName', 'Average');
MailPoet.I18n.add('averageBadgeTooltip', 'Something to improve.');
MailPoet.I18n.add('openedStatTooltipExcellent', 'above 30%');
MailPoet.I18n.add('openedStatTooltipGood', 'between 10 and 30%');
MailPoet.I18n.add('openedStatTooltipAverage', 'under 10%');
MailPoet.I18n.add('clickedStatTooltipExcellent', 'above 3%');
MailPoet.I18n.add('clickedStatTooltipGood', 'between 1 and 3%');
MailPoet.I18n.add('clickedStatTooltipAverage', 'under 1%');
MailPoet.I18n.add('revenueStatsTooltipShort', 'Revenues by customer who clicked on this email in the last 2 weeks.');
export default {
title: 'Listing',
component: NewsletterStats,
};
export const NewsletterStatsComponent = () => (
<>
<Heading level={3}>With badges</Heading>
<NewsletterStats opened={1} clicked={0.1} newsletterId={1} />
<div className="mailpoet-gap" />
<NewsletterStats opened={11} clicked={1.1} newsletterId={2} />
<div className="mailpoet-gap" />
<NewsletterStats opened={31} clicked={3.1} newsletterId={3} />
<div className="mailpoet-gap" />
<Heading level={3}>With badges and revenues</Heading>
<NewsletterStats opened={1} clicked={0.1} revenues="10€" newsletterId={4} />
<div className="mailpoet-gap" />
<NewsletterStats opened={11} clicked={1.1} revenues="100€" newsletterId={5} />
<div className="mailpoet-gap" />
<NewsletterStats opened={31} clicked={3.1} revenues="1000€" newsletterId={6} />
<div className="mailpoet-gap" />
<Heading level={3}>No badges</Heading>
<NewsletterStats hideBadges opened={1} clicked={0.1} newsletterId={7} />
<div className="mailpoet-gap" />
<NewsletterStats hideBadges opened={11} clicked={1.1} newsletterId={8} />
<div className="mailpoet-gap" />
<NewsletterStats hideBadges opened={31} clicked={3.1} newsletterId={9} />
<div className="mailpoet-gap" />
<Heading level={3}>No badges, with revenues</Heading>
<NewsletterStats hideBadges opened={1} clicked={0.1} revenues="10€" newsletterId={10} />
<div className="mailpoet-gap" />
<NewsletterStats hideBadges opened={11} clicked={1.1} revenues="100€" newsletterId={11} />
<div className="mailpoet-gap" />
<NewsletterStats hideBadges opened={31} clicked={3.1} revenues="1000€" newsletterId={12} />
</>
);

1
assets/js/src/common/listings/newsletter_stats.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import MailPoet from 'mailpoet';
import classNames from 'classnames';
import StatsBadge from './newsletter_stats/stats';
import Tooltip from '../tooltip/tooltip';