@bjsdistribution/dms-client-return 0.0.82 → 0.0.84

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

@@ -1,145 +0,0 @@
-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/DeleteProduct.tsx

@@ -1,117 +0,0 @@
-import React, { useEffect } from 'react';
-import { useDeleteProdsID, useProductDetails } from '../store';
-import { Empty, Skeleton } from 'antd';
-import {
-  EmptyDataContainer,
-  StyledTable,
-  StyledTableWrapper,
-} from '../order-actions/actions/confirm-order/tables/ReminderStyles';
-
-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/ProductAction.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { Tabs } from 'antd';
-import styled from 'styled-components';
-import { useAtom } from 'jotai';
-import QCLogs from './qclogs';
-import UpdateProduct from './UpdateProducts';
-import UnReceiveProduct from './UnReceiveProduct';
-import { selectedTabKeyAtom } from '../store';
-
-const ProductAction = () => {
-  const [, setSelectedTabKey] = useAtom(selectedTabKeyAtom);
-
-  const handleTabChange = (activeKey: string) => {
-    setSelectedTabKey(activeKey);
-  };
-
-  return (
-    <>
-      <GLobalPopupContent>
-        <Container>
-          <Tabs
-            defaultActiveKey="1"
-            onChange={handleTabChange}
-            items={[
-              {
-                label: 'Update Product Type',
-                key: '1',
-                children: <UpdateProduct />,
-              },
-              {
-                label: 'Log QC Result',
-                key: '2',
-                children: <QCLogs />,
-              },
-              {
-                label: 'Unreceive Product',
-                key: '3',
-                children: <UnReceiveProduct />,
-              },
-            ]}
-          />
-        </Container>
-      </GLobalPopupContent>
-    </>
-  );
-};
-
-export default ProductAction;
-
-const GLobalPopupContent = styled.div``;
-
-const Container = styled.div`
-  display: flex;
-  height: 50vh;
-  padding-bottom: 30px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 20px;
-  align-self: stretch;
-  border-radius: 6px;
-  border: 1px solid #edebe8;
-  padding: 15px;
-  overflow-y: scroll;
-  .ant-tabs {
-    width: 100%;
-  }
-  .ant-tabs-tab-active {
-    .ant-tabs-tab-btn {
-      color: #3a3630 !important;
-      font-family: 'Lato', sans-serif;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 500;
-    }
-  }
-  .ant-tabs-ink-bar {
-    background: #feba30;
-  }
-`;

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

@@ -1,42 +0,0 @@
-import React from 'react';
-import { AntTable } from '@bjsdistribution/dms-component-library';
-import styled from 'styled-components';
-import { GLobalPopupContent } from '../order-actions/actions/update-product-type/UpdateProductTypeStyle';
-import { RepackData } from '../utils';
-
-const repackModal = () => {
-  const columns = [
-    {
-      key: 'packaging_type',
-      title: 'Packaging Type',
-      dataIndex: 'packaging_type',
-    },
-    { key: 'products', title: 'Products', dataIndex: 'products' },
-    { key: 'created_by', title: 'Created By', dataIndex: 'created_by' },
-    { key: 'date', title: 'Date', dataIndex: 'date' },
-    {
-      key: 'images',
-      title: 'Images',
-    },
-  ];
-  return (
-    <>
-      <GLobalPopupContent>
-        <StyledConatiner>
-          <AntTable
-            columns={columns}
-            data={RepackData}
-            onSelectChange={(value: any, record: any) =>
-              console.log('Selected value:', value, 'for record:', record)
-            }
-          />
-        </StyledConatiner>
-      </GLobalPopupContent>
-    </>
-  );
-};
-const StyledConatiner = styled.div`
-  /* text-wrap: nowrap; */
-`;
-
-export default repackModal;

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

