Merge pull request #1611 from lumi-tip/development-lumi-7789

⚡ user is added inmedialy to the cohort when paymen is successful
breatheco-de · Oct 1, 2024 · d75b565 · d75b565
2 parents b42630b + 8d8f81c
commit d75b565
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 35 deletions.
diff --git a/src/js_modules/checkout/PaymentInfo.jsx b/src/js_modules/checkout/PaymentInfo.jsx
@@ -43,27 +43,34 @@ function PaymentInfo() {
     description: '',
   });
   const [readyToRefetch, setReadyToRefetch] = useState(false);
+  const [cohortFound, setCohortFound] = useState(undefined);
   const [timeElapsed, setTimeElapsed] = useState(0);
   const toast = useToast();
   const redirect = getStorageItem('redirect');
   const redirectedFrom = getStorageItem('redirected-from');
   const router = useRouter();
+  const { backgroundColor, fontColor, hexColor } = useStyle();
 
   const isPaymentSuccess = paymentStatus === 'success';
   const isPaymentIdle = paymentStatus === 'idle';
   const paymentStatusBgColor = isPaymentSuccess ? 'green.light' : '#ffefef';
 
-  const redirectTocohort = (cohort) => {
+  const redirectTocohort = () => {
+    if (!isPaymentSuccess) {
+      setPaymentStatus('idle');
+      return;
+    }
     const langLink = lang !== 'en' ? `/${lang}` : '';
-    const syllabusVersion = cohort?.syllabus_version;
-    axiosInstance.defaults.headers.common.Academy = cohort.academy.id;
-    const cohortDashboardLink = `${langLink}/cohort/${cohort?.slug}/${syllabusVersion?.slug}/v${syllabusVersion?.version}`;
+    const syllabusVersion = cohortFound?.syllabus_version;
+    axiosInstance.defaults.headers.common.Academy = cohortFound.academy.id;
+    const cohortDashboardLink = `${langLink}/cohort/${cohortFound?.slug}/${syllabusVersion?.slug}/v${syllabusVersion?.version}`;
     setCohortSession({
-      ...cohort,
+      ...cohortFound,
       selectedProgramSlug: cohortDashboardLink,
     });
     router.push(cohortDashboardLink);
   };
+
   const joinCohort = (cohort) => {
     reportDatalayer({
       dataLayer: {
@@ -85,19 +92,18 @@ function PaymentInfo() {
           setReadyToRefetch(false);
         }
         if (dataRequested?.status === 'ACTIVE') {
-          redirectTocohort(cohort);
+          setCohortFound(cohort);
         }
       })
-      .catch(() => {
+      .catch((error) => {
+        console.error('Error al unirse a la cohorte:', error);
         setIsSubmittingPayment(false);
         setTimeout(() => {
           setReadyToRefetch(false);
         }, 600);
       });
   };
 
-  const { backgroundColor, fontColor, hexColor } = useStyle();
-
   useEffect(() => {
     reportDatalayer({
       dataLayer: {
@@ -109,7 +115,7 @@ function PaymentInfo() {
 
   useEffect(() => {
     let interval;
-    if (readyToRefetch && timeElapsed < 10) {
+    if (readyToRefetch && timeElapsed < 10 && isPaymentSuccess) {
       interval = setInterval(() => {
         getAllMySubscriptions()
           .then((subscriptions) => {
@@ -159,11 +165,17 @@ function PaymentInfo() {
     return () => clearInterval(interval);
   }, [readyToRefetch, timeElapsed]);
 
+  useEffect(() => {
+    if (!isPaymentSuccess) return;
+    setIsSubmittingPayment(true);
+    setReadyToRefetch(true);
+  }, [isPaymentSuccess]);
+
   useEffect(() => {
     if (selectedPlanCheckoutData?.owner?.id) getPaymentMethods(selectedPlanCheckoutData.owner.id);
   }, [selectedPlanCheckoutData, isAuthenticated]);
 
-  const handlePaymentErrors = (data, actions = {}, callback = () => {}) => {
+  const handlePaymentErrors = (data, actions = {}, callback = () => { }) => {
     const silentCode = data?.silent_code;
     setIsSubmittingPayment(false);
     actions?.setSubmitting(false);
@@ -366,15 +378,9 @@ function PaymentInfo() {
           height="45px"
           variant="default"
           // mt="12px"
+          isDisabled={isPaymentSuccess && !cohortFound}
           isLoading={isSubmittingPayment}
-          onClick={() => {
-            if (isPaymentSuccess) {
-              setIsSubmittingPayment(true);
-              setReadyToRefetch(true);
-            } else {
-              setPaymentStatus('idle');
-            }
-          }}
+          onClick={redirectTocohort}
         >
           {isPaymentSuccess ? 'Start learning' : 'Try again'}
         </Button>

diff --git a/src/js_modules/checkout/Summary.jsx b/src/js_modules/checkout/Summary.jsx
@@ -38,6 +38,7 @@ function Summary() {
     title: '',
     description: '',
   });
+  const [cohortFound, setCohortFound] = useState(undefined);
   const redirect = getStorageItem('redirect');
   const redirectedFrom = getStorageItem('redirected-from');
   const router = useRouter();
@@ -89,18 +90,19 @@ function Summary() {
     });
   }, []);
 
-  const redirectTocohort = (cohort) => {
+  const redirectTocohort = () => {
     const langLink = lang !== 'en' ? `/${lang}` : '';
-    const syllabusVersion = cohort?.syllabus_version;
+    const syllabusVersion = cohortFound?.syllabus_version;
 
-    axiosInstance.defaults.headers.common.Academy = cohort.academy.id;
-    const cohortDashboardLink = `${langLink}/cohort/${cohort?.slug}/${syllabusVersion?.slug}/v${syllabusVersion?.version}`;
+    axiosInstance.defaults.headers.common.Academy = cohortFound.academy.id;
+    const cohortDashboardLink = `${langLink}/cohort/${cohortFound?.slug}/${syllabusVersion?.slug}/v${syllabusVersion?.version}`;
     setCohortSession({
-      ...cohort,
+      ...cohortFound,
       selectedProgramSlug: cohortDashboardLink,
     });
     router.push(cohortDashboardLink);
   };
+
   const joinCohort = (cohort) => {
     reportDatalayer({
       dataLayer: {
@@ -122,10 +124,11 @@ function Summary() {
           setReadyToRefetch(false);
         }
         if (dataRequested?.id) {
-          redirectTocohort(cohort);
+          setCohortFound(cohort);
         }
       })
-      .catch(() => {
+      .catch((error) => {
+        console.log(error);
         setTimeout(() => {
           setReadyToRefetch(false);
         }, 600);
@@ -184,6 +187,12 @@ function Summary() {
     return () => clearInterval(interval);
   }, [readyToRefetch, timeElapsed]);
 
+  useEffect(() => {
+    if (!isPaymentSuccess) return;
+    setIsSubmitting(true);
+    setReadyToRefetch(true);
+  }, [isPaymentSuccess]);
+
   const handleSubmit = () => {
     if (!isPaymentIdle || isSubmitting || !selectedPlanCheckoutData?.plan_id) return;
     setIsSubmitting(true);
@@ -242,11 +251,11 @@ function Summary() {
             }
           }
           if (respPayment.status === 'FULFILLED') {
+            setPaymentStatus('success');
             setSelectedPlanCheckoutData({
               ...selectedPlanCheckoutData,
               payment_success: true,
             });
-            setPaymentStatus('success');
           }
         })
         .catch(() => {
@@ -261,6 +270,7 @@ function Summary() {
         });
     }
   };
+
   useEffect(() => {
     setHasMounted(true);
   }, []);
@@ -485,15 +495,9 @@ function Summary() {
               height="45px"
               variant="default"
               // mt="12px"
+              isDisabled={isPaymentSuccess && !cohortFound}
               isLoading={isSubmitting}
-              onClick={() => {
-                if (isPaymentSuccess) {
-                  setIsSubmitting(true);
-                  setReadyToRefetch(true);
-                } else {
-                  setPaymentStatus('idle');
-                }
-              }}
+              onClick={redirectTocohort}
             >
               {isPaymentSuccess ? t('start-free-course') : t('try-again')}
             </Button>