richie-education 2.28.2-dev39 → 2.28.2-dev53

package/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -1,9 +1,16 @@
-import { Alert, Modal, ModalSize, VariantType } from '@openfun/cunningham-react';
-import { createContext, ReactNode, useContext, useEffect, useMemo, useState } from 'react';
-import { FormattedMessage, defineMessages } from 'react-intl';
+import { Modal, ModalSize } from '@openfun/cunningham-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';
@@ -11,16 +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';
-
-const messages = defineMessages({
-  walkthrough: {
-    id: 'components.SaleTunnel.GenericSaleTunnel.walkthrough',
-    defaultMessage:
-      'To enroll in the training, you will first be invited to sign the training agreement and then to define a payment method. You will not be charged during this step; the first payment will take place on the date mentioned in the payment schedule above.',
-    description: 'Message explaining the credential sale tunnel process',
-  },
-});
+import SaleTunnelSavePaymentMethod from 'components/SaleTunnel/SaleTunnelSavePaymentMethod';
+import { LearnerContractFrame } from 'components/ContractFrame';
 
 export interface SaleTunnelContextType {
   props: SaleTunnelProps;
@@ -29,7 +28,7 @@ export interface SaleTunnelContextType {
   webAnalyticsEventKey: string;
 
   // internal
-  onPaymentSuccess: (validated?: boolean) => void;
+  onPaymentSuccess: () => void;
   step: SaleTunnelStep;
 
   // meta
@@ -40,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);
@@ -55,9 +55,10 @@ export const useSaleTunnelContext = () => {
 };
 
 export enum SaleTunnelStep {
-  PAYMENT,
+  IDLE,
+  SIGN,
+  SAVE_PAYMENT,
   SUCCESS,
-  NOT_VALIDATED,
 }
 
 interface GenericSaleTunnelProps extends SaleTunnelProps {
@@ -86,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,
@@ -101,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,
@@ -154,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);
 };
