richie-education 2.28.2-dev39 → 2.28.2-dev58

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

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

@@ -0,0 +1,202 @@
+import { useMemo, useEffect, useState } from 'react';
+import { Alert, Button, VariantType } from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
+import { useOrders } from 'hooks/useOrders';
+import { OrderCreationPayload } from 'types/Joanie';
+import { useMatchMediaLg } from 'hooks/useMatchMedia';
+import { SubscriptionErrorMessageId } from 'components/PaymentInterfaces/types';
+import { HttpError } from 'utils/errors/HttpError';
+import { Spinner } from 'components/Spinner';
+
+const messages = defineMessages({
+  subscribe: {
+    id: 'components.SaleTunnel.SubscriptionButton.subscribe',
+    defaultMessage: 'Subscribe',
+    description: 'Label of the button to subscribe to a product.',
+  },
+  walkthroughToSignAndSavePayment: {
+    id: 'components.SaleTunnel.SubscriptionButton.walkthroughToSignAndSavePayment',
+    defaultMessage:
+      'To enroll in the training, you will first be invited to sign the training agreement and then to define a payment method.',
+    description:
+      'Message explaining the subscription process with a training agreement to sign and a payment method to set.',
+  },
+  walkthroughToSign: {
+    id: 'components.SaleTunnel.SubscriptionButton.walkthroughToSign',
+    defaultMessage:
+      'To enroll in the training, you will be invited to sign the training agreement.',
+    description:
+      'Message explaining the subscription process with only a training agreement to sign.',
+  },
+  walkthroughToSavePayment: {
+    id: 'components.SaleTunnel.SubscriptionButton.walkthroughToSavePayment',
+    defaultMessage: 'To enroll in the training, you will be invited to define a payment method.',
+    description: 'Message explaining the subscription process with only a payment method to set.',
+  },
+  errorDefault: {
+    defaultMessage: 'An error occurred during order creation. Please retry later.',
+    description: 'Error message shown when order creation request failed.',
+    id: 'components.SubscriptionButton.errorDefault',
+  },
+  errorFullProduct: {
+    defaultMessage: 'There are no more places available for this product.',
+    description:
+      'Error message shown when order creation request failed because there is no remaining available seat for the product.',
+    id: 'components.SubscriptionButton.errorFullProduct',
+  },
+  errorAddress: {
+    defaultMessage: 'You must have a billing address.',
+    description: "Error message shown when the user didn't select a billing address.",
+    id: 'components.SubscriptionButton.errorAddress',
+  },
+  orderCreationInProgress: {
+    defaultMessage: 'Order creation in progress',
+    description: 'Label for screen reader when an order creation is in progress.',
+    id: 'components.SubscriptionButton.orderCreationInProgress',
+  },
+});
+
+enum ComponentStates {
+  IDLE = 'idle',
+  LOADING = 'loading',
+  ERROR = 'error',
+}
+
+interface Props {
+  buildOrderPayload: (
+    payload: Pick<OrderCreationPayload, 'product_id' | 'billing_address' | 'order_group_id'>,
+  ) => OrderCreationPayload;
+}
+
+const SubscriptionButton = ({ buildOrderPayload }: Props) => {
+  const {
+    order,
+    creditCard,
+    billingAddress,
+    product,
+    nextStep,
+    runSubmitCallbacks,
+    props: saleTunnelProps,
+  } = useSaleTunnelContext();
+  const { methods: orderMethods } = useOrders(undefined, { enabled: false });
+  const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
+  const [error, setError] = useState<SubscriptionErrorMessageId | string>();
+  const isMobile = useMatchMediaLg();
+
+  const handleError = (
+    messageId: SubscriptionErrorMessageId | string = SubscriptionErrorMessageId.ERROR_DEFAULT,
+  ) => {
+    setState(ComponentStates.ERROR);
+    setError(messageId);
+  };
+
+  const createOrder = async () => {
+    setState(ComponentStates.LOADING);
+
+    try {
+      await runSubmitCallbacks();
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (_error) {
+      setState(ComponentStates.IDLE);
+      return;
+    }
+
+    if (!billingAddress) {
+      handleError(SubscriptionErrorMessageId.ERROR_ADDRESS);
+      return;
+    }
+
+    const payload = buildOrderPayload({
+      product_id: product.id,
+      billing_address: billingAddress!,
+      order_group_id: saleTunnelProps.orderGroup?.id,
+    });
+
+    orderMethods.create(payload, {
+      onError: async (createOrderError: HttpError) => {
+        if (createOrderError.responseBody) {
+          const responseErrors = await createOrderError.responseBody;
+          if ('max_validated_orders' in responseErrors) {
+            handleError(SubscriptionErrorMessageId.ERROR_FULL_PRODUCT);
+          }
+        }
+        handleError();
+      },
+    });
+  };
+
+  const walkthroughMessages = useMemo(() => {
+    if (product.contract_definition && product.price > 0) {
+      return messages.walkthroughToSignAndSavePayment;
+    } else if (product.contract_definition && product.price === 0) {
+      return messages.walkthroughToSign;
+    } else if (!product.contract_definition && product.price > 0) {
+      return messages.walkthroughToSavePayment;
+    }
+  }, [product, creditCard]);
+
+  useEffect(() => {
+    if (order) nextStep();
+  }, [order]);
+
+  useEffect(() => {
+    if (error && [ComponentStates.IDLE, ComponentStates.LOADING].includes(state)) {
+      setError(undefined);
+    }
+    if (state === ComponentStates.ERROR) {
+      document.querySelector<HTMLElement>('#sale-tunnel-subscription-error')?.focus();
+    }
+  }, [state]);
+
+  return (
+    <>
+      <div style={{ maxWidth: '680px' }} className="mb-s" data-testid="walkthrough-banner">
+        {walkthroughMessages && (
+          <Alert type={VariantType.INFO}>
+            <FormattedMessage
+              {...walkthroughMessages}
+              values={{ credictCarNumbers: creditCard?.last_numbers }}
+            />
+          </Alert>
+        )}
+      </div>
+      <Button
+        onClick={createOrder}
+        fullWidth={isMobile}
+        disabled={state === ComponentStates.LOADING}
+        {...(state === ComponentStates.ERROR && {
+          'aria-describedby': 'sale-tunnel-payment-error',
+        })}
+      >
+        {state === ComponentStates.LOADING ? (
+          <Spinner theme="light" aria-labelledby="order-creation-in-progress">
+            <span id="order-creation-in-progress">
+              <FormattedMessage {...messages.orderCreationInProgress} />
+            </span>
+          </Spinner>
+        ) : (
+          <FormattedMessage {...messages.subscribe} />
+        )}
+      </Button>
+      {state === ComponentStates.ERROR && (
+        <p className="subscription-button__error" id="sale-tunnel-subscription-error" tabIndex={-1}>
+          {!error || messages.hasOwnProperty(error) ? (
+            <FormattedMessage
+              {...messages[
+                (error as Exclude<
+                  SubscriptionErrorMessageId,
+                  SubscriptionErrorMessageId.ERROR_ABORT
+                >) || SubscriptionErrorMessageId.ERROR_DEFAULT
+              ]}
+            />
+          ) : (
+            error
+          )}
+        </p>
+      )}
+    </>
+  );
+};
+
+export default SubscriptionButton;

package/js/components/SaleTunnel/_styles.scss

@@ -105,14 +105,23 @@
   text-align: left;
 }
 
