@bjsdistribution/dms-client-return 0.1.7-prod → 0.1.8-prod

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

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import {
+  Container,
+  CurrencySymbol,
+  FieldRow,
+  Input,
+  MainContainer,
+  Title,
+} from '../../styles';
+import { getBaseUrlSymbol, handleKeyDownDebrief } from '../../../../../utils';
+import { useChargesState } from '../../../../../store';
+
+function AdhocSection() {
+  const [charges, setCharges] = useChargesState();
+  const [inputValues, setInputValues] = useState<any>(charges?.adhoc_charges);
+  const baseUrlSymbol = getBaseUrlSymbol();
+
+  const handleLabelChange = (id: string, newLabel: string) => {
+    setCharges(prev => ({
+      ...prev,
+      adhoc_charges: prev.adhoc_charges.map(charge =>
+        charge.id === id
+          ? { ...charge, adhoc_charges_description: newLabel }
+          : charge
+      ),
+    }));
+  };
+
+  const handleValueChange = (id: string, value: string) => {
+    setInputValues((prev: any) => ({
+      ...prev,
+      [id]: value,
+    }));
+    let val = parseFloat(value);
+    if (value === '') {
+      setCharges(prev => ({
+        ...prev,
+        adhoc_charges: prev.adhoc_charges.map(charge =>
+          charge.id === id ? { ...charge, adhoc_charges: 0 } : charge
+        ),
+      }));
+    } else if (!isNaN(val)) {
+      val = val >= 0 ? val : 0;
+      setCharges(prev => ({
+        ...prev,
+        adhoc_charges: prev.adhoc_charges.map(charge =>
+          charge.id === id ? { ...charge, adhoc_charges: val } : charge
+        ),
+      }));
+    }
+  };
+
+  return (
+    <MainContainer>
+      <Title>Adhoc</Title>
+      <Container>
+        {charges?.adhoc_charges?.map(item => {
+          return (
+            <FieldRow key={item.id}>
+              <Input
+                placeholder=""
+                value={item.adhoc_charges_description}
+                onChange={(e: any) =>
+                  handleLabelChange(item.id, e.target.value)
+                }
+                style={{ marginRight: '8px', flex: 1 }}
+              />
+              <div
+                style={{ display: 'flex', gap: '3px', alignItems: 'center' }}
+              >
+                <CurrencySymbol>{baseUrlSymbol}</CurrencySymbol>
+                <Input
+                  type="number"
+                  min={0}
+                  max={10000}
+                  placeholder="0.00"
+                  onWheel={(e: any) => e.target.blur()}
+                  value={inputValues[item.id] ?? ''}
+                  onChange={(e: any) =>
+                    handleValueChange(item.id, e.target.value)
+                  }
+                  style={{ flex: 1 }}
+                  onKeyDown={handleKeyDownDebrief}
+                />
+              </div>
+            </FieldRow>
+          );
+        })}
+      </Container>
+    </MainContainer>
+  );
+}
+
+export default AdhocSection;

