Add weeks and months to the scheduling component

[MAILPOET-3763]
This commit is contained in:
Pavel Dohnal
2021-09-10 12:45:02 +02:00
committed by Veljko V
parent 54b216b7eb
commit b509b278ce
2 changed files with 9 additions and 1 deletions

View File

@@ -18,6 +18,7 @@ declare let window: ReengagementWindow;
export function NewsletterTypeReEngagement(): JSX.Element { export function NewsletterTypeReEngagement(): JSX.Element {
const [options] = useState({ const [options] = useState({
afterTimeNumber: window.settings.deactivate_subscriber_after_inactive_days, afterTimeNumber: window.settings.deactivate_subscriber_after_inactive_days,
afterTimeType: 'months',
}); });
return ( return (
<div> <div>
@@ -28,6 +29,7 @@ export function NewsletterTypeReEngagement(): JSX.Element {
<Grid.Column align="center" className="mailpoet-schedule-email"> <Grid.Column align="center" className="mailpoet-schedule-email">
<Scheduling <Scheduling
afterTimeNumber={options.afterTimeNumber} afterTimeNumber={options.afterTimeNumber}
afterTimeType={options.afterTimeType}
/> />
<Button <Button

View File

@@ -2,12 +2,14 @@ import React from 'react';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import Heading from 'common/typography/heading/heading'; import Heading from 'common/typography/heading/heading';
import Input from 'common/form/input/input'; import Input from 'common/form/input/input';
import Select from 'common/form/select/select';
interface Props { interface Props {
afterTimeNumber: string; afterTimeNumber: string;
afterTimeType: string;
} }
export function Scheduling({ afterTimeNumber }: Props): JSX.Element { export function Scheduling({ afterTimeNumber, afterTimeType }: Props): JSX.Element {
return ( return (
<> <>
<Heading level={4}>{MailPoet.I18n.t('selectEventToSendReEngagementEmail')}</Heading> <Heading level={4}>{MailPoet.I18n.t('selectEventToSendReEngagementEmail')}</Heading>
@@ -21,6 +23,10 @@ export function Scheduling({ afterTimeNumber }: Props): JSX.Element {
value={afterTimeNumber} value={afterTimeNumber}
dimension="small" dimension="small"
/> />
<Select isMinWidth value={afterTimeType}>
<option value="weeks">weeks</option>
<option value="months">months</option>
</Select>
</div> </div>
</> </>
); );