@@ -169,7 +194,7 @@ export const GenericSaleTunnelInner = (props: GenericSaleTunnelProps) => {
  * Steps.
  */
 
-export const GenericSaleTunnelPaymentStep = (props: GenericSaleTunnelProps) => {
+export const GenericSaleTunnelInitialStep = (props: GenericSaleTunnelProps) => {
   const { webAnalyticsEventKey } = useSaleTunnelContext();
 
   useEffect(() => {
@@ -184,7 +209,7 @@ 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__column sale-tunnel__main__left ">
@@ -198,14 +223,7 @@ export const GenericSaleTunnelPaymentStep = (props: GenericSaleTunnelProps) => {
             <SaleTunnelInformation />
           </div>
         </div>
-        <div className="sale-tunnel__footer">
-          <div style={{ maxWidth: '680px' }} className="mb-s" data-testid="walkthrough-banner">
-            <Alert type={VariantType.INFO}>
-              <FormattedMessage {...messages.walkthrough} />
-            </Alert>
-          </div>
-          {props.paymentNode}
-        </div>
+        <div className="sale-tunnel__footer">{props.paymentNode}</div>
       </div>
     </Modal>
   );
@@ -219,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,6 +1,5 @@
 import { defineMessages, FormattedMessage, FormattedNumber } from 'react-intl';
 import { AddressSelector } from 'components/SaleTunnel/AddressSelector';
-import { CreditCardSelector } from 'components/CreditCardSelector';
 import { PaymentScheduleGrid } from 'components/PaymentScheduleGrid';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 import OpenEdxFullNameForm from 'components/OpenEdxFullNameForm';
@@ -25,16 +24,6 @@ const messages = defineMessages({
     description: 'Label for the full name input',
     defaultMessage: 'Full name',
   },
-  paymentMethodTitle: {
-    id: 'components.SaleTunnel.CreditCardSelector.title',
-    description: 'Title for the credit card section',
-    defaultMessage: 'Payment method',
-  },
-  paymentMethodDescription: {
-    id: 'components.SaleTunnel.CreditCardSelector.description',
-    description: 'Description for the credit card section',
-    defaultMessage: 'Choose your payment method or add a new one during the payment.',
-  },
   totalInfo: {
     id: 'components.SaleTunnel.Information.total.info',
     description: 'Information about the total amount',
@@ -74,9 +63,6 @@ export const SaleTunnelInformation = () => {
           <Email />
         </div>
       </div>
-      <div>
-        <CreditCardSelectorWrapper />
-      </div>
       <div>
         <PaymentScheduleBlock />
         <Total />
@@ -84,22 +70,6 @@ export const SaleTunnelInformation = () => {
     </div>
   );
 };
-
-const CreditCardSelectorWrapper = () => {
-  const { creditCard, setCreditCard } = useSaleTunnelContext();
-  return (
-    <>
-      <h4 className="block-title mb-t">
-        <FormattedMessage {...messages.paymentMethodTitle} />
-      </h4>
-      <div className="description mb-s">
-        <FormattedMessage {...messages.paymentMethodDescription} />
-      </div>
-      <CreditCardSelector creditCard={creditCard} setCreditCard={setCreditCard} />
-    </>
-  );
-};
-
 const Email = () => {
   const { user } = useSession();
   const { data: openEdxProfileData } = useOpenEdxProfile({

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;
+  }
+}

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

@@ -0,0 +1,160 @@
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { Button } from '@openfun/cunningham-react';
+import { useEffect, useState, useRef } from 'react';
+import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
+import { CreditCard, OrderState } from 'types/Joanie';
+import { Icon, IconTypeEnum } from 'components/Icon';
+import { Payment, PaymentErrorMessageId } from 'components/PaymentInterfaces/types';
+import { useCreditCards } from 'hooks/useCreditCards';
+import { Spinner } from 'components/Spinner';
+import PaymentInterfaces from 'components/PaymentInterfaces';
+import { useOrders } from 'hooks/useOrders';
+import { CreditCardSelector } from 'components/CreditCardSelector';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+
+const messages = defineMessages({
+  title: {
+    id: 'components.SaleTunnelSavePaymentMethod.title',
+    defaultMessage: 'Define a payment method',
+    description: 'Content title',
+  },
+  description: {
+    defaultMessage:
+      'This is the last step to validate your subscription, you must define a payment method. This one will be used to debit installments. You will not be charged during this step. Pick an existing payment method or add a new one.',
+    description: "Text to explain what the user has to do in the 'save payment method' step",
+    id: 'components.SaleTunnelSavePaymentMethod.description',
+  },
+  cta: {
+    defaultMessage: 'Define',
+    description: 'Label to the call to action to close sale tunnel',
+    id: 'components.SaleTunnelSavePaymentMethod.cta',
+  },
+  errorAbort: {
+    defaultMessage: 'You have aborted the payment.',
+    description: 'Error message shown when user aborts the payment.',
+    id: 'components.PaymentButton.errorAbort',
+  },
+  errorDefault: {
+    defaultMessage: 'An error occurred during payment. Please retry later.',
+    description: 'Error message shown when payment creation request failed.',
+    id: 'components.PaymentButton.errorDefault',
+  },
+  tokenizingPayment: {
+    defaultMessage: 'Payment method definition in progress.',
+    description: 'Label for screen reader when a credit card is being tokenized.',
+    id: 'components.PaymentButton.tokenizingPayment',
+  },
+});
+
+const SaleTunnelSavePaymentMethod = () => {
+  const initialCreditCards = useRef<CreditCard[]>();
+  const pollingTimeoutRef = useRef<NodeJS.Timeout>();
+  const JoanieApi = useJoanieApi();
+  const [payment, setPayment] = useState<Payment>();
+  const [error, setError] = useState<string>();
+  const creditCards = useCreditCards();
+  const orders = useOrders(undefined, { enabled: false });
+  const { order, nextStep, creditCard, setCreditCard } = useSaleTunnelContext();
+
+  const setPaymentMethod = async (creditCardId: string) => {
+    orders.methods.set_payment_method(
+      { id: order!.id, credit_card_id: creditCardId },
+      { onError: () => handleError() },
+    );
+  };
+
+  const tokenizePaymentMethod = async () => {
+    const data = await creditCards.methods.tokenize();
+    setPayment(data);
+    setError(undefined);
+  };
+
+  const waitForNewCreditCard = async () => {
+    const { results } = await JoanieApi.user.creditCards.get();
+    const initialIds = initialCreditCards.current!.map((cc) => cc.id);
+    const newCard = results.find((cc) => !initialIds.includes(cc.id));
+
+    if (!newCard) {
+      pollingTimeoutRef.current = setTimeout(waitForNewCreditCard, 1000);
+      return;
+    }
+
+    setCreditCard(newCard);
+    await setPaymentMethod(newCard.id);
+  };
+
+  const handleError = (message: string = PaymentErrorMessageId.ERROR_DEFAULT) => {
+    setError(message);
+    setPayment(undefined);
+  };
+
+  useEffect(() => {
+    if (!payment) {
+      initialCreditCards.current = creditCards.items;
+    }
+  }, [creditCards]);
+
+  useEffect(() => {
+    if (order?.state !== OrderState.TO_SAVE_PAYMENT_METHOD) {
+      nextStep();
+    }
+  }, [order]);
+
+  useEffect(
+    () => () => {
+      clearTimeout(pollingTimeoutRef.current);
+    },
+    [],
+  );
+
+  return (
+    <section
+      className="sale-tunnel-step sale-tunnel-step--save-payment-method"
+      data-testid="generic-sale-tunnel-save-payment-method-step"
+    >
+      <header className="sale-tunnel-step__header">
+        <Icon name={IconTypeEnum.CREDIT_CARD} />
+        <h3 className="sale-tunnel-step__title">
+          <FormattedMessage {...messages.title} />
+        </h3>
+      </header>
+      <div className="sale-tunnel-step__content">
+        <p className="mb-s">
+          <FormattedMessage {...messages.description} />
+        </p>
+        <CreditCardSelector creditCard={creditCard} setCreditCard={setCreditCard} />
+      </div>
+      <footer className="sale-tunnel-step__footer">
+        <Button
+          size="medium"
+          disabled={!!payment || orders.states.settingPaymentMethod}
+          onClick={creditCard ? () => setPaymentMethod(creditCard.id) : tokenizePaymentMethod}
+        >
+          {payment || orders.states.settingPaymentMethod ? (
+            <Spinner size="small">
+              <span id="tokenizing-payment">
+                <FormattedMessage {...messages.tokenizingPayment} />
+              </span>
+            </Spinner>
+          ) : (
+            <FormattedMessage {...messages.cta} />
+          )}
+        </Button>
+        {error && (
+          <p className="payment-button__error">
+            {messages.hasOwnProperty(error) ? (
+              <FormattedMessage {...messages[error as PaymentErrorMessageId]} />
+            ) : (
+              error
+            )}
+          </p>
+        )}
+        {payment && (
+          <PaymentInterfaces {...payment} onSuccess={waitForNewCreditCard} onError={handleError} />
+        )}
+      </footer>
+    </section>
+  );
+};
+
+export default SaleTunnelSavePaymentMethod;

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

@@ -5,72 +5,58 @@ import { SuccessIcon } from 'components/SuccessIcon';
 import { getDashboardBasename } from 'widgets/Dashboard/hooks/useDashboardRouter/getDashboardBasename';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { ProductType } from 'types/Joanie';
 
 const messages = defineMessages({
   congratulations: {
-    defaultMessage: 'Congratulations!',
+    defaultMessage: 'Subscription confirmed!',
     description: 'Text displayed to thank user for his order',
     id: 'components.SaleTunnelSuccess.congratulations',
   },
   successMessage: {
-    defaultMessage: 'Your order has been successfully created.',
+    defaultMessage: 'Your order has been successfully registered.',
     description: 'Message to confirm that order has been created',
     id: 'components.SaleTunnelSuccess.successMessage',
   },
   successDetailMessage: {
-    defaultMessage: 'You will receive your invoice by email in a few moments.',
-    description: "Text to remind that order's invoice will be send by email soon",
-    id: 'components.SaleTunnelSuccess.successDetailMessage',
-  },
-  successDetailSignatureMessage: {
     defaultMessage:
-      'In order to enroll to course runs you first need to sign the training contract.',
-    description: 'Text to remind that order needs to be signed',
-    id: 'components.SaleTunnelSuccess.successDetailSignatureMessage',
+      'You will be able to start your training once the first installment will be paid.',
+    description: 'Text to explain when the user will be able to start its training.',
+    id: 'components.SaleTunnelSuccess.successDetailMessage',
   },
   cta: {
-    defaultMessage: 'Start this course now!',
+    defaultMessage: 'Close',
     description: 'Label to the call to action to close sale tunnel',
     id: 'components.SaleTunnelSuccess.cta',
   },
-  ctaSignature: {
-    defaultMessage: 'Sign the training contract',
-    description: 'Label to the call to action to close sale tunnel if there is a pending signature',
-    id: 'components.SaleTunnelSuccess.ctaSignature',
-  },
 });
 
 export const SaleTunnelSuccess = ({ closeModal }: { closeModal: () => void }) => {
   const intl = useIntl();
   const { order, product } = useSaleTunnelContext();
+
   return (
-    <section className="sale-tunnel-end" data-testid="generic-sale-tunnel-success-step">
-      <header className="sale-tunnel-end__header">
+    <section className="sale-tunnel-step" data-testid="generic-sale-tunnel-success-step">
+      <header className="sale-tunnel-step__header">
         <SuccessIcon />
-        <h3 className="sale-tunnel-end__title">
+        <h3 className="sale-tunnel-step__title">
           <FormattedMessage {...messages.congratulations} />
         </h3>
       </header>
-      <p className="sale-tunnel-end__content">
+      <p className="sale-tunnel-step__content">
         <FormattedMessage {...messages.successMessage} />
         <br />
         <FormattedMessage {...messages.successDetailMessage} />
-        {product.contract_definition && (
-          <>
-            <br />
-            <FormattedMessage {...messages.successDetailSignatureMessage} />
-          </>
-        )}
       </p>
-      <footer className="sale-tunnel-end__footer">
-        {product.contract_definition ? (
+      <footer className="sale-tunnel-step__footer">
+        {product.type === ProductType.CREDENTIAL ? (
           <Button
             href={
               getDashboardBasename(intl.locale) +
               generatePath(LearnerDashboardPaths.ORDER, { orderId: order!.id })
             }
           >
-            <FormattedMessage {...messages.ctaSignature} />
+            <FormattedMessage {...messages.cta} />
           </Button>
         ) : (
           <Button onClick={closeModal}>

package/js/components/SaleTunnel/Sponsors/SaleTunnelSponsors.tsx

@@ -18,6 +18,11 @@ export const SaleTunnelSponsors = () => {
   const {
     props: { organizations },
   } = useSaleTunnelContext();
+
+  if (!organizations || organizations.length === 0) {
+    return null;
+  }
+
   return (
     <>
       <h3 className="block-title">

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

@@ -0,0 +1,7 @@
+.subscription-button {
+  &__error {
+    color: r-theme-val(form, input-color-error);
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+  }
+}