Skip to content
This repository was archived by the owner on Aug 11, 2021. It is now read-only.

Commit 60ca0ff

Browse files
author
EpokK
committed
Continue
1 parent cfb806c commit 60ca0ff

File tree

4 files changed

+203
-68
lines changed

4 files changed

+203
-68
lines changed

‎containers/payments/subscription/MailSubscriptionTable.js‎

Lines changed: 93 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,31 @@ const MailSubscriptionTable = ({ subscription = {}, plans: apiPlans = [], cycle,
3535
canCustomize: true,
3636
price: <SubscriptionPrices cycle={cycle} currency={currency} plan={FREE_PLAN} />,
3737
imageSrc: freePlanSvg,
38-
description: c('Description').t`The basics for private and secure communications`,
38+
description: c('Description').t`Basic private and secure comminications`,
3939
features: [
40-
{ feature: c('Feature').t`1 user` },
41-
{ feature: c('Feature').t`500 MB storage` },
42-
{ feature: c('Feature').t`1 address` },
43-
{ feature: c('Feature').t`No domain support` },
44-
{ feature: c('Feature').t`ProtonVPN (optional) *` }
40+
c('Feature').t`1 user`,
41+
c('Feature').t`500 MB storage`,
42+
c('Feature').t`1 address`,
43+
c('Feature').t`No domain support`,
44+
c('Feature').t`150 messages/day`,
45+
c('Feature').t`ProtonVPN (optional)`
46+
],
47+
allFeatures: [
48+
c('Feature').t`1 user`,
49+
c('Feature').t`500 MB storage`,
50+
c('Feature').t`1 address`,
51+
c('Feature').t`No domain support`,
52+
c('Feature').t`150 messages per day`,
53+
c('Feature').t`3 folders/labels`,
54+
<del key="encrypted">{c('Feature').t`Encrypted contacts`}</del>,
55+
<del key="address">{c('Feature').t`Address verification`}</del>,
56+
<del key="filters">{c('Feature').t`Filters`}</del>,
57+
<del key="imap">{c('Feature').t`IMAP/SMTP support`}</del>,
58+
<del key="auto">{c('Feature').t`Auto-responder`}</del>,
59+
<del key="me">{c('Feature').t`@pm.me short email`}</del>,
60+
<del key="catch">{c('Feature').t`Catch-all email`}</del>,
61+
<del key="multi">{c('Feature').t`Multi-user support`}</del>,
62+
c('Feature').t`Limited support`
4563
]
4664
},
4765
plusPlan && {
@@ -51,12 +69,29 @@ const MailSubscriptionTable = ({ subscription = {}, plans: apiPlans = [], cycle,
5169
imageSrc: plusPlanSvg,
5270
description: c('Description').t`Full-featured mailbox with advanced protection`,
5371
features: [
54-
{ feature: c('Feature').t`1 user` },
55-
{ feature: c('Feature').t`5 GB storage *` },
56-
{ feature: c('Feature').t`5 addresses *` },
57-
{ feature: c('Feature').t`Supports 1 domain *` },
58-
{ feature: c('Feature').t`Supports folder, labels, filters, auto-reply, IMAP/SMTP and more` },
59-
{ feature: c('Feature').t`ProtonVPN (optional) *` }
72+
c('Feature').t`1 user`,
73+
c('Feature').t`5 GB storage *`,
74+
c('Feature').t`5 addresses *`,
75+
c('Feature').t`Supports 1 domain *`,
76+
c('Feature').t`Folder, labels, filters, auto-reply, IMAP/SMTP and more`,
77+
c('Feature').t`ProtonVPN (optional)`
78+
],
79+
allFeatures: [
80+
c('Feature').t`1 user`,
81+
c('Feature').t`5 GB storage *`,
82+
c('Feature').t`5 addresses *`,
83+
c('Feature').t`1 custom domain *`,
84+
c('Feature').t`Unlimited messages **`,
85+
c('Feature').t`Unlimited folders/labels`,
86+
c('Feature').t`Encrypted contacts`,
87+
c('Feature').t`Address verification`,
88+
c('Feature').t`Filters`,
89+
c('Feature').t`IMAP/SMTP support`,
90+
c('Feature').t`Auto-responder`,
91+
c('Feature').t`@pm.me short email`,
92+
<del key="catch">{c('Feature').t`Catch-all email`}</del>,
93+
<del key="multi">{c('Feature').t`Multi-user support`}</del>,
94+
c('Feature').t`Normal support`
6095
]
6196
},
6297
professionalPlan && {
@@ -66,12 +101,29 @@ const MailSubscriptionTable = ({ subscription = {}, plans: apiPlans = [], cycle,
66101
imageSrc: professionalPlanSvg,
67102
description: c('Description').t`ProtonMail for professionals and businesses`,
68103
features: [
69-
{ feature: c('Feature').t`1 - 5000 user *` },
70-
{ feature: c('Feature').t`5 GB storage per user *` },
71-
{ feature: c('Feature').t`5 addresses per user *` },
72-
{ feature: c('Feature').t`Supports 2 domains *` },
73-
{ feature: c('Feature').t`Catch all email, multi user management, priority support and more` },
74-
{ feature: c('Feature').t`ProtonVPN (optional) *` }
104+
c('Feature').t`1 - 5000 user *`,
105+
c('Feature').t`5 GB storage per user *`,
106+
c('Feature').t`5 addresses per user *`,
107+
c('Feature').t`Supports 2 domains *`,
108+
c('Feature').t`Catch-all email, multi-user management`,
109+
c('Feature').t`Priority support`
110+
],
111+
allFeatures: [
112+
c('Feature').t`1-5000 user`,
113+
c('Feature').t`5 GB per user *`,
114+
c('Feature').t`5 addresses per user *`,
115+
c('Feature').t`2 custom domains *`,
116+
c('Feature').t`Unlimited messages **`,
117+
c('Feature').t`Unlimited folders/labels`,
118+
c('Feature').t`Encrypted contacts`,
119+
c('Feature').t`Address verification`,
120+
c('Feature').t`Filters`,
121+
c('Feature').t`IMAP/SMTP support`,
122+
c('Feature').t`Auto-responder`,
123+
c('Feature').t`@pm.me short email`,
124+
c('Feature').t`Catch-all email`,
125+
c('Feature').t`Multi-user support`,
126+
c('Feature').t`Priority support`
75127
]
76128
},
77129
visionaryPlan && {
@@ -81,12 +133,29 @@ const MailSubscriptionTable = ({ subscription = {}, plans: apiPlans = [], cycle,
81133
imageSrc: visionaryPlanSvg,
82134
description: c('Description').t`ProtonMail for families and small businesses`,
83135
features: [
84-
{ feature: c('Feature').t`6 users` },
85-
{ feature: c('Feature').t`20 GB storage` },
86-
{ feature: c('Feature').t`Supports 10 domains` },
87-
{ feature: c('Feature').t`Includes all features` },
88-
{ feature: c('Feature').t`Priority support` },
89-
{ feature: c('Feature').t`Includes ProtonVPN` }
136+
c('Feature').t`6 users`,
137+
c('Feature').t`20 GB storage`,
138+
c('Feature').t`50 addresses`,
139+
c('Feature').t`Supports 10 domains`,
140+
c('Feature').t`Includes all features`,
141+
c('Feature').t`Includes ProtonVPN`
142+
],
143+
allFeatures: [
144+
c('Feature').t`6 users`,
145+
c('Feature').t`20 GB storage`,
146+
c('Feature').t`50 addresses`,
147+
c('Feature').t`10 custom domains *`,
148+
c('Feature').t`Unlimited messages **`,
149+
c('Feature').t`Unlimited folders/labels`,
150+
c('Feature').t`Encrypted contacts`,
151+
c('Feature').t`Address verification`,
152+
c('Feature').t`Filters`,
153+
c('Feature').t`IMAP/SMTP support`,
154+
c('Feature').t`Auto-responder`,
155+
c('Feature').t`@pm.me short email`,
156+
c('Feature').t`Catch-all email`,
157+
c('Feature').t`Multi-user support`,
158+
c('Feature').t`Priority support`
90159
]
91160
}
92161
];

‎containers/payments/subscription/SubscriptionTable.js‎

Lines changed: 57 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ const SubscriptionTable = ({ plans, onSelect, currentPlanIndex = 0, mostPopularI
1414
<div
1515
key={planName}
1616
className={classnames([
17-
'subsctiptionTable-plan w25 onmobile-w100 pt2 pb2 pl1 pr1 flex flex-column relative',
17+
'subscriptionTable-plan w25 onmobile-w100 pt2 pb2 pl1 pr1 flex flex-column relative',
1818
index && 'border-left'
1919
])}
2020
data-current-plan={index === currentPlanIndex}
2121
data-most-popular={index === mostPopularIndex}
2222
>
23-
<header className="flex flex-column flex-justify-end subsctiptionTable-header">
23+
<header className="flex flex-column flex-justify-end subscriptionTable-header">
2424
{index === currentPlanIndex ? (
25-
<div className="subsctiptionTable-currentPlan-container aligncenter uppercase bold smaller mb0 mt0">{c(
25+
<div className="subscriptionTable-currentPlan-container aligncenter uppercase bold smaller mb0 mt0">{c(
2626
'Title for subscription plan'
2727
).t`Current plan`}</div>
2828
) : null}
@@ -33,26 +33,19 @@ const SubscriptionTable = ({ plans, onSelect, currentPlanIndex = 0, mostPopularI
3333
) : null}
3434
<div className="bold aligncenter mb0-5 uppercase">{planName}</div>
3535
<div className="aligncenter mb0-5">{price}</div>
36-
<div className="flex flex-items-center flex-justify-center subsctiptionTable-image-container">
36+
<div className="flex flex-items-center flex-justify-center subscriptionTable-image-container">
3737
<img src={imageSrc} alt={planName} />
3838
</div>
3939
</header>
4040
<p className="aligncenter mt0 mb1">{description}</p>
41-
<ul className="unstyled small mb2 flex-item-fluid-auto subsctiptionTable-features-container">
42-
{features
43-
.filter(({ advanced = false }) => {
44-
if (!advanced) {
45-
return true;
46-
}
47-
return showAllFeatures;
48-
})
49-
.map(({ feature }, index) => {
50-
return (
51-
<li className="subsctiptionTable-features" key={index}>
52-
{feature}
53-
</li>
54-
);
55-
})}
41+
<ul className="unstyled small mb2 flex-item-fluid-auto">
42+
{features.map((feature, index) => {
43+
return (
44+
<li className="subscriptionTable-feature" key={index}>
45+
{feature}
46+
</li>
47+
);
48+
})}
5649
</ul>
5750
<footer className="aligncenter">
5851
{index === currentPlanIndex && !canCustomize ? (
@@ -78,7 +71,50 @@ const SubscriptionTable = ({ plans, onSelect, currentPlanIndex = 0, mostPopularI
7871
{showAllFeatures ? c('Action').t`Close feature comparison` : c('Action').t`Compare all features`}
7972
</LinkButton>
8073
</div>
81-
{showAllFeatures ? <div className="flex onmobile-flex-column nomobile"></div> : null}
74+
{showAllFeatures ? (
75+
<div className="flex flex-nowrap nomobile border-top">
76+
{plans.map(({ planName, allFeatures = [], canCustomize }, index) => {
77+
return (
78+
<div
79+
key={planName}
80+
className={classnames([
81+
'w25 pt2 pb2 flex flex-column relative',
82+
index && 'border-left'
83+
])}
84+
>
85+
<ul className="unstyled mb2 flex-item-fluid-auto">
86+
{allFeatures.map((feature, index) => {
87+
return (
88+
<li
89+
className={classnames(['pl1 pr1', index & 1 && 'bg-global-light'])}
90+
key={index}
91+
>
92+
{feature}
93+
</li>
94+
);
95+
})}
96+
</ul>
97+
<footer className="aligncenter">
98+
{index === currentPlanIndex && !canCustomize ? (
99+
c('Label').t`Current plan`
100+
) : (
101+
<Button
102+
className={classnames([index !== currentPlanIndex && 'pm-button--primary'])}
103+
onClick={() => onSelect(index)}
104+
>
105+
{index === currentPlanIndex ? c('Action').t`Update` : c('Action').t`Select`}
106+
</Button>
107+
)}
108+
{canCustomize ? (
109+
<LinkButton onClick={() => onSelect(index)}>{c('Action')
110+
.t`Customize`}</LinkButton>
111+
) : null}
112+
</footer>
113+
</div>
114+
);
115+
})}
116+
</div>
117+
) : null}
82118
</div>
83119
);
84120
};
@@ -90,12 +126,7 @@ SubscriptionTable.propTypes = {
90126
price: PropTypes.node.isRequired,
91127
imageSrc: PropTypes.string.isRequired,
92128
description: PropTypes.node.isRequired,
93-
features: PropTypes.arrayOf(
94-
PropTypes.shape({
95-
feature: PropTypes.node.isRequired,
96-
advanced: PropTypes.bool
97-
})
98-
)
129+
features: PropTypes.arrayOf(PropTypes.node).isRequired
99130
})
100131
),
101132
onSelect: PropTypes.func.isRequired,

‎containers/payments/subscription/SubscriptionTable.scss‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
.subsctiptionTable-plan[data-current-plan="true"] {
1+
.subscriptionTable-plan[data-current-plan="true"] {
22
border-left: 2px solid $pm-primary;
33
border-right: 2px solid $pm-primary;
44
border-bottom: 2px solid $pm-primary;
55
background-color: $pm-global-light;
66
}
77

8-
.subsctiptionTable-currentPlan-container {
8+
.subscriptionTable-currentPlan-container {
99
background-color: $pm-primary;
1010
color: $white;
1111
position: absolute;
@@ -15,11 +15,11 @@
1515
border-radius: $global-border-radius $global-border-radius 0 0;
1616
}
1717

18-
.subsctiptionTable-header {
18+
.subscriptionTable-header {
1919
height: 220px;
2020
}
2121

22-
.subsctiptionTable-image-container {
22+
.subscriptionTable-image-container {
2323
height: 100px;
2424
}
2525

@@ -32,10 +32,14 @@
3232
font-size: smaller;
3333
}
3434

35-
.subsctiptionTable-features {
35+
.subscriptionTable-feature {
3636
background-image: url('#{$path-images}sprite-for-css-only.svg#css-arrow-right');
3737
background-size: 10px;
3838
padding-left: 20px;
3939
background-repeat: no-repeat;
4040
background-position: 5px 5px;
41+
}
42+
43+
.subscriptionTable-feature {
44+
4145
}

0 commit comments

Comments
 (0)