@bjsdistribution/dms-client-return 0.0.1

package/src/components/order-view/order-actions/actions/restore-products/RestoreProducts.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import { useCurrentAction } from '../../../store';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import ProductData from '../../../ProductData';
+
+const initialProducts = [
+  {
+    id: 1458784,
+    name: '[Weymounth Soft White Triple Wardrobe]',
+    parts: '(1/2)',
+    selected: false,
+  },
+  {
+    id: 41544,
+    name: 'Double Door Fridge',
+    parts: '(1/1)',
+    selected: false,
+  },
+  {
+    id: 87941,
+    name: 'Ventilation System for the Kitchen',
+    parts: '(5/5)',
+    selected: false,
+  },
+  {
+    id: 274893,
+    name: 'Portable Air Conditioner',
+    parts: '(2/3)',
+    selected: false,
+  },
+  {
+    id: 90235,
+    name: 'Electric Fireplace Heater',
+    parts: '(1/1)',
+    selected: false,
+  },
+  {
+    id: 574839,
+    name: '[Oakwood Classic Dining Table]',
+    parts: '(1/2)',
+    selected: false,
+  },
+  {
+    id: 183957,
+    name: 'Stainless Steel Dishwasher',
+    parts: '(3/3)',
+    selected: false,
+  },
+  {
+    id: 349589,
+    name: 'LED Smart TV',
+    parts: '(1/1)',
+    selected: false,
+  },
+  {
+    id: 209384,
+    name: 'Bluetooth Sound System',
+    parts: '(4/4)',
+    selected: false,
+  },
+  {
+    id: 918374,
+    name: 'Recliner Sofa Set',
+    parts: '(3/3)',
+    selected: false,
+  },
+  {
+    id: 748293,
+    name: '[Vintage Wooden Bookcase]',
+    parts: '(2/2)',
+    selected: false,
+  },
+  {
+    id: 573920,
+    name: 'Compact Washing Machine',
+    parts: '(1/1)',
+    selected: false,
+  },
+  {
+    id: 230948,
+    name: 'Automatic Coffee Machine',
+    parts: '(2/2)',
+    selected: false,
+  },
+];
+
+const RestoreProducts = () => {
+  const [products, setProducts] = useState(initialProducts);
+  const [showRestoreButton, setShowRestoreButton] = useState(false);
+  const [showNoRecords, setShowNoRecords] = useState(false);
+  const [, setCurrentAction] = useCurrentAction();
+
+  const handleCheckboxChange = (productId: number, isChecked: boolean) => {
+    const updatedProducts = products.map(product =>
+      product.id === productId ? { ...product, selected: isChecked } : product
+    );
+    setProducts(updatedProducts);
+
+    const anySelected = updatedProducts.some(product => product.selected);
+    setShowRestoreButton(anySelected);
+  };
+
+  const closeModal = () => {
+    setProducts(initialProducts);
+    setShowRestoreButton(false);
+    setShowNoRecords(false);
+    setCurrentAction(undefined);
+  };
+
+  const handleRestore = () => {
+    const updatedProducts = products.filter(product => !product.selected);
+    setProducts(updatedProducts);
+
+    if (updatedProducts.length === 0) {
+      setShowNoRecords(true);
+    }
+  };
+
+  return (
+    <>
+      <OrderActionModal
+        headerTitle="Restore Product"
+        onCloseHeader={closeModal}
+        onSubmit={handleRestore}
+        submitBtnTitle="Restore"
+        footerActions={showRestoreButton} // Controls visibility of footer actions (Restore button)
+      >
+        <ProductData
+          products={products}
+          handleCheckboxChange={handleCheckboxChange}
+          handleRestore={handleRestore} // Pass handleRestore function to ProductData
+          showNoRecords={showNoRecords}
+        />
+      </OrderActionModal>
+    </>
+  );
+};
+
+export default RestoreProducts;

