@bjsdistribution/dms-client-return 0.1.9-prod → 0.1.10-prod

package/src/components/order-view/order-actions/actions/force-debrief/order-info/RadioButtons.tsx

@@ -0,0 +1,201 @@
+import { RadioButtonGroup } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { useOrderDetails, useOrderStaticData } from '../../../../store';
+import { OrderServiceType } from '../../../../types';
+import { capitalize } from '../../../../utils';
+
+export const radioButtonFilterOptions = [
+  { label: 'Yes', value: 'true' },
+  { label: 'No', value: 'false' },
+];
+
+function RadioButtonGroups() {
+  const [orderStaticData] = useOrderStaticData();
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+
+  const serviceLevelOptions = orderStaticData?.order_service_levels?.map(
+    (x: any) => ({
+      label: capitalize(x.type.replaceAll('_', ' ')),
+      value: x.id.toString(),
+    })
+  );
+
+  const deliveryPointOptions = orderStaticData?.order_delivery_point?.map(
+    (x: any) => ({
+      label: capitalize(x.type.replaceAll('_', ' ')),
+      value: x.id.toString(),
+    })
+  );
+
+  const serviceTypeOptions = orderStaticData?.order_type?.map(
+    (option: any) => ({
+      label: capitalize(option.type.replaceAll('_', ' ')),
+      value: option.id.toString(),
+    })
+  );
+
+  const orderServicesOptions = orderStaticData?.order_service_list;
+  const orderServices = orderDetails?.order_services;
+  const deliveryPointId = orderDetails?.order_services_detail?.order_delivery_point_id?.toString();
+  const serviceLevelId = orderDetails?.order_services_detail?.order_service_level_id?.toString();
+  const orderTypeId = orderDetails?.order_type_id?.toString();
+
+  // ON CHANGE HANDLERS
+  const onChangeDeliveryPoint = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const updatedServices = {
+      ...orderDetails?.order_services_detail!,
+      order_delivery_point_id: +event.target.value,
+    };
+    const newData = { ...orderDetails, order_services_detail: updatedServices };
+    setOrderDetails(newData);
+  };
+
+  const onChangeServiceLevel = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const updatedServices = {
+      ...orderDetails?.order_services_detail!,
+      order_service_level_id: +event.target.value,
+    };
+    const newData = { ...orderDetails, order_services_detail: updatedServices };
+    setOrderDetails(newData);
+  };
+
+  const onChangeServiceType = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newData = { ...orderDetails, order_type_id: +event.target.value };
+    setOrderDetails(newData);
+  };
+
+  const onChangeServices = (id: number) => {
+    const clone = [...orderServices];
+
+    // Check if the service already exists in the order
+    const selectedService = clone.find(
+      (s: OrderServiceType) => s.order_service_list_id === id
+    );
+
+    if (selectedService !== undefined) {
+      if (selectedService.new_id) {
+        // It's a newly added service, just remove it
+        const updatedOrderServices = clone.filter(
+          (service: OrderServiceType) => service.id !== selectedService.id
+        );
+        const newData = {
+          ...orderDetails,
+          order_services: updatedOrderServices,
+        };
+        setOrderDetails(newData);
+      } else {
+        // It's an existing (persisted) service, toggle its `is_deleted` flag
+        const updatedSelectedService = {
+          ...selectedService,
+          is_deleted: !selectedService.is_deleted,
+        };
+
+        const updatedOrderServices = clone
+          .filter(
+            (service: OrderServiceType) => service.id !== selectedService.id
+          )
+          .concat(updatedSelectedService);
+
+        const newData = {
+          ...orderDetails,
+          order_services: updatedOrderServices,
+        };
+        setOrderDetails(newData);
+      }
+    } else {
+      // Case 2: Service doesn't exist — add it as a new one
+      const newService: OrderServiceType = {
+        is_deleted: false,
+        order_service_list_id: id,
+        new_id: id,
+        id: id,
+      };
+
+      clone.push(newService);
+
+      const newData = {
+        ...orderDetails,
+        order_services: clone,
+      };
+
+      setOrderDetails(newData);
+    }
+  };
+
+  return (
+    <Container>
+      <Group>
+        <RadioButtonGroup
+          heading="Service Type"
+          onChange={onChangeServiceType}
+          options={serviceTypeOptions || []}
+          selectedValue={orderTypeId || ''}
+          direction="vertical"
+          required={false}
+          isDisabled
+        />
+      </Group>
+      <Group>
+        <RadioButtonGroup
+          heading="Service Level"
+          onChange={onChangeServiceLevel}
+          options={serviceLevelOptions || []}
+          selectedValue={serviceLevelId || ''}
+          direction="vertical"
+          required={false}
+          isDisabled
+        />
+      </Group>
+      <Group>
+        <RadioButtonGroup
+          heading="Delivery Point"
+          onChange={onChangeDeliveryPoint}
+          options={deliveryPointOptions || []}
+          selectedValue={deliveryPointId || ''}
+          direction="vertical"
+          required={false}
+          isDisabled
+        />
+      </Group>
+
+      {orderServicesOptions?.map((service: any) => {
+        const selected = !!orderServices?.find(
+          (s: OrderServiceType) =>
+            s?.order_service_list_id === service?.id && s.is_deleted === false
+        );
+
+        return (
+          <Group>
+            <RadioButtonGroup
+              heading={service?.type?.replaceAll('_', ' ')}
+              onChange={() => onChangeServices(service?.id)}
+              options={radioButtonFilterOptions || []}
+              selectedValue={selected === false ? 'false' : 'true'}
+              direction="vertical"
+              required={false}
+              isDisabled
+            />
+          </Group>
+        );
+      })}
+    </Container>
+  );
+}
+const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 8px;
+  width: 100%;
+  align-items: flex-start;
+  pointer-events: none;
+`;
+
+const Group = styled.div`
+  flex: 1;
+`;
+
+export default RadioButtonGroups;

package/src/components/order-view/order-actions/actions/force-debrief/order-info/dropdowns/CancellationReasonDropdown.tsx

@@ -0,0 +1,40 @@
+import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { useOrderCancelReason, useOrderStaticData } from '../../../../../store';
+
+function CancellationReasonDropdown() {
+  const [cancelationReason, setCancelationReason] = useOrderCancelReason();
+  const [orderStaticData] = useOrderStaticData();
+  const cancellationReasonOptions =
+    orderStaticData?.cancellation_reasons?.map((x: any) => ({
+      label: x.reason,
+      value: x.id,
+    })) || [];
+  return (
+    <Container>
+      <Label
+        label="Cancellation Reason"
+        htmlFor="cancellationreasondropdown"
+        required
+      />
+      <SelectDropdown
+        placeholder="Select Reason"
+        options={cancellationReasonOptions || []}
+        inputId="cancellationreasondropdown"
+        openMenuOnFocus
+        value={cancelationReason}
+        onChange={selectedOption => setCancelationReason(selectedOption)}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default CancellationReasonDropdown;

package/src/components/order-view/order-actions/actions/force-debrief/order-info/dropdowns/FailureReasonDropdown.tsx

@@ -0,0 +1,108 @@
+import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import {
+  useFailureReason,
+  useIsFailureReasonChanged,
+  useOrderStaticData,
+} from '../../../../../store';
+
+function FailureReasonDropdown() {
+  const [orderStaticData] = useOrderStaticData();
+  const [failureReasonState, setFailureReason] = useFailureReason();
+  const [, setIsFailureReasonChanged] = useIsFailureReasonChanged(); // to map esc reason properly
+  const failureReasons = orderStaticData?.failure_reasons;
+  const escalationCategory = orderStaticData?.escalation_category;
+  const escalationTypes = orderStaticData?.escalation_types;
+  const faultNonFaultReasons = orderStaticData?.fault_non_fault_reasons;
+
+  // Step 1: Get IDs of "Failure-Non_Fault" and "Failure-Fault"
+  const failureNonFaultId = escalationCategory?.find(
+    (category: any) => category?.type === 'Failure - Non Fault'
+  )?.id;
+  const failureFaultId = escalationCategory?.find(
+    (category: any) => category?.type === 'Failure - Fault'
+  )?.id;
+
+  // Step 2: Map to get escalation type IDs
+
+  const failureNonFaultEscTypeId = escalationTypes?.filter(
+    (type: any) => type?.escalation_category_id === failureNonFaultId
+  )[0]?.id;
+  const failureFaultEscTypeId = escalationTypes?.filter(
+    (type: any) => type?.escalation_category_id === failureFaultId
+  )[0]?.id;
+
+  // Step 3: Separate fault and non-fault reasons
+  const nonFaultReasons = faultNonFaultReasons?.filter(
+    (reason: any) => reason?.escalation_type_id === failureNonFaultEscTypeId
+  );
+  const faultReasons = faultNonFaultReasons?.filter(
+    (reason: any) => reason?.escalation_type_id === failureFaultEscTypeId
+  );
+
+  // Step 4: Simplified mapping to failureReasons
+  const mapReasonsToFailures = (reasons: any) => {
+    const reasonIds = new Set(
+      reasons?.map((reason: any) => reason?.order_reason_id)
+    );
+    return failureReasons
+      ?.filter((failure: any) => reasonIds?.has(failure?.id))
+      ?.map((failure: any) => ({
+        value: failure?.reason,
+        label: failure?.title,
+        id: failure?.id,
+      }));
+  };
+
+  const faultReasonOptions = mapReasonsToFailures(faultReasons);
+  const nonFaultReasonOptions = mapReasonsToFailures(nonFaultReasons);
+
+  const groupedOptions: any = [
+    {
+      label: 'Fault Reasons',
+      options: faultReasonOptions,
+    },
+    {
+      label: 'Non-Fault Reasons',
+      options: nonFaultReasonOptions,
+    },
+  ];
+
+  const onChangeOption = (option: any) => {
+    setFailureReason(option);
+    setIsFailureReasonChanged(true);
+  };
+
+  const formatGroupLabel = (data: any) => (
+    <div style={{ color: 'rgba(0,0,0,0.8)' }}>
+      <span>{data?.label}</span>
+      {/* <span>{data?.options?.length}</span> */}
+    </div>
+  );
+
+  return (
+    <Container>
+      <Label label="Failure Reason" htmlFor="failurereasondropdown" required />
+      <SelectDropdown
+        placeholder="Select Reason"
+        options={groupedOptions || []}
+        inputId="failurereasondropdown"
+        openMenuOnFocus
+        value={failureReasonState}
+        onChange={onChangeOption}
+        formatGroupLabel={formatGroupLabel}
+        isDisabled={false}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default FailureReasonDropdown;

package/src/components/order-view/order-actions/actions/force-debrief/order-info/dropdowns/OrderHoldReasonDropdown.tsx

@@ -0,0 +1,37 @@
+import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { useOrderHoldReason, useOrderStaticData } from '../../../../../store';
+
+function OrderHoldReasonDropdown() {
+  const [orderStaticData] = useOrderStaticData();
+  const [orderHold, setOrderHold] = useOrderHoldReason();
+  const holdReasonOptions =
+    orderStaticData?.onhold_reasons?.map((x: any) => ({
+      label: x.reason,
+      value: x.id,
+    })) || [];
+  return (
+    <Container>
+      <Label label="Hold Reason" htmlFor="holdreasondropdown" required />
+      <SelectDropdown
+        placeholder="Select Reason"
+        options={holdReasonOptions || []}
+        inputId="holdreasondropdown"
+        openMenuOnFocus
+        value={orderHold}
+        onChange={selectedOption => setOrderHold(selectedOption)}
+        // isDisabled={isDisable}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default OrderHoldReasonDropdown;

package/src/components/order-view/order-actions/actions/force-debrief/order-info/dropdowns/StatusDropdown.tsx

@@ -0,0 +1,48 @@
+import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import {
+  useChargesState,
+  useNewStatus,
+  useOrderStaticData,
+} from '../../../../../store';
+
+function StatusDropdown() {
+  const [orderStaticData] = useOrderStaticData();
+  const [newStatus, setNewStatus] = useNewStatus();
+  const [, setCharges] = useChargesState();
+  const newStatusOptions = orderStaticData?.new_status?.map((x: any) => ({
+    label: x.type,
+    value: x.id,
+  }));
+  const selectedOption =
+    newStatusOptions?.find((option: any) => option.label === newStatus) || null;
+
+  const onChange = (option: any) => {
+    setNewStatus(option?.label);
+    setCharges(prev => ({ ...prev, new_order_status: option?.label }));
+  };
+  return (
+    <Container>
+      <Label label="New Status" htmlFor="statusdropdown" required />
+      <SelectDropdown
+        placeholder="Select Status"
+        options={newStatusOptions || []}
+        inputId="statusdropdown"
+        value={selectedOption} // Set the selected option here
+        openMenuOnFocus
+        onChange={onChange}
+        isDisabled={false}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default StatusDropdown;

package/src/components/order-view/order-actions/actions/force-debrief/order-info/dropdowns/ZoneDropdown.tsx

@@ -0,0 +1,27 @@
+import { Label } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { Input } from '../../styles';
+
+function ZoneDropdown() {
+  return (
+    <Container>
+      <Label label="Zone" htmlFor="zoneDropdown" />
+      <Input
+        placeholder=""
+        value={''}
+        onChange={() => {}}
+        style={{ marginRight: '8px', flex: 1 }}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default ZoneDropdown;

package/src/components/order-view/order-actions/actions/force-debrief/order-info/failure-content/index.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import FailureReasonDropdown from '../dropdowns/FailureReasonDropdown';
+import StatusDropdown from '../dropdowns/StatusDropdown';
+import styled from 'styled-components';
+import { Label, TextArea } from '@bjsdistribution/dms-component-library';
+import CancellationReasonDropdown from '../dropdowns/CancellationReasonDropdown';
+import OrderHoldReasonDropdown from '../dropdowns/OrderHoldReasonDropdown';
+import {
+  useChargesState,
+  useNewStatus,
+  useOrderDetails,
+  useProductDetails,
+} from '../../../../../store';
+import { getBaseUrlSymbol } from '../../../../../utils';
+
+function FailureContent() {
+  const [newStatus] = useNewStatus();
+  const [orderDetails] = useOrderDetails();
+  const [chargesState] = useChargesState();
+  const baseUrlSymbol = getBaseUrlSymbol();
+
+  const [productdata] = useProductDetails();
+  const sortedProductData = productdata?.sort((a: any, b: any) => {
+    return a?.status === b?.status ? 0 : a?.status ? -1 : 1;
+  });
+
+  const products = Array.isArray(sortedProductData)
+    ? sortedProductData?.filter(item => item?.status === true)
+    : [];
+
+  const excludedFields = [
+    'debrief_notes',
+    'new_order_status',
+    'base_charge_type',
+    'adhoc_charges',
+    'debrief_status',
+  ]; // Fields to exclude
+  let totalChargesAmount = 0;
+
+  for (const [key, value] of Object.entries(chargesState)) {
+    if (!excludedFields.includes(key) && typeof value === 'number') {
+      totalChargesAmount += value;
+    }
+  }
+
+  const adhocTotalCharges =
+    chargesState?.adhoc_charges?.length > 0
+      ? chargesState?.adhoc_charges?.reduce(
+          (acc, item) => acc + item.adhoc_charges,
+          0
+        )
+      : 0;
+
+  return (
+    <>
+      <DropdownGrid>
+        <DropdownGroup>
+          <FailureReasonDropdown />
+        </DropdownGroup>
+        <DropdownGroup>
+          <StatusDropdown />
+        </DropdownGroup>
+        {newStatus === 'Cancelled' && (
+          <DropdownGroup>
+            <CancellationReasonDropdown />
+          </DropdownGroup>
+        )}
+        {newStatus === 'On Hold' && (
+          <DropdownGroup>
+            <OrderHoldReasonDropdown />
+          </DropdownGroup>
+        )}
+        <GroupedFields>
+          <PairGroup>
+            <SmallGroup>
+              <Label label="Items" htmlFor="items" />
+              <Text>{products?.length}</Text>
+            </SmallGroup>
+            <SmallGroup>
+              <Label label="Total Charge" htmlFor="totalCharge" />
+              <div
+                style={{ display: 'flex', gap: '4px', alignItems: 'center' }}
+              >
+                <CurrencyWrapper>{baseUrlSymbol}</CurrencyWrapper>
+                <Text>{totalChargesAmount + adhocTotalCharges}</Text>
+              </div>
+            </SmallGroup>
+          </PairGroup>
+
+          <PairGroup>
+            <SmallGroup>
+              <Label label="Weight" htmlFor="weight" />
+              <Text>{orderDetails?.weight}Kg</Text>
+            </SmallGroup>
+          </PairGroup>
+        </GroupedFields>
+      </DropdownGrid>
+      <ContDropdownGrid>
+        <FieldGroup wide>
+          <Label label="Order Status Notes" htmlFor="notes" />
+          <TextInput
+            id="notes"
+            placeholder="Type notes here..."
+            value={orderDetails?.order_status_note || ''}
+            readOnly
+          />
+        </FieldGroup>
+
+        <FieldGroup wide>
+          <Label label="Charge Description" htmlFor="chargedescription" />
+          <TextInput
+            id="chargedescription"
+            placeholder="Type charge description here..."
+            onChange={() => {}}
+          />
+        </FieldGroup>
+      </ContDropdownGrid>
+    </>
+  );
+}
+
+const CurrencyWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  color: #999;
+`;
+
+const Text = styled.div`
+  color: #363a30;
+  font-size: 14px;
+`;
+const GroupedFields = styled.div`
+  display: flex;
+  gap: 7px;
+`;
+
+const PairGroup = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+
+const SmallGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 140px;
+  flex: 1;
+`;
+const FieldGroup = styled.div<{ wide?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: ${props => (props.wide ? 2 : 1)};
+  min-width: ${props => (props.wide ? '300px' : '220px')};
+`;
+
+const TextInput = styled(TextArea)`
+  resize: none;
+  width: 100%;
+  min-height: 180px;
+`;
+
+const DropdownGrid = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const ContDropdownGrid = styled.div`
+  display: flex;
+  gap: 20px;
+`;
+
+const DropdownGroup = styled.div`
+  flex: 1 1 calc(50% - 10px);
+
+  @media (max-width: 768px) {
+    flex: 1 1 100%;
+  }
+`;
+
+export default FailureContent;

package/src/components/order-view/order-actions/actions/force-debrief/order-info/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+import FailureContent from './failure-content';
+import SuccessContent from './success-content';
+import RadioButtonGroups from './RadioButtons';
+import { useActiveTab } from '../../../../store';
+
+function OrderInfo() {
+  const [activeTab] = useActiveTab();
+  return (
+    <Container>
+      <Top>
+        {activeTab === 'success' ? <SuccessContent /> : <FailureContent />}
+      </Top>
+      <Middle>
+        <RadioButtonGroups />
+      </Middle>
+      {/* <Bottom>
+       
+      </Bottom> */}
+    </Container>
+  );
+}
+
+// const DescriptionWrapper = styled.div`
+//   display: flex;
+//   gap: 20px;
+//   width: 100%;
+// `;
+
+const Middle = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+// const Bottom = styled.div`
+//   display: flex;
+//   flex-direction: column;
+//   gap: 20px;
+// `;
+
+const Top = styled.div`
+  display: flex;
+  gap: 15px;
+  width: 100%;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+`;
+
+export default React.memo(OrderInfo);