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

frontend/js/components/PaymentButton/index.tsx

@@ -1,320 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { Button } from '@openfun/cunningham-react';
-import { Spinner } from 'components/Spinner';
-import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { PAYMENT_SETTINGS } from 'settings';
-import type * as Joanie from 'types/Joanie';
-import { OrderCreationPayload, OrderState, ProductType } from 'types/Joanie';
-import type { Nullable } from 'types/utils';
-import { HttpError } from 'utils/errors/HttpError';
-import WebAnalyticsAPIHandler from 'api/web-analytics';
-import { CourseProductEvent } from 'types/web-analytics';
-import { useTerms } from 'components/PaymentButton/hooks/useTerms';
-import { useSaleTunnelContext } from 'components/SaleTunnel/context';
-import { ObjectHelper } from 'utils/ObjectHelper';
-import { useOrders } from 'hooks/useOrders';
-import PaymentInterface from './components/PaymentInterfaces';
-
-const messages = defineMessages({
-  errorAbort: {
-    defaultMessage: 'You have aborted the payment.',
-    description: 'Error message shown when user aborts the payment.',
-    id: 'components.PaymentButton.errorAbort',
-  },
-  errorAborting: {
-    defaultMessage: 'Aborting the payment...',
-    description: 'Error message shown when user asks to abort the payment.',
-    id: 'components.PaymentButton.errorAborting',
-  },
-  errorDefault: {
-    defaultMessage: 'An error occurred during payment. Please retry later.',
-    description: 'Error message shown when payment creation request failed.',
-    id: 'components.PaymentButton.errorDefault',
-  },
-  errorFullProduct: {
-    defaultMessage: 'There are no more places available for this product.',
-    description:
-      'Error message shown when payment creation request failed because there is no remaining available seat for the product.',
-    id: 'components.PaymentButton.errorFullProduct',
-  },
-  errorAddress: {
-    defaultMessage: 'You must have a billing address.',
-    description: "Error message shown when the user didn't select a billing address.",
-    id: 'components.PaymentButton.errorAddress',
-  },
-  errorTerms: {
-    defaultMessage: 'You must accept the terms.',
-    description: "Error message shown when the user didn't check the terms checkbox.",
-    id: 'components.PaymentButton.errorTerms',
-  },
-  pay: {
-    defaultMessage: 'Pay {price}',
-    description: 'CTA label to proceed to the payment of the product',
-    id: 'components.PaymentButton.pay',
-  },
-  payInOneClick: {
-    defaultMessage: 'Pay in one click {price}',
-    description: 'CTA label to proceed to the one click payment of the product',
-    id: 'components.PaymentButton.payInOneClick',
-  },
-  paymentInProgress: {
-    defaultMessage: 'Payment in progress',
-    description: 'Label for screen reader when a payment is in progress.',
-    id: 'components.PaymentButton.paymentInProgress',
-  },
-});
-
-export enum PaymentErrorMessageId {
-  ERROR_ABORT = 'errorAbort',
-  ERROR_ABORTING = 'errorAborting',
-  ERROR_ADDRESS = 'errorAddress',
-  ERROR_DEFAULT = 'errorDefault',
-  ERROR_FULL_PRODUCT = 'errorFullProduct',
-  ERROR_TERMS = 'errorTerms',
-}
-
-interface PaymentButtonProps {
-  billingAddress?: Joanie.Address;
-  creditCard?: Nullable<Joanie.CreditCard['id']>;
-  onSuccess: () => void;
-}
-
-type PaymentInfo = Joanie.Payment & { order_id: string };
-export type OneClickPaymentInfo = Joanie.PaymentOneClick & { order_id: string };
-
-enum ComponentStates {
-  IDLE = 'idle',
-  LOADING = 'loading',
-  ERROR = 'error',
-}
-
-/**
- * Displays a button to proceed to the payment.
- * First it creates the payment from Joanie then displays the payment interface
- * or the error message.
- */
-const PaymentButton = ({ billingAddress, creditCard, onSuccess }: PaymentButtonProps) => {
-  const intl = useIntl();
-  const API = useJoanieApi();
-  const timeoutRef = useRef<NodeJS.Timeout>();
-  const { course, key, enrollment, product, order, orderGroup } = useSaleTunnelContext();
-  const { methods: orderMethods } = useOrders(undefined, { enabled: false });
-  const [payment, setPayment] = useState<PaymentInfo | OneClickPaymentInfo>();
-  const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
-  const [error, setError] = useState<PaymentErrorMessageId>(PaymentErrorMessageId.ERROR_DEFAULT);
-
-  const { validateTerms, termsAccepted, renderTermsCheckbox } = useTerms({
-    product,
-    error,
-    onError: (e) => {
-      setError(e);
-      setState(ComponentStates.ERROR);
-    },
-  });
-
-  const isReadyToPay = useMemo(() => {
-    return (course || enrollment) && product && billingAddress && termsAccepted;
-  }, [product, course, enrollment, billingAddress, termsAccepted]);
-
-  /**
-   * Use Joanie API to retrieve an order and check if it's state is validated
-   *
-   * @param {string} id - Order id
-   * @returns {Promise<boolean>} - Promise resolving to true if order is validated
-   */
-  const isOrderValidated = async (id: string): Promise<Boolean> => {
-    const orderToCheck = await API.user.orders.get({ id });
-    return orderToCheck?.state === OrderState.VALIDATED;
-  };
-
-  const createPayment = async (orderId: string) => {
-    WebAnalyticsAPIHandler()?.sendCourseProductEvent(CourseProductEvent.PAYMENT_CREATION, key);
-
-    if (!billingAddress) {
-      setError(PaymentErrorMessageId.ERROR_ADDRESS);
-      setState(ComponentStates.ERROR);
-    }
-
-    validateTerms();
-
-    if (isReadyToPay) {
-      setState(ComponentStates.LOADING);
-      let paymentInfos = payment;
-
-      if (!paymentInfos) {
-        const billingAddressPayload = ObjectHelper.omit(billingAddress!, 'id', 'is_main');
-
-        orderMethods.submit(
-          {
-            id: orderId,
-            billing_address: billingAddressPayload,
-            ...(creditCard && { credit_card_id: creditCard }),
-          },
-          {
-            onSuccess: (orderPayment) => {
-              paymentInfos = {
-                ...orderPayment.payment_info,
-                order_id: orderId,
-              };
-              setPayment(paymentInfos);
-            },
-            onError: async (createPaymentError: HttpError) => {
-              if (createPaymentError.responseBody) {
-                const responseErrors = await createPaymentError.responseBody;
-                if ('max_validated_orders' in responseErrors) {
-                  setError(PaymentErrorMessageId.ERROR_FULL_PRODUCT);
-                }
-              }
-              setState(ComponentStates.ERROR);
-            },
-          },
-        );
-      }
-    }
-  };
-
-  const createOrder = async () => {
-    if (!billingAddress) {
-      setError(PaymentErrorMessageId.ERROR_ADDRESS);
-      setState(ComponentStates.ERROR);
-    }
-
-    validateTerms();
-
-    if (!isReadyToPay) {
-      return;
-    }
-
-    setState(ComponentStates.LOADING);
-
-    if (order) {
-      createPayment(order.id);
-    } else {
-      const payload: OrderCreationPayload =
-        product.type === ProductType.CERTIFICATE
-          ? {
-              product_id: product.id,
-              enrollment_id: enrollment!.id,
-              has_consent_to_terms: termsAccepted,
-            }
-          : {
-              product_id: product.id,
-              course_code: course!.code,
-              has_consent_to_terms: termsAccepted,
-              ...(orderGroup ? { order_group_id: orderGroup.id } : {}),
-            };
-
-      orderMethods.create(payload, {
-        onSuccess: (newOrder) => {
-          createPayment(newOrder.id);
-        },
-        onError: async () => {
-          setState(ComponentStates.ERROR);
-        },
-      });
-    }
-  };
-
-  const handleSuccess = () => {
-    let round = 0;
-
-    const checkOrderValidity = async () => {
-      if (round >= PAYMENT_SETTINGS.pollLimit) {
-        timeoutRef.current = undefined;
-        orderMethods.abort({ id: payment!.order_id, payment_id: payment!.payment_id });
-        setState(ComponentStates.ERROR);
-      } else {
-        const isValidated = await isOrderValidated(payment!.order_id);
-        if (isValidated) {
-          setState(ComponentStates.IDLE);
-          timeoutRef.current = undefined;
-          onSuccess();
-        } else {
-          round++;
-          timeoutRef.current = setTimeout(checkOrderValidity, PAYMENT_SETTINGS.pollInterval);
-        }
-      }
-    };
-
-    checkOrderValidity();
-  };
-
-  const handleError = (messageId: PaymentErrorMessageId = PaymentErrorMessageId.ERROR_DEFAULT) => {
-    setState(ComponentStates.ERROR);
-    setError(messageId);
-  };
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current !== undefined) {
-        clearTimeout(timeoutRef.current);
-        if (payment) {
-          orderMethods.abort({
-            id: payment.order_id,
-            payment_id: payment.payment_id,
-          });
-        }
-      }
-    };
-  }, [payment]);
-
-  useEffect(() => {
-    if (error === PaymentErrorMessageId.ERROR_ABORTING) {
-      orderMethods
-        .abort({
-          id: payment!.order_id,
-          payment_id: payment!.payment_id,
-        })
-        .then(() => {
-          setPayment(undefined);
-          handleError(PaymentErrorMessageId.ERROR_ABORT);
-        });
-    }
-  }, [error]);
-
-  useEffect(() => {
-    if (state === ComponentStates.ERROR) {
-      document.querySelector<HTMLElement>('#sale-tunnel-payment-error')?.focus();
-    }
-  }, [state]);
-
-  return (
-    <div className="payment-button" data-testid={order && 'payment-button-order-loaded'}>
-      {renderTermsCheckbox()}
-      <Button
-        disabled={state === ComponentStates.LOADING}
-        onClick={createOrder}
-        {...(state === ComponentStates.ERROR && {
-          'aria-describedby': 'sale-tunnel-payment-error',
-        })}
-      >
-        {state === ComponentStates.LOADING ? (
-          <Spinner theme="light" aria-labelledby="payment-in-progress">
-            <span id="payment-in-progress">
-              <FormattedMessage {...messages.paymentInProgress} />
-            </span>
-          </Spinner>
-        ) : (
-          <FormattedMessage
-            {...(creditCard ? messages.payInOneClick : messages.pay)}
-            values={{
-              price: intl.formatNumber(product.price, {
-                style: 'currency',
-                currency: product.price_currency,
-              }),
-            }}
-          />
-        )}
-      </Button>
-      {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>
-    </div>
-  );
-};
-
-export default PaymentButton;

