Files
piratepoet/assets/js/src/settings/pages/advanced/transactional.tsx
2020-07-07 13:54:47 +02:00

81 lines
2.5 KiB
TypeScript

import React from 'react';
import ReactStringReplace from 'react-string-replace';
import { t, onChange } from 'common/functions';
import { Label, Inputs } from 'settings/components';
import { useSetting, useSelector } from 'settings/store/hooks';
export default function Transactional() {
const [provider] = useSetting('smtp_provider');
const isMssActive = useSelector('isMssActive')();
const [enabled, setEnabled] = useSetting('send_transactional_emails');
let methodLabel;
if (isMssActive) methodLabel = 'MailPoet Sending Service';
else if (provider === 'manual') methodLabel = 'SMTP';
else if (provider === 'SendGrid') methodLabel = 'SendGrid';
else if (provider === 'AmazonSES') methodLabel = 'Amazon SES';
else if (provider === 'server') methodLabel = t('hostOption');
return (
<>
<Label
title={t('transactionalTitle')}
description={(
<>
{t('transactionalDescription')}
{' '}
<a
href="https://kb.mailpoet.com/article/292-choose-how-to-send-your-wordpress-websites-emails"
data-beacon-article="5ddbf92504286364bc9228c5"
rel="noopener noreferrer"
target="_blank"
>
{t('transactionalLink')}
</a>
</>
)}
htmlFor=""
/>
<Inputs>
<input
type="radio"
id="transactional-enabled"
value="1"
checked={enabled === '1'}
onChange={onChange(setEnabled)}
/>
<label htmlFor="transactional-enabled">
{t('transactionalCurrentMethod').replace('%1$s', methodLabel)}
<br />
<span className="mailpoet-note">
{ReactStringReplace(t('transactionalMssNote'),
/\[link\](.*?)\[\/link\]/,
(text) => (
<a
key={text}
href="https://kb.mailpoet.com/article/292-choose-how-to-send-your-wordpress-websites-emails#attachments"
rel="noopener noreferrer"
data-beacon-article="5ddbf92504286364bc9228c5"
target="_blank"
>
{text}
</a>
))}
</span>
</label>
<br />
<input
type="radio"
id="transactional-disabled"
value=""
checked={enabled === ''}
onChange={onChange(setEnabled)}
/>
<label htmlFor="transactional-disabled">
{t('transactionalWP')}
</label>
</Inputs>
</>
);
}