New subscription flow

components/button/Copy.js

@@ -30,8 +30,9 @@ const Copy = ({ value, className = '', onCopy }) => {
 
     return (
         <Button onClick={handleClick} className={classnames([className, copied && 'copied'])}>
-            <Tooltip title={copied ? c('Label').t`Copied` : c('Label').t`Copy`}>
+            <Tooltip className="flex" title={copied ? c('Label').t`Copied` : c('Label').t`Copy`}>
                 <Icon name="clipboard" />
+                <span className="sr-only">{copied ? c('Label').t`Copied` : c('Label').t`Copy`}</span>
             </Tooltip>
         </Button>
     );

components/image/QRCode.js

@@ -2,21 +2,28 @@ import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import QRCodeJS from 'qrcodejs2';
 
-const QRCode = ({ url, ...rest }) => {
+const QRCode = ({ url: text, width = 128, height = 128, ...rest }) => {
     const divRef = useRef(null);
 
     useEffect(() => {
-        const qrcode = new QRCodeJS(divRef.current, url);
+        const qrcode = new QRCodeJS(divRef.current, {
+            text,
+            width,
+            height
+        });
+
         return () => {
             qrcode.clear();
         };
-    }, []);
+    }, [width, height]);
 
     return <div ref={divRef} {...rest} />;
 };
 
 QRCode.propTypes = {
-    url: PropTypes.string.isRequired
+    url: PropTypes.string.isRequired,
+    width: PropTypes.number,
+    height: PropTypes.number
 };
 
 export default QRCode;

components/link/Info.js