@@ -1,72 +0,0 @@
-import { AntSelect, Label } from '@bjsdistribution/dms-component-library';
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
-import Notes from '../order-actions/actions/log-service-refusal/Notes';
-import {
-  useOrderStaticData,
-  useProductDetails,
-  useRecieveOrderProducts,
-} from '../store';
-
-function UnReceiveProduct() {
-  const [unRecieve, setUnRecieve] = useRecieveOrderProducts();
-  const [productdata] = useProductDetails();
-  const [orderStaticData] = useOrderStaticData();
-
-  console.log(productdata, 'productdataproductdataproductdataproductdata');
-  useEffect(() => {
-    setUnRecieve((prevState: any) => ({
-      ...prevState,
-    }));
-  }, [setUnRecieve]);
-
-  const handleSelectChange = (value: string) => {
-    setUnRecieve(prevState => ({
-      ...prevState,
-      unrecieve_reason_id: +value,
-    }));
-  };
-
-  const handleNotesChange = (notes: any) => {
-    setUnRecieve((prevState: any) => ({
-      ...prevState,
-      unrecieve_note: notes,
-    }));
-  };
-
-  console.log(unRecieve, 'unRecieve');
-
-  const returnActionOptions = orderStaticData?.unreceive_reasons?.map(
-    (option: any) => ({
-      label: option.reason,
-      value: option.id,
-    })
-  );
-
-  return (
-    <Container>
-      <LabelWrapper>
-        <Label label="Reason" />
-        <StyledAntSelect
-          options={returnActionOptions}
-          placeholder="Select the Reason"
-          onChange={handleSelectChange}
-          selectWrapperClass="rounded"
-        />
-        <Notes onNotesChange={handleNotesChange} />
-      </LabelWrapper>
-    </Container>
-  );
-}
-
-const Container = styled.div``;
-
-const LabelWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`;
-
-const StyledAntSelect = styled(AntSelect)``;
-
-export default UnReceiveProduct;

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

@@ -1,145 +0,0 @@
-import { AntSelect, Label } from '@bjsdistribution/dms-component-library';
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { ReturnData } from '../../fakeData';
-import { useOrderStaticData, useUpdateOrderProducts } from '../store';
-
-function UpdateProduct() {
-  const [selectedOption, setSelectedOption] = useState<string | undefined>();
-  const [orderStaticData] = useOrderStaticData();
-
-  const [updateOrderProduct, setUpdateOrderProduct] = useUpdateOrderProducts();
-  console.log(updateOrderProduct, 'updateOrderProductupdateOrderProduct');
-
-  const handleSelectChange = (value: string) => {
-    setSelectedOption(value);
-    setUpdateOrderProduct(prevState => ({
-      ...prevState,
-      product_type_id: +value,
-    }));
-  };
-
-  const handleReturnSelectChange = (value: any) => {
-    setUpdateOrderProduct(prevState => ({
-      ...prevState,
-      return_reason_id: +value,
-    }));
-    console.log('Return action or reason selected:', value);
-  };
-
-  const handleCollectionSelectChange = (value: any) => {
-    setUpdateOrderProduct(prevState => ({
-      ...prevState,
-      collection_reason_id: +value,
-    }));
-    console.log('Collection reason selected:', value);
-  };
-
-  const collectionOptions = orderStaticData?.collect_reasons?.map(
-    (option: any) => ({
-      label: option.reason,
-      value: option.id,
-    })
-  );
-  const returnActionOptions = orderStaticData?.order_product_return_action?.map(
-    (option: any) => ({
-      label: option.type,
-      value: option.id,
-    })
-  );
-  const returnReasonsOptions = orderStaticData?.return_reasons?.map(
-    (option: any) => ({
-      label: option.reason,
-      value: option.id,
-    })
-  );
-
-  const productTypeOptions = orderStaticData?.order_product_type?.map(
-    (option: any) => ({
-      label: option.type,
-      value: option.id,
-    })
-  );
-
-  return (
-    <Container>
-      <LabelWrapper>
-        <Label label="Product Type" />
-        <StyledAntSelect
-          options={productTypeOptions}
-          placeholder="Select Product Type"
-          onChange={handleSelectChange}
-          selectWrapperClass="rounded"
-        />
-      </LabelWrapper>
-      {selectedOption === '1' && (
-        <ReturnBox>
-          <LabelWrapper>
-            <Label label="Return Action" />
-            <StyledAntSelect
-              options={returnActionOptions || []}
-              placeholder="Select the Return Action"
-              onChange={handleReturnSelectChange}
-              selectWrapperClass="rounded"
-            />
-          </LabelWrapper>
-          <LabelWrapper>
-            <Label label="Return Reason" />
-            <StyledAntSelect
-              options={returnReasonsOptions || []}
-              placeholder="Select the Return Reason"
-              onChange={handleReturnSelectChange}
-              selectWrapperClass="rounded"
-            />
-          </LabelWrapper>
-          <LabelWrapper>
-            <Label label="Return Location" />
-            <StyledAntSelect
-              options={ReturnData}
-              placeholder="Select the Return Location"
-              onChange={handleReturnSelectChange}
-              selectWrapperClass="rounded"
-            />
-          </LabelWrapper>
-        </ReturnBox>
-      )}
-      {selectedOption === '2' && (
-        <CollectionBox>
-          <LabelWrapper>
-            <Label label="Collection Reason" />
-            <StyledAntSelect
-              options={collectionOptions || []}
-              placeholder="Select the Collection Reason"
-              onChange={handleCollectionSelectChange}
-              selectWrapperClass="rounded"
-            />
-          </LabelWrapper>
-        </CollectionBox>
-      )}
-    </Container>
-  );
-}
-
-const CollectionBox = styled.div`
-  margin-top: 32px;
-`;
-
-const ReturnBox = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  margin-top: 32px;
-  justify-content: space-between;
-`;
-
-const Container = styled.div``;
-
-const LabelWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`;
-
-const StyledAntSelect = styled(AntSelect)``;
-
-export default UpdateProduct;