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

package/src/components/order-view/order-actions/actions/change-customer-account/ChangeCustomerAccModal.tsx

@@ -1,32 +1,100 @@
-import React from 'react';
-import { AntSelect } from '@bjsdistribution/dms-component-library';
+import React, { useState } from 'react';
+import { AntSelect, useAxios } from '@bjsdistribution/dms-component-library';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import { ContentContainer, Label, Row, SplitLayout } from '../modalstyle';
-import { useCurrentAction } from '../../../store';
-import { notification } from 'antd';
-import { optionsMenu } from '../../../fakedata';
+import {
+  useCurrentAction,
+  useCustomerData,
+  useOrderDetails,
+  useOrderId,
+} from '../../../store';
+import { Input, notification } from 'antd';
+import { ApiResponse } from '../../../types';
+interface IProps {
+  callOrdersApi?: any;
+}
 
-function ChangeCustomerAccModal() {
+function ChangeCustomerAccModal(props: IProps) {
+  const [orderId] = useOrderId();
+  const [customerData] = useCustomerData();
   const [, setCurrentAction] = useCurrentAction();
+  const [orderDetails] = useOrderDetails();
+  const [selectedCustomerId, setSelectedCustomerId] = useState<any>(
+    orderDetails?.customer_id ?? null
+  );
+  const [tradingName, setTradingName] = useState<string>(
+    orderDetails?.trading_name || ''
+  );
+  const orderRecipient = orderDetails?.order_recipient;
+  const infoText = `${orderRecipient?.recipient_name}, ${orderRecipient?.postcode}`;
+  const closeModal = () => setCurrentAction(undefined);
+
+  const customerMappedData = customerData?.map((customer: any) => ({
+    label: customer?.customer_name,
+    value: customer?.id,
+  }));
+
+  const { fetchData } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/orders/change_customer_account`,
+    method: 'PUT',
+  });
+
+  const handleChangeAcc = async () => {
+    if (selectedCustomerId == null || !tradingName?.trim()) {
+      notification.warning({
+        message: 'Validation Error',
+        description: 'Please select a customer and enter a trading name.',
+      });
+      return;
+    }
 
-  const closeModal = () => {
-    setCurrentAction(undefined);
+    try {
+      const payload = [
+        {
+          order_id: +orderId,
+          customer_id: +selectedCustomerId,
+          trading_name: tradingName,
+        },
+      ];
+      const response = (await fetchData({ payload })) as {
+        code: number | null;
+        error?: string | null | undefined;
+        [key: string]: any;
+      };
+
+      if (response?.code === 200) {
+        notification.success({
+          message: 'Success',
+          description: `${response.message}`,
+        });
+        await props?.callOrdersApi();
+        closeModal();
+      }
+    } catch {
+      notification.error({
+        message: 'Error',
+        description: 'Something went wrong while saving.',
+      });
+    }
   };
 
-  const handleSelectChange = () => {
-    // alert('hello');
-    notification.success({
-      message: 'Success',
-      description: 'Saved successfully.',
-    });
+  const handleSelectChange = (value: string) => {
+    setSelectedCustomerId(+value);
+    const selected = customerMappedData?.find(c => c?.value === +value);
+    if (selected) {
+      setSelectedCustomerId(selected?.value);
+    }
   };
+
   return (
     <OrderActionModal
       headerTitle="Change customer account"
       onCloseHeader={closeModal}
-      onSubmit={() => {}}
+      onSubmit={handleChangeAcc}
       showAdditionalInfo
-      infoText="632801 (OFS)"
+      infoText={infoText}
       submitBtnTitle="Save Details"
     >
       <ContentContainer>
@@ -34,29 +102,24 @@ function ChangeCustomerAccModal() {
           <Row>
             <Label>New Customer</Label>
             <AntSelect
-              options={optionsMenu}
+              options={customerMappedData}
               placeholder="Select Customer"
               onChange={handleSelectChange}
-              disabled={false}
               style={{ width: '22vw', height: 40 }}
-              showSearch={true}
-              popupClassName={'dropDownStyle'}
-              selectWrapperClass={'rounded'}
-            ></AntSelect>
+              showSearch
+              popupClassName="dropDownStyle"
+              selectWrapperClass="rounded"
+              defaultValue={selectedCustomerId}
+            />
           </Row>
 
           <Row>
             <Label>New Trading Name</Label>
-            <AntSelect
-              options={optionsMenu}
-              placeholder="Select Trading Name"
-              onChange={handleSelectChange}
-              disabled={false}
-              style={{ width: '22vw', height: 40 }}
-              showSearch={true}
-              popupClassName={'dropDownStyle'}
-              selectWrapperClass={'rounded'}
-            ></AntSelect>
+            <Input
+              style={{ borderRadius: '15px', minWidth: '22vw' }}
+              value={tradingName}
+              onChange={e => setTradingName(e.target.value)}
+            />
           </Row>
         </SplitLayout>
       </ContentContainer>

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

@@ -0,0 +1,395 @@
+import React, { useEffect } from 'react';
+import { useAxios } from '@bjsdistribution/dms-component-library';
+import {
+  useCurrentAction,
+  useCustomerInfo,
+  useOrderDetails,
+} from '../../../store';
+import { ApiResponse } from '../../../types';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import { Empty, Skeleton } from 'antd';
+
+import styled from 'styled-components';
+
+function ChargeLog() {
+  const [, setCurrentAction] = useCurrentAction();
+  const [customerInfo] = useCustomerInfo();
+  const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
+  const [orderDetails] = useOrderDetails();
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+  };
+
+  const { data: fetchedData, loading, fetchData } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/invoices/charge-logs/?order_id=${orderDetails?.id}`,
+    method: 'GET',
+  });
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <OrderActionModal
+      headerTitle="Charges For"
+      onCloseHeader={closeModal}
+      onSubmit={closeModal}
+      submitBtnTitle="Close"
+      showAdditionalInfo
+      infoText={infoText}
+    >
+      <StyledTableWrapper>
+        <StyledTable className="scrollClass">
+          <thead>
+            <tr>
+              <th>Date</th>
+              <th>Description</th>
+              <th>Amount</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={6}>
+                  <Skeleton active />
+                </td>
+                <td colSpan={6}></td>
+              </tr>
+            ) : fetchedData?.data?.length === 0 ? (
+              <tr>
+                <td className="emptyTd" colSpan={7}>
+                  <EmptyDataContainer>
+                    <Empty />
+                  </EmptyDataContainer>
+                </td>
+              </tr>
+            ) : (
+              fetchedData?.data?.map((order: any) => {
+                const label = order?.status?.split(':')[0];
+                const val = order?.status?.split(':')[1];
+                return (
+                  <tr>
+                    <td>{order?.date}</td>
+                    <td>{order?.description}</td>
+                    <td>{order?.amount}</td>
+                    <td>
+                      <div
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '5px',
+                        }}
+                      >
+                        {label}: <Value>{val}</Value>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </StyledTable>
+      </StyledTableWrapper>
+    </OrderActionModal>
+  );
+}
+// Styled components
+export const StyledTableWrapper = styled.div`
+  overflow-x: auto;
+  max-height: calc(100vh - 290px);
+  scrollbar-width: none;
+  width: 100%;
+  /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */
+  &::-webkit-scrollbar {
+    width: 5px;
+    border-radius: 100px;
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #777;
+    border-radius: 100px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #7b61ff;
+    border-radius: 100px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #7b61ff;
+  }
+`;
+
+export const StyledTable = styled.table`
+  border-spacing: 0 10px;
+  width: 100%;
+  padding: 10px;
+  thead {
+    tr {
+      border-radius: 40px;
+      border-spacing: 0 10px;
+      th {
+        color: #3a3630;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        padding: 5px 15px;
+        background: #f0f2f2;
+        border-right: none;
+        border-left: none;
+        text-align: left;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        border-width: 1px 0;
+        text-transform: capitalize;
+        &:first-child {
+          border-radius: 100px 0 0 100px;
+          border-left: 1px solid rgba(0, 0, 0, 0.08);
+        }
+        &:last-child {
+          border-radius: 0px 100px 100px 0;
+          border-right: 1px solid rgba(0, 0, 0, 0.08);
+        }
+      }
+    }
+  }
+  tbody {
+    tr {
+      td {
+        color: #3a3630;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        padding: 12px 15px;
+        background: #fff;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        border-right: none;
+        border-left: none;
+      }
+      .link {
+        color: #09f;
+        font-family: Roboto;
+        font-weight: 400;
+        .linkHover {
+          cursor: pointer;
+        }
+      }
+      td {
+        .flex {
+          display: flex;
+          gap: 4px;
+          align-items: center;
+        }
+        .overDue {
+          border-radius: 20px;
+          border: 1px solid #edebe8;
+          background: #fff;
+          padding: 4px 8px;
+          color: #e95252;
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: 16px;
+        }
+      }
+      &:nth-child(even) td {
+        background: #f6fbff;
+      }
+      td:first-child {
+        border-radius: 100px 0 0 100px;
+        border-left: 1px solid rgba(0, 0, 0, 0.08);
+      }
+      td:last-child {
+        border-radius: 0px 100px 100px 0;
+        border-right: 1px solid rgba(0, 0, 0, 0.08);
+      }
+      .emptyTd {
+        border-radius: 100px !important;
+      }
+      .flex {
+        display: flex;
+        flex-direction: row;
+        gap: 5px;
+        height: 29px;
+        align-items: center;
+      }
+
+      &.insideTable {
+        td {
+          border-radius: 0;
+          border: none;
+          &:last-child {
+            border-radius: 0;
+            border-right: none;
+          }
+        }
+        table {
+          border-spacing: 0;
+          width: 100%;
+          border-radius: 5px;
+          border: 1px solid rgba(0, 0, 0, 0.08);
+          overflow: hidden;
+          border-top-left-radius: 15px;
+          border-top-right-radius: 15px;
+          thead {
+            tr {
+              border-bottom: none;
+              th {
+                padding: 14px 20px;
+                text-align: left;
+                border-top: 0;
+                border-right: 0;
+                border-left: 0;
+                background: #f8fafc;
+                &:first-child {
+                  border-radius: 0;
+                  border-left: 1px solid rgba(0, 0, 0, 0.08);
+                  border-top-left-radius: 15px;
+                }
+                &:last-child {
+                  border-radius: 0;
+                }
+              }
+            }
+          }
+          tbody {
+            tr {
+              td {
+                padding: 14px 20px;
+                text-align: left;
+                border-bottom: 1px solid rgba(58, 54, 48, 0.15);
+                background: #fff;
+                > svg {
+                  transform: scale(1.5);
+                  background-color: #edebe8;
+                  border-radius: 20px;
+                  padding: 5px;
+                }
+                &:last-child {
+                  border-radius: 0;
+                  border-right: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    > svg {
+      transform: scale(1.5);
+      background-color: #edebe8;
+      border-radius: 20px;
+      padding: 5px;
+    }
+
+    .close-icon {
+      transform: scale(1.3);
+      background-color: transparent;
+      border-radius: 0;
+      padding: 0;
+    }
+  }
+`;
+
+export const EmptyDataContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+export const Badge = styled.div`
+  div {
+    display: flex;
+    min-width: 85px;
+    padding: 6px 10px;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    border-radius: 22px;
+    font-family: 'Open Sans';
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+  }
+`;
+
+export const BadgeStatus = styled.div`
+  &.pending {
+    background: #fff1d6;
+    color: #f4a503;
+  }
+
+  &.resolved {
+    background: rgba(41, 204, 106, 0.15);
+    color: #1f9254;
+  }
+
+  &.overdue {
+    background: rgba(233, 82, 82, 0.15);
+    color: var(--contextual-red, #e95252);
+  }
+`;
+
+export const ClearAll = styled.div`
+  border-radius: 20px;
+  border: 1px solid #edebe8;
+  background: #fff;
+  display: flex;
+  padding: 6px 6px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+
+  &.active {
+    background: #313130;
+    & > div {
+      color: #fff;
+    }
+  }
+`;
+export const StyledFilterBtnIcon = styled.div`
+  display: flex;
+  width: 24px;
+  height: 24px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
+  border: 1px solid #e2e0db;
+  background: #f1f5f6;
+  .cross {
+    position: relative;
+    &:after {
+      display: inline-block;
+      content: 'X';
+      font-style: normal;
+      font-size: 14px;
+      color: #000;
+    }
+  }
+`;
+export const StyledFilterBtnLabel = styled.div`
+  color: #6a7378;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  white-space: nowrap;
+`;
+
+export default ChargeLog;
+
+const Value = styled.span`
+  color: #29cc6a;
+`;