@@ -11,7 +11,7 @@ const Info = ({
     title = undefined,
     originalPlacement = 'top',
     scrollContainerClass = 'main',
-    buttonClass = 'inline-flex',
+    buttonClass = 'inline-flex color-currentColor',
     ...rest
 }) => {
     const [uid] = useState(generateUID('tooltip'));

components/modal/Footer.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { classnames } from '../../helpers/component';
 
-const Footer = ({ children, className = 'flex flex-spacebetween', ...rest }) => {
+const Footer = ({ children, className = 'flex flex-spacebetween flex-items-center flex-nowrap', ...rest }) => {
     return (
         <footer className={classnames(['pm-modalFooter', className])} {...rest}>
             {children}

components/price/Price.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import humanPrice from 'proton-shared/lib/helpers/humanPrice';
+
 import { classnames } from '../../helpers/component';
 
 const CURRENCIES = {
@@ -8,17 +10,18 @@ const CURRENCIES = {
     CHF: 'CHF'
 };
 
-const Price = ({ children: amount = 0, currency = '', className = '', divisor = 100, suffix = '' }) => {
-    const fixedValue = Number(amount / divisor).toFixed(2);
-    const value = fixedValue.replace('.00', '').replace('-', '');
+const Price = ({ children: amount = 0, currency = '', className = '', divisor = 100, suffix = '', prefix = '' }) => {
+    const value = humanPrice(amount, divisor);
     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 s = suffix ? <span className="suffix ml0-25">{suffix}</span> : null;
+    const pr = prefix ? <span className="prefix">{prefix}</span> : null;
 
     if (currency === 'USD') {
         return (
-            <span className={classnames(['price', className])} data-currency={currency}>
+            <span className={classnames(['price flex-item-noshrink inline-flex', className])} data-currency={currency}>
+                {pr}
                 {p}
                 {c}
                 {v}
@@ -28,7 +31,8 @@ const Price = ({ children: amount = 0, currency = '', className = '', divisor =
     }
 
     return (
-        <span className={classnames(['price', className])} data-currency={currency}>
+        <span className={classnames(['price flex-item-noshrink inline-flex', className])} data-currency={currency}>
+            {pr}
             {p}
             {v}
             {currency ? <> {c}</> : null}
@@ -42,7 +46,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/invoices/PayInvoiceModal.js

@@ -18,19 +18,16 @@ import { toPrice } from 'proton-shared/lib/helpers/string';
 
 import Payment from '../payments/Payment';
 import usePayment from '../payments/usePayment';
-import useCard from '../payments/useCard';
 import { handlePaymentToken } from '../payments/paymentTokenHelper';
 
 const PayInvoiceModal = ({ invoice, fetchInvoices, ...rest }) => {
     const { createModal } = useModals();
     const [loading, withLoading] = useLoading();
     const api = useApi();
-    const card = useCard();
     const { result = {}, loading: loadingCheck } = useApiResult(() => checkInvoice(invoice.ID), []);
     const { AmountDue, Amount, Currency, Credit } = result;
-    const { method, setMethod, parameters, setParameters, canPay, setCardValidity } = usePayment();
 
-    const handleSubmit = async (params = parameters) => {
+    const handleSubmit = async (params) => {
         const requestBody = await handlePaymentToken({
             params: { ...params, Amount: AmountDue, Currency },
             api,
@@ -41,10 +38,16 @@ const PayInvoiceModal = ({ invoice, fetchInvoices, ...rest }) => {
         rest.onClose();
     };
 
+    const { card, setCard, errors, method, setMethod, parameters, canPay, paypal, paypalCredit } = usePayment({
+        amount: AmountDue,
+        currency: Currency,
+        onPay: handleSubmit
+    });
+
     return (
         <FormModal
             small
-            onSubmit={() => withLoading(handleSubmit())}
+            onSubmit={() => withLoading(handleSubmit(parameters))}
             loading={loading}
             close={c('Action').t`Close`}
             submit={canPay && c('Action').t`Pay`}
@@ -87,12 +90,12 @@ const PayInvoiceModal = ({ invoice, fetchInvoices, ...rest }) => {
                             method={method}
                             amount={AmountDue}
                             currency={Currency}
-                            parameters={parameters}
                             card={card}
-                            onParameters={setParameters}
                             onMethod={setMethod}
-                            onValidCard={setCardValidity}
-                            onPay={handleSubmit}
+                            onCard={setCard}
+                            errors={errors}
+                            paypal={paypal}
+                            paypalCredit={paypalCredit}
                         />
                     ) : null}
                 </>

containers/labels/ActionsLabelToolbar.js

@@ -18,7 +18,8 @@ function ActionsLabelToolbar({ onAdd = noop }) {
             <PrimaryButton onClick={handleClickAdd('folder')} className="mr1" data-test-id="folders/labels:addFolder">
                 {c('Action').t`Add folder`}
             </PrimaryButton>
-            <PrimaryButton onClick={handleClickAdd('label')} data-test-id="folders/labels:addLabel">{c('Action').t`Add label`}</PrimaryButton>
+            <PrimaryButton onClick={handleClickAdd('label')} data-test-id="folders/labels:addLabel">{c('Action')
+                .t`Add label`}</PrimaryButton>
         </>
     );
 }

containers/overview/SummarySection.js

@@ -13,7 +13,7 @@ const Rows = ({ subscription, user }) => {
 
     return (
         <>
-            <div className="flex-autogrid onmobile-flex-column w100 mb1">
+            <div className="flex-autogrid onmobile-flex-column flex-items-center w100 mb1">
                 <div className="flex-autogrid-item">ProtonMail plan</div>
                 <div className="flex-autogrid-item bold capitalize">
                     {user.hasPaidMail ? mailPlan.Name : c('Plan').t`Free`}

containers/paymentMethods/PaymentMethodDetails.js

@@ -1,39 +1,97 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Bordered } from 'react-components';
 import { c } from 'ttag';
+import { getLightOrDark } from 'proton-shared/lib/themes/helpers';
 import { PAYMENT_METHOD_TYPES } from 'proton-shared/lib/constants';
+import useSvgGraphicsBbox from '../../hooks/useSvgGraphicsBbox';
+
+const banks = require.context('design-system/assets/img/shared/bank-icons', true, /.svg$/);
+
+const banksMap = banks.keys().reduce((acc, key) => {
+    acc[key] = () => banks(key);
+    return acc;
+}, {});
+
+const getBankSvg = (type = '') => {
+    const key = `./cc-${type}.svg`;
+    const keyDark = `./cc-${type}-dark.svg`;
+    if (!banksMap[key]) {
+        return;
+    }
+    const ligthLogo = banksMap[key]().default;
+    const darkLogo = !banksMap[keyDark] ? ligthLogo : banksMap[keyDark]().default;
+
+    return getLightOrDark(ligthLogo, darkLogo);
+};
+
+const BANKS = {
+    'American Express': 'american-express',
+    'Diners Club': 'diners-club',
+    Discover: 'discover',
+    JCB: 'jcb',
+    Maestro: 'maestro',
+    MasterCard: 'mastercard',
+    UnionPay: 'unionpay',
+    Visa: 'visa'
+};
 
 const PaymentMethodDetails = ({ type, details = {} }) => {
-    const { Last4, Name, ExpMonth, ExpYear, Payer } = details;
+    const { Last4, Name, ExpMonth, ExpYear, Payer, Brand = '' } = details;
+
+    const cardNumberText = `•••• •••• •••• ${Last4}`;
+    const textRef = useRef();
+    const textBbox = useSvgGraphicsBbox(textRef, [cardNumberText]);
+    const textWidth = Math.floor(textBbox.width);
+
     if (type === PAYMENT_METHOD_TYPES.CARD) {
+        const bankIcon = getBankSvg(BANKS[Brand]);
         return (
-            <Bordered className="bg-global-highlight">
-                <h4>
-                    <code>•••• •••• •••• {Last4}</code>
-                </h4>
-                <div className="flex-autogrid">
-                    <div className="flex-autogrid-item">
-                        <div>{c('Label').t`Cardholder name`}:</div>
-                        <strong>{Name}</strong>
+            <Bordered className="bg-global-highlight inline-flex flex-column w100 pl2 pr2 pb2">
+                {bankIcon ? <img width="70" src={bankIcon} alt={Brand} className="mb1" /> : null}
+                <span className="color-global-grey-dm bl mb1 opacity-40">{c('Label').t`Card number`}</span>
+                <div className="ratio-container-5-1 aligncenter">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="inner-ratio-container fill-currentColor"
+                        viewBox={`0 0 ${textWidth} 50`}
+                        xmlSpace="preserve"
+                    >
+                        <text x="0px" y="40px" className="size-40 strong" ref={textRef}>
+                            {cardNumberText}
+                        </text>
+                    </svg>
+                </div>
+                <div className="flex flex-nowrap flex-spacebetween">
+                    <div>
+                        <span className="color-global-grey-dm bl mb0-5 opacity-40">{c('Label').t`Card holder`}</span>
+                        <span className="bigger mt0 mb0">{Name}</span>
                     </div>
-                    <div className="flex-autogrid-item">
-                        <div>{c('Label for credit card').t`Expiration`}:</div>
-                        <strong>
+                    <div className="alignright">
+                        <span className="color-global-grey-dm bl mb0-5 opacity-40">{c('Label').t`Expires`}</span>
+                        <span className="bigger mt0 mb0">
                             {ExpMonth}/{ExpYear}
-                        </strong>
+                        </span>
                     </div>
                 </div>
             </Bordered>
         );
     }
 
     if (type === PAYMENT_METHOD_TYPES.PAYPAL) {
+        const bankIcon = getBankSvg('paypal');
         return (
-            <Bordered className="bg-global-highlight">
-                <h4>
-                    <code>PayPal {Payer}</code>
-                </h4>
+            <Bordered className="bg-global-highlight p2">
+                <div>
+                    <img width="70" src={bankIcon} alt="PayPal" className="mb1" />
+                </div>
+                <div className="flex flex-wrap flex-items-center">
+                    <label className="color-global-grey-dm flex-item-noshrink mr1" htmlFor="paypal-payer">{c('Label')
+                        .t`Payer`}</label>
+                    <code id="paypal-payer" className="bl bigger mb0 mb1 ellipsis" title={Payer}>
+                        {Payer}
+                    </code>
+                </div>
             </Bordered>
         );
     }