package/src/components/order-view/order-actions/actions/send-email/SendEmailModal.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import { useCurrentAction } from '../../../store';
+import { ContentContainer, Label, StyledInput, StyledTextArea } from '../modalstyle';
+
+function SendEmailModal() {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+  };
+  return (
+    <OrderActionModal
+      headerTitle="Send Email"
+      onCloseHeader={closeModal}
+      onSubmit={() => {}}
+      submitBtnTitle="Send Email"
+    >
+      <ContentContainer>
+        <Label>To</Label>
+        <StyledInput
+          type="text"
+          name=""
+          required
+          placeholder="andy@aspire-technologies.com"
+          defaultValue={'andy@aspire-technologies.com'}
+        />
+        <Label>Subject</Label>
+        <StyledInput
+          type="text"
+          name=""
+          required
+          placeholder=""
+          defaultValue={'RICHER SOUNDS Order Update - B7049658-4064'}
+        />
+        <Label>Body</Label>
+        <StyledTextArea name="note" placeholder="Write here..." />
+      </ContentContainer>
+    </OrderActionModal>
+  );
+}
+
+export default SendEmailModal;

package/src/components/order-view/order-actions/actions/send-sms/SendSmsModal.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCurrentAction } from '../../../store';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import { ContentContainer, Label, StyledInput } from '../modalstyle';
+
+function SendSmsModal() {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+  };
+
+  return (
+    <OrderActionModal
+      headerTitle="Send Sms"
+      onCloseHeader={closeModal}
+      onSubmit={() => {}}
+      submitBtnTitle="Send SMS"
+    >
+      <ContentContainer>
+        <Label>To</Label>
+        <StyledInput type="text" name="" required placeholder="Enter the number" />
+
+        <Label>Body</Label>
+        <StyledInput type="text" name="" required placeholder="Write here..." />
+      </ContentContainer>
+    </OrderActionModal>
+  );
+}
+
+export default SendSmsModal;

package/src/components/order-view/order-actions/actions/split-order/SplitOrderTable.tsx

@@ -0,0 +1,260 @@
+import React from 'react';
+import styled from 'styled-components';
+
+function SplitOrderTable() {
+  return (
+    <GLobalPopupContent>
+      <TableSkelton>
+        <table>
+          <thead>
+            <tr>
+              <th>
+                <CustomCheckBox>
+                  <label className="container">
+                    <input type="checkbox" />
+                    <span className="checkmark"></span>
+                  </label>
+                </CustomCheckBox>
+              </th>
+              <th>Type</th>
+              <th>Code</th>
+              <th>Scan</th>
+              <th>Description</th>
+              <th>Delivery Instructions</th>
+              <th>Barcode</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <CustomCheckBox>
+                  <label className="container">
+                    <input type="checkbox" />
+                    <span className="checkmark"></span>
+                  </label>
+                </CustomCheckBox>
+              </td>
+              <td>
+                Return
+              </td>
+              <td>FFLMW-B1</td>
+              <td>Delivered</td>
+              <td>
+                Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF
+                3 TABLES - OAK
+              </td>
+              <td>
+                Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF
+                3 TABLES - OAK
+              </td>
+              <td>007022530015429326</td>
+            </tr>
+            <tr>
+              <td>
+                <CustomCheckBox>
+                  <label className="container">
+                    <input type="checkbox" />
+                    <span className="checkmark"></span>
+                  </label>
+                </CustomCheckBox>
+              </td>
+              <td>
+                Deliver
+              </td>
+              <td>FFLMW-B1</td>
+              <td>Location</td>
+              <td>
+                Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF
+                3 TABLES - OAK
+              </td>
+              <td>
+                Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF
+                3 TABLES - OAK
+              </td>
+              <td>007022530015429326</td>
+            </tr>
+            <tr>
+              <td>
+                <CustomCheckBox>
+                  <label className="container">
+                    <input type="checkbox" />
+                    <span className="checkmark"></span>
+                  </label>
+                </CustomCheckBox>
+              </td>
+              <td>
+                Return
+              </td>
+              <td>FFLMW-B1</td>
+              <td>Outstanding</td>
+              <td>
+                Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF
+                3 TABLES - OAK
+              </td>
+              <td>
+                Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF
+                3 TABLES - OAK
+              </td>
+              <td>007022530015429326</td>
+            </tr>
+          </tbody>
+        </table>
+      </TableSkelton>
+    </GLobalPopupContent>
+  );
+}
+
+const GLobalPopupContent = styled.div`
+  section {
+    padding: 0px 0 15px;
+    .filterCover {
+      border-radius: 16px;
+      border: 1px solid var(--tonal-brown-10, #edebe8);
+      background: #f8fafc;
+      display: flex;
+      gap: 30px;
+      padding: 15px;
+      gap: 15px;
+      .col {
+        width: 21%;
+        label {
+          color: #8d8f90;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 20px;
+          display: block;
+          margin-bottom: 4px;
+        }
+        .ant-select-single {
+          width: 100%;
+        }
+        select {
+          width: 100%;
+        }
+        &:first-child {
+          width: 43%;
+        }
+        &:last-child {
+          width: 33%;
+        }
+      }
+    }
+  }
+`;
+
+const TableSkelton = styled.div`
+  margin-top: -8px;
+  min-height: 400px;
+  table {
+    border-collapse: separate;
+    width: 100%;
+    border-spacing: 0px 8px;
+    thead {
+      tr {
+        th {
+          font-size: 14px;
+          font-weight: 600;
+          padding: 8px 15px;
+          text-align: left;
+          border-top: 1px solid rgba(0, 0, 0, 0.08);
+          border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+
+          background: #f0f2f2;
+          &:first-child {
+            border-radius: 20px 0 0 20px;
+          }
+          &:last-child {
+            border-radius: 0 20px 20px 0;
+          }
+        }
+      }
+    }
+    tbody {
+      tr {
+        td {
+          color: #3a3630;
+          font-size: 13px;
+          font-weight: 400;
+          line-height: 16px;
+          padding: 6px 15px;
+          text-align: left;
+          box-shadow: 3px 1px 3px 0px rgba(16, 24, 40, 0.1);
+
+          background: #fff;
+
+          &:first-child {
+            border-radius: 20px 0 0 20px;
+          }
+
+          &:last-child {
+            border-radius: 0 20px 20px 0;
+          }
+        }
+      }
+    }
+  }
+`;
+
+const CustomCheckBox = styled.div`
+  .container {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    width: 20px;
+    height: 20px;
+  }
+
+  .container input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 100%;
+    width: 100%;
+  }
+
+  .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #cfcfcf;
+    border-radius: 4px;
+  }
+
+  .container:hover input ~ .checkmark {
+    border-color: #7f7a7a;
+  }
+
+  .container input:checked ~ .checkmark {
+    background-color: #000;
+  }
+
+  .checkmark:after {
+    content: '';
+    position: absolute;
+    display: none;
+  }
+
+  .container input:checked ~ .checkmark:after {
+    display: block;
+  }
+
+  .container .checkmark:after {
+    left: 8px;
+    top: 4px;
+    width: 3px;
+    height: 6px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+`;
+
+export default SplitOrderTable;

