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

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

@@ -1,150 +0,0 @@
-import { RadioButtonGroup } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-import { useOrderDetails, useOrderStaticData } from '../../../../store';
-import { OrdersType } 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 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 selectedService = orderServicesOptions?.find(
-      (item: any) => item.id === id
-    );
-    const key = selectedService?.type;
-    const value = !orderDetails[key as keyof OrdersType];
-    setOrderDetails(prev => ({
-      ...prev,
-      [key]: value,
-    }));
-  };
-
-  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 = orderDetails[service?.type as keyof OrdersType];
-        return (
-          <Group>
-            <RadioButtonGroup
-              heading={service?.type?.replaceAll('_', ' ')}
-              onChange={() => onChangeServices(service?.id)}
-              options={radioButtonFilterOptions || []}
-              selectedValue={selected ? 'true' : 'false'}
-              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

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

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

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

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

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

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

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