@bjsdistribution/dms-client-return 0.0.1

package/src/components/order-view/products-info/expanded-content/products/index.tsx

@@ -0,0 +1,305 @@
+import styled from 'styled-components';
+import React, { useState } from 'react';
+import {
+  Button,
+  displayValueOrNA,
+} from '@bjsdistribution/dms-component-library';
+import {
+  CopyIcon,
+  DefectsIcon,
+  QcIcon,
+  RepackLogsIcon,
+  UpArrowCircleOutlineIcon,
+} from '../../../../../assets/icons';
+import Badge from './Badge';
+import {
+  countReducerAtom,
+  selectedProductIdAtom,
+  useAtom,
+  useProductDetails,
+} from '../../../store';
+import { getProductStatusColor } from '../../utils';
+import { productStatus } from '../../types';
+// import { fakedata } from '../../../fakedata';
+import Tippy from '@tippyjs/react';
+import HeavyItemIcon from '../../../../../assets/icons/HeavyItemIcon';
+import LargeItemIcon from '../../../../../assets/icons/LargeItemIcon';
+interface IProps {
+  status: any;
+  productId: number;
+}
+function Product({ status, productId }: IProps) {
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+  const [, dispatch] = useAtom(countReducerAtom);
+  const [multiProduct] = useProductDetails();
+  const productdata = multiProduct?.find((item: any) => item.id === productId);
+  const [, setSelectedProductId] = useAtom(selectedProductIdAtom);
+  if (!productdata) {
+    return null;
+  }
+
+  const handleActionClick = () => {
+    setSelectedProductId(productId);
+    dispatch({ type: 'qclog', payload: productId });
+    console.log(productId, 'Selected Product ID');
+  };
+
+  let IconDefect = <DefectsIcon />;
+  let IconRepack = <RepackLogsIcon />;
+  let IconQCLogs = <QcIcon />;
+  let IconHeavy = <HeavyItemIcon />;
+  let IconBulky = <LargeItemIcon />;
+
+  return (
+    <Container>
+      <Content>
+        <Left>
+          <StatusAndSkuContainer status={status}>
+            <Wrapper>
+              <Status>{status}</Status>
+              <Tippy content={productdata?.sku}>
+                <span>
+                  <Sku title={productdata?.sku}>{productdata?.sku}</Sku>
+                </span>
+              </Tippy>
+            </Wrapper>
+            <CopyIcon />
+          </StatusAndSkuContainer>
+          <TypeContainer>
+            <Type>{productdata?.order_product_type?.type}</Type>
+            <Badge text={productdata?.code} />
+          </TypeContainer>
+          <DimensionsContainer>
+            <Tippy content={productdata?.description}>
+              <span>
+                <Badge text={`${productdata?.description}`} />
+              </span>
+            </Tippy>
+            <Badge text={`${productdata?.weight}KG`} />
+            <Badge text={`Cube: ${productdata?.cube}m³`} />
+          </DimensionsContainer>
+
+          <DateContainer>
+            <DateWrapper>
+              <DateField>Released</DateField>
+              <DateValue>
+                {displayValueOrNA(
+                  productdata?.orders_products_stock?.release_date
+                )}
+              </DateValue>
+            </DateWrapper>
+            <DateWrapper>
+              <DateField>Expected</DateField>
+              <DateValue>
+                {displayValueOrNA(
+                  productdata?.orders_products_stock?.expected_date
+                )}
+              </DateValue>
+            </DateWrapper>
+          </DateContainer>
+        </Left>
+        <Right>
+          <ActionsIconContainer>
+            {productdata?.heavy_item && (
+              <Tippy
+                content={<TooltipContent>Heavy Item</TooltipContent>}
+                placement="top"
+                arrow={true}
+              >
+                <Icon>{IconHeavy}</Icon>
+              </Tippy>
+            )}
+          </ActionsIconContainer>
+          <ActionsIconContainer>
+            {productdata?.bulky_item && (
+              <Tippy
+                content={<TooltipContent>Large Item</TooltipContent>}
+                placement="top"
+                arrow={true}
+              >
+                <Icon>{IconBulky}</Icon>
+              </Tippy>
+            )}
+          </ActionsIconContainer>
+          <ActionsIconContainer
+            onClick={() => dispatch({ type: 'defectsModal' })}
+          >
+            <Tippy
+              content={<TooltipContent>{'Defects'}</TooltipContent>}
+              placement="bottom"
+              arrow={true}
+            >
+              <Icon>{IconDefect}</Icon>
+            </Tippy>
+          </ActionsIconContainer>
+          <ActionsIconContainer
+            onClick={() => dispatch({ type: 'repackModal' })}
+          >
+            <Tippy
+              content={<TooltipContent>{'Repack'}</TooltipContent>}
+              placement="bottom"
+              arrow={true}
+            >
+              <Icon>{IconRepack}</Icon>
+            </Tippy>
+          </ActionsIconContainer>
+          <ActionsIconContainer
+            onClick={() => dispatch({ type: 'qclogtable' })}
+          >
+            <Tippy
+              content={<TooltipContent>{'QC logs'}</TooltipContent>}
+              placement="bottom"
+              arrow={true}
+            >
+              <Icon>{IconQCLogs}</Icon>
+            </Tippy>
+          </ActionsIconContainer>
+          <Button colors="secondary" onClick={handleActionClick}>
+            ACTION
+          </Button>
+          <IconContainer
+            onClick={() => setIsExpanded(prev => !prev)}
+            isExpanded={isExpanded}
+          >
+            <ChevronUpIcon />
+          </IconContainer>
+        </Right>
+      </Content>
+    </Container>
+  );
+}
+const Icon = styled.div``;
+
+const TooltipContent = styled.div`
+  background-color: #333;
+  color: #fff;
+  padding: 5px 10px;
+  border-radius: 5px;
+`;
+
+const ChevronUpIcon = styled(UpArrowCircleOutlineIcon)`
+  transform: rotate(180deg);
+  cursor: pointer;
+`;
+const ActionsIconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+const DateValue = styled.span`
+  font-family: 'Lato', sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  color: #aea9a1;
+  white-space: nowrap;
+`;
+const DateField = styled.span`
+  font-family: 'Lato', sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
+  color: #3a3630;
+`;
+const DateWrapper = styled.div`
+  display: flex;
+  gap: 5px;
+`;
+const DateContainer = styled.div`
+  padding: 8px;
+`;
+
+const DimensionsContainer = styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 8px;
+`;
+const Type = styled.span`
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5;
+  color: #3a3630;
+  text-transform: uppercase;
+`;
+const TypeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px;
+  border-right: 1px solid #e2e0db;
+`;
+const Sku = styled.span`
+  color: #3a3630;
+  font-family: 'Lato', sans-serif;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 600;
+  width: 100px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+const Status = styled.span`
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: capitalize;
+`;
+const Wrapper = styled.div`
+  display: flex;
+  gap: 5px;
+  flex-direction: column;
+`;
+
+const StatusAndSkuContainer = styled.div<{ status: productStatus }>`
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+  background: ${props => getProductStatusColor(props.status)};
+  border-radius: 18px 0 0 18px;
+  padding: 15px 10px;
+  min-width: 15%;
+`;
+
+const IconContainer = styled.div<{ isExpanded: boolean }>`
+  width: 34px;
+  padding-right: 10px;
+  svg {
+    transform: rotate(${props => (props.isExpanded ? '360deg' : '180deg')});
+  }
+`;
+const Right = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+const Left = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Content = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  border-radius: 18px;
+  border-top: 1px solid #edebe8;
+  border-bottom: 1px solid #edebe8;
+`;
+const Container = styled.div`
+  display: flex;
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.9),
+    rgba(255, 255, 255, 0.5)
+  );
+  flex-direction: column;
+  gap: 14px;
+  border-radius: 18px;
+  box-shadow: 0 4px 30px 0 rgba(46, 45, 116, 0.05);
+`;
+
+export default Product;

package/src/components/order-view/products-info/index.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import ExpandedContent from './expanded-content';
+import CollapsedContent from './collapsed-content';
+import CollapsableForm from '../../../common/expand-collapse';
+import { useOrderDetails, useProductDetails } from '../store';
+import { useLoading } from '../../order-daily-overview/store/store';
+import { useApiHook } from '@bjsdistribution/dms-component-library';
+
+interface ApiResponse {
+  message: string;
+  code: number;
+  error: string | null;
+  error_traceback: string | null;
+  data: [];
+  setShouldPerformAction: boolean;
+}
+
+function ProductsInfo() {
+  const [Data] = useOrderDetails();
+  const customerData = Data;
+  // For API Call
+  const [, setAPidata] = useProductDetails();
+  const [, setLoading] = useLoading();
+  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/order/order_products/${customerData.id}`,
+    method: 'GET',
+    performAction: false,
+  });
+
+  useEffect(() => {
+    if (customerData.id) {
+      setShouldPerformAction(true);
+    }
+  }, [customerData.id]);
+
+  useEffect(() => {
+    setLoading(loading);
+    if (fetchedData && fetchedData.data) {
+      const requiredData = fetchedData.data;
+      if (requiredData.length > 0) {
+        setAPidata(requiredData);
+      } else {
+        setAPidata(null);
+      }
+    }
+  }, [fetchedData, loading]);
+
+  return (
+    <CollapsableForm collapsedContent={<CollapsedContent />}>
+      <ExpandedContent />
+    </CollapsableForm>
+  );
+}
+
+export default ProductsInfo;

package/src/components/order-view/products-info/types.ts

@@ -0,0 +1 @@
+export type productStatus = 'received' | 'expected' | 'deleted' | 'pending'

package/src/components/order-view/products-info/utils.ts

@@ -0,0 +1,14 @@
+import { productStatus } from './types';
+
+export const getProductStatusColor = (input: productStatus): string => {
+  switch (input) {
+    case 'received':
+      return '#30BA2E';
+    case 'expected':
+      return '#feba30';
+    case 'pending':
+      return '#AEA9A1';
+    case 'deleted':
+      return '#FF555F';
+  }
+};

package/src/components/order-view/return-client-products/ProductTable.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReturnProductTable from './product-table/ReturnProductTable';
+import styled from 'styled-components';
+
+const ProductTable = () => {
+  return (
+    <Container>
+      <ReturnProductTable />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  height: 230px; /* Set height to limit container size */
+  overflow: auto; /* Enable scrolling */
+  scrollbar-width: thin;
+`;
+
+export default ProductTable;

package/src/components/order-view/return-client-products/product-table/ReturnProductTable.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import {
+  StyledTable,
+  StyledTableWrapper,
+} from '../../../order-daily-overview/return-order-table/return-orders-filters/returnstyles';
+import { Checkbox } from '@bjsdistribution/dms-component-library';
+import { data } from '../../../order-daily-overview/table/table-data/Fakedata';
+import { useSelectedEmail } from '../../../store';
+import ActionIcon from '../../../../assets/icons/ActionIcon';
+
+const ReturnProductTable = () => {
+  const [selectedInvoices, setSelectedInvoices] = useSelectedEmail();
+  const [selectAll, setSelectAll] = useState(false);
+
+  const handleSelectAll = (e: any) => {
+    setSelectAll(e.target.checked);
+    if (e.target.checked) {
+      setSelectedInvoices(
+        data.map((invoice: any) => ({
+          id: invoice.id,
+          status_id: 3,
+        }))
+      );
+    } else {
+      setSelectedInvoices([]);
+    }
+  };
+
+  return (
+    <div>
+      <StyledTableWrapper id="tableScrolling">
+        <StyledTable>
+          <thead>
+            <tr>
+              <th className="emailInvoiceCheckbox">
+                <Checkbox checked={selectAll} onChange={handleSelectAll} />
+              </th>
+              <th> Location</th>
+              <th>Sender</th>
+              <th>Code</th>
+              <th> Description</th>
+              <th>Return Reason</th>
+              <th>Part</th>
+              <th> Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data?.map((invoice: any) => (
+              <tr key={invoice.id}>
+                <td>
+                  <Checkbox
+                    checked={selectedInvoices?.some(
+                      (selectedInvoice: any) =>
+                        selectedInvoice?.id === invoice.id
+                    )}
+                  />
+                </td>
+
+                <td>{invoice?.customer_name}</td>
+
+                <td>
+                  <ul style={{ listStyleType: 'none', padding: 0 }}>
+                    <li
+                      style={{
+                        color: '#0099ff',
+                        fontWeight: 600,
+                        paddingLeft: 0,
+                      }}
+                    >
+                      {invoice?.customer_name}
+                    </li>
+                  </ul>
+                </td>
+
+                <td>{invoice?.customer_name}</td>
+                <td>{invoice?.customer_name}</td>
+                <td>{invoice?.customer_name}</td>
+                <td>1 of 1</td>
+
+                {/* <td onClick={() => dispatch({ type: 'email-sent' })}>
+                    <IconContainers>
+                      <i>
+                        <ExportIcon />
+                      </i>
+                    </IconContainers>
+                  </td>
+                  <td>
+                    <IconContainers>
+                      <i>
+                        <PdfIcon />
+                      </i>
+                      <i>
+                        <ArrivalIcon />
+                      </i>
+                      <i>
+                        <PdfIcon />
+                      </i>
+                    </IconContainers>
+                  </td> */}
+                <td>
+                  <ActionIcon />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </StyledTable>
+      </StyledTableWrapper>
+    </div>
+  );
+};
+
+export default ReturnProductTable;

package/src/components/order-view/return-client-products/product-table-footer/ProductDetailsFooter.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button } from '@bjsdistribution/dms-component-library';
+import NewReturnDropdown from '../../notes/order-dropdown/NewReturnDropdown';
+
+function OrderDetailsFooter() {
+  const onSave = () => {
+    alert('saved');
+  };
+
+  return (
+    <Container>
+      {/* <AllowTracking /> */}
+      <Button onClick={onSave}>Save Details</Button>
+      <NewReturnDropdown />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 15px;
+  align-items: flex-start;
+  border-top: 1px solid #edebe8;
+  background: #f8fafc;
+  margin: 0px -15px -15px -15px;
+  border-radius: 0px 0px 8px 8px;
+  margin-bottom: 22px;
+`;
+
+export default OrderDetailsFooter;