openboxes · awalkowiak · Jun 3, 2024 · May 28, 2024 · May 28, 2024 · May 28, 2024
diff --git a/grails-app/conf/runtime.groovy b/grails-app/conf/runtime.groovy
@@ -257,6 +257,7 @@ openboxes {
                     defaultLabel: "Stock Movement",
                     menuItems: [
                         [label: "outbound.create.label", defaultLabel: "Create Outbound Movements", href: "/stockMovement/createOutbound?direction=OUTBOUND"],
+                        [label: "outbound.import.label", defaultLabel: "Import Completed Outbound", href: "/stockMovement/importOutboundStockMovement"],
                         [label: "outbound.list.label", defaultLabel: "List Outbound Movements", href: "/stockMovement/list?direction=OUTBOUND"],
                         [label: "requests.list.label", defaultLabel: "List Requests", href: "/stockMovement/list?direction=OUTBOUND&sourceType=ELECTRONIC"],
                         [label: "outboundReturns.create.label", defaultLabel: "Create Outbound Return", href: "/stockTransfer/createOutboundReturn"]

diff --git a/grails-app/controllers/org/pih/warehouse/inventory/StockMovementController.groovy b/grails-app/controllers/org/pih/warehouse/inventory/StockMovementController.groovy
@@ -66,6 +66,10 @@ class StockMovementController {
         render(view: "/common/react", params: params)
     }
 
+    def importOutboundStockMovement() {
+        render(view: "/common/react", params: params)
+    }
+
     def createInbound() {
         render(view: "/common/react", params: params)
     }

diff --git a/grails-app/i18n/messages.properties b/grails-app/i18n/messages.properties
@@ -3777,6 +3777,7 @@ inbound.create.label=Create Inbound Movement
 stockRequest.create.label=Create Stock Request
 inbound.list.label=List Inbound Movements
 outbound.create.label=Create Outbound Movement
+outbound.import.label=Import Completed Outbound
 outbound.list.label=List Outbound Movements
 requests.list.label=List Requests
 outboundReturns.create.label=Create Outbound Return

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "@fortawesome/free-solid-svg-icons": "5.14.0",
     "@fortawesome/react-fontawesome": "0.1.8",
     "@hookform/resolvers": "3.3.4",
+    "@testing-library/react-hooks": "8.0.1",
     "axios": "1.6.8",
     "bootstrap": "4.6.2",
     "chart.js": "2.9.4",

diff --git a/src/js/components/Router.jsx b/src/js/components/Router.jsx
@@ -169,6 +169,11 @@ const AsyncProductSupplierCreatePage = Loadable({
   loading: Loading,
 });
 
+const AsyncOutboundImport = Loadable({
+  loader: () => import('components/stock-movement-wizard/outboundImport/OutboundImport'),
+  loading: Loading,
+});
+
 const StockMovementList = (props) => {
   const parsedSearchQuery = queryString.parse(props?.location?.search);
   const direction = parsedSearchQuery?.direction?.toUpperCase();
@@ -208,6 +213,7 @@ const Router = (props) => {
             <MainLayoutRoute path="**/putAway/create/:putAwayId?" component={AsyncPutAwayMainPage} />
             <MainLayoutRoute path="**/stockMovement/list" component={StockMovementList} />
             <MainLayoutRoute path="**/stockMovement/createOutbound/:stockMovementId?" component={AsyncStockMovement} />
+            <MainLayoutRoute path="**/stockMovement/importOutboundStockMovement" component={AsyncOutboundImport} />
             <MainLayoutRoute path="**/stockMovement/createInbound/:stockMovementId?" component={AsyncStockMovementInbound} />
             <MainLayoutRoute path="**/stockMovement/createCombinedShipments/:stockMovementId?" component={AsyncStockMovementCombinedShipments} />
             <MainLayoutRoute path="**/stockMovement/createRequest/:stockMovementId?" component={AsyncStockMovementRequest} />

diff --git a/src/js/components/stock-movement-wizard/outboundImport/OutboundImport.jsx b/src/js/components/stock-movement-wizard/outboundImport/OutboundImport.jsx
@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react';
+
+import OutboundImportConfirm from 'components/stock-movement-wizard/outboundImport/OutboundImportConfirm';
+import OutboundImportDetails from 'components/stock-movement-wizard/outboundImport/OutboundImportDetails';
+import WizardStepsV2 from 'components/wizard/v2/WizardStepsV2';
+import useWizard from 'hooks/useWizard';
+
+const OutboundImport = () => {
+  const OutboundImportStep = {
+    DETAILS: {
+      key: 'DETAILS',
+      // TODO: Make titles translatable in OBPIH-6329
+      title: 'Create',
+    },
+    CONFIRM: {
+      key: 'CONFIRM',
+      title: 'Confirm',
+    },
+  };
+  const steps = useMemo(() => [
+    {
+      key: OutboundImportStep.DETAILS.key,
+      title: OutboundImportStep.DETAILS.title,
+      Component: () => (<OutboundImportDetails />),
+    },
+    {
+      key: OutboundImportStep.CONFIRM.key,
+      title: OutboundImportStep.CONFIRM.title,
+      Component: () => (<OutboundImportConfirm />),
+    },
+  ], []);
+
+  const stepsTitles = steps.map((step) => ({
+    title: step.title,
+    key: step.key,
+  }));
+
+  const [
+    Step,
+    {
+      next,
+      previous,
+    },
+  ] = useWizard({ initialKey: OutboundImportStep.DETAILS.key, steps });
+
+  return (
+    <div>
+      <WizardStepsV2 steps={stepsTitles} currentStepKey={Step.key} />
+      <Step.Component />
+      <button type="button" onClick={() => previous()}>previous</button>
+      <button type="button" onClick={() => next()}>next</button>
+    </div>
+  );
+};
+
+export default OutboundImport;
diff --git a/src/js/components/stock-movement-wizard/outboundImport/OutboundImportConfirm.jsx b/src/js/components/stock-movement-wizard/outboundImport/OutboundImportConfirm.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const OutboundImportConfirm = () => {
+  return (
+    <div>
+      Confirm
+    </div>
+  );
+};
+
+export default OutboundImportConfirm;
diff --git a/src/js/components/stock-movement-wizard/outboundImport/OutboundImportDetails.jsx b/src/js/components/stock-movement-wizard/outboundImport/OutboundImportDetails.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const OutboundImportDetails = () => (
+  <div>
+    Details
+  </div>
+);
+
+export default OutboundImportDetails;
diff --git a/src/js/components/wizard/v2/WizardStepsV2.jsx b/src/js/components/wizard/v2/WizardStepsV2.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import 'components/wizard/WizardSteps.scss';
+
+const WizardStepsV2 = ({ steps, currentStepKey }) => {
+  const isCurrentStep = (iteratedStep) => iteratedStep.key === currentStepKey;
+  return (
+    <div className="steps-main-box">
+      <div className="steps-inside-wrapper">
+        {steps.map((step) => (
+          <div
+            key={step.key}
+            className={`step-container ${isCurrentStep(step) ? 'active' : ''}`}
+            data-testid="wizard-step"
+            data-stepstate={isCurrentStep(step) ? 'active' : 'inactive'}
+          >
+            <div
+              className="circle"
+            />
+            <div className="step-name">
+              {step.title}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default WizardStepsV2;
+
+WizardStepsV2.propTypes = {
+  steps: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      key: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string,
+      ]).isRequired,
+    }),
+  ).isRequired,
+  currentStepKey: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]).isRequired,
+};
diff --git a/src/js/hooks/useWizard.js b/src/js/hooks/useWizard.js
@@ -0,0 +1,75 @@
+import { useMemo, useState } from 'react';
+
+import PropTypes from 'prop-types';
+
+const useWizard = ({ initialKey, steps }) => {
+  const [key, setKey] = useState(initialKey);
+
+  const stepProperties = useMemo(() => {
+    const foundStepIdx = steps.findIndex((s) => s.key === key);
+    // findIndex returns -1 if the index is not found for given predicate
+    if (foundStepIdx === -1) {
+      throw new Error('Wizard step has not been found!');
+    }
+    return {
+      Step: steps[foundStepIdx],
+      currentStepIdx: foundStepIdx,
+    };
+  }, [key, initialKey]);
+
+  const first = () => {
+    setKey(steps[0]?.key);
+  };
+
+  const last = () => {
+    const lastIdx = steps.length - 1;
+    setKey(steps[lastIdx]?.key);
+  };
+
+  const next = () => {
+    const nextStepIdx = stepProperties.currentStepIdx + 1;
+    const nextStep = steps[nextStepIdx];
+    if (nextStep) {
+      setKey(nextStep.key);
+    }
+  };
+
+  const previous = () => {
+    const previousStepIdx = stepProperties.currentStepIdx - 1;
+    if (previousStepIdx >= 0) {
+      setKey(steps[previousStepIdx]?.key);
+    }
+  };
+
+  const { Step } = stepProperties;
+
+  return [
+    Step,
+    {
+      set: setKey,
+      first,
+      next,
+      previous,
+      last,
+    },
+  ];
+};
+
+export default useWizard;
+
+useWizard.propTypes = {
+  initialKey: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]).isRequired,
+  steps: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      key: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string,
+      ]).isRequired,
+      Component: PropTypes.node.isRequired,
+    }),
+  ).isRequired,
+};
diff --git a/src/js/tests/hooks/useWizard.test.jsx b/src/js/tests/hooks/useWizard.test.jsx
@@ -0,0 +1,86 @@
+import React from 'react';
+
+import { act, renderHook } from '@testing-library/react-hooks';
+
+import useWizard from 'hooks/useWizard';
+
+describe('Changing steps', () => {
+  const steps = [
+    {
+      key: 1,
+      Component: () => (<div>First compoment</div>),
+      title: 'First',
+    },
+    {
+      key: 2,
+      Component: () => (<div>Second compoment</div>),
+      title: 'Second',
+    },
+    {
+      key: 3,
+      Component: () => (<div>Third compoment</div>),
+      title: 'Third',
+    },
+    {
+      key: 4,
+      Component: () => (<div>Fourth compoment</div>),
+      title: 'Fourth',
+    },
+  ];
+
+  it('should start with the initial key', () => {
+    const { result } = renderHook(() => useWizard({ initialKey: 3, steps }));
+
+    expect(result.current[0].key).toEqual(3);
+  });
+
+  it('should go to next step', () => {
+    const { result } = renderHook(() => useWizard({ initialKey: 2, steps }));
+
+    act(() => {
+      result.current[1].next();
+    });
+
+    expect(result.current[0].key).toEqual(3);
+  });
+
+  it('should go to previous step', () => {
+    const { result } = renderHook(() => useWizard({ initialKey: 4, steps }));
+
+    act(() => {
+      result.current[1].previous();
+    });
+
+    expect(result.current[0].key).toEqual(3);
+  });
+
+  it('should go to specific step', () => {
+    const { result } = renderHook(() => useWizard({ initialKey: 1, steps }));
+
+    act(() => {
+      result.current[1].set(4);
+    });
+
+    expect(result.current[0].key).toEqual(4);
+  });
+
+  it('should go to last step', () => {
+    const { result } = renderHook(() => useWizard({ initialKey: 1, steps }));
+
+    act(() => {
+      result.current[1].last();
+    });
+
+    expect(result.current[0].key).toEqual(4);
+  });
+
+  it('should go to first step', () => {
+    const { result } = renderHook(() => useWizard({ initialKey: 3, steps }));
+
+    act(() => {
+      result.current[1].first();
+    });
+
+    expect(result.current[0].key).toEqual(1);
+  });
+});