feat(react): create draft orders react

packages/react/src/__tests__/__snapshots__/index.test.ts.snap

@@ -335,6 +335,8 @@ Object {
   "useCountryAddressSchemas": [Function],
   "useCountryStateCities": [Function],
   "useCountryStates": [Function],
+  "useDraftOrder": [Function],
+  "useDraftOrders": [Function],
   "useExchange": [Function],
   "useExchangeBookRequest": [Function],
   "useExchangeFilters": [Function],

packages/react/src/checkout/draftOrders/__tests__/useDraftOrder.test.tsx

@@ -0,0 +1,156 @@
+import { cleanup, renderHook } from '@testing-library/react';
+import {
+  draftOrderId,
+  mockDraftOrderItemId as itemId,
+  mockDraftOrderResponse,
+  mockDraftOrderState,
+  mockInitialStateDraftOrders,
+} from 'tests/__fixtures__/checkout/draftOrders.fixtures.mjs';
+import {
+  fetchDraftOrder,
+  removeDraftOrder,
+  removeDraftOrderItem,
+  updateDraftOrder,
+  updateDraftOrderItem,
+} from '@farfetch/blackout-redux';
+import { mockDraftOrdersQuery as query } from 'tests/__fixtures__/checkout/index.mjs';
+import { useDraftOrder } from '../../index.js';
+import { withStore } from '../../../../tests/helpers/index.js';
+import type {
+  DraftOrder,
+  DraftOrderData,
+  PatchDraftOrderItemData,
+} from '@farfetch/blackout-client';
+
+jest.mock('@farfetch/blackout-redux', () => ({
+  ...jest.requireActual('@farfetch/blackout-redux'),
+  fetchDraftOrder: jest.fn(() => () => Promise.resolve()),
+  updateDraftOrder: jest.fn(() => () => Promise.resolve()),
+  updateDraftOrderItem: jest.fn(() => () => Promise.resolve()),
+  removeDraftOrder: jest.fn(() => () => Promise.resolve()),
+  removeDraftOrderItem: jest.fn(() => () => Promise.resolve()),
+}));
+
+const mockFetchConfig = {
+  myCustomParameter: 10,
+};
+
+const getRenderedHook = (
+  state = mockInitialStateDraftOrders,
+  draftOrderId: DraftOrder['id'],
+) => {
+  const {
+    result: { current },
+  } = renderHook(() => useDraftOrder(draftOrderId, query), {
+    wrapper: withStore(state),
+  });
+
+  return current;
+};
+
+describe('useDraftOrder', () => {
+  beforeEach(jest.clearAllMocks);
+
+  afterEach(cleanup);
+
+  it('should return values correctly with initial state', () => {
+    const current = getRenderedHook(mockDraftOrderState, draftOrderId);
+
+    expect(current).toStrictEqual({
+      isFetched: true,
+      isLoading: false,
+      error: null,
+      updateIsLoading: false,
+      updateError: null,
+      removeIsLoading: false,
+      removeError: null,
+      draftOrder: mockDraftOrderResponse,
+      actions: {
+        fetch: expect.any(Function),
+        update: expect.any(Function),
+        updateItem: expect.any(Function),
+        remove: expect.any(Function),
+        removeItem: expect.any(Function),
+      },
+    });
+  });
+
+  it('should return the loading state correctly to fetch', () => {
+    const { isLoading } = getRenderedHook(mockDraftOrderState, draftOrderId);
+
+    expect(isLoading).toBe(false);
+  });
+
+  it('should return the loading state correctly to update', () => {
+    const { updateIsLoading } = getRenderedHook(
+      mockDraftOrderState,
+      draftOrderId,
+    );
+
+    expect(updateIsLoading).toBe(false);
+  });
+
+  it('should return the loading state correctly to remove', () => {
+    const { removeIsLoading } = getRenderedHook(
+      mockDraftOrderState,
+      draftOrderId,
+    );
+
+    expect(removeIsLoading).toBe(false);
+  });
+
+  it('should return the error state correctly to fetch', () => {
+    const { error } = getRenderedHook(mockDraftOrderState, draftOrderId);
+
+    expect(error).toBeNull();
+  });
+
+  it('should return the error state correctly to update', () => {
+    const { updateError } = getRenderedHook(mockDraftOrderState, draftOrderId);
+
+    expect(updateError).toBeNull();
+  });
+
+  it('should return the error state correctly to remove', () => {
+    const { removeError } = getRenderedHook(mockDraftOrderState, draftOrderId);
+
+    expect(removeError).toBeNull();
+  });
+
+  it('should return the a draft order state correctly', () => {
+    const { draftOrder } = getRenderedHook(mockDraftOrderState, draftOrderId);
+
+    expect(draftOrder).toStrictEqual(mockDraftOrderResponse);
+  });
+
+  describe('actions', () => {
+    it('should call `fetch`, `update`, `updateItem`, `remove` and `removeItem` action', () => {
+      const {
+        actions: { fetch, update, updateItem, remove, removeItem },
+      } = getRenderedHook(mockDraftOrderState, draftOrderId);
+
+      const dataOrder: DraftOrderData = {
+        metadata: {
+          message: 'Some engraved message within the product',
+        },
+      };
+
+      const dataItem: PatchDraftOrderItemData = {
+        quantity: 2,
+        ...dataOrder,
+      };
+
+      fetch(draftOrderId, query, mockFetchConfig);
+      update(draftOrderId, dataOrder, mockFetchConfig);
+      updateItem(draftOrderId, itemId, dataItem, mockFetchConfig);
+      remove(draftOrderId, mockFetchConfig);
+      removeItem(draftOrderId, itemId, mockFetchConfig);
+
+      expect(fetchDraftOrder).toHaveBeenCalled();
+      expect(updateDraftOrder).toHaveBeenCalled();
+      expect(updateDraftOrderItem).toHaveBeenCalled();
+      expect(removeDraftOrderItem).toHaveBeenCalled();
+      expect(removeDraftOrder).toHaveBeenCalled();
+    });
+  });
+});

packages/react/src/checkout/draftOrders/__tests__/useDraftOrders.test.tsx

@@ -0,0 +1,177 @@
+import { cleanup, renderHook } from '@testing-library/react';
+import {
+  createDraftOrder,
+  fetchDraftOrder as fetchDraftOrderAction,
+  fetchDraftOrders,
+  removeDraftOrder,
+  removeDraftOrderItem,
+  updateDraftOrder,
+  updateDraftOrderItem,
+} from '@farfetch/blackout-redux';
+import {
+  draftOrderId,
+  mockDraftOrderItemId as itemId,
+  mockDraftOrderResponse,
+  mockDraftOrderState,
+  mockInitialStateDraftOrders,
+  mockDraftOrdersQuery as query,
+} from 'tests/__fixtures__/checkout/draftOrders.fixtures.mjs';
+import { checkoutId as orderId } from 'tests/__fixtures__/checkout/checkout.fixtures.mjs';
+import { useDraftOrders } from '../../index.js';
+import { withStore } from '../../../../tests/helpers/index.js';
+import type {
+  DraftOrderData,
+  DraftOrdersQuery,
+  PatchDraftOrderItemData,
+  PostDraftOrderData,
+} from '@farfetch/blackout-client';
+import type { UseDraftOrdersOptions } from '../hooks/types/useDraftOrders.js';
+
+jest.mock('@farfetch/blackout-redux', () => ({
+  ...jest.requireActual('@farfetch/blackout-redux'),
+  fetchDraftOrder: jest.fn(() => () => Promise.resolve()),
+  fetchDraftOrders: jest.fn(() => () => Promise.resolve()),
+  createDraftOrder: jest.fn(() => () => Promise.resolve()),
+  updateDraftOrder: jest.fn(() => () => Promise.resolve()),
+  updateDraftOrderItem: jest.fn(() => () => Promise.resolve()),
+  removeDraftOrder: jest.fn(() => () => Promise.resolve()),
+  removeDraftOrderItem: jest.fn(() => () => Promise.resolve()),
+}));
+
+const options = {
+  enableAutoFetch: true,
+  fetchConfig: { myCustomParameter: 10 },
+  orderId,
+};
+
+const getRenderedHook = (
+  state = mockInitialStateDraftOrders,
+  query: DraftOrdersQuery,
+  options?: UseDraftOrdersOptions,
+) => {
+  const {
+    result: { current },
+  } = renderHook(() => useDraftOrders(query, options), {
+    wrapper: withStore(state),
+  });
+
+  return current;
+};
+
+describe('useDraftOrders', () => {
+  beforeEach(jest.clearAllMocks);
+
+  afterEach(cleanup);
+
+  it('should return values correctly with initial state', () => {
+    const current = getRenderedHook(mockDraftOrderState, query, options);
+
+    expect(current).toStrictEqual({
+      isFetched: true,
+      isLoading: false,
+      createIsLoading: false,
+      error: null,
+      createError: null,
+      draftOrders: [mockDraftOrderResponse],
+      actions: {
+        fetch: expect.any(Function),
+        fetchDraftOrder: expect.any(Function),
+        create: expect.any(Function),
+        remove: expect.any(Function),
+        removeItem: expect.any(Function),
+        update: expect.any(Function),
+        updateItem: expect.any(Function),
+      },
+    });
+  });
+
+  it('should return the loading state correctly to draft orders', () => {
+    const { isLoading } = getRenderedHook(mockDraftOrderState, query, options);
+
+    expect(isLoading).toBe(false);
+  });
+
+  it('should return the loading state correctly to create draft order', () => {
+    const { createIsLoading } = getRenderedHook(
+      mockDraftOrderState,
+      query,
+      options,
+    );
+
+    expect(createIsLoading).toBe(false);
+  });
+
+  it('should return the error state correctly to draft orders', () => {
+    const { error } = getRenderedHook(mockDraftOrderState, query, options);
+
+    expect(error).toBeNull();
+  });
+
+  it('should return the error state correctly to create draft order', () => {
+    const { createError } = getRenderedHook(
+      mockDraftOrderState,
+      query,
+      options,
+    );
+
+    expect(createError).toBeNull();
+  });
+
+  it('should return the a draft orders state correctly to draft orders', () => {
+    const { draftOrders } = getRenderedHook(
+      mockDraftOrderState,
+      query,
+      options,
+    );
+
+    expect(draftOrders).toStrictEqual([mockDraftOrderResponse]);
+  });
+
+  describe('actions', () => {
+    it('should call `fetch` all draft orders and `fetchDraftOrder`,  `create`, `remove`, `removeItem`, `update`, `updateItem` of a draft order action', () => {
+      const {
+        actions: {
+          fetch,
+          fetchDraftOrder,
+          create,
+          remove,
+          removeItem,
+          update,
+          updateItem,
+        },
+      } = getRenderedHook(mockDraftOrderState, query, options);
+
+      const data: PostDraftOrderData = {
+        orderId: 12343243,
+        customerId: '123',
+      };
+
+      const dataOrder: DraftOrderData = {
+        metadata: {
+          message: 'Some engraved message within the product',
+        },
+      };
+
+      const dataItem: PatchDraftOrderItemData = {
+        quantity: 2,
+        ...dataOrder,
+      };
+
+      fetch(query);
+      create(data);
+      fetchDraftOrder(draftOrderId, query, options.fetchConfig);
+      update(draftOrderId, dataOrder, options.fetchConfig);
+      updateItem(draftOrderId, itemId, dataItem, options.fetchConfig);
+      remove(draftOrderId, options.fetchConfig);
+      removeItem(draftOrderId, itemId, options.fetchConfig);
+
+      expect(fetchDraftOrderAction).toHaveBeenCalled();
+      expect(fetchDraftOrders).toHaveBeenCalled();
+      expect(createDraftOrder).toHaveBeenCalled();
+      expect(updateDraftOrder).toHaveBeenCalled();
+      expect(updateDraftOrderItem).toHaveBeenCalled();
+      expect(removeDraftOrderItem).toHaveBeenCalled();
+      expect(removeDraftOrder).toHaveBeenCalled();
+    });
+  });
+});

packages/react/src/checkout/draftOrders/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useDraftOrder } from './useDraftOrder.js';
+export { default as useDraftOrders } from './useDraftOrders.js';

packages/react/src/checkout/draftOrders/hooks/types/index.ts

@@ -0,0 +1,2 @@
+export * from './useDraftOrder.js';
+export * from './useDraftOrders.js';

packages/react/src/checkout/draftOrders/hooks/types/useDraftOrder.ts

@@ -0,0 +1,7 @@
+import type { Config, DraftOrderItem } from '@farfetch/blackout-client';
+
+export type UseDraftOrderOptions = {
+  enableAutoFetch?: boolean;
+  fetchConfig?: Config;
+  itemId?: DraftOrderItem['id'];
+};

packages/react/src/checkout/draftOrders/hooks/types/useDraftOrders.ts

@@ -0,0 +1,7 @@
+import type { CheckoutOrder, Config } from '@farfetch/blackout-client';
+
+export type UseDraftOrdersOptions = {
+  enableAutoFetch?: boolean;
+  fetchConfig?: Config;
+  orderId?: CheckoutOrder['id'];
+};