richie-education 2.28.2-dev25 → 2.28.2-dev39

package/js/api/joanie.ts

@@ -15,7 +15,8 @@ import context from 'utils/context';
 import { JOANIE_API_VERSION } from 'settings';
 import { ResourcesQuery } from 'hooks/useResources';
 import { ObjectHelper } from 'utils/ObjectHelper';
-import { Maybe } from 'types/utils';
+import { Maybe, Nullable } from 'types/utils';
+import { PaymentSchedule } from 'types/Joanie';
 import { checkStatus, getFileFromResponse } from './utils';
 
 /*
@@ -97,6 +98,7 @@ export const getRoutes = () => {
           download: `${baseUrl}/orders/:id/invoice/`,
         },
         submit_for_signature: `${baseUrl}/orders/:id/submit_for_signature/`,
+        submit_installment_payment: `${baseUrl}/orders/:id/submit_installment_payment/`,
       },
       certificates: {
         download: `${baseUrl}/certificates/:id/download/`,
@@ -141,6 +143,9 @@ export const getRoutes = () => {
       },
       products: {
         get: `${baseUrl}/courses/:course_id/products/:id/`,
+        paymentSchedule: {
+          get: `${baseUrl}/courses/:course_id/products/:id/payment-schedule/`,
+        },
       },
       orders: {
         get: `${baseUrl}/courses/:course_id/orders/:id/`,
@@ -291,6 +296,11 @@ const API = (): Joanie.API => {
           fetchWithJWT(ROUTES.user.orders.submit_for_signature.replace(':id', id), {
             method: 'POST',
           }).then(checkStatus),
+        submit_installment_payment: async (id, payload) =>
+          fetchWithJWT(ROUTES.user.orders.submit_installment_payment.replace(':id', id), {
+            method: 'POST',
+            body: JSON.stringify(payload),
+          }).then(checkStatus),
       },
       enrollments: {
         create: async (payload) =>
@@ -418,6 +428,25 @@ const API = (): Joanie.API => {
 
           return fetchWithJWT(buildApiUrl(ROUTES.courses.products.get, filters)).then(checkStatus);
         },
+        paymentSchedule: {
+          get: async (
+            filters?: Joanie.CourseProductQueryFilters,
+          ): Promise<Nullable<PaymentSchedule>> => {
+            if (!filters) {
+              throw new Error(
+                'A course code and a product id are required to fetch a course product',
+              );
+            } else if (!filters.course_id) {
+              throw new Error('A course code is required to fetch a course product');
+            } else if (!filters.id) {
+              throw new Error('A product id is required to fetch a course product');
+            }
+
+            return fetchWithJWT(
+              buildApiUrl(ROUTES.courses.products.paymentSchedule.get, filters),
+            ).then(checkStatus);
+          },
+        },
       },
       orders: {
         get: async (filters?: Joanie.CourseOrderResourceQuery) => {

package/js/components/{SaleTunnel/CreditCardSelector → CreditCardSelector}/index.spec.tsx

@@ -1,21 +1,16 @@
 import { screen, within } from '@testing-library/react';
-import { useMemo, useState } from 'react';
+import { useState, useEffect } from 'react';
 import fetchMock from 'fetch-mock';
 import { faker } from '@faker-js/faker';
 import userEvent from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { CreditCardSelector } from 'components/SaleTunnel/CreditCardSelector/index';
 import { render } from 'utils/test/render';
 import { CreditCard } from 'types/Joanie';
-import {
-  CredentialOrderFactory,
-  CreditCardFactory,
-  ProductFactory,
-} from 'utils/test/factories/joanie';
-import { SaleTunnelProps } from 'components/SaleTunnel/index';
+import { CreditCardFactory } from 'utils/test/factories/joanie';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
-import { SaleTunnelStep, SaleTunnelContext, SaleTunnelContextType } from '../GenericSaleTunnel';
+import { SaleTunnelContextType } from 'components/SaleTunnel/GenericSaleTunnel';
+import { CreditCardSelector } from 'components/CreditCardSelector/index';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -43,30 +38,10 @@ describe('CreditCardSelector', () => {
 
     const Wrapper = () => {
       const [creditCard, setCreditCard] = useState<CreditCard>();
-      const context: SaleTunnelContextType = useMemo(
-        () => ({
-          webAnalyticsEventKey: 'eventKey',
-          order: CredentialOrderFactory().one(),
-          product: ProductFactory().one(),
-          props: {} as SaleTunnelProps,
-          setBillingAddress: jest.fn(),
-          creditCard,
-          setCreditCard,
-          onPaymentSuccess: jest.fn(),
-          step: SaleTunnelStep.PAYMENT,
-          registerSubmitCallback: jest.fn(),
-          unregisterSubmitCallback: jest.fn(),
-          runSubmitCallbacks: jest.fn(),
-        }),
-        [creditCard],
-      );
-      contextRef.current = context;
-
-      return (
-        <SaleTunnelContext.Provider value={context}>
-          <CreditCardSelector />
-        </SaleTunnelContext.Provider>
-      );
+      useEffect(() => {
+        contextRef.current.creditCard = creditCard;
+      }, [creditCard]);
+      return <CreditCardSelector creditCard={creditCard} setCreditCard={setCreditCard} />;
     };
 
     return { contextRef, Wrapper };
@@ -77,11 +52,6 @@ describe('CreditCardSelector', () => {
     const { Wrapper } = buildWrapper();
     render(<Wrapper />);
 
-    screen.getByRole('heading', {
-      name: 'Payment method',
-    });
-    screen.getByText('Choose your payment method or add a new one during the payment.');
-
     // During loading state, the spinner should be displayed and the current selected card should not be displayed.
     expect(screen.queryByText('Add new credit card during payment')).not.toBeInTheDocument();
     await expectSpinner();

package/js/components/{SaleTunnel/CreditCardSelector → CreditCardSelector}/index.tsx

@@ -13,7 +13,6 @@ import { CreditCardBrandLogo } from 'pages/DashboardCreditCardsManagement/Credit
 import { CreditCard } from 'types/Joanie';
 import { useCreditCardsManagement } from 'hooks/useCreditCardsManagement';
 import { Spinner } from 'components/Spinner';
-import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 import { CreditCardExpirationStatus, CreditCardHelper } from 'utils/CreditCardHelper';
 import { useMatchMediaLg } from 'hooks/useMatchMedia';
 
@@ -33,16 +32,6 @@ const messages = defineMessages({
     description: 'Text to show the credit card expired date',
     defaultMessage: 'Expired since {month}/{year}',
   },
-  title: {
-    id: 'components.SaleTunnel.CreditCardSelector.title',
-    description: 'Title for the credit card section',
-    defaultMessage: 'Payment method',
-  },
-  description: {
-    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.',
-  },
   creditCardEmptyInlineDescription: {
     id: 'components.SaleTunnel.CreditCardSelector.creditCardEmptyInlineDescription',
     description: 'Description for the empty credit card inline',
@@ -71,7 +60,19 @@ const messages = defineMessages({
   },
 });
 
-export const CreditCardSelector = () => {
+export interface CreditCardSelectorProps {
+  creditCard?: CreditCard;
+  setCreditCard: (creditCard?: CreditCard) => void;
+  quickRemove?: boolean;
+  allowEdit?: boolean;
+}
+
+export const CreditCardSelector = ({
+  creditCard,
+  setCreditCard,
+  allowEdit = true,
+  quickRemove = true,
+}: CreditCardSelectorProps) => {
   const intl = useIntl();
   const modal = useModal();
   const isMobile = useMatchMediaLg();
@@ -81,8 +82,6 @@ export const CreditCardSelector = () => {
     items: creditCards,
   } = useCreditCardsManagement();
 
-  const { creditCard, setCreditCard } = useSaleTunnelContext();
-
   const getDefaultCreditCard = () => {
     if (creditCards.length === 0) {
       return;
@@ -102,12 +101,6 @@ export const CreditCardSelector = () => {
 
   return (
     <div className="credit-card-selector">
-      <h4 className="block-title mb-t">
-        <FormattedMessage {...messages.title} />
-      </h4>
-      <div className="description mb-s">
-        <FormattedMessage {...messages.description} />
-      </div>
       {fetching ? (
         <Spinner />
       ) : (
@@ -115,7 +108,7 @@ export const CreditCardSelector = () => {
           <div className="credit-card-selector__content">
             {creditCard ? <CreditCardInline creditCard={creditCard} /> : <CreditCardEmptyInline />}
 
-            {creditCards?.length > 0 && (
+            {allowEdit && creditCards?.length > 0 && (
               <Button
                 icon={<span className="material-icons">edit</span>}
                 color="tertiary-text"
@@ -125,7 +118,7 @@ export const CreditCardSelector = () => {
               />
             )}
           </div>
-          {creditCard && (
+          {creditCard && quickRemove && (
             <Button
               onClick={() => setCreditCard(undefined)}
               size="small"

package/js/components/PaymentScheduleGrid/_styles.scss

@@ -1,3 +1,16 @@
+.payment-schedule__grid {
+  .payment-schedule__cell {
+    &--wrapped {
+      white-space: normal;
+    }
+
+    &--alignRight {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+
 .status-pill {
   display: inline-flex;
   align-items: center;

package/js/components/PaymentScheduleGrid/index.tsx

@@ -1,91 +1,71 @@
-import { DataList } from '@openfun/cunningham-react';
+import { DataGrid } from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { StringHelper } from 'utils/StringHelper';
+import { PaymentSchedule, PaymentScheduleState } from 'types/Joanie';
+import useDateFormat from 'hooks/useDateFormat';
+
+type Props = {
+  schedule: PaymentSchedule;
+};
+
+const messages = defineMessages({
+  withdrawnAt: {
+    id: 'components.PaymentScheduleGrid.withdrawnAt',
+    defaultMessage: 'Withdrawn on {date}',
+    description: 'Label displayed to explain when the installment will be withdrawn.',
+  },
+});
+
+export const PaymentScheduleGrid = ({ schedule }: Props) => {
+  const intl = useIntl();
+  const formatDate = useDateFormat();
 
-export const PaymentScheduleGrid = () => {
   return (
     <div className="payment-schedule__grid">
-      <DataList
+      <DataGrid
+        displayHeader={false}
         columns={[
+          { field: 'index', size: 10 },
+          { field: 'amount', size: 90 },
           {
-            id: 'date',
-            renderCell: (context) =>
-              context.row.id === 'total' ? <strong>{context.row.date}</strong> : context.row.date,
+            field: 'date',
+            renderCell: ({ row }) => (
+              <span className="payment-schedule__cell--wrapped">
+                <FormattedMessage {...messages.withdrawnAt} values={{ date: row.date }} />
+              </span>
+            ),
           },
           {
-            id: 'amount',
-            renderCell: (context) =>
-              context.row.id === 'total' ? (
-                <strong>{context.row.amount}</strong>
+            id: 'state',
+            renderCell: ({ row }) =>
+              row.state ? (
+                <div className="payment-schedule__cell--alignRight">
+                  <StatusPill state={row.state} />
+                </div>
               ) : (
-                context.row.amount
+                ''
               ),
           },
-          {
-            id: 'status',
-            renderCell: (context) =>
-              context.row.status ? <StatusPill status={context.row.status} /> : '',
-          },
-          { field: 'message' },
-        ]}
-        rows={[
-          {
-            id: '1',
-            date: '2023-03-15',
-            amount: '€ 100.00',
-            status: PaymentScheduleStatus.PAID,
-            message: 'First payment (30%)',
-          },
-          {
-            id: '2',
-            date: '2023-04-15',
-            amount: '€ 100.00',
-            status: PaymentScheduleStatus.REQUIRE_PAYMENT,
-            message: 'Periodic',
-          },
-          {
-            id: '3',
-            date: '2023-05-15',
-            amount: '€ 100.00',
-            status: PaymentScheduleStatus.FAILED,
-            message: 'Periodic',
-          },
-          {
-            id: '4',
-            date: '2023-06-15',
-            amount: '€ 100.00',
-            status: PaymentScheduleStatus.INCOMING,
-            message: 'Periodic',
-          },
-          {
-            id: '5',
-            date: '2023-06-15',
-            amount: '€ 100.00',
-            status: PaymentScheduleStatus.PENDING,
-            message: 'Periodic',
-          },
-          {
-            id: 'total',
-            date: 'Total',
-            amount: '€ 1150.00',
-          },
         ]}
+        rows={schedule.map((installment, index) => ({
+          id: installment.id,
+          index: index + 1,
+          date: formatDate(installment.due_date),
+          amount: intl.formatNumber(installment.amount, {
+            style: 'currency',
+            currency: installment.currency,
+          }),
+          state: installment.state,
+        }))}
       />
     </div>
   );
 };
 
-export enum PaymentScheduleStatus {
-  INCOMING = 'incoming',
-  PENDING = 'pending',
-  PAID = 'paid',
-  FAILED = 'failed',
-  REQUIRE_PAYMENT = 'require_payment',
-}
-
-export const StatusPill = ({ status }: { status: PaymentScheduleStatus }) => {
+export const StatusPill = ({ state }: { state: PaymentScheduleState }) => {
   return (
-    <span className={`status-pill status-pill--${status}`}>
-      {StringHelper.capitalizeFirst(status.replace('_', ' '))}
+    <span className={`status-pill status-pill--${state}`}>
+      {StringHelper.capitalizeFirst(state.replace('_', ' '))}
     </span>
   );
 };

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

@@ -102,10 +102,15 @@ describe('PurchaseButton', () => {
   it('shows cta to open sale tunnel when user is authenticated', 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`,
-      {},
-    );
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
+        {},
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
+        [],
+      );
 
     render(
       <Wrapper client={createTestQueryClient({ user: richieUser })}>
@@ -137,10 +142,15 @@ 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}`, {});
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-      {},
-    );
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
+        {},
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
+        [],
+      );
     render(
       <Wrapper client={createTestQueryClient({ user })}>
         <PurchaseButton
@@ -170,10 +180,15 @@ describe('PurchaseButton', () => {
   it('shows cta to open sale tunnel when remaining orders is undefined', 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`,
-      {},
-    );
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?course_code=${courseCode}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
+        {},
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
+        [],
+      );
     delete product.remaining_order_count;
 
     render(

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

@@ -50,15 +50,10 @@ const messages = defineMessages({
     id: 'components.PaymentButton.errorTerms',
   },
   pay: {
-    defaultMessage: 'Pay {price}',
+    defaultMessage: 'Subscribe',
     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.',
@@ -309,7 +304,7 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
           </Spinner>
         ) : (
           <FormattedMessage
-            {...(creditCard ? messages.payInOneClick : messages.pay)}
+            {...messages.pay}
             values={{
               price: intl.formatNumber(product.price, {
                 style: 'currency',

package/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -1,5 +1,6 @@
-import { Modal, ModalSize } from '@openfun/cunningham-react';
+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 { SaleTunnelSponsors } from 'components/SaleTunnel/Sponsors/SaleTunnelSponsors';
 import { SaleTunnelProps } from 'components/SaleTunnel/index';
 import { Address, CreditCard, Order, Product } from 'types/Joanie';
@@ -12,6 +13,15 @@ import { SaleTunnelInformation } from 'components/SaleTunnel/SaleTunnelInformati
 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',
+  },
+});
+
 export interface SaleTunnelContextType {
   props: SaleTunnelProps;
   order?: Order;
@@ -177,15 +187,24 @@ export const GenericSaleTunnelPaymentStep = (props: GenericSaleTunnelProps) => {
     <Modal {...props} size={ModalSize.EXTRA_LARGE} title={props.product.title} closeOnEsc={false}>
       <div className="sale-tunnel" data-testid="generic-sale-tunnel-payment-step">
         <div className="sale-tunnel__main">
-          <div className="sale-tunnel__main__left">{props.asideNode}</div>
+          <div className="sale-tunnel__main__column sale-tunnel__main__left ">
+            <div>{props.asideNode}</div>
+            <div>
+              <SaleTunnelSponsors />
+            </div>
+          </div>
           <div className="sale-tunnel__main__separator" />
           <div className="sale-tunnel__main__right">
             <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}
-          <SaleTunnelSponsors />
         </div>
       </div>
     </Modal>

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

@@ -1,12 +1,13 @@
-import { Alert, VariantType } from '@openfun/cunningham-react';
 import { defineMessages, FormattedMessage, FormattedNumber } from 'react-intl';
 import { AddressSelector } from 'components/SaleTunnel/AddressSelector';
-import { CreditCardSelector } from 'components/SaleTunnel/CreditCardSelector';
+import { CreditCardSelector } from 'components/CreditCardSelector';
 import { PaymentScheduleGrid } from 'components/PaymentScheduleGrid';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 import OpenEdxFullNameForm from 'components/OpenEdxFullNameForm';
 import { useSession } from 'contexts/SessionContext';
 import useOpenEdxProfile from 'hooks/useOpenEdxProfile';
+import { usePaymentSchedule } from 'hooks/usePaymentSchedule';
+import { Spinner } from 'components/Spinner';
 
 const messages = defineMessages({
   title: {
@@ -24,6 +25,16 @@ 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',
@@ -49,7 +60,7 @@ const messages = defineMessages({
 
 export const SaleTunnelInformation = () => {
   return (
-    <div className="sale-tunnel__information">
+    <div className="sale-tunnel__main__column sale-tunnel__information">
       <div>
         <h3 className="block-title mb-t">
           <FormattedMessage {...messages.title} />
@@ -64,15 +75,31 @@ export const SaleTunnelInformation = () => {
         </div>
       </div>
       <div>
-        <CreditCardSelector />
+        <CreditCardSelectorWrapper />
       </div>
       <div>
+        <PaymentScheduleBlock />
         <Total />
       </div>
     </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({
@@ -98,9 +125,6 @@ const Total = () => {
   const { product } = useSaleTunnelContext();
   return (
     <div className="sale-tunnel__total">
-      <Alert type={VariantType.INFO}>
-        <FormattedMessage {...messages.totalInfo} />
-      </Alert>
       <div className="sale-tunnel__total__amount mt-t" data-testid="sale-tunnel__total__amount">
         <div className="block-title">
           <FormattedMessage {...messages.totalLabel} />
@@ -117,20 +141,22 @@ const Total = () => {
   );
 };
 
-/**
- * Ready for V2.
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const PaymentScheduleBlock = () => {
-  return null;
+  const { props } = useSaleTunnelContext();
+  const query = usePaymentSchedule({
+    course_code: props.course?.code || props.enrollment!.course_run.course.code,
+    product_id: props.product.id,
+  });
+
+  if (!query.data || query.isLoading) {
+    return <Spinner size="large" />;
+  }
+
   return (
     <div className="payment-schedule">
-      <h4 className="block-title mb-t">Schedule</h4>
-      <Alert type={VariantType.INFO}>
-        The first payment occurs in 14 days, you will be notified to pay the first 30%.
-      </Alert>
+      <h4 className="block-title mb-t">Payment schedule</h4>
       <div className="mt-t">
-        <PaymentScheduleGrid />
+        <PaymentScheduleGrid schedule={query.data} />
       </div>
     </div>
   );

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