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

frontend/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -10,6 +10,7 @@ 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';
 
 export interface SaleTunnelContextType {
   props: SaleTunnelProps;
@@ -18,7 +19,7 @@ export interface SaleTunnelContextType {
   webAnalyticsEventKey: string;
 
   // internal
-  onPaymentSuccess: () => void;
+  onPaymentSuccess: (validated?: boolean) => void;
   step: SaleTunnelStep;
 
   // meta
@@ -46,6 +47,7 @@ export const useSaleTunnelContext = () => {
 export enum SaleTunnelStep {
   PAYMENT,
   SUCCESS,
+  NOT_VALIDATED,
 }
 
 interface GenericSaleTunnelProps extends SaleTunnelProps {
@@ -89,8 +91,12 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       setBillingAddress,
       creditCard,
       setCreditCard,
-      onPaymentSuccess: () => {
-        setStep(SaleTunnelStep.SUCCESS);
+      onPaymentSuccess: (validated: boolean = true) => {
+        if (validated) {
+          setStep(SaleTunnelStep.SUCCESS);
+        } else {
+          setStep(SaleTunnelStep.NOT_VALIDATED);
+        }
         WebAnalyticsAPIHandler()?.sendCourseProductEvent(
           CourseProductEvent.PAYMENT_SUCCEED,
           props.eventKey,
@@ -143,6 +149,8 @@ export const GenericSaleTunnelInner = (props: GenericSaleTunnelProps) => {
       return <GenericSaleTunnelPaymentStep {...props} />;
     case SaleTunnelStep.SUCCESS:
       return <GenericSaleTunnelSuccessStep {...props} />;
+    case SaleTunnelStep.NOT_VALIDATED:
+      return <GenericSaleTunnelNotValidatedStep {...props} />;
   }
   throw new Error('Invalid step: ' + step);
 };
@@ -187,7 +195,15 @@ export const GenericSaleTunnelPaymentStep = (props: GenericSaleTunnelProps) => {
 export const GenericSaleTunnelSuccessStep = (props: SaleTunnelProps) => {
   return (
     <Modal {...props} size={ModalSize.MEDIUM}>
-      <SaleTunnelSuccess closeModal={() => props.onClose()} />
+      <SaleTunnelSuccess closeModal={props.onClose} />
+    </Modal>
+  );
+};
+
+export const GenericSaleTunnelNotValidatedStep = (props: SaleTunnelProps) => {
+  return (
+    <Modal {...props} size={ModalSize.MEDIUM}>
+      <SaleTunnelNotValidated closeModal={props.onClose} />
     </Modal>
   );
 };

frontend/js/components/SaleTunnel/ProductPath/CourseRunsList.tsx

@@ -18,7 +18,7 @@ other {# course runs}
     id: 'components.SaleTunnelStepValidation.availableCourseRuns',
   },
   courseRunDates: {
-    defaultMessage: 'From {start} to {end}',
+    defaultMessage: 'From {start} {end, select, undefined {} other {to {end}}}',
     description: 'Course run date text',
     id: 'components.SaleTunnelStepValidation.courseRunDates',
   },

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

@@ -0,0 +1,70 @@
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Button } from '@openfun/cunningham-react';
+import { generatePath } from 'react-router-dom';
+import WarningIcon from 'components/WarningIcon';
+import { getDashboardBasename } from 'widgets/Dashboard/hooks/useDashboardRouter/getDashboardBasename';
+import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { ProductType } from 'types/Joanie';
+
+const messages = defineMessages({
+  apology: {
+    defaultMessage: "Sorry, you'll have to wait a little longer!",
+    description: 'Text displayed to thank user for his order',
+    id: 'components.SaleTunnelSuccessNotValidated.apology',
+  },
+  title: {
+    defaultMessage: 'It takes too long to validate your order.',
+    description: 'Message to confirm that order has been created',
+    id: 'components.SaleTunnelSuccessNotValidated.title',
+  },
+  description: {
+    defaultMessage:
+      'Your payment has succeeded but your order validation is taking too long, you can close this dialog and come back later. You will receive your invoice by email in a few moments.',
+    description: "Text to remind that order's invoice will be send by email soon",
+    id: 'components.SaleTunnelSuccessNotValidated.description',
+  },
+  cta: {
+    defaultMessage: 'Close',
+    description: 'Label to the call to action to close sale tunnel',
+    id: 'components.SaleTunnelSuccessNotValidated.cta',
+  },
+});
+
+const SaleTunnelNotValidated = ({ closeModal }: { closeModal: () => void }) => {
+  const intl = useIntl();
+  const { order, product } = useSaleTunnelContext();
+  return (
+    <section className="sale-tunnel-end" data-testid="generic-sale-tunnel-not-validated-step">
+      <header className="sale-tunnel-end__header">
+        <WarningIcon />
+        <h3 className="sale-tunnel-end__title">
+          <FormattedMessage {...messages.apology} />
+        </h3>
+      </header>
+      <p className="sale-tunnel-end__content">
+        <FormattedMessage {...messages.title} />
+        <br />
+        <FormattedMessage {...messages.description} />
+      </p>
+      <footer className="sale-tunnel-end__footer">
+        {product.type === ProductType.CREDENTIAL ? (
+          <Button
+            href={
+              getDashboardBasename(intl.locale) +
+              generatePath(LearnerDashboardPaths.ORDER, { orderId: order!.id })
+            }
+          >
+            <FormattedMessage {...messages.cta} />
+          </Button>
+        ) : (
+          <Button onClick={closeModal}>
+            <FormattedMessage {...messages.cta} />
+          </Button>
+        )}
+      </footer>
+    </section>
+  );
+};
+
+export default SaleTunnelNotValidated;

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

@@ -10,33 +10,33 @@ const messages = defineMessages({
   congratulations: {
     defaultMessage: 'Congratulations!',
     description: 'Text displayed to thank user for his order',
-    id: 'components.SaleTunnelStepResume.congratulations',
+    id: 'components.SaleTunnelSuccess.congratulations',
   },
   successMessage: {
     defaultMessage: 'Your order has been successfully created.',
     description: 'Message to confirm that order has been created',
-    id: 'components.SaleTunnelStepResume.successMessage',
+    id: 'components.SaleTunnelSuccess.successMessage',
   },
   successDetailMessage: {
     defaultMessage: 'You will receive your invoice by email in a few moments.',
     description: "Text to remind that order's invoice will be send by email soon",
-    id: 'components.SaleTunnelStepResume.successDetailMessage',
+    id: 'components.SaleTunnelSuccess.successDetailMessage',
   },
   successDetailSignatureMessage: {
     defaultMessage:
       'In order to enroll to course runs you first need to sign the training contract.',
     description: 'Text to remind that order needs to be signed',
-    id: 'components.SaleTunnelStepResume.successDetailSignatureMessage',
+    id: 'components.SaleTunnelSuccess.successDetailSignatureMessage',
   },
   cta: {
     defaultMessage: 'Start this course now!',
     description: 'Label to the call to action to close sale tunnel',
-    id: 'components.SaleTunnelStepResume.cta',
+    id: 'components.SaleTunnelSuccess.cta',
   },
   ctaSignature: {
     defaultMessage: 'Sign the training contract',
     description: 'Label to the call to action to close sale tunnel if there is a pending signature',
-    id: 'components.SaleTunnelStepResume.ctaSignature',
+    id: 'components.SaleTunnelSuccess.ctaSignature',
   },
 });
 
@@ -44,14 +44,14 @@ export const SaleTunnelSuccess = ({ closeModal }: { closeModal: () => void }) =>
   const intl = useIntl();
   const { order, product } = useSaleTunnelContext();
   return (
-    <section className="SaleTunnelSuccess" data-testid="generic-sale-tunnel-success-step">
-      <header className="SaleTunnelSuccess__header">
+    <section className="sale-tunnel-end" data-testid="generic-sale-tunnel-success-step">
+      <header className="sale-tunnel-end__header">
         <SuccessIcon />
-        <h3 className="SaleTunnelSuccess__title">
+        <h3 className="sale-tunnel-end__title">
           <FormattedMessage {...messages.congratulations} />
         </h3>
       </header>
-      <p className="SaleTunnelSuccess__content">
+      <p className="sale-tunnel-end__content">
         <FormattedMessage {...messages.successMessage} />
         <br />
         <FormattedMessage {...messages.successDetailMessage} />
@@ -62,7 +62,7 @@ export const SaleTunnelSuccess = ({ closeModal }: { closeModal: () => void }) =>
           </>
         )}
       </p>
-      <footer className="SaleTunnelSuccess__footer">
+      <footer className="sale-tunnel-end__footer">
         {product.contract_definition ? (
           <Button
             href={

frontend/js/components/SaleTunnel/_styles.scss

@@ -102,3 +102,32 @@
   font-weight: var(--c--theme--font--weights--bold);
   text-align: left;
 }
+
+.sale-tunnel-end {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    margin-bottom: 0;
+    text-align: center;
+  }
+
+  &__title {
+    color: r-theme-val(steps-content, title-color);
+    font-size: 1.5rem;
+  }
+
+  &__content {
+    color: r-theme-val(steps-content, content-color);
+    font-size: 0.875rem;
+    line-height: 1.3em;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
+
+  &__footer {
+    margin-top: 2.5rem;
+  }
+}

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

@@ -3,7 +3,6 @@ import fetchMock from 'fetch-mock';
 import queryString from 'query-string';
 import userEvent from '@testing-library/user-event';
 import { OrderState, Product, ProductType } from 'types/Joanie';
-import { DummyPayment } from 'components/PaymentInterfaces/types';
 import {
   AddressFactory,
   CertificateOrderWithOneClickPaymentFactory,
@@ -228,6 +227,15 @@ describe.each([
       // - wait for address to be loaded.
       await screen.findByText(getAddressLabel(billingAddress));
 
+      // - Order should not have been submitted yet
+      expect(
+        fetchMock
+          .calls()
+          .filter(
+            (call) => call[0] === `https://joanie.endpoint/api/v1.0/orders/${order.id}/submit/`,
+          ),
+      ).toHaveLength(0);
+
       // - User clicks on pay button
       await user.click($button);
 
@@ -244,6 +252,15 @@ describe.each([
         `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
       );
 
+      // - Order should have been submitted once
+      expect(
+        fetchMock
+          .calls()
+          .filter(
+            (call) => call[0] === `https://joanie.endpoint/api/v1.0/orders/${order.id}/submit/`,
+          ),
+      ).toHaveLength(1);
+
       // - Spinner should be displayed
       screen.getByText('Payment in progress');
 
@@ -295,6 +312,15 @@ describe.each([
       nbApiCalls += 1; // useProductOrder call (invalidate from submit)
 
       await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
+
+      // - Order should not have been re-submitted
+      expect(
+        fetchMock
+          .calls()
+          .filter(
+            (call) => call[0] === `https://joanie.endpoint/api/v1.0/orders/${order.id}/submit/`,
+          ),
+      ).toHaveLength(2);
       expect(fetchMock.lastUrl()).toBe(
         `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
       );
@@ -429,7 +455,7 @@ describe.each([
       expect(fetchMock.calls()).toHaveLength(nbApiCalls);
     });
 
-    it('should abort the order if payment does not succeed after a given delay', async () => {
+    it('should render SaleTunnelNotValidated if order is not validated after a given delay', async () => {
       const product = ProductFactory().one();
       const billingAddress = AddressFactory({
         is_main: true,
@@ -522,6 +548,7 @@ describe.each([
       screen.getByText('Payment in progress');
 
       fetchMock.resetHistory();
+      nbApiCalls = 0;
       // - Wait until order has been polled 29 times.
       await act(async () => {
         await jest.advanceTimersByTimeAsync(
@@ -531,36 +558,40 @@ describe.each([
 
       await waitFor(async () => {
         expect(fetchMock.calls()).toHaveLength(PAYMENT_SETTINGS.pollLimit - 1);
+        nbApiCalls += PAYMENT_SETTINGS.pollLimit - 1;
       });
 
-      // - This round should be the last after which the order should be aborted
+      // - This round should be the last
       await act(async () => {
         jest.runOnlyPendingTimers();
+        nbApiCalls += 1; // last poll round
       });
 
-      await waitFor(
-        async () => {
-          // +1 is for orders invalidation.
-          // +1 is for useProductOrder call invalidation.
-          expect(fetchMock.calls()).toHaveLength(PAYMENT_SETTINGS.pollLimit + 2);
-          expect(fetchMock.calls()[fetchMock.calls().length - 3][0]).toBe(
-            `https://joanie.endpoint/api/v1.0/orders/${order.id}/abort/`,
-          );
-        },
-        {
-          timeout: 1100,
-        },
-      );
+      nbApiCalls += 1; // useProductOrder call (invalidate)
+      nbApiCalls += 1; // orders get (invalidate queries)
 
-      expect(
-        JSON.parse(fetchMock.calls()[fetchMock.calls().length - 3][1]!.body!.toString()),
-      ).toEqual({
-        payment_id: (paymentInfo as DummyPayment).payment_id,
-      });
+      // - The SaleTunnelNotValidated component should be rendered
+      screen.getByTestId('generic-sale-tunnel-not-validated-step');
+      screen.getByText("Sorry, you'll have to wait a little longer!");
 
-      // - An error message should be displayed and focused (for screen reader users)
-      const $error = screen.getByText('An error occurred during payment. Please retry later.');
-      expect(document.activeElement).toBe($error);
+      // If productType is credential, the button should redirect to the dashboard
+      if (productType === ProductType.CREDENTIAL) {
+        const $link = screen.getByRole('link', {
+          name: 'Close',
+        });
+        expect($link.getAttribute('href')).toBe(`/en/dashboard/courses/orders/${order.id}`);
+      } else {
+        // Otherwise, the button should close the modal
+        screen.getByRole('button', {
+          name: 'Close',
+        });
+      }
+
+      // - And poller should be stopped
+      await act(async () => {
+        jest.runOnlyPendingTimers();
+      });
+      expect(fetchMock.calls()).toHaveLength(nbApiCalls);
     }, 10000);
 
     it('should render an error message when payment failed', async () => {
@@ -648,6 +679,101 @@ describe.each([
       });
     });
 
+    it('should resubmit the order when user retry to pay after a payment failure', async () => {
+      const product = ProductFactory().one();
+      const billingAddress = AddressFactory({
+        is_main: true,
+      }).one();
+      const { payment_info: paymentInfo, ...order } = OrderWithPaymentFactory().one();
+
+      fetchMock
+        .get(
+          `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
+          [],
+        )
+        .post('https://joanie.endpoint/api/v1.0/orders/', order)
+        .patch(`https://joanie.endpoint/api/v1.0/orders/${order.id}/submit/`, {
+          payment_info: paymentInfo,
+        })
+        .get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, {
+          ...order,
+          state: OrderState.SUBMITTED,
+        })
+        .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
+          overwriteRoutes: true,
+        });
+
+      render(<Wrapper product={product} />, {
+        queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+      });
+      nbApiCalls += 1; // useProductOrder get order with filters
+      nbApiCalls += 1; // get user account call.
+      nbApiCalls += 1; // get user preferences call.
+      await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
+
+      const $terms = screen.getByLabelText(
+        'By checking this box, you accept the General Terms of Sale',
+      );
+      const user = userEvent.setup({ delay: null });
+      await user.click($terms);
+
+      const $button = screen.getByRole('button', {
+        name: `Pay ${formatPrice(product.price, product.price_currency)}`,
+      }) as HTMLButtonElement;
+
+      // - wait for address to be loaded.
+      await screen.findByText(getAddressLabel(billingAddress));
+
+      // - User clicks on pay button
+      await user.click($button);
+
+      // - Update the response of order list to react to order creation.
+      fetchMock.get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
+        [
+          {
+            ...order,
+            state: OrderState.SUBMITTED,
+          },
+        ],
+        { overwriteRoutes: true },
+      );
+
+      // - Route to create order should have been called
+      nbApiCalls += 1; // order post create (invalidate queries)
+      nbApiCalls += 1; // order get (invalidate queries)
+      nbApiCalls += 1; // useProductOrder call (invalidate from create)
+      nbApiCalls += 1; // order submit (invalidate queries)
+      nbApiCalls += 1; // order get (invalidate queries)
+      nbApiCalls += 1; // useProductOrder call (invalidate from submit)
+
+      await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
+
+      // - Payment interface should be displayed
+      await screen.findByText('Payment interface component');
+
+      // - Simulate the payment has failed
+      await user.click(screen.getByTestId('payment-failure'));
+
+      // - An error message should be displayed
+      const $error = screen.getByText('An error occurred during payment. Please retry later.');
+      expect(document.activeElement).toBe($error);
+
+      // - Payment button should have been restore to its idle state
+      expect($button.disabled).toBe(false);
+      screen.getByRole('button', {
+        name: `Pay ${formatPrice(product.price, product.price_currency)}`,
+      });
+
+      // - User clicks on pay button again
+      await user.click($button);
+
+      nbApiCalls += 1; // order submit (invalidate queries)
+      nbApiCalls += 1; // order get (invalidate queries)
+      nbApiCalls += 1; // useProductOrder call (invalidate from submit)
+      await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
+    });
+
     it('should show an error if user does not accept the terms', async () => {
       const product = ProductFactory().one();
       const billingAddress = AddressFactory({ is_main: true }).one();

frontend/js/components/SuccessIcon/_styles.scss

@@ -12,21 +12,7 @@
   max-height: 100%;
   stroke: currentColor;
   width: 4.5rem;
-
-  @keyframes wave {
-    0% {
-      transform: scale(1);
-    }
-    33% {
-      transform: scale(1.2);
-    }
-    66% {
-      transform: scale(0.8);
-    }
-    100% {
-      transform: scale(1);
-    }
-  }
+  @extend %keyframe-wave;
 
   & > * {
     fill: none;

frontend/js/components/WarningIcon/_styles.scss

@@ -0,0 +1,84 @@
+.warning-icon {
+  $duration: 1.1s;
+  align-items: center;
+  animation: wave $duration * 0.95 backwards;
+  border-radius: 100vw;
+  color: r-theme-val(steps-content, icon-warning-color);
+  display: inline-flex;
+  fill: none;
+  height: 4.5rem;
+  justify-content: center;
+  margin-bottom: 1.25rem;
+  max-height: 100%;
+  stroke: currentColor;
+  width: 4.5rem;
+  @extend %keyframe-wave;
+
+  .circle,
+  .exclamation-mark {
+    color: r-theme-val(steps-content, icon-warning-background);
+    &.back {
+      color: lighten(r-theme-val(steps-content, icon-warning-background), 20%);
+    }
+  }
+
+  .circle,
+  .exclamation-mark path {
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-width: 2;
+  }
+
+  .exclamation-mark circle {
+    fill: currentColor;
+  }
+
+  .exclamation-mark path {
+    $length: 11px;
+    @include keyframe-strokedLineAppear(exclamationMarkLineAppear, $length, true);
+    animation: exclamationMarkLineAppear $duration * 0.5 $duration * 0.3 backwards $r-ease-out;
+    stroke-dasharray: $length;
+  }
+
+  .exclamation-mark circle {
+    @keyframes exclamationMarkCircleAppear {
+      0% {
+        transform: scale(0);
+      }
+      66% {
+        transform: scale(1.2);
+      }
+      100% {
+        transform: scale(1);
+      }
+    }
+    animation: exclamationMarkCircleAppear $duration * 0.5 $duration * 0.2 backwards $r-ease-out;
+    transform-origin: 16px 23px;
+  }
+
+  .exclamation-mark:nth-of-type(1) {
+    & > path {
+      animation-delay: 0;
+      animation-duration: $duration * 0.2;
+    }
+    & > circle {
+      animation-delay: 0;
+      animation-duration: $duration * 0.1;
+    }
+  }
+
+  .circle {
+    $PI: 3.14159265;
+    $radius: 16px;
+    @include keyframe-strokedLineAppear(circleAppear, 2 * $PI * $radius, true);
+    animation: circleAppear $duration $r-ease-out;
+    stroke-dasharray: 2 * $PI * $radius;
+    transform-origin: center center;
+    transform: rotateZ(-45deg);
+
+    &:nth-of-type(1) {
+      animation-duration: $duration * 0.9;
+    }
+  }
+}

frontend/js/components/WarningIcon/index.tsx

@@ -0,0 +1,18 @@
+const WarningIcon = () => {
+  return (
+    <svg className="warning-icon" role="img" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+      <circle className="circle back" cx="16" cy="16" r="14" />
+      <circle className="circle" cx="16" cy="16" r="14" />
+      <g className="exclamation-mark back">
+        <path d="M16 8V19" />
+        <circle cx="16" cy="23" r="1" />
+      </g>
+      <g className="exclamation-mark">
+        <path d="M16 8V19" />
+        <circle cx="16" cy="23" r="1" />
+      </g>
+    </svg>
+  );
+};
+
+export default WarningIcon;

frontend/js/hooks/useCourseProductUnion/index.spec.tsx

@@ -1,16 +1,15 @@
 import { renderHook, waitFor } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
+import { QueryClient } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
 import { PropsWithChildren } from 'react';
 import { CourseListItem, CourseProductRelation } from 'types/Joanie';
-import { History, HistoryContext } from 'hooks/useHistory';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { SessionProvider } from 'contexts/SessionContext';
 import { getRoutes } from 'api/joanie';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { CourseListItemFactory, CourseProductRelationFactory } from 'utils/test/factories/joanie';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import { useCourseProductUnion } from '.';
 
 jest.mock('utils/context', () => ({
@@ -24,27 +23,14 @@ jest.mock('utils/context', () => ({
 const PER_PAGE = 3;
 
 const renderUseCourseProductUnion = ({ organizationId }: { organizationId?: string } = {}) => {
-  const Wrapper = ({ client, children }: PropsWithChildren<{ client?: QueryClient }>) => {
-    const historyPushState = jest.fn();
-    const historyReplaceState = jest.fn();
-    const makeHistoryOf: (params: any) => History = () => [
-      {
-        state: { name: '', data: {} },
-        title: '',
-        url: `/`,
-      },
-      historyPushState,
-      historyReplaceState,
-    ];
-
+  const Wrapper = ({
+    client = createTestQueryClient({ user: true }),
+    children,
+  }: PropsWithChildren<{ client?: QueryClient }>) => {
     return (
-      <QueryClientProvider client={client ?? createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <HistoryContext.Provider value={makeHistoryOf({})}>
-            <SessionProvider>{children}</SessionProvider>
-          </HistoryContext.Provider>
-        </IntlProvider>
-      </QueryClientProvider>
+      <BaseJoanieAppWrapper queryOptions={{ client }}>
+        <SessionProvider>{children}</SessionProvider>
+      </BaseJoanieAppWrapper>
     );
   };