package/src/components/order-view/order-actions/actions/force-debrief/charges/base-charge/index.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import {
+  // Container,
+  FieldRow,
+  Input,
+  Label,
+  MainContainer,
+  Title,
+} from '../../styles';
+import { AntSelect } from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+import { getBaseUrlSymbol, handleKeyDownDebrief } from '../../../../../utils';
+import { useChargesState } from '../../../../../store';
+import { ChargesType } from '../../../../../types';
+
+interface IProps {
+  inputValue: Record<string, string>;
+  setInputValue: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+  staticData: any;
+}
+
+function BaseCharges(props: IProps) {
+  const [chargesState, setCharges] = useChargesState();
+  const baseUrlSymbol = getBaseUrlSymbol();
+
+  // const [inputValue, setInputValue] = useState<Record<string, string>>({});
+  const handleChange = (field: string, value: string) => {
+    props?.setInputValue((prev: any) => ({
+      ...prev,
+      [field]: value,
+    }));
+    let val = parseFloat(value);
+    if (value === '') {
+      setCharges(prev => ({
+        ...prev,
+        [field]: 0,
+      }));
+    } else if (!isNaN(val)) {
+      val = val >= 0 ? val : 0;
+      setCharges(prev => ({
+        ...prev,
+        [field]: val,
+      }));
+    }
+  };
+
+  const onChange = (val: string) => {
+    setCharges((charge: ChargesType) => ({
+      ...charge,
+      base_charge_type: +val,
+    }));
+  };
+
+  const baseChargeOptions = props?.staticData?.base_charges?.map((x: any) => {
+    return {
+      label: x?.type,
+      value: x?.id,
+    };
+  });
+
+  return (
+    <MainContainer>
+      <Title>Base Charge</Title>
+      <Wrapper>
+        <FieldRow>
+          <Label style={{ width: '90px' }}>Base Charge</Label>
+          <div style={{ display: 'flex', gap: '3px', alignItems: 'center' }}>
+            <AntSelect
+              onChange={onChange}
+              options={baseChargeOptions || []}
+              placeholder="Base charge type"
+              defaultValue={baseChargeOptions?.filter(
+                (x: any) => x?.value === chargesState?.base_charge_type
+              )}
+              style={{ width: 100 }}
+            />
+            <CurrencyWrapper>{baseUrlSymbol}</CurrencyWrapper>
+            <Input
+              min={0}
+              max={10000}
+              type="number"
+              placeholder="0.00"
+              onWheel={(e: any) => e.target.blur()}
+              value={props?.inputValue['base_charge'] ?? ''}
+              onChange={(e: any) => handleChange('base_charge', e.target.value)}
+              onKeyDown={handleKeyDownDebrief}
+            />
+          </div>
+        </FieldRow>
+      </Wrapper>
+    </MainContainer>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const CurrencyWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  color: #999;
+`;
+
+export default BaseCharges;

package/src/components/order-view/order-actions/actions/force-debrief/charges/collection-add-ons/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  Container,
+  CurrencySymbol,
+  FieldRow,
+  Input,
+  Label,
+  MainContainer,
+  Title,
+} from '../../styles';
+import { getBaseUrlSymbol, handleKeyDownDebrief } from '../../../../../utils';
+import { useChargesState } from '../../../../../store';
+
+const fields = [
+  { label: 'Repackage', value: 're_package' },
+  { label: 'Disassemble', value: 'disassemble' },
+  { label: 'QC', value: 'collection_qc' },
+  { label: 'Return to Client', value: 'return_to_client' },
+];
+
+interface IProps {
+  inputValue: Record<string, string>;
+  setInputValue: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+}
+
+function CollectionAddOns(props: IProps) {
+  const [, setCharges] = useChargesState();
+  const baseUrlSymbol = getBaseUrlSymbol();
+
+  const handleChange = (field: string, value: string) => {
+    props?.setInputValue((prev: any) => ({
+      ...prev,
+      [field]: value,
+    }));
+    let val = parseFloat(value);
+    if (isNaN(val)) {
+      setCharges(prev => ({
+        ...prev,
+        [field]: 0,
+      }));
+    } else {
+      val = val >= 0 ? val : 0;
+      setCharges(prev => ({
+        ...prev,
+        [field]: val,
+      }));
+    }
+  };
+
+  return (
+    <MainContainer>
+      <Title>Collection Add-Ons</Title>
+      <Container>
+        {fields.map((item: any) => (
+          <FieldRow key={item.value}>
+            <Label>{item.label}</Label>
+            <div style={{ display: 'flex', gap: '3px', alignItems: 'center' }}>
+              <CurrencySymbol>{baseUrlSymbol}</CurrencySymbol>
+              <Input
+                min={0}
+                max={10000}
+                type="number"
+                placeholder="0.00"
+                onWheel={(e: any) => e.target.blur()}
+                value={props?.inputValue[item.value] ?? ''}
+                onChange={(e: any) => handleChange(item.value, e.target.value)}
+                onKeyDown={handleKeyDownDebrief}
+              />
+            </div>
+          </FieldRow>
+        ))}
+      </Container>
+    </MainContainer>
+  );
+}
+
+export default CollectionAddOns;

package/src/components/order-view/order-actions/actions/force-debrief/charges/delivery-add-ons/index.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import {
+  Container,
+  CurrencySymbol,
+  FieldRow,
+  Input,
+  Label,
+  MainContainer,
+  Title,
+} from '../../styles';
+
+import { getBaseUrlSymbol, handleKeyDownDebrief } from '../../../../../utils';
+import { useChargesState } from '../../../../../store';
+
+const fields = ['ROC', 'Unpack', 'Packaging Disposal', 'Assembly', 'QC'];
+
+interface IProps {
+  inputValue: Record<string, string>;
+  setInputValue: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+}
+
+function DeliveryAddOns(props: IProps) {
+  const [, setCharges] = useChargesState();
+  const baseUrlSymbol = getBaseUrlSymbol();
+
+  const fieldsInLabelValueFormat = fields.map(field => ({
+    label: field,
+    value: field.toLowerCase().replace(/ /g, '_'), // You can adjust this to your preference
+  }));
+
+  const handleChange = (field: string, value: string) => {
+    props?.setInputValue((prev: any) => ({
+      ...prev,
+      [field]: value,
+    }));
+    let val = parseFloat(value);
+    if (isNaN(val)) {
+      setCharges(prev => ({
+        ...prev,
+        [field]: 0,
+      }));
+    } else {
+      val = val >= 0 ? val : 0;
+      setCharges(prev => ({
+        ...prev,
+        [field]: val,
+      }));
+    }
+  };
+
+  return (
+    <MainContainer>
+      <Title>Delivery Add-Ons</Title>
+      <Container>
+        {fieldsInLabelValueFormat.map((item: any) => (
+          <FieldRow key={item.value}>
+            <Label>{item.label}</Label>
+            <div style={{ display: 'flex', gap: '3px', alignItems: 'center' }}>
+              <CurrencySymbol>{baseUrlSymbol}</CurrencySymbol>
+              <Input
+                min={0}
+                max={10000}
+                type="number"
+                placeholder="0.00"
+                onWheel={(e: any) => e.target.blur()}
+                value={props?.inputValue[item.value] ?? ''}
+                onKeyDown={handleKeyDownDebrief}
+                onChange={(e: any) => handleChange(item.value, e.target.value)}
+              />
+            </div>
+          </FieldRow>
+        ))}
+      </Container>
+    </MainContainer>
+  );
+}
+
+export default DeliveryAddOns;

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  Container,
+  CurrencySymbol,
+  FieldRow,
+  Input,
+  Label,
+  MainContainer,
+  Title,
+} from '../../styles';
+import { getBaseUrlSymbol, handleKeyDownDebrief } from '../../../../../utils';
+import { useChargesState } from '../../../../../store';
+
+const fields = [
+  { label: 'Disposal & Recycling', value: 'disposal_recycling' },
+  { label: 'Disposal Only', value: 'disposal' },
+  { label: 'Recycle Only', value: 'recycle' },
+  { label: 'Admin', value: 'admin' },
+];
+
+interface IProps {
+  inputValue: Record<string, string>;
+  setInputValue: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+}
+
+function DisposalCharge(props: IProps) {
+  const [, setCharges] = useChargesState();
+  const baseUrlSymbol = getBaseUrlSymbol();
+
+  const handleChange = (field: string, value: string) => {
+    props?.setInputValue((prev: any) => ({
+      ...prev,
+      [field]: value,
+    }));
+    let val = parseFloat(value);
+    if (isNaN(val)) {
+      setCharges(prev => ({
+        ...prev,
+        [field]: 0,
+      }));
+    } else {
+      val = val >= 0 ? val : 0;
+      setCharges(prev => ({
+        ...prev,
+        [field]: val,
+      }));
+    }
+  };
+
+  return (
+    <MainContainer>
+      <Title>Disposal Charges</Title>
+      <Container>
+        {fields.map((item: any) => (
+          <FieldRow key={item.value}>
+            <Label>{item.label}</Label>
+            <div style={{ display: 'flex', gap: '3px', alignItems: 'center' }}>
+              <CurrencySymbol>{baseUrlSymbol}</CurrencySymbol>
+              <Input
+                min={0}
+                max={10000}
+                type="number"
+                placeholder="0.00"
+                onWheel={(e: any) => e.target.blur()}
+                value={props?.inputValue[item.value] ?? ''}
+                onChange={(e: any) => handleChange(item.value, e.target.value)}
+                onKeyDown={handleKeyDownDebrief}
+              />
+            </div>
+          </FieldRow>
+        ))}
+      </Container>
+    </MainContainer>
+  );
+}
+
+export default DisposalCharge;

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import {
+  Container,
+  FieldRow,
+  Input,
+  Label,
+  MainContainer,
+  Title,
+} from '../../styles';
+// import { ChargesType } from '../../../../types';
+
+import { getBaseUrlSymbol, handleKeyDownDebrief } from '../../../../../utils';
+import {
+  useChargesState,
+  useOrderDetails,
+  useOrderStaticData,
+} from '../../../../../store';
+import { CurrencySymbol } from '../../styles';
+import styled from 'styled-components';
+
+const fields = [
+  { label: 'Weight', value: 'weight' },
+  { label: 'Drop Time', value: 'drop_time' },
+  { label: 'Timed Services', value: 'timed_service' },
+  { label: 'Wait Time', value: 'wait_time' },
+  { label: 'Extra Floor', value: 'extra_floor' },
+  { label: 'Bulk Items', value: 'bulky_items' },
+  { label: 'Relabel (Pre-del)', value: 're_label' },
+  { label: 'Extra CBM', value: 'extra_cube' },
+  { label: 'Additional Box', value: 'additional_box' },
+  { label: 'Additional Item', value: 'additional_item' },
+];
+
+interface IProps {
+  inputValue: Record<string, string>;
+  setInputValue: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+}
+
+function OrderCharges(props: IProps) {
+  const [, setCharges] = useChargesState();
+  const [orderDetails] = useOrderDetails();
+  const [orderStaticData] = useOrderStaticData();
+  const weightVal = orderDetails?.weight;
+  const dropTime = orderDetails?.drop_time;
+  const cbm = orderDetails?.cube;
+  const timesServiceId = orderDetails?.order_services_detail?.timed_service_id;
+  const selectedTimedService = orderStaticData?.order_timed_services?.find(
+    (x: any) => x?.id === timesServiceId
+  );
+  const showSelectedTimedService =
+    selectedTimedService !== null && selectedTimedService !== undefined;
+  const showCbm = cbm !== undefined && cbm !== null && cbm > 0;
+  const showDropTime = dropTime !== undefined && dropTime !== null;
+  const showWeight = weightVal !== null && weightVal > 0;
+  const baseUrlSymbol = getBaseUrlSymbol();
+
+  const handleChange = (field: string, value: string) => {
+    props?.setInputValue((prev: any) => ({
+      ...prev,
+      [field]: value,
+    }));
+    let val = parseFloat(value);
+    if (value === '') {
+      setCharges(prev => ({
+        ...prev,
+        [field]: 0,
+      }));
+    } else if (!isNaN(val)) {
+      val = val >= 0 ? val : 0;
+      setCharges(prev => ({
+        ...prev,
+        [field]: val,
+      }));
+    }
+  };
+
+  return (
+    <MainContainer>
+      <Title>Order Charges</Title>
+      <Container>
+        {fields?.map(item => (
+          <FieldRow key={item.value}>
+            <Label style={{ minWidth: '100px' }}>{item.label}</Label>
+            {showWeight && item?.value === 'weight' && (
+              <OrderValue>{weightVal} Kg</OrderValue>
+            )}
+            {showDropTime && item?.value === 'drop_time' && (
+              <OrderValue>{dropTime} mins</OrderValue>
+            )}
+            {showCbm && item?.value === 'extra_cube' && (
+              <OrderValue>
+                {cbm} (m<sup>3</sup>)
+              </OrderValue>
+            )}
+            {showSelectedTimedService && item?.value === 'timed_service' && (
+              <OrderValue>
+                {selectedTimedService?.type?.replaceAll('_', '')}
+              </OrderValue>
+            )}
+            <div style={{ display: 'flex', gap: '3px', alignItems: 'center' }}>
+              <CurrencySymbol>{baseUrlSymbol}</CurrencySymbol>
+              <Input
+                min={0}
+                max={10000}
+                type="number"
+                placeholder="0.00"
+                onWheel={(e: any) => e.target.blur()}
+                value={props?.inputValue[item.value] ?? ''}
+                onChange={(e: any) => handleChange(item.value, e.target.value)}
+                onKeyDown={handleKeyDownDebrief}
+              />
+            </div>
+          </FieldRow>
+        ))}
+      </Container>
+    </MainContainer>
+  );
+}
+
+const OrderValue = styled.span`
+  color: #6396e5;
+`;
+
+export default OrderCharges;

package/src/components/order-view/order-actions/actions/force-debrief/escalation/EscalationCategory.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import {
+  dropdownStyles,
+  Label,
+  SelectDropdown,
+} from '@bjsdistribution/dms-component-library';
+import {
+  useEscalationCategory,
+  useFailureReason,
+  useOrderStaticData,
+} from '../../../../store';
+
+function EscalationCategory() {
+  const [orderStaticData] = useOrderStaticData();
+  const [escalationCategory, setEscalationCategory] = useEscalationCategory();
+  const [failureReason] = useFailureReason();
+
+  const faultNonFaultReasons = orderStaticData?.fault_non_fault_reasons;
+  const escalationTypes = orderStaticData?.escalation_types;
+
+  const escalationCategoryOptions = orderStaticData?.escalation_category?.map(
+    (category: any) => ({
+      label: category?.type,
+      value: category?.id,
+    })
+  );
+
+  useEffect(() => {
+    const escTypeId = faultNonFaultReasons?.find(
+      (x: any) => x?.order_reason_id === failureReason?.id
+    )?.escalation_type_id;
+    const escCategoryId = escalationTypes?.find((x: any) => x?.id === escTypeId)
+      ?.escalation_category_id;
+    const selectedOption = escalationCategoryOptions?.find(
+      (option: any) => option?.value === escCategoryId
+    );
+    setEscalationCategory(selectedOption);
+  }, [failureReason]);
+
+  return (
+    <Container>
+      <Label label="Escalation Category" />
+      <SelectDropdown
+        options={escalationCategoryOptions || []}
+        styles={{
+          ...dropdownStyles,
+          control: (styles, state) => ({
+            ...styles,
+            border: '1px solid #D0D5DD',
+            cursor: 'pointer',
+            borderRadius: `${
+              state.selectProps.menuIsOpen ? '0px 0px 6px 6px' : '6px'
+            }`,
+            boxShadow: '0px 3px 22px #00000014',
+            minHeight: '40px',
+            '&:hover': {
+              borderColor: '#D0D5DD',
+              boxShadow: '0px 3px 22px #00000014',
+            },
+          }),
+          menu: styles => ({
+            ...styles,
+            marginBottom: '0px',
+            borderRadius: '6px 6px 0px 0px',
+            boxShadow: '0px 3px 22px #00000014',
+            border: '1px solid #D0D5DD',
+            borderBottom: '0px',
+          }),
+          dropdownIndicator: (styles, state) => ({
+            ...styles,
+            transition: 'all 0.3s ease-in-out',
+            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'null',
+          }),
+        }}
+        placeholder="Select Category"
+        menuPlacement="top"
+        value={escalationCategory}
+        onChange={selectedOption => setEscalationCategory(selectedOption)}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+`;
+
+export default EscalationCategory;