Skip to content

Commit 2943bee

Browse files
McastresHichamELBSI
Mcastres
authored and
HichamELBSI
committedMar 5, 2025·
chore: new iteration on the purchase pages
update: fix wrong import fix: import order fix: design review + add dark images fix: design review details chore: add alt text fix: image behavior on small screen fix: lonit issue fix: flickering add: translations chore: lint fix chore: fix lint
·
v5.12.1v4.25.22
1 parent 4ebc804 commit 2943bee

21 files changed

+1487
-155
lines changed
 

‎packages/core/admin/admin/src/pages/Settings/assets/purchase-page-audit-logs-illustration-dark.svg

+216

Error rendering embedded code

Invalid image source.

‎packages/core/admin/admin/src/pages/Settings/assets/purchase-page-audit-logs-illustration-light.svg

+9

Error rendering embedded code

Invalid image source.

‎packages/core/admin/admin/src/pages/Settings/assets/purchase-page-content-history-illustration-dark.svg

+156

Error rendering embedded code

Invalid image source.

‎packages/core/admin/admin/src/pages/Settings/assets/purchase-page-content-history-illustration-light.svg

+9

Error rendering embedded code

Invalid image source.

‎packages/core/admin/admin/src/pages/Settings/assets/purchase-page-sso-illustration-dark.svg

+86

Error rendering embedded code

Invalid image source.

‎packages/core/admin/admin/src/pages/Settings/assets/purchase-page-sso-illustration-light.svg

+9

Error rendering embedded code

Invalid image source.

‎packages/core/admin/admin/src/pages/Settings/pages/PurchaseAuditLogs.tsx

+96-30
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,112 @@
1-
import { Box, Main, EmptyStateLayout, LinkButton } from '@strapi/design-system';
2-
import { ExternalLink } from '@strapi/icons';
3-
import { EmptyPermissions } from '@strapi/icons/symbols';
1+
import { Box, Main, Flex, Typography, Grid, LinkButton } from '@strapi/design-system';
2+
import { ExternalLink, Check, Lightning } from '@strapi/icons';
43
import { useIntl } from 'react-intl';
54

65
import { Layouts } from '../../../components/Layouts/Layout';
6+
import { useTypedSelector } from '../../../core/store/hooks';
7+
import darkIllustration from '../assets/purchase-page-audit-logs-illustration-dark.svg';
8+
import lightIllustration from '../assets/purchase-page-audit-logs-illustration-light.svg';
79

