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

package/src/components/order-view/modalsPopup/DefectsModal.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { AntTable } from '@bjsdistribution/dms-component-library';
-import styled from 'styled-components';
-import { DefectsData } from '../utils';
-const DefectsModal = () => {
-  const options = [
-    { value: 'bjsCouriers', label: 'BJS COURIERS' },
-    { value: 'bjsSales', label: 'BJS SALES' },
-    { value: 'test', label: 'TEST' },
-  ];
-
-  const columns = [
-    { key: 'action', title: 'Action' },
-    { key: 'type', title: 'Type' },
-    { key: 'primary_position', title: 'Primary Position' },
-    { key: 'secondary_position', title: 'Secondary Position' },
-    { key: 'tertiary_position', title: 'Tertiary Position' },
-    { key: 'primary_details', title: 'Primary Details' },
-    { key: 'secondary_details', title: 'Secondary Details' },
-    { key: 'created_by', title: 'Created By' },
-    { key: 'date', title: 'Date' },
-    { key: 'images', title: 'Images' },
-  ];
-  return (
-    <>
-      <GLobalPopupContent>
-        <StyledConatiner>
-          <AntTable
-            columns={columns}
-            data={DefectsData}
-            selectOptions={options}
-            onSelectChange={(value: any, record: any) =>
-              console.log('Selected value:', value, 'for record:', record)
-            }
-          />
-        </StyledConatiner>
-      </GLobalPopupContent>
-    </>
-  );
-};
-const StyledConatiner = styled.div`
-  /* tex: nowrap; */
-`;
-export default DefectsModal;
-const GLobalPopupContent = styled.div``;

package/src/components/order-view/modalsPopup/ModalManager.tsx

