@bjsdistribution/dms-client-return 0.0.1

package/src/components/order-view/order-details/helper.ts

@@ -0,0 +1,132 @@
+export const depotOptions = [
+  {
+    label: 'BJS COURIERS',
+    value: 'bjs_couriers',
+  },
+  {
+    label: 'BRD 01',
+    value: 'brd_01',
+  },
+  {
+    label: 'EXE 01',
+    value: 'exe_01',
+  },
+];
+
+export const timedServiceOptions = [
+  {
+    label: 'All Day',
+    value: 'all_day',
+  },
+  {
+    label: 'Business Hours',
+    value: 'business_hours',
+  },
+  {
+    label: 'AM (07:00 - 12:00)',
+    value: 'am',
+  },
+  {
+    label: 'PM (12:00 - 17:00)',
+    value: 'pm',
+  },
+  {
+    label: 'Evening (17:00 - 21:00)',
+    value: 'evening',
+  },
+  {
+    label: 'Daytime (11:00 - 16:00)',
+    value: 'daytime',
+  },
+  {
+    label: 'Morning (07:00 - 12:00)',
+    value: 'morning',
+  },
+  {
+    label: 'Late AM (09:00 - 12:00)',
+    value: 'late_am',
+  },
+  {
+    label: 'Late PM (15:00 - 20:00)',
+    value: 'late_pm',
+  },
+];
+
+export const serviceTypeOptions = [
+  {
+    label: 'Delivery',
+    value: 'delivery',
+  },
+  {
+    label: 'Collection',
+    value: 'collection',
+  },
+  {
+    label: 'Exchange',
+    value: 'exchange',
+  },
+  {
+    label: 'Service Order',
+    value: 'service_order',
+  },
+];
+
+export const deliveryPointOptions = [
+  {
+    label: 'Room of Choice',
+    value: 'roc',
+  },
+  {
+    label: 'Hallway',
+    value: 'hallway',
+  },
+  {
+    label: 'Front Door',
+    value: 'front_door',
+  },
+  {
+    label: 'Garden',
+    value: 'garden',
+  },
+];
+
+export const serviceLevelOptions = [
+  {
+    label: '1 Man',
+    value: '1man',
+  },
+  {
+    label: '1.5 Man',
+    value: '1.5man',
+  },
+  {
+    label: '2 Man',
+    value: '2man',
+  },
+];
+
+export const assemblyTypeOptions = [
+  {
+    label: 'Small',
+    value: 'small',
+  },
+  {
+    label: 'Medium',
+    value: 'medium',
+  },
+  {
+    label: 'Large',
+    value: 'large',
+  },
+];
+
+export const vehicleTypeOptions = [
+  {
+    label: 'LGV',
+    value: '1',
+  },
+  {
+    label: 'HGV',
+    value: '2',
+  },
+];

