richie-education 2.28.2-dev39 → 2.28.2-dev58

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.stories.tsx

@@ -57,16 +57,7 @@ type Story = StoryObj<typeof CourseProductItem>;
 
 export const Default: Story = {};
 
-export const WithPendingOrder: Story = {
-  args: {
-    productId: 'AAA',
-    course: PacedCourseFactory({ code: 'BBB' }).one(),
-  },
-  render: (args) =>
-    render(args, { order: CredentialOrderFactory({ state: OrderState.PENDING }).one() }),
-};
-
-export const WithValidatedOrder: Story = {
+export const WithCompletedOrder: Story = {
   args: {
     productId: 'AAA',
     course: PacedCourseFactory({ code: 'BBB' }).one(),
@@ -75,7 +66,7 @@ export const WithValidatedOrder: Story = {
     const courseRunWithEnrollment = CourseRunFactory().one();
     return render(args, {
       order: CredentialOrderFactory({
-        state: OrderState.VALIDATED,
+        state: OrderState.COMPLETED,
         target_enrollments: EnrollmentFactory({
           is_active: true,
           course_run: courseRunWithEnrollment,
@@ -91,11 +82,19 @@ export const WithValidatedOrder: Story = {
   },
 };
 
-export const WithSubmittedOrder: Story = {
+export const WithPendingOrder: Story = {
   args: {
     productId: 'AAA',
     course: PacedCourseFactory({ code: 'BBB' }).one(),
   },
   render: (args) =>
-    render(args, { order: CredentialOrderFactory({ state: OrderState.SUBMITTED }).one() }),
+    render(args, { order: CredentialOrderFactory({ state: OrderState.PENDING }).one() }),
+};
+
+export const WithNoOrder: Story = {
+  args: {
+    productId: 'AAA',
+    course: PacedCourseFactory({ code: 'BBB' }).one(),
+  },
+  render: (args) => render(args),
 };

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.tsx

@@ -1,7 +1,7 @@
 import { Children, useEffect, useMemo } from 'react';
 import { defineMessages, FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
 import c from 'classnames';
-import { ProductType, OrderState, Product, CredentialOrder } from 'types/Joanie';
+import { ProductType, Product, CredentialOrder, PURCHASABLE_ORDER_STATES } from 'types/Joanie';
 import { useCourseProduct } from 'hooks/useCourseProducts';
 import { Spinner } from 'components/Spinner';
 import { Icon, IconTypeEnum } from 'components/Icon';
@@ -11,7 +11,6 @@ import { ProductHelper } from 'utils/ProductHelper';
 import useProductOrder from 'hooks/useProductOrder';
 import { OrderHelper } from 'utils/OrderHelper';
 import { handle } from 'utils/errors/handle';
-import { ProductSignatureHeader } from 'widgets/SyllabusCourseRunsList/components/CourseProductItem/components/ProductSignatureHeader';
 import { PacedCourse } from 'types';
 import CertificateItem from './components/CourseProductCertificateItem';
 import CourseRunItem from './components/CourseRunItem';
@@ -23,12 +22,6 @@ const messages = defineMessages({
     description: 'Message displayed when authenticated user owned the product',
     id: 'components.CourseProductItem.purchased',
   },
-  pending: {
-    defaultMessage: 'Pending',
-    description:
-      'Message displayed when authenticated user has purchased the product but order is still pending',
-    id: 'components.CourseProductItem.pending',
-  },
   loading: {
     defaultMessage: 'Loading product information...',
     description:
@@ -64,10 +57,10 @@ const Header = ({ product, order, hasPurchased, canPurchase, compact }: HeaderPr
   const intl = useIntl();
   const formatDate = useDateFormat();
 
-  // compact mode is available for product until they got a VALIDATED order.
+  // compact mode is available for product until they got an active order.
   const canShowMetadata = useMemo(() => {
-    return compact && (!order || [OrderState.SUBMITTED, OrderState.PENDING].includes(order!.state));
-  }, [compact, hasPurchased]);
+    return compact && (!order || canPurchase);
+  }, [compact, hasPurchased, canPurchase]);
 
   const [minDate, maxDate] = useMemo(() => {
     if (!canShowMetadata) return [undefined, undefined];
@@ -84,8 +77,7 @@ const Header = ({ product, order, hasPurchased, canPurchase, compact }: HeaderPr
       <div className="product-widget__header-main">
         <h3 className="product-widget__title">{product.title}</h3>
         <strong className="product-widget__price h6">
-          {order?.state === OrderState.VALIDATED && <FormattedMessage {...messages.purchased} />}
-          {order?.state === OrderState.SUBMITTED && <FormattedMessage {...messages.pending} />}
+          {hasPurchased && <FormattedMessage {...messages.purchased} />}
           {canPurchase && (
             <FormattedNumber
               currency={product.price_currency}
@@ -123,9 +115,6 @@ const Header = ({ product, order, hasPurchased, canPurchase, compact }: HeaderPr
   );
 };
 const Content = ({ product, order }: { product: Product; order?: CredentialOrder }) => {
-  const needsSignature = order
-    ? OrderHelper.orderNeedsSignature(order, product.contract_definition)
-    : false;
   const targetCourses = useMemo(() => {
     if (order) {
       return order.target_courses;
@@ -140,10 +129,9 @@ const Content = ({ product, order }: { product: Product; order?: CredentialOrder
 
   return (
     <ol className="product-widget__content">
-      {needsSignature && <ProductSignatureHeader order={order} />}
       {Children.toArray(
         targetCourses.map((target_course) => (
-          <CourseRunItem targetCourse={target_course} order={order} product={product} />
+          <CourseRunItem targetCourse={target_course} order={order} />
         )),
       )}
       {product.certificate_definition && (
@@ -168,12 +156,13 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
   });
 
   const order = productOrder as CredentialOrder;
-  const canPurchase = !order || order.state === OrderState.PENDING;
-  const hasPurchased = (order && order.state === OrderState.VALIDATED) ?? false;
+  const canPurchase = !order || PURCHASABLE_ORDER_STATES.includes(order.state);
+  const hasPurchased = OrderHelper.isActive(order);
+  const canEnroll = OrderHelper.allowEnrollment(order);
 
   const hasError = Boolean(productQueryStates.error);
   const isFetching = productQueryStates.fetching || orderQueryStates.fetching;
-  const canShowContent = !compact || hasPurchased;
+  const canShowContent = !compact || canEnroll;
 
   useEffect(() => {
     if (product && product.type !== ProductType.CREDENTIAL) {

package/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/index.joanie.spec.tsx

@@ -2,12 +2,12 @@ import { act, fireEvent, screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 
 import { faker } from '@faker-js/faker';
-import { Deferred } from 'utils/test/deferred';
-import { EnrollmentFactory as JoanieEnrollment } from 'utils/test/factories/joanie';
 import {
   CourseRunFactory,
   RichieContextFactory as mockRichieContextFactory,
 } from 'utils/test/factories/richie';
+import { Deferred } from 'utils/test/deferred';
+import { EnrollmentFactory as JoanieEnrollment } from 'utils/test/factories/joanie';
 import { HttpStatusCode } from 'utils/errors/HttpError';
 import { Priority } from 'types';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.28.2-dev39",
+  "version": "2.28.2-dev58",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -38,10 +38,10 @@
     "not dead"
   ],
   "dependencies": {
-    "@babel/core": "7.24.9",
+    "@babel/core": "7.25.2",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-transform-modules-commonjs": "7.24.8",
-    "@babel/preset-env": "7.25.0",
+    "@babel/preset-env": "7.25.3",
     "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
     "@faker-js/faker": "8.4.1",
@@ -51,20 +51,20 @@
     "@lyracom/embedded-form-glue": "1.4.2",
     "@openfun/cunningham-react": "2.9.3",
     "@openfun/cunningham-tokens": "2.1.1",
-    "@sentry/browser": "8.20.0",
-    "@sentry/types": "8.20.0",
-    "@storybook/addon-actions": "8.2.6",
-    "@storybook/addon-essentials": "8.2.6",
-    "@storybook/addon-interactions": "8.2.6",
-    "@storybook/addon-links": "8.2.6",
-    "@storybook/react": "8.2.6",
-    "@storybook/react-webpack5": "8.2.6",
-    "@storybook/test": "8.2.6",
-    "@tanstack/query-core": "5.51.15",
-    "@tanstack/query-sync-storage-persister": "5.51.15",
-    "@tanstack/react-query": "5.51.15",
-    "@tanstack/react-query-devtools": "5.51.5",
-    "@tanstack/react-query-persist-client": "5.51.15",
+    "@sentry/browser": "8.25.0",
+    "@sentry/types": "8.25.0",
+    "@storybook/addon-actions": "8.2.8",
+    "@storybook/addon-essentials": "8.2.8",
+    "@storybook/addon-interactions": "8.2.8",
+    "@storybook/addon-links": "8.2.8",
+    "@storybook/react": "8.2.8",
+    "@storybook/react-webpack5": "8.2.8",
+    "@storybook/test": "8.2.8",
+    "@tanstack/query-core": "5.51.21",
+    "@tanstack/query-sync-storage-persister": "5.51.21",
+    "@tanstack/react-query": "5.51.23",
+    "@tanstack/react-query-devtools": "5.51.23",
+    "@tanstack/react-query-persist-client": "5.51.23",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.4.8",
     "@testing-library/react": "16.0.0",
@@ -81,16 +81,16 @@
     "@types/react-dom": "18.3.0",
     "@types/react-modal": "3.16.3",
     "@types/uuid": "10.0.0",
-    "@typescript-eslint/eslint-plugin": "7.17.0",
-    "@typescript-eslint/parser": "7.17.0",
+    "@typescript-eslint/eslint-plugin": "8.0.1",
+    "@typescript-eslint/parser": "8.0.1",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-react-intl": "8.2.25",
     "bootstrap": ">=4.6.0 <5",
     "classnames": "2.5.1",
     "cljs-merge": "1.1.1",
-    "core-js": "3.37.1",
-    "downshift": "9.0.7",
+    "core-js": "3.38.0",
+    "downshift": "9.0.8",
     "eslint": ">=8.57.0 <9",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "18.0.0",
@@ -108,14 +108,14 @@
     "file-loader": "6.2.0",
     "glob": "11.0.0",
     "i18n-iso-countries": "7.11.3",
-    "iframe-resizer": "4.4.5",
+    "iframe-resizer": "<5",
     "intl-pluralrules": "2.0.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
-    "msw": "2.3.4",
+    "msw": "2.3.5",
     "node-fetch": ">2.6.6 <3",
     "nodemon": "3.1.4",
     "prettier": "3.3.3",
@@ -123,13 +123,13 @@
     "react": "18.3.1",
     "react-autosuggest": "10.1.0",
     "react-dom": "18.3.1",
-    "react-hook-form": "7.52.1",
+    "react-hook-form": "7.52.2",
     "react-intl": "6.6.8",
     "react-modal": "3.16.1",
-    "react-router-dom": "6.25.1",
+    "react-router-dom": "6.26.0",
     "sass": "1.77.8",
     "source-map-loader": "5.0.0",
-    "storybook": "8.2.6",
+    "storybook": "8.2.8",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "5.5.4",
     "uuid": "10.0.0",
@@ -152,7 +152,7 @@
     "node": "20.11.0"
   },
   "devDependencies": {
-    "@storybook/addon-mdx-gfm": "8.2.6",
+    "@storybook/addon-mdx-gfm": "8.2.8",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3"
   }
 }

package/scss/components/_index.scss

@@ -4,13 +4,14 @@
 @import '../../js/components/Tabs/styles';
 @import '../../js/components/TeacherDashboardCourseList/styles';
 @import '../../js/components/Modal/styles';
-@import '../../js/components/PaymentButton/styles';
+@import '../../js/components/SaleTunnel/SubscriptionButton/styles';
 @import '../../js/components/PaymentScheduleGrid/styles';
 @import '../../js/components/PurchaseButton/styles';
 @import '../../js/components/SaleTunnel/styles';
 @import '../../js/components/SaleTunnel/AddressSelector/styles';
 @import '../../js/components/SaleTunnel/ProductPath/styles';
 @import '../../js/components/SaleTunnel/Sponsors/SaleTunnelSponsors';
+@import '../../js/components/SaleTunnel/SaleTunnelSavePaymentMethod/styles';
 @import '../../js/components/SuccessIcon/styles';
 @import '../../js/components/WarningIcon/styles';
 @import '../../js/components/RegisteredAddress/styles';

package/js/components/PaymentButton/_styles.scss

@@ -1,27 +0,0 @@
-.payment-button {
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  &__error {
-    color: r-color('firebrick6');
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-  }
-
-  &__terms {
-    button {
-      color: $link-color;
-      text-decoration: underline;
-      background-color: transparent;
-      border: none;
-      padding: 0;
-
-      &:hover {
-        color: $link-hover-color;
-      }
-    }
-  }
-}

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

@@ -1,333 +0,0 @@
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Button } from '@openfun/cunningham-react';
-import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
-import { useOrders } from 'hooks/useOrders';
-import { OrderCreationPayload, OrderState } from 'types/Joanie';
-import type { Maybe } from 'types/utils';
-import { useTerms } from 'components/SaleTunnel/hooks/useTerms';
-import WebAnalyticsAPIHandler from 'api/web-analytics';
-import { CourseProductEvent } from 'types/web-analytics';
-import { ObjectHelper } from 'utils/ObjectHelper';
-import { HttpError } from 'utils/errors/HttpError';
-import { PAYMENT_SETTINGS } from 'settings';
-import { Spinner } from 'components/Spinner';
-import PaymentInterface from 'components/PaymentInterfaces';
-import { useMatchMediaLg } from 'hooks/useMatchMedia';
-import { PaymentErrorMessageId, Payment, PaymentWithId } from 'components/PaymentInterfaces/types';
-
-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: 'Subscribe',
-    description: 'CTA label to proceed to the payment of the product',
-    id: 'components.PaymentButton.pay',
-  },
-  paymentInProgress: {
-    defaultMessage: 'Payment in progress',
-    description: 'Label for screen reader when a payment is in progress.',
-    id: 'components.PaymentButton.paymentInProgress',
-  },
-});
-
-type PaymentInfo = Payment & { order_id: string };
-
-enum ComponentStates {
-  IDLE = 'idle',
-  LOADING = 'loading',
-  ERROR = 'error',
-}
-
-interface Props {
-  buildOrderPayload: (
-    payload: Pick<OrderCreationPayload, 'product_id' | 'has_consent_to_terms'>,
-  ) => OrderCreationPayload;
-}
-
-export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
-  const intl = useIntl();
-  const API = useJoanieApi();
-  const timeoutRef = useRef<NodeJS.Timeout>();
-  const {
-    webAnalyticsEventKey,
-    order,
-    billingAddress,
-    creditCard,
-    product,
-    onPaymentSuccess,
-    props: saleTunnelProps,
-    runSubmitCallbacks,
-  } = useSaleTunnelContext();
-  const { methods: orderMethods } = useOrders(undefined, { enabled: false });
-  const [payment, setPayment] = useState<PaymentInfo>();
-  const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
-  const [error, setError] = useState<PaymentErrorMessageId | string>();
-  const hasPaymentId = (p: Maybe<Payment>): p is Extract<Payment, PaymentWithId> => {
-    return Boolean(p?.hasOwnProperty('payment_id'));
-  };
-  const paymentId = hasPaymentId(payment) ? payment.payment_id : undefined;
-  const isMobile = useMatchMediaLg();
-
-  // This pattern is ugly but I couldn't find a better way to achieve it in a nicer way.
-  // Without this, when we call onPaymentSuccess() directly from the after polling function,
-  // it is not the latest version of the function, so the value of `order` inside the context function (defined in GenericSaleTunnel.tsx)
-  // will be undefined, then calling onFinish(order) with an undefined order.
-  const onPaymentSuccessRef = useRef(onPaymentSuccess);
-  onPaymentSuccessRef.current = onPaymentSuccess;
-
-  const { validateTerms, termsAccepted, renderTermsCheckbox } = useTerms({
-    product,
-    error,
-    onError: (e) => {
-      handleError(e);
-    },
-  });
-
-  const isReadyToPay = useMemo(() => {
-    return (
-      (saleTunnelProps.course || saleTunnelProps.enrollment) &&
-      product &&
-      billingAddress &&
-      termsAccepted
-    );
-  }, [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
-   *
-   * @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,
-      webAnalyticsEventKey,
-    );
-
-    if (!billingAddress) {
-      handleError(PaymentErrorMessageId.ERROR_ADDRESS);
-    }
-
-    validateTerms();
-
-    if (isReadyToPay) {
-      setState(ComponentStates.LOADING);
-      setError(undefined);
-
-      if (!payment) {
-        const billingAddressPayload = ObjectHelper.omit(billingAddress!, 'id', 'is_main');
-
-        orderMethods.submit(
-          {
-            id: orderId,
-            billing_address: billingAddressPayload,
-            ...(creditCard && { credit_card_id: creditCard.id }),
-          },
-          {
-            onSuccess: (orderPayment) => {
-              const 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) {
-                  handleError(PaymentErrorMessageId.ERROR_FULL_PRODUCT);
-                }
-              }
-              handleError();
-            },
-          },
-        );
-      }
-    }
-  };
-
-  const createOrder = async () => {
-    setState(ComponentStates.LOADING);
-
-    try {
-      await runSubmitCallbacks();
-    } catch (e) {
-      // Example: full name failed saving to OpenEDX.
-      setState(ComponentStates.IDLE);
-      return;
-    }
-
-    if (!billingAddress) {
-      handleError(PaymentErrorMessageId.ERROR_ADDRESS);
-    }
-
-    validateTerms();
-
-    if (!isReadyToPay) {
-      return;
-    }
-
-    if (order) {
-      createPayment(order.id);
-    } else {
-      const payload = buildOrderPayload({
-        product_id: product.id,
-        has_consent_to_terms: termsAccepted,
-      });
-      orderMethods.create(payload, {
-        onSuccess: (newOrder) => {
-          createPayment(newOrder.id);
-        },
-        onError: async () => {
-          handleError();
-        },
-      });
-    }
-  };
-
-  const handleSuccess = () => {
-    let round = 0;
-
-    const checkOrderValidity = async () => {
-      if (round >= PAYMENT_SETTINGS.pollLimit) {
-        timeoutRef.current = undefined;
-        onPaymentSuccessRef.current(false);
-      } else {
-        const isValidated = await isOrderValidated(payment!.order_id);
-        if (isValidated) {
-          setState(ComponentStates.IDLE);
-          timeoutRef.current = undefined;
-          onPaymentSuccessRef.current();
-        } else {
-          round++;
-          timeoutRef.current = setTimeout(checkOrderValidity, PAYMENT_SETTINGS.pollInterval);
-        }
-      }
-    };
-
-    checkOrderValidity();
-  };
-
-  const handleError = (
-    messageId: PaymentErrorMessageId | string = PaymentErrorMessageId.ERROR_DEFAULT,
-  ) => {
-    setState(ComponentStates.ERROR);
-    setError(messageId);
-  };
-
-  useEffect(() => {
-    if (error === PaymentErrorMessageId.ERROR_ABORTING) {
-      orderMethods
-        .abort({
-          id: payment!.order_id,
-          payment_id: paymentId,
-        })
-        .then(() => {
-          handleError(PaymentErrorMessageId.ERROR_ABORT);
-        })
-        .catch(() => {
-          handleError();
-        });
-    } else if (error && !messages.hasOwnProperty(error)) {
-      orderMethods.invalidate();
-    } else if (state === ComponentStates.ERROR) {
-      setPayment(undefined);
-    }
-  }, [error]);
-
-  useEffect(() => {
-    if (state === ComponentStates.ERROR) {
-      document.querySelector<HTMLElement>('#sale-tunnel-payment-error')?.focus();
-    }
-  }, [state]);
-
-  return (
-    <>
-      {renderTermsCheckbox()}
-      <Button
-        disabled={isBusy}
-        onClick={createOrder}
-        data-testid={order && 'payment-button-order-loaded'}
-        fullWidth={isMobile}
-        {...(state === ComponentStates.ERROR && {
-          'aria-describedby': 'sale-tunnel-payment-error',
-        })}
-      >
-        {isBusy ? (
-          <Spinner theme="light" aria-labelledby="payment-in-progress">
-            <span id="payment-in-progress">
-              <FormattedMessage {...messages.paymentInProgress} />
-            </span>
-          </Spinner>
-        ) : (
-          <FormattedMessage
-            {...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} />
-      )}
-      {state === ComponentStates.ERROR && (
-        <p className="payment-button__error" id="sale-tunnel-payment-error" tabIndex={-1}>
-          {!error || messages.hasOwnProperty(error) ? (
-            <FormattedMessage
-              {...messages[(error as PaymentErrorMessageId) || PaymentErrorMessageId.ERROR_DEFAULT]}
-            />
-          ) : (
-            error
-          )}
-        </p>
-      )}
-    </>
-  );
-};