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

Create SendWith page

Browse Source 
[MAILPOET-2679]
This commit is contained in:
Amine Ben hammou
2020-04-07 19:24:46 +02:00
committed by Veljko V
parent 96c2aa0b84
commit b42485a3d9
4 changed files with 148 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/js/src/settings/pages/index.tsx
View File

@@ -1,6 +1,6 @@
export { default as Basics } from './basics/basics';
export { default as Advanced } from './advanced/advanced';
export { default as KeyActivation } from './key_activation/key_activation';
export { default as SendWith } from './send_with';
export { default as SendWith } from './send_with/send_with';
export { default as SignupConfirmation } from './signup_confirmation/signup_confirmation';
export { default as WooCommerce } from './woo_commerce/woo_commerce';

5
assets/js/src/settings/pages/send_with.tsx
View File

@@ -1,5 +0,0 @@
import React from 'react';
export default function SendWith() {
return <p>Send With!</p>;
}

146
assets/js/src/settings/pages/send_with/send_with.tsx Normal file
View File

@@ -0,0 +1,146 @@
import React from 'react';
import classnames from 'classnames';
import ReactStringReplace from 'react-string-replace';
import { useSelector } from 'settings/store/hooks';
import { MssStatus } from 'settings/store/types';
import { t } from 'common/functions';
import { Link } from 'react-router-dom';
export default function SendWith() {
const isNewUser = useSelector('isNewUser')();
const isMssActive = useSelector('isMssActive')();
const { mssStatus } = useSelector('getKeyActivationState')();
const isMssKeyValid = mssStatus !== null && mssStatus !== MssStatus.INVALID;
const freePlanUrl = (window as any).mailpoet_free_plan_url;
return (
<ul className="mailpoet_sending_methods">
<li
data-group="mailpoet"
className={classnames({
mailpoet_active: isMssActive,
mailpoet_invalid_key: !isMssKeyValid,
})}
>
<div className="mailpoet_sending_method_description">
<h3>{t('mssTitle')}</h3>
<div className="mailpoet_description">
{isMssActive && (
<span id="mailpoet_sending_method_active_text">
<strong>{t('youreSendingWithMss')}</strong>
</span>
)}
{!isMssActive
&& (
<span id="mailpoet_sending_method_inactive_text">
<strong>{t('solveSendingProblems')}</strong>
</span>
)}
<ul className="sending-method-benefits mailpoet_success">
<li className="mailpoet_success_item">{t('mssBenefit1')}</li>
<li className="mailpoet_success_item">{t('mssBenefit2')}</li>
<li className="mailpoet_success_item">{t('mssBenefit3')}</li>
<li className="mailpoet_success_item">{t('mssBenefit4')}</li>
<li className="mailpoet_success_item">{t('mssBenefit5')}</li>
</ul>
<p className="mailpoet_sending_methods_help">
<a
target="_blank"
rel="noopener noreferrer"
data-beacon-article="5a3d4c260428631938003802"
href="https://kb.mailpoet.com/article/235-video-guide-sending-options"
className={classnames('mailpoet_badge mailpoet_badge_video', {
mailpoet_badge_video_grey: !isNewUser,
})}
>
<span className="dashicons dashicons-format-video" />
{t('seeVideo')}
</a>
</p>
</div>
</div>
<div className={classnames('mailpoet_status', {
mailpoet_invalid_key: !isMssActive || !isMssKeyValid,
})}
>
{isMssActive && isMssKeyValid
&& (
<div className="mailpoet_activated">
<span>{t('activated')}</span>
</div>
)}
<div className="mailpoet_actions">
{!isMssKeyValid && (
<div className="mailpoet_invalid_key">
<a className="button-primary" href={freePlanUrl} rel="noopener noreferrer" target="_blank">{t('freeUpto')}</a>
{' '}
{t('or')}
{' '}
{ReactStringReplace(t('enterYourKey'), /\[link\](.*?)\[\/link\]/g,
(match, i) => (
<Link key={i} to="/premium">{match}</Link>
))}
</div>
)}
{!isMssActive && isMssKeyValid && (
<div className="mailpoet_valid_key">
<button type="button" className="mailpoet_sending_service_activate button-primary">{t('activate')}</button>
</div>
)}
</div>
</div>
</li>
<li
data-group="other"
className={classnames({ mailpoet_active: !isMssActive })}
>
<div className="mailpoet_sending_method_description">
<h3>{t('otherTitle')}</h3>
<div className="mailpoet_description">
<strong>{t('otherDescription')}</strong>
<ul className="sending-method-benefits mailpoet_error">
<li className="mailpoet_error_item">{t('otherCons1')}</li>
<li className="mailpoet_error_item">{t('otherCons2')}</li>
<li className="mailpoet_error_item">{t('otherCons3')}</li>
<li className="mailpoet_error_item">
{ReactStringReplace(t('otherCons4'), /\[link\](.*?)\[\/link\]/g,
(match, i) => (
<a
key={i}
target="_blank"
rel="noopener noreferrer"
href="https://wordpress.org/plugins/bounce-handler-mailpoet/"
>
{match}
</a>
))}
</li>
</ul>
</div>
</div>
<div className="mailpoet_status">
<span>{t('activated')}</span>
<div className="mailpoet_actions">
{isMssActive && (
<a
className="button-primary mailpoet_other_sending_method_action"
href="?page=mailpoet-settings#mta/other"
>
{t('activate')}
</a>
)}
{!isMssActive && (
<a
className="button-secondary mailpoet_other_sending_method_action"
href="?page=mailpoet-settings#mta/other"
>
{t('configure')}
</a>
)}
</div>
</div>
</li>
</ul>
);
}