feat(user): add text describing empty paymentmethod or transactions

jwplayer · Aug 5, 2021 · ab2237b · ab2237b
1 parent 707b20e
commit ab2237b
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 20 deletions.
diff --git a/src/components/Payment/Payment.tsx b/src/components/Payment/Payment.tsx
@@ -90,28 +90,38 @@ const Payment = ({
               <TextField label={t('user:payment.cvc_cvv')} value={'******'} editing={false} />
             </div>
           </div>
-        ) : null}
+        ) : (
+          <div>
+            <p>{t('user:payment.no_payment_methods')}</p>
+          </div>
+        )}
       </div>
       <div className={panelClassName}>
         <div className={panelHeaderClassName}>
           <h3>{t('user:payment.transactions')}</h3>
         </div>
-        {transactions?.map((transaction) => (
-          <div className={styles.infoBox} key={transaction.transactionId}>
-            <p>
-              <strong>{transaction.offerTitle}</strong> <br />
-              {t('user:payment.price_payed_with', {
-                price: formatPrice(parseInt(transaction.transactionPriceInclTax), transaction.transactionCurrency, transaction.customerCountry),
-                method: transaction.paymentMethod,
-              })}
-            </p>
-            <p>
-              {transaction.transactionId}
-              <br />
-              {formatDate(transaction.transactionDate)}
-            </p>
+        {transactions?.length ? (
+          transactions?.map((transaction) => (
+            <div className={styles.infoBox} key={transaction.transactionId}>
+              <p>
+                <strong>{transaction.offerTitle}</strong> <br />
+                {t('user:payment.price_payed_with', {
+                  price: formatPrice(parseInt(transaction.transactionPriceInclTax), transaction.transactionCurrency, transaction.customerCountry),
+                  method: transaction.paymentMethod,
+                })}
+              </p>
+              <p>
+                {transaction.transactionId}
+                <br />
+                {formatDate(transaction.transactionDate)}
+              </p>
+            </div>
+          ))
+        ) : (
+          <div>
+            <p>{t('user:payment.no_transactions')}</p>
           </div>
-        ))}
+        )}
       </div>
       {isLoading && <LoadingOverlay inline />}
     </>

diff --git a/src/containers/Subscription/SubscriptionContainer.ts b/src/containers/Subscription/SubscriptionContainer.ts
@@ -40,10 +40,10 @@ const SubscriptionContainer = ({ children }: Props): JSX.Element => {
     activeSubscription: subscriptions?.responseData?.items.find(
       (subscription) => subscription.status !== 'expired' && subscription.status !== 'terminated',
     ),
-    activePaymentDetail: paymentDetails?.responseData.paymentDetails.find((paymentDetails) => paymentDetails.active),
-    subscriptions: subscriptions?.responseData.items,
-    paymentDetails: paymentDetails?.responseData.paymentDetails,
-    transactions: transactions?.responseData.items,
+    activePaymentDetail: paymentDetails?.responseData?.paymentDetails.find((paymentDetails) => paymentDetails.active),
+    subscriptions: subscriptions?.responseData?.items,
+    paymentDetails: paymentDetails?.responseData?.paymentDetails,
+    transactions: transactions?.responseData?.items,
     isLoading: isSubscriptionsLoading || isPaymentDetailsLoading || isTransactionsLoading,
   } as ChildrenParams);
 };

diff --git a/src/i18n/locales/en_US/user.json b/src/i18n/locales/en_US/user.json
@@ -40,7 +40,9 @@
     "expiry_date": "Expiry date",
     "monthly_subscription": "Monthly subscription",
     "next_billing_date_on": "Next billing date is on {{date}}",
+    "no_payment_methods": "No payment methods",
     "no_subscription": "You have no subscription. Complete your subscription to start watching all movies and series.",
+    "no_transactions": "No transactions",
     "payment_method": "Payment method",
     "price_payed_with": "{{price}} payed with {{method}}",
     "renew_subscription": "Renew subscription",

diff --git a/src/i18n/locales/nl_NL/user.json b/src/i18n/locales/nl_NL/user.json
@@ -40,7 +40,9 @@
     "expiry_date": "",
     "monthly_subscription": "",
     "next_billing_date_on": "",
+    "no_payment_methods": "",
     "no_subscription": "",
+    "no_transactions": "",
     "payment_method": "",
     "price_payed_with": "",
     "renew_subscription": "",