@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,145 @@
+import React from 'react';
+import { AntTable } from '@bjsdistribution/dms-component-library';
+import { AntSelect } from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+import {  useOrderStaticData, useProductDetails } from '../store';
+import { capitalize } from '../utils';
+
+const BulkUpdateProduct = () => {
+  const [orderStaticData] = useOrderStaticData();
+  const [productdata] = useProductDetails();
+  const options = [
+    { value: 'bjsCouriers', label: 'BJS COURIERS' },
+    { value: 'bjsSales', label: 'BJS SALES' },
+    { value: 'test', label: 'TEST' },
+  ];
+
+
+  const columns = [
+    { key: 'checkbox', title: '', isCheckbox: true },
+    { key: 'type', title: 'Status', isSelect: true },
+    { key: 'code', title: 'Code' },
+    { key: 'description', title: 'Description' },
+    { key: 'sku', title: 'SKU' },
+  ];
+
+  const onChange = async (event: any) => {
+    console.log(event);
+  };
+
+  const collectionOptions = orderStaticData?.collect_reasons?.map(
+    (option: any) => ({
+      label: capitalize(option.reason),
+      value: option.id,
+    })
+  );
+
+  const returnActionOptions = orderStaticData?.order_product_return_action?.map(
+    (option: any) => ({
+      label: capitalize(option.type),
+      value: option.id,
+    })
+  );
+
+  const returnReasonsOptions = orderStaticData?.return_reasons?.map(
+    (option: any) => ({
+      label: option.reason,
+      value: option.id,
+    })
+  );
+
+  return (
+    <>
+      <GLobalPopupContent>
+        <section>
+          <div className="filterCover">
+            <div className="col">
+              <label>Collection Reason</label>
+              <AntSelect
+                options={collectionOptions || []}
+                placeholder="Select Collection Reason"
+                onChange={onChange}
+                disabled={false}
+                popupClassName={'dropDownStyle'}
+                selectWrapperClass={'rounded'}
+                defaultValue={'Select Collection Reason'}
+              />
+            </div>
+            <div className="col">
+              <label>Return Action</label>
+              <AntSelect
+                options={returnActionOptions || []}
+                placeholder="Return Action"
+                onChange={onChange}
+                disabled={false}
+                popupClassName={'dropDownStyle'}
+                selectWrapperClass={'rounded'}
+                defaultValue={'Select Return Action'}
+              />
+            </div>
+            <div className="col">
+              <label>Return Reason</label>
+              <AntSelect
+                options={returnReasonsOptions || []}
+                placeholder="Return Reason"
+                onChange={onChange}
+                disabled={false}
+                popupClassName={'dropDownStyle'}
+                selectWrapperClass={'rounded'}
+                defaultValue={'Select Return Reason'}
+              />
+            </div>
+          </div>
+        </section>
+        <AntTable
+          columns={columns}
+          data={productdata}
+          selectOptions={options}
+          onSelectChange={(value: any, record: any) =>
+            console.log('Selected value:', value, 'for record:', record)
+          }
+        />
+      </GLobalPopupContent>
+    </>
+  );
+};
+
+export default BulkUpdateProduct;
+
+const GLobalPopupContent = styled.div`
+  section {
+    padding: 15px 15px 0;
+    .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%;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { AntTable } from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+import { DefectsData } from '../utils';
+const DefectsModal = () => {
+  const options = [
+    { value: 'bjsCouriers', label: 'BJS COURIERS' },
+    { value: 'bjsSales', label: 'BJS SALES' },
+    { value: 'test', label: 'TEST' },
+  ];
+
+  const columns = [
+    { key: 'action', title: 'Action' },
+    { key: 'type', title: 'Type' },
+    { key: 'primary_position', title: 'Primary Position' },
+    { key: 'secondary_position', title: 'Secondary Position' },
+    { key: 'tertiary_position', title: 'Tertiary Position' },
+    { key: 'primary_details', title: 'Primary Details' },
+    { key: 'secondary_details', title: 'Secondary Details' },
+    { key: 'created_by', title: 'Created By' },
+    { key: 'date', title: 'Date' },
+    { key: 'images', title: 'Images' },
+  ];
+  return (
+    <>
+      <GLobalPopupContent>
+        <StyledConatiner>
+          <AntTable
+            columns={columns}
+            data={DefectsData}
+            selectOptions={options}
+            onSelectChange={(value: any, record: any) =>
+              console.log('Selected value:', value, 'for record:', record)
+            }
+          />
+        </StyledConatiner>
+      </GLobalPopupContent>
+    </>
+  );
+};
+const StyledConatiner = styled.div`
+  /* tex: nowrap; */
+`;
+export default DefectsModal;
+const GLobalPopupContent = styled.div``;

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

@@ -0,0 +1,117 @@
+import React, { useEffect } from 'react';
+import { useDeleteProdsID, useProductDetails } from '../store';
+import {
+  EmptyDataContainer,
+  StyledTable,
+  StyledTableWrapper,
+} from '../all-reminder/table-view/ReminderStyles';
+import { Empty, Skeleton } from 'antd';
+
+const DeleteProduct = () => {
+  const [productdata] = useProductDetails();
+  const [selectedRows, setSelectedRows] = useDeleteProdsID();
+
+  useEffect(() => {
+    console.log('Selected rows:', selectedRows);
+  }, [selectedRows]);
+
+  const handleSelectChange = (record: any) => {
+    setSelectedRows(prevSelectedRows => {
+      const isSelected = prevSelectedRows.some(row => row.id === record.id);
+      if (isSelected) {
+        return prevSelectedRows.filter(row => row.id !== record.id);
+      } else {
+        return [
+          ...prevSelectedRows,
+          { id: record.id, order_id: record.order_id },
+        ];
+      }
+    });
+  };
+
+  const handleSelectAll = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      const allRowIds = productdata
+        .filter((data: any) => !data.is_deleted)
+        .map((data: any) => ({
+          id: data.id,
+          order_id: data.order_id,
+        }));
+      setSelectedRows(allRowIds);
+    } else {
+      setSelectedRows([]);
+    }
+  };
+
+  const isRowSelected = (id: any) => {
+    return selectedRows.some(row => row.id === id);
+  };
+
+  const loadingskeleton = false;
+
+  const filteredProductData = productdata?.filter(
+    (data: any) => !data.is_deleted
+  );
+
+  return (
+    <StyledTableWrapper id="tableScrolling">
+      <StyledTable style={{ minWidth: 'auto', width: '100%' }}>
+        <thead>
+          <tr>
+            <th>
+              <input
+                type="checkbox"
+                onChange={handleSelectAll}
+                checked={
+                  filteredProductData.length > 0 &&
+                  selectedRows.length === filteredProductData.length
+                }
+              />
+            </th>
+            <th>Type</th>
+            <th>Code</th>
+            <th>Scan</th>
+            <th>Description</th>
+            <th>Barcode</th>
+          </tr>
+        </thead>
+        <tbody>
+          {loadingskeleton ? (
+            <tr>
+              <td colSpan={6}>
+                <Skeleton active />
+              </td>
+            </tr>
+          ) : filteredProductData.length === 0 ? (
+            <tr>
+              <td className="emptyTd" colSpan={7}>
+                <EmptyDataContainer>
+                  <Empty />
+                </EmptyDataContainer>
+              </td>
+            </tr>
+          ) : (
+            filteredProductData.map((data: any) => (
+              <tr key={data.id}>
+                <td>
+                  <input
+                    type="checkbox"
+                    checked={isRowSelected(data.id)}
+                    onChange={() => handleSelectChange(data)}
+                  />
+                </td>
+                <td>{data?.order_product_type?.type}</td>
+                <td>{data?.code}</td>
+                <td>{data?.scan}</td>
+                <td>{data?.description}</td>
+                <td>{data?.sku}</td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </StyledTable>
+    </StyledTableWrapper>
+  );
+};
+
+export default DeleteProduct;

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

@@ -0,0 +1,403 @@
+import React, { useEffect, useState } from 'react';
+import { AntModal, useApiHook } from '@bjsdistribution/dms-component-library';
+import { useAtom } from 'jotai';
+import {
+  countReducerAtom,
+  selectedProductIdAtom,
+  selectedTabKeyAtom,
+  useCreateOrderProducts,
+  useDeleteProdsID,
+  useOrderId,
+  useProductDetails,
+  useRecieveOrderProducts,
+  useUpdateOrderProducts,
+} from '../store';
+
+import ProductAction from './ProductAction';
+import BulkUpdateProduct from './BulkUpdateProduct';
+import DeleteProduct from './DeleteProduct';
+import AddProduct from './AddProduct';
+import logsTable from './qclogs/logsTable';
+import DefectsModal from './DefectsModal';
+import repackModal from './RepackModal';
+import { ApiResponse, DeleteProds } from '../types';
+const ModalManager = () => {
+  const [popupName, dispatch] = useAtom(countReducerAtom);
+  const [, setProductData] = useProductDetails();
+  const [orderProduct, setOrderProduct] = useCreateOrderProducts();
+  const [orderId] = useOrderId();
+  const [selectedRows, setSelectedRows] = useDeleteProdsID();
+  const [unRecieve, setUnRecieve] = useRecieveOrderProducts();
+  const [updateOrderProduct, setUpdateOrderProduct] = useUpdateOrderProducts();
+  const [selectedProductId] = useAtom(selectedProductIdAtom);
+  const [selectedTab] = useAtom(selectedTabKeyAtom);
+  const [isFormValid, setIsFormValid] = useState(false);
+
+  console.log(orderProduct, 'abcabcabcabcabcabcabcabcabcabcabc');
+
+  const closeModal = () => {
+    dispatch({ type: 'close' });
+  };
+
+  const validateForm = () => {
+    console.log(selectedRows, 'selectedRowsselectedRowsselectedRows');
+    return selectedRows?.length > 0;
+  };
+
+  useEffect(() => {
+    setIsFormValid(validateForm());
+  }, [selectedRows]);
+
+  const payloads: DeleteProds[] = selectedRows?.map(row => ({
+    id: row.id,
+    order_id: row.order_id,
+  }));
+
+  const { data: isresponse, setShouldPerformAction: setaction } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `order/order_products/delete/`,
+    method: 'DELETE',
+    body: payloads,
+    performAction: false,
+  });
+
+  // Effect to handle API response
+  useEffect(() => {
+    if (isresponse && isresponse?.data) {
+      handleRemoveRow();
+      dispatch({ type: 'close' });
+    }
+  }, [isresponse]);
+  const onDeleteProducts = () => {
+    if (isFormValid) {
+      setaction(true);
+    } else {
+      console.log('Please fill in all required fields before proceeding.');
+    }
+  };
+
+  const handleRemoveRow = () => {
+    if (selectedRows.length > 0) {
+      setProductData((prevProductData: any) =>
+        prevProductData.filter(
+          (item: any) => !selectedRows.some(row => row.id === item.id)
+        )
+      );
+      setSelectedRows([]);
+    }
+  };
+
+  // API block for creating product order
+  const {
+    data: response,
+    setShouldPerformAction: setOrderAction,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `order/order_products/create/`,
+    method: 'POST',
+    body: [orderProduct],
+    performAction: false,
+  });
+
+  const validateAddForm = () => {
+    if (!Array.isArray(orderProduct)) return false;
+
+    return orderProduct.every(
+      (product: any) =>
+        product.code !== '' &&
+        product.description !== '' &&
+        product.weight !== 0 &&
+        product.cube !== 0 &&
+        product.order_product_type_id !== 0 &&
+        product.sku !== ''
+    );
+  };
+
+  useEffect(() => {
+    setAddIsFormValid(validateAddForm());
+  }, [orderProduct]);
+
+  const onAddOrderProduct = () => {
+    if (isAddFormValid) {
+      setOrderProduct((prev: any) =>
+        prev.map((product: any) => ({
+          ...product,
+          order_id: orderId,
+        }))
+      );
+      setOrderAction(true);
+    } else {
+      console.log('Please fill in all required fields before proceeding.');
+    }
+  };
+
+  useEffect(() => {
+    if (response && response?.data) {
+      dispatch({ type: 'close' });
+    }
+  }, [response]);
+
+  const [isAddFormValid, setAddIsFormValid] = useState(false);
+
+  const AddMore = () => {
+    setOrderProduct((prevProducts: any) => [
+      ...prevProducts,
+      {
+        code: '',
+        description: '',
+        sku: '',
+        weight: '',
+        cube: '',
+        order_product_type_id: '',
+      },
+    ]);
+  };
+
+  // api block for the create product order
+  const {
+    data: actionResponse,
+    setShouldPerformAction: setUnrecieveaction,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `order/order_products/unrecieve/`,
+    method: 'POST',
+    body: [unRecieve],
+    performAction: false,
+  });
+
+  useEffect(() => {
+    if (actionResponse && actionResponse?.data) {
+      dispatch({ type: 'close' });
+    }
+  }, [actionResponse]);
+
+  // api block for the update product order
+  const {
+    data: updateResponse,
+    setShouldPerformAction: setUpdateSction,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `order/order_products/type/update/`,
+    method: 'PUT',
+    body: [updateOrderProduct],
+    performAction: false,
+  });
+
+  // const onUnrecieveProductOrder = () => {
+  //   setUnRecieve((prev: any) => ({
+  //     ...prev,
+  //     order_id: orderId,
+  //     id: selectedProductId,
+  //   }));
+  //   setUnrecieveaction(true);
+  // };
+
+  const onSubmit = () => {
+    if (selectedTab === '1') {
+      setUpdateOrderProduct((prev: any) => ({
+        ...prev,
+        order_id: orderId,
+        id: selectedProductId,
+      }));
+      setUpdateSction(true);
+      console.log('Tab 1 selected');
+    } else if (selectedTab === '2') {
+      console.log('Tab 2 selected');
+    } else if (selectedTab === '3') {
+      setUnRecieve((prev: any) => ({
+        ...prev,
+        order_id: orderId,
+        id: selectedProductId,
+      }));
+      setUnrecieveaction(true);
+      console.log('Tab 3 selected');
+    }
+  };
+
+  useEffect(() => {
+    if (updateResponse && updateResponse?.data) {
+      dispatch({ type: 'close' });
+    }
+  }, [updateResponse]);
+
+  return (
+    <>
+      {popupName?.state == 'bulkUpdate' && (
+        <AntModal
+          openStatus={popupName?.state == 'bulkUpdate' ? true : false}
+          closeModal={() => closeModal()}
+          PopupHeader={{
+            heading: 'BULK UPDATE PRODUCT TYPE',
+            subHeading: 'Gemma Harris, LE12 6AW',
+          }}
+          PopupFooter={{
+            btns: [
+              {
+                name: 'Submit',
+                btnStyle: 'rounded',
+                type: 'button',
+              },
+            ],
+
+            btnAlign: 'justifyEnd',
+          }}
+          BodyComponent={BulkUpdateProduct}
+          width={1104}
+          classNameAdd={'globalPopup'}
+        />
+      )}
+
+      {popupName?.state === 'deleteProduct' && (
+        <AntModal
+          openStatus={popupName?.state === 'deleteProduct'}
+          closeModal={closeModal}
+          PopupHeader={{
+            heading: 'Delete Product(s) From Order',
+            subHeading: 'TOM LEWIS, CW11 4ZP',
+          }}
+          PopupFooter={{
+            btns: [
+              {
+                name: 'CONFIRM DELETE',
+                type: 'button',
+                btnStyle: 'rounded',
+                onClick: onDeleteProducts,
+                disabled: !isFormValid,
+              },
+            ],
+            btnAlign: 'justifyEnd',
+          }}
+          BodyComponent={DeleteProduct}
+          width={1104}
+          classNameAdd={'globalPopup'}
+        />
+      )}
+
+      {popupName?.state === 'addProduct' && (
+        <AntModal
+          openStatus={popupName?.state === 'addProduct'}
+          closeModal={closeModal}
+          PopupHeader={{
+            heading: 'Add Product(s) to Order',
+            subHeading: 'Full Stock Control',
+          }}
+          PopupFooter={{
+            btns: [
+              {
+                name: 'Add More Product',
+                btnStyle: 'normalLink',
+                icon: 'addIcon',
+                onClick: AddMore,
+              },
+              {
+                name: 'Save Details',
+                btnStyle: 'rounded',
+                onClick: onAddOrderProduct,
+                disabled: !isAddFormValid,
+              },
+            ],
+            btnAlign: 'justifySpaceBetween',
+          }}
+          BodyComponent={AddProduct}
+          width={1104}
+          classNameAdd={'globalPopup'}
+        />
+      )}
+      {popupName?.state === 'qclog' && (
+        <AntModal
+          openStatus={popupName?.state === 'qclog'}
+          closeModal={closeModal}
+          PopupHeader={{
+            heading: 'Deliver - STOHOP011GRY-UK - 006064438012831476',
+            subHeading: '[Hopkins Highboard, Walnut Effect Grey]',
+          }}
+          PopupFooter={{
+            btns: [
+              {
+                name: 'Submit',
+                btnStyle: 'rounded',
+                onClick: onSubmit,
+              },
+            ],
+          }}
+          BodyComponent={ProductAction}
+          width={1104}
+          classNameAdd={'globalPopup'}
+        />
+      )}
+      {popupName?.state == 'qclogtable' && (
+        <AntModal
+          openStatus={popupName?.state == 'qclogtable' ? true : false}
+          closeModal={closeModal}
+          PopupHeader={{
+            heading: 'Deliver-AI-00030345784968148412',
+            subHeading: '[Centralized regional adpated] ',
+          }}
+          PopupFooter={{
+            btns: [
+              {
+                name: 'Submit',
+                btnStyle: 'rounded',
+              },
+            ],
+          }}
+          BodyComponent={logsTable}
+          width={1104}
+          classNameAdd={'globalPopup'}
+        />
+      )}
+      {popupName?.state == 'defectsModal' && (
+        <AntModal
+          openStatus={popupName?.state == 'defectsModal' ? true : false}
+          closeModal={closeModal}
+          PopupHeader={{
+            heading: 'DEliver - DWLK1006 - 00605',
+            subHeading: 'ALtair TV stand for TVs up to 60',
+          }}
+          PopupFooter={{
+            btns: [
+              {
+                name: '',
+                btnStyle: '',
+                type: '',
+              },
+            ],
+            btnAlign: '',
+          }}
+          BodyComponent={DefectsModal}
+          width={1504}
+          classNameAdd={'globalPopup'}
+        />
+      )}
+      {popupName?.state == 'repackModal' && (
+        <AntModal
+          openStatus={popupName?.state == 'repackModal' ? true : false}
+          closeModal={closeModal}
+          PopupHeader={{
+            heading: 'DEliver - DWLK1006 - 00605',
+            subHeading: 'ALtair TV stand for TVs up to 60',
+          }}
+          PopupFooter={{
+            btns: [
+              {
+                name: '',
+                btnStyle: '',
+                type: '',
+              },
+            ],
+            btnAlign: '',
+          }}
+          BodyComponent={repackModal}
+          width={1504}
+          classNameAdd={'globalPopup'}
+        />
+      )}
+    </>
+  );
+};
+
+export default ModalManager;