810
const PurchaseAuditLogs = () => {
911
const { formatMessage } = useIntl();
12+
const currentTheme = useTypedSelector((state) => state.admin_app.theme.currentTheme);
1013

14+
const illustration = currentTheme === 'light' ? lightIllustration : darkIllustration;
1115
return (
1216
<Layouts.Root>
1317
<Main>
1418
<Layouts.Header
1519
title={formatMessage({ id: 'global.auditLogs', defaultMessage: 'Audit Logs' })}
16-
subtitle={formatMessage({
17-
id: 'Settings.permissions.auditLogs.listview.header.subtitle',
18-
defaultMessage: 'Logs of all the activities that happened in your environment',
19-
})}
2020
/>
21-
<Box paddingLeft={10} paddingRight={10}>
22-
<EmptyStateLayout
23-
icon={<EmptyPermissions width="16rem" />}
24-
content={formatMessage({
25-
id: 'Settings.permissions.auditLogs.not-available',
26-
defaultMessage:
27-
'Audit Logs is only available as part of a paid plan. Upgrade to get a searchable and filterable display of all activities.',
28-
})}
29-
action={
30-
<LinkButton
31-
variant="default"
32-
endIcon={<ExternalLink />}
33-
href="https://strapi.io/features/audit-logs?utm_campaign=In-Product-CTA&utm_source=Audit-Logs"
34-
isExternal
35-
target="_blank"
36-
>
37-
{formatMessage({
38-
id: 'global.learn-more',
39-
defaultMessage: 'Learn more',
40-
})}
41-
</LinkButton>
42-
}
43-
/>
21+
<Box marginLeft={10} marginRight={10} shadow="filterShadow" hasRadius background="neutral0">
22+
<Grid.Root>
23+
<Grid.Item col={6} s={12}>
24+
<Flex direction="column" alignItems="flex-start" padding={7} gap={2}>
25+
<Flex>
26+
<Lightning fill="primary600" width={`24px`} height={`24px`} />
27+
</Flex>
28+
<Flex paddingTop={2} paddingBottom={4}>
29+
<Typography variant="beta" fontWeight="bold">
30+
{formatMessage({
31+
id: 'Settings.page.PurchaseAudit-logs.description',
32+
defaultMessage: 'Track and review changes with your team',
33+
})}
34+
</Typography>
35+
</Flex>
36+
37+
<Flex gap={2}>
38+
<Check fill="success500" width={`16px`} height={`16px`} />
39+
<Typography textColor="neutral700">
40+
{formatMessage({
41+
id: 'Settings.page.PurchaseAudit-logs.perks1',
42+
defaultMessage: 'Easily track changes',
43+
})}
44+
</Typography>
45+
</Flex>
46+
47+
<Flex gap={2}>
48+
<Check fill="success500" width={`16px`} height={`16px`} />
49+
<Typography textColor="neutral700">
50+
{formatMessage({
51+
id: 'Settings.page.PurchaseAudit-logs.perks2',
52+
defaultMessage: 'Review changes with ease',
53+
})}
54+
</Typography>
55+
</Flex>
56+
57+
<Flex gap={2}>
58+
<Check fill="success500" width={`16px`} height={`16px`} />
59+
<Typography textColor="neutral700">
60+
{formatMessage({
61+
id: 'Settings.page.PurchaseAudit-logs.perks3',
62+
defaultMessage: 'Maintain security and compliance',
63+
})}
64+
</Typography>
65+
</Flex>
66+
67+
<Flex gap={2} marginTop={7}>
68+
<LinkButton
69+
variant="default"
70+
href="https://strapi.io/pricing-self-hosted?utm_campaign=In-Product-CTA&utm_source=Audit-Logs"
71+
>
72+
{formatMessage({
73+
id: 'Settings.page.purchase.upgrade.cta',
74+
defaultMessage: 'Upgrade',
75+
})}
76+
</LinkButton>
77+
<LinkButton
78+
variant="tertiary"
79+
endIcon={<ExternalLink />}
80+
href="https://strapi.io/features/audit-logs?utm_campaign=In-Product-CTA&utm_source=Audit-Logs"
81+
>
82+
{formatMessage({
83+
id: 'Settings.page.purchase.learn-more.cta',
84+
defaultMessage: 'Learn more',
85+
})}
86+
</LinkButton>
87+
</Flex>
88+
</Flex>
89+
</Grid.Item>
90+
<Grid.Item col={6} s={12} background="primary100">
91+
<div style={{ position: 'relative', width: '100%', paddingTop: '56.25%' }}>
92+
<img
93+
src={illustration}
94+
alt="purchase-page-audit-logs-illustration"
95+
width="100%"
96+
height="100%"
97+
style={{
98+
position: 'absolute',
99+
top: 0,
100+
left: 0,
101+
width: '100%',
102+
height: '100%',
103+
objectFit: 'cover',
104+
objectPosition: 'top left',
105+
}}
106+
/>
107+
</div>
108+
</Grid.Item>
109+
</Grid.Root>
44110
</Box>
45111
</Main>
46112
</Layouts.Root>

‎packages/core/admin/admin/src/pages/Settings/pages/PurchaseContentHistory.tsx

+96-30
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1-
import { Box, Main, EmptyStateLayout, LinkButton } from '@strapi/design-system';
2-
import { ExternalLink } from '@strapi/icons';
3-
import { EmptyPermissions } from '@strapi/icons/symbols';
1+
import { Box, Main, Flex, Typography, Grid, LinkButton } from '@strapi/design-system';
2+
import { ExternalLink, Check, ClockCounterClockwise } from '@strapi/icons';
43
import { useIntl } from 'react-intl';
54

65
import { Layouts } from '../../../components/Layouts/Layout';
6+
import { useTypedSelector } from '../../../core/store/hooks';
7+
import darkIllustration from '../assets/purchase-page-content-history-illustration-dark.svg';
8+
import lightIllustration from '../assets/purchase-page-content-history-illustration-light.svg';
79

810
const PurchaseContentHistory = () => {
911
const { formatMessage } = useIntl();
12+
const currentTheme = useTypedSelector((state) => state.admin_app.theme.currentTheme);
1013

14+
const illustration = currentTheme === 'light' ? lightIllustration : darkIllustration;
1115
return (
1216
<Layouts.Root>
1317
<Main>
@@ -16,34 +20,96 @@ const PurchaseContentHistory = () => {
1620
id: 'Settings.content-history.title',
1721
defaultMessage: 'Content History',
1822
})}
19-
subtitle={formatMessage({
20-
id: 'Settings.content-history.description',
21-
defaultMessage: 'Get more control over every step of your content’s lifecycle.',
22-
})}
2323
/>
24-
<Box paddingLeft={10} paddingRight={10}>
25-
<EmptyStateLayout
26-
icon={<EmptyPermissions width="16rem" />}
27-
content={formatMessage({
28-
id: 'Settings.content-history.not-available',
29-
defaultMessage:
30-
"Content History is only available as part of a paid plan. Upgrade to get full control over your content's lifecycle.",
31-
})}
32-
action={
33-
<LinkButton
34-
variant="default"
35-
endIcon={<ExternalLink />}
36-
href="https://strapi.io/features/content-history?utm_campaign=In-Product-CTA&utm_source=Content-History"
37-
isExternal
38-
target="_blank"
39-
>
40-
{formatMessage({
41-
id: 'global.learn-more',
42-
defaultMessage: 'Learn more',
43-
})}
44-
</LinkButton>
45-
}
46-
/>
24+
<Box marginLeft={10} marginRight={10} shadow="filterShadow" hasRadius background="neutral0">
25+
<Grid.Root>
26+
<Grid.Item col={6} s={12}>
27+
<Flex direction="column" alignItems="flex-start" padding={7} gap={2}>
28+
<Flex>
29+
<ClockCounterClockwise fill="primary600" width={`24px`} height={`24px`} />
30+
</Flex>
31+
<Flex paddingTop={2} paddingBottom={4}>
32+
<Typography variant="beta" fontWeight="bold">
33+
{formatMessage({
34+
id: 'Settings.page.PurchaseAudit-logs.description',
35+
defaultMessage: 'Instantly revert content changes',
36+
})}
37+
</Typography>
38+
</Flex>
39+
40+
<Flex gap={2}>
41+
<Check fill="success500" width={`16px`} height={`16px`} />
42+
<Typography textColor="neutral700">
43+
{formatMessage({
44+
id: 'Settings.page.PurchaseContent-history.perks1',
45+
defaultMessage: 'Browse your content history',
46+
})}
47+
</Typography>
48+
</Flex>
49+
50+
<Flex gap={2}>
51+
<Check fill="success500" width={`16px`} height={`16px`} />
52+
<Typography textColor="neutral700">
53+
{formatMessage({
54+
id: 'Settings.page.PurchaseContent-history.perks2',
55+
defaultMessage: 'Revert changes in one click',
56+
})}
57+
</Typography>
58+
</Flex>
59+
60+
<Flex gap={2}>
61+
<Check fill="success500" width={`16px`} height={`16px`} />
62+
<Typography textColor="neutral700">
63+
{formatMessage({
64+
id: 'Settings.page.PurchaseContent-history.perks3',
65+
defaultMessage: 'Track changes across locales',
66+
})}
67+
</Typography>
68+
</Flex>
69+
70+
<Flex gap={2} marginTop={7}>
71+
<LinkButton
72+
variant="default"
73+
href="https://strapi.io/pricing-self-hosted?utm_campaign=In-Product-CTA&utm_source=Content-History"
74+
>
75+
{formatMessage({
76+
id: 'Settings.page.purchase.upgrade.cta',
77+
defaultMessage: 'Upgrade',
78+
})}
79+
</LinkButton>
80+
<LinkButton
81+
variant="tertiary"
82+
endIcon={<ExternalLink />}
83+
href="https://strapi.io/features/content-history?utm_campaign=In-Product-CTA&utm_source=Content-History"
84+
>
85+
{formatMessage({
86+
id: 'Settings.page.purchase.learn-more.cta',
87+
defaultMessage: 'Learn more',
88+
})}
89+
</LinkButton>
90+
</Flex>
91+
</Flex>
92+
</Grid.Item>
93+
<Grid.Item col={6} s={12} background="primary100">
94+
<div style={{ position: 'relative', width: '100%', paddingTop: '56.25%' }}>
95+
<img
96+
src={illustration}
97+
alt="purchase-page-content-history-illustration"
98+
width="100%"
99+
height="100%"
100+
style={{
101+
position: 'absolute',
102+
top: 0,
103+
left: 0,
104+
width: '100%',
105+
height: '100%',
106+
objectFit: 'cover',
107+
objectPosition: 'top left',
108+
}}
109+
/>
110+
</div>
111+
</Grid.Item>
112+
</Grid.Root>
47113
</Box>
48114
</Main>
49115
</Layouts.Root>

‎packages/core/admin/admin/src/pages/Settings/pages/PurchaseSingleSignOn.tsx

+96-30
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1-
import { Box, Main, EmptyStateLayout, LinkButton } from '@strapi/design-system';
2-
import { ExternalLink } from '@strapi/icons';
3-
import { EmptyPermissions } from '@strapi/icons/symbols';
1+
import { Box, Main, Flex, Typography, Grid, LinkButton } from '@strapi/design-system';
2+
import { ExternalLink, Check, Lock } from '@strapi/icons';
43
import { useIntl } from 'react-intl';
54

65
import { Layouts } from '../../../components/Layouts/Layout';
6+
import { useTypedSelector } from '../../../core/store/hooks';
7+
import darkIllustration from '../assets/purchase-page-sso-illustration-dark.svg';
8+
import lightIllustration from '../assets/purchase-page-sso-illustration-light.svg';
79

810
const PurchaseSingleSignOn = () => {
911
const { formatMessage } = useIntl();
12+
const currentTheme = useTypedSelector((state) => state.admin_app.theme.currentTheme);
1013

14+
const illustration = currentTheme === 'light' ? lightIllustration : darkIllustration;
1115
return (
1216
<Layouts.Root>
1317
<Main>
@@ -16,34 +20,96 @@ const PurchaseSingleSignOn = () => {
1620
id: 'Settings.sso.title',
1721
defaultMessage: 'Single Sign-On',
1822
})}
19-
subtitle={formatMessage({
20-
id: 'Settings.sso.subTitle',
21-
defaultMessage: 'Configure the settings for the Single Sign-On feature.',
22-
})}
2323
/>
24-
<Box paddingLeft={10} paddingRight={10}>
25-
<EmptyStateLayout
26-
icon={<EmptyPermissions width="16rem" />}
27-
content={formatMessage({
28-
id: 'Settings.sso.not-available',
29-
defaultMessage:
30-
'SSO is only available as part of a paid plan. Upgrade to configure additional sign-in & sign-up methods for your administration panel.',
31-
})}
32-
action={
33-
<LinkButton
34-
variant="default"
35-
endIcon={<ExternalLink />}
36-
href="https://strapi.io/features/single-sign-on-sso?utm_campaign=In-Product-CTA&utm_source=Single-sign-on"
37-
isExternal
38-
target="_blank"
39-
>
40-
{formatMessage({
41-
id: 'global.learn-more',
42-
defaultMessage: 'Learn more',
43-
})}
44-
</LinkButton>
45-
}
46-
/>
24+
<Box marginLeft={10} marginRight={10} shadow="filterShadow" hasRadius background="neutral0">
25+
<Grid.Root>
26+
<Grid.Item col={6} s={12}>
27+
<Flex direction="column" alignItems="flex-start" padding={7} gap={2}>
28+
<Flex>
29+
<Lock fill="primary600" width={`24px`} height={`24px`} />
30+
</Flex>
31+
<Flex paddingTop={2} paddingBottom={4}>
32+
<Typography variant="beta" fontWeight="bold">
33+
{formatMessage({
34+
id: 'Settings.page.PurchaseSSO.description',
35+
defaultMessage: 'Simplify authentication for your team',
36+
})}
37+
</Typography>
38+
</Flex>
39+
40+
<Flex gap={2}>
41+
<Check fill="success500" width={`16px`} height={`16px`} />
42+
<Typography textColor="neutral700">
43+
{formatMessage({
44+
id: 'Settings.page.PurchaseSSO.perks1',
45+
defaultMessage: 'Unified authentication',
46+
})}
47+
</Typography>
48+
</Flex>
49+
50+
<Flex gap={2}>
51+
<Check fill="success500" width={`16px`} height={`16px`} />
52+
<Typography textColor="neutral700">
53+
{formatMessage({
54+
id: 'Settings.page.PurchaseSSO.perks2',
55+
defaultMessage: 'Enhanced security',
56+
})}
57+
</Typography>
58+
</Flex>
59+
60+
<Flex gap={2}>
61+
<Check fill="success500" width={`16px`} height={`16px`} />
62+
<Typography textColor="neutral700">
63+
{formatMessage({
64+
id: 'Settings.page.PurchaseSSO.perks3',
65+
defaultMessage: 'Support for webhooks',
66+
})}
67+
</Typography>
68+
</Flex>
69+
70+
<Flex gap={2} marginTop={7}>
71+
<LinkButton
72+
variant="default"
73+
href="https://strapi.io/pricing-self-hosted?utm_campaign=In-Product-CTA&utm_source=Single-sign-on"
74+
>
75+
{formatMessage({
76+
id: 'Settings.purchase.page.upgrade.cta',
77+
defaultMessage: 'Upgrade',
78+
})}
79+
</LinkButton>
80+
<LinkButton
81+
variant="tertiary"
82+
endIcon={<ExternalLink />}
83+
href="https://strapi.io/features/single-sign-on-sso?utm_campaign=In-Product-CTA&utm_source=Single-sign-on"
84+
>
85+
{formatMessage({
86+
id: 'Settings.purchase.page.learn-more.cta',
87+
defaultMessage: 'Learn more',
88+
})}
89+
</LinkButton>
90+
</Flex>
91+
</Flex>
92+
</Grid.Item>
93+
<Grid.Item col={6} s={12} background="primary100">
94+
<div style={{ position: 'relative', width: '100%', paddingTop: '56.25%' }}>
95+
<img
96+
src={illustration}
97+
alt="purchase-page-sso-illustration"
98+
width="100%"
99+
height="100%"
100+
style={{
101+
position: 'absolute',
102+
top: 0,
103+
left: 0,
104+
width: '100%',
105+
height: '100%',
106+
objectFit: 'cover',
107+
objectPosition: 'top left',
108+
}}
109+
/>
110+
</div>
111+
</Grid.Item>
112+
</Grid.Root>
47113
</Box>
48114
</Main>
49115
</Layouts.Root>

‎packages/core/admin/admin/src/translations/en.json

+14
Original file line numberDiff line numberDiff line change
@@ -327,6 +327,20 @@
327327
"Settings.webhooks.validation.url.regex": "The value must be a valid Url",
328328
"Settings.webhooks.validation.key": "Key is required",
329329
"Settings.webhooks.validation.value": "Value is required",
330+
"Settings.page.PurchaseAudit-logs.description": "Track and review changes with your team",
331+
"Settings.page.PurchaseAudit-logs.perks1": "Easily track changes",
332+
"Settings.page.PurchaseAudit-logs.perks2": "Review changes with ease",
333+
"Settings.page.PurchaseAudit-logs.perks3": "Maintain security and compliance",
334+
"Settings.page.PurchaseContent-history.description": "Instantly revert content changes",
335+
"Settings.page.PurchaseContent-history.perks1": "Browse your content history",
336+
"Settings.page.PurchaseContent-history.perks2": "Revert changes in one click",
337+
"Settings.page.PurchaseContent-history.perks3": "Track changes across locales",
338+
"Settings.page.PurchaseSSO.description": "Simplify authentication for your team",
339+
"Settings.page.PurchaseSSO.perks1": "Unified authentication",
340+
"Settings.page.PurchaseSSO.perks2": "Enhanced security",
341+
"Settings.page.PurchaseSSO.perks3": "Support for webhooks",
342+
"Settings.page.purchase.upgrade.cta": "Upgrade",
343+
"Settings.page.purchase.learn-more.cta": "Lean more",
330344
"Usecase.back-end": "Back-end developer",
331345
"Usecase.button.skip": "Skip this question",
332346
"Usecase.content-creator": "Content Creator",

‎packages/core/content-releases/admin/module.d.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/* eslint-disable import/no-default-export */
2+
declare module '*.svg' {
3+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
4+
const value: any;
5+
export default value;
6+
}

‎packages/core/content-releases/admin/src/assets/purchase-page-illustration-dark.svg

+207

Error rendering embedded code

Invalid image source.

‎packages/core/content-releases/admin/src/assets/purchase-page-illustration-light.svg

+9

Error rendering embedded code

Invalid image source.

‎packages/core/content-releases/admin/src/pages/PurchaseContentReleases.tsx

+95-30
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import { Layouts } from '@strapi/admin/strapi-admin';
2-
import { Box, Main, EmptyStateLayout, LinkButton } from '@strapi/design-system';
3-
import { ExternalLink } from '@strapi/icons';
4-
import { EmptyPermissions } from '@strapi/icons/symbols';
2+
import { Box, Main, Flex, Typography, Grid, LinkButton } from '@strapi/design-system';
3+
import { ExternalLink, Check, PaperPlane } from '@strapi/icons';
54
import { useIntl } from 'react-intl';
65

6+
import darkIllustration from '../assets/purchase-page-illustration-dark.svg';
7+
import lightIllustration from '../assets/purchase-page-illustration-light.svg';
8+
import { useTypedSelector } from '../modules/hooks';
9+
710
const PurchaseContentReleases = () => {
811
const { formatMessage } = useIntl();
12+
const currentTheme = useTypedSelector((state) => state.admin_app.theme.currentTheme);
913

14+
const illustration = currentTheme === 'light' ? lightIllustration : darkIllustration;
1015
return (
1116
<Layouts.Root>
1217
<Main>
@@ -15,34 +20,94 @@ const PurchaseContentReleases = () => {
1520
id: 'content-releases.pages.Releases.title',
1621
defaultMessage: 'Releases',
1722
})}
18-
subtitle={formatMessage({
19-
id: 'content-releases.pages.PurchaseRelease.subTitle',
20-
defaultMessage: 'Manage content updates and releases.',
21-
})}
2223
/>
23-
<Box paddingLeft={10} paddingRight={10}>
24-
<EmptyStateLayout
25-
icon={<EmptyPermissions width="16rem" />}
26-
content={formatMessage({
27-
id: 'content-releases.pages.PurchaseRelease.not-available',
28-
defaultMessage:
29-
'Releases is only available as part of a paid plan. Upgrade to create and manage releases.',
30-
})}
31-
action={
32-
<LinkButton
33-
variant="default"
34-
endIcon={<ExternalLink />}
35-
href="https://strapi.io/features/releases?utm_campaign=In-Product-CTA&utm_source=Releases"
36-
isExternal
37-
target="_blank"
38-
>
39-
{formatMessage({
40-
id: 'global.learn-more',
41-
defaultMessage: 'Learn more',
42-
})}
43-
</LinkButton>
44-
}
45-
/>
24+
<Box marginLeft={10} marginRight={10} shadow="filterShadow" hasRadius background="neutral0">
25+
<Grid.Root>
26+
<Grid.Item col={6} s={12}>
27+
<Flex direction="column" alignItems="flex-start" padding={7} gap={2}>
28+
<Flex>
29+
<PaperPlane fill="primary600" width={`24px`} height={`24px`} />
30+
</Flex>
31+
<Flex paddingTop={2} paddingBottom={4}>
32+
<Typography variant="beta" fontWeight="bold">
33+
{formatMessage({
34+
id: 'pages.PurchaseRelease.description',
35+
defaultMessage: 'Group content and publish updates together',
36+
})}
37+
</Typography>
38+
</Flex>
39+
40+
<Flex gap={2}>
41+
<Check fill="success500" width={`16px`} height={`16px`} />
42+
<Typography textColor="neutral700">
43+
{formatMessage({
44+
id: 'pages.PurchaseRelease.perks1',
45+
defaultMessage: 'Add many entries to releases',
46+
})}
47+
</Typography>
48+
</Flex>
49+
50+
<Flex gap={2}>
51+
<Check fill="success500" width={`16px`} height={`16px`} />
52+
<Typography textColor="neutral700">
53+
{formatMessage({
54+
id: 'pages.PurchaseRelease.perks2',
55+
defaultMessage: 'Quickly identify entries containing errors',
56+
})}
57+
</Typography>
58+
</Flex>
59+
60+
<Flex gap={2}>
61+
<Check fill="success500" width={`16px`} height={`16px`} />
62+
<Typography textColor="neutral700">
63+
{formatMessage({
64+
id: 'pages.PurchaseRelease.perks3',
65+
defaultMessage: 'Schedule their publication, or publish them manually',
66+
})}
67+
</Typography>
68+
</Flex>
69+
70+
<Flex gap={2} marginTop={7}>
71+
<LinkButton
72+
variant="default"
73+
href="https://strapi.io/pricing-self-hosted?utm_campaign=In-Product-CTA&utm_source=Releases"
74+
>
75+
{formatMessage({
76+
id: 'Settings.purchage.page.upgrade.cta',
77+
defaultMessage: 'Upgrade',
78+
})}
79+
</LinkButton>
80+
<LinkButton
81+
variant="tertiary"
82+
endIcon={<ExternalLink />}
83+
href="https://strapi.io/features/releases?utm_campaign=In-Product-CTA&utm_source=Releases"
84+
>
85+
{formatMessage({
86+
id: 'Settings.purchage.page.learn-more.cta',
87+
defaultMessage: 'Learn more',
88+
})}
89+
</LinkButton>
90+
</Flex>
91+
</Flex>
92+
</Grid.Item>
93+
<Grid.Item col={6} s={12} background="primary100">
94+
<div style={{ position: 'relative', width: '100%', paddingTop: '56.25%' }}>
95+
<img
96+
src={illustration}
97+
alt="purchase-page-content-releases-illustration"
98+
style={{
99+
position: 'absolute',
100+
top: 0,
101+
left: 0,
102+
width: '100%',
103+
height: '100%',
104+
objectFit: 'cover',
105+
objectPosition: 'top left',
106+
}}
107+
/>
108+
</div>
109+
</Grid.Item>
110+
</Grid.Root>
46111
</Box>
47112
</Main>
48113
</Layouts.Root>

‎packages/core/content-releases/admin/src/translations/en.json

+5
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"content-manager-edit-view.scheduled.date": "{date} at {time} ({offset})",
1414
"content-manager-edit-view.edit-release": "Edit release",
1515
"content-releases.content-manager-edit-view.edit-entry": "Edit entry",
16+
"content-releases.pages.Releases.title": "Releases",
1617
"content-manager-edit-view.remove-from-release.notification.success": "Entry removed from release",
1718
"content-manager-edit-view.release-action-menu": "Release action options",
1819
"content-manager.list-view.releases.header": "To be released in",
@@ -34,6 +35,10 @@
3435
"pages.Releases.max-limit-reached.action": "Explore plans",
3536
"pages.PurchaseRelease.subTitle": "Manage content updates and releases.",
3637
"pages.PurchaseRelease.not-available": "Releases is only available as part of a paid plan. Upgrade to create and manage releases.",
38+
"pages.PurchaseRelease.description": "Group content and publish updates together",
39+
"pages.PurchaseRelease.perks1": "Add many entries to releases",
40+
"pages.PurchaseRelease.perks2": "Quickly identify entries containing errors",
41+
"pages.PurchaseRelease.perks3": "Schedule their publication, or publish them manually",
3742
"header.actions.add-release": "New Release",
3843
"header.actions.refresh": "Refresh",
3944
"header.actions.publish": "Publish",

‎packages/core/content-releases/admin/tsconfig.build.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"extends": "./tsconfig.json",
3+
"include": ["./src", "./custom.d.ts", "../shared", "./module.d.ts"],
4+
"exclude": ["node_modules", "tests", "**/*.test.*"],
35
"compilerOptions": {
46
"rootDir": "../",
57
"baseUrl": ".",
68
"outDir": "../dist",
79
"noEmit": false
8-
},
9-
"include": ["./src", "./custom.d.ts", "../shared"],
10-
"exclude": ["node_modules", "tests", "**/*.test.*"]
10+
}
1111
}

