richie-education 2.28.2-dev26 → 2.28.2-dev53

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.scss

@@ -1,15 +1,14 @@
 .sale-tunnel__sponsors {
   margin-top: 8px;
   display: flex;
-  gap: 8px;
-  justify-content: center;
+  gap: 16px;
+  justify-content: flex-start;
+  align-items: center;
   overflow: hidden;
   flex-wrap: wrap;
 
   img {
-    height: 50px;
-    padding: 8px;
-    width: 130px;
+    width: 90px;
     object-fit: contain;
   }
 }

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

@@ -1,20 +1,48 @@
+import { defineMessages, FormattedMessage } from 'react-intl';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
-import { DashboardAvatar } from 'widgets/Dashboard/components/DashboardAvatar';
+import {
+  DashboardAvatar,
+  DashboardAvatarVariantEnum,
+} from 'widgets/Dashboard/components/DashboardAvatar';
+import { Organization } from 'types/Joanie';
+
+const messages = defineMessages({
+  blockTitle: {
+    id: 'components.SaleTunnel.Sponsors.SaleTunnelSponsors.blockTitle',
+    defaultMessage: 'University',
+    description: 'Title for the universities section in the sale tunnel',
+  },
+});
 
 export const SaleTunnelSponsors = () => {
   const {
     props: { organizations },
   } = useSaleTunnelContext();
+
+  if (!organizations || organizations.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <h3 className="block-title">
+        <FormattedMessage {...messages.blockTitle} />
+      </h3>
+      <div className="sale-tunnel__sponsors">{organizations?.map(OrganizationLogo)}</div>
+    </>
+  );
+};
+
+const OrganizationLogo = (organization: Organization) => {
+  if (organization.logo) {
+    return <img key={organization.id} src={organization.logo!.src} alt={organization.title} />;
+  }
+
   return (
-    <div className="sale-tunnel__sponsors">
-      {organizations?.map((organization) => {
-        if (organization.logo) {
-          return (
-            <img key={organization.id} src={organization.logo!.src} alt={organization.title} />
-          );
-        }
-        return <DashboardAvatar key={organization.id} title={organization.title} />;
-      })}
-    </div>
+    <DashboardAvatar
+      key={organization.id}
+      title={organization.title}
+      variant={DashboardAvatarVariantEnum.SQUARE}
+    />
   );
 };

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,201 @@
+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();
+    } catch (e) {
+      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

@@ -33,13 +33,15 @@
       flex: 1;
       overflow: hidden;
     }
+
+    &__column {
+      display: flex;
+      flex-direction: column;
+      gap: var(--c--theme--spacings--b);
+    }
   }
 
   &__information {
-    display: flex;
-    flex-direction: column;
-    gap: var(--c--theme--spacings--b);
-
     &__billing-address {
       display: flex;
       align-items: center;
@@ -103,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>
-      );
-    },
-  };
-};