@bjsdistribution/dms-client-return 0.0.83 → 0.0.84

package/src/components/order-view/general-information/LockOrder.tsx

@@ -1,113 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import TruckIcon from '../../../assets/icons/TruckIcon';
-import HeavyItemIcon from '../../../assets/icons/HeavyItemIcon';
-import LargeItemIcon from '../../../assets/icons/LargeItemIcon';
-import Tippy from '@tippyjs/react';
-import 'tippy.js/dist/tippy.css';
-import LockIcon from '../../../assets/icons/LockIcon';
-import UnlockIcon from '../../../assets/icons/UnlockIcon';
-import { useCurrentAction, useOrderDetails } from '../store';
-
-function LockOrder() {
-  const [apiData] = useOrderDetails();
-  const [, setCurrentAction] = useCurrentAction();
-  const isLocked = apiData?.order_locked;
-  const toggleLock = () => {
-    setCurrentAction('order-lock');
-  };
-
-  return (
-    <Container>
-      <TruckContainer>
-        <TruckIcon />
-      </TruckContainer>
-      <Name>{apiData?.order_recipient?.recipient_name}</Name>
-      <strong>,</strong>
-      <Name>{apiData?.order_recipient?.postcode}</Name>
-      {apiData?.order_services_detail?.heavy_item && (
-        <Tippy
-          content={<TooltipContent>Heavy Item</TooltipContent>}
-          placement="top"
-          arrow={true}
-        >
-          <HeavyItemContainer>
-            <HeavyItemIcon />
-          </HeavyItemContainer>
-        </Tippy>
-      )}
-      {apiData?.order_services_detail?.bulky_item && (
-        <Tippy
-          content={<TooltipContent>Large Item</TooltipContent>}
-          placement="top"
-          arrow={true}
-        >
-          <HeavyItemContainer>
-            <LargeItemIcon />
-          </HeavyItemContainer>
-        </Tippy>
-      )}
-      <LockOrderText onClick={toggleLock}>
-        {!isLocked ? <UnlockIcon /> : <LockIcon />}
-        {!isLocked ? 'Lock Order' : 'Remove Lock:'}
-        {isLocked && <TextWithRed>Rahul</TextWithRed>}
-      </LockOrderText>
-    </Container>
-  );
-}
-
-const TruckContainer = styled.div`
-  padding: 8px;
-  background-color: #feba30;
-  border-radius: 10px;
-`;
-
-const HeavyItemContainer = styled.div`
-  background-color: #eceae3;
-  padding: 5px;
-  border-radius: 5px;
-  border: 1px solid #d6d6d6;
-`;
-
-const Name = styled.div`
-  /* heading/h3-subHeader */
-  font-family: 'Roboto', sans-serif;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 900;
-  line-height: 32px; /* 160% */
-  text-transform: uppercase;
-`;
-
-const TooltipContent = styled.div`
-  background-color: #333;
-  color: #fff;
-  padding: 5px 10px;
-  border-radius: 5px;
-`;
-
-const TextWithRed = styled.span`
-  color: red;
-`;
-
-const LockOrderText = styled.div`
-  border-radius: 5px;
-  padding: 8px;
-  gap: 10px;
-  display: flex;
-  color: white;
-  background-color: #3a3630;
-  cursor: pointer;
-  font-family: 'lato', sans-serif;
-  margin-left: auto;
-  align-items: center;
-`;
-
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 0 20px;
-`;
-
-export default LockOrder;

package/src/components/order-view/general-information/dropdowns/BjsMenu.tsx

@@ -1,66 +0,0 @@
-import {
-  SelectDropdown,
-  dropdownStyles,
-  filterDropdownStyles,
-} from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import { bjsMenu } from '../../fakedata';
-import { useCurrentAction, useStatusDetails } from '../../store';
-
-function BjsMenu() {
-  const [, setCurrentAction] = useCurrentAction();
-  const handleSelectChange = (selectedOption: any) => {
-    setCurrentAction(selectedOption.value);
-  };
-
-  const [orderStatus] = useStatusDetails();
-
-  const isReleased = orderStatus[0]?.released;
-
-  const filteredOptions = bjsMenu?.filter(option => {
-    if (isReleased) {
-      return option.value !== 'release-order';
-    } else {
-      return option;
-    }
-  });
-
-  return (
-    <SelectDropdown
-      placeholder="BJS MENU"
-      inputId="bjsmenu"
-      options={filteredOptions}
-      onChange={handleSelectChange}
-      isSearchable={false}
-      styles={{
-        ...dropdownStyles,
-        ...filterDropdownStyles,
-        container: styles => ({
-          ...styles,
-          cursor: 'pointer',
-        }),
-        menu: styles => ({
-          ...styles,
-          top: '113%',
-          borderRadius: '5px',
-          width: 'max-content',
-          cursor: 'pointer',
-        }),
-        control: styles => ({
-          ...styles,
-          width: '105px',
-          boxShadow: 'none',
-          borderColor: 'transparent',
-          cursor: 'pointer',
-          '&:hover': {
-            boxShadow: 'none',
-            borderColor: 'transparent',
-          },
-        }),
-      }}
-      value="BJS MENU"
-    />
-  );
-}
-
-export default BjsMenu;

package/src/components/order-view/general-information/dropdowns/CreateTask.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { FontContainer } from './helper';
-import { useCurrentAction, useOrderDetails } from '../../store';
-import {
-  useCreateReminderPayload,
-  useCreateTaskPayload,
-} from '../../order-actions/store';
-
-function CreateTask() {
-  const [, setCurrentAction] = useCurrentAction();
-  const [OrderDetails] = useOrderDetails();
-  const [, setPayload] = useCreateTaskPayload();
-  const [, setReminderPayload] = useCreateReminderPayload();
-
-  const openModal = () => {
-    if (OrderDetails) {
-      setPayload((prevState: any) => ({
-        ...prevState,
-        order_id: OrderDetails?.order_routes?.order_id,
-        customer_id: OrderDetails.customer_id,
-        associated_object_id: 1,
-        associated_object_name: 'orders',
-      }));
-      setReminderPayload((prevState: any) => ({
-        ...prevState,
-        order_id: OrderDetails?.order_routes?.order_id,
-      }));
-    }
-    setCurrentAction('create-task');
-  };
-
-  return <FontContainer onClick={openModal}>Create Task</FontContainer>;
-}
-export default CreateTask;

package/src/components/order-view/general-information/dropdowns/SendEmail.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { FontContainer } from './helper';
-import { useCurrentAction } from '../../store';
-
-const SendEmail = () => {
-  const [, setCurrentAction] = useCurrentAction();
-
-  const openModal = () => {
-    setCurrentAction('send-email');
-  };
-  return <FontContainer onClick={openModal}>Send Email</FontContainer>;
-};
-
-export default SendEmail;

package/src/components/order-view/general-information/dropdowns/SendSms.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { FontContainer } from './helper';
-import { useCurrentAction } from '../../store';
-
-function SendSms() {
-  const [, setCurrentAction] = useCurrentAction();
-
-  const openModal = () => {
-    setCurrentAction('send-sms');
-  };
-  return <FontContainer onClick={openModal}>Send SMS</FontContainer>;
-}
-
-export default SendSms;

package/src/components/order-view/general-information/dropdowns/Tasks.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { FontContainer } from './helper';
-
-function Tasks () {
-  return <FontContainer>TASKS</FontContainer>;
-};
-
-export default Tasks;

package/src/components/order-view/general-information/dropdowns/Videos.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { FontContainer } from './helper';
-
-function Videos () {
-  return <FontContainer>Videos</FontContainer>;
-};
-
-export default Videos;

package/src/components/order-view/general-information/dropdowns/ViewEpod.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { FontContainer } from './helper';
-
-function ViewEpod() {
-  return <FontContainer>View ON EPOD</FontContainer>;
-}
-
-export default ViewEpod;

package/src/components/order-view/general-information/dropdowns/helper.tsx

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-
-export const FontContainer: any = styled.div`
-  color: #6a7378;
-  text-align: center;
-  font-family: 'lato', sans-serif;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 18px;
-  text-transform: uppercase;
-  cursor: pointer;
-  @media screen and (max-width: 1210px) {
-    font-size: 11px;
-    line-height: 12px;
-  }
-`;

package/src/components/order-view/general-information/dropdowns/index.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import BjsMenu from './BjsMenu';
-import Print from './Print';
-import Options from '../../details-filters/left-side-filters/dropdowns/OptionsDropDown';
-function DropDownOptions() {
-  return (
-    <Container>
-      <BjsMenu />
-      <Options />
-      <Print />
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  padding: 0 20px;
-  gap: 10px;
-  align-items: center;
-  border-top: 1px solid #ccc;
-  font-size: 14px;
-  cursor: pointer;
-
-  > * + * {
-    border-left: 1px solid #ccc;
-    padding-left: 10px;
-    height: 40px;
-    align-content: center;
-
-    @media screen and (max-width: 1210px) {
-      padding-left: 5px;
-    }
-  }
-
-  > :last-child {
-    border-right: 1px solid #ccc;
-    padding-right: 10px;
-  }
-
-  @media screen and (max-width: 1210px) {
-    flex-wrap: wrap;
-  }
-`;
-
-export default DropDownOptions;

