richie-education 2.28.2-dev58 → 2.28.2-dev61

package/js/components/SaleTunnel/AddressSelector/index.spec.tsx

@@ -58,7 +58,6 @@ describe('AddressSelector', () => {
           billingAddress,
           setBillingAddress,
           setCreditCard: jest.fn(),
-          onPaymentSuccess: jest.fn(),
           step: SaleTunnelStep.IDLE,
           registerSubmitCallback: jest.fn(),
           unregisterSubmitCallback: jest.fn(),

package/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -28,7 +28,6 @@ export interface SaleTunnelContextType {
   webAnalyticsEventKey: string;
 
   // internal
-  onPaymentSuccess: () => void;
   step: SaleTunnelStep;
 
   // meta
@@ -75,16 +74,6 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
     enrollmentId: props.enrollment?.id,
     productId: props.product.id,
   });
-
-  const {
-    methods: { refetch: refetchOmniscientOrders },
-  } = useOmniscientOrders();
-  const {
-    methods: { invalidate: invalidateOrders },
-  } = useOrders(undefined, { enabled: false });
-  const {
-    methods: { invalidate: invalidateEnrollments },
-  } = useEnrollments(undefined, { enabled: false });
   const [billingAddress, setBillingAddress] = useState<Address>();
   const [creditCard, setCreditCard] = useState<CreditCard>();
   const [step, setStep] = useState<SaleTunnelStep>(SaleTunnelStep.IDLE);
@@ -127,19 +116,6 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       creditCard,
       setCreditCard,
       nextStep,
-      onPaymentSuccess: () => {
-        nextStep();
-        WebAnalyticsAPIHandler()?.sendCourseProductEvent(
-          CourseProductEvent.PAYMENT_SUCCEED,
-          props.eventKey,
-        );
-        // Once the user has completed the purchase, we need to refetch the orders
-        // to update the ordersQuery cache
-        invalidateOrders();
-        refetchOmniscientOrders();
-        invalidateEnrollments();
-        props.onFinish?.(order!);
-      },
       step,
       registerSubmitCallback: (key, callback) => {
         setSubmitCallbacks((prev) => new Map(prev).set(key, callback));
@@ -230,6 +206,34 @@ export const GenericSaleTunnelInitialStep = (props: GenericSaleTunnelProps) => {
 };
 
 export const GenericSaleTunnelSuccessStep = (props: SaleTunnelProps) => {
+  const {
+    webAnalyticsEventKey,
+    props: { onFinish },
+    order,
+  } = useSaleTunnelContext();
+  const {
+    methods: { refetch: refetchOmniscientOrders },
+  } = useOmniscientOrders();
+  const {
+    methods: { invalidate: invalidateOrders },
+  } = useOrders(undefined, { enabled: false });
+  const {
+    methods: { invalidate: invalidateEnrollments },
+  } = useEnrollments(undefined, { enabled: false });
+
+  useEffect(() => {
+    WebAnalyticsAPIHandler()?.sendCourseProductEvent(
+      CourseProductEvent.PAYMENT_SUCCEED,
+      webAnalyticsEventKey,
+    );
+    // Once the user has completed the purchase, we need to refetch the orders
+    // to update the ordersQuery cache
+    invalidateOrders();
+    refetchOmniscientOrders();
+    invalidateEnrollments();
+    onFinish?.(order!);
+  }, []);
+
   return (
     <Modal {...props} size={ModalSize.MEDIUM}>
       <SaleTunnelSuccess closeModal={props.onClose} />

package/js/components/SaleTunnel/index.spec.tsx

@@ -217,7 +217,6 @@ describe.each([
 
     // - Route to create order should have been called
     nbApiCalls += 1; // order create
-    nbApiCalls += 1; // order get (invalidate queries)
     nbApiCalls += 1; // useProductOrder call (invalidate from create)
 
     await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));

package/js/utils/OrderHelper/index.ts

@@ -6,6 +6,7 @@ import {
   OrderEnrollment,
   OrderState,
   PaymentScheduleState,
+  PURCHASABLE_ORDER_STATES,
 } from 'types/Joanie';
 
 export enum OrderStatus {
@@ -96,4 +97,9 @@ export class OrderHelper {
     if (!order) return false;
     return ACTIVE_ORDER_STATES.includes(order.state);
   }
+
+  static isPurchasable(order?: Order | NestedCourseOrder | OrderEnrollment) {
+    if (!order) return true;
+    return PURCHASABLE_ORDER_STATES.includes(order.state);
+  }
 }

package/js/utils/test/factories/joanie.ts

@@ -484,7 +484,6 @@ export const SaleTunnelContextFactory = factory(
     billingAddress: undefined,
     setBillingAddress: noop,
     setCreditCard: noop,
-    onPaymentSuccess: noop,
     step: SaleTunnelStep.IDLE,
     registerSubmitCallback: noop,
     unregisterSubmitCallback: noop,

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/ProductCertificateFooter/index.tsx

@@ -2,12 +2,7 @@ import { FormattedMessage, defineMessages } from 'react-intl';
 import { useState } from 'react';
 import PurchaseButton from 'components/PurchaseButton';
 import { Icon, IconTypeEnum } from 'components/Icon';
-import {
-  CertificateProduct,
-  Enrollment,
-  ProductType,
-  PURCHASABLE_ORDER_STATES,
-} from 'types/Joanie';
+import { CertificateProduct, Enrollment, ProductType } from 'types/Joanie';
 import DownloadCertificateButton from 'components/DownloadCertificateButton';
 import { useCertificate } from 'hooks/useCertificates';
 import { isOpenedCourseRunCertificate } from 'utils/CourseRuns';
@@ -65,30 +60,27 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
           <FormattedMessage {...messages.buyProductCertificateLabel} />
         )}
       </div>
-      {OrderHelper.isActive(order) ? (
-        order!.certificate_id && (
-          <DownloadCertificateButton
-            className="dashboard-item__button"
-            certificateId={order!.certificate_id}
-          />
-        )
-      ) : (
-        <PurchaseButton
+      {OrderHelper.isActive(order) && order!.certificate_id && (
+        <DownloadCertificateButton
           className="dashboard-item__button"
-          product={product}
-          enrollment={enrollment}
-          buttonProps={{ size: 'small' }}
-          disabled={order && !PURCHASABLE_ORDER_STATES.includes(order.state)}
-          onFinish={(o) => {
-            /**
-             * As we do not refetch enrollments in DashboardCourses after SaleTunnel cache invalidation (to avoid
-             * scroll reset - and SaleTunnel modal unmounting too early caused by list reset) we need to manually
-             * update the active order in the enrollment in order to hide the buy button and display the download button.
-             */
-            setOrder(o);
-          }}
+          certificateId={order!.certificate_id}
         />
       )}
+      <PurchaseButton
+        className="dashboard-item__button"
+        product={product}
+        enrollment={enrollment}
+        buttonProps={{ size: 'small' }}
+        disabled={!OrderHelper.isPurchasable(order)}
+        onFinish={(o) => {
+          /**
+           * As we do not refetch enrollments in DashboardCourses after SaleTunnel cache invalidation (to avoid
+           * scroll reset - and SaleTunnel modal unmounting too early caused by list reset) we need to manually
+           * update the active order in the enrollment in order to hide the buy button and display the download button.
+           */
+          setOrder(o);
+        }}
+      />
     </div>
   );
 };

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.tsx

@@ -1,7 +1,7 @@
 import { Children, useEffect, useMemo } from 'react';
 import { defineMessages, FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
 import c from 'classnames';
-import { ProductType, Product, CredentialOrder, PURCHASABLE_ORDER_STATES } from 'types/Joanie';
+import { ProductType, Product, CredentialOrder } from 'types/Joanie';
 import { useCourseProduct } from 'hooks/useCourseProducts';
 import { Spinner } from 'components/Spinner';
 import { Icon, IconTypeEnum } from 'components/Icon';
@@ -156,7 +156,7 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
   });
 
   const order = productOrder as CredentialOrder;
-  const canPurchase = !order || PURCHASABLE_ORDER_STATES.includes(order.state);
+  const canPurchase = OrderHelper.isPurchasable(order);
   const hasPurchased = OrderHelper.isActive(order);
   const canEnroll = OrderHelper.allowEnrollment(order);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.28.2-dev58",
+  "version": "2.28.2-dev61",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {