@bjsdistribution/dms-client-return 0.1.70-prod → 0.1.71-prod

package/src/components/order-view/order-details/expanded-content/services-section/OrderServices.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import ServiceSlider from '../../../../../common/services-slider/ServiceSlider';
-import {
-  useOrderDetails,
-  useOrderStaticData,
-} from '../../../store';
-import { OrdersType } from '../../../types';
-
-function OrderServices() {
-  const [orderStaticData] = useOrderStaticData();
-  const [orderDetails, setOrderDetails] = useOrderDetails();
-
-  const orderServicesOptions = orderStaticData?.order_service_list;
-
-  const desiredOrder = [
-    'unpack_items',
-    'take_packaging_away',
-    'assemble',
-    'disassemble',
-    'collect_disposal',
-  ];
-
-  const sortedServices = orderServicesOptions?.sort((a: any, b: any) => {
-    return desiredOrder.indexOf(a.type) - desiredOrder.indexOf(b.type);
-  });
-
-  const toggleServices = (id: number) => {
-    const selectedService = orderServicesOptions?.find(
-      (item: any) => item.id === id
-    );
-    const key = selectedService?.type;
-    const value = !orderDetails[key as keyof OrdersType];
-    setOrderDetails(prev => ({
-      ...prev,
-      [key]: value,
-    }));
-  };
-  const isDisabled = true;
-
-  return (
-    <Container disabled={isDisabled}>
-      {sortedServices?.map((service: any) => {
-        const selected = orderDetails[service?.type as keyof OrdersType];
-        return (
-          <ServiceSlider
-            serviceName={service?.type?.replaceAll('_', ' ')}
-            serviceId={service?.id}
-            isSelected={selected}
-            toggle={toggleServices}
-            key={service?.id}
-            disabled={true}
-          />
-        );
-      })}
-    </Container>
-  );
-}
-
-const Container = styled.div<{ disabled: boolean }>`
-  display: flex;
-  gap: 30px;
-  flex: 1;
-  @media screen and (max-width: 1170px) {
-    flex-wrap: wrap;
-
-    ${({ disabled }) =>
-      disabled &&
-      `
-    pointer-events: none;
-
-    > * {
-    pointer-events: none;
-    }
-  `}
-  }
-`;
-
-export default OrderServices;

package/src/components/order-view/order-details/expanded-content/services-section/ServiceLevel.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { RadioButtonGroup } from '@bjsdistribution/dms-component-library';
-import { useOrderDetails, useOrderStaticData } from '../../../store';
-import styled from 'styled-components';
-import { capitalize } from '../../../utils';
-
-function ServiceLevel() {
-  const [orderStaticData] = useOrderStaticData();
-  const [orderData, setOrderData] = useOrderDetails();
-
-  const serviceLevelId = orderData?.order_services_detail?.order_service_level_id?.toString();
-
-  const serviceLevelOptions = orderStaticData?.order_service_levels?.map(
-    (option: any) => ({
-      label: capitalize(option.type.replaceAll('_', ' ')),
-      value: option?.id?.toString(),
-    })
-  );
-
-  const radioGroupHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const updatedServices = {
-      ...orderData?.order_services_detail!,
-      order_service_level_id: +event.target.value,
-    };
-    const newData = { ...orderData, order_services_detail: updatedServices };
-    setOrderData(newData);
-  };
-
-  const isDisabled = true; // Example value
-
-  return (
-    <Container disabled={isDisabled}>
-      <RadioButtonGroup
-        selectedValue={serviceLevelId || ''}
-        heading="Service Level"
-        options={serviceLevelOptions || []}
-        onChange={radioGroupHandler}
-        required={true}
-        isDisabled={isDisabled}
-      />
-    </Container>
-  );
-}
-
-const Container = styled.div<{ disabled: boolean }>`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-
-  ${({ disabled }) =>
-    disabled &&
-    `
-    pointer-events: none;
-
-    > * {
-      pointer-events: none;
-    }
-  `}
-
-  > fieldset {
-    > div {
-      > div {
-        > label {
-          text-transform: capitalize;
-        }
-      }
-    }
-  }
-`;
-
-export default ServiceLevel;

