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

package/src/components/order-view/order-actions/actions/cancel-order/CancelOrderTable.tsx

@@ -0,0 +1,345 @@
+import React from 'react';
+import { useCancelOrderProducts, useOrderStaticData } from '../../../store';
+import { useLoading } from '../../../../order-daily-overview/store/store';
+import { Empty, Select, Skeleton } from 'antd';
+// import { AntSelect } from '@bjsdistribution/dms-component-library';
+import { CancelOrderProductsType } from '../../../types';
+import OrderActionsDropdown from '../../Dropdown';
+import styled from 'styled-components';
+import DeliverProductIcon from '../../../../../assets/icons/DeliverProductIcon';
+import ReturnProductIcon from '../../../../../assets/icons/ReturnProductIcon';
+import { EmptyDataContainer } from '../charge-log';
+
+const deliverTypeOptions = [
+  {
+    label: 'Deliver',
+    value: 'deliver',
+    icon: <DeliverProductIcon />,
+  },
+  {
+    label: 'Return',
+    value: 'return',
+    icon: <ReturnProductIcon />,
+  },
+];
+
+const collectTypeOptions = [
+  {
+    label: 'Return',
+    value: 'return',
+    icon: <ReturnProductIcon />,
+  },
+];
+
+const CancelOrderTable = () => {
+  const [
+    cancelOrderProducts,
+    setCancelOrderProducts,
+  ] = useCancelOrderProducts();
+
+  const [loading] = useLoading();
+  const [orderStaticData] = useOrderStaticData();
+
+  if (!cancelOrderProducts?.length) {
+    return null;
+  }
+
+  const returnReasonsOptions = orderStaticData?.return_reasons?.map(
+    (option: any) => ({
+      label: option?.reason,
+      value: option?.reason,
+    })
+  );
+
+  const returnActionOptions = orderStaticData?.order_product_return_action?.map(
+    (option: any) => ({
+      label: option?.value,
+      value: option?.value,
+    })
+  );
+
+  const onChange = (
+    selectedVal: string,
+    id: number,
+    type: keyof CancelOrderProductsType
+  ) => {
+    console.log(selectedVal, id, type);
+    const updatedList = cancelOrderProducts?.map(
+      (item: CancelOrderProductsType) => {
+        const newItem =
+          item.order_product_id === id
+            ? {
+                ...item,
+                [type]: selectedVal,
+              }
+            : item;
+        return newItem;
+      }
+    );
+    setCancelOrderProducts(updatedList);
+  };
+
+  return (
+    <div>
+      <StyledTableWrapper>
+        <StyledTable className="scrollClass">
+          <thead>
+            <tr>
+              <th>Status</th>
+              <th>Code</th>
+              <th>Description</th>
+              <th>SKU</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={4}>
+                  <Skeleton active />
+                </td>
+              </tr>
+            ) : cancelOrderProducts?.length === 0 ? (
+              <tr>
+                <td className="emptyTd" colSpan={4}>
+                  <EmptyDataContainer>
+                    <Empty />
+                  </EmptyDataContainer>
+                </td>
+              </tr>
+            ) : (
+              cancelOrderProducts?.map((product: CancelOrderProductsType) => {
+                const dropdownOptions =
+                  product?.product_type === 'deliver'
+                    ? deliverTypeOptions
+                    : collectTypeOptions;
+
+                const isReturn = product?.action === 'return';
+
+                return (
+                  <tr
+                    key={product?.order_product_id}
+                    style={{
+                      boxShadow: '0px 1px 3px 0px rgba(16, 24, 40, 0.1)',
+                    }}
+                  >
+                    <td colSpan={4}>
+                      <table style={{ width: '100%' }}>
+                        <tbody>
+                          <tr>
+                            <td style={{ width: '25%' }}>
+                              <CustomSelectDropdown
+                                options={dropdownOptions}
+                                placeholder="Select"
+                                onChange={(val: any) =>
+                                  onChange(
+                                    val,
+                                    product?.order_product_id!,
+                                    'action'
+                                  )
+                                }
+                                prefix={
+                                  product?.action === 'deliver' ? (
+                                    <DeliverProductIcon />
+                                  ) : product?.action === 'return' ? (
+                                    <ReturnProductIcon />
+                                  ) : (
+                                    <></>
+                                  )
+                                }
+                                style={{ width: '100%' }}
+                                value={dropdownOptions?.filter(
+                                  (item: any) => item?.value === product?.action
+                                )}
+                                optionRender={(option: any) => (
+                                  <div
+                                    style={{
+                                      display: 'flex',
+                                      gap: '8px',
+                                      alignItems: 'center',
+                                    }}
+                                  >
+                                    <span
+                                      style={{ display: 'flex' }}
+                                      aria-label={option.data.label}
+                                    >
+                                      {option.data.icon}
+                                    </span>
+                                    <span style={{ color: '#8D8F90' }}>
+                                      {option.data.label}
+                                    </span>
+                                  </div>
+                                )}
+                              />
+                            </td>
+                            <td style={{ width: '25%' }}>{product?.code}</td>
+                            <td style={{ width: '25%' }}>
+                              {product?.description}
+                            </td>
+                            <td style={{ width: '25%' }}>{product?.sku}</td>
+                          </tr>
+
+                          {isReturn && (
+                            <tr>
+                              <td colSpan={4}>
+                                <ReturnRowWrapper>
+                                  <StyledDropdown
+                                    label="Return Action"
+                                    required
+                                    placeholder="Select action"
+                                    options={returnActionOptions}
+                                    onSelect={(val: any) =>
+                                      onChange(
+                                        val,
+                                        product?.order_product_id!,
+                                        'return_action'
+                                      )
+                                    }
+                                    value={returnActionOptions?.filter(
+                                      (option: any) =>
+                                        option.value === product?.return_action
+                                    )}
+                                  />
+                                  <StyledDropdown
+                                    label="Return Reason"
+                                    required
+                                    placeholder="Select reason"
+                                    options={returnReasonsOptions}
+                                    onSelect={(val: any) =>
+                                      onChange(
+                                        val,
+                                        product?.order_product_id!,
+                                        'return_reason'
+                                      )
+                                    }
+                                    value={returnReasonsOptions?.filter(
+                                      (option: any) =>
+                                        option.value === product?.return_reason
+                                    )}
+                                  />
+                                </ReturnRowWrapper>
+                              </td>
+                            </tr>
+                          )}
+                        </tbody>
+                      </table>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </StyledTable>
+      </StyledTableWrapper>
+    </div>
+  );
+};
+
+const CustomSelectDropdown: any = styled(Select)`
+  .ant-select-selector {
+    border-radius: 25px !important;
+    /* border: none !important; */
+    min-width: 100px;
+    padding: 0 10px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+
+    .ant-select-prefix {
+      margin-top: 3px;
+    }
+  }
+  .ant-select-selection-item {
+    font-weight: 400;
+    font-size: 13px;
+  }
+`;
+
+export const StyledTableWrapper = styled.div`
+  width: 100%;
+  overflow-x: auto;
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  padding: 16px;
+`;
+
+const StyledDropdown = styled(OrderActionsDropdown)`
+  flex: 1;
+`;
+
+export const StyledTable = styled.table`
+  width: 100%;
+  font-size: 14px;
+  color: #333;
+  border-spacing: 0 10px;
+
+  th,
+  td {
+    padding: 12px 16px;
+    background: #fff;
+  }
+
+  th {
+    background: #f0f2f2;
+
+    &:first-child {
+      border-top-left-radius: 40px;
+      border-bottom-left-radius: 40px;
+    }
+
+    &:last-child {
+      border-top-right-radius: 40px;
+      border-bottom-right-radius: 40px;
+    }
+  }
+
+  // This affects ONLY top-level rows
+  > tbody > tr {
+    background: #fff;
+    border-radius: 40px;
+    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1);
+  }
+
+  // Round the outer row's corners only on first/last td
+  > tbody > tr > td:first-child {
+    border-top-left-radius: 40px;
+    border-bottom-left-radius: 40px;
+  }
+
+  > tbody > tr > td:last-child {
+    border-top-right-radius: 40px;
+    border-bottom-right-radius: 40px;
+  }
+
+  .scrollClass {
+    overflow-x: auto;
+  }
+
+  .emptyTd {
+    text-align: center;
+    padding: 40px 0;
+    color: #999;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  td table {
+    border-spacing: 0;
+    width: 100%;
+  }
+
+  td table td {
+    background: transparent;
+    padding: 8px 12px;
+  }
+`;
+
+const ReturnRowWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  padding: 0 12px;
+  width: 100%;
+`;
+
+export default CancelOrderTable;

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

@@ -4,25 +4,34 @@ import OrderActionModal from '../../../../../common/modals/order-action-modal/Or
 import ReturnAction from './ReturnAction';
 import ReturnReason from './ReturnReason';
 import {
+  useCancelOrderProducts,
   useCurrentAction,
   useCustomerInfo,
-  useOrderDetails,
   useOrderId,
   useOrderStaticData,
-  usePrevOrderDetails,
+  useProductDetails,
 } from '../../../store';
 import OrderActionsDropdown from '../../Dropdown';
-import { TextArea, useApiHook } from '@bjsdistribution/dms-component-library';
-import { ApiResponse, OrdersType } from '../../../types';
-import { useLoading } from '../../../../order-daily-overview/store/store';
+import { TextArea, useAxios } from '@bjsdistribution/dms-component-library';
+import { ApiResponse, CancelOrderProductsType } from '../../../types';
 import { notification } from 'antd';
+import CancelOrderTable from './CancelOrderTable';
 
-function CancelOrder() {
+interface IProps {
+  callOrdersApi: any;
+  callOrderStatusApi: any;
+  callOrderAlertsApi: any;
+  callOrderProductsApi: any;
+}
+
+function CancelOrder(props: IProps) {
   const [orderId] = useOrderId();
-  const [, setOrderDetails] = useOrderDetails();
-  const [, setPrevOrderDetails] = usePrevOrderDetails();
-  const [, setLoading] = useLoading();
   const [, setCurrentAction] = useCurrentAction();
+  const [orderProductDetails] = useProductDetails();
+  const [
+    cancelOrderProducts,
+    setCancelOrderProducts,
+  ] = useCancelOrderProducts();
   const [customerInfo] = useCustomerInfo();
   const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
 
@@ -43,68 +52,40 @@ function CancelOrder() {
     }
   );
 
-  const {
-    data: response,
-    setShouldPerformAction: setPerformAction,
-  } = useApiHook<{
+  const { fetchData: callCancelApi } = useAxios<{
     data: ApiResponse[];
   }>({
-    endpoint: `orders/${orderId}/cancel/?cancelled_reason=${cancelReason}&cancelled_notes=${cancelNotes}`,
+    endpoint: `v1/orders/cancel/?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);
-    }
-    if (
-      (fetchedData && fetchedData?.data === null) ||
-      fetchedData?.data?.length === 0
-    ) {
-      setCurrentAction(undefined);
-    }
-  }, [loading]);
-
-  useEffect(() => {
-    if (response) {
-      //@ts-ignore
-      if (response?.data && response?.code === 200) {
-        setShouldPerformAction(true);
-        notification.success({
-          message: 'Success',
-          description:
-            //@ts-ignore
-            response?.message || 'Sucess',
-        });
-      } else {
-        // alert(response?.error_traceback);
-        notification.error({
-          message: 'Error',
-          description:
-            //@ts-ignore
-            response?.error_traceback ||
-            'An error has occurred. Please try again later.',
-        });
-        setCurrentAction(undefined);
-      }
-    }
-  }, [response]);
+    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,
+            };
+          })
+        : [];
+    setCancelOrderProducts(modifiedReceivedProducts);
+  }, [orderProductDetails]);
 
   const onClose = () => {
     setCurrentAction(undefined);
+    setCancelOrderProducts([]);
   };
 
   const onSelectCancelReason = (value: string) => {
@@ -115,9 +96,94 @@ function CancelOrder() {
     setCancelNotes(event.target.value);
   };
 
-  const onSubmitCancel = () => {
+  const onSubmitCancel = 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;
+    }
+
+    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;
+    }
+
+    // VALIDATIONS END
+
+    const apiPayload = {
+      cancelled_reason: cancelReason,
+      cancelled_notes: cancelNotes,
+      products: productsPayload,
+    };
+
     if (orderId) {
-      setPerformAction(true);
+      const response = (await callCancelApi({
+        payload: apiPayload,
+      })) as {
+        code: number | null;
+        error?: string | null | undefined;
+        [key: string]: any;
+      };
+      if (response?.code === 200) {
+        notification.success({
+          message: 'Success',
+          description: `${response.message}`,
+        });
+        // 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: `${response.error}`,
+        });
+        setCurrentAction(undefined);
+      }
     }
   };
 
