richie 2.26.0__py2.py3-none-any.whl → 2.28.0__py2.py3-none-any.whl

frontend/js/components/PaymentInterfaces/LyraPopIn.tsx

@@ -1,6 +1,6 @@
 import KRGlue from '@lyracom/embedded-form-glue';
 import { useIntl } from 'react-intl';
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 import {
   PaymentErrorMessageId,
   PaymentInterfaceProps,
@@ -28,10 +28,11 @@ const LyraPopIn = ({
   const handleError = (error?: Error) => {
     if (error) handle(`[LyraPopIn] - ${error}`);
 
-    if (shouldAbort) {
+    if (shouldAbort.current) {
       onError(PaymentErrorMessageId.ERROR_ABORTING);
+    } else {
+      onError(PaymentErrorMessageId.ERROR_DEFAULT);
     }
-    onError(PaymentErrorMessageId.ERROR_DEFAULT);
   };
 
   const initializeLyraForm = async () => {
@@ -91,9 +92,9 @@ const LyraPopIn = ({
     };
 
     const handleFormError = async (error: KRError) => {
-      // Do not close the pop-in if the error is a client error.
-      if (!error.errorCode.startsWith('CLIENT_')) {
-        shouldAbort.current = false;
+      // Do not close the pop-in if the error is a invalid data error (CLIENT_3XX).
+      // https://docs.lyra.com/fr/rest/V4.0/javascript/features/js_error_management.html#client004
+      if (!error.errorCode.startsWith('CLIENT_3')) {
         await KR.closePopin(formId);
         handleError();
       }
@@ -123,6 +124,11 @@ const LyraPopIn = ({
     };
   }, []);
 
+  useEffect(() => {
+    // Abort the payment if the user tries to leave the page.
+    window.addEventListener('beforeunload', () => handleError(), { once: true });
+  }, []);
+
   return null;
 };
 

frontend/js/components/PurchaseButton/index.tsx

@@ -93,6 +93,14 @@ const PurchaseButton = ({
     );
   }, [product]);
 
+  const hasAtLeastOneRemainingOrder =
+    typeof product?.remaining_order_count !== 'number' || product.remaining_order_count > 0;
+  const isPurchasable = hasAtLeastOneRemainingOrder && hasAtLeastOneCourseRun;
+
+  const saleTunnelModal = useModal({
+    isOpenDefault: false,
+  });
+
   if (!user) {
     return (
       <Button fullWidth onClick={login}>
@@ -104,14 +112,6 @@ const PurchaseButton = ({
     );
   }
 
-  const hasAtLeastOneRemainingOrder =
-    typeof product?.remaining_order_count !== 'number' || product.remaining_order_count > 0;
-  const isPurchasable = hasAtLeastOneRemainingOrder && hasAtLeastOneCourseRun;
-
-  const saleTunnelModal = useModal({
-    isOpenDefault: false,
-  });
-
   return (
     <>
       {!disabled && (

frontend/js/components/SaleTunnel/GenericPaymentButton/index.tsx

@@ -97,7 +97,7 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
   const { methods: orderMethods } = useOrders(undefined, { enabled: false });
   const [payment, setPayment] = useState<PaymentInfo>();
   const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
-  const [error, setError] = useState<PaymentErrorMessageId>(PaymentErrorMessageId.ERROR_DEFAULT);
+  const [error, setError] = useState<PaymentErrorMessageId>();
   const hasPaymentId = (p: Maybe<Payment>): p is Extract<Payment, PaymentWithId> => {
     return Boolean(p?.hasOwnProperty('payment_id'));
   };
@@ -115,8 +115,7 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
     product,
     error,
     onError: (e) => {
-      setError(e);
-      setState(ComponentStates.ERROR);
+      handleError(e);
     },
   });
 
@@ -129,6 +128,13 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
     );
   }, [product, saleTunnelProps.course, saleTunnelProps.enrollment, billingAddress, termsAccepted]);
 
+  const isBusy = useMemo(() => {
+    return (
+      state === ComponentStates.LOADING ||
+      (state === ComponentStates.ERROR && error === PaymentErrorMessageId.ERROR_ABORTING)
+    );
+  }, [state, error]);
+
   /**
    * Use Joanie API to retrieve an order and check if it's state is validated
    *
@@ -147,17 +153,16 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
     );
 
     if (!billingAddress) {
-      setError(PaymentErrorMessageId.ERROR_ADDRESS);
-      setState(ComponentStates.ERROR);
+      handleError(PaymentErrorMessageId.ERROR_ADDRESS);
     }
 
     validateTerms();
 
     if (isReadyToPay) {
       setState(ComponentStates.LOADING);
-      let paymentInfos = payment;
+      setError(undefined);
 
-      if (!paymentInfos) {
+      if (!payment) {
         const billingAddressPayload = ObjectHelper.omit(billingAddress!, 'id', 'is_main');
 
         orderMethods.submit(
@@ -168,7 +173,7 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
           },
           {
             onSuccess: (orderPayment) => {
-              paymentInfos = {
+              const paymentInfos = {
                 ...orderPayment.payment_info,
                 order_id: orderId,
               };
@@ -178,10 +183,10 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
               if (createPaymentError.responseBody) {
                 const responseErrors = await createPaymentError.responseBody;
                 if ('max_validated_orders' in responseErrors) {
-                  setError(PaymentErrorMessageId.ERROR_FULL_PRODUCT);
+                  handleError(PaymentErrorMessageId.ERROR_FULL_PRODUCT);
                 }
               }
-              setState(ComponentStates.ERROR);
+              handleError();
             },
           },
         );
@@ -201,8 +206,7 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
     }
 
     if (!billingAddress) {
-      setError(PaymentErrorMessageId.ERROR_ADDRESS);
-      setState(ComponentStates.ERROR);
+      handleError(PaymentErrorMessageId.ERROR_ADDRESS);
     }
 
     validateTerms();
@@ -223,7 +227,7 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
           createPayment(newOrder.id);
         },
         onError: async () => {
-          setState(ComponentStates.ERROR);
+          handleError();
         },
       });
     }
@@ -235,8 +239,7 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
     const checkOrderValidity = async () => {
       if (round >= PAYMENT_SETTINGS.pollLimit) {
         timeoutRef.current = undefined;
-        orderMethods.abort({ id: payment!.order_id, payment_id: paymentId });
-        setState(ComponentStates.ERROR);
+        onPaymentSuccessRef.current(false);
       } else {
         const isValidated = await isOrderValidated(payment!.order_id);
         if (isValidated) {
@@ -266,9 +269,13 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
           payment_id: paymentId,
         })
         .then(() => {
-          setPayment(undefined);
           handleError(PaymentErrorMessageId.ERROR_ABORT);
+        })
+        .catch(() => {
+          handleError();
         });
+    } else if (state === ComponentStates.ERROR) {
+      setPayment(undefined);
     }
   }, [error]);
 
@@ -282,7 +289,7 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
     <>
       {renderTermsCheckbox()}
       <Button
-        disabled={state === ComponentStates.LOADING}
+        disabled={isBusy}
         onClick={createOrder}
         data-testid={order && 'payment-button-order-loaded'}
         fullWidth={isMobile}
@@ -290,7 +297,7 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
           'aria-describedby': 'sale-tunnel-payment-error',
         })}
       >
-        {state === ComponentStates.LOADING ? (
+        {isBusy ? (
           <Spinner theme="light" aria-labelledby="payment-in-progress">
             <span id="payment-in-progress">
               <FormattedMessage {...messages.paymentInProgress} />
@@ -311,9 +318,11 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
       {state === ComponentStates.LOADING && payment && (
         <PaymentInterface {...payment} onError={handleError} onSuccess={handleSuccess} />
       )}
-      <p className="payment-button__error" id="sale-tunnel-payment-error" tabIndex={-1}>
-        {state === ComponentStates.ERROR && <FormattedMessage {...messages[error]} />}
-      </p>
+      {state === ComponentStates.ERROR && (
+        <p className="payment-button__error" id="sale-tunnel-payment-error" tabIndex={-1}>
+          <FormattedMessage {...messages[error || PaymentErrorMessageId.ERROR_DEFAULT]} />
+        </p>
+      )}
     </>
   );
 };

frontend/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -10,6 +10,7 @@ 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';
 
 export interface SaleTunnelContextType {
   props: SaleTunnelProps;
@@ -18,7 +19,7 @@ export interface SaleTunnelContextType {
   webAnalyticsEventKey: string;
 
   // internal
-  onPaymentSuccess: () => void;
+  onPaymentSuccess: (validated?: boolean) => void;
   step: SaleTunnelStep;
 
   // meta
@@ -46,6 +47,7 @@ export const useSaleTunnelContext = () => {
 export enum SaleTunnelStep {
   PAYMENT,
   SUCCESS,
+  NOT_VALIDATED,
 }
 
 interface GenericSaleTunnelProps extends SaleTunnelProps {
@@ -89,8 +91,12 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       setBillingAddress,
       creditCard,
       setCreditCard,
-      onPaymentSuccess: () => {
-        setStep(SaleTunnelStep.SUCCESS);
+      onPaymentSuccess: (validated: boolean = true) => {
+        if (validated) {
+          setStep(SaleTunnelStep.SUCCESS);
+        } else {
+          setStep(SaleTunnelStep.NOT_VALIDATED);
+        }
         WebAnalyticsAPIHandler()?.sendCourseProductEvent(
           CourseProductEvent.PAYMENT_SUCCEED,
           props.eventKey,
@@ -143,6 +149,8 @@ export const GenericSaleTunnelInner = (props: GenericSaleTunnelProps) => {
       return <GenericSaleTunnelPaymentStep {...props} />;
     case SaleTunnelStep.SUCCESS:
       return <GenericSaleTunnelSuccessStep {...props} />;
+    case SaleTunnelStep.NOT_VALIDATED:
+      return <GenericSaleTunnelNotValidatedStep {...props} />;
   }
   throw new Error('Invalid step: ' + step);
 };
@@ -187,7 +195,15 @@ export const GenericSaleTunnelPaymentStep = (props: GenericSaleTunnelProps) => {
 export const GenericSaleTunnelSuccessStep = (props: SaleTunnelProps) => {
   return (
     <Modal {...props} size={ModalSize.MEDIUM}>
-      <SaleTunnelSuccess closeModal={() => props.onClose()} />
+      <SaleTunnelSuccess closeModal={props.onClose} />
+    </Modal>
+  );
+};
+
+export const GenericSaleTunnelNotValidatedStep = (props: SaleTunnelProps) => {
+  return (
+    <Modal {...props} size={ModalSize.MEDIUM}>
+      <SaleTunnelNotValidated closeModal={props.onClose} />
     </Modal>
   );
 };

frontend/js/components/SaleTunnel/ProductPath/CourseRunsList.tsx

@@ -18,7 +18,7 @@ other {# course runs}
     id: 'components.SaleTunnelStepValidation.availableCourseRuns',
   },
   courseRunDates: {
-    defaultMessage: 'From {start} to {end}',
+    defaultMessage: 'From {start} {end, select, undefined {} other {to {end}}}',
     description: 'Course run date text',
     id: 'components.SaleTunnelStepValidation.courseRunDates',
   },

frontend/js/components/SaleTunnel/SaleTunnelNotValidated/index.tsx

@@ -0,0 +1,70 @@
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Button } from '@openfun/cunningham-react';
+import { generatePath } from 'react-router-dom';
+import WarningIcon from 'components/WarningIcon';
+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({
+  apology: {
+    defaultMessage: "Sorry, you'll have to wait a little longer!",
+    description: 'Text displayed to thank user for his order',
+    id: 'components.SaleTunnelSuccessNotValidated.apology',
+  },
+  title: {
+    defaultMessage: 'It takes too long to validate your order.',
+    description: 'Message to confirm that order has been created',
+    id: 'components.SaleTunnelSuccessNotValidated.title',
+  },
+  description: {
+    defaultMessage:
+      'Your payment has succeeded but your order validation is taking too long, you can close this dialog and come back later. 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.SaleTunnelSuccessNotValidated.description',
+  },
+  cta: {
+    defaultMessage: 'Close',
+    description: 'Label to the call to action to close sale tunnel',
+    id: 'components.SaleTunnelSuccessNotValidated.cta',
+  },
+});
+
+const SaleTunnelNotValidated = ({ closeModal }: { closeModal: () => void }) => {
+  const intl = useIntl();
+  const { order, product } = useSaleTunnelContext();
+  return (
+    <section className="sale-tunnel-end" data-testid="generic-sale-tunnel-not-validated-step">
+      <header className="sale-tunnel-end__header">
+        <WarningIcon />
+        <h3 className="sale-tunnel-end__title">
+          <FormattedMessage {...messages.apology} />
+        </h3>
+      </header>
+      <p className="sale-tunnel-end__content">
+        <FormattedMessage {...messages.title} />
+        <br />
+        <FormattedMessage {...messages.description} />
+      </p>
+      <footer className="sale-tunnel-end__footer">
+        {product.type === ProductType.CREDENTIAL ? (
+          <Button
+            href={
+              getDashboardBasename(intl.locale) +
+              generatePath(LearnerDashboardPaths.ORDER, { orderId: order!.id })
+            }
+          >
+            <FormattedMessage {...messages.cta} />
+          </Button>
+        ) : (
+          <Button onClick={closeModal}>
+            <FormattedMessage {...messages.cta} />
+          </Button>
+        )}
+      </footer>
+    </section>
+  );
+};
+
+export default SaleTunnelNotValidated;

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

@@ -10,33 +10,33 @@ const messages = defineMessages({
   congratulations: {
     defaultMessage: 'Congratulations!',
     description: 'Text displayed to thank user for his order',
-    id: 'components.SaleTunnelStepResume.congratulations',
+    id: 'components.SaleTunnelSuccess.congratulations',
   },
   successMessage: {
     defaultMessage: 'Your order has been successfully created.',
     description: 'Message to confirm that order has been created',
-    id: 'components.SaleTunnelStepResume.successMessage',
+    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.SaleTunnelStepResume.successDetailMessage',
+    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.SaleTunnelStepResume.successDetailSignatureMessage',
+    id: 'components.SaleTunnelSuccess.successDetailSignatureMessage',
   },
   cta: {
     defaultMessage: 'Start this course now!',
     description: 'Label to the call to action to close sale tunnel',
-    id: 'components.SaleTunnelStepResume.cta',
+    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.SaleTunnelStepResume.ctaSignature',
+    id: 'components.SaleTunnelSuccess.ctaSignature',
   },
 });
 
@@ -44,14 +44,14 @@ export const SaleTunnelSuccess = ({ closeModal }: { closeModal: () => void }) =>
   const intl = useIntl();
   const { order, product } = useSaleTunnelContext();
   return (
-    <section className="SaleTunnelSuccess" data-testid="generic-sale-tunnel-success-step">
-      <header className="SaleTunnelSuccess__header">
+    <section className="sale-tunnel-end" data-testid="generic-sale-tunnel-success-step">
+      <header className="sale-tunnel-end__header">
         <SuccessIcon />
-        <h3 className="SaleTunnelSuccess__title">
+        <h3 className="sale-tunnel-end__title">
           <FormattedMessage {...messages.congratulations} />
         </h3>
       </header>
-      <p className="SaleTunnelSuccess__content">
+      <p className="sale-tunnel-end__content">
         <FormattedMessage {...messages.successMessage} />
         <br />
         <FormattedMessage {...messages.successDetailMessage} />
@@ -62,7 +62,7 @@ export const SaleTunnelSuccess = ({ closeModal }: { closeModal: () => void }) =>
           </>
         )}
       </p>
-      <footer className="SaleTunnelSuccess__footer">
+      <footer className="sale-tunnel-end__footer">
         {product.contract_definition ? (
           <Button
             href={

frontend/js/components/SaleTunnel/_styles.scss

@@ -102,3 +102,32 @@
   font-weight: var(--c--theme--font--weights--bold);
   text-align: left;
 }
+
+.sale-tunnel-end {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    margin-bottom: 0;
+    text-align: center;
+  }
+
+  &__title {
+    color: r-theme-val(steps-content, title-color);
+    font-size: 1.5rem;
+  }
+
+  &__content {
+    color: r-theme-val(steps-content, content-color);
+    font-size: 0.875rem;
+    line-height: 1.3em;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
+
+  &__footer {
+    margin-top: 2.5rem;
+  }
+}

frontend/js/components/SaleTunnel/index.full-process.spec.tsx

@@ -288,5 +288,5 @@ describe('SaleTunnel', () => {
     // This way we make sure the cache is updated.
     await screen.findByText('Purchased');
     expect(screen.queryByRole('button', { name: product.call_to_action })).not.toBeInTheDocument();
-  });
+  }, 10000);
 });