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

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+import SwitchSelector from 'react-switch-selector';
+import { notification } from 'antd';
+
+interface ForceDebriefSelectorProps {
+  onSwitchChange: (newValue: string) => void;
+}
+
+export const Options = [
+  {
+    label: 'Success',
+    value: 'success',
+    selectedBackgroundColor: '#57DB7A',
+  },
+  {
+    label: 'Failure',
+    value: 'failure',
+    selectedBackgroundColor: '#E95252',
+  },
+];
+
+const ForceDebriefSelector: React.FC<ForceDebriefSelectorProps> = ({
+  onSwitchChange,
+}) => {
+  const initialSelectedIndex = Options?.findIndex(
+    ({ value }) => value === 'success'
+  );
+
+  const handleSwitchChange = (selectedOptionValue: unknown) => {
+    if (typeof selectedOptionValue === 'string') {
+      onSwitchChange(selectedOptionValue);
+    } else {
+      notification.error({
+        message: 'Error',
+        description:
+          typeof selectedOptionValue ||
+          'Unexpected type for selectedOptionValue:',
+      });
+    }
+  };
+
+  return (
+    <StyledSwitch>
+      <SwitchSelector
+        onChange={handleSwitchChange}
+        options={Options}
+        initialSelectedIndex={initialSelectedIndex}
+        backgroundColor={'#cbc8c2'}
+        fontColor={'#f5f6fa'}
+        optionBorderRadius={30}
+      />
+    </StyledSwitch>
+  );
+};
+
+const StyledSwitch = styled.div`
+  width: 25%;
+  height: 40px;
+  .react-switch-selector-wrapper {
+    background: #777777;
+  }
+`;
+
+export default ForceDebriefSelector;

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;