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

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/SignContractButton/index.spec.tsx

@@ -13,7 +13,7 @@ import {
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
-import { Contract, CredentialOrder, NestedCredentialOrder } from 'types/Joanie';
+import { Contract, CredentialOrder, NestedCredentialOrder, OrderState } from 'types/Joanie';
 import SignContractButton from '.';
 
 jest.mock('utils/context', () => ({
@@ -113,6 +113,17 @@ describe('<SignContractButton/>', () => {
 
         expect(screen.getByTestId('dashboard-contract-frame')).toBeInTheDocument();
       });
+
+      it('should display a disabled button when order state is not validated', async () => {
+        order.state = OrderState.PENDING;
+        render(
+          <Wrapper>
+            <SignContractButton order={order} contract={contract} writable={true} />
+          </Wrapper>,
+        );
+        const $signButton = screen.queryByRole('button', { name: 'Sign' });
+        expect($signButton).toBeDisabled();
+      });
     });
 
     describe('with training contract signed by the learner', () => {

frontend/js/components/SignContractButton/index.tsx

@@ -3,7 +3,13 @@ import { FormattedMessage, defineMessages } from 'react-intl';
 import { useState } from 'react';
 import { generatePath } from 'react-router-dom';
 import { LearnerContractFrame } from 'components/ContractFrame';
-import { Contract, ContractState, CredentialOrder, NestedCredentialOrder } from 'types/Joanie';
+import {
+  Contract,
+  ContractState,
+  CredentialOrder,
+  NestedCredentialOrder,
+  OrderState,
+} from 'types/Joanie';
 import { RouterButton } from 'widgets/Dashboard/components/RouterButton';
 import DownloadContractButton from 'components/DownloadContractButton';
 import { Maybe } from 'types/utils';
@@ -60,6 +66,8 @@ const SignContractButton = ({ order, contract, writable, className }: SignContra
   const [contractFrameOpened, setContractFrameOpened] = useState(false);
   const [contractLoading, setContractLoading] = useState(false);
   const contractState = ContractHelper.getState(contract);
+  const notReadyToSign =
+    order.state !== OrderState.VALIDATED || contractLoading || contractFrameOpened;
 
   if (!writable && contractState === ContractState.UNSIGNED) {
     return <SignContractButtonLink orderId={order.id} className={className} />;
@@ -75,7 +83,7 @@ const SignContractButton = ({ order, contract, writable, className }: SignContra
           size="small"
           className={className}
           onClick={() => setContractFrameOpened(true)}
-          disabled={contractLoading || contractFrameOpened}
+          disabled={notReadyToSign}
         >
           <FormattedMessage {...messages.contractSignActionLabel} />
         </Button>

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

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

@@ -0,0 +1,49 @@
+import { renderHook } from '@testing-library/react';
+import { IntlWrapper } from 'utils/test/wrappers/IntlWrapper';
+import useDateFormat from '.';
+
+describe('useDateFormat', () => {
+  it('should format date with default options', () => {
+    const date = new Date('2022-03-28T00:00:00.000Z');
+    const { result: dateFormatter } = renderHook(useDateFormat, { wrapper: IntlWrapper });
+
+    expect(dateFormatter.current(date)).toBe('Mar 28, 2022');
+  });
+
+  it('should format date with custom options', () => {
+    const date = new Date('2022-03-28T00:00:00.000Z');
+    const { result: dateFormatter } = renderHook(
+      () =>
+        useDateFormat({
+          month: 'long',
+        }),
+      { wrapper: IntlWrapper },
+    );
+
+    expect(dateFormatter.current(date)).toBe('March 28, 2022');
+  });
+
+  it('date is undefined it should return undefined', () => {
+    const { result: dateFormatter } = renderHook(
+      () =>
+        useDateFormat({
+          month: 'long',
+        }),
+      { wrapper: IntlWrapper },
+    );
+
+    expect(dateFormatter.current(undefined)).toBe(undefined);
+  });
+
+  it('date is null it should return undefined', () => {
+    const { result: dateFormatter } = renderHook(
+      () =>
+        useDateFormat({
+          month: 'long',
+        }),
+      { wrapper: IntlWrapper },
+    );
+
+    expect(dateFormatter.current(null)).toBe(undefined);
+  });
+});

frontend/js/hooks/useDateFormat/index.tsx

@@ -0,0 +1,51 @@
+import { type FormatDateOptions, useIntl } from 'react-intl';
+import { Maybe, Nullable } from 'types/utils';
+
+export const DEFAULT_DATE_FORMAT: FormatDateOptions = {
+  day: '2-digit',
+  month: 'short',
+  year: 'numeric',
+};
+export const DATETIME_FORMAT: FormatDateOptions = {
+  ...DEFAULT_DATE_FORMAT,
+  hour: '2-digit',
+  minute: '2-digit',
+};
+
+/**
+ * This hook must be used within <IntlProvider />.
+ * It returns a method to format dates.
+ *
+ * By default, format options are:
+ * - day: '2-digit'
+ * - month: 'short'
+ * - year: 'numeric'
+ *
+ * In english, output looks like "Mar 28, 2022".
+ *
+ * If you need to customize output, you are able to do that globally on hook instanciation
+ * or for a specific date in formatDate call.
+ *
+ */
+const useDateFormat = (formatOptions: FormatDateOptions = {}) => {
+  const intl = useIntl();
+
+  function formatDate(
+    date: Maybe<Nullable<string | Date | number>>,
+    options: FormatDateOptions = {},
+  ) {
+    if (!date) {
+      return undefined;
+    }
+
+    return intl.formatDate(date, {
+      ...DEFAULT_DATE_FORMAT,
+      ...formatOptions,
+      ...options,
+    });
+  }
+
+  return formatDate;
+};
+
+export default useDateFormat;

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

@@ -7,7 +7,7 @@ import { noop } from 'utils';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { PER_PAGE } from 'settings';
 import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
-import { ReactQueryAppWrapper } from 'utils/test/wrappers/ReactQueryAppWrapper';
+import AppWrapper from 'utils/test/wrappers/AppWrapper';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { QueryConfig, FetchDataFunction } from './utils/fetchEntity';
 import useUnionResource from '.';
@@ -98,7 +98,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: ReactQueryAppWrapper },
+      { wrapper: AppWrapper },
     );
 
     expect(result.current.isLoading).toBe(true);
@@ -122,7 +122,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: ReactQueryAppWrapper },
+      { wrapper: AppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -141,7 +141,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: ReactQueryAppWrapper },
+      { wrapper: AppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -160,7 +160,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: ReactQueryAppWrapper },
+      { wrapper: AppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -203,7 +203,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: ReactQueryAppWrapper },
+      { wrapper: AppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -266,7 +266,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: ReactQueryAppWrapper },
+      { wrapper: AppWrapper },
     );
 
     expect(result.current.isLoading).toBe(true);
@@ -301,7 +301,7 @@ describe('useUnionResource', () => {
           queryAConfig: queries?.queryA || queryAConfig,
           queryBConfig: queries?.queryB || queryBConfig,
         }),
-      { wrapper: ReactQueryAppWrapper },
+      { wrapper: AppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -370,9 +370,7 @@ describe('useUnionResource', () => {
         }),
       {
         wrapper: ({ children }) => (
-          <ReactQueryAppWrapper queryOptions={{ client: queryClient }}>
-            {children}
-          </ReactQueryAppWrapper>
+          <AppWrapper queryOptions={{ client: queryClient }}>{children}</AppWrapper>
         ),
       },
     );
@@ -416,9 +414,7 @@ describe('useUnionResource', () => {
         }),
       {
         wrapper: ({ children }) => (
-          <ReactQueryAppWrapper queryOptions={{ client: queryClient }}>
-            {children}
-          </ReactQueryAppWrapper>
+          <AppWrapper queryOptions={{ client: queryClient }}>{children}</AppWrapper>
         ),
       },
     );