@bjsdistribution/dms-client-return 0.0.83 → 0.0.85

package/src/components/order-view/order-actions/hooks/useUpdateReminder.ts

@@ -1,54 +0,0 @@
-import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
-import { useFlagsLoading } from '../store';
-import { UpdateReminderPayload } from '../types';
-import { getCookie } from '../../utils';
-import { notification } from 'antd';
-
-function useUpdateReminder() {
-  const ssoToken = getCookie('id_token');
-  const [, setLoading] = useFlagsLoading();
-
-  const update = async (data: UpdateReminderPayload[]) => {
-    const endpoint = `${getBaseEndpoint()}/tasks/reminder/update/`;
-    setLoading(true);
-
-    try {
-      const requestOptions = {
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${ssoToken}`,
-        },
-        method: 'PUT',
-        body: JSON.stringify(data),
-      };
-
-      const response = await fetch(endpoint, requestOptions);
-
-      if (!response.ok) {
-        throw new Error('response is not ok');
-      }
-
-      const json = await response.json();
-      // alert('Reminder has been updated');
-      notification.success({
-        message: 'Success',
-        description: 'Reminder has been updated',
-      });
-      return json;
-    } catch (err) {
-      // console.error('Error:', err);
-      notification.error({
-        message: 'Error',
-        description:
-          `${err}` || 'An error has occurred. Please try again later.',
-      });
-    } finally {
-      setLoading(false);
-    }
-    setLoading(false);
-  };
-
-  return update;
-}
-
-export default useUpdateReminder;

package/src/components/order-view/order-details/expanded-content/orders-section/ValueField.tsx

@@ -1,36 +0,0 @@
-import { Input, Label } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-
-function ValueField() {
-  return (
-    <Container>
-      <Label label="Value (£)" htmlFor="value" />
-      <CustomInput name="value" type="number" placeholder="0.00" />
-    </Container>
-  );
-}
-
-const CustomInput = styled(Input)`
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  &:focus-visible {
-    outline: none;
-  }
-  border-radius: 6px;
-  border: 1px solid #e95252;
-  background: rgba(233, 82, 82, 0.33);
-  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-`;
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-`;
-
-export default ValueField;

package/src/components/order-view/order-resources/columns/Id.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-function Id(props: any) {
-  const data = props?.row?.original;
-  return (
-    <RowContainer>
-      <Row>{data}</Row>
-    </RowContainer>
-  );
-}
-
-const RowContainer = styled.div``;
-
-const Row = styled.div``;
-
-export default Id;

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

@@ -1,28 +0,0 @@
-// import React from 'react';
-// import styled from 'styled-components';
-// // import { useProductDetails } from '../../store';
-// import Product from './products';
-// import { useProductDetails } from '../../store';
-
-// function ProductList() {
-//   const [productdata] = useProductDetails();
-
-//   return (
-//     <Container>
-//       {productdata?.map((products: any) => (
-//         <Product productId={products?.id} status={products?.status} />
-//       ))}
-//     </Container>
-//   );
-// }
-
-// const Container = styled.div`
-//   display: flex;
-//   flex-direction: column;
-//   gap: 10px;
-//   @media only screen and (max-width: 1500px) {
-//     overflow: auto;
-//   }
-// `;
-
-// export default ProductList;

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

@@ -1,34 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-interface BadgeProps {
-  text: any;
-}
-
-function Badge(props: BadgeProps) {
-  return (
-    <Container>
-      <Text>{props.text}</Text>
-    </Container>
-  );
-}
-
-const Text = styled.span`
-  font-family: 'Lato', sans-serif;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 16px;
-  color: #3a3630;
-  text-align: center;
-`;
-
-const Container = styled.div`
-  padding: 5px;
-  border-radius: 66px;
-  border: 1px solid #6a7378;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-`;
-
-export default Badge;

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

@@ -1,305 +0,0 @@
-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,
-  letselectedProductIdAtom,
-  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(letselectedProductIdAtom);
-  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/types.ts

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

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

@@ -1,14 +0,0 @@
-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/product-table-footer/ProductDetailsFooter.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Button } from '@bjsdistribution/dms-component-library';
-import NewReturnDropdown from '../../notes/order-dropdown/NewReturnDropdown';
-// import { notification } from 'antd';
-
-function OrderDetailsFooter() {
-  const onSave = () => {
-    // alert('saved');
-    // notification.success({
-    //   message: 'Success',
-    //   description: ' Saved successfully.',
-    // });
-  };
-
-  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;

package/src/components/order-view/toolbox-resources/collapsed-content/index.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-// import styled from 'styled-components';
-
-function CollapsedContent() {
-  return <Font>TOOLBOX RESOURCES</Font>;
-}
-
-const Font = styled.div`
-  font-family: 'Roboto', sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px; /* 150% */
-`;
-export default CollapsedContent;

package/src/components/order-view/toolbox-resources/expanded-content/index.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import CollapsedContent from '../collapsed-content';
-import styled from 'styled-components';
-import CollapsableForm from '../../../../common/expand-collapse';
-import { useOrderProductsToolbox } from '../../store';
-
-function Toolbox() {
-  const [orderToolbox] = useOrderProductsToolbox();
-
-  const htmlContent =
-    orderToolbox?.data && orderToolbox?.data?.length > 0
-      ? orderToolbox?.data[0]?.html
-      : '';
-
-  return (
-    <StyledTable>
-      <CollapsableForm collapsedContent={<CollapsedContent />}>
-        <div style={{ overflow: 'auto' }}></div>
-        <div
-          className="tableStyle"
-          dangerouslySetInnerHTML={{ __html: htmlContent }}
-        ></div>
-      </CollapsableForm>
-    </StyledTable>
-  );
-}
-
-const StyledTable = styled.table`
-  width: 100%;
-  border: none;
-
-  .tableStyle {
-    border-spacing: 0;
-    width: 100%;
-    table {
-      border-spacing: 0;
-      border: none !important;
-      max-height: 400px !important;
-      min-height: 100px !important;
-      thead {
-        background: #f8f8f8 !important;
-        tr {
-          border-spacing: 0;
-          border-bottom: 1px solid rgb(215, 214, 213);
-          th {
-            padding: 10px;
-            font-family: Roboto, sans-serif;
-            font-size: 14px;
-            font-weight: 500;
-            line-height: 24px;
-            letter-spacing: 0px;
-            /* min-width: 130px; */
-            &:first-child {
-              border-radius: 10px 0px 0px 0px;
-            }
-            &:last-child {
-              border-radius: 0px 10px 0px 0px;
-            }
-          }
-        }
-      }
-      tbody {
-        tr {
-          td {
-            color: #3a3630;
-            font-size: 13px;
-            font-style: normal;
-            font-weight: 400;
-            line-height: normal;
-            padding: 10px 5px;
-            background: #fff;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-            border-right: none;
-            border-left: none;
-            word-wrap: break-word;
-            max-width: 200px;
-          }
-        }
-      }
-    }
-  }
-`;
-
-export default Toolbox;

package/src/components/order-view/view-reminder/AssigneeDropdown.tsx

@@ -1,34 +0,0 @@
-import { Label, AntSelect } from '@bjsdistribution/dms-component-library';
-import { notification } from 'antd';
-import React from 'react';
-import styled from 'styled-components';
-
-function AssigneeDropdown() {
-  const handleSelectChange = () => {
-    // alert('hello');
-    notification.success({
-      message: 'Success',
-      description: 'Order has been saved successfully.',
-    });
-  };
-  return (
-    <FormContainer>
-      <Label label="Assigned To" required htmlFor="assigneDropdown" />
-      <StyledAntSelect
-        options={[]}
-        onChange={handleSelectChange}
-        selectWrapperClass={'rounded'}
-        style={{ display: 'flex' }}
-      />
-    </FormContainer>
-  );
-}
-const FormContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-  width: 285px;
-`;
-const StyledAntSelect = styled(AntSelect)``;
-export default AssigneeDropdown;