@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,36 @@
+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-details/expanded-content/orders-section/VehicleType.tsx

@@ -0,0 +1,29 @@
+import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { vehicleTypeOptions } from '../../helper';
+
+function VehicleTypeDropdown() {
+  return (
+    <FormContainer>
+      <Label label="Vehicle Type" htmlFor="vehicleType" />
+      <SelectDropdown
+        placeholder="Select vehicle type"
+        options={vehicleTypeOptions}
+        inputId="vehicleType"
+        openMenuOnFocus
+        isDisabled={true}
+        value={vehicleTypeOptions[1]}
+      />
+    </FormContainer>
+  );
+}
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default VehicleTypeDropdown;

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

@@ -0,0 +1,65 @@
+import { FormSection } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import Header from '../../common/Header';
+// import OrderNumber from './OrderNumber';
+import ConsignmentNumber from './ConsignmentNumber';
+import RecipientReference from './RecipientReference';
+import DepotDropdown from './Depot';
+// import ValueField from './ValueField';
+import Droptime from './Droptime';
+import DeliveryDate from './DeliveryDate';
+import Carrier from './Carrier';
+import OrderNumber from './OrderNumber';
+import ScheduleAfter from './ScheduleAfter';
+import VehicleTypeDropdown from './VehicleType';
+
+function OrdersSection() {
+  return (
+    <CustomFormSection>
+      <Header label="Order" />
+      <FormInputs>
+        <GroupedInputs>
+          <ConsignmentNumber />
+          <Carrier />
+        </GroupedInputs>
+        <GroupedInputs>
+          <OrderNumber />
+          <DepotDropdown />
+        </GroupedInputs>
+        <GroupedInputs>
+          <DeliveryDate />
+          <ScheduleAfter />
+        </GroupedInputs>
+        <GroupedInputs>
+          {/* <ValueField OrdersSection={ Data}/> */}
+          <Droptime />
+        </GroupedInputs>
+        <GroupedInputs>
+          <RecipientReference />
+          <VehicleTypeDropdown />
+        </GroupedInputs>
+      </FormInputs>
+    </CustomFormSection>
+  );
+}
+
+const GroupedInputs = styled.div`
+  display: flex;
+  gap: 15px;
+`;
+
+const FormInputs = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+
+const CustomFormSection = styled(FormSection)`
+  flex: 1;
+  border-radius: 8px;
+  background: #f8fafc;
+  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
+`;
+
+export default OrdersSection;

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

