Use new subscription flow

src/app/app.scss

@@ -19,6 +19,7 @@ $color-links: $pm-primary;
 @import '~design-system/_sass/pv-styles/pv-plan-card';
 @import './containers/RedeemContainer.scss';
 @import '~react-components/containers/payments/subscription/BlackFridayModal.scss';
+@import '~react-components/containers/payments/subscription/SubscriptionTable.scss';
 
 // stuff for responsive
 @import '~design-system/_sass/reusable-components/design-system-responsive';

src/app/containers/DashboardContainer.js

@@ -1,33 +1,20 @@
-import React, { useEffect, useRef } from 'react';
-import {
-    SubscriptionSection,
-    BillingSection,
-    useModals,
-    VPNBlackFridayModal,
-    usePlans,
-    SubscriptionModal,
-    useSubscription,
-    useBlackFriday,
-    useUser,
-    useApi
-} from 'react-components';
-import { checkLastCancelledSubscription } from 'react-components/containers/payments/subscription/helpers';
+import React from 'react';
+import { PlansSection, SubscriptionSection, BillingSection, useUser } from 'react-components';
 import { PERMISSIONS } from 'proton-shared/lib/constants';
 import { c } from 'ttag';
 
 import Page from '../components/page/Page';
-import PlansSection from '../components/sections/plans/PlansSection';
 
 const { UPGRADER, PAID } = PERMISSIONS;
 
-export const getDashboardPage = () => {
+export const getDashboardPage = (user = {}) => {
     return {
         text: c('Title').t`Dashboard`,
         route: '/dashboard',
         icon: 'dashboard',
         permissions: [UPGRADER],
         sections: [
-            {
+            !user.hasPaidVpn && {
                 text: c('Title').t`Plans`,
                 id: 'plans'
             },
@@ -41,50 +28,25 @@ export const getDashboardPage = () => {
                 id: 'billing',
                 permissions: [PAID]
             }
-        ]
+        ].filter(Boolean)
     };
 };
 
 const DashboardContainer = () => {
-    const api = useApi();
-    const { createModal } = useModals();
-    const [plans, loadingPlans] = usePlans();
-    const [subscription] = useSubscription();
-    const isBlackFriday = useBlackFriday();
-    const checked = useRef(false);
-    const [user] = useUser();
-
-    const handleSelect = ({ planIDs = [], cycle, currency, couponCode }) => {
-        const plansMap = planIDs.reduce((acc, planID) => {
-            const { Name } = plans.find(({ ID }) => ID === planID);
-            acc[Name] = 1;
-            return acc;
-        }, Object.create(null));
-
-        createModal(
-            <SubscriptionModal
-                plansMap={plansMap}
-                customize={false}
-                subscription={subscription}
-                cycle={cycle}
-                currency={currency}
-                coupon={couponCode}
-            />
+    const [user, loadingUser] = useUser();
+
+    if (loadingUser) {
+        return null;
+    }
+
+    if (user.hasPaidVpn) {
+        return (
+            <Page config={getDashboardPage(user)}>
+                <SubscriptionSection />
+                <BillingSection />
+            </Page>
         );
-    };
-
-    const check = async () => {
-        if (await checkLastCancelledSubscription(api)) {
-            createModal(<VPNBlackFridayModal plans={plans} onSelect={handleSelect} />);
-        }
-    };
-
-    useEffect(() => {
-        if (Array.isArray(plans) && !checked.current && user.isFree && isBlackFriday) {
-            check();
-            checked.current = true;
-        }
-    }, [loadingPlans]);
+    }
 
     return (
         <Page config={getDashboardPage()}>

src/app/containers/SignupContainer/PaymentStep/PaymentStep.js

@@ -1,15 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Payment, usePayment, PrimaryButton, Field, Row, useLoading, SubTitle, useCard } from 'react-components';
+import { Alert, Payment, usePayment, PrimaryButton, Field, Row, useLoading, SubTitle } from 'react-components';
 import { c } from 'ttag';
 import { PAYMENT_METHOD_TYPES, CYCLE, CURRENCIES } from 'proton-shared/lib/constants';
 
 import LoginPanel from '../LoginPanel';
 
 const PaymentStep = ({ onPay, paymentAmount, model, children }) => {
     const [loading, withLoading] = useLoading();
-    const { method, setMethod, parameters, canPay, setParameters, setCardValidity } = usePayment();
-    const card = useCard();
+    const { card, setCard, errors, method, setMethod, parameters, canPay, paypal, paypalCredit } = usePayment({
+        amount: paymentAmount,
+        currency: model.currency,
+        onPay(params) {
+            withLoading(onPay(model, params));
+        }
+    });
 
     return (
         <div className="pt2 mb2">
@@ -18,18 +23,17 @@ const PaymentStep = ({ onPay, paymentAmount, model, children }) => {
                 <div>
                     <Alert>{c('Info').t`Your payment details are protected with TLS encryption and Swiss laws`}</Alert>
                     <Payment
-                        card={card}
+                        fieldClassName="auto flex-item-fluid-auto"
                         type="signup"
                         method={method}
                         amount={paymentAmount}
-                        cycle={model.cycle}
                         currency={model.currency}
-                        parameters={parameters}
-                        onParameters={setParameters}
+                        card={card}
                         onMethod={setMethod}
-                        onValidCard={setCardValidity}
-                        onPay={(params) => withLoading(onPay(model, params))}
-                        fieldClassName="auto flex-item-fluid-auto"
+                        onCard={setCard}
+                        errors={errors}
+                        paypal={paypal}
+                        paypalCredit={paypalCredit}
                     >
                         {method === PAYMENT_METHOD_TYPES.CARD && (
                             <Field>