@bjsdistribution/dms-client-return 0.0.83 → 0.0.84

package/src/components/order-view/order-actions/actions/escalation/NewEscalation.tsx

@@ -1,139 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import Escalation from './index';
-import { CustomCheckBox, TableSkelton } from '../update-product-type/UpdateProductTypeStyle';
-
-const NewEscalation = () => {
-  const [showContent, setShowContent] = useState(false);
-
-  const handleClick = () => {
-    setShowContent(!showContent);
-  };
-
-  const handleCancel = () => {
-    setShowContent(false);
-  };
-
-  return (
-    <>
-      <Component>
-        Want to Create New Escalation?
-        <Flex>
-          <Button onClick={handleClick}>
-            {showContent ? 'SAVE' : 'CLICK HERE'}
-          </Button>
-          {showContent && (
-            <>
-              <CancelButton onClick={handleCancel}>CANCEL</CancelButton>
-            </>
-          )}
-        </Flex>
-      </Component>
-
-      {showContent && (
-        <>
-          <Escalation />
-        </>
-      )}
-      <TableSkelton>
-        <table>
-          <thead>
-            <tr>
-              <th>
-                <CustomCheckBox>
-                  <label className="container">
-                    <input type="checkbox" />
-                    <span className="checkmark"></span>
-                  </label>
-                </CustomCheckBox>
-              </th>
-              <th>ID</th>
-              <th>Level</th>
-              <th>Escalation</th>
-              <th>Order Status</th>
-              <th>Warehouse</th>
-              <th>Timed Service</th>
-              <th>Routed</th>
-              <th>Pre Route Pre-Call</th>
-              <th>Stock Check</th>
-              <th>Stock Check</th>
-              <th>Driver Pre-Call</th>
-              <th>Del Status</th>
-              <th>Post call</th>
-              <th>Status</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                <CustomCheckBox>
-                  <label className="container">
-                    <input type="checkbox" />
-                    <span className="checkmark"></span>
-                  </label>
-                </CustomCheckBox>
-              </td>
-              <td>VIP4</td>
-              <td>B63015484248[Test] WAYVER</td>
-              <td>Allocated to Route</td>
-              <td>Revieved Picked</td>
-              <td>Data</td>
-              <td>Data</td>
-              <td>Data</td>
-              <td>Data</td>
-              <td>Data</td>
-              <td>Data</td>
-              <td>Data</td>
-              <td>Done</td>
-              <td>Done</td>
-              <td>Status</td>
-            </tr>
-          </tbody>
-        </table>
-      </TableSkelton>
-    </>
-  );
-};
-
-const Component = styled.div`
-  display: flex;
-  width: 98%;
-  padding: 15px 12px;
-  justify-content: space-between;
-  align-items: center;
-  gap: 15px;
-  border-radius: 15px;
-  background: #f8fafc;
-`;
-
-const Button = styled.button`
-  border-radius: 20px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  background: #3a3630;
-  display: flex;
-  padding: 6px 10px;
-  align-items: flex-start;
-  gap: 16px;
-  color: white;
-  cursor: pointer;
-`;
-
-const Flex = styled.div`
-  display: flex;
-  gap: 10px;
-`;
-
-const CancelButton = styled.button`
-  display: flex;
-  padding: 6px 10px;
-  align-items: flex-start;
-  gap: 16px;
-  border-radius: 20px;
-  border: 1px solid #e95252;
-  background: #f8fafc;
-  color: #e95252; /* Added this line to set text color */
-  text-decoration-color: #e95252;
-  cursor: pointer;
-`;
-
-export default NewEscalation;

package/src/components/order-view/order-actions/actions/escalation/Notes.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { TextArea } from '@bjsdistribution/dms-component-library';
-import styled from 'styled-components';
-
-const Notes = () => {
-  const StyledTextArea = styled(TextArea)`
-    display: flex;
-    height: 135px;
-    width: 240px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
-    flex: 1 0 0;
-    border-radius: 12px;
-    //border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);
-    background: var(--Flowkit-White, #fff);
-    resize: none;
-  `;
-
-  const Label = styled.label`
-    font-family: 'lato', sans-serif;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 20px;
-    color: var(--tonal-brown-651, #6a7378);
-  `;
-  return (
-    <div>
-      <Label>Note</Label>
-      <StyledTextArea name="note" placeholder="" />
-    </div>
-  );
-};
-
-export default Notes;

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import Dropdowns from './Dropdowns';
-import Notes from './Notes';
-import styled from 'styled-components';
-import Upgrade from './upgrade';
-const Flex = styled.div`
-  border-radius: 15px;
-  background: #f8fafc;
-  display: flex;
-  /* flex-wrap: wrap; */
-  gap: 15px;
-  padding: 20px;
-  width: 97%;
-  @media (max-width: 768px) {
-    flex-direction: column;
-    padding: 10px;
-    gap: 10px;
-  }
-`;
-const Escalation = () => {
-  return (
-    <>
-      <Flex>
-        <Dropdowns />
-        <Notes />
-        <Upgrade />
-      </Flex>
-    </>
-  );
-};
-export default Escalation;

