@bjsdistribution/dms-client-return 0.0.94-prod → 0.0.95-prod

package/src/components/order-view/order-actions/actions/send-email/SendEmailModal.tsx

@@ -1,40 +1,137 @@
-import React from 'react';
+import React, { useState } from 'react';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
-import { useCurrentAction } from '../../../store';
-import { ContentContainer, Label, StyledInput, StyledTextArea } from '../modalstyle';
+import { useCurrentAction, useOrderDetails, useOrderId } from '../../../store';
+import { ContentContainer, StyledInput, StyledTextArea } from '../modalstyle';
+import { Label, useAxios } from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../../../types';
+import { notification } from 'antd';
 
 function SendEmailModal() {
   const [, setCurrentAction] = useCurrentAction();
+  const [orderDetails] = useOrderDetails();
+  const [orderId] = useOrderId();
 
-  const closeModal = () => {
-    setCurrentAction(undefined);
+  const initialTo = orderDetails?.order_recipient?.contact_email || '';
+  const initialSubject = `${orderDetails?.trading_name ||
+    ''} Order Update - ${orderDetails?.consignment || ''}`;
+
+  const [formData, setFormData] = useState({
+    to: initialTo,
+    subject: initialSubject,
+    body: '',
+  });
+
+  const [emailError, setEmailError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+  const validateEmail = (email: string) => {
+    setEmailError(emailRegex.test(email) ? '' : 'Invalid email format');
   };
+
+  const closeModal = () => setCurrentAction(undefined);
+
+  const { fetchData: callSendEmail } = useAxios<{ data: ApiResponse[] }>({
+    endpoint: `orders/${orderId}/trigger-email/`,
+    method: 'POST',
+  });
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+
+    if (name === 'to') validateEmail(value);
+  };
+
+  const handleSubmit = async () => {
+    const { to, subject, body } = formData;
+
+    if (!to.trim() || !subject.trim() || !body.trim()) {
+      alert('All fields are required!');
+      return;
+    }
+    if (emailError) {
+      alert('Please enter a valid email address.');
+      return;
+    }
+
+    const payload = [
+      {
+        order_id: Number(orderId),
+        email: to,
+        subject,
+        message: body,
+      },
+    ];
+
+    setLoading(true);
+
+    try {
+      const response = await callSendEmail({ payload });
+      console.log(response, 'responseresponse');
+      if (response) {
+        notification.success({
+          message: 'Success',
+          description: 'Email sent successfully!',
+        });
+        closeModal(); // Close modal on success
+      } else {
+        notification.error({
+          message: 'Error',
+          description: 'Failed to send email. Please try again.',
+        });
+      }
+    } catch (error) {
+      alert('An error occurred while sending the email.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isDisabled =
+    Object.values(formData).some(val => !val.trim()) || !!emailError || loading;
+
   return (
     <OrderActionModal
       headerTitle="Send Email"
       onCloseHeader={closeModal}
-      onSubmit={() => {}}
-      submitBtnTitle="Send Email"
+      onSubmit={handleSubmit}
+      submitBtnTitle={loading ? 'Sending...' : 'Send Email'}
+      isSubmitDisabled={isDisabled}
     >
       <ContentContainer>
-        <Label>To</Label>
+        <Label label="To" required />
         <StyledInput
           type="text"
-          name=""
+          name="to"
           required
-          placeholder="andy@aspire-technologies.com"
-          defaultValue={'andy@aspire-technologies.com'}
+          placeholder="Enter email"
+          value={formData.to}
+          onChange={handleChange}
+          onBlur={() => validateEmail(formData.to)}
         />
-        <Label>Subject</Label>
+        {emailError && <span style={{ color: 'red' }}>{emailError}</span>}
+
+        <Label label="Subject" required />
         <StyledInput
           type="text"
-          name=""
+          name="subject"
+          required
+          value={formData.subject}
+          onChange={handleChange}
+        />
+
+        <Label label="Body" required />
+        <StyledTextArea
+          name="body"
+          placeholder="Write here..."
           required
-          placeholder=""
-          defaultValue={'RICHER SOUNDS Order Update - B7049658-4064'}
+          value={formData.body}
+          onChange={handleChange}
         />
-        <Label>Body</Label>
-        <StyledTextArea name="note" placeholder="Write here..." />
       </ContentContainer>
     </OrderActionModal>
   );

package/src/components/order-view/order-actions/actions/send-sms/SendSmsModal.tsx

@@ -1,28 +1,136 @@
-import React from 'react';
-import { useCurrentAction } from '../../../store';
+import React, { useState } from 'react';
+import { useCurrentAction, useOrderDetails, useOrderId } from '../../../store';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import { ContentContainer, Label, StyledInput } from '../modalstyle';
+import { TextArea, useAxios } from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../../../types';
+import styled from 'styled-components';
+
+const CustomTextArea = styled(TextArea)`
+  width: 700px;
+  height: 140px;
+  resize: none;
+`;
+
+const ErrorText = styled.div`
+  color: red;
+  font-size: 12px;
+  margin-top: 4px;
+`;
 
 function SendSmsModal() {
   const [, setCurrentAction] = useCurrentAction();
+  const [orderDetails] = useOrderDetails();
+  const [orderId] = useOrderId();
+  const initialTo = orderDetails?.order_recipient?.contact_home || '';
+  const [toError, setToError] = useState('');
+  const [formData, setFormData] = useState({
+    to: initialTo,
+    body: '',
+  });
+
+  const { fetchData: callSendSms, loading } = useAxios<{ data: ApiResponse[] }>(
+    {
+      endpoint: `/v1/orders/send-sms/`,
+      method: 'POST',
+    }
+  );
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+
+    if (name === 'to') {
+      const digitsOnly = value.replace(/\D/g, '');
+      let error = '';
+
+      if (digitsOnly.length < 10) {
+        error = 'Phone number must be exactly 10 digits';
+      } else if (digitsOnly.length > 10) {
+        error = 'Phone number cannot exceed 10 digits';
+      }
+
+      setToError(error);
+
+      setFormData(prev => ({
+        ...prev,
+        to: digitsOnly.slice(0, 10),
+      }));
+    } else {
+      setFormData(prev => ({
+        ...prev,
+        [name]: value,
+      }));
+    }
+  };
+
+  const handleSubmit = async () => {
+    const trimmedTo = formData?.to?.trim();
+    const trimmedBody = formData?.body?.trim();
+
+    if (trimmedTo.length !== 10) {
+      setToError('Phone number must be exactly 10 digits');
+      return;
+    }
+
+    const payload = {
+      order_id: +orderId,
+      receiver: trimmedTo,
+      message: trimmedBody,
+      notification_type: 'Send SMS',
+    };
+
+    if (!trimmedTo || !trimmedBody) {
+      return;
+    }
+
+    try {
+      await callSendSms({ payload: payload });
+      closeModal();
+    } catch (error) {
+      console.error('Error sending SMS:', error);
+    }
+  };
 
   const closeModal = () => {
     setCurrentAction(undefined);
   };
 
+  const isFormValid =
+    formData?.to.trim()?.length === 10 &&
+    !toError &&
+    formData?.body.trim().length > 0;
+
   return (
     <OrderActionModal
-      headerTitle="Send Sms"
+      headerTitle="Send SMS"
       onCloseHeader={closeModal}
-      onSubmit={() => {}}
-      submitBtnTitle="Send SMS"
+      onSubmit={handleSubmit}
+      submitBtnTitle={loading ? 'Sending...' : 'Send SMS'}
+      isSubmitDisabled={!isFormValid || loading}
     >
       <ContentContainer>
         <Label>To</Label>
-        <StyledInput type="text" name="" required placeholder="Enter the number" />
+        <StyledInput
+          type="text"
+          name="to"
+          value={formData.to}
+          onChange={handleInputChange}
+          required
+          placeholder="Enter the number"
+          maxLength={10}
+        />
+        {toError && <ErrorText>{toError}</ErrorText>}
 
         <Label>Body</Label>
-        <StyledInput type="text" name="" required placeholder="Write here..." />
+        <CustomTextArea
+          name="body"
+          value={formData.body}
+          onChange={handleInputChange}
+          required
+          placeholder="Write here..."
+        />
       </ContentContainer>
     </OrderActionModal>
   );

package/src/components/order-view/order-actions/actions/split-order/index.tsx

@@ -8,27 +8,28 @@ import { ApiResponse } from '../../../types';
 
 import { useSelectedSplit, useSplitOrderPayload } from '../../store';
 import { notification } from 'antd';
+import { useNavigate } from 'react-router-dom';
 
 function SplitOrder() {
   const [, setCurrentAction] = useCurrentAction();
   const [orderDetails] = useOrderDetails();
   const orderRecipient = orderDetails?.order_recipient;
   const infoText = `${orderRecipient?.recipient_name}, ${orderRecipient?.postcode}`;
-  const [orderId] = useOrderId();
+  const [orderId, setOrderID] = useOrderId();
   const [payload] = useSplitOrderPayload();
   const [seledtedSplitOrder, setSelectedSplit] = useSelectedSplit();
 
   const onClose = () => {
     setCurrentAction(undefined);
   };
-
+  const navigate = useNavigate();
   const {
     data: response,
     setShouldPerformAction: setPerformAction,
   } = useApiHook<{
     data: ApiResponse[];
   }>({
-    endpoint: `orders/split_order/${orderId}`,
+    endpoint: `/v1/return/split/${orderId}`,
     method: 'POST',
     body: payload,
     performAction: false,
@@ -39,10 +40,19 @@ function SplitOrder() {
       setPerformAction(true);
     }
   };
-
+  //@ts-ignore
+  const newId = response?.data?.new_order;
   useEffect(() => {
     //@ts-ignore
     if (response?.code === 200) {
+      const currentPath = location.pathname
+        .split('/')
+        .slice(0, -1)
+        .join('/');
+      console.log(currentPath, 'currentPath');
+      navigate(`${currentPath}/${newId}`);
+      setOrderID(newId);
+      setSelectedSplit([]);
       notification.success({
         message: 'Success',
         description:

package/src/components/order-view/order-actions/actions/uncancel-order/UncancelOrder.tsx

@@ -1,26 +1,29 @@
 import React, { useEffect, useState } from 'react';
+import { TextArea, useAxios } from '@bjsdistribution/dms-component-library';
 import {
-  AntSelect,
-  Label,
-  TextArea,
-  useApiHook,
-} from '@bjsdistribution/dms-component-library';
-import {
+  useCancelOrderProducts,
   useCurrentAction,
   useCustomerInfo,
-  useOrderDetails,
   useOrderId,
   useOrderStaticData,
-  usePrevOrderDetails,
+  useProductDetails,
 } from '../../../store';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
-import { HoldContentContainer, HoldRow, SplitText } from '../modalstyle';
-import { ApiResponse, OrdersType } from '../../../types';
+import { HoldRow, Label } from '../modalstyle';
+import { ApiResponse, CancelOrderProductsType } from '../../../types';
 import styled from 'styled-components';
-import { useLoading } from '../../../../order-daily-overview/store/store';
 import { notification } from 'antd';
+import OrderActionsDropdown from '../../Dropdown';
+import UnCancelOrderTable from './UncancelOrderTable';
+
+interface IProps {
+  callOrdersApi: any;
+  callOrderStatusApi: any;
+  callOrderAlertsApi: any;
+  callOrderProductsApi: any;
+}
 
-function UncancelOrder() {
+function UncancelOrder(props: IProps) {
   const [orderId] = useOrderId();
   const [, setCurrentAction] = useCurrentAction();
 
@@ -33,10 +36,12 @@ function UncancelOrder() {
     undefined
   );
   const [unCancelNotes, setUncancelNotes] = useState<string>('');
-  const [, setOrderDetails] = useOrderDetails();
-  const [, setPrevOrderDetails] = usePrevOrderDetails();
-  const [, setLoading] = useLoading();
   const [customerInfo] = useCustomerInfo();
+  const [
+    cancelOrderProducts,
+    setCancelOrderProducts,
+  ] = useCancelOrderProducts();
+  const [orderProductDetails] = useProductDetails();
   const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
 
   const unCancelReasonOptions = orderStaticData?.uncancel_reasons?.map(
@@ -48,77 +53,135 @@ function UncancelOrder() {
     }
   );
 
-  const {
-    data: response,
-    setShouldPerformAction: setPerformAction,
-  } = useApiHook<{
+  const { fetchData: performUnCancelAction } = useAxios<{
     data: ApiResponse[];
   }>({
-    endpoint: `orders/${orderId}/uncancel/?uncancelled_reason=${unCancelReason}&uncancelled_notes=${unCancelNotes}`,
+    endpoint: `v1/orders/uncancel/?order_id=${orderId}`,
     method: 'POST',
-    performAction: false,
-  });
-
-  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
-    data: OrdersType[];
-  }>({
-    endpoint: `orders/${orderId}`,
-    method: 'GET',
-    performAction: false,
   });
 
   useEffect(() => {
-    setLoading(loading);
-    if (fetchedData && fetchedData.data) {
-      const requiredData = fetchedData?.data;
-      setOrderDetails(requiredData[0]);
-      setPrevOrderDetails(requiredData[0]);
-      setCurrentAction(undefined);
+    const receivedProducts = orderProductDetails?.filter(
+      (product: any) =>
+        product?.status_value === 'received' &&
+        product?.order_product_type?.type !== 'return'
+    );
+    const modifiedReceivedProducts =
+      receivedProducts?.length > 0
+        ? receivedProducts?.map((product: any) => {
+            return {
+              order_product_id: product?.id,
+              action: '',
+              return_action: '',
+              return_reason: '',
+              code: product?.code,
+              description: product?.description,
+              sku: product?.sku,
+              product_type: product?.order_product_type?.type,
+              previous_product_type: product?.previous_order_product_type,
+            };
+          })
+        : [];
+    setCancelOrderProducts(modifiedReceivedProducts);
+  }, [orderProductDetails]);
+
+  const onChange = (event: any) => {
+    setUncancelNotes(event.target.value);
+  };
+
+  const onChangeUnCancelReason = (value: string) => {
+    setUncancelReason(value);
+  };
+
+  const onSubmit = async () => {
+    const productsPayload = cancelOrderProducts?.map(
+      (product: CancelOrderProductsType) => {
+        if (product?.action === 'deliver') {
+          return {
+            order_product_id: product?.order_product_id,
+            action: product?.action,
+          };
+        }
+        return {
+          order_product_id: product?.order_product_id,
+          action: product?.action,
+          return_action: product?.return_action,
+          return_reason: product?.return_reason,
+        };
+      }
+    );
+
+    // VALIDATIONS START
+
+    const productsPayloadActions = productsPayload?.map(
+      (product: CancelOrderProductsType) => {
+        if (product?.action !== '') {
+          return true;
+        }
+        return false;
+      }
+    );
+
+    if (productsPayloadActions?.includes(false)) {
+      notification.error({
+        message: 'Error',
+        description: `please fill product status field`,
+      });
+      return;
     }
-    if (
-      (fetchedData && fetchedData?.data === null) ||
-      fetchedData?.data?.length === 0
-    ) {
-      setCurrentAction(undefined);
+
+    const productsPayloadValidate = productsPayload?.map(
+      (product: CancelOrderProductsType) => {
+        if (product?.action === 'return') {
+          return product?.return_action !== '' && product?.return_reason !== '';
+        }
+        return true;
+      }
+    );
+
+    if (productsPayloadValidate?.includes(false)) {
+      notification.error({
+        message: 'Error',
+        description: `please fill all the mandatory fields`,
+      });
+      return;
     }
-  }, [loading]);
 
-  useEffect(() => {
-    if (response) {
-      //@ts-ignore
-      if (response?.data && response?.code === 200) {
-        setShouldPerformAction(true);
+    // VALIDATIONS END
+
+    const apiPayload = {
+      uncancelled_reason: unCancelReason,
+      uncancelled_notes: unCancelNotes,
+      products: productsPayload,
+    };
+
+    if (orderId) {
+      const response = (await performUnCancelAction({
+        payload: apiPayload,
+      })) as {
+        code: number | null;
+        error?: string | null | undefined;
+        [key: string]: any;
+      };
+      if (response?.code === 200) {
         notification.success({
           message: 'Success',
-          description:
-            //@ts-ignore
-            response?.message || 'Sucess',
+          description: `${response.message}`,
         });
-      } else {
+        // call orders api to update status
+        await props?.callOrderProductsApi();
+        await props?.callOrderAlertsApi();
+        await props?.callOrderStatusApi();
+        await props?.callOrdersApi();
+      }
+      if (response?.code !== 200) {
         notification.error({
           message: 'Error',
-          description:
-            //@ts-ignore
-            response?.error_traceback ||
-            'An error has occurred. Please try again later.',
+          description: `${response.error}`,
         });
         setCurrentAction(undefined);
       }
     }
-  }, [response]);
-
-  const onChange = (event: any) => {
-    setUncancelNotes(event.target.value);
-  };
-
-  const onChangeUnCancelReason = (value: string) => {
-    setUncancelReason(value);
-  };
-
-  const onSubmit = () => {
-    if (orderId) {
-      setPerformAction(true);
-    }
   };
 
   const showSubmitBtn =
@@ -134,32 +197,58 @@ function UncancelOrder() {
       submitBtnTitle="Save Details"
       isSubmitDisabled={!showSubmitBtn}
     >
-      <HoldContentContainer>
-        <SplitText>
+      <MainContainer>
+        <Container>
+          <OrderActionsDropdown
+            required
+            label="Un-cancel Reason"
+            placeholder="Select un-cancel Reason"
+            options={unCancelReasonOptions || []}
+            onSelect={onChangeUnCancelReason}
+            value={unCancelReason}
+            className="uncancelReasonDropdown"
+          />
           <HoldRow>
-            <Label label="Un-cancel Reason" required></Label>
-            <AntSelect
-              options={unCancelReasonOptions || []}
-              placeholder="Select un-cancel Reason"
-              onChange={onChangeUnCancelReason}
-              disabled={false}
-              style={{ width: '346px', height: 40 }}
-              showSearch={true}
-              popupClassName={'dropDownStyle'}
-              selectWrapperClass={'rounded'}
-              defaultValue={unCancelReason}
-            />
-          </HoldRow>
-          <HoldRow>
-            <Label label="Un-cancel Note"></Label>
+            <div style={{ display: 'flex', flexDirection: 'row' }}>
+              <Label>Un-cancel Note</Label>{' '}
+              <RequiredAsterisk>*</RequiredAsterisk>
+            </div>
             <CustomTextArea rows={5} onChange={onChange} />
           </HoldRow>
-        </SplitText>
-      </HoldContentContainer>
+        </Container>
+        <UnCancelOrderTable />
+      </MainContainer>
     </OrderActionModal>
   );
 }
 
+const RequiredAsterisk = styled.span`
+  color: red;
+  margin-left: 2px;
+  font-size: x-small;
+`;
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  gap: 30px;
+  border-radius: 16px;
+  border: 1px solid#edebe8;
+  background: #f8fafc;
+
+  .uncancelReasonDropdown {
+    flex: 1;
+  }
+`;
+
+const MainContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  gap: 10px;
+`;
+
 const CustomTextArea = styled(TextArea)`
   width: 346px;
 `;