@bjsdistribution/dms-client-return 0.0.17 → 0.0.19

package/src/components/order-view/order-actions/actions/release-order/ReleaseOrder.tsx

@@ -1,39 +1,107 @@
-import { Alert } from '@bjsdistribution/dms-component-library';
-import React from 'react';
+// import { Alert } from '@bjsdistribution/dms-component-library';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import { useCurrentAction } from '../../../store';
+import { useCurrentAction, useLiveRecalling, useOrderId } from '../../../store';
+import {
+  CancelAndCompleteAction,
+  CancelationModal,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../../../types';
+import { notification } from 'antd';
 
 function ReleaseOrder() {
+  const [orderId] = useOrderId();
   const [, setCurrentAction] = useCurrentAction();
+  const [, setRecalling] = useLiveRecalling();
 
-  const onClose = () => {
+  const {
+    data: response,
+    setShouldPerformAction: setPerformAction,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/released/`,
+    method: 'POST',
+    performAction: false,
+  });
+
+  useEffect(() => {
+    if (response && response?.data) {
+      notification.success({
+        message: 'Success',
+        //@ts-ignore
+        description: response?.message || 'Successfully updated',
+      });
+      setCurrentAction(undefined);
+      setRecalling(true);
+      setTimeout(() => {
+        setRecalling(false);
+      }, 1000);
+    }
+    if (response?.data === null) {
+      notification.error({
+        message: 'Error',
+        description:
+          //@ts-ignore
+          response?.error_traceback ||
+          'An error has occurred. Please try again later.',
+      });
+      setCurrentAction(undefined);
+    }
+  }, [response]);
+
+  const saveButton = () => {
+    setRecalling(false);
+    if (orderId) {
+      setPerformAction(true);
+    }
+  };
+
+  const closeModal = () => {
     setCurrentAction(undefined);
   };
 
+  // <ReleaseContainer>
+  //   <Alert
+  //     type="info"
+  //     title="Release"
+  //     description="Order Already Released"
+  //     onClose={() => alert(onClose())}
+  //     showCloseIcon={true} // Show or hide the close icon
+  //     showOkButton={true} // Show or hide the OK button
+  //     styleAlert="rounded" // Set the style variant of the alert
+  //   />
+  // </ReleaseContainer>
   return (
-    <ReleaseContainer>
-      <Alert
-        type="info"
-        title="Release"
-        description="Order Already Released"
-        onClose={() => alert(onClose())}
-        showCloseIcon={true} // Show or hide the close icon
-        showOkButton={true} // Show or hide the OK button
-        styleAlert="rounded" // Set the style variant of the alert
-      />
-    </ReleaseContainer>
+    <CancelationModal
+      title="Release Order"
+      description="Are you sure, you want to release the Order?"
+      actions={
+        <CustomCancelAndCompleteAction
+          cancelLabel="Cancel"
+          onCancel={closeModal}
+          completeLabel="Confirm"
+          onComplete={saveButton}
+        />
+      }
+    />
   );
 }
 
-const ReleaseContainer = styled.div`
-  top: -114px;
-  right: 81px;
-  opacity: 1;
-  overflow: unset;
-  color: inherit;
-  pointer-events: auto;
-  position: absolute;
-  transform: translate3d(57px, 308px, 0px) scaleX(1);
+// const ReleaseContainer = styled.div`
+//   top: -114px;
+//   right: 81px;
+//   opacity: 1;
+//   overflow: unset;
+//   color: inherit;
+//   pointer-events: auto;
+//   position: absolute;
+//   transform: translate3d(57px, 308px, 0px) scaleX(1);
+// `;
+
+const CustomCancelAndCompleteAction = styled(CancelAndCompleteAction)`
+  justify-content: center;
 `;
 
-export default ReleaseOrder;
+export default ReleaseOrder;

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

@@ -1,260 +1,115 @@
-import React from 'react';
-import styled from 'styled-components';
+import React, { useEffect, useState } from 'react';
+import { useProductDetails } from '../../../store';
+
+import { Empty, Skeleton } from 'antd';
+import { useLoading } from '../../../../order-daily-overview/store/store';
+import { Checkbox } from '@bjsdistribution/dms-component-library';
+import { useSelectedSplit, useSplitOrderPayload } from '../../store';
+import {
+  EmptyDataContainer,
+  StyledTableWrapper,
+} from '../confirm-order/tables/ReminderStyles';
+import { StyledTable } from '../modalstyle';
 
 function SplitOrderTable() {
+  const [orderProductDetails] = useProductDetails();
+  const [loading] = useLoading();
+  const [selectedSplits, setSelectedSplit] = useSelectedSplit();
+  const [selectAll, setSelectAll] = useState(false);
+  const [payload, setPayload] = useSplitOrderPayload();
+
+  const handleSelectAll = (e: any) => {
+    setSelectAll(e.target.checked);
+    if (e.target.checked) {
+      setSelectedSplit(
+        orderProductDetails.map((order: any) => ({
+          id: order.id,
+        }))
+      );
+    } else {
+      setSelectedSplit([]);
+    }
+  };
+
+  const handleSelectedSplitList = (id: any) => {
+    setSelectedSplit((prevSelectedOrder: any) => {
+      const isSelected = prevSelectedOrder?.some(
+        (order: any) => order.id === id
+      );
+
+      if (isSelected) {
+        return prevSelectedOrder?.filter((order: any) => order.id !== id);
+      } else {
+        return [...prevSelectedOrder, { id: id }];
+      }
+    });
+  };
+
+  useEffect(() => {
+    setPayload({
+      ...payload,
+      return_order: 0,
+      products: selectedSplits?.map(order => order.id),
+      force: true,
+    });
+  }, [orderProductDetails, selectedSplits]);
+
   return (
-    <GLobalPopupContent>
-      <TableSkelton>
-        <table>
-          <thead>
-            <tr>
-              <th>
-                <CustomCheckBox>
-                  <label className="container">
-                    <input type="checkbox" />
-                    <span className="checkmark"></span>
-                  </label>
-                </CustomCheckBox>
-              </th>
-              <th>Type</th>
-              <th>Code</th>
-              <th>Scan</th>
-              <th>Description</th>
-              <th>Delivery Instructions</th>
-              <th>Barcode</th>
-            </tr>
-          </thead>
-          <tbody>
+    <StyledTableWrapper id="tableScrolling">
+      <StyledTable>
+        <thead>
+          <tr>
+            <th>
+              <Checkbox checked={selectAll} onChange={handleSelectAll} />
+            </th>
+            <th>Type</th>
+            <th>Code</th>
+            <th>Scan</th>
+            <th>Description</th>
+            <th>Delivery Instructions</th>
+            <th>Barcode</th>
+          </tr>
+        </thead>
+        <tbody>
+          {loading ? (
             <tr>
-              <td>
-                <CustomCheckBox>
-                  <label className="container">
-                    <input type="checkbox" />
-                    <span className="checkmark"></span>
-                  </label>
-                </CustomCheckBox>
+              <td colSpan={6}>
+                <Skeleton active />
               </td>
-              <td>
-                Return
-              </td>
-              <td>FFLMW-B1</td>
-              <td>Delivered</td>
-              <td>
-                Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF
-                3 TABLES - OAK
-              </td>
-              <td>
-                Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF
-                3 TABLES - OAK
-              </td>
-              <td>007022530015429326</td>
+              <td colSpan={6}></td>
             </tr>
+          ) : orderProductDetails?.length === 0 ? (
             <tr>
-              <td>
-                <CustomCheckBox>
-                  <label className="container">
-                    <input type="checkbox" />
-                    <span className="checkmark"></span>
-                  </label>
-                </CustomCheckBox>
-              </td>
-              <td>
-                Deliver
-              </td>
-              <td>FFLMW-B1</td>
-              <td>Location</td>
-              <td>
-                Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF
-                3 TABLES - OAK
+              <td className="emptyTd" colSpan={7}>
+                <EmptyDataContainer>
+                  <Empty />
+                </EmptyDataContainer>
               </td>
-              <td>
-                Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF
-                3 TABLES - OAK
-              </td>
-              <td>007022530015429326</td>
             </tr>
-            <tr>
-              <td>
-                <CustomCheckBox>
-                  <label className="container">
-                    <input type="checkbox" />
-                    <span className="checkmark"></span>
-                  </label>
-                </CustomCheckBox>
-              </td>
-              <td>
-                Return
-              </td>
-              <td>FFLMW-B1</td>
-              <td>Outstanding</td>
-              <td>
-                Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF
-                3 TABLES - OAK
-              </td>
-              <td>
-                Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF
-                3 TABLES - OAK
-              </td>
-              <td>007022530015429326</td>
-            </tr>
-          </tbody>
-        </table>
-      </TableSkelton>
-    </GLobalPopupContent>
+          ) : (
+            orderProductDetails?.map((order: any) => (
+              <tr key={order.id}>
+                <td>
+                  <Checkbox
+                    checked={selectedSplits?.some(
+                      (selectedInvoice: any) => selectedInvoice?.id === order.id
+                    )}
+                    onChange={() => handleSelectedSplitList(order.id)}
+                  />
+                </td>
+                <td>{order?.order_product_type?.type}</td>
+                <td>{order?.code}</td>
+                <td>{order?.description}</td>
+                <td>{order?.description}</td>
+                <td>{order?.description}</td>
+                <td>{order?.sku}</td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </StyledTable>
+    </StyledTableWrapper>
   );
 }
 
-const GLobalPopupContent = styled.div`
-  section {
-    padding: 0px 0 15px;
-    .filterCover {
-      border-radius: 16px;
-      border: 1px solid var(--tonal-brown-10, #edebe8);
-      background: #f8fafc;
-      display: flex;
-      gap: 30px;
-      padding: 15px;
-      gap: 15px;
-      .col {
-        width: 21%;
-        label {
-          color: #8d8f90;
-          font-size: 14px;
-          font-weight: 500;
-          line-height: 20px;
-          display: block;
-          margin-bottom: 4px;
-        }
-        .ant-select-single {
-          width: 100%;
-        }
-        select {
-          width: 100%;
-        }
-        &:first-child {
-          width: 43%;
-        }
-        &:last-child {
-          width: 33%;
-        }
-      }
-    }
-  }
-`;
-
-const TableSkelton = styled.div`
-  margin-top: -8px;
-  min-height: 400px;
-  table {
-    border-collapse: separate;
-    width: 100%;
-    border-spacing: 0px 8px;
-    thead {
-      tr {
-        th {
-          font-size: 14px;
-          font-weight: 600;
-          padding: 8px 15px;
-          text-align: left;
-          border-top: 1px solid rgba(0, 0, 0, 0.08);
-          border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-
-          background: #f0f2f2;
-          &:first-child {
-            border-radius: 20px 0 0 20px;
-          }
-          &:last-child {
-            border-radius: 0 20px 20px 0;
-          }
-        }
-      }
-    }
-    tbody {
-      tr {
-        td {
-          color: #3a3630;
-          font-size: 13px;
-          font-weight: 400;
-          line-height: 16px;
-          padding: 6px 15px;
-          text-align: left;
-          box-shadow: 3px 1px 3px 0px rgba(16, 24, 40, 0.1);
-
-          background: #fff;
-
-          &:first-child {
-            border-radius: 20px 0 0 20px;
-          }
-
-          &:last-child {
-            border-radius: 0 20px 20px 0;
-          }
-        }
-      }
-    }
-  }
-`;
-
-const CustomCheckBox = styled.div`
-  .container {
-    display: block;
-    position: relative;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    width: 20px;
-    height: 20px;
-  }
-
-  .container input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 100%;
-    width: 100%;
-  }
-
-  .checkmark {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: 1px solid #cfcfcf;
-    border-radius: 4px;
-  }
-
-  .container:hover input ~ .checkmark {
-    border-color: #7f7a7a;
-  }
-
-  .container input:checked ~ .checkmark {
-    background-color: #000;
-  }
-
-  .checkmark:after {
-    content: '';
-    position: absolute;
-    display: none;
-  }
-
-  .container input:checked ~ .checkmark:after {
-    display: block;
-  }
-
-  .container .checkmark:after {
-    left: 8px;
-    top: 4px;
-    width: 3px;
-    height: 6px;
-    border: solid white;
-    border-width: 0 2px 2px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-  }
-`;
-
 export default SplitOrderTable;

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

@@ -2,23 +2,67 @@ import React from 'react';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import styled from 'styled-components';
 import SplitOrderTable from './SplitOrderTable';
-import { useCurrentAction } from '../../../store';
+import { useCurrentAction, useOrderDetails, useOrderId } from '../../../store';
+import { useApiHook } from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../../../types';
+
+import { useSelectedSplit, useSplitOrderPayload } from '../../store';
 
 function SplitOrder() {
   const [, setCurrentAction] = useCurrentAction();
+  const [orderDetails] = useOrderDetails();
+  const orderRecipient = orderDetails?.order_recipient;
+  const infoText = `${orderRecipient?.recipient_name}, ${orderRecipient?.postcode}`;
+  const [orderId] = useOrderId();
+  const [payload] = useSplitOrderPayload();
+  const [seledtedSplitOrder, setSelectedSplit] = useSelectedSplit();
 
   const onClose = () => {
     setCurrentAction(undefined);
   };
 
+  const { setShouldPerformAction: setPerformAction } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/split_order/${orderId}`,
+    method: 'POST',
+    body: payload,
+    performAction: false,
+  });
+
+  const onSubmitSplitOrder = () => {
+    if (orderId) {
+      setPerformAction(true);
+    }
+    setSelectedSplit([]);
+  };
+
+  const isSubmitDisabled = () => {
+    if (seledtedSplitOrder?.length > 0) {
+      return !seledtedSplitOrder;
+    }
+    return true;
+  };
+
   return (
     <OrderActionModal
       headerTitle="Split Order"
       showAdditionalInfo
-      infoText="NICK OLIVER, YO42 2ST"
+      infoText={infoText}
       onCloseHeader={onClose}
-      onSubmit={() => {}}
+      onSubmit={onSubmitSplitOrder}
       submitBtnTitle="Split Order"
+      footerActions={
+        <>
+          {/* <CheckContainer>
+            <label className="check">
+              <input type="checkbox" />
+              Force Split
+            </label>
+          </CheckContainer> */}
+        </>
+      }
+      isSubmitDisabled={isSubmitDisabled()}
     >
       <ContentContainer>
         <SplitOrderTable />
@@ -28,15 +72,19 @@ function SplitOrder() {
 }
 
 const ContentContainer = styled.div`
-  display: flex;
+  /* display: flex; */
   padding: 15px 12px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 15px;
   flex: 1 0 0;
   border-radius: 15px;
-  background: #f8fafc;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  overflow: auto;
+  min-height: 500px;
+  overflow-x: hidden;
+  max-height: 500px;
+  scrollbar-width: thin;
 `;
 
 export default SplitOrder;

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

@@ -24,8 +24,7 @@ import ReleaseOrder from './actions/release-order/ReleaseOrder';
 
 function OrderActions() {
   const [currentAction] = useCurrentAction();
-  
-  // console.log(currentAction, 'currentAction');
+
   const renderContent = () => {
     switch (currentAction) {
       case 'add-resources':
@@ -36,10 +35,14 @@ function OrderActions() {
         return <SplitOrder />;
       case 'release-order':
         return <ReleaseOrder />;
+      // case 'unrelease-order':
+      //   return <UnreleaseOrder />;
       case 'log-service-refusal':
         return <LogServiceRefusal />;
       case 'cancel-order':
         return <CancelOrder />;
+      // case 'uncancel-order':
+      //   return <UncancelOrder />;
       case 'confirm-order':
         return <ConfirmOrder />;
       case 'send-sms':
@@ -68,6 +71,8 @@ function OrderActions() {
         return <OrderLock />;
       case 'view-flag':
         return <ViewFlag />;
+      // case 'clear-date':
+      //   return <ClearBookingStatus />;
       default:
         return null;
     }

package/src/components/order-view/order-actions/store.ts

@@ -6,7 +6,10 @@ import {
   SingleResolvedPayload,
   UpdateReminderPayload,
   allTypes,
+  splitOrderType,
 } from './types';
+import { OrdersType } from '../types';
+import { ordersInitialValue } from '../store';
 
 export const initialPayload: CreateTaskPayload = {
   details: '',
@@ -134,6 +137,48 @@ export function useTaskLoading() {
   return useAtom(taskLoading);
 }
 
+export const initialConfirmOrderErrValues = {
+  homeContactError: '',
+  workContactError: '',
+  mobileError: '',
+  emailError: '',
+};
+export const splitOrderinitialValue: splitOrderType = {
+  return_order: 0,
+  products: [],
+  force: false,
+};
+
+const errorConfirmOrderAtom = atom(initialConfirmOrderErrValues);
+
+export function useErrorConfirmOrder() {
+  return useAtom(errorConfirmOrderAtom);
+}
+
+//confirm order
+const confirmOrderDate = atom<any>(null);
+
+export function useConfirmOrderDate() {
+  return useAtom(confirmOrderDate);
+}
+
+const OrderDetailsConfirmOrder = atom<OrdersType>(ordersInitialValue);
+export function useOrderDetailsConfirmOrder() {
+  return useAtom(OrderDetailsConfirmOrder);
+}
+
+const splitOrderPayload = atom<splitOrderType>(splitOrderinitialValue);
+
+export function useSplitOrderPayload() {
+  return useAtom(splitOrderPayload);
+}
+const selectedSplitList = atom<any[]>([]);
+
+export function useSelectedSplit() {
+  return useAtom(selectedSplitList);
+}
+
+
 export function useLoadingText() {
   return useAtom(loadingText);
 }

package/src/components/order-view/order-actions/types.ts

@@ -96,3 +96,8 @@ export interface UpdateReminderPayload {
   due_time: any;
   status_id: number | null;
 }
+export interface splitOrderType {
+  return_order: number;
+  products: any[];
+  force: boolean;
+}