@@ -0,0 +1,77 @@
+import { RadioButtonGroup } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { useOrderDetails, useOrderStaticData } from '../../../store';
+import { capitalize } from '../../../utils';
+
+function AssemblyType() {
+  const [orderData, setOrderData] = useOrderDetails();
+  const [orderStaticData] = useOrderStaticData();
+  const orderServices = orderData?.order_services;
+  const cloneServices = [...orderServices];
+
+  const assembleOrderService = orderStaticData?.order_service_list?.find(
+    (x: any) => x?.type?.toLowerCase() === 'assemble'
+  );
+
+  const assemblyTypeService = cloneServices?.find(
+    (x: any) => x?.order_service_list_id === assembleOrderService?.id
+  );
+  const assemblyTypeId = assemblyTypeService?.service_category_id;
+
+  const assemblyTypeOptions = orderStaticData?.order_service_list_category?.map(
+    (option: any) => ({
+      label: capitalize(option.type.replaceAll('_', ' ')),
+      value: option.id.toString(),
+    })
+  );
+
+  const radioGroupHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const updatedAssemblyTypeService = {
+      ...assemblyTypeService!,
+      service_category_id: +event.target.value,
+    };
+
+    const updatedOrderServices = cloneServices?.filter(
+      s => s?.order_service_list_id !== assembleOrderService?.id
+    );
+
+    updatedOrderServices.push(updatedAssemblyTypeService);
+    const newData = { ...orderData, order_services: updatedOrderServices };
+    setOrderData(newData);
+  };
+
+  return (
+    <Container
+      $isDisable={assemblyTypeService?.is_deleted === true ? true : false}
+    >
+      <RadioButtonGroup
+        selectedValue={assemblyTypeId?.toString() || ''}
+        heading="Assembly Type"
+        options={assemblyTypeOptions || []}
+        onChange={radioGroupHandler}
+        required={false}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div<{ $isDisable: Boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+  pointer-events: ${props => (props.$isDisable ? 'none' : 'auto')};
+  /* temporary change will add this in library */
+  > fieldset {
+    > div {
+      > div {
+        > label {
+          text-transform: capitalize;
+        }
+      }
+    }
+  }
+`;
+
+export default AssemblyType;

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

@@ -0,0 +1,53 @@
+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 DeliveryPointDropdown() {
+  const [orderStaticData] = useOrderStaticData();
+  const [orderData, setOrderData] = useOrderDetails();
+
+  const deliveryPointId =
+    orderData?.order_services_detail?.order_delivery_point_id;
+
+  const deliveryPointOptions = orderStaticData?.order_delivery_point?.map(
+    (option: any) => ({
+      label: capitalize(option.type.replaceAll('_', ' ')),
+      value: option.id,
+    })
+  );
+
+  const onChange = (event: any) => {
+    const updatedServices = {
+      ...orderData?.order_services_detail!,
+      order_delivery_point_id: event.value,
+    };
+    const newData = { ...orderData, order_services_detail: updatedServices };
+    setOrderData(newData);
+  };
+  return (
+    <Container>
+      <Label label="Delivery Point" htmlFor="deliveryPointDropdown" />
+      <SelectDropdown
+        placeholder="Select Delivery Point"
+        options={deliveryPointOptions || []}
+        inputId="deliveryPointDropdown"
+        value={deliveryPointOptions?.filter(
+          (f: any) => f.value === deliveryPointId
+        )}
+        openMenuOnFocus
+        onChange={onChange}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default DeliveryPointDropdown;

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import styled from 'styled-components';
+import ServiceSlider from '../../../../../common/services-slider/ServiceSlider';
+import { useOrderDetails, useOrderStaticData } from '../../../store';
+import { OrderServiceType } from '../../../types';
+
+function OrderServices() {
+  const [orderStaticData] = useOrderStaticData();
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const orderServices = orderDetails?.order_services;
+
+  const orderServicesOptions = orderStaticData?.order_service_list;
+
+  const toggleServices = (id: number) => {
+    const clone = [...orderServices];
+    const selectedService = clone?.find(
+      (s: OrderServiceType) => s?.order_service_list_id === id
+    );
+    if (selectedService !== undefined) {
+      //TO DO -> special case for assemble service but need discussion before proceeding anything
+      // const assembleOrderService = orderStaticData?.order_service_list?.find(
+      //   (x: any) => x?.type?.toLowerCase() === 'assemble'
+      // );
+      // const isAssembleService = assembleOrderService?.id === id;
+
+      if (selectedService.new_id) {
+        const updatedOrderServices = clone.filter(
+          (service: OrderServiceType) => service.id !== selectedService.id
+        );
+        const newData = {
+          ...orderDetails,
+          order_services: updatedOrderServices,
+        };
+        setOrderDetails(newData);
+      } else {
+        const updatedSelectedService = {
+          ...selectedService,
+          is_deleted: !selectedService.is_deleted,
+        };
+        // if(isAssembleService && updatedSelectedService.is_deleted === true) {
+        // TO DO -> handle later
+        // }
+        const updatedOrderServices = clone.filter(
+          (service: OrderServiceType) => service.id !== selectedService.id
+        );
+        updatedOrderServices.push(updatedSelectedService);
+        const newData = {
+          ...orderDetails,
+          order_services: updatedOrderServices,
+        };
+        setOrderDetails(newData);
+      }
+    } else {
+      // service not exist case
+      // if not matched then treat it as an new service
+      const largestId = Math.max(
+        ...clone?.map((o: OrderServiceType) => +o?.order_service_list_id!)
+      );
+      const service: OrderServiceType = {
+        is_deleted: false,
+        order_service_list_id: id,
+        new_id:
+          largestId !== undefined && largestId !== null ? largestId + 1 : 1,
+        id: largestId !== undefined && largestId !== null ? largestId + 1 : 1,
+      };
+      clone.push(service);
+      const newData = { ...orderDetails, order_services: clone };
+      setOrderDetails(newData);
+    }
+  };
+
+  return (
+    <Container>
+      {orderServicesOptions?.map((service: any) => {
+        const selected = !!orderServices?.find(
+          (s: OrderServiceType) =>
+            s?.order_service_list_id === service?.id && s.is_deleted === false
+        );
+        return (
+          <ServiceSlider
+            serviceName={service?.type?.replaceAll('_', ' ')}
+            serviceId={service?.id}
+            isSelected={selected}
+            toggle={toggleServices}
+            key={service?.id}
+          />
+        );
+      })}
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  gap: 30px;
+  flex: 1;
+  @media screen and (max-width: 1170px) {
+    flex-wrap: wrap;
+  }
+`;
+
+export default OrderServices;

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

@@ -0,0 +1,59 @@
+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;
+
+  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);
+  };
+  return (
+    <Container>
+      <RadioButtonGroup
+        selectedValue={serviceLevelId?.toString() || ''}
+        heading="Service Level"
+        options={serviceLevelOptions || []}
+        onChange={radioGroupHandler}
+        required={true}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+  /* temporary change will add this in library */
+  > fieldset {
+    > div {
+      > div {
+        > label {
+          text-transform: capitalize;
+        }
+      }
+    }
+  }
+`;
+
+export default ServiceLevel;

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

@@ -0,0 +1,47 @@
+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);
+  };
+
+  return (
+    <Container>
+      <Label label="Service Type" htmlFor="serviceTypeDropdown" />
+      <SelectDropdown
+        placeholder="Select Service Type"
+        options={serviceTypeOptions || []}
+        value={serviceTypeOptions?.filter((f: any) => f.value === orderTypeId)}
+        inputId="serviceTypeDropdown"
+        openMenuOnFocus
+        onChange={onChange}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default ServiceTypeDropdown;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useOrderDetails, useOrderStaticData } from '../../../store';
+import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+import { capitalize } from '../../../utils';
+
+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) => ({
+      label: capitalize(option.type.replaceAll('_', ' ')),
+      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);
+  };
+
+  return (
+    <Container>
+      <Label label="Timed Service" htmlFor="timedServiceDropdown" />
+      <SelectDropdown
+        placeholder="Select Timed Service"
+        options={timedServicesOptions || []}
+        value={timedServicesOptions?.filter(
+          (f: any) => f.value === timesServiceId
+        )}
+        inputId="timedServiceDropdown"
+        onChange={onChange}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default TimedServiceDropdown;

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

@@ -0,0 +1,71 @@
+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);
+`;
+
+export default ServicesSection;