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

Add steps to manage sender domain view, update texts and visuals

Browse Source 
[MAILPOET-6037]
This commit is contained in:
Jan Jakes
2024-06-06 09:06:34 +02:00
committed by Aschepikov
parent f7172e9186
commit c0a819f3bd
2 changed files with 129 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
mailpoet/assets/css/src/components-plugin/_common.scss
View File

@ -90,15 +90,58 @@ p.sender_email_address_warning:first-child {
}
}
.mailpoet_manage_sender_domain_wrapper {
ol {
counter-reset: item;
li {
counter-increment: item;
list-style: none;
margin: 24px 0 0 16px;
position: relative;
}
li:before {
align-items: center;
border: 1px solid #007cba;
border-radius: 99999px;
color: #007cba;
content: counter(item);
display: inline-flex;
height: 24px;
justify-content: center;
margin-left: -44px;
margin-right: 16px;
position: absolute;
width: 24px;
}
}
.mailpoet_manage_sender_domain_step_header {
padding: 2px 0 16px;
}
}
.mailpoet_manage_sender_domain {
th,
td {
padding-left: 16px;
}
.mailpoet_table_header {
font-weight: 700 !important;
text-align: center !important; // to prevent being overwritten by widefat table classes
}
.dns_record_type_column {
font-weight: 550 !important;
text-align: center !important; // to prevent being overwritten by widefat table classes
padding: 16px;
width: 70px;
}
.mailpoet-form-input {
border: 1px solid #757575;
border-radius: 2px;
width: 100%;
}
}

153
mailpoet/assets/js/src/common/manage-sender-domain/manage-sender-domain.tsx
View File

@ -1,5 +1,4 @@
import { Button, Loader, TypographyHeading as Heading } from 'common';
import { createInterpolateElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Grid } from 'common/grid';
import { SenderDomainEntity } from './manage-sender-domain-types';
@ -27,7 +26,7 @@ function ManageSenderDomain({
const { dns, domain } = rows[0];
return (
<div>
<div className="mailpoet_manage_sender_domain_wrapper">
<Heading level={2}> {__('Manage Sender Domain ', 'mailpoet')} </Heading>
<p>
{__(
@ -35,74 +34,90 @@ function ManageSenderDomain({
'mailpoet',
)}
</p>
<p>
{createInterpolateElement(
__(
'Please add the following DNS records to your domain’s DNS and click “Verify the DNS records”. Do note that it may take up to 24 hours for DNS changes to propagate after you make the change. <link>Read the guide</link>.',
'mailpoet',
),
{
link: (
// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
<a
className="mailpoet-link"
href="https://kb.mailpoet.com/article/188-how-to-set-up-mailpoet-sending-service#dns"
target="_blank"
rel="noopener noreferrer"
/>
),
},
)}
</p>
<table className="mailpoet_manage_sender_domain widefat fixed striped">
<thead>
<tr>
<th className="mailpoet_table_header">
{' '}
{__('Type', 'mailpoet')}{' '}
</th>
<th className="mailpoet_table_header">
{' '}
{__('Host', 'mailpoet')}{' '}
</th>
<th className="mailpoet_table_header">
{' '}
{__('Value', 'mailpoet')}{' '}
</th>
</tr>
</thead>
<tbody>
{dns.map((dnsRecord, index) => (
<tr key={`row_${domain}_${dnsRecord.host}`}>
<td className="dns_record_type_column">{dnsRecord.type}</td>
<td>
<DomainKeyComponent
name={`${dnsRecord.type}_host_${index}`}
value={dnsRecord.host}
readOnly
tooltip={__('Click here to copy', 'mailpoet')}
/>
<DomainHostInfo dnsRecord={dnsRecord} />
</td>
<td>
<DomainKeyComponent
name={`${dnsRecord.type}_value_${index}`}
value={dnsRecord.value}
readOnly
tooltip={__('Click here to copy', 'mailpoet')}
/>
<DomainValueInfo dnsRecord={dnsRecord} />
</td>
</tr>
))}
</tbody>
</table>
<div className="mailpoet_manage_sender_domain_actions">
<Button withSpinner={loadingButton} onClick={verifyDnsButtonClicked}>
{__('Verify the DNS records', 'mailpoet')}
</Button>
</div>
<ol>
<li>
<div className="mailpoet_manage_sender_domain_step_header">
<strong>
{__(
'Please add the following DNS records to your domain’s DNS settings.',
)}{' '}
</strong>
<a
href="https://kb.mailpoet.com/article/295-spf-dkim-dmarc#authenticating"
target="_blank"
rel="noopener noreferrer"
>
{__('Read the guide', 'mailpoet')}
</a>
</div>
<table className="mailpoet_manage_sender_domain widefat striped">
<thead>
<tr>
<th className="mailpoet_table_header">
{' '}
{__('Type', 'mailpoet')}{' '}
</th>
<th className="mailpoet_table_header">
{' '}
{__('Host', 'mailpoet')}{' '}
</th>
<th className="mailpoet_table_header">
{' '}
{__('Value', 'mailpoet')}{' '}
</th>
</tr>
</thead>
<tbody>
{dns.map((dnsRecord, index) => (
<tr key={`row_${domain}_${dnsRecord.host}`}>
<td className="dns_record_type_column">{dnsRecord.type}</td>
<td>
<DomainKeyComponent
name={`${dnsRecord.type}_host_${index}`}
value={dnsRecord.host}
readOnly
tooltip={__('Click here to copy', 'mailpoet')}
/>
<DomainHostInfo dnsRecord={dnsRecord} />
</td>
<td>
<DomainKeyComponent
name={`${dnsRecord.type}_value_${index}`}
value={dnsRecord.value}
readOnly
tooltip={__('Click here to copy', 'mailpoet')}
/>
<DomainValueInfo dnsRecord={dnsRecord} />
</td>
</tr>
))}
</tbody>
</table>
</li>
<li>
<div className="mailpoet_manage_sender_domain_step_header">
<strong>
{__(
'Once added, click the button below to authenticate your sender domain.',
'mailpoet',
)}
</strong>{' '}
{__(
'MailPoet would verify your DNS records to ensure it matches. Do note that it may take up to 24 hours for DNS changes to propagate after you make the change.',
'mailpoet',
)}
</div>
<div className="mailpoet_manage_sender_domain_actions">
<Button
withSpinner={loadingButton}
onClick={verifyDnsButtonClicked}
>
{__('Verify the DNS records', 'mailpoet')}
</Button>
</div>
</li>
</ol>
</div>
);
}