frontend/js/components/SaleTunnel/components/RegisteredCreditCard/_styles.scss

@@ -1,37 +0,0 @@
-.registered-credit-card {
-  @include shadowed-box();
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-
-  &__infos {
-    color: r-theme-val(registered-credit-card, base-color);
-    font-family: $r-font-family-montserrat;
-    font-weight: $font-weight-bold;
-    text-align: right;
-    user-select: none;
-
-    p {
-      margin-bottom: 0;
-    }
-  }
-
-  &__name {
-    color: r-theme-val(registered-credit-card, title-color);
-    font-size: 0.9rem;
-  }
-
-  &__number {
-    line-height: 1.2em;
-    text-transform: uppercase;
-
-    &:before {
-      content: 'XXXX XXXX XXXX ';
-    }
-  }
-
-  &__validity {
-    line-height: 1.2em;
-  }
-}

frontend/js/components/SaleTunnel/components/RegisteredCreditCard/index.spec.tsx

@@ -1,90 +0,0 @@
-import { fireEvent, getByRole, getByText, render } from '@testing-library/react';
-import { PropsWithChildren } from 'react';
-import { IntlProvider } from 'react-intl';
-import { CreditCard } from 'types/Joanie';
-import { CreditCardFactory } from 'utils/test/factories/joanie';
-import { RegisteredCreditCard } from '.';
-
-describe('RegisteredCreditCard', () => {
-  const dateFormatter = Intl.DateTimeFormat('en', {
-    month: '2-digit',
-    year: 'numeric',
-  });
-
-  const Wrapper = ({ children }: PropsWithChildren<{}>) => (
-    <IntlProvider locale="en">{children}</IntlProvider>
-  );
-
-  it('should render credit card information', () => {
-    const creditCard: CreditCard = CreditCardFactory().one();
-
-    const { container } = render(
-      <Wrapper>
-        <RegisteredCreditCard {...creditCard} selected={false} handleSelect={() => undefined} />
-      </Wrapper>,
-    );
-
-    // - Its title
-    getByText(container, creditCard.title!, { exact: true });
-
-    // - Its last numbers
-    getByText(container, creditCard.last_numbers);
-
-    // - Then its expiration date
-    getByText(
-      container,
-      `Expiration date: ${dateFormatter.format(
-        new Date(creditCard.expiration_year, creditCard.expiration_month - 1, 1),
-      )}`,
-    );
-
-    // A checkbox input
-    getByRole(container, 'checkbox', {
-      name: `Select ${creditCard.title}'s card`,
-    });
-  });
-
-  it('should display the credit card brand if it has not title', () => {
-    const creditCard: CreditCard = CreditCardFactory({ title: undefined }).one();
-
-    const { container } = render(
-      <Wrapper>
-        <RegisteredCreditCard {...creditCard} selected={false} handleSelect={() => undefined} />
-      </Wrapper>,
-    );
-
-    getByText(container, creditCard.brand);
-  });
-
-  it('should have a controlled checkbox to select/unselect the current credit card', () => {
-    const creditCard: CreditCard = CreditCardFactory().one();
-    let selected = false;
-    const handleSelect = jest.fn();
-
-    const { container, rerender } = render(
-      <Wrapper>
-        <RegisteredCreditCard {...creditCard} selected={selected} handleSelect={handleSelect} />
-      </Wrapper>,
-    );
-
-    const $checkbox = getByRole(container, 'checkbox', {
-      name: `Select ${creditCard.title}'s card`,
-    });
-
-    fireEvent.click($checkbox);
-
-    expect(handleSelect).toHaveBeenNthCalledWith(1, expect.objectContaining({ target: $checkbox }));
-
-    // - If we update selected value, the input checkbox state should be updated accordingly
-    selected = true;
-    rerender(
-      <Wrapper>
-        <RegisteredCreditCard {...creditCard} selected={selected} handleSelect={handleSelect} />
-      </Wrapper>,
-    );
-
-    getByRole(container, 'checkbox', {
-      name: `Unselect ${creditCard.title}'s card`,
-    });
-  });
-});

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