‎packages/core/content-releases/admin/tsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
"@tests/*": ["./tests/*"]
88
}
99
},
10-
"include": ["./src", "../shared", "tests", "custom.d.ts"],
10+
"include": ["./src", "../shared", "tests", "custom.d.ts", "./module.d.ts"],
1111
"exclude": ["node_modules"]
1212
}

‎packages/core/review-workflows/admin/src/assets/purchase-page-illustration-dark.svg

+263

Error rendering embedded code

Invalid image source.

‎packages/core/review-workflows/admin/src/assets/purchase-page-illustration-light.svg

+9

Error rendering embedded code

Invalid image source.

‎packages/core/review-workflows/admin/src/routes/purchase-review-workflows.tsx

+97-30
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import { Layouts } from '@strapi/admin/strapi-admin';
2-
import { Box, Main, EmptyStateLayout, LinkButton } from '@strapi/design-system';
3-
import { ExternalLink } from '@strapi/icons';
4-
import { EmptyPermissions } from '@strapi/icons/symbols';
2+
import { Box, Main, Flex, Typography, Grid, LinkButton } from '@strapi/design-system';
3+
import { ExternalLink, Check, Lightning } from '@strapi/icons';
54
import { useIntl } from 'react-intl';
65

6+
import darkIllustration from '../assets/purchase-page-illustration-dark.svg';
7+
import lightIllustration from '../assets/purchase-page-illustration-light.svg';
8+
import { useTypedSelector } from '../modules/hooks';
9+
710
const PurchaseReviewWorkflows = () => {
811
const { formatMessage } = useIntl();
12+
const currentTheme = useTypedSelector((state) => state.admin_app.theme.currentTheme);
913

14+
const illustration = currentTheme === 'light' ? lightIllustration : darkIllustration;
1015
return (
1116
<Layouts.Root>
1217
<Main>
@@ -15,34 +20,96 @@ const PurchaseReviewWorkflows = () => {
1520
id: 'Settings.review-workflows.list.page.title',
1621
defaultMessage: 'Review Workflows',
1722
})}
18-
subtitle={formatMessage({
19-
id: 'Settings.review-workflows.list.page.subtitle',
20-
defaultMessage: 'Manage your content review process',
21-
})}
2223
/>
23-
<Box paddingLeft={10} paddingRight={10}>
24-
<EmptyStateLayout
25-
icon={<EmptyPermissions width="16rem" />}
26-
content={formatMessage({
27-
id: 'Settings.review-workflows.not-available',
28-
defaultMessage:
29-
'Review Workflows is only available as part of a paid plan. Upgrade to create and manage workflows.',
30-
})}
31-
action={
32-
<LinkButton
33-
variant="default"
34-
endIcon={<ExternalLink />}
35-
href="https://strapi.io/features/review-workflow?utm_campaign=In-Product-CTA&utm_source=Review%20Workflows"
36-
isExternal
37-
target="_blank"
38-
>
39-
{formatMessage({
40-
id: 'global.learn-more',
41-
defaultMessage: 'Learn more',
42-
})}
43-
</LinkButton>
44-
}
45-
/>
24+
<Box marginLeft={10} marginRight={10} shadow="filterShadow" hasRadius background="neutral0">
25+
<Grid.Root>
26+
<Grid.Item col={6} s={12}>
27+
<Flex direction="column" alignItems="flex-start" padding={7} gap={2}>
28+
<Flex>
29+
<Lightning fill="primary600" width={`24px`} height={`24px`} />
30+
</Flex>
31+
<Flex paddingTop={2} paddingBottom={4}>
32+
<Typography variant="beta" fontWeight="bold">
33+
{formatMessage({
34+
id: 'settings.page.purchase.description',
35+
defaultMessage: 'Manage your content review process',
36+
})}
37+
</Typography>
38+
</Flex>
39+
40+
<Flex gap={2}>
41+
<Check fill="success500" width={`16px`} height={`16px`} />
42+
<Typography textColor="neutral700">
43+
{formatMessage({
44+
id: 'settings.page.purchase.perks1',
45+
defaultMessage: 'Customizable review stages',
46+
})}
47+
</Typography>
48+
</Flex>
49+
50+
<Flex gap={2}>
51+
<Check fill="success500" width={`16px`} height={`16px`} />
52+
<Typography textColor="neutral700">
53+
{formatMessage({
54+
id: 'settings.page.purchase.perks2',
55+
defaultMessage: 'Manage user permissions',
56+
})}
57+
</Typography>
58+
</Flex>
59+
60+
<Flex gap={2}>
61+
<Check fill="success500" width={`16px`} height={`16px`} />
62+
<Typography textColor="neutral700">
63+
{formatMessage({
64+
id: 'settings.page.purchase.perks3',
65+
defaultMessage: 'Support for webhooks',
66+
})}
67+
</Typography>
68+
</Flex>
69+
70+
<Flex gap={2} marginTop={7}>
71+
<LinkButton
72+
variant="default"
73+
href="https://strapi.io/pricing-self-hosted?utm_campaign=In-Product-CTA&utm_source=Review%20Workflows"
74+
>
75+
{formatMessage({
76+
id: 'Settings.purchase.page.upgrade.cta',
77+
defaultMessage: 'Upgrade',
78+
})}
79+
</LinkButton>
80+
<LinkButton
81+
variant="tertiary"
82+
endIcon={<ExternalLink />}
83+
href="https://strapi.io/features/review-workflow?utm_campaign=In-Product-CTA&utm_source=Review%20Workflows"
84+
>
85+
{formatMessage({
86+
id: 'Settings.purchase.page.learn-more.cta',
87+
defaultMessage: 'Learn more',
88+
})}
89+
</LinkButton>
90+
</Flex>
91+
</Flex>
92+
</Grid.Item>
93+
<Grid.Item col={6} s={12} background="primary100">
94+
<div style={{ position: 'relative', width: '100%', paddingTop: '56.25%' }}>
95+
<img
96+
src={illustration}
97+
alt="purchase-page-review-workflows-illustration"
98+
width="100%"
99+
height="100%"
100+
style={{
101+
position: 'absolute',
102+
top: 0,
103+
left: 0,
104+
width: '100%',
105+
height: '100%',
106+
objectFit: 'cover',
107+
objectPosition: 'top left',
108+
}}
109+
/>
110+
</div>
111+
</Grid.Item>
112+
</Grid.Root>
46113
</Box>
47114
</Main>
48115
</Layouts.Root>

‎packages/core/review-workflows/admin/src/translations/en.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,9 @@
77
"settings.not-available": "Review Workflows is only available as part of the Enterprise Edition. Upgrade to create and manage workflows.",
88
"settings.review-workflows.workflow.stageRequiredToPublish.label": "Required stage for publishing",
99
"settings.review-workflows.workflow.stageRequiredToPublish.any": "Any stage",
10-
"settings.review-workflows.workflow.stageRequiredToPublish.hint": "Prevents entries from being published if they are not at the required stage."
10+
"settings.review-workflows.workflow.stageRequiredToPublish.hint": "Prevents entries from being published if they are not at the required stage.",
11+
"settings.page.purchase.description": "Manage your content review process",
12+
"settings.page.purchase.perks1": "Customizable review stages",
13+
"settings.page.purchase.perks2": "Manage user permissions",
14+
"settings.page.purchase.perks3": "Support for webhooks"
1115
}

0 commit comments

Comments
 (0)
Please sign in to comment.