@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,275 @@
+import {
+  SectionHeader,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
+import React, { useEffect } from 'react';
+import Tabs from './Tabs';
+import styled from 'styled-components';
+import { useInfoType, useOrderDetails, useTabType } from '../store';
+import NotifyFlag from '../../../assets/icons/NotifyFlag';
+import useFetchUnresolvedTasks from '../order-actions/hooks/useAllTaskData';
+import {
+  useNotificationData,
+  useOrderNotify,
+  useReminderNotiData,
+  useRouteDetails,
+  useTaskLoading,
+} from '../order-actions/store';
+import useFetchReminders from '../order-actions/hooks/useAllReminderData';
+
+interface ApiResponse {
+  message: string;
+  code: number;
+  error: string | null;
+  error_traceback: string | null;
+  data: [];
+  setShouldPerformAction: boolean;
+}
+
+function Notification() {
+  const [activeTab, setActiveTab] = useTabType();
+  const [, setShowMoreInfo] = useInfoType();
+  const TaskData = useFetchUnresolvedTasks();
+  const ReminderData = useFetchReminders();
+  const [OrderData] = useOrderDetails();
+  const [notificationData, setNotififcationData] = useNotificationData();
+  const [flagLoading] = useTaskLoading();
+  const [reminderData, setReminderData] = useReminderNotiData();
+  const routeId = OrderData?.order_routes?.route_id;
+  const [, setRouteData] = useRouteDetails();
+  const [orderCount] = useOrderNotify();
+
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab);
+    setShowMoreInfo(false);
+  };
+
+  //flags notification data
+  const fetchTaskData = async () => {
+    const result = await TaskData();
+    setNotififcationData(result);
+  };
+
+  //reminder noitification
+  const fetchReminderData = async () => {
+    const result = await ReminderData();
+    setReminderData(result);
+  };
+
+  //route API calling...
+  const { data: fetchedData, setShouldPerformAction } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `route/${routeId}`,
+    method: 'GET',
+    performAction: false,
+  });
+
+  useEffect(() => {
+    if (OrderData.id) {
+      fetchTaskData();
+      fetchReminderData();
+    }
+  }, [OrderData.id]);
+
+  useEffect(() => {
+    if (routeId) {
+      setShouldPerformAction(true);
+      setRouteData(fetchedData?.data[0]);
+    }
+  });
+
+  const activeNotifications = notificationData.filter(
+    (item: any) => item.task_status_id !== 2
+  );
+  const closedNotifications = notificationData.filter(
+    (item: any) => item?.task_status_id === 2
+  );
+
+  const activeReminders = reminderData.filter(
+    (item: any) => item.status_id == 1 || item.status_id == 3
+  );
+  const closedReminders = reminderData.filter(
+    (item: any) => item?.status_id === 2
+  );
+
+  const totalActiveCount =
+    activeNotifications.length + activeReminders.length + orderCount;
+  const totalClosedCount = closedNotifications.length + closedReminders.length;
+
+  return (
+    <>
+      <Section>
+        <Container className="notification-header">
+          <FlagContainer>
+            <NotifyFlag />
+          </FlagContainer>
+          <Label label="NOTIFICATIONS" />
+          <TabsData className="tab-buttons">
+            <StyledTab
+              active={activeTab === 'active'}
+              onClick={() => handleTabChange('active')}
+            >
+              Active
+              <ActiveCount>{totalActiveCount}</ActiveCount>
+            </StyledTab>
+            <StyledTab
+              active={activeTab === 'closed'}
+              onClick={() => handleTabChange('closed')}
+            >
+              Closed
+              <ClosedCount>{totalClosedCount}</ClosedCount>
+            </StyledTab>
+          </TabsData>
+        </Container>
+        {flagLoading ? (
+          <Loader>
+            <Spinner />
+            <Text>Fetching Notifications...</Text>
+          </Loader>
+        ) : notificationData.length > 0 ||
+          reminderData.length > 0 ||
+          OrderData ? (
+          <TabsWrapper>
+            <Tabs
+              activeNotifications={activeNotifications}
+              closedNotifications={closedNotifications}
+              activeReminders={activeReminders}
+              closedReminders={closedReminders}
+            />
+          </TabsWrapper>
+        ) : (
+          'No Notifications Found'
+        )}
+      </Section>
+    </>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 10px;
+  border-bottom: 1px solid #ccc;
+`;
+
+const Loader = styled.div`
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const Spinner = styled.div`
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: #3a3630;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+const FlagContainer = styled.div`
+  padding: 8px;
+  background-color: #3a3630;
+  border-radius: 10px;
+`;
+
+const TabsData = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 10px;
+`;
+
+const ActiveCount = styled.div`
+  color: #ffffff;
+  padding: 1px 5px;
+  background-color: #6396e5;
+  border-radius: 6px;
+`;
+
+const ClosedCount = styled.div`
+  color: #ffffff;
+  padding: 1px 5px;
+  background-color: #e95252;
+  border-radius: 6px;
+`;
+
+const StyledTab = styled.div<{ active: boolean }>`
+  display: flex;
+  gap: 5px;
+  cursor: pointer;
+  color: ${props => (props.active ? '#3a3630' : '#AEA9A1')};
+  border-bottom: ${props =>
+    props.active ? '2px solid #feba30' : '2px solid #eeeeee'};
+  transition: border-bottom 0.3s ease;
+  font-family: 'Roboto', sans-serif;
+  padding-bottom: 5px;
+  align-items: center;
+`;
+
+const Section = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 10px;
+  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
+  border: 1px solid #e0e0e0;
+`;
+
+const Label = styled(SectionHeader)`
+  border-bottom: 1px solid #ccc;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px; /* 150% */
+  text-transform: uppercase;
+`;
+
+const TabsWrapper = styled.div`
+  /* min-height: 200px; */
+  max-height: 250px;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &:hover {
+    scrollbar-width: thin;
+  }
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+
+  &:hover::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+`;
+
+const Text = styled.div`
+  color: var(--tonal-brown-651, #6a7378);
+  font-family: Lato;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 600;
+`;
+export default Notification;

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

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import React from 'react';
+import {
+  AntSelect,
+  StandardOptionsType,
+} from '@bjsdistribution/dms-component-library';
+
+interface ActionsDropdownProps {
+  label: string;
+  placeholder: string;
+  options: StandardOptionsType[];
+  onSelect: () => void;
+  onSearch: () => void;
+  className?: string;
+}
+
+function OrderActionsDropdown(props: ActionsDropdownProps) {
+  return (
+    <Container className={props.className}>
+      <Label>{props.label}</Label>
+      <AntSelect
+        options={props.options}
+        placeholder={props.placeholder}
+        onChange={props.onSelect}
+        disabled={false}
+        style={{ width: '100%' }}
+        onSearch={props.onSearch}
+        showSearch={true}
+        popupClassName={'dropDownStyle'}
+        selectWrapperClass={'rounded'}
+      />
+    </Container>
+  );
+}
+
+const Label = styled.label`
+  color: #6a7378;
+  font-family: 'Lato', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+export default OrderActionsDropdown;

package/src/components/order-view/order-actions/actions/add-resources/CategoryDropdown.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import OrderActionsDropdown from '../../Dropdown';
+
+function CategoryDropdown() {
+  const onSelect = () => {};
+  const onSearch = () => {};
+
+  const options = [
+    { label: 'small', value: 'small' },
+    { label: 'medium', value: 'medium' },
+    { label: 'large', value: 'large' },
+  ];
+
+  return (
+    <OrderActionsDropdown
+      label="Category"
+      placeholder="Select Category"
+      options={options}
+      onSelect={onSelect}
+      onSearch={onSearch}
+    />
+  );
+}
+
+export default CategoryDropdown;

package/src/components/order-view/order-actions/actions/add-resources/DocFileUpload.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import type { UploadProps } from 'antd';
+import { message, Upload } from 'antd';
+import styled from 'styled-components';
+import { Button } from '@bjsdistribution/dms-component-library';
+import UploadIcon from '../../../../../assets/icons/UploadIcon';
+
+const { Dragger } = Upload;
+
+const props: UploadProps = {
+  name: 'file',
+  multiple: true,
+  action: 'sdfkj',
+  onChange(info) {
+    const { status } = info.file;
+    if (status !== 'uploading') {
+      console.log(info.file, info.fileList);
+    }
+    if (status === 'done') {
+      message.success(`${info.file.name} file uploaded successfully.`);
+    } else if (status === 'error') {
+      message.error(`${info.file.name} file upload failed.`);
+    }
+  },
+  onDrop(e) {
+    console.log('Dropped files', e.dataTransfer.files);
+  },
+};
+
+function DocFileUpload () {
+  return (
+    <MainContainer>
+      <Dragger {...props}>
+        <Container>
+          <UploadButton colors='secondary' shape='rounded'>
+            Upload Button
+          </UploadButton>
+          <IconContainer>
+          <UploadIcon />
+          </IconContainer>
+          <TextContainer>
+            <Text1>or drag and drop your file </Text1>
+            <Text2>Excel (.xls / .xlsx) or CSV (.csv) Only</Text2>
+          </TextContainer>
+        </Container>
+      </Dragger>
+    </MainContainer>
+  )
+}
+const MainContainer = styled.div`
+  width: 100%;
+  .ant-upload-wrapper .ant-upload-drag .ant-upload {
+    padding: 0;
+  }
+  .ant-upload-wrapper, .ant-upload-drag, .ant-upload  {
+    border: none;
+    background: transparent;
+  }
+`
+
+const Text2 = styled.p`
+  color: #BCBAB7;
+  text-align: center;
+  font-family: 'Roboto', sans-serif;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  text-transform: lowercase;
+  padding: 0;
+  margin: 0;
+`
+
+const TextContainer = styled.div`
+
+`;
+
+const Text1 = styled.p`
+  color: #AEA9A1;
+  text-align: left;
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  text-transform: lowercase;
+  padding: 0;
+  margin: 0;
+`;
+
+const IconContainer = styled.div`
+  border: 1px dashed #0465AC;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+`;
+
+const UploadButton = styled(Button)`
+  height: 16px;
+  font-size: 14px;
+  padding: 7px 20px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  padding: 6px;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 30px;
+  border: 1px solid #E0E2E7;
+  background: #FFF;
+
+  
+`;
+
+// const Text = styled.p``;
+
+export default DocFileUpload;

package/src/components/order-view/order-actions/actions/add-resources/DocumentTypeDropdown.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import OrderActionsDropdown from '../../Dropdown';
+
+function DocumentTypeDropdown() {
+  const onSelect = () => {};
+  const onSearch = () => {};
+  return (
+    <OrderActionsDropdown
+      label="Document Type"
+      placeholder="Select Document Type"
+      options={[]}
+      onSelect={onSelect}
+      onSearch={onSearch}
+    />
+  );
+}
+
+export default DocumentTypeDropdown;

package/src/components/order-view/order-actions/actions/add-resources/Visibility.tsx

@@ -0,0 +1,29 @@
+import { RadioButtonGroup } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+
+const visibilityOptions = [
+  {
+    label: 'Public',
+    value: 'public',
+  },
+  {
+    label: 'Private',
+    value: 'private',
+  },
+];
+
+function VisibilityRadioButtons() {
+  const handleRadioButtonChange = () => {};
+  return (
+    // refer product information for implementation
+    <RadioButtonGroup
+      selectedValue={'public'}
+      heading="Visibility"
+      options={visibilityOptions || []}
+      required={false}
+      onChange={handleRadioButtonChange}
+    />
+  );
+}
+
+export default VisibilityRadioButtons;

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import DocumentTypeDropdown from './DocumentTypeDropdown';
+import styled from 'styled-components';
+import CategoryDropdown from './CategoryDropdown';
+import VisibilityRadioButtons from './Visibility';
+import DocFileUpload from './DocFileUpload';
+import { useCurrentAction } from '../../../store';
+// import DocFileUpload from './DocFileUpload';
+
+function AddResources() {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const onClose = () => {
+    setCurrentAction(undefined);
+  };
+
+  return (
+    <OrderActionModal
+      headerTitle="Add New Resource"
+      showAdditionalInfo
+      infoText="NICK OLIVER, YO42 2ST"
+      onCloseHeader={onClose}
+      onSubmit={() => {}}
+    >
+      <ContentContainer>
+        <Top>
+          <DocumentTypeDropdown />
+          <CategoryDropdown />
+          <VisibilityRadioButtons />
+        </Top>
+        <Bottom>
+          <Label>File</Label>
+          <DocFileUpload />
+        </Bottom>
+      </ContentContainer>
+    </OrderActionModal>
+  );
+}
+
+const Label = styled.label`
+  color: #6a7378;
+  font-family: 'Lato', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+`;
+
+const Bottom = styled.div`
+  width: 100%;
+`;
+
+const Top = styled.div`
+  display: flex;
+  gap: 15px;
+  > div {
+    min-width: 240px;
+  }
+`;
+
+const ContentContainer = styled.div`
+  /* display: flex; */
+  padding: 15px 12px;
+  flex: 1 0 0;
+  border-radius: 15px;
+  background: #f8fafc;
+  margin: 0px 20px 0 20px;
+`;
+
+export default AddResources;

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

@@ -0,0 +1,95 @@
+import styled from 'styled-components';
+import React from 'react';
+import { AntTable } from '@bjsdistribution/dms-component-library';
+
+function CancelOrderTable() {
+  const options = [
+    { value: 'bjsCouriers', label: 'BJS COURIERS' },
+    { value: 'bjsSales', label: 'BJS SALES' },
+    { value: 'test', label: 'TEST' },
+  ];
+
+  const data = [
+    {
+      status: 'option1',
+      code: 'FFLMW-B1',
+      description:
+        'Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
+      sku: '007022530015429326',
+    },
+    {
+      status: 'option2',
+      code: 'FFLMW-B1',
+      description:
+        'Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
+      sku: '007022530015429326',
+    },
+    {
+      status: 'option3',
+      code: 'FFLMW-B1',
+      description:
+        'Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
+      sku: '007022530015429326',
+    },
+  ];
+
+  const columns = [
+    { key: 'checkbox', title: '', isCheckbox: true },
+    { key: 'status', title: 'Status', isSelect: true },
+    { key: 'code', title: 'Code' },
+    { key: 'description', title: 'Description' },
+    { key: 'sku', title: 'SKU' },
+  ];
+  return (
+    <GLobalPopupContent>
+      <AntTable
+        columns={columns}
+        data={data}
+        selectOptions={options}
+        onSelectChange={(value: any, record: any) =>
+          console.log('Selected value:', value, 'for record:', record)
+        }
+      />
+    </GLobalPopupContent>
+  );
+}
+
+const GLobalPopupContent = styled.div`
+  section {
+    padding: 15px 15px 0;
+    .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%;
+        }
+      }
+    }
+  }
+`;
+
+export default CancelOrderTable;

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import React from 'react';
+import { TextArea } from '@bjsdistribution/dms-component-library';
+
+function CancelationNote() {
+  return (
+    <Container>
+      <Label>Cancelation Note</Label>
+      <TextArea rows={5} />
+    </Container>
+  );
+}
+
+const Label = styled.label`
+  color: #6a7378;
+  font-family: 'Lato', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+export default CancelationNote;