package/src/components/order-view/modalsPopup/AddProduct.tsx

@@ -1,234 +0,0 @@
-import React from 'react';
-import { AntSelect } from '@bjsdistribution/dms-component-library';
-import styled from 'styled-components';
-import BarCode from '../../../assets/icons/BarCode';
-import WeightIcon from '../../../assets/icons/WeightIcon';
-import CbmIcon from '../../../assets/icons/CbmIcon';
-import { useCreateOrderProducts, useOrderStaticData } from '../store';
-import { CreateProduct } from '../types';
-
-const AddProduct = () => {
-  const [orderProduct, setOrderProduct] = useCreateOrderProducts();
-  const [orderStaticData] = useOrderStaticData();
-
-  const typeOptions = orderStaticData?.order_product_type?.map(
-    (option: any) => ({
-      label: option?.type,
-      value: option?.id,
-    })
-  );
-
-  const handleInputChange = (
-    index: number,
-    field: keyof CreateProduct,
-    value: any
-  ) => {
-    setOrderProduct((prevProducts: any) => {
-      const newProducts = [...prevProducts];
-      newProducts[index] = {
-        ...newProducts[index],
-        [field]: value,
-      };
-      return newProducts;
-    });
-  };
-
-  const onSelectChange = (index: number, value: any) => {
-    handleInputChange(index, 'product_type_id', +value);
-  };
-
-  const onSearch = (value: string) => {
-    console.log('search item value:', value);
-  };
-
-  return (
-    <GLobalPopupContent>
-      <SimpleTable>
-        <table>
-          <thead>
-            <tr>
-              <th>Product Type</th>
-              <th style={{ width: '130px' }}>
-                <span>
-                  Code <em>*</em>
-                </span>
-              </th>
-              <th style={{ width: '33%' }}>
-                <span>
-                  Description <em>*</em>
-                </span>
-              </th>
-              <th>Barcode</th>
-              <th style={{ width: '120px' }}>Weight</th>
-              <th style={{ width: '120px' }}>CBM</th>
-            </tr>
-          </thead>
-          <tbody>
-            {orderProduct.length > 0 &&
-              orderProduct?.map((item: any, index: number) => (
-                <tr key={index}>
-                  <td>
-                    <AntSelect
-                      options={typeOptions}
-                      placeholder="Deliver"
-                      onChange={value => onSelectChange(index, value)}
-                      disabled={false}
-                      style={{ width: 120 }}
-                      onSearch={onSearch}
-                      showSearch={true}
-                      popupClassName={'dropDownStyle'}
-                      selectWrapperClass={''}
-                    />
-                  </td>
-                  <td>
-                    <div className="inputWrap">
-                      <input
-                        type="text"
-                        placeholder="code"
-                        value={item.code}
-                        onChange={e =>
-                          handleInputChange(index, 'code', e.target.value)
-                        }
-                      />
-                    </div>
-                  </td>
-                  <td>
-                    <div className="inputWrap">
-                      <input
-                        type="text"
-                        placeholder="Enter Description of Product"
-                        value={item.description}
-                        onChange={e =>
-                          handleInputChange(
-                            index,
-                            'description',
-                            e.target.value
-                          )
-                        }
-                      />
-                    </div>
-                  </td>
-                  <td>
-                    <div className="inputWrap">
-                      <input
-                        type="text"
-                        placeholder="Enter barcode of product"
-                        value={item.sku}
-                        onChange={e =>
-                          handleInputChange(index, 'sku', e.target.value)
-                        }
-                      />
-                      <BarCode />
-                    </div>
-                  </td>
-                  <td>
-                    <div className="inputWrap">
-                      <input
-                        type="text"
-                        placeholder="00.00"
-                        value={item.weight}
-                        onChange={e =>
-                          handleInputChange(
-                            index,
-                            'weight',
-                            parseFloat(e.target.value)
-                          )
-                        }
-                      />
-                      <WeightIcon />
-                    </div>
-                  </td>
-                  <td>
-                    <div className="inputWrap">
-                      <input
-                        type="text"
-                        placeholder="00.00"
-                        value={item.cube}
-                        onChange={e =>
-                          handleInputChange(
-                            index,
-                            'cube',
-                            parseFloat(e.target.value)
-                          )
-                        }
-                      />
-                      <CbmIcon />
-                    </div>
-                  </td>
-                </tr>
-              ))}
-          </tbody>
-        </table>
-      </SimpleTable>
-    </GLobalPopupContent>
-  );
-};
-
-export default AddProduct;
-
-const GLobalPopupContent = styled.div``;
-
-const SimpleTable = styled.div`
-  padding: 0 15px;
-  min-height: 158px;
-  table {
-    border-spacing: 0px 12px;
-    border-collapse: separate;
-    thead {
-      tr {
-        th {
-          padding: 0 10px 0;
-          color: #6a7378;
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 500;
-          line-height: 20px;
-          text-align: left;
-          span {
-            position: relative;
-            em {
-              color: #fc5555;
-              font-style: normal;
-            }
-          }
-        }
-      }
-    }
-    tbody {
-      tr {
-        td {
-          padding: 10px 8px;
-          background: #f8fafc;
-          box-shadow: 5px 1px 5px 0px rgba(16, 24, 40, 0.1);
-
-          .inputWrap {
-            position: relative;
-            input[type='text'] {
-              border-radius: 6px;
-              border: 1px solid #e0e2e7;
-              background: #fff;
-              box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-              padding: 8px 10px;
-              width: 100%;
-              padding-right: 30px;
-              &:focus-visible {
-                outline: none;
-              }
-            }
-            svg {
-              position: absolute;
-              right: 11px;
-              top: 7px;
-            }
-          }
-          &:first-child {
-            border-radius: 5px 0 0 5px;
-          }
-          &:last-child {
-            border-radius: 0 5px 5px 0;
-          }
-        }
-      }
-    }
-  }
-`;