Continue

Author: EpokK

components/price/Price.js

@@ -8,17 +8,19 @@ const CURRENCIES = {
     CHF: 'CHF'
 };
 
-const Price = ({ children: amount = 0, currency = '', className = '', divisor = 100, suffix = '' }) => {
+const Price = ({ children: amount = 0, currency = '', className = '', divisor = 100, suffix = '', prefix = '' }) => {
     const fixedValue = Number(amount / divisor).toFixed(2);
     const value = fixedValue.replace('.00', '').replace('-', '');
     const c = <span className="currency">{CURRENCIES[currency] || currency}</span>;
     const p = amount < 0 ? <span className="prefix">-</span> : null;
     const v = <span className="amount">{value}</span>;
     const s = suffix ? <span className="suffix">{suffix}</span> : null;
+    const pr = prefix ? <span className="prefix">{prefix}</span> : null;
 
     if (currency === 'USD') {
         return (
             <span className={classnames(['price', className])} data-currency={currency}>
+                {pr}
                 {p}
                 {c}
                 {v}
@@ -29,6 +31,7 @@ const Price = ({ children: amount = 0, currency = '', className = '', divisor =
 
     return (
         <span className={classnames(['price', className])} data-currency={currency}>
+            {pr}
             {p}
             {v}
             {currency ? <> {c}</> : null}
@@ -42,7 +45,8 @@ Price.propTypes = {
     children: PropTypes.number,
     className: PropTypes.string,
     divisor: PropTypes.number,
-    suffix: PropTypes.string
+    suffix: PropTypes.string,
+    prefix: PropTypes.string
 };
 
 export default Price;

containers/payments/CurrencySelector.js

@@ -3,6 +3,18 @@ import PropTypes from 'prop-types';
 import { Select, Group, ButtonGroup, classnames } from 'react-components';
 import { CURRENCIES, DEFAULT_CURRENCY } from 'proton-shared/lib/constants';
 
+const addSymbol = (currency) => {
+    if (currency === 'EUR') {
+        return `€ ${currency}`;
+    }
+
+    if (currency === 'USD') {
+        return `$ ${currency}`;
+    }
+
+    return currency;
+};
+
 const CurrencySelector = ({ currency = DEFAULT_CURRENCY, onSelect, mode = 'select', ...rest }) => {
     const handleChange = ({ target }) => onSelect(target.value);
     const options = CURRENCIES.map((c) => ({ text: c, value: c }));
@@ -26,7 +38,14 @@ const CurrencySelector = ({ currency = DEFAULT_CURRENCY, onSelect, mode = 'selec
     }
 
     if (mode === 'select') {
-        return <Select value={currency} options={options} onChange={handleChange} {...rest} />;
+        return (
+            <Select
+                value={currency}
+                options={options.map((option) => ({ ...option, text: addSymbol(option.text) }))}
+                onChange={handleChange}
+                {...rest}
+            />
+        );
     }
 
     return null;

containers/payments/PlansSection.js

@@ -21,12 +21,11 @@ import {
 
 import { checkSubscription, deleteSubscription } from 'proton-shared/lib/api/payments';
 import { DEFAULT_CURRENCY, DEFAULT_CYCLE } from 'proton-shared/lib/constants';
-import { getPlans, isBundleEligible } from 'proton-shared/lib/helpers/subscription';
+import { getPlans, isBundleEligible, getPlan } from 'proton-shared/lib/helpers/subscription';
 import { isLoyal } from 'proton-shared/lib/helpers/organization';
 
-import SubscriptionModal from './subscription/SubscriptionModal';
+import NewSubscriptionModal from './subscription/NewSubscriptionModal';
 import MailSubscriptionTable from './subscription/MailSubscriptionTable';
-import { mergePlansMap, getCheckParams } from './subscription/helpers';
 
 const PlansSection = () => {
     const { call } = useEventManager();
@@ -38,6 +37,7 @@ const PlansSection = () => {
     const [organization = {}, loadingOrganization] = useOrganization();
     const [plans = [], loadingPlans] = usePlans();
     const api = useApi();
+    const { Name } = getPlan(subscription) || {};
 
     const [currency, setCurrency] = useState(DEFAULT_CURRENCY);
     const [cycle, setCycle] = useState(DEFAULT_CYCLE);
@@ -68,29 +68,25 @@ const PlansSection = () => {
         return handleUnsubscribe();
     };
 
-    const handleModal = (newPlansMap, step) => async () => {
-        if (!newPlansMap) {
+    const handleModal = async (planID) => {
+        if (!planID) {
             handleOpenModal();
             return;
         }
 
-        const plansMap = mergePlansMap(newPlansMap, subscription);
         const couponCode = CouponCode ? CouponCode : undefined; // From current subscription; CouponCode can be null
         const { Coupon } = await api(
-            checkSubscription(getCheckParams({ plans, plansMap, currency, cycle, coupon: couponCode }))
+            checkSubscription({
+                PlanIDs: [planID],
+                Currency: currency,
+                Cycle: cycle,
+                CouponCode: couponCode
+            })
         );
+
         const coupon = Coupon ? Coupon.Code : undefined; // Coupon can equals null
 
-        createModal(
-            <SubscriptionModal
-                subscription={subscription}
-                plansMap={plansMap}
-                coupon={coupon}
-                currency={currency}
-                cycle={cycle}
-                step={step}
-            />
-        );
+        createModal(<NewSubscriptionModal planIDs={[planID]} coupon={coupon} currency={currency} cycle={cycle} />);
     };
 
     useEffect(() => {
@@ -138,13 +134,10 @@ const PlansSection = () => {
             </div>
             <MailSubscriptionTable
                 plans={plans}
-                subscription={subscription}
+                planNameSelected={Name}
                 cycle={cycle}
                 currency={currency}
-                onSelect={(planIndex) => {
-                    const { Name } = plans[planIndex];
-                    handleModal({ [Name]: 1 });
-                }}
+                onSelect={handleModal}
             />
         </>
     );

containers/payments/subscription/MailSubscriptionTable.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { SubscriptionTable } from 'react-components';
 import PropTypes from 'prop-types';
 import { PLAN_NAMES, PLANS, CYCLE } from 'proton-shared/lib/constants';
-import { getPlan } from 'proton-shared/lib/helpers/subscription';
+import { toMap } from 'proton-shared/lib/helpers/object';
 import { c } from 'ttag';
 import freePlanSvg from 'design-system/assets/img/pm-images/free-plan.svg';
 import plusPlanSvg from 'design-system/assets/img/pm-images/plus-plan.svg';
@@ -25,10 +25,11 @@ const FREE_PLAN = {
     }
 };
 
-const MailSubscriptionTable = ({ subscription = {}, plans: apiPlans = [], cycle, currency, onSelect }) => {
-    const plusPlan = apiPlans.find(({ Name }) => Name === PLANS.PLUS);
-    const professionalPlan = apiPlans.find(({ Name }) => Name === PLANS.PROFESSIONAL);
-    const visionaryPlan = apiPlans.find(({ Name }) => Name === PLANS.VISIONARY);
+const MailSubscriptionTable = ({ planNameSelected, plans: apiPlans = [], cycle, currency, onSelect }) => {
+    const plansMap = toMap(apiPlans, 'Name');
+    const plusPlan = plansMap[PLANS.PLUS];
+    const professionalPlan = plansMap[PLANS.PROFESSIONAL];
+    const visionaryPlan = plansMap[PLANS.VISIONARY];
     const plans = [
         {
             planName: 'Free',
@@ -63,6 +64,7 @@ const MailSubscriptionTable = ({ subscription = {}, plans: apiPlans = [], cycle,
             ]
         },
         plusPlan && {
+            planID: plusPlan.ID,
             planName: PLAN_NAMES[PLANS.PLUS],
             canCustomize: true,
             price: <SubscriptionPrices cycle={cycle} currency={currency} plan={plusPlan} />,
@@ -95,9 +97,17 @@ const MailSubscriptionTable = ({ subscription = {}, plans: apiPlans = [], cycle,
             ]
         },
         professionalPlan && {
+            planID: professionalPlan.ID,
             planName: PLAN_NAMES[PLANS.PROFESSIONAL],
             canCustomize: true,
-            price: <SubscriptionPrices cycle={cycle} currency={currency} plan={professionalPlan} suffix={c('Suffix').t`/month/user`} />,
+            price: (
+                <SubscriptionPrices
+                    cycle={cycle}
+                    currency={currency}
+                    plan={professionalPlan}
+                    suffix={c('Suffix').t`/month/user`}
+                />
+            ),
             imageSrc: professionalPlanSvg,
             description: c('Description').t`For large organizations and businesses`,
             features: [
@@ -127,6 +137,7 @@ const MailSubscriptionTable = ({ subscription = {}, plans: apiPlans = [], cycle,
             ]
         },
         visionaryPlan && {
+            planID: visionaryPlan.ID,
             planName: PLAN_NAMES[PLANS.VISIONARY],
             canCustomize: false,
             price: <SubscriptionPrices cycle={cycle} currency={currency} plan={visionaryPlan} />,
@@ -159,24 +170,27 @@ const MailSubscriptionTable = ({ subscription = {}, plans: apiPlans = [], cycle,
             ]
         }
     ];
-    const { Name } = getPlan(subscription);
 
     return (
         <>
             <SubscriptionTable
-                currentPlanIndex={INDEXES[Name] || 0}
+                currentPlanIndex={INDEXES[planNameSelected] || 0}
                 mostPopularIndex={1}
                 plans={plans}
-                onSelect={onSelect}
+                onSelect={(index) => onSelect(plans[index].planID)}
             />
             <p className="small mt1 mb0">* {c('Info concerning plan features').t`Customizable features`}</p>
-            <p className="small mt0 mb0">** {c('Info concerning plan features').t`ProtonMail cannot be used for mass emailing or spamming. Legitimate emails are unlimited.`}</p>
+            <p className="small mt0 mb0">
+                **{' '}
+                {c('Info concerning plan features')
+                    .t`ProtonMail cannot be used for mass emailing or spamming. Legitimate emails are unlimited.`}
+            </p>
         </>
     );
 };
 
 MailSubscriptionTable.propTypes = {
-    subscription: PropTypes.object,
+    planNameSelected: PropTypes.string,
     plans: PropTypes.arrayOf(PropTypes.object),
     onSelect: PropTypes.func.isRequired,
     cycle: PropTypes.oneOf([CYCLE.MONTHLY, CYCLE.YEARLY, CYCLE.TWO_YEARS]).isRequired,