richie-education 2.28.2-dev39 → 2.28.2-dev58

package/js/components/PaymentInterfaces/__mocks__/index.tsx

@@ -9,10 +9,7 @@ const PaymentInterface = ({ onError, onSuccess }: PaymentInterfaceProps) => (
     >
       Simulate payment failure
     </button>
-    <button
-      data-testid="payment-abort"
-      onClick={() => onError(PaymentErrorMessageId.ERROR_ABORTING)}
-    >
+    <button data-testid="payment-abort" onClick={() => onError(PaymentErrorMessageId.ERROR_ABORT)}>
       Simulate payment abort
     </button>
     <button data-testid="payment-success" onClick={onSuccess}>

package/js/components/PaymentInterfaces/types.ts

@@ -1,10 +1,13 @@
 export enum PaymentErrorMessageId {
   ERROR_ABORT = 'errorAbort',
-  ERROR_ABORTING = 'errorAborting',
+  ERROR_DEFAULT = 'errorDefault',
+}
+
+export enum SubscriptionErrorMessageId {
+  ERROR_ABORT = 'errorAbort',
   ERROR_ADDRESS = 'errorAddress',
   ERROR_DEFAULT = 'errorDefault',
   ERROR_FULL_PRODUCT = 'errorFullProduct',
-  ERROR_TERMS = 'errorTerms',
 }
 
 export enum PaymentProviders {

package/js/components/PurchaseButton/index.spec.tsx

@@ -4,6 +4,7 @@ import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import userEvent from '@testing-library/user-event';
 import { CunninghamProvider } from '@openfun/cunningham-react';
+import queryString from 'query-string';
 import {
   CourseStateFactory,
   PacedCourseFactory,
@@ -17,7 +18,7 @@ import {
 } from 'utils/test/factories/joanie';
 import { SessionProvider } from 'contexts/SessionContext';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { ProductType } from 'types/Joanie';
+import { NOT_CANCELED_ORDER_STATES, ProductType } from 'types/Joanie';
 import { Priority } from 'types';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { User } from 'types/User';
@@ -102,11 +103,14 @@ describe('PurchaseButton', () => {
   it('shows cta to open sale tunnel when user is authenticated', async () => {
     const courseCode = '00000';
     const product = ProductFactory().one();
+    const orderQueryParameters = {
+      course_code: courseCode,
+      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=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      )
+      .get(url, {})
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
         [],
@@ -142,11 +146,14 @@ describe('PurchaseButton', () => {
     const product = ProductFactory({ remaining_order_count: null }).one();
     fetchMock.get(`https://demo.endpoint/api/user/v1/accounts/${user.username}`, {});
     fetchMock.get(`https://demo.endpoint/api/user/v1/preferences/${user.username}`, {});
+    const orderQueryParameters = {
+      course_code: courseCode,
+      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=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      )
+      .get(url, {})
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
         [],
@@ -180,11 +187,14 @@ describe('PurchaseButton', () => {
   it('shows cta to open sale tunnel when remaining orders is undefined', async () => {
     const courseCode = '00000';
     const product = ProductFactory().one();
+    const orderQueryParameters = {
+      course_code: courseCode,
+      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=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      )
+      .get(url, {})
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
         [],
@@ -220,10 +230,13 @@ describe('PurchaseButton', () => {
   it('renders a disabled CTA if the product have no remaining orders', async () => {
     const courseCode = '00000';
     const product = ProductFactory({ remaining_order_count: 0 }).one();
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-      {},
-    );
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+    fetchMock.get(url, {});
     render(
       <Wrapper client={createTestQueryClient({ user: richieUser })}>
         <PurchaseButton
@@ -256,10 +269,14 @@ describe('PurchaseButton', () => {
       const courseCode = '00000';
       const product = ProductFactory({ ...productData, type: ProductType.CREDENTIAL }).one();
       product.target_courses[0].course_runs = [];
-      fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      );
+
+      const orderQueryParameters = {
+        course_code: courseCode,
+        product_id: product.id,
+        state: NOT_CANCELED_ORDER_STATES,
+      };
+      const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+      fetchMock.get(url, {});
 
       render(
         <Wrapper client={createTestQueryClient({ user: richieUser })}>
@@ -305,10 +322,14 @@ describe('PurchaseButton', () => {
       const product = CertificateProductFactory().one();
       const enrollment = EnrollmentFactory().one();
       enrollment.course_run.state = CourseStateFactory(courseRunStateData).one();
-      fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/orders/?enrollment_id=${enrollment.id}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      );
+
+      const orderQueryParameters = {
+        enrollment_id: enrollment.id,
+        product_id: product.id,
+        state: NOT_CANCELED_ORDER_STATES,
+      };
+      const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+      fetchMock.get(url, {});
 
       render(
         <Wrapper client={createTestQueryClient({ user: true })}>
@@ -359,10 +380,13 @@ describe('PurchaseButton', () => {
       const enrollment = EnrollmentFactory().one();
       enrollment.course_run.state = CourseStateFactory(courseRunStateData).one();
 
-      fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/orders/?enrollment_id=${enrollment.id}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        {},
-      );
+      const orderQueryParameters = {
+        enrollment_id: enrollment.id,
+        product_id: product.id,
+        state: NOT_CANCELED_ORDER_STATES,
+      };
+      const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+      fetchMock.get(url, {});
 
       render(
         <Wrapper client={createTestQueryClient({ user: true })}>
@@ -388,10 +412,14 @@ describe('PurchaseButton', () => {
   it('renders a disabled CTA if product has no target courses', async () => {
     const courseCode = '00000';
     const product = ProductFactory().one();
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-      {},
-    );
+
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+    fetchMock.get(url, {});
     product.target_courses = [];
 
     render(
@@ -419,10 +447,14 @@ describe('PurchaseButton', () => {
   it('does not render CTA if disabled property is false', async () => {
     const courseCode = '00000';
     const product = ProductFactory().one();
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-      {},
-    );
+
+    const orderQueryParameters = {
+      course_code: courseCode,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
+    fetchMock.get(url, {});
 
     render(
       <Wrapper client={createTestQueryClient({ user: true })}>

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

@@ -59,10 +59,11 @@ describe('AddressSelector', () => {
           setBillingAddress,
           setCreditCard: jest.fn(),
           onPaymentSuccess: jest.fn(),
-          step: SaleTunnelStep.PAYMENT,
+          step: SaleTunnelStep.IDLE,
           registerSubmitCallback: jest.fn(),
           unregisterSubmitCallback: jest.fn(),
           runSubmitCallbacks: jest.fn(),
+          nextStep: jest.fn(),
         }),
         [billingAddress],
       );

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

@@ -1,8 +1,8 @@
 import { SaleTunnelProps } from 'components/SaleTunnel/index';
 import { CertificateProduct } from 'types/Joanie';
 import { GenericSaleTunnel } from 'components/SaleTunnel/GenericSaleTunnel';
-import { GenericPaymentButton } from 'components/SaleTunnel/GenericPaymentButton';
 import { CertificateProductPath } from 'components/SaleTunnel/CertificateSaleTunnel/CertificateProductPath';
+import SubscriptionButton from 'components/SaleTunnel/SubscriptionButton';
 
 interface CertificateSaleTunnelProps extends Omit<SaleTunnelProps, 'product'> {
   product: CertificateProduct;
@@ -23,7 +23,7 @@ const CertificatePaymentButton = ({
   enrollment,
 }: Pick<CertificateSaleTunnelProps, 'enrollment'>) => {
   return (
-    <GenericPaymentButton
+    <SubscriptionButton
       buildOrderPayload={(payload) => {
         return {
           ...payload,

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

@@ -1,8 +1,8 @@
 import { CredentialProduct } from 'types/Joanie';
 import { GenericSaleTunnel } from 'components/SaleTunnel/GenericSaleTunnel';
 import { SaleTunnelProps } from 'components/SaleTunnel/index';
-import { GenericPaymentButton } from 'components/SaleTunnel/GenericPaymentButton';
 import { CredentialProductPath } from 'components/SaleTunnel/CredentialSaleTunnel/CredentialProductPath';
+import SubscriptionButton from 'components/SaleTunnel/SubscriptionButton';
 
 interface CredentialSaleTunnelProps extends Omit<SaleTunnelProps, 'product'> {
   product: CredentialProduct;
@@ -21,17 +21,13 @@ export const CredentialSaleTunnel = (props: CredentialSaleTunnelProps) => {
 
 const CredentialPaymentButton = ({
   course,
-  orderGroup,
 }: Pick<CredentialSaleTunnelProps, 'course' | 'orderGroup'>) => {
   return (
-    <GenericPaymentButton
-      buildOrderPayload={(payload) => {
-        return {
-          ...payload,
-          course_code: course!.code,
-          ...(orderGroup ? { order_group_id: orderGroup.id } : {}),
-        };
-      }}
+    <SubscriptionButton
+      buildOrderPayload={(payload) => ({
+        ...payload,
+        course_code: course!.code,
+      })}
     />
   );
 };

package/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -1,9 +1,16 @@
-import { Alert, Modal, ModalSize, VariantType } from '@openfun/cunningham-react';
-import { createContext, ReactNode, useContext, useEffect, useMemo, useState } from 'react';
-import { FormattedMessage, defineMessages } from 'react-intl';
+import { Modal, ModalSize } from '@openfun/cunningham-react';
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+} from 'react';
 import { SaleTunnelSponsors } from 'components/SaleTunnel/Sponsors/SaleTunnelSponsors';
 import { SaleTunnelProps } from 'components/SaleTunnel/index';
-import { Address, CreditCard, Order, Product } from 'types/Joanie';
+import { Address, CreditCard, Order, OrderState, Product } from 'types/Joanie';
 import useProductOrder from 'hooks/useProductOrder';
 import { SaleTunnelSuccess } from 'components/SaleTunnel/SaleTunnelSuccess';
 import WebAnalyticsAPIHandler from 'api/web-analytics';
@@ -11,16 +18,8 @@ import { CourseProductEvent } from 'types/web-analytics';
 import { useOmniscientOrders, useOrders } from 'hooks/useOrders';
 import { SaleTunnelInformation } from 'components/SaleTunnel/SaleTunnelInformation';
 import { useEnrollments } from 'hooks/useEnrollments';
-import SaleTunnelNotValidated from './SaleTunnelNotValidated';
-
-const messages = defineMessages({
-  walkthrough: {
-    id: 'components.SaleTunnel.GenericSaleTunnel.walkthrough',
-    defaultMessage:
-      'To enroll in the training, you will first be invited to sign the training agreement and then to define a payment method. You will not be charged during this step; the first payment will take place on the date mentioned in the payment schedule above.',
-    description: 'Message explaining the credential sale tunnel process',
-  },
-});
+import SaleTunnelSavePaymentMethod from 'components/SaleTunnel/SaleTunnelSavePaymentMethod';
+import { LearnerContractFrame } from 'components/ContractFrame';
 
 export interface SaleTunnelContextType {
   props: SaleTunnelProps;
@@ -29,7 +28,7 @@ export interface SaleTunnelContextType {
   webAnalyticsEventKey: string;
 
   // internal
-  onPaymentSuccess: (validated?: boolean) => void;
+  onPaymentSuccess: () => void;
   step: SaleTunnelStep;
 
   // meta
@@ -40,6 +39,7 @@ export interface SaleTunnelContextType {
   registerSubmitCallback: (key: string, callback: () => Promise<void>) => void;
   unregisterSubmitCallback: (key: string) => void;
   runSubmitCallbacks: () => Promise<void>;
+  nextStep: () => void;
 }
 
 export const SaleTunnelContext = createContext<SaleTunnelContextType>({} as any);
@@ -55,9 +55,10 @@ export const useSaleTunnelContext = () => {
 };
 
 export enum SaleTunnelStep {
-  PAYMENT,
+  IDLE,
+  SIGN,
+  SAVE_PAYMENT,
   SUCCESS,
-  NOT_VALIDATED,
 }
 
 interface GenericSaleTunnelProps extends SaleTunnelProps {
@@ -86,11 +87,35 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
   } = useEnrollments(undefined, { enabled: false });
   const [billingAddress, setBillingAddress] = useState<Address>();
   const [creditCard, setCreditCard] = useState<CreditCard>();
-  const [step, setStep] = useState<SaleTunnelStep>(SaleTunnelStep.PAYMENT);
+  const [step, setStep] = useState<SaleTunnelStep>(SaleTunnelStep.IDLE);
   const [submitCallbacks, setSubmitCallbacks] = useState<Map<string, () => Promise<void>>>(
     new Map(),
   );
 
+  const nextStep = useCallback(() => {
+    if (order)
+      switch (step) {
+        case SaleTunnelStep.IDLE:
+          if ([OrderState.TO_SIGN, OrderState.SIGNING].includes(order.state)) {
+            setStep(SaleTunnelStep.SIGN);
+          } else if (order.state === OrderState.TO_SAVE_PAYMENT_METHOD) {
+            setStep(SaleTunnelStep.SAVE_PAYMENT);
+          }
+          break;
+        case SaleTunnelStep.SIGN:
+          if (order.state === OrderState.TO_SAVE_PAYMENT_METHOD) {
+            setStep(SaleTunnelStep.SAVE_PAYMENT);
+          }
+          if (order.state === OrderState.COMPLETED) {
+            setStep(SaleTunnelStep.SUCCESS);
+          }
+          break;
+        case SaleTunnelStep.SAVE_PAYMENT:
+          setStep(SaleTunnelStep.SUCCESS);
+          break;
+      }
+  }, [order, step]);
+
   const context: SaleTunnelContextType = useMemo(
     () => ({
       webAnalyticsEventKey: props.eventKey,
@@ -101,12 +126,9 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       setBillingAddress,
       creditCard,
       setCreditCard,
-      onPaymentSuccess: (validated: boolean = true) => {
-        if (validated) {
-          setStep(SaleTunnelStep.SUCCESS);
-        } else {
-          setStep(SaleTunnelStep.NOT_VALIDATED);
-        }
+      nextStep,
+      onPaymentSuccess: () => {
+        nextStep();
         WebAnalyticsAPIHandler()?.sendCourseProductEvent(
           CourseProductEvent.PAYMENT_SUCCEED,
           props.eventKey,
@@ -154,13 +176,16 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
 
 export const GenericSaleTunnelInner = (props: GenericSaleTunnelProps) => {
   const { step } = useSaleTunnelContext();
+
   switch (step) {
-    case SaleTunnelStep.PAYMENT:
-      return <GenericSaleTunnelPaymentStep {...props} />;
+    case SaleTunnelStep.IDLE:
+      return <GenericSaleTunnelInitialStep {...props} />;
+    case SaleTunnelStep.SIGN:
+      return <GenericSaleTunnelSignStep {...props} />;
+    case SaleTunnelStep.SAVE_PAYMENT:
+      return <GenericSaleTunnelSavePaymentMethodStep {...props} />;
     case SaleTunnelStep.SUCCESS:
       return <GenericSaleTunnelSuccessStep {...props} />;
-    case SaleTunnelStep.NOT_VALIDATED:
-      return <GenericSaleTunnelNotValidatedStep {...props} />;
   }
   throw new Error('Invalid step: ' + step);
 };
@@ -169,7 +194,7 @@ export const GenericSaleTunnelInner = (props: GenericSaleTunnelProps) => {
  * Steps.
  */
 
-export const GenericSaleTunnelPaymentStep = (props: GenericSaleTunnelProps) => {
+export const GenericSaleTunnelInitialStep = (props: GenericSaleTunnelProps) => {
   const { webAnalyticsEventKey } = useSaleTunnelContext();
 
   useEffect(() => {
@@ -184,7 +209,7 @@ export const GenericSaleTunnelPaymentStep = (props: GenericSaleTunnelProps) => {
   }, []);
 
   return (
-    <Modal {...props} size={ModalSize.EXTRA_LARGE} title={props.product.title} closeOnEsc={false}>
+    <Modal {...props} size={ModalSize.EXTRA_LARGE} title={props.product.title}>
       <div className="sale-tunnel" data-testid="generic-sale-tunnel-payment-step">
         <div className="sale-tunnel__main">
           <div className="sale-tunnel__main__column sale-tunnel__main__left ">
@@ -198,14 +223,7 @@ export const GenericSaleTunnelPaymentStep = (props: GenericSaleTunnelProps) => {
             <SaleTunnelInformation />
           </div>
         </div>
-        <div className="sale-tunnel__footer">
-          <div style={{ maxWidth: '680px' }} className="mb-s" data-testid="walkthrough-banner">
-            <Alert type={VariantType.INFO}>
-              <FormattedMessage {...messages.walkthrough} />
-            </Alert>
-          </div>
-          {props.paymentNode}
-        </div>
+        <div className="sale-tunnel__footer">{props.paymentNode}</div>
       </div>
     </Modal>
   );
@@ -219,10 +237,26 @@ export const GenericSaleTunnelSuccessStep = (props: SaleTunnelProps) => {
   );
 };
 
-export const GenericSaleTunnelNotValidatedStep = (props: SaleTunnelProps) => {
+export const GenericSaleTunnelSavePaymentMethodStep = (props: SaleTunnelProps) => {
   return (
-    <Modal {...props} size={ModalSize.MEDIUM}>
-      <SaleTunnelNotValidated closeModal={props.onClose} />
+    <Modal {...props} size={ModalSize.LARGE}>
+      <SaleTunnelSavePaymentMethod />
     </Modal>
   );
 };
+
+export const GenericSaleTunnelSignStep = ({ isOpen, onClose }: SaleTunnelProps) => {
+  const { order, nextStep } = useSaleTunnelContext();
+
+  const handleDone = useCallback(nextStep, [order]);
+
+  useEffect(() => {
+    if (![OrderState.TO_SIGN, OrderState.SIGNING].includes(order!.state)) {
+      nextStep();
+    }
+  }, [order]);
+
+  return (
+    <LearnerContractFrame order={order!} isOpen={isOpen} onClose={onClose} onDone={handleDone} />
+  );
+};

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

@@ -1,6 +1,5 @@
 import { defineMessages, FormattedMessage, FormattedNumber } from 'react-intl';
 import { AddressSelector } from 'components/SaleTunnel/AddressSelector';
-import { CreditCardSelector } from 'components/CreditCardSelector';
 import { PaymentScheduleGrid } from 'components/PaymentScheduleGrid';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 import OpenEdxFullNameForm from 'components/OpenEdxFullNameForm';
@@ -25,16 +24,6 @@ const messages = defineMessages({
     description: 'Label for the full name input',
     defaultMessage: 'Full name',
   },
-  paymentMethodTitle: {
-    id: 'components.SaleTunnel.CreditCardSelector.title',
-    description: 'Title for the credit card section',
-    defaultMessage: 'Payment method',
-  },
-  paymentMethodDescription: {
-    id: 'components.SaleTunnel.CreditCardSelector.description',
-    description: 'Description for the credit card section',
-    defaultMessage: 'Choose your payment method or add a new one during the payment.',
-  },
   totalInfo: {
     id: 'components.SaleTunnel.Information.total.info',
     description: 'Information about the total amount',
@@ -74,9 +63,6 @@ export const SaleTunnelInformation = () => {
           <Email />
         </div>
       </div>
-      <div>
-        <CreditCardSelectorWrapper />
-      </div>
       <div>
         <PaymentScheduleBlock />
         <Total />
@@ -84,22 +70,6 @@ export const SaleTunnelInformation = () => {
     </div>
   );
 };
-
-const CreditCardSelectorWrapper = () => {
-  const { creditCard, setCreditCard } = useSaleTunnelContext();
-  return (
-    <>
-      <h4 className="block-title mb-t">
-        <FormattedMessage {...messages.paymentMethodTitle} />
-      </h4>
-      <div className="description mb-s">
-        <FormattedMessage {...messages.paymentMethodDescription} />
-      </div>
-      <CreditCardSelector creditCard={creditCard} setCreditCard={setCreditCard} />
-    </>
-  );
-};
-
 const Email = () => {
   const { user } = useSession();
   const { data: openEdxProfileData } = useOpenEdxProfile({

package/js/components/SaleTunnel/SaleTunnelSavePaymentMethod/_styles.scss

@@ -0,0 +1,12 @@
+.sale-tunnel-step--save-payment-method {
+  .credit-card-selector {
+    display: inline-block;
+  }
+
+  .sale-tunnel-step__footer {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+  }
+}