feat(payment): implement authvod + tvod

jwplayer · May 20, 2022 · 836e457 · 836e457
1 parent 19496bf
commit 836e457
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/src/components/ChooseOfferForm/ChooseOfferForm.tsx b/src/components/ChooseOfferForm/ChooseOfferForm.tsx
@@ -117,7 +117,7 @@ const ChooseOfferForm: React.FC<Props> = ({
       <h2 className={styles.title}>{t('choose_offer.subscription')}</h2>
       <h3 className={styles.subtitle}>{t('choose_offer.all_movies_and_series_of_platform', { siteName })}</h3>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
-      {!!tvodOffers.length && (
+      {!!tvodOffers.length && (!!yearlyOffer || !!monthlyOffer) && (
         <div className={styles.offerGroupSwitch}>
           <input className={styles.radio} onChange={onChange} type="radio" name="offerType" id="svod" value="svod" checked={values.offerType === 'svod'} />
           <label className={classNames(styles.label, styles.offerGroupLabel)} htmlFor="svod">

diff --git a/src/containers/AccountModal/forms/ChooseOffer.tsx b/src/containers/AccountModal/forms/ChooseOffer.tsx
@@ -18,7 +18,7 @@ import type { Offer } from '#types/checkout';
 const ChooseOffer = () => {
   const history = useHistory();
   const { t } = useTranslation('account');
-  const { config, accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
+  const { config } = useConfigStore(({ config }) => ({ config }), shallow);
   const { cleengSandbox, json } = config;
   const { setOffer, setOfferType } = useCheckoutStore(({ setOffer, setOfferType }) => ({ setOffer, setOfferType }), shallow);
 
@@ -28,8 +28,12 @@ const ChooseOffer = () => {
   const { requestedMediaOffers } = useCheckoutStore(({ requestedMediaOffers }) => ({ requestedMediaOffers: requestedMediaOffers || [] }));
 
   // `useQueries` is not strongly typed :-(
-  const { data: monthlyOfferData } = useQuery(['offer', cleengMonthlyOffer], () => getOffer({ offerId: cleengMonthlyOffer }, cleengSandbox));
-  const { data: yearlyOfferData } = useQuery(['offer', cleengYearlyOffer], () => getOffer({ offerId: cleengYearlyOffer }, cleengSandbox));
+  const { data: monthlyOfferData, isLoading: isMonthlyOfferLoading } = useQuery(['offer', cleengMonthlyOffer], () =>
+    getOffer({ offerId: cleengMonthlyOffer }, cleengSandbox),
+  );
+  const { data: yearlyOfferData, isLoading: isYearlyOfferLoading } = useQuery(['offer', cleengYearlyOffer], () =>
+    getOffer({ offerId: cleengYearlyOffer }, cleengSandbox),
+  );
 
   const tvodOfferQueries = useQueries(
     requestedMediaOffers?.map(({ offerId }) => ({
@@ -39,17 +43,20 @@ const ChooseOffer = () => {
     })),
   );
 
+  const isTvodOffersLoading = useMemo(() => tvodOfferQueries.some(({ isLoading }) => isLoading), [tvodOfferQueries]);
+
   const tvodOffers = useMemo(
     () => tvodOfferQueries.reduce<Offer[]>((prev, cur) => (cur.isSuccess && cur.data?.responseData ? [...prev, cur.data.responseData] : prev), []),
     [tvodOfferQueries],
   );
 
-  const hasOffer = accessModel === 'SVOD' || requestedMediaOffers.length;
+  const isOffersLoading = isMonthlyOfferLoading || isYearlyOfferLoading || isTvodOffersLoading;
+  const hasOffer = !!tvodOffers.length || !!monthlyOfferData || !!yearlyOfferData;
 
   useEffect(() => {
     // close auth modal when there are no offers defined in the config
-    if (!hasOffer) history.replace(removeQueryParam(history, 'u'));
-  }, [hasOffer, history]);
+    if (!isOffersLoading && !hasOffer) history.replace(removeQueryParam(history, 'u'));
+  }, [isOffersLoading, hasOffer, history]);
 
   const chooseOfferSubmitHandler: UseFormOnSubmitHandler<ChooseOfferFormData> = async (
     { offerType, periodicity, tvodOfferId },
@@ -84,10 +91,18 @@ const ChooseOffer = () => {
     periodicity: 'yearly',
     tvodOfferId: requestedMediaOffers[0]?.offerId,
   };
-  const { handleSubmit, handleChange, values, errors, submitting } = useForm(initialValues, chooseOfferSubmitHandler, validationSchema);
+  const { handleSubmit, handleChange, setValue, values, errors, submitting } = useForm(initialValues, chooseOfferSubmitHandler, validationSchema);
+
+  useEffect(() => {
+    if (isOffersLoading) return;
+    if (yearlyOfferData?.responseData || monthlyOfferData?.responseData) return;
+
+    // If all queries are finished, but no yearly/monthly: switch to tvod
+    setValue('offerType', 'tvod');
+  }, [isOffersLoading, setValue, yearlyOfferData?.responseData, monthlyOfferData?.responseData]);
 
   // loading state
-  if (!hasOffer || ((!monthlyOfferData?.responseData || !yearlyOfferData?.responseData) && !tvodOffers.length)) {
+  if (!hasOffer || isOffersLoading) {
     return (
       <div style={{ height: 300 }}>
         <LoadingOverlay inline />

diff --git a/src/hooks/useForm.ts b/src/hooks/useForm.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { ValidationError, AnySchema } from 'yup';
 
 import type { FormErrors, GenericFormValues, UseFormChangeHandler, UseFormBlurHandler, UseFormSubmitHandler } from '#types/form';
@@ -53,9 +53,9 @@ export default function useForm<T extends GenericFormValues>(
     }
   };
 
-  const setValue = (name: keyof T, value: string | boolean) => {
+  const setValue = useCallback((name: keyof T, value: string | boolean) => {
     setValues((current) => ({ ...current, [name]: value }));
-  };
+  }, []);
 
   const handleChange: UseFormChangeHandler = (event) => {
     const name = event.target.name;