@@ -1,262 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  AntModal,
-  useApiHook,
-  useAxios,
-  Checkbox,
-} from '@bjsdistribution/dms-component-library';
-import { useAtom } from 'jotai';
-import { countReducerAtom, useDeleteProdsID, usefetchAgain } from '../store';
-
-import DefectsModal from './DefectsModal';
-import { ApiResponse } from '../types';
-import CreateReturnModal from './CreateReturnModal';
-import {
-  useFinalPayload,
-  useGroupedPayload,
-  useNewReturnPayload,
-  usePostLoading,
-  useSelectAll,
-  useSelectedConfirmLoc,
-  useSelectedOrders,
-  useSendEmailNotification,
-} from '../../store';
-import { notification } from 'antd';
-import { useNavigate } from 'react-router-dom';
-
-const ModalManager = () => {
-  const [popupName, dispatch] = useAtom(countReducerAtom);
-  const [hasStartedLoading, setHasStartedLoading] = useState(false);
-  const [selectedRows] = useDeleteProdsID();
-  const [, setIsFormValid] = useState(false);
-  const [newGrouped] = useFinalPayload();
-  const [postLoading, SetPostLoading] = usePostLoading();
-  const [, setSelectedReturnOrder] = useSelectedOrders();
-  const [forDisabledCheck, setCheck] = useSelectedConfirmLoc();
-  const [, setNewPayload] = useNewReturnPayload();
-  const [, setGrouped] = useGroupedPayload();
-  const [, setSelectAll] = useSelectAll();
-  const [, setCallForFetch] = usefetchAgain();
-  const [
-    sendEmailNotification,
-    setSendEmailNotification,
-  ] = useSendEmailNotification();
-  const navigate = useNavigate();
-
-  const closeModal = () => {
-    dispatch({ type: 'close' });
-    setSendEmailNotification(true);
-  };
-
-  const validateForm = () => {
-    return selectedRows?.length > 0;
-  };
-
-  useEffect(() => {
-    setIsFormValid(validateForm());
-  }, [selectedRows]);
-
-  // Confirm return popup
-  const {
-    data: response,
-    setShouldPerformAction,
-    loading: confirmLoading,
-    error: apiError,
-    setError,
-  } = useApiHook<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/v1/return/create/`,
-    method: 'POST',
-    body: newGrouped,
-    performAction: false,
-  });
-
-  useEffect(() => {
-    SetPostLoading(confirmLoading);
-  }, [confirmLoading]);
-
-  const handleConfirmReturn = () => {
-    if (newGrouped?.length > 0) {
-      setShouldPerformAction(true);
-      setCallForFetch(true);
-      SetPostLoading(confirmLoading);
-    }
-    dispatch({ type: 'close' });
-  };
-
-  const { fetchData: callSendEmail } = useAxios({
-    endpoint: '/v1/return/create-csv-and-send-email/',
-    method: 'POST',
-  });
-
-  useEffect(() => {
-    if (confirmLoading) {
-      setHasStartedLoading(true);
-    }
-  }, [confirmLoading]);
-
-  useEffect(() => {
-    if (!hasStartedLoading) return;
-    if (confirmLoading || postLoading) return;
-
-    // @ts-ignore
-    if (apiError || (response && (response?.code == 500 || response?.code == 400))) {
-      setHasStartedLoading(false);
-
-      // @ts-ignore
-      const errorMessage = apiError?.message || response?.message || 'Failed to create return';
-      notification.error({
-        message: 'Failure',
-        description: errorMessage,
-      });
-      dispatch({ type: 'close' });
-      setSendEmailNotification(true);
-      setSelectedReturnOrder([]);
-      setCheck([]);
-      setNewPayload([]);
-      setGrouped([]);
-      setSelectAll(false);
-      setShouldPerformAction(false);
-      setError(null);
-      // @ts-ignore
-    } else if (response?.code === 201 || response?.code === 200) {
-      setHasStartedLoading(false);
-      notification.success({
-        message: 'Success',
-        // @ts-ignore
-        description: `${response?.message}`,
-      });
-      dispatch({ type: 'close' });
-      //@ts-ignore
-      const orderIdsString = response?.data?.[0]?.order_id;
-
-      const emailApiPayload = {
-        // order_ids: response?.data ? response.data.map((item: any) => item?.order_id ?? 0) : [],
-        gsit_order_ids: response?.data
-          ? response.data.map((item: any) => item?.order_id ?? 0)
-          : [],
-      };
-
-      // send to API
-      if (sendEmailNotification) {
-        callSendEmail({ payload: emailApiPayload });
-      }
-      if (orderIdsString) {
-        navigate(`/orders/view/return/?order=${orderIdsString}`);
-      } else {
-        navigate('/orders/view/return/overview');
-      }
-
-      // Reset email notification state back to true
-      setSendEmailNotification(true);
-      setSelectedReturnOrder([]);
-      setCheck([]);
-      setNewPayload([]);
-      setShouldPerformAction(false);
-      setSelectAll(false);
-      setError(null);
-
-      // for local
-      // navigate('/overview');
-
-      // for dev
-      //navigate('/orders/view/return/overview');
-    }
-  }, [postLoading, confirmLoading, hasStartedLoading, response]);
-
-  return (
-    <>
-      {popupName?.state === 'create-return' && (
-        <>
-          <AntModal
-            openStatus={popupName?.state == 'create-return' ? true : false}
-            closeModal={() => closeModal()}
-            PopupHeader={{
-              heading: 'CONFIRM RETURN',
-              subHeading: '',
-            }}
-            PopupFooter={{
-              btns: [
-                {
-                  name: (
-                    <div
-                      style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        marginRight: '16px',
-                        gap: '8px',
-                      }}
-                      onClick={e => e.stopPropagation()}
-                    >
-                      <Checkbox
-                        checked={sendEmailNotification}
-                        onChange={() =>
-                          setSendEmailNotification(!sendEmailNotification)
-                        }
-                      />
-                      <span
-                        style={{
-                          color: '#8d8f90',
-                          fontFamily: 'Poppins',
-                          fontSize: '14px',
-                          fontWeight: 400,
-                          textTransform: 'none',
-                        }}
-                      >
-                        Send Email Notification
-                      </span>
-                    </div>
-                  ),
-                  btnStyle: '',
-                  type: 'button',
-                },
-                {
-                  name: 'Submit',
-                  btnStyle: 'rounded',
-                  onClick: handleConfirmReturn,
-                  type: 'button',
-                  disabled: forDisabledCheck.length === 0,
-                },
-              ],
-
-              btnAlign: 'justifyEnd',
-            }}
-            BodyComponent={CreateReturnModal}
-            width={800}
-            classNameAdd={'globalPopup'}
-          />
-        </>
-      )}
-
-      {popupName?.state == 'defectsModal' && (
-        <AntModal
-          openStatus={popupName?.state == 'defectsModal' ? true : false}
-          closeModal={closeModal}
-          PopupHeader={{
-            heading: 'DEliver - DWLK1006 - 00605',
-            subHeading: 'ALtair TV stand for TVs up to 60',
-          }}
-          PopupFooter={{
-            btns: [
-              {
-                name: '',
-                btnStyle: '',
-                type: '',
-              },
-            ],
-            btnAlign: '',
-          }}
-          BodyComponent={DefectsModal}
-          width={1504}
-          classNameAdd={'globalPopup'}
-        />
-      )}
-    </>
-  );
-};
-
-export default ModalManager;
-
-
-

package/src/components/order-view/northern-southern-info/CustomInput.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Label } from '@bjsdistribution/dms-component-library';
-
-type CustomInputProps = {
-  label: string;
-  name?: string;
-  type?: string;
-  placeholder?: string;
-  value?: string | number;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  minLength?: number;
-  maxLength?: number;
-  disabled?: boolean;
-  direction?: 'row' | 'column';
-};
-
-const CustomInput: React.FC<CustomInputProps> = ({
-  label,
-  name,
-  type = 'text',
-  placeholder,
-  value,
-  onChange,
-  onBlur,
-  onKeyDown,
-  minLength,
-  direction = 'column',
-  maxLength,
-  disabled,
-}) => {
-  return (
-    <Container direction={direction}>
-      {label && <Label label={label} htmlFor={name} />}
-      <StyledInput
-        id={name}
-        name={name}
-        type={type}
-        placeholder={placeholder}
-        value={value}
-        onChange={onChange}
-        onBlur={onBlur}
-        onKeyDown={onKeyDown}
-        minLength={minLength}
-        maxLength={maxLength}
-        disabled={disabled}
-      />
-    </Container>
-  );
-};
-
-export default CustomInput;
-
-// ---------------- styled ----------------
-
-const StyledInput = styled.input`
-  padding: 12px 12px;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  font-size: 14px;
-  outline: none;
-  width: 100%;
-
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-`;
-
-const Container = styled.div<{ direction: 'row' | 'column' }>`
-  display: flex;
-  flex-direction: ${({ direction }: any) => direction};
-  align-items: ${({ direction }: any) =>
-    direction === 'row' ? 'center' : 'flex-start'};
-  gap: 6px;
-  flex: 1;
-`;

package/src/components/order-view/northern-southern-info/index.tsx

@@ -1,94 +0,0 @@
-import { FormSection } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-
-import { useOrderDetails } from '../store';
-import Header from '../order-details/common/Header';
-import CustomInput from './CustomInput';
-
-const NorthernSouthernInfoView = () => {
-  const [orderDetails, setOrderDetails] = useOrderDetails();
-  const handleChange = (key: any, value: string) => {
-    setOrderDetails((prev: any) => ({
-      ...prev,
-      order_customs_details: {
-        ...prev.order_customs_details,
-        [key]: value,
-      },
-    }));
-  };
-
-  return (
-    <CustomFormSection>
-      <Header label="Northern/Southern Ireland" />
-      <FormInputs>
-        <GroupedInputs>
-          <CustomInput
-            label="Consignee Country"
-            type="text"
-            placeholder="Enter Consignee Country"
-            value={orderDetails?.order_customs_details?.consignee_country}
-            onChange={(e: any) =>
-              handleChange('consignee_country', e.target.value)
-            }
-          />
-        </GroupedInputs>
-        <GroupedInputs>
-          <CustomInput
-            label="Procedure Code"
-            type="text"
-            placeholder="Enter Procedure Code"
-            value={orderDetails?.order_customs_details?.procedure_code}
-            onChange={(e: any) =>
-              handleChange('procedure_code', e.target.value)
-            }
-          />
-        </GroupedInputs>
-        <GroupedInputs>
-          <CustomInput
-            label="Additional Procedure Code"
-            type="text"
-            placeholder="Enter Add. Procedure Code"
-            value={
-              orderDetails?.order_customs_details?.additional_procedure_code
-            }
-            onChange={(e: any) =>
-              handleChange('additional_procedure_code', e.target.value)
-            }
-          />
-        </GroupedInputs>
-        <CustomInput
-          label="Additional Procedures"
-          name="additional-procedures"
-          type="text"
-          placeholder="Enter Additional Procedures"
-          value={orderDetails?.order_customs_details?.additional_procedures}
-          onChange={(e: any) =>
-            handleChange('additional_procedures', e.target.value)
-          }
-        />
-      </FormInputs>
-    </CustomFormSection>
-  );
-};
-const FormInputs = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  flex: 1;
-`;
-
-const CustomFormSection = styled(FormSection)`
-  flex: 1;
-  border-radius: 8px;
-  background: #f8fafc;
-  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
-  padding: 15px;
-`;
-
-const GroupedInputs = styled.div`
-  display: flex;
-  gap: 15px;
-  white-space: nowrap;
-`;
-export default NorthernSouthernInfoView;

package/src/components/order-view/notes/AddNote.tsx

@@ -1,186 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import {
-  Button,
-  Label,
-  useAxios,
-} from '@bjsdistribution/dms-component-library';
-import { Select, notification } from 'antd';
-import { useGlobalStateHitAuditLog, usemoduleIds, useOrderId } from '../store';
-import { useLocation } from 'react-router-dom';
-import { useClientPortal, useSelectedData } from '../../store';
-import NoteType from './NoteType';
-import { ApiResponse } from '../types';
-const template = `REASON- \nSTC- \nACTION- `;
-
-function AddNote() {
-  const [noteText, setNoteText] = useState(template);
-  const [noteOptions, setNoteOptions] = useState<
-    { label: string; value: string }[]
-  >([]);
-  const [selectedNoteType, setSelectedNoteType] = useState<string | null>(
-    'standard'
-  );
-  const [orderId] = useOrderId();
-  const location = useLocation();
-  const pathname = location.pathname;
-  const orderIdLocaation = pathname.split('/')[1];
-  const [isClientPortal] = useClientPortal();
-  const [moduleIds] = usemoduleIds();
-  const [, setRecallAuditLog] = useGlobalStateHitAuditLog();
-  const [selectedAssignee] = useSelectedData();
-
-  const { fetchData: getNoteType, data: fetchedData } = useAxios<any>({
-    endpoint: `audit_logs/order/type`,
-    method: 'GET',
-    showLoader: false,
-  });
-
-  useEffect(() => {
-    getNoteType();
-  }, []);
-
-  useEffect(() => {
-    if (fetchedData?.data) {
-      const options = fetchedData?.data?.map((item: any) => ({
-        label: item?.name,
-        value: item?.name,
-      }));
-      setNoteOptions(options);
-
-      const standardOption = options?.find(
-        (opt: any) => opt?.value?.toLowerCase() === 'standard'
-      );
-      if (standardOption) {
-        setSelectedNoteType(standardOption?.value);
-      } else if (options?.length > 0) {
-        setSelectedNoteType(options[0]?.value);
-      }
-    }
-  }, [fetchedData]);
-
-  const { fetchData: callAuditLogs } = useAxios<{ data: ApiResponse[] }>({
-    endpoint: `/audit_logs/orders/`,
-    method: 'POST',
-  });
-
-  // `const isValidFormat = () => {
-  // const lines = noteText.split('\n');
-  // if (lines.length < 3) return false;
-  // return (
-  // lines[0].startsWith('REASON-') &&
-  // lines[1].startsWith('STC-') &&
-  // lines[2].startsWith('ACTION-')
-  // );
-  // };
-
-  const isDisabled = !noteText.trim() || !selectedAssignee;
-
-  const saveNote = async () => {
-    setRecallAuditLog(false);
-    if (!noteText) return;
-    const payload = {
-      audit_logs: [
-        {
-          parent_object_id: orderId || orderIdLocaation,
-          parent_module_id: moduleIds?.parentId,
-          module_id: moduleIds?.id,
-          note_type: selectedNoteType,
-          module_object_id: orderId || orderIdLocaation,
-          action: 'create',
-          description: noteText,
-          data_dump: '{}',
-          manual: 1,
-          is_private: isClientPortal
-            ? false
-            : selectedAssignee === '0'
-            ? true
-            : false,
-        },
-      ],
-    };
-    try {
-      const response = await callAuditLogs({ payload });
-      //@ts-ignore
-      if (response?.code === 200 && response?.data) {
-        notification.success({
-          message: 'Success',
-          //@ts-ignore
-          description: response?.message || 'Note saved successfully',
-        });
-
-        setNoteText(template);
-        setSelectedNoteType('Standard');
-        setRecallAuditLog(true);
-      } else {
-        notification.error({
-          message: 'Error',
-          //@ts-ignore
-          description: response?.error || 'Failed to save note',
-        });
-      }
-    } catch (error) {
-      notification.error({
-        message: 'Error',
-        description: 'Failed to save note due to an error.',
-      });
-    }
-  };
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setNoteText(e.target.value);
-  };
-
-  return (
-    <Container>
-      <Label label="Add New Note" required style={{ color: 'black' }} />
-      <StyledAntSelect
-        options={noteOptions}
-        placeholder="Select Note Type"
-        onChange={(value: string) => setSelectedNoteType(value)}
-        value={selectedNoteType}
-      />
-      <StyledTextArea value={noteText} onChange={handleChange} rows={3} />
-      <SaveNoteContainer>
-        <Button disabled={isDisabled} onClick={saveNote}>
-          SAVE NOTE
-        </Button>
-        {!isClientPortal && <NoteType />}
-      </SaveNoteContainer>
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-`;
-
-const SaveNoteContainer = styled.div`
-  display: inline-flex;
-  gap: 10px;
-  .disabled button {
-    opacity: 0.5;
-    cursor: default;
-  }
-`;
-
-const StyledTextArea = styled.textarea`
-  height: 65px;
-  border-radius: 8px;
-  background: #fff;
-  resize: vertical;
-  border: 1px solid #e0e2e7;
-  padding: 8px 12px;
-  font-family: monospace;
-  white-space: pre-wrap;
-`;
-
-export const StyledAntSelect: any = styled(Select)`
-  .ant-select-selector {
-    border-radius: 8px;
-  }
-`;
-
-export default AddNote;