package/src/components/order-view/order-details/index.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react';
+// import CollapsedContent from './collapsed-content';
+// import CollapsableForm from '../../../common/expand-collapse';
+import ExpandedContent from './expanded-content';
+import { useCustomerDetails, useOrderDetails } from '../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 OrderDetails() {
+  const [orderData] = useOrderDetails();
+  const customerData = orderData;
+  const id = customerData?.customer_id;
+
+  // For API Call
+  const [, setCustomerData] = useCustomerDetails();
+  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `customers/${id}`,
+    method: 'GET',
+    performAction: false,
+  });
+
+  useEffect(() => {
+    if (id) {
+      setShouldPerformAction(true);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    if (fetchedData && fetchedData?.data) {
+      const requiredData = fetchedData?.data;
+      setCustomerData(requiredData[0]);
+    }
+  }, [fetchedData, loading]);
+
+  return (
+    <>
+      <ExpandedContent />
+    </>
+  );
+}
+
+export default OrderDetails;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from 'styled-components';
+
+function CollapsedContent() {
+  return <Font>CALL LOG</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/order-resources/columns/Category.tsx

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

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

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

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

@@ -0,0 +1,17 @@
+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/order-resources/columns/Reference.tsx

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

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

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

package/src/components/order-view/order-resources/columns/actions/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+
+function index() {
+  return (
+    //TO DO ACTIONS FOR THE TABLES
+    <Actions></Actions>
+  );
+}
+const Actions = styled.div``;
+
+export default index;

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

@@ -0,0 +1,4 @@
+export { default as Category } from './Category';
+export { default as Date } from './Date';
+export { default as Reference } from './Reference';
+export { default as Type } from './Type';

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import CollapsedContent from '../collapsed-content';
+import styled from 'styled-components';
+import CollapsableForm from '../../../../common/expand-collapse';
+// import DynamicTable from '../../DynamicTable';
+// import { orderResources, orderResourcesColumns } from '../../../fakeData';
+import { Alert } from '@bjsdistribution/dms-component-library';
+
+function Order() {
+  return (
+    <Table>
+      <CollapsableForm collapsedContent={<CollapsedContent />}>
+        {/* <DynamicTable columns={orderResourcesColumns} data={orderResources} /> */}
+        <Alert
+          description=""
+          onClose={() => {}}
+          type="warn"
+          title="No records found"
+          showOkButton={false}
+        />
+      </CollapsableForm>
+    </Table>
+  );
+}
+const Table = styled.div`
+  width: 100%;
+`;
+export default Order;

package/src/components/order-view/order-resources/helper.ts

@@ -0,0 +1,28 @@
+import { Category, Date, Reference, Type } from './columns';
+
+export const tableColumns = [
+  {
+    header: 'Date',
+    accessorKey: 'date',
+    cell: Date,
+    enableSorting: false,
+  },
+  {
+    header: 'Type',
+    accessorKey: 'type',
+    cell: Type,
+    enableSorting: false,
+  },
+  {
+    header: 'Category',
+    accessorKey: 'category',
+    cell: Category,
+    enableSorting: false,
+  },
+  {
+    header: 'Reference',
+    accessorKey: 'reference',
+    cell: Reference,
+    enableSorting: false,
+  },
+];

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

@@ -0,0 +1,111 @@
+import { SectionHeader } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+// import ModalManager from '../../modalsPopup/ModalManager';
+// import { countReducerAtom, useProductDetails } from '../../store';
+// import { useAtom } from 'jotai';
+
+function CollapsedContent() {
+  // const [, dispatch] = useAtom(countReducerAtom);
+  // const [productdata] = useProductDetails();
+  // const totalItems = productdata?.length;
+
+  // const totalCube = () => {
+  //   let cubeData = 0;
+  //   for (let i = 0; i < productdata?.length; i++) {
+  //     cubeData += parseFloat(productdata[i].cube);
+  //   }
+  //   return `${cubeData.toFixed(2)}m³`;
+  // };
+
+  // const totalWeight = () => {
+  //   let weightData = 0;
+  //   for (let i = 0; i < productdata?.length; i++) {
+  //     weightData += parseFloat(productdata[i].weight);
+  //   }
+  //   return `${weightData.toFixed(2)} KG`;
+  // };
+  return (
+    <Container>
+      <SectionHeader label="Products" />
+      {/* <Left>
+        <Items>{totalItems} Delivery Items</Items>
+        <Dimensions>
+          {totalWeight()}/ {totalCube()}
+        </Dimensions>
+      </Left>
+      <Right>
+        <ActionContainer onClick={() => dispatch({ type: 'bulkUpdate' })}>
+          <Action>Bulk Update</Action>
+        </ActionContainer>
+        <ActionContainer onClick={() => dispatch({ type: 'addProduct' })}>
+          <Action>ADD NEW PRODUCT(S)</Action>
+        </ActionContainer>
+        <ActionContainer onClick={() => dispatch({ type: 'deleteProduct' })}>
+          <Action>DELETE PRODUCT(S)</Action>
+        </ActionContainer>
+      </Right>
+      <ModalManager /> */}
+    </Container>
+  );
+}
+
+// const Dimensions = styled.span`
+//   font-family: 'Lato', sans-serif;
+//   font-size: 13px;
+//   font-weight: 500;
+//   line-height: 16px;
+//   color: #8e8a85;
+// `;
+
+// const Right = styled.div`
+//   margin-left: auto;
+//   display: flex;
+//   gap: 10px;
+//   margin-right: 10px;
+// `;
+
+// const Action = styled.span`
+//   color: #3a3630;
+//   font-family: 'Lato', sans-serif;
+//   font-size: 12px;
+//   font-style: normal;
+//   font-weight: 600;
+//   line-height: 20px;
+//   text-transform: uppercase;
+// `;
+
+// const ActionContainer = styled.div`
+//   padding: 5px 10px;
+//   border-radius: 4px;
+//   border: 1px solid #edebe8;
+//   background: #edebe8;
+//   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+//   cursor: pointer;
+// `;
+
+// const Items = styled.span`
+//   font-family: 'Roboto', sans-serif;
+//   font-size: 14px;
+//   font-weight: 500;
+//   line-height: 24px;
+//   color: #8e8a85;
+//   text-transform: capitalize;
+//   color: #aea9a1;
+// `;
+
+// const Left = styled.div`
+//   display: flex;
+//   align-items: center;
+//   gap: 30px;
+// `;
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 30px;
+`;
+
+export default CollapsedContent;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+import ProductTable from '../../return-client-products/ProductTable';
+// import OrderDetailsFooter from '../../order-details/expanded-content/footer';
+import NewReturnDropdown from '../../notes/order-dropdown/NewReturnDropdown';
+import { Button } from '@bjsdistribution/dms-component-library';
+
+function ExpandedContent() {
+  const SaveNote = () => {
+    alert('saved');
+  };
+  return (
+    <Container>
+      <ProductTable />
+      <MidConatiner>
+        <SaveNoteContainer>
+          <Button style={{ borderRadius: '20px' }} onClick={SaveNote}>
+            SAVE Details
+          </Button>
+          <NewReturnDropdown />
+        </SaveNoteContainer>
+      </MidConatiner>
+    </Container>
+  );
+}
+const MidConatiner = 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;
+`;
+
+const SaveNoteContainer = styled.div`
+  display: inline-flex;
+  gap: 10px;
+`;
+const Container = styled.div``;
+
+export default ExpandedContent;

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

@@ -0,0 +1,28 @@
+// 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

@@ -0,0 +1,34 @@
+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;