fix(user): show payments menu in authvod access model

jwplayer · Jun 1, 2022 · 6e2671a · 6e2671a
1 parent 833c364
commit 6e2671a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 34 deletions.
diff --git a/src/components/Payment/Payment.tsx b/src/components/Payment/Payment.tsx
@@ -12,10 +12,12 @@ import { addQueryParam } from '../../utils/history';
 import styles from './Payment.module.scss';
 
 import type { PaymentDetail, Subscription, Transaction } from '#types/subscription';
+import type { AccessModel } from '#types/Config';
 
 const VISIBLE_TRANSACTIONS = 4;
 
 type Props = {
+  accessModel: AccessModel;
   activeSubscription: Subscription | null;
   activePaymentDetail: PaymentDetail | null;
   transactions: Transaction[] | null;
@@ -28,6 +30,7 @@ type Props = {
 };
 
 const Payment = ({
+  accessModel,
   activePaymentDetail,
   activeSubscription,
   transactions,
@@ -72,37 +75,39 @@ const Payment = ({
 
   return (
     <>
-      <div className={panelClassName}>
-        <div className={panelHeaderClassName}>
-          <h3>{t('user:payment.subscription_details')}</h3>
+      {accessModel === 'SVOD' && (
+        <div className={panelClassName}>
+          <div className={panelHeaderClassName}>
+            <h3>{t('user:payment.subscription_details')}</h3>
+          </div>
+          {activeSubscription ? (
+            <React.Fragment>
+              <div className={styles.infoBox} key={activeSubscription.subscriptionId}>
+                <p>
+                  <strong>{getTitle(activeSubscription.period)}</strong> <br />
+                  {activeSubscription.status === 'active'
+                    ? t('user:payment.next_billing_date_on', { date: formatDate(activeSubscription.expiresAt) })
+                    : t('user:payment.subscription_expires_on', { date: formatDate(activeSubscription.expiresAt) })}
+                </p>
+                <p className={styles.price}>
+                  <strong>{formatPrice(activeSubscription.nextPaymentPrice, activeSubscription.nextPaymentCurrency, customer.country)}</strong>
+                  <small>/{t(`account:periods.${activeSubscription.period}`)}</small>
+                </p>
+              </div>
+              {activeSubscription.status === 'active' ? (
+                <Button label={t('user:payment.cancel_subscription')} onClick={onCancelSubscriptionClick} />
+              ) : (
+                <Button label={t('user:payment.renew_subscription')} onClick={onRenewSubscriptionClick} />
+              )}
+            </React.Fragment>
+          ) : isLoading ? null : (
+            <React.Fragment>
+              <p>{t('user:payment.no_subscription')}</p>
+              <Button variant="contained" color="primary" label={t('user:payment.complete_subscription')} onClick={onCompleteSubscriptionClick} />
+            </React.Fragment>
+          )}
         </div>
-        {activeSubscription ? (
-          <React.Fragment>
-            <div className={styles.infoBox} key={activeSubscription.subscriptionId}>
-              <p>
-                <strong>{getTitle(activeSubscription.period)}</strong> <br />
-                {activeSubscription.status === 'active'
-                  ? t('user:payment.next_billing_date_on', { date: formatDate(activeSubscription.expiresAt) })
-                  : t('user:payment.subscription_expires_on', { date: formatDate(activeSubscription.expiresAt) })}
-              </p>
-              <p className={styles.price}>
-                <strong>{formatPrice(activeSubscription.nextPaymentPrice, activeSubscription.nextPaymentCurrency, customer.country)}</strong>
-                <small>/{t(`account:periods.${activeSubscription.period}`)}</small>
-              </p>
-            </div>
-            {activeSubscription.status === 'active' ? (
-              <Button label={t('user:payment.cancel_subscription')} onClick={onCancelSubscriptionClick} />
-            ) : (
-              <Button label={t('user:payment.renew_subscription')} onClick={onRenewSubscriptionClick} />
-            )}
-          </React.Fragment>
-        ) : isLoading ? null : (
-          <React.Fragment>
-            <p>{t('user:payment.no_subscription')}</p>
-            <Button variant="contained" color="primary" label={t('user:payment.complete_subscription')} onClick={onCompleteSubscriptionClick} />
-          </React.Fragment>
-        )}
-      </div>
+      )}
       <div className={panelClassName}>
         <div className={panelHeaderClassName}>
           <h3>{t('user:payment.payment_method')}</h3>

diff --git a/src/containers/Layout/Layout.tsx b/src/containers/Layout/Layout.tsx
@@ -84,7 +84,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
     if (!cleengId) return null;
 
     return isLoggedIn ? (
-      <UserMenu showPaymentsItem={accessModel === 'SVOD'} />
+      <UserMenu showPaymentsItem={accessModel !== 'AVOD'} />
     ) : (
       <div className={styles.buttonContainer}>
         <Button fullWidth onClick={loginButtonClickHandler} label={t('sign_in')} />
@@ -124,7 +124,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
           userMenuOpen={userMenuOpen}
           toggleUserMenu={toggleUserMenu}
           canLogin={!!cleengId}
-          showPaymentsMenuItem={accessModel === 'SVOD'}
+          showPaymentsMenuItem={accessModel !== 'AVOD'}
         >
           <Button label={t('home')} to="/" variant="text" />
           {menu.map((item) => (

diff --git a/src/screens/User/User.tsx b/src/screens/User/User.tsx
@@ -73,7 +73,7 @@ const User = (): JSX.Element => {
               <li>
                 <Button to="/u/favorites" label={t('nav.favorites')} variant="text" startIcon={<Favorite />} className={styles.button} />
               </li>
-              {accessModel === 'SVOD' && (
+              {accessModel !== 'AVOD' && (
                 <li>
                   <Button to="/u/payments" label={t('nav.payments')} variant="text" startIcon={<BalanceWallet />} className={styles.button} />
                 </li>
@@ -117,8 +117,9 @@ const User = (): JSX.Element => {
             />
           </Route>
           <Route path="/u/payments">
-            {accessModel === 'SVOD' ? (
+            {accessModel !== 'AVOD' ? (
               <Payment
+                accessModel={accessModel}
                 activeSubscription={subscription}
                 activePaymentDetail={activePayment}
                 transactions={transactions}