@@ -138,8 +204,8 @@ function CancelOrder() {
           <TopLeft>
             <OrderActionsDropdown
               required
-              label="Cancelation Reason"
-              placeholder="Select Cancelation Reason"
+              label="Cancellation Reason"
+              placeholder="Select Cancellation Reason"
               options={cancelReasonOptions || []}
               onSelect={onSelectCancelReason}
               value={cancelReason}
@@ -152,7 +218,7 @@ function CancelOrder() {
           <TopRight>
             <Container>
               <div style={{ display: 'flex', flexDirection: 'row' }}>
-                <Label>Cancelation Note</Label>{' '}
+                <Label>Cancellation Note</Label>{' '}
                 <RequiredAsterisk>*</RequiredAsterisk>
               </div>
               <TArea
@@ -164,6 +230,9 @@ function CancelOrder() {
             </Container>
           </TopRight>
         </Top>
+        <Bottom>
+          <CancelOrderTable />
+        </Bottom>
       </ContentContainer>
     </OrderActionModal>
   );
@@ -213,19 +282,25 @@ const TopRight = styled.div`
 `;
 
 const Top = styled.div`
+  width: 100%;
+  border-radius: 16px;
+  border: 1px solid #edebe8;
+  background: #f8fafc;
   display: flex;
+  padding: 15px;
+  align-items: flex-start;
   gap: 30px;
-  width: 100%;
+  align-self: stretch;
 `;
 
-// const Bottom = styled.div``;
+const Bottom = styled.div``;
 
 const ContentContainer = styled.div`
   display: flex;
-  padding: 0px 15px;
+  padding: 15px;
   align-items: flex-start;
-  gap: 10px;
   flex-direction: column;
+  width: 100%;
 `;
 
 export default CancelOrder;