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

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

@@ -0,0 +1,352 @@
+import React from 'react';
+import { useCancelOrderProducts, useOrderStaticData } from '../../../store';
+import { useLoading } from '../../../../order-daily-overview/store/store';
+import { Empty, Select, Skeleton } from 'antd';
+import { CancelOrderProductsType } from '../../../types';
+import OrderActionsDropdown from '../../Dropdown';
+import styled from 'styled-components';
+import { EmptyDataContainer } from '../confirm-order/tables/ReminderStyles';
+import DeliverProductIcon from '../../../../../assets/icons/DeliverProductIcon';
+import ReturnProductIcon from '../../../../../assets/icons/ReturnProductIcon';
+
+const deliverTypeOptions = [
+  {
+    label: 'Deliver',
+    value: 'deliver',
+    icon: <DeliverProductIcon />,
+  },
+  {
+    label: 'Return',
+    value: 'return',
+    icon: <ReturnProductIcon />,
+  },
+];
+
+const collectTypeOptions = [
+  {
+    label: 'Return',
+    value: 'return',
+    icon: <ReturnProductIcon />,
+  },
+];
+
+const UnCancelOrderTable = () => {
+  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>Original Type</th>
+              <th>Code</th>
+              <th>Description</th>
+              <th>SKU</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={5}>
+                  <Skeleton active />
+                </td>
+              </tr>
+            ) : cancelOrderProducts?.length === 0 ? (
+              <tr>
+                <td className="emptyTd" colSpan={5}>
+                  <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={5}>
+                      <table style={{ width: '100%' }}>
+                        <tbody>
+                          <tr>
+                            <td style={{ width: '20%' }}>
+                              <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%' }}
+                                // popupClassName={'dropDownStyle'}
+                                // selectWrapperClass={'rounded'}
+                                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: '20%' }}>
+                              {product?.previous_product_type === null
+                                ? 'N/A'
+                                : product?.previous_product_type}
+                            </td>
+                            <td style={{ width: '20%' }}>{product?.code}</td>
+                            <td style={{ width: '20%' }}>
+                              {product?.description}
+                            </td>
+                            <td style={{ width: '20%' }}>{product?.sku}</td>
+                          </tr>
+
+                          {isReturn && (
+                            <tr>
+                              <td colSpan={5}>
+                                <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: 8px;
+    align-items: center !important;
+
+    .ant-select-prefix {
+      margin-top: 4px;
+    }
+  }
+  .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 UnCancelOrderTable;

package/src/components/order-view/order-actions/actions/unhold-order/UnholdOrder.tsx

@@ -1,84 +1,60 @@
 import {
   CancelAndCompleteAction,
   CancelationModal,
-  useApiHook,
+  useAxios,
 } from '@bjsdistribution/dms-component-library';
-import React, { useEffect } from 'react';
+import React from 'react';
 import styled from 'styled-components';
-import {
-  useCurrentAction,
-  useOrderDetails,
-  useOrderId,
-  usePrevOrderDetails,
-} from '../../../store';
-import { ApiResponse, OrdersType } from '../../../types';
-import { useLoading } from '../../../../order-daily-overview/store/store';
+import { useCurrentAction, useOrderId } from '../../../store';
+import { ApiResponse } from '../../../types';
 import { notification } from 'antd';
+import { useClientPortal } from '../../../../store';
+interface IProps {
+  callOrderAlertsApi: any;
+  callOrdersApi?: any;
+  callUnresolvedTaskApi?: any;
+}
 
-const UnholdOrder = () => {
+const UnholdOrder = (props: IProps) => {
   const [orderId] = useOrderId();
   const [, setCurrentAction] = useCurrentAction();
-  const [, setOrderDetails] = useOrderDetails();
-  const [, setPrevOrderDetails] = usePrevOrderDetails();
-  const [, setLoading] = useLoading();
+  const [isClientPortal] = useClientPortal();
 
-  const {
-    data: response,
-    setShouldPerformAction: setPerformAction,
-  } = useApiHook<{
+  const { fetchData: fetchUnholdData } = useAxios<{
     data: ApiResponse[];
   }>({
+    // remove the date from the params as requested by backend
     endpoint: `orders/${orderId}/unhold/`,
     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);
-      } else {
+  const saveButton = async () => {
+    if (orderId) {
+      const response = (await fetchUnholdData()) 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
+        if (isClientPortal) {
+          await props?.callUnresolvedTaskApi();
+        }
+        await props?.callOrderAlertsApi();
+        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 saveButton = () => {
-    if (orderId) {
-      setPerformAction(true);
-    }
   };
 
   const closeModal = () => {