package/src/components/order-view/order-actions/actions/split-order/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import styled from 'styled-components';
+import SplitOrderTable from './SplitOrderTable';
+import { useCurrentAction } from '../../../store';
+
+function SplitOrder() {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const onClose = () => {
+    setCurrentAction(undefined);
+  };
+
+  return (
+    <OrderActionModal
+      headerTitle="Split Order"
+      showAdditionalInfo
+      infoText="NICK OLIVER, YO42 2ST"
+      onCloseHeader={onClose}
+      onSubmit={() => {}}
+      submitBtnTitle="Split Order"
+    >
+      <ContentContainer>
+        <SplitOrderTable />
+      </ContentContainer>
+    </OrderActionModal>
+  );
+}
+
+const ContentContainer = styled.div`
+  display: flex;
+  padding: 15px 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 15px;
+  flex: 1 0 0;
+  border-radius: 15px;
+  background: #f8fafc;
+`;
+
+export default SplitOrder;

package/src/components/order-view/order-actions/actions/unhold-order/UnholdOrder.tsx

@@ -0,0 +1,42 @@
+import {
+  CancelAndCompleteAction,
+  CancelationModal,
+} from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { useCurrentAction, useIsOnHoldOrder } from '../../../store';
+
+const UnholdOrder = () => {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const [, setOnHoldOrder] = useIsOnHoldOrder();
+
+  const saveButton = () => {
+    setOnHoldOrder(false);
+    setCurrentAction(undefined);
+  };
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+  };
+  return (
+    <CancelationModal
+      title="Un-hold Order"
+      description="Are you sure, you want to Un-Hold the Order?"
+      actions={
+        <CustomCancelAndCompleteAction
+          cancelLabel="Cancel"
+          onCancel={closeModal}
+          completeLabel="Confirm"
+          onComplete={saveButton}
+        />
+      }
+    />
+  );
+};
+
+const CustomCancelAndCompleteAction = styled(CancelAndCompleteAction)`
+  justify-content: center;
+`;
+
+export default UnholdOrder;