feat(user): add no subscription text

src/components/Account/Account.tsx

@@ -88,19 +88,16 @@ const Account = ({
               <h3>{t('account.email')}</h3>
             </div>
             <div className={styles.flexBox}>
-              {editing === 'account' ? (
-                <TextField
-                  name="email"
-                  label={t('account.email')}
-                  value={values.email as string}
-                  onChange={handleChange}
-                  error={!!errors?.email}
-                  helperText={errors?.email}
-                  disabled={isLoading}
-                />
-              ) : (
-                <p>{customer?.email}</p>
-              )}
+              <TextField
+                name="email"
+                label={t('account.email')}
+                value={values.email as string}
+                onChange={handleChange}
+                error={!!errors?.email}
+                helperText={errors?.email}
+                disabled={isLoading}
+                editing={editing === 'account'}
+              />
               {editing === 'account' && (
                 <TextField
                   name="confirmationPassword"

src/components/Account/__snapshots__/Account.test.tsx.snap

@@ -14,9 +14,19 @@ exports[`<Account> renders and matches snapshot 1`] = `
       <div
         class="flexBox"
       >
-        <p>
-          email@domain.com
-        </p>
+        <div
+          class="textField"
+        >
+          <label
+            class="label"
+            for="text-field_1235_email"
+          >
+            account.email
+          </label>
+          <p>
+            email@domain.com
+          </p>
+        </div>
         <div
           class="controls"
         >

src/components/Payment/Payment.tsx

@@ -8,6 +8,7 @@ import type { Customer } from '../../../types/account';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 
 import styles from './Payment.module.scss';
+import Button from '../Button/Button';
 
 type Props = {
   activeSubscription?: Subscription;
@@ -28,55 +29,66 @@ const Payment = ({
   panelClassName,
   panelHeaderClassName,
 }: Props): JSX.Element => {
-  const { t } = useTranslation('user');
+  const { t } = useTranslation(['user', 'account']);
 
   return (
     <>
       <div className={panelClassName}>
         <div className={panelHeaderClassName}>
-          <h3>{t('payment.subscription_details')}</h3>
+          <h3>{t('user:payment.subscription_details')}</h3>
         </div>
         {activeSubscription ? (
           <div className={styles.infoBox} key={activeSubscription.subscriptionId}>
             <p>
-              <strong>{t('payment.monthly_subscription')}</strong> <br />
-              {t('payment.next_billing_date_on')} {formatDate(activeSubscription.expiresAt)}
+              <strong>{t('user:payment.monthly_subscription')}</strong> <br />
+              {t('user:payment.next_billing_date_on')} {formatDate(activeSubscription.expiresAt)}
             </p>
             <p className={styles.price}>
               <strong>{formatPrice(activeSubscription.totalPrice, activeSubscription.nextPaymentCurrency, customer.country)}</strong>
-              {'/'}
-              {t(`payment.month`)} {/** @todo: create dynamic translation keys by period */}
+              <small>/{t(`account:periods.${activeSubscription.period}`)}</small>
             </p>
           </div>
-        ) : null}
+        ) : (
+          <React.Fragment>
+            <p>{t('user:payment.no_subscription')}</p>
+            <Button variant="contained" color="primary" label={t('user:payment.complete_subscription')} />
+          </React.Fragment>
+        )}
       </div>
       <div className={panelClassName}>
         <div className={panelHeaderClassName}>
-          <h3>{t('payment.payment_method')}</h3>
+          <h3>{t('user:payment.payment_method')}</h3>
         </div>
         {activePaymentDetail ? (
           <div key={activePaymentDetail.id}>
             <TextField
-              label={t('payment.card_number')}
+              label={t('user:payment.card_number')}
               value={`•••• •••• •••• ${activePaymentDetail.paymentMethodSpecificParams.lastCardFourDigits || ''}`}
               editing={false}
             />
             <div className={styles.cardDetails}>
-              <TextField label={t('payment.expiry_date')} value={activePaymentDetail.paymentMethodSpecificParams.cardExpirationDate} editing={false} />
-              <TextField label={t('payment.cvc_cvv')} value={'******'} editing={false} />
+              <TextField
+                label={t('user:payment.expiry_date')}
+                value={activePaymentDetail.paymentMethodSpecificParams.cardExpirationDate}
+                editing={false}
+              />
+              <TextField label={t('user:payment.cvc_cvv')} value={'******'} editing={false} />
             </div>
           </div>
         ) : null}
       </div>
       <div className={panelClassName}>
         <div className={panelHeaderClassName}>
-          <h3>{t('payment.transactions')}</h3>
+          <h3>{t('user:payment.transactions')}</h3>
         </div>
-        {transactions?.map(transaction => (
+        {transactions?.map((transaction) => (
           <div className={styles.infoBox} key={transaction.transactionId}>
             <p>
               <strong>{transaction.offerTitle}</strong> <br />
-              {t('payment.price_payed_with', { price: formatPrice(parseInt(transaction.transactionPriceInclTax), transaction.transactionCurrency, transaction.customerCountry), method: transaction.paymentMethod })}
+              {t('user:payment.price_payed_with', {
+                price: formatPrice(parseInt(transaction.transactionPriceInclTax), transaction.transactionCurrency, transaction.customerCountry),
+                method: transaction.paymentMethod,
+              })}
             </p>
             <p>
               {transaction.transactionId}
@@ -90,5 +102,4 @@ const Payment = ({
     </>
   );
 };
-
 export default Payment;

src/components/Payment/__snapshots__/Payment.test.tsx.snap

@@ -5,19 +5,19 @@ exports[`<Payment> renders and matches snapshot 1`] = `
   <div>
     <div>
       <h3>
-        payment.subscription_details
+        user:payment.subscription_details
       </h3>
     </div>
     <div
       class="infoBox"
     >
       <p>
         <strong>
-          payment.monthly_subscription
+          user:payment.monthly_subscription
         </strong>
          
         <br />
-        payment.next_billing_date_on
+        user:payment.next_billing_date_on
          
         3/16/2021
       </p>
@@ -27,16 +27,17 @@ exports[`<Payment> renders and matches snapshot 1`] = `
         <strong>
           € 20,00
         </strong>
-        /
-        payment.month
-         
+        <small>
+          /
+          account:periods.year
+        </small>
       </p>
     </div>
   </div>
   <div>
     <div>
       <h3>
-        payment.payment_method
+        user:payment.payment_method
       </h3>
     </div>
     <div>
@@ -47,7 +48,7 @@ exports[`<Payment> renders and matches snapshot 1`] = `
           class="label"
           for="text-field_1235"
         >
-          payment.card_number
+          user:payment.card_number
         </label>
         <p>
           •••• •••• •••• 0002
@@ -63,7 +64,7 @@ exports[`<Payment> renders and matches snapshot 1`] = `
             class="label"
             for="text-field_1235"
           >
-            payment.expiry_date
+            user:payment.expiry_date
           </label>
           <p>
             03/2030
@@ -76,7 +77,7 @@ exports[`<Payment> renders and matches snapshot 1`] = `
             class="label"
             for="text-field_1235"
           >
-            payment.cvc_cvv
+            user:payment.cvc_cvv
           </label>
           <p>
             ******
@@ -88,7 +89,7 @@ exports[`<Payment> renders and matches snapshot 1`] = `
   <div>
     <div>
       <h3>
-        payment.transactions
+        user:payment.transactions
       </h3>
     </div>
     <div
@@ -100,7 +101,7 @@ exports[`<Payment> renders and matches snapshot 1`] = `
         </strong>
          
         <br />
-        payment.price_payed_with
+        user:payment.price_payed_with
       </p>
       <p>
         T712014024
@@ -117,7 +118,7 @@ exports[`<Payment> renders and matches snapshot 1`] = `
         </strong>
          
         <br />
-        payment.price_payed_with
+        user:payment.price_payed_with
       </p>
       <p>
         T177974068
@@ -134,7 +135,7 @@ exports[`<Payment> renders and matches snapshot 1`] = `
         </strong>
          
         <br />
-        payment.price_payed_with
+        user:payment.price_payed_with
       </p>
       <p>
         T996601696

src/i18n/locales/en_US/user.json

@@ -31,12 +31,12 @@
   },
   "payment": {
     "card_number": "Card number",
+    "complete_subscription": "Complete subscription",
     "cvc_cvv": "CVC / CVV",
-    "edit_subscription": "Edit subscription",
     "expiry_date": "Expiry date",
-    "month": "month",
     "monthly_subscription": "Monthly subscription",
     "next_billing_date_on": "Next billing date is on",
+    "no_subscription": "You have no subscription. Complete your subscription to start watching all movies and series.",
     "payment_method": "Payment method",
     "price_payed_with": "{{price}} payed with {{method}}",
     "subscription_details": "Subscription details",

src/i18n/locales/nl_NL/user.json

@@ -31,12 +31,12 @@
   },
   "payment": {
     "card_number": "",
+    "complete_subscription": "",
     "cvc_cvv": "",
-    "edit_subscription": "",
     "expiry_date": "",
-    "month": "",
     "monthly_subscription": "",
     "next_billing_date_on": "",
+    "no_subscription": "",
     "payment_method": "",
     "price_payed_with": "",
     "subscription_details": "",

types/subscription.d.ts

@@ -9,7 +9,7 @@ export type Subscription = {
   paymentGateway: string;
   paymentMethod: string;
   offerTitle: string;
-  period: string;
+  period: 'day' | 'week' | 'month' | 'year';
   totalPrice: number;
 };