richie-education 2.28.2-dev26 → 2.28.2-dev53

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

@@ -4,6 +4,7 @@ import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import userEvent from '@testing-library/user-event';
 import { CunninghamProvider } from '@openfun/cunningham-react';
+import queryString from 'query-string';
 import {
   CourseStateFactory,
   PacedCourseFactory,
@@ -17,7 +18,7 @@ import {
 } from 'utils/test/factories/joanie';
 import { SessionProvider } from 'contexts/SessionContext';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { ProductType } from 'types/Joanie';
+import { NOT_CANCELED_ORDER_STATES, ProductType } from 'types/Joanie';
 import { Priority } from 'types';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { User } from 'types/User';
@@ -102,10 +103,18 @@ describe('PurchaseButton', () => {
   it('shows cta to open sale tunnel when user is authenticated', async () => {
     const courseCode = '00000';
     const product = ProductFactory().one();
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-      {},
-    );
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+    fetchMock
+      .get(url, {})
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
+        [],
+      );
 
     render(
       <Wrapper client={createTestQueryClient({ user: richieUser })}>
@@ -137,10 +146,18 @@ describe('PurchaseButton', () => {
     const product = ProductFactory({ remaining_order_count: null }).one();
     fetchMock.get(`https://demo.endpoint/api/user/v1/accounts/${user.username}`, {});
     fetchMock.get(`https://demo.endpoint/api/user/v1/preferences/${user.username}`, {});
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-      {},
-    );
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+    fetchMock
+      .get(url, {})
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
+        [],
+      );
     render(
       <Wrapper client={createTestQueryClient({ user })}>
         <PurchaseButton
@@ -170,10 +187,18 @@ describe('PurchaseButton', () => {
   it('shows cta to open sale tunnel when remaining orders is undefined', async () => {
     const courseCode = '00000';
     const product = ProductFactory().one();
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-      {},
-    );
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+    fetchMock
+      .get(url, {})
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
+        [],
+      );
     delete product.remaining_order_count;
 
     render(
@@ -205,10 +230,13 @@ describe('PurchaseButton', () => {
   it('renders a disabled CTA if the product have no remaining orders', async () => {
     const courseCode = '00000';
     const product = ProductFactory({ remaining_order_count: 0 }).one();
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-      {},
-    );
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+    fetchMock.get(url, {});
     render(
       <Wrapper client={createTestQueryClient({ user: richieUser })}>
         <PurchaseButton
@@ -241,10 +269,14 @@ describe('PurchaseButton', () => {
       const courseCode = '00000';
       const product = ProductFactory({ ...productData, type: ProductType.CREDENTIAL }).one();
       product.target_courses[0].course_runs = [];
-      fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      );
+
+      const orderQueryParameters = {
+        course_code: courseCode,
+        product_id: product.id,
+        state: NOT_CANCELED_ORDER_STATES,
+      };
+      const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+      fetchMock.get(url, {});
 
       render(
         <Wrapper client={createTestQueryClient({ user: richieUser })}>
@@ -290,10 +322,14 @@ describe('PurchaseButton', () => {
       const product = CertificateProductFactory().one();
       const enrollment = EnrollmentFactory().one();
       enrollment.course_run.state = CourseStateFactory(courseRunStateData).one();
-      fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/orders/?enrollment_id=${enrollment.id}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      );
+
+      const orderQueryParameters = {
+        enrollment_id: enrollment.id,
+        product_id: product.id,
+        state: NOT_CANCELED_ORDER_STATES,
+      };
+      const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+      fetchMock.get(url, {});
 
       render(
         <Wrapper client={createTestQueryClient({ user: true })}>
@@ -344,10 +380,13 @@ describe('PurchaseButton', () => {
       const enrollment = EnrollmentFactory().one();
       enrollment.course_run.state = CourseStateFactory(courseRunStateData).one();
 
-      fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/orders/?enrollment_id=${enrollment.id}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      );
+      const orderQueryParameters = {
+        enrollment_id: enrollment.id,
+        product_id: product.id,
+        state: NOT_CANCELED_ORDER_STATES,
+      };
+      const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+      fetchMock.get(url, {});
 
       render(
         <Wrapper client={createTestQueryClient({ user: true })}>
@@ -373,10 +412,14 @@ describe('PurchaseButton', () => {
   it('renders a disabled CTA if product has no target courses', async () => {
     const courseCode = '00000';
     const product = ProductFactory().one();
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-      {},
-    );
+
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+    fetchMock.get(url, {});
     product.target_courses = [];
 
     render(
@@ -404,10 +447,14 @@ describe('PurchaseButton', () => {
   it('does not render CTA if disabled property is false', async () => {
     const courseCode = '00000';
     const product = ProductFactory().one();
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-      {},
-    );
+
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+    fetchMock.get(url, {});
 
     render(
       <Wrapper client={createTestQueryClient({ user: true })}>

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

@@ -59,10 +59,11 @@ describe('AddressSelector', () => {
           setBillingAddress,
           setCreditCard: jest.fn(),
           onPaymentSuccess: jest.fn(),
-          step: SaleTunnelStep.PAYMENT,
+          step: SaleTunnelStep.IDLE,
           registerSubmitCallback: jest.fn(),
           unregisterSubmitCallback: jest.fn(),
           runSubmitCallbacks: jest.fn(),
+          nextStep: jest.fn(),
         }),
         [billingAddress],
       );

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

@@ -1,8 +1,8 @@
 import { SaleTunnelProps } from 'components/SaleTunnel/index';
 import { CertificateProduct } from 'types/Joanie';
 import { GenericSaleTunnel } from 'components/SaleTunnel/GenericSaleTunnel';
-import { GenericPaymentButton } from 'components/SaleTunnel/GenericPaymentButton';
 import { CertificateProductPath } from 'components/SaleTunnel/CertificateSaleTunnel/CertificateProductPath';
+import SubscriptionButton from 'components/SaleTunnel/SubscriptionButton';
 
 interface CertificateSaleTunnelProps extends Omit<SaleTunnelProps, 'product'> {
   product: CertificateProduct;
@@ -23,7 +23,7 @@ const CertificatePaymentButton = ({
   enrollment,
 }: Pick<CertificateSaleTunnelProps, 'enrollment'>) => {
   return (
-    <GenericPaymentButton
+    <SubscriptionButton
       buildOrderPayload={(payload) => {
         return {
           ...payload,

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

@@ -1,8 +1,8 @@
 import { CredentialProduct } from 'types/Joanie';
 import { GenericSaleTunnel } from 'components/SaleTunnel/GenericSaleTunnel';
 import { SaleTunnelProps } from 'components/SaleTunnel/index';
-import { GenericPaymentButton } from 'components/SaleTunnel/GenericPaymentButton';
 import { CredentialProductPath } from 'components/SaleTunnel/CredentialSaleTunnel/CredentialProductPath';
+import SubscriptionButton from 'components/SaleTunnel/SubscriptionButton';
 
 interface CredentialSaleTunnelProps extends Omit<SaleTunnelProps, 'product'> {
   product: CredentialProduct;
@@ -21,17 +21,13 @@ export const CredentialSaleTunnel = (props: CredentialSaleTunnelProps) => {
 
 const CredentialPaymentButton = ({
   course,
-  orderGroup,
 }: Pick<CredentialSaleTunnelProps, 'course' | 'orderGroup'>) => {
   return (
-    <GenericPaymentButton
-      buildOrderPayload={(payload) => {
-        return {
-          ...payload,
-          course_code: course!.code,
-          ...(orderGroup ? { order_group_id: orderGroup.id } : {}),
-        };
-      }}
+    <SubscriptionButton
+      buildOrderPayload={(payload) => ({
+        ...payload,
+        course_code: course!.code,
+      })}
     />
   );
 };

package/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -1,8 +1,16 @@
 import { Modal, ModalSize } from '@openfun/cunningham-react';
-import { createContext, ReactNode, useContext, useEffect, useMemo, useState } from 'react';
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+} from 'react';
 import { SaleTunnelSponsors } from 'components/SaleTunnel/Sponsors/SaleTunnelSponsors';
 import { SaleTunnelProps } from 'components/SaleTunnel/index';
-import { Address, CreditCard, Order, Product } from 'types/Joanie';
+import { Address, CreditCard, Order, OrderState, Product } from 'types/Joanie';
 import useProductOrder from 'hooks/useProductOrder';
 import { SaleTunnelSuccess } from 'components/SaleTunnel/SaleTunnelSuccess';
 import WebAnalyticsAPIHandler from 'api/web-analytics';
@@ -10,7 +18,8 @@ import { CourseProductEvent } from 'types/web-analytics';
 import { useOmniscientOrders, useOrders } from 'hooks/useOrders';
 import { SaleTunnelInformation } from 'components/SaleTunnel/SaleTunnelInformation';
 import { useEnrollments } from 'hooks/useEnrollments';
-import SaleTunnelNotValidated from './SaleTunnelNotValidated';
+import SaleTunnelSavePaymentMethod from 'components/SaleTunnel/SaleTunnelSavePaymentMethod';
+import { LearnerContractFrame } from 'components/ContractFrame';
 
 export interface SaleTunnelContextType {
   props: SaleTunnelProps;
@@ -19,7 +28,7 @@ export interface SaleTunnelContextType {
   webAnalyticsEventKey: string;
 
   // internal
-  onPaymentSuccess: (validated?: boolean) => void;
+  onPaymentSuccess: () => void;
   step: SaleTunnelStep;
 
   // meta
@@ -30,6 +39,7 @@ export interface SaleTunnelContextType {
   registerSubmitCallback: (key: string, callback: () => Promise<void>) => void;
   unregisterSubmitCallback: (key: string) => void;
   runSubmitCallbacks: () => Promise<void>;
+  nextStep: () => void;
 }
 
 export const SaleTunnelContext = createContext<SaleTunnelContextType>({} as any);
@@ -45,9 +55,10 @@ export const useSaleTunnelContext = () => {
 };
 
 export enum SaleTunnelStep {
-  PAYMENT,
+  IDLE,
+  SIGN,
+  SAVE_PAYMENT,
   SUCCESS,
-  NOT_VALIDATED,
 }
 
 interface GenericSaleTunnelProps extends SaleTunnelProps {
@@ -76,11 +87,35 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
   } = useEnrollments(undefined, { enabled: false });
   const [billingAddress, setBillingAddress] = useState<Address>();
   const [creditCard, setCreditCard] = useState<CreditCard>();
-  const [step, setStep] = useState<SaleTunnelStep>(SaleTunnelStep.PAYMENT);
+  const [step, setStep] = useState<SaleTunnelStep>(SaleTunnelStep.IDLE);
   const [submitCallbacks, setSubmitCallbacks] = useState<Map<string, () => Promise<void>>>(
     new Map(),
   );
 
+  const nextStep = useCallback(() => {
+    if (order)
+      switch (step) {
+        case SaleTunnelStep.IDLE:
+          if ([OrderState.TO_SIGN, OrderState.SIGNING].includes(order.state)) {
+            setStep(SaleTunnelStep.SIGN);
+          } else if (order.state === OrderState.TO_SAVE_PAYMENT_METHOD) {
+            setStep(SaleTunnelStep.SAVE_PAYMENT);
+          }
+          break;
+        case SaleTunnelStep.SIGN:
+          if (order.state === OrderState.TO_SAVE_PAYMENT_METHOD) {
+            setStep(SaleTunnelStep.SAVE_PAYMENT);
+          }
+          if (order.state === OrderState.COMPLETED) {
+            setStep(SaleTunnelStep.SUCCESS);
+          }
+          break;
+        case SaleTunnelStep.SAVE_PAYMENT:
+          setStep(SaleTunnelStep.SUCCESS);
+          break;
+      }
+  }, [order, step]);
+
   const context: SaleTunnelContextType = useMemo(
     () => ({
       webAnalyticsEventKey: props.eventKey,
@@ -91,12 +126,9 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       setBillingAddress,
       creditCard,
       setCreditCard,
-      onPaymentSuccess: (validated: boolean = true) => {
-        if (validated) {
-          setStep(SaleTunnelStep.SUCCESS);
-        } else {
-          setStep(SaleTunnelStep.NOT_VALIDATED);
-        }
+      nextStep,
+      onPaymentSuccess: () => {
+        nextStep();
         WebAnalyticsAPIHandler()?.sendCourseProductEvent(
           CourseProductEvent.PAYMENT_SUCCEED,
           props.eventKey,
@@ -144,13 +176,16 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
 
 export const GenericSaleTunnelInner = (props: GenericSaleTunnelProps) => {
   const { step } = useSaleTunnelContext();
+
   switch (step) {
-    case SaleTunnelStep.PAYMENT:
-      return <GenericSaleTunnelPaymentStep {...props} />;
+    case SaleTunnelStep.IDLE:
+      return <GenericSaleTunnelInitialStep {...props} />;
+    case SaleTunnelStep.SIGN:
+      return <GenericSaleTunnelSignStep {...props} />;
+    case SaleTunnelStep.SAVE_PAYMENT:
+      return <GenericSaleTunnelSavePaymentMethodStep {...props} />;
     case SaleTunnelStep.SUCCESS:
       return <GenericSaleTunnelSuccessStep {...props} />;
-    case SaleTunnelStep.NOT_VALIDATED:
-      return <GenericSaleTunnelNotValidatedStep {...props} />;
   }
   throw new Error('Invalid step: ' + step);
 };
@@ -159,7 +194,7 @@ export const GenericSaleTunnelInner = (props: GenericSaleTunnelProps) => {
  * Steps.
  */
 
-export const GenericSaleTunnelPaymentStep = (props: GenericSaleTunnelProps) => {
+export const GenericSaleTunnelInitialStep = (props: GenericSaleTunnelProps) => {
   const { webAnalyticsEventKey } = useSaleTunnelContext();
 
   useEffect(() => {
@@ -174,19 +209,21 @@ export const GenericSaleTunnelPaymentStep = (props: GenericSaleTunnelProps) => {
   }, []);
 
   return (
-    <Modal {...props} size={ModalSize.EXTRA_LARGE} title={props.product.title} closeOnEsc={false}>
+    <Modal {...props} size={ModalSize.EXTRA_LARGE} title={props.product.title}>
       <div className="sale-tunnel" data-testid="generic-sale-tunnel-payment-step">
         <div className="sale-tunnel__main">
-          <div className="sale-tunnel__main__left">{props.asideNode}</div>
+          <div className="sale-tunnel__main__column sale-tunnel__main__left ">
+            <div>{props.asideNode}</div>
+            <div>
+              <SaleTunnelSponsors />
+            </div>
+          </div>
           <div className="sale-tunnel__main__separator" />
           <div className="sale-tunnel__main__right">
             <SaleTunnelInformation />
           </div>
         </div>
-        <div className="sale-tunnel__footer">
-          {props.paymentNode}
-          <SaleTunnelSponsors />
-        </div>
+        <div className="sale-tunnel__footer">{props.paymentNode}</div>
       </div>
     </Modal>
   );
@@ -200,10 +237,26 @@ export const GenericSaleTunnelSuccessStep = (props: SaleTunnelProps) => {
   );
 };
 
-export const GenericSaleTunnelNotValidatedStep = (props: SaleTunnelProps) => {
+export const GenericSaleTunnelSavePaymentMethodStep = (props: SaleTunnelProps) => {
   return (
-    <Modal {...props} size={ModalSize.MEDIUM}>
-      <SaleTunnelNotValidated closeModal={props.onClose} />
+    <Modal {...props} size={ModalSize.LARGE}>
+      <SaleTunnelSavePaymentMethod />
     </Modal>
   );
 };
+
+export const GenericSaleTunnelSignStep = ({ isOpen, onClose }: SaleTunnelProps) => {
+  const { order, nextStep } = useSaleTunnelContext();
+
+  const handleDone = useCallback(nextStep, [order]);
+
+  useEffect(() => {
+    if (![OrderState.TO_SIGN, OrderState.SIGNING].includes(order!.state)) {
+      nextStep();
+    }
+  }, [order]);
+
+  return (
+    <LearnerContractFrame order={order!} isOpen={isOpen} onClose={onClose} onDone={handleDone} />
+  );
+};

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

@@ -1,12 +1,12 @@
-import { Alert, VariantType } from '@openfun/cunningham-react';
 import { defineMessages, FormattedMessage, FormattedNumber } from 'react-intl';
 import { AddressSelector } from 'components/SaleTunnel/AddressSelector';
-import { CreditCardSelector } from 'components/SaleTunnel/CreditCardSelector';
 import { PaymentScheduleGrid } from 'components/PaymentScheduleGrid';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 import OpenEdxFullNameForm from 'components/OpenEdxFullNameForm';
 import { useSession } from 'contexts/SessionContext';
 import useOpenEdxProfile from 'hooks/useOpenEdxProfile';
+import { usePaymentSchedule } from 'hooks/usePaymentSchedule';
+import { Spinner } from 'components/Spinner';
 
 const messages = defineMessages({
   title: {
@@ -49,7 +49,7 @@ const messages = defineMessages({
 
 export const SaleTunnelInformation = () => {
   return (
-    <div className="sale-tunnel__information">
+    <div className="sale-tunnel__main__column sale-tunnel__information">
       <div>
         <h3 className="block-title mb-t">
           <FormattedMessage {...messages.title} />
@@ -64,15 +64,12 @@ export const SaleTunnelInformation = () => {
         </div>
       </div>
       <div>
-        <CreditCardSelector />
-      </div>
-      <div>
+        <PaymentScheduleBlock />
         <Total />
       </div>
     </div>
   );
 };
-
 const Email = () => {
   const { user } = useSession();
   const { data: openEdxProfileData } = useOpenEdxProfile({
@@ -98,9 +95,6 @@ const Total = () => {
   const { product } = useSaleTunnelContext();
   return (
     <div className="sale-tunnel__total">
-      <Alert type={VariantType.INFO}>
-        <FormattedMessage {...messages.totalInfo} />
-      </Alert>
       <div className="sale-tunnel__total__amount mt-t" data-testid="sale-tunnel__total__amount">
         <div className="block-title">
           <FormattedMessage {...messages.totalLabel} />
@@ -117,20 +111,22 @@ const Total = () => {
   );
 };
 
-/**
- * Ready for V2.
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const PaymentScheduleBlock = () => {
-  return null;
+  const { props } = useSaleTunnelContext();
+  const query = usePaymentSchedule({
+    course_code: props.course?.code || props.enrollment!.course_run.course.code,
+    product_id: props.product.id,
+  });
+
+  if (!query.data || query.isLoading) {
+    return <Spinner size="large" />;
+  }
+
   return (
     <div className="payment-schedule">
-      <h4 className="block-title mb-t">Schedule</h4>
-      <Alert type={VariantType.INFO}>
-        The first payment occurs in 14 days, you will be notified to pay the first 30%.
-      </Alert>
+      <h4 className="block-title mb-t">Payment schedule</h4>
       <div className="mt-t">
-        <PaymentScheduleGrid />
+        <PaymentScheduleGrid schedule={query.data} />
       </div>
     </div>
   );

package/js/components/SaleTunnel/SaleTunnelSavePaymentMethod/_styles.scss

@@ -0,0 +1,12 @@
+.sale-tunnel-step--save-payment-method {
+  .credit-card-selector {
+    display: inline-block;
+  }
+
+  .sale-tunnel-step__footer {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+  }
+}