richie-education 2.28.2-dev39 → 2.28.2-dev53

package/js/components/SignContractButton/index.omniscientOrders.spec.tsx

@@ -5,11 +5,12 @@ import { MemoryRouter } from 'react-router-dom';
 import userEvent from '@testing-library/user-event';
 import { QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
-import { ContractFactory, CredentialOrderFactory } from 'utils/test/factories/joanie';
+import { CunninghamProvider } from '@openfun/cunningham-react';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { ContractFactory, CredentialOrderFactory } from 'utils/test/factories/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { useOmniscientOrders } from 'hooks/useOrders';
-import { CredentialOrder } from 'types/Joanie';
+import { OrderState, CredentialOrder } from 'types/Joanie';
 import { SessionProvider } from 'contexts/SessionContext';
 import SignContractButton from '.';
 
@@ -30,13 +31,15 @@ jest.mock('settings', () => ({
 describe('<SignContractButton/>', () => {
   const Wrapper = ({ children }: PropsWithChildren) => {
     return (
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <SessionProvider>
-            <MemoryRouter>{children}</MemoryRouter>
-          </SessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>
+      <CunninghamProvider>
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <MemoryRouter>{children}</MemoryRouter>
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>
+      </CunninghamProvider>
     );
   };
 
@@ -64,6 +67,7 @@ describe('<SignContractButton/>', () => {
       );
     };
     const order = CredentialOrderFactory({
+      state: OrderState.TO_SIGN,
       contract: ContractFactory({ student_signed_on: undefined }).one(),
     }).one();
     fetchMock.get(
@@ -114,6 +118,7 @@ describe('<SignContractButton/>', () => {
     fetchMock.get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, signedOrder, {
       overwriteRoutes: true,
     });
+    fetchMock.post(`https://joanie.endpoint/api/v1.0/signature/notifications/`, 200);
     const $modal = screen.getByTestId('dashboard-contract-frame');
     await user.click(await within($modal).findByRole('button', { name: 'Sign' }));
 
@@ -121,11 +126,11 @@ describe('<SignContractButton/>', () => {
     expect(
       await within($modal).findByRole('heading', { name: 'Congratulations!' }),
     ).toBeInTheDocument();
-    // Orders's cache validation shouln't have close the ContractFrame.
+    // Orders's cache validation shouln't have closed the ContractFrame.
     expect(screen.queryByTestId('dashboard-contract-frame')).toBeInTheDocument();
 
     // Close modal.
-    const $closeButton = screen.getByRole('button', { name: 'Close dialog' });
+    const $closeButton = screen.getByRole('button', { name: 'close' });
     await user.click($closeButton);
     expect(screen.queryByTestId('dashboard-contract-frame')).not.toBeInTheDocument();
 

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

@@ -5,12 +5,13 @@ import { MemoryRouter } from 'react-router-dom';
 import userEvent from '@testing-library/user-event';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { faker } from '@faker-js/faker';
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import {
   ContractFactory,
   CredentialOrderFactory,
   NestedCredentialOrderFactory,
 } from 'utils/test/factories/joanie';
-import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
 import { Contract, CredentialOrder, NestedCredentialOrder, OrderState } from 'types/Joanie';
@@ -57,13 +58,15 @@ describe('<SignContractButton/>', () => {
     let order: CredentialOrder | NestedCredentialOrder;
     const Wrapper = ({ children }: PropsWithChildren) => {
       return (
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
-          <IntlProvider locale="en">
-            <JoanieApiProvider>
-              <MemoryRouter>{children}</MemoryRouter>
-            </JoanieApiProvider>
-          </IntlProvider>
-        </QueryClientProvider>
+        <CunninghamProvider>
+          <QueryClientProvider client={createTestQueryClient({ user: true })}>
+            <IntlProvider locale="en">
+              <JoanieApiProvider>
+                <MemoryRouter>{children}</MemoryRouter>
+              </JoanieApiProvider>
+            </IntlProvider>
+          </QueryClientProvider>
+        </CunninghamProvider>
       );
     };
 
@@ -77,7 +80,7 @@ describe('<SignContractButton/>', () => {
             testCase === TestCase.FROM_ORDER_WITH_CONTRACT
               ? ContractFactory({ student_signed_on: null }).one()
               : undefined;
-          order = OrderFactory({ contract: orderContract }).one();
+          order = OrderFactory({ contract: orderContract, state: OrderState.TO_SIGN }).one();
           contract = order.contract;
         }
       });
@@ -88,11 +91,10 @@ describe('<SignContractButton/>', () => {
             <SignContractButton order={order} contract={contract} writable={false} />
           </Wrapper>,
         );
-        expect(screen.getByRole('link', { name: 'Sign' })).toBeInTheDocument();
 
+        expect(screen.getByRole('link', { name: 'Sign' })).toBeInTheDocument();
         expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
         expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
-        expect(document.querySelector('div.ReactModalPortal')).not.toBeInTheDocument();
       });
 
       it('should display a button that open ContractFrame modal', async () => {
@@ -101,9 +103,9 @@ describe('<SignContractButton/>', () => {
             <SignContractButton order={order} contract={contract} writable={true} />
           </Wrapper>,
         );
+
         const $signButton = screen.queryByRole('button', { name: 'Sign' });
         expect($signButton).toBeInTheDocument();
-        expect(document.querySelector('div.ReactModalPortal')).toBeInTheDocument();
 
         expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
         expect(screen.queryByRole('link', { name: 'Sign' })).not.toBeInTheDocument();
@@ -145,7 +147,6 @@ describe('<SignContractButton/>', () => {
             <SignContractButton order={order} contract={contract} writable={false} />
           </Wrapper>,
         );
-        expect(document.querySelector('div.ReactModalPortal')).toBeInTheDocument();
 
         expect(screen.queryByRole('link', { name: 'Sign' })).not.toBeInTheDocument();
         expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
@@ -164,8 +165,6 @@ describe('<SignContractButton/>', () => {
           </Wrapper>,
         );
 
-        expect(document.querySelector('div.ReactModalPortal')).toBeInTheDocument();
-
         expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
         expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
         expect(screen.queryByRole('link', { name: 'Sign' })).not.toBeInTheDocument();
@@ -194,11 +193,10 @@ describe('<SignContractButton/>', () => {
             <SignContractButton order={order} contract={contract} writable={false} />
           </Wrapper>,
         );
-        expect(screen.queryByRole('button', { name: 'Download' })).toBeInTheDocument();
-        expect(document.querySelector('div.ReactModalPortal')).toBeInTheDocument();
 
-        expect(screen.queryByRole('link', { name: 'Sign' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Download' })).toBeInTheDocument();
         expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('link', { name: 'Sign' })).not.toBeInTheDocument();
       });
 
       it('should display a button to download the training contract', async () => {
@@ -214,8 +212,6 @@ describe('<SignContractButton/>', () => {
         );
 
         expect(screen.queryByRole('button', { name: 'Download' })).toBeInTheDocument();
-        expect(document.querySelector('div.ReactModalPortal')).toBeInTheDocument();
-
         expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
         expect(screen.queryByRole('link', { name: 'Sign' })).not.toBeInTheDocument();
       });

package/js/components/SignContractButton/index.tsx

@@ -67,7 +67,9 @@ const SignContractButton = ({ order, contract, writable, className }: SignContra
   const [contractLoading, setContractLoading] = useState(false);
   const contractState = ContractHelper.getState(contract);
   const notReadyToSign =
-    order.state !== OrderState.VALIDATED || contractLoading || contractFrameOpened;
+    ![OrderState.TO_SIGN, OrderState.SIGNING].includes(order.state) ||
+    contractLoading ||
+    contractFrameOpened;
 
   if (!writable && contractState === ContractState.UNSIGNED) {
     return <SignContractButtonLink orderId={order.id} className={className} />;

package/js/hooks/useCreditCards/index.spec.tsx

@@ -9,6 +9,7 @@ import { useCreditCard, useCreditCards } from 'hooks/useCreditCards/index';
 import { SessionProvider } from 'contexts/SessionContext';
 import { Deferred } from 'utils/test/deferred';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import { CreditCard } from 'types/Joanie';
 
 jest.mock('utils/context', () => ({
@@ -23,6 +24,7 @@ describe('useCreditCards', () => {
   beforeEach(() => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
   });
 
   afterEach(() => {
@@ -43,7 +45,9 @@ describe('useCreditCards', () => {
   it('retrieves all the credit cards', async () => {
     const creditCards = CreditCardFactory().many(5);
     const responseDeferred = new Deferred();
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', responseDeferred.promise);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', responseDeferred.promise, {
+      overwriteRoutes: true,
+    });
 
     const { result } = renderHook(() => useCreditCards(), {
       wrapper: Wrapper,
@@ -53,7 +57,6 @@ describe('useCreditCards', () => {
       expect(result.current.states.fetching).toBe(true);
       expect(result.current.items).toEqual([]);
     });
-    expect(result.current.states.creating).toBe(false);
     expect(result.current.states.deleting).toBe(false);
     expect(result.current.states.updating).toBe(false);
     expect(result.current.states.isPending).toBe(true);
@@ -67,7 +70,6 @@ describe('useCreditCards', () => {
       expect(result.current.states.fetching).toBe(false);
       expect(JSON.stringify(result.current.items)).toBe(JSON.stringify(creditCards));
     });
-    expect(result.current.states.creating).toBe(false);
     expect(result.current.states.deleting).toBe(false);
     expect(result.current.states.updating).toBe(false);
     expect(result.current.states.isPending).toBe(false);
@@ -78,7 +80,9 @@ describe('useCreditCards', () => {
     const creditCards = CreditCardFactory().many(5);
     const creditCard: CreditCard = creditCards[3];
     const responseDeferred = new Deferred();
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', responseDeferred.promise);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', responseDeferred.promise, {
+      overwriteRoutes: true,
+    });
     const { result } = renderHook(() => useCreditCard(creditCard.id), {
       wrapper: Wrapper,
     });
@@ -88,7 +92,6 @@ describe('useCreditCards', () => {
       expect(result.current.item).toEqual(undefined);
     });
 
-    expect(result.current.states.creating).toBe(false);
     expect(result.current.states.deleting).toBe(false);
     expect(result.current.states.updating).toBe(false);
     expect(result.current.states.isPending).toBe(true);
@@ -103,10 +106,71 @@ describe('useCreditCards', () => {
       expect(JSON.stringify(result.current.item)).toBe(JSON.stringify(creditCard));
     });
 
-    expect(result.current.states.creating).toBe(false);
     expect(result.current.states.deleting).toBe(false);
     expect(result.current.states.updating).toBe(false);
     expect(result.current.states.isPending).toBe(false);
     expect(result.current.states.error).toBe(undefined);
   });
+
+  it('tokenize a credit card', async () => {
+    const responseDeferred = new Deferred();
+    fetchMock.post(
+      'https://joanie.endpoint/api/v1.0/credit-cards/tokenize-card/',
+      responseDeferred.promise,
+    );
+    const { result } = renderHook(() => useCreditCards(undefined, { enabled: false }), {
+      wrapper: Wrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current).not.toBeNull();
+    });
+
+    await act(async () => {
+      result.current.methods.tokenize();
+    });
+
+    await waitFor(() => {
+      expect(result.current.states.tokenizing).toBe(true);
+    });
+
+    expect(result.current.states.deleting).toBe(false);
+    expect(result.current.states.updating).toBe(false);
+    expect(result.current.states.fetching).toBe(false);
+    expect(result.current.states.isFetched).toBe(true);
+    expect(result.current.states.isPending).toBe(true);
+    expect(result.current.states.error).toBe(undefined);
+
+    await act(async () => {
+      responseDeferred.resolve({});
+    });
+
+    expect(result.current.states.tokenizing).toBe(false);
+    expect(result.current.states.isPending).toBe(false);
+    expect(result.current.states.error).toBe(undefined);
+  });
+
+  it('manages error during credit card tokenization', async () => {
+    fetchMock.post(
+      'https://joanie.endpoint/api/v1.0/credit-cards/tokenize-card/',
+      HttpStatusCode.INTERNAL_SERVER_ERROR,
+    );
+    const { result } = renderHook(() => useCreditCards(undefined, { enabled: true }), {
+      wrapper: Wrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current).not.toBeNull();
+    });
+
+    await act(async () => {
+      await expect(result.current.methods.tokenize()).rejects.toThrow('Internal Server Error');
+    });
+
+    expect(result.current.states.error).toBe(
+      'An error occurred while adding a credit card. Please retry later.',
+    );
+    expect(result.current.states.isPending).toBe(false);
+    expect(result.current.states.tokenizing).toBe(false);
+  });
 });

package/js/hooks/useCreditCards/index.ts

@@ -1,8 +1,15 @@
-import { defineMessages } from 'react-intl';
-import { CreditCard } from 'types/Joanie';
-
+import { defineMessages, useIntl } from 'react-intl';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { API, CreditCard } from 'types/Joanie';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { useResource, useResources, UseResourcesProps } from '../useResources';
+import { useSessionMutation } from 'utils/react-query/useSessionMutation';
+import {
+  QueryOptions,
+  ResourcesQuery,
+  useResource,
+  useResourcesCustom,
+  UseResourcesProps,
+} from '../useResources';
 
 const messages = defineMessages({
   errorUpdate: {
@@ -20,10 +27,10 @@ const messages = defineMessages({
     description: 'Error message shown to the user when credit card deletion request fails.',
     defaultMessage: 'An error occurred while deleting the credit card. Please retry later.',
   },
-  errorCreate: {
-    id: 'hooks.useCreditCards.errorCreate',
-    description: 'Error message shown to the user when credit card creation request fails.',
-    defaultMessage: 'An error occurred while creating the credit card. Please retry later.',
+  errorTokenize: {
+    id: 'hooks.useCreditCards.errorTokenize',
+    description: 'Error message shown to the user when credit card tokenize request fails.',
+    defaultMessage: 'An error occurred while adding a credit card. Please retry later.',
   },
   errorNotFound: {
     id: 'hooks.useCreditCards.errorNotFound',
@@ -32,16 +39,47 @@ const messages = defineMessages({
   },
 });
 
+const useCreditCardResources =
+  (props: UseResourcesProps<CreditCard, ResourcesQuery, API['user']['creditCards']>) =>
+  (filters?: ResourcesQuery, queryOptions?: QueryOptions<CreditCard>) => {
+    const custom = useResourcesCustom({ ...props, filters, queryOptions });
+    const queryClient = useQueryClient();
+    const intl = useIntl();
+    const api = props.apiInterface();
+    const mutation = (props.session ? useSessionMutation : useMutation) as typeof useMutation;
+    const tokenizeHandler = mutation({
+      mutationFn: api.tokenize,
+      onSuccess: async () => {
+        custom.methods.setError(undefined);
+        props.onMutationSuccess?.(queryClient);
+      },
+      onError: () => custom.methods.setError(intl.formatMessage(messages.errorTokenize)),
+    });
+
+    return {
+      ...custom,
+      methods: {
+        ...custom.methods,
+        tokenize: tokenizeHandler.mutateAsync,
+      },
+      states: {
+        ...custom.states,
+        isPending: [tokenizeHandler, custom.states].some((value) => value?.isPending),
+        tokenizing: tokenizeHandler.isPending,
+      },
+    };
+  };
+
 /**
  * Joanie Api hook to retrieve/create/update/delete credit cards
  * owned by the authenticated user.
  */
-const props: UseResourcesProps<CreditCard> = {
+const props: UseResourcesProps<CreditCard, ResourcesQuery, API['user']['creditCards']> = {
   queryKey: ['creditCards'],
   apiInterface: () => useJoanieApi().user.creditCards,
   omniscient: true,
   session: true,
   messages,
 };
-export const useCreditCards = useResources<CreditCard>(props);
-export const useCreditCard = useResource<CreditCard>(props);
+export const useCreditCards = useCreditCardResources(props);
+export const useCreditCard = useResource(props);