package/src/components/order-view/order-details/expanded-content/services-section/ServiceType.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
-import { useOrderDetails, useOrderStaticData } from '../../../store';
-import styled from 'styled-components';
-import { capitalize } from '../../../utils';
-
-function ServiceTypeDropdown() {
-  const [orderStaticData] = useOrderStaticData();
-  const [orderData, setOrderData] = useOrderDetails();
-
-  const orderTypeId = orderData?.order_type_id;
-
-  const serviceTypeOptions = orderStaticData?.order_type?.map(
-    (option: any) => ({
-      label: capitalize(option.type.replaceAll('_', ' ')),
-      value: option.id,
-    })
-  );
-
-  const onChange = (event: any) => {
-    const newData = { ...orderData, order_type_id: event.value };
-    setOrderData(newData);
-  };
-  const isDisabled = true;
-
-  return (
-    <Container>
-      <Label label="Service Type" htmlFor="serviceTypeDropdown" />
-      <StyledSelectDropdown
-        placeholder="Select Service Type"
-        options={serviceTypeOptions || []}
-        value={serviceTypeOptions?.filter((f: any) => f.value === orderTypeId)}
-        inputId="serviceTypeDropdown"
-        openMenuOnFocus
-        onChange={onChange}
-        isDisabled={true}
-        className={isDisabled ? 'disabled' : ''}
-      />
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  // flex: 1;
-  min-width: 250px;
-`;
-
-const StyledSelectDropdown = styled(SelectDropdown)`
-  &.disabled {
-    cursor: not-allowed !important;
-    opacity: 0.7;
-  }
-`;
-
-export default ServiceTypeDropdown;

package/src/components/order-view/order-details/expanded-content/services-section/TimedService.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { useOrderDetails, useOrderStaticData } from '../../../store';
-import {
-  dropdownStyles,
-  Label,
-  SelectDropdown,
-} from '@bjsdistribution/dms-component-library';
-import styled from 'styled-components';
-import { capitalize } from '../../../utils';
-
-function convertTo12HourFormat(time24: any) {
-  const [hours, minutes] = time24?.split(':')?.map(Number);
-  const period = hours >= 12 ? 'PM' : 'AM';
-  const hours12 = hours % 12 || 12; // Convert to 12-hour format
-  return `${hours12}:${minutes?.toString()?.padStart(2, '0')} ${period}`;
-}
-
-function TimedServiceDropdown() {
-  const [orderStaticData] = useOrderStaticData();
-  const [orderData, setOrderData] = useOrderDetails();
-
-  const timesServiceId = orderData?.order_services_detail?.timed_service_id;
-
-  const timedServicesOptions = orderStaticData?.order_timed_services?.map(
-    (option: any) => {
-      const startTime = convertTo12HourFormat(option?.start_time);
-      const endTime = convertTo12HourFormat(option?.end_time);
-      const label = `${capitalize(
-        option?.type?.replaceAll('_', ' ')
-      )} (${startTime} - ${endTime})`;
-      return {
-        label: label,
-        value: option?.id,
-      };
-    }
-  );
-
-  const onChange = (event: any) => {
-    const updatedServices = {
-      ...orderData?.order_services_detail!,
-      timed_service_id: event.value,
-    };
-    const newData = { ...orderData, order_services_detail: updatedServices };
-    setOrderData(newData);
-  };
-
-  const isDisabled = true;
-
-  return (
-    <Container>
-      <Label label="Timed Service" />
-      <StyledSelectDropdown
-        styles={{
-          ...dropdownStyles,
-          control: (styles: any) => ({
-            ...styles,
-            minWidth: 'max-content',
-          }),
-        }}
-        placeholder="Select Timed Service"
-        options={timedServicesOptions || []}
-        value={timedServicesOptions?.filter(
-          (f: any) => f.value === timesServiceId
-        )}
-        inputId="timedServiceDropdown"
-        onChange={onChange}
-        // isDisabled={isDisabled}
-        className={isDisabled ? 'disabled' : ''}
-      />
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-`;
-
-const StyledSelectDropdown = styled(SelectDropdown)`
-  &.disabled {
-    pointer-events: none;
-    opacity: 0.7;
-  }
-`;
-
-export default TimedServiceDropdown;

package/src/components/order-view/order-details/expanded-content/services-section/index.tsx

@@ -1,76 +0,0 @@
-import { FormSection } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-import Header from '../../common/Header';
-import TimedServiceDropdown from './TimedService';
-import ServiceTypeDropdown from './ServiceType';
-import DeliveryPointDropdown from './DeliveryPoint';
-import ServiceLevel from './ServiceLevel';
-import AssemblyType from './AssemblyType';
-import OrderServices from './OrderServices';
-
-function ServicesSection() {
-  return (
-    <CustomFormSection>
-      <Header label="Services" />
-      <Top>
-        <DropDownContainer>
-          <TimedServiceDropdown />
-          <ServiceTypeDropdown />
-          <DeliveryPointDropdown />
-        </DropDownContainer>
-        <RadioContainer>
-          <ServiceLevel />
-          <AssemblyType />
-        </RadioContainer>
-      </Top>
-      <Bottom>
-        <OrderServices />
-      </Bottom>
-    </CustomFormSection>
-  );
-}
-
-const Top = styled.div`
-  display: flex;
-  gap: 30px;
-
-  @media screen and (max-width: 1280px) {
-    flex-direction: column;
-    gap: 20px;
-  }
-`;
-
-const DropDownContainer = styled.div`
-  display: contents;
-  @media screen and (max-width: 1280px) {
-    display: flex;
-    gap: 15px;
-  }
-`;
-
-const RadioContainer = styled.div`
-  display: contents;
-  @media screen and (max-width: 1280px) {
-    display: flex;
-    gap: 15px;
-  }
-`;
-
-const Bottom = styled.div``;
-
-const CustomFormSection = styled(FormSection)`
-  flex: 1;
-  flex-direction: column;
-  gap: 10px;
-  border-radius: 8px;
-  background: #f8fafc;
-  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
-  label,
-  input,
-  span {
-    cursor: default !important;
-  }
-`;
-
-export default ServicesSection;

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

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

@@ -1,55 +0,0 @@
-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({ orderLoading, depotDataLoading }: any) {
-  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
-        orderLoading={orderLoading}
-        depotDataLoading={depotDataLoading}
-      />
-    </>
-  );
-}
-
-export default OrderDetails;

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

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

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

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

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

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

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