@@ -1,64 +0,0 @@
-import { Checkbox } from '@openfun/cunningham-react';
-import { useMemo } from 'react';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import type * as Joanie from 'types/Joanie';
-
-const messages = defineMessages({
-  inputAriaLabel: {
-    defaultMessage: "{selected, select, true {Unselect} other {Select}} {title}'s card",
-    description: 'ARIA Label read by screen reader to inform which card is focused',
-    id: 'components.RegisteredCreditCard.inputAriaLabel',
-  },
-  expirationDate: {
-    defaultMessage: 'Expiration date: {expirationDate}',
-    description: 'Credit card expiration date label',
-    id: 'components.RegisteredCreditCard.expirationDate',
-  },
-});
-
-export interface Props extends Joanie.CreditCard {
-  selected: boolean;
-  handleSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export const RegisteredCreditCard = ({ selected, handleSelect, ...creditCard }: Props) => {
-  const intl = useIntl();
-
-  const expirationDate = useMemo(() => {
-    const { expiration_month: month, expiration_year: year } = creditCard;
-    return intl.formatDate(new Date(year, month - 1, 1), {
-      month: '2-digit',
-      year: 'numeric',
-    });
-  }, [creditCard.expiration_month, creditCard.expiration_year]);
-
-  const inputId = useMemo(() => `registered-credit-card-${creditCard.id}`, [creditCard.id]);
-
-  return (
-    <label className="registered-credit-card">
-      <div className="form-field">
-        <Checkbox
-          aria-label={intl.formatMessage(messages.inputAriaLabel, {
-            title: creditCard.title,
-            selected,
-          })}
-          aria-describedby={`credit-card-${creditCard.id}-infos`}
-          checked={selected}
-          className="form-field__checkbox-input"
-          onChange={handleSelect}
-          type="checkbox"
-          id={inputId}
-        />
-      </div>
-      <div id={`credit-card-${creditCard.id}-infos`} className="registered-credit-card__infos">
-        <strong className="h6 registered-credit-card__name">
-          {creditCard.title || creditCard.brand}
-        </strong>
-        <p className="registered-credit-card__number">{creditCard.last_numbers}</p>
-        <p className="registered-credit-card__validity">
-          <FormattedMessage {...messages.expirationDate} values={{ expirationDate }} />
-        </p>
-      </div>
-    </label>
-  );
-};

frontend/js/components/SaleTunnel/components/SaleTunnelStepPayment/_styles.scss

@@ -1,188 +0,0 @@
-.SaleTunnelStepPayment {
-  display: grid;
-  gap: 30px;
-  grid-template:
-    'row_info_slot_0 row_info_slot_1'
-    'row_payment_method_slot_0 row_payment_method_slot_1'
-    'row_footer row_footer';
-
-  @include media-breakpoint-down(md) {
-    gap: 0;
-    grid-template:
-      'row_info_slot_0'
-      'row_info_slot_1'
-      'row_payment_method_slot_0'
-      'row_payment_method_slot_1'
-      'row_footer';
-
-    & > &__block {
-      background: r-color('azure2');
-      padding: 3rem 1rem;
-      margin-bottom: 1rem;
-      border-radius: 6px;
-    }
-  }
-
-  &__block {
-    &__title {
-      color: r-theme-val(steps-content, title-color);
-      font-size: $h4-font-size;
-    }
-  }
-
-  &__row {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 3rem;
-    margin-bottom: 3rem;
-    width: 100%;
-
-    @include media-breakpoint-down(md) {
-      $block-gutter: 4rem;
-      background: r-color('azure2');
-      border-radius: 6px;
-      flex-direction: column;
-      padding: 3rem 1rem;
-
-      &:not(:last-of-type) {
-        margin-bottom: 4rem;
-      }
-
-      & > .SaleTunnelStepPayment__block {
-        &:not(:first-child) {
-          margin-top: $block-gutter;
-        }
-
-        &.SaleTunnelStepPayment__block--separator {
-          margin: 1rem 0 calc(1rem - #{$block-gutter}) 0;
-        }
-      }
-    }
-
-    & > .SaleTunnelStepPayment__block {
-      flex: 1;
-
-      &:not(:last-child) {
-        margin-right: 15%;
-      }
-
-      &--separator {
-        color: r-theme-val(steps-content, title-color);
-        flex: 0 0 15%;
-        font-family: $r-font-family-montserrat;
-        font-weight: $font-weight-bold;
-        margin-top: 3rem;
-        max-width: 100px;
-        text-align: center;
-        text-transform: uppercase;
-      }
-    }
-  }
-
-  & > &__block:nth-child(1) {
-    grid-area: row_info_slot_0;
-  }
-  & > &__block:nth-child(2) {
-    grid-area: row_info_slot_1;
-  }
-  & > &__block:nth-child(3) {
-    grid-area: row_payment_method_slot_1;
-  }
-
-  &__footer {
-    margin-top: 2.5rem;
-    grid-area: row_footer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-
-    & > .button {
-      min-width: 200px;
-    }
-  }
-
-  &__block--product {
-    color: r-theme-val(steps-content, title-color);
-    display: flex;
-    justify-content: space-between;
-
-    &__title {
-      padding-right: 1rem;
-    }
-
-    &__title,
-    &__price {
-      font-family: $r-font-family-hind;
-      font-size: 1rem;
-      font-weight: $font-weight-bold;
-      line-height: 1.2em;
-      margin: 0;
-    }
-  }
-
-  &__block--buyer {
-    color: r-theme-val(steps-content, content-color);
-
-    &__name,
-    &__email {
-      font-family: $r-font-family-hind;
-      font-size: 1rem;
-      margin: 0;
-    }
-
-    &__address-header {
-      align-items: center;
-      display: flex;
-      font-family: $r-font-family-hind;
-      font-weight: $font-weight-bold;
-      margin-top: 0.625rem;
-
-      & > *:not(:last-child) {
-        margin: 0 0.5rem 0 0;
-      }
-
-      @include media-breakpoint-down(xs) {
-        flex-direction: column;
-        align-items: flex-start;
-        margin-bottom: 0.5rem;
-
-        & > *:not(:last-child) {
-          margin: 0 0 0.25rem 0;
-        }
-      }
-    }
-
-    &__address-selection {
-      margin-top: 0.625rem;
-      &__address {
-        margin-top: 0.625rem;
-      }
-    }
-
-    .form-field {
-      margin-bottom: 0;
-    }
-
-    .form-field__select-input {
-      font-size: 0.7rem;
-      font-weight: $font-weight-bold;
-      text-transform: uppercase;
-      line-height: 1.5em;
-    }
-
-    &__address__noAddress {
-      margin-bottom: 0;
-    }
-  }
-
-  &__block--registered-credit-card-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    & > li:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-  }
-}