package/src/components/order-view/order-actions/actions/clear-booking-status/ClearBookingStatus.tsx

@@ -44,7 +44,7 @@ const ClearBookingStatus = () => {
 
   useEffect(() => {
     setLoading(loading);
-    if (fetchedData && fetchedData.data) {
+    if (fetchedData && fetchedData?.data) {
       const requiredData = fetchedData?.data;
       setOrderDetails(requiredData[0]);
       setPrevOrderDetails(requiredData[0]);

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ActionDropdown.tsx

@@ -1,38 +1,55 @@
 import React, { useEffect, useState } from 'react';
-import OrderActionsDropdown from '../../../Dropdown';
-import { useOrderStaticData } from '../../../../store';
+import { useOrderStaticData, useSelectionAction } from '../../../../store';
 import { capitalize } from '../../../../utils';
+import { Select } from 'antd';
+import { Label } from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
 
 function ActionDropdown() {
   const [orderStaticData] = useOrderStaticData();
-  const [actionTypeOptions, setActionTypeOptions] = useState<any[]>([]);
+  const [actionTypeOptions, setActionTypeOptions] = useState<any>([]);
+  const [selectedAction, setSelectedAction] = useSelectionAction();
 
   useEffect(() => {
     if (orderStaticData) {
       const options = orderStaticData?.order_contact_action_type?.map(
         (option: any) => ({
-          label: capitalize(option.type.replaceAll('_', ' ')),
-          value: option.id,
+          label: capitalize(option?.type?.replaceAll('_', ' ')), // Display text
+          value: option?.type,
         })
       );
       setActionTypeOptions(options);
+
+      if (options?.length > 0 && !selectedAction) {
+        setSelectedAction(options[0]?.value);
+      }
     }
   }, [orderStaticData]);
-
-  const onSelect = () => {};
-  const onSearch = () => {};
+  const onSelect = (value: any) => {
+    setSelectedAction(value);
+  };
 
   return (
-    <OrderActionsDropdown
-      label="Action"
-      placeholder="Select Action"
-      options={actionTypeOptions}
-      value={actionTypeOptions?.find(option => option.value === 7)}
-      onSelect={onSelect}
-      onSearch={onSearch}
-      className="action-dropdown"
-    />
+    <Container>
+      <Label label="Action" />
+      <Select
+        style={{ minWidth: '260px' }}
+        placeholder="Select Action"
+        options={actionTypeOptions}
+        value={selectedAction || undefined}
+        onChange={onSelect}
+        className="action-dropdown"
+      />
+    </Container>
   );
 }
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  .ant-select-selector {
+    border-radius: 25px;
+  }
+`;
+
 export default ActionDropdown;

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ContactMobile.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Input } from 'antd';
-
-import { handleKeyDown } from '../../../../utils';
 import {
   useErrorConfirmOrder,
   useOrderDetailsConfirmOrder,
-} from '../../../store';
+} from '../../../../store';
+import { handleKeyDown } from '../../../../utils';
 
 function ContactMobile() {
   const [orderDetails, setOrderDetails] = useOrderDetailsConfirmOrder();

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ContactPhone.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Input } from 'antd';
-
-import { handleKeyDown } from '../../../../utils';
 import {
   useErrorConfirmOrder,
   useOrderDetailsConfirmOrder,
-} from '../../../store';
+} from '../../../../store';
+import { handleKeyDown } from '../../../../utils';
 
 function ContactPhone() {
   const [orderDetails, setOrderDetails] = useOrderDetailsConfirmOrder();

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ContactWork.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Input } from 'antd';
-
-import { handleKeyDown } from '../../../../utils';
 import {
   useErrorConfirmOrder,
   useOrderDetailsConfirmOrder,
-} from '../../../store';
+} from '../../../../store';
+import { handleKeyDown } from '../../../../utils';
 
 function ContactWork() {
   const [orderDetails, setOrderDetails] = useOrderDetailsConfirmOrder();