-.sale-tunnel-end {
+.sale-tunnel-step {
   align-items: center;
   display: flex;
   flex-direction: column;
 
   &__header {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
     margin-bottom: 0;
     text-align: center;
+
+    & > .icon {
+      --size: 4.5rem;
+      height: var(--size);
+      width: var(--size);
+    }
   }
 
   &__title {

package/js/components/SaleTunnel/hooks/useTerms.tsx

@@ -1,77 +0,0 @@
-import { Checkbox } from '@openfun/cunningham-react';
-import { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import { Product } from 'types/Joanie';
-import context from 'utils/context';
-import { PaymentErrorMessageId } from 'components/PaymentInterfaces/types';
-
-const messages = defineMessages({
-  termsMessage: {
-    defaultMessage: 'By checking this box, you accept the ',
-    description: 'Message next to the checkbox in order to accept the terms',
-    id: 'components.PaymentButton.termsMessage',
-  },
-  termsMessageLink: {
-    defaultMessage: 'General Terms of Sale',
-    description: 'Clickable link included in the terms message',
-    id: 'components.SaleTunnelStepPayment.termsMessageLink',
-  },
-  termsMessageLinkTitle: {
-    defaultMessage: 'Open a preview of the General Terms of Sale',
-    description: 'Title of clickable link included in the terms message',
-    id: 'components.SaleTunnelStepPayment.termsMessageLinkTitle',
-  },
-});
-
-export const useTerms = ({
-  product,
-  onError,
-  error,
-}: {
-  product: Product;
-  onError: (error: PaymentErrorMessageId | string) => void;
-  error?: PaymentErrorMessageId | string;
-}) => {
-  const intl = useIntl();
-  const [termsAccepted, setTermsAccepted] = useState(false);
-  const validateTerms = () => {
-    if (!product.contract_definition) {
-      return;
-    }
-    if (!termsAccepted) {
-      onError(PaymentErrorMessageId.ERROR_TERMS);
-    }
-  };
-
-  return {
-    termsAccepted: termsAccepted || !product.contract_definition,
-    validateTerms,
-    renderTermsCheckbox: () => {
-      if (!product.contract_definition) {
-        return null;
-      }
-      return (
-        <section className="payment-button__terms">
-          <Checkbox
-            label={
-              <>
-                {intl.formatMessage(messages.termsMessage)}{' '}
-                <a
-                  href={context.site_urls.terms_and_conditions ?? '#'}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  title={intl.formatMessage(messages.termsMessageLinkTitle)}
-                >
-                  {intl.formatMessage(messages.termsMessageLink)}
-                </a>
-              </>
-            }
-            onChange={(e) => setTermsAccepted(e.target.checked)}
-            checked={termsAccepted}
-            state={error === PaymentErrorMessageId.ERROR_TERMS ? 'error' : 'default'}
-          />
-        </section>
-      );
-    },
-  };
-};

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

@@ -1,5 +1,6 @@
 import fetchMock from 'fetch-mock';
 import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import queryString from 'query-string';
 import {
   RichieContextFactory as mockRichieContextFactory,
   PacedCourseFactory,
@@ -8,13 +9,13 @@ import {
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import {
   AddressFactory,
-  CredentialOrderWithPaymentFactory,
+  CredentialOrderFactory,
   CredentialProductFactory,
   OrderGroupFactory,
 } from 'utils/test/factories/joanie';
 import type * as Joanie from 'types/Joanie';
 import { Maybe } from 'types/utils';
-import { OrderCredentialCreationPayload } from 'types/Joanie';
+import { NOT_CANCELED_ORDER_STATES, OrderCredentialCreationPayload } from 'types/Joanie';
 import { SaleTunnel, SaleTunnelProps } from 'components/SaleTunnel/index';
 import { render } from 'utils/test/render';
 import { getAddressLabel } from 'components/SaleTunnel/AddressSelector';
@@ -86,26 +87,23 @@ describe('SaleTunnel / Credential', () => {
     const billingAddress: Joanie.Address = AddressFactory({ is_main: true }).one();
 
     let createOrderPayload: Maybe<OrderCredentialCreationPayload>;
-    const { payment_info: paymentInfo, ...order } = CredentialOrderWithPaymentFactory().one();
+    const order = CredentialOrderFactory({ order_group_id: orderGroup.id }).one();
+    const orderQueryParameters = {
+      course_code: course.code,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
     fetchMock
-      .get(
-        `https://joanie.endpoint/api/v1.0/orders/?course_code=${course.code}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        [],
-      )
+      .get(url, [])
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
         [],
       )
-      .post('https://joanie.endpoint/api/v1.0/orders/', (url, { body }) => {
+      .post('https://joanie.endpoint/api/v1.0/orders/', (_, { body }) => {
         createOrderPayload = JSON.parse(body as any);
         return order;
       })
-      .patch(`https://joanie.endpoint/api/v1.0/orders/${order.id}/submit/`, {
-        paymentInfo,
-      })
-      .get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, {
-        ...order,
-      })
       .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
         overwriteRoutes: true,
       });
@@ -121,13 +119,6 @@ describe('SaleTunnel / Credential', () => {
       name: `Subscribe`,
     }) as HTMLButtonElement;
 
-    const $terms = screen.getByLabelText(
-      'By checking this box, you accept the General Terms of Sale',
-    );
-    await act(async () => {
-      fireEvent.click($terms);
-    });
-
     // - Payment button should not be disabled.
     expect($button.disabled).toBe(false);