package/src/components/order-view/order-actions/actions/escalation/upgrade/index.tsx

@@ -1,198 +0,0 @@
-import React from 'react';
-import {
-  AntSelect,
-  Label,
-  Switch,
-} from '@bjsdistribution/dms-component-library';
-import styled from 'styled-components';
-import { notification } from 'antd';
-
-const Upgrade = () => {
-  const handleSelectChange = () => {
-    // alert('hello');
-
-    notification.success({
-      message: 'Success',
-      description: 'Upgrade successfully.',
-    });
-  };
-
-  return (
-    <>
-      <Wrapper>
-        <Heading>Upgrade</Heading>
-        <Container>
-          <Top>
-            <InnerCont>
-              <Toggle
-                label={'Timed Service'}
-                checked={true}
-                onChange={(_event: React.ChangeEvent<HTMLInputElement>) => {
-                  throw new Error('Function not implemented.');
-                }}
-                name={''}
-              />
-            </InnerCont>
-          </Top>
-          <InnerCont>
-            <Label label="Time Slot" />
-            <StyledAntSelect
-              options={[]}
-              placeholder="Select Customer"
-              onChange={handleSelectChange}
-              disabled={false}
-              showSearch={true}
-              popupClassName={'dropDownStyle'}
-              selectWrapperClass={'rounded'}
-            />
-          </InnerCont>
-          <Top>
-            <InnerCont>
-              <Toggle
-                label={'Chargeable'}
-                checked={false}
-                onChange={(_event: React.ChangeEvent<HTMLInputElement>) => {
-                  throw new Error('Function not implemented.');
-                }}
-                name={''}
-              />
-            </InnerCont>
-          </Top>
-          <Top>
-            <InnerCont>
-              <Toggle
-                label={'Additional Time'}
-                checked={false}
-                onChange={(_event: React.ChangeEvent<HTMLInputElement>) => {
-                  throw new Error('Function not implemented.');
-                }}
-                name={''}
-              />
-            </InnerCont>
-          </Top>
-          <InnerCont>
-            <Label label="Drop Time" />
-            <StyledAntSelect
-              options={[]}
-              placeholder="Select Customer"
-              onChange={handleSelectChange}
-              disabled={false}
-              showSearch={true}
-              popupClassName={'dropDownStyle'}
-              selectWrapperClass={'rounded'}
-            />
-          </InnerCont>
-          <Top>
-            <InnerCont>
-              <Toggle
-                label={'Chargeable'}
-                checked={false}
-                onChange={(_event: React.ChangeEvent<HTMLInputElement>) => {
-                  throw new Error('Function not implemented.');
-                }}
-                name={''}
-              />
-            </InnerCont>
-          </Top>
-        </Container>
-      </Wrapper>
-      <GiftWrapper>
-        <BJSGift>
-          <Box />
-        </BJSGift>
-        <BJSGift>
-          <Box />
-        </BJSGift>
-      </GiftWrapper>
-    </>
-  );
-};
-
-const GiftWrapper = styled.div`
-  display: flex;
-  gap: 15px;
-  padding-top: 45px;
-`;
-
-const Box = styled.div`
-  position: relative;
-  width: 20px;
-  height: 20px;
-  border: 1px solid #ccc;
-  border-radius: 10px;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 11px;
-    height: 11px;
-    background-color: #ccc;
-    border-radius: 2px;
-    display: none;
-  }
-`;
-
-const Wrapper = styled.div``;
-
-const BJSGift = styled.div`
-  display: flex;
-  width: 130px;
-  height: 93px;
-  padding: 10px 15px 15px 10px;
-  flex-direction: column;
-  align-items: flex-start;
-  border-radius: 15px;
-  border: 1px solid #e0e2e7;
-
-  /* &:hover ${Box}::after {
-    display: block;
-  } */
-`;
-
-const Toggle = styled(Switch)`
-  padding: 15px;
-`;
-
-const Heading = styled.div`
-  color: #3a3630;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 16px;
-`;
-
-const Container = styled.div`
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 15px;
-  align-items: center;
-
-  @media (max-width: 768px) {
-    grid-template-columns: 1fr;
-    gap: 10px;
-  }
-`;
-
-const InnerCont = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  flex: 1;
-`;
-
-const Top = styled.div`
-  padding-top: 35px;
-`;
-
-const StyledAntSelect = styled(AntSelect)`
-  width: 100%;
-  height: 40px;
-
-  @media (max-width: 768px) {
-    width: 100%;
-  }
-`;
-
-export default Upgrade;

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

@@ -1,139 +0,0 @@
-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;