EmployeeWebClient - add router provider to storybook config

employee-web-client/.storybook/preview.tsx

@@ -1,5 +1,6 @@
 import { IntlProvider } from 'react-intl';
 import { withReactQuery, withSuspense } from '../src/utils/storybook';
+import { withRouter } from 'storybook-addon-react-router-v6';
 
 const { theme } = require('../src/utils/theme');
 
@@ -25,6 +26,7 @@ export const decorators = [
       {story()}
     </IntlProvider>
   ),
+  withRouter,
   withReactQuery(),
   withSuspense(),
 ];

employee-web-client/package.json

@@ -45,6 +45,7 @@
     "rxjs": "^6.6.6",
     "typescript": "4.6.3",
     "use-context-selector": "^1.3.7",
+    "uuid": "^9.0.0",
     "web-vitals": "^0.2.4",
     "yup": "^0.29.3",
     "zustand": "^3.6.5"
@@ -106,6 +107,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/react-select": "^3.1.2",
     "@types/react-text-mask": "^5.4.6",
+    "@types/uuid": "^8.3.4",
     "@types/yup": "^0.29.11",
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint": "8.6.0",

employee-web-client/src/pages/Offers/Offers.stories.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { withParams } from 'utils/storybook';
+import { managementMockService } from 'utils/mock';
+import { FacilityFixture, generateID, MetaFixture, OfferFixture } from 'utils';
+
+import { IOfferCollection, OfferStatus } from 'modules/offers/application/types';
+import { offersQueryKey } from 'modules/offers/infrastructure/query';
+import { FacilityProvider } from 'modules/context/application';
+import Offers from './index';
+
+const FACILITY_ID = generateID();
+const OFFER_ID_1 = generateID();
+const OFFER_ID_2 = generateID();
+
+const facility = FacilityFixture.createPermutation({ facilityId: FACILITY_ID });
+const offer1 = OfferFixture.createPermutation({
+  facilityId: FACILITY_ID,
+  offerId: OFFER_ID_1,
+  name: 'Existing offer 1',
+  status: OfferStatus.Active,
+});
+const offer2 = OfferFixture.createPermutation({
+  facilityId: FACILITY_ID,
+  offerId: OFFER_ID_2,
+  name: 'Existing offer 2',
+  status: OfferStatus.Active,
+});
+
+managementMockService.get<IOfferCollection>(offersQueryKey(FACILITY_ID)[0], {
+  meta: MetaFixture.createPermutation({ total: 2 }),
+  collection: [offer1, offer2],
+});
+
+export default {
+  title: 'pages/OffersPage',
+  component: Offers,
+  decorators: [withParams()],
+} as ComponentMeta<typeof Offers>;
+
+const Template: ComponentStory<typeof Offers> = () => {
+  return (
+    <FacilityProvider value={facility}>
+      <Offers />
+    </FacilityProvider>
+  );
+};
+
+export const Default = Template.bind({});

employee-web-client/src/utils/fixtures/generateID.ts

@@ -0,0 +1,3 @@
+import { v4 } from 'uuid';
+
+export const generateID = () => v4();

employee-web-client/src/utils/fixtures/index.ts

@@ -4,3 +4,4 @@ export { OfferFixture } from './OfferFixture';
 export { FacilityFixture } from './FacilityFixture';
 export { MetaFixture } from './MetaFixture';
 export { CustomerFixture } from './CustomerFixture';
+export { generateID } from './generateID';

employee-web-client/src/utils/storybook/index.ts

@@ -2,3 +2,4 @@ export { SuspenseFallback } from './SuspenseFallback';
 export { withReactQuery } from './withReactQuery';
 export { withSuspense } from './withSuspense';
 export { withRHF } from './withRHF';
+export { withParams } from './withParams';

employee-web-client/src/utils/storybook/withParams.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useNavigate, useLocation, NavigateOptions } from 'react-router-dom';
+
+import { QueryParamsProvider } from 'shared/Params';
+
+// eslint-disable-next-line react/display-name
+export const withParams = () => (story: any) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  return (
+    <QueryParamsProvider
+      location={location}
+      history={{
+        push: navigate,
+        replace: (to: string, options?: NavigateOptions) => navigate(to, { replace: true, ...options }),
+      }}
+    >
+      {story()}
+    </QueryParamsProvider>
+  );
+};

employee-web-client/yarn.lock

@@ -5067,6 +5067,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
+"@types/uuid@^8.3.4":
+  version "8.3.4"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
+  integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
+
 "@types/warning@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
@@ -17144,6 +17149,11 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+
 v8-compile-cache@^2.0.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"