Skip to content

Commit 1e5638d

Browse files
rcrdortizrcrdortiz
authored
Hosting Dashboard Emails: Empty state, no emails (#106087)
1 parent 308d6eb commit 1e5638d

File tree

5 files changed

+93
-4
lines changed

5 files changed

+93
-4
lines changed

‎client/dashboard/emails/components/NoDomainsAvailableEmptyState.tsx‎ renamed to ‎client/dashboard/emails/components/no-domains-available-empty-state.tsx‎

File renamed without changes.

‎client/dashboard/emails/components/no-emails-available-empty-state.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Button } from '@wordpress/components';
2+
import { __ } from '@wordpress/i18n';
3+
import { DataViewsEmptyState } from '../../components/dataviews-empty-state';
4+
import EmailEmptyIllustration from '../resources/email-empty-illustration';
5+
6+
const NoEmailsAvailableEmptyState = () => {
7+
return (
8+
<DataViewsEmptyState
9+
title={ __( 'Stand out with professional email' ) }
10+
description={ __(
11+
'Get a personalized email address and build your brand with every email you send.'
12+
) }
13+
illustration={ <EmailEmptyIllustration /> }
14+
actions={
15+
<>
16+
<Button variant="primary">{ __( 'Add mailbox' ) }</Button>
17+
<Button className="emails__add-email-forwarder" variant="secondary">
18+
{ __( 'Add email forwarder' ) }
19+
</Button>
20+
</>
21+
}
22+
/>
23+
);
24+
};
25+
26+
export default NoEmailsAvailableEmptyState;

‎client/dashboard/emails/index.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import { DataViewsCard } from '../components/dataviews-card';
88
import { OptInWelcome } from '../components/opt-in-welcome';
99
import { PageHeader } from '../components/page-header';
1010
import PageLayout from '../components/page-layout';
11-
import NoDomainsAvailableEmptyState from './components/NoDomainsAvailableEmptyState';
11+
import NoDomainsAvailableEmptyState from './components/no-domains-available-empty-state';
12+
import NoEmailsAvailableEmptyState from './components/no-emails-available-empty-state';
1213
import { createEmailActions, DEFAULT_EMAILS_VIEW, emailFields } from './dataviews';
1314
import { domainHasEmail } from './utils/email-utils';
1415
import type { View } from '@wordpress/dataviews';
@@ -86,7 +87,13 @@ function Emails() {
8687
actions={ actions }
8788
defaultLayouts={ { table: {} } }
8889
paginationInfo={ paginationInfo }
89-
empty={ domainsWithoutEmails ? <></> : <NoDomainsAvailableEmptyState /> }
90+
empty={
91+
domainsWithoutEmails ? (
92+
<NoEmailsAvailableEmptyState />
93+
) : (
94+
<NoDomainsAvailableEmptyState />
95+
)
96+
}
9097
/>
9198
</DataViewsCard>
9299
</PageLayout>

‎client/dashboard/emails/resources/email-empty-illustration.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react';
2+
3+
export default function EmailEmptyIllustration() {
4+
return (
5+
<svg
6+
width="408"
7+
height="280"
8+
viewBox="0 0 408 280"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
xmlnsXlink="http://www.w3.org/1999/xlink"
12+
>
13+
<rect opacity="0.8" x="2" y="1" width="405" height="279" fill="url(#pattern0_213_6195)" />
14+
<rect x="128.788" y="84" width="151.253" height="112.039" rx="5" fill="#FCFCFC" />
15+
<path
16+
d="M274.709 83.9502C277.672 83.9504 280.074 86.3525 280.074 89.3154V92.2637C280.092 92.3562 280.092 92.4499 280.074 92.542V190.689C280.074 193.652 277.672 196.054 274.709 196.055H133.115C130.152 196.054 127.75 193.652 127.75 190.689V89.3154C127.75 86.3526 130.152 83.9505 133.115 83.9502H274.709ZM129.25 190.689C129.25 192.824 130.981 194.554 133.115 194.555H274.709C276.843 194.554 278.574 192.824 278.574 190.689V94.0771L209.047 155.334C206.114 157.917 201.716 157.913 198.789 155.323L129.25 93.8125V190.689ZM133.115 85.4502C130.981 85.4505 129.25 87.181 129.25 89.3154V91.8135C129.262 91.8227 129.274 91.8318 129.285 91.8418L199.783 154.2C202.144 156.288 205.691 156.292 208.056 154.208L278.574 92.0791V89.3154C278.574 87.181 276.843 85.4504 274.709 85.4502H133.115Z"
17+
fill="url(#paint0_linear_213_6195)"
18+
/>
19+
<defs>
20+
<pattern
21+
id="pattern0_213_6195"
22+
patternContentUnits="objectBoundingBox"
23+
width="0.0335802"
24+
height="0.0487455"
25+
>
26+
<use xlinkHref="#image0_213_6195" transform="scale(0.000493827 0.000716846)" />
27+
</pattern>
28+
<linearGradient
29+
id="paint0_linear_213_6195"
30+
x1="120.826"
31+
y1="139.373"
32+
x2="246.712"
33+
y2="139.373"
34+
gradientUnits="userSpaceOnUse"
35+
>
36+
<stop stop-color="#3858E9" />
37+
<stop offset="1" stop-color="#069E08" />
38+
</linearGradient>
39+
<image
40+
id="image0_213_6195"
41+
width="68"
42+
height="68"
43+
preserveAspectRatio="none"
44+
xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAYAAAA4E5OyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAylpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMC1jMDAxIDc5LmMwMjA0YjJkZWYsIDIwMjMvMDIvMDItMTI6MTQ6MjQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyNC41IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU4MTBCRTc4NkI2QTExRjBCOTI1QjRCNzdDOENGRkMzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU4MTBCRTc5NkI2QTExRjBCOTI1QjRCNzdDOENGRkMzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTgxMEJFNzY2QjZBMTFGMEI5MjVCNEI3N0M4Q0ZGQzMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTgxMEJFNzc2QjZBMTFGMEI5MjVCNEI3N0M4Q0ZGQzMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5uSzX6AAAA2UlEQVR42uzaTQ6CMBAGUMaw0FtwET28XoRb6K6OCYk/29aC5n3JBFYd+gIlaRqllEGe2SEAAgQIECBAgAABAgQIECBA/j1j7QARMeXllPXYWLlkzZ3n8Na/lDKv/YYcs/ZZh+XBeqdp/xYg8XK/xvZb0/4tQM5Z16zb8sn0TtP+UbunmmvIphbF2vn4ywABAgQIECBAgAABAgQIECBAgAARIECAAAECBAgQIBvM2GCMadjQ+ZDa/s6HfAHE+ZCPOB/iLwMEiAABAgQIECBAgAABAgTID+cuwADKAy+BgXQl5gAAAABJRU5ErkJggg=="
45+
/>
46+
</defs>
47+
</svg>
48+
);
49+
}

‎client/dashboard/sites/emails/index.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import { siteRoute } from '../../app/router/sites';
99
import { DataViewsCard } from '../../components/dataviews-card';
1010
import { PageHeader } from '../../components/page-header';
1111
import PageLayout from '../../components/page-layout';
12-
import NoDomainsAvailableEmptyState from '../../emails/components/NoDomainsAvailableEmptyState';
12+
import NoDomainsAvailableEmptyState from '../../emails/components/no-domains-available-empty-state';
13+
import NoEmailsAvailableEmptyState from '../../emails/components/no-emails-available-empty-state';
1314
import { createEmailActions, DEFAULT_EMAILS_VIEW, emailFields } from '../../emails/dataviews';
1415
import type { View } from '@wordpress/dataviews';
1516

@@ -63,7 +64,13 @@ function SiteEmails() {
6364
actions={ actions }
6465
defaultLayouts={ { table: {} } }
6566
paginationInfo={ paginationInfo }
66-
empty={ nonWpcomDomains.size > 0 ? <></> : <NoDomainsAvailableEmptyState /> }
67+
empty={
68+
nonWpcomDomains.size > 0 ? (
69+
<NoEmailsAvailableEmptyState />
70+
) : (
71+
<NoDomainsAvailableEmptyState />
72+
)
73+
}
6774
/>
6875
</DataViewsCard>
6976
</PageLayout>

0 commit comments

Comments
 (0)