@bjsdistribution/dms-client-return 0.1.70-prod → 0.1.71-prod

package/src/components/order-view/DynamicTable.tsx

@@ -1,268 +0,0 @@
-import {
-  flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
-import React, { useMemo } from 'react';
-import styled from 'styled-components';
-import CustomScrollBar from '../../common/scrollbar';
-import { atom, useAtom } from 'jotai';
-import { Skeleton } from 'antd';
-export const selectedID = atom<any>([]);
-
-interface DynamicTableProps {
-  columns: any;
-  data: any[];
-  loading: boolean;
-}
-
-function DynamicTable(
-  { columns, data, loading }: DynamicTableProps,
-  props: any
-) {
-  const tableColumns = useMemo(() => columns, [columns]);
-  const tableData = useMemo(() => data, [data]);
-
-  const table = useReactTable({
-    columns: tableColumns,
-    data: tableData,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  });
-
-  const rows = table.getRowModel().rows;
-  const headerGroups = table.getHeaderGroups();
-  const action = props;
-  const [selectedRows] = useAtom(selectedID);
-
-  const smallColumns = [
-    'types',
-    'sources',
-    'event',
-    'code',
-    'type',
-    'route',
-    'action',
-  ];
-  const mediumColumns = ['date', 'reference', 'note', 'category'];
-  const largeColumns = ['details', 'datetime'];
-  const noFlexColumns = ['id'];
-
-  console.log(rows, '<===========rows');
-  console.log(props, 'props');
-  return (
-    <MainContainer>
-      <Container>
-        <TableWrapper>
-          <CustomScrollBar>
-            <Table>
-              <TableHead>
-                {headerGroups?.map(headerGroup => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map(header => (
-                      <TableHeadData
-                        className={`col 
-                          ${
-                            smallColumns.includes(header?.id)
-                              ? 'sm'
-                              : mediumColumns.includes(header?.id)
-                              ? 'md'
-                              : largeColumns.includes(header?.id)
-                              ? 'lg'
-                              : ''
-                          }`}
-                        key={header.id}
-                        onClick={header.column.getToggleSortingHandler()}
-                      >
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                      </TableHeadData>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableHead>
-              <TableBody>
-                {loading ? (
-                  <tr>
-                    <td colSpan={5}>
-                      <Skeleton active />
-                    </td>
-                  </tr>
-                ) : rows?.length === 0 ? (
-                  <TableRow>
-                    <TableData colSpan={columns.length}>
-                      No entries found.
-                    </TableData>
-                  </TableRow>
-                ) : (
-                  rows?.map(row => (
-                    <TableRow
-                      key={row.id}
-                      className={`${
-                        selectedRows?.length > 0 &&
-                        selectedRows?.filter(
-                          (f: any) => f?.id === (row?.original as any)?.id
-                        )?.length
-                          ? 'isSelectedRow'
-                          : ''
-                      }`}
-                    >
-                      {row.getVisibleCells().map(cell => (
-                        <TableData
-                          className={`col 
-                            ${
-                              noFlexColumns.includes(cell?.column.id)
-                                ? 'noFlex'
-                                : smallColumns.includes(cell?.column.id)
-                                ? 'sm'
-                                : mediumColumns.includes(cell?.column.id)
-                                ? 'md'
-                                : largeColumns.includes(cell?.column.id)
-                                ? 'lg'
-                                : ''
-                            } ${cell?.column.id}`}
-                          key={cell.id}
-                        >
-                          {flexRender(cell.column.columnDef.cell, {
-                            ...cell.getContext(),
-                            action,
-                          })}
-                        </TableData>
-                      ))}
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </CustomScrollBar>
-        </TableWrapper>
-      </Container>
-    </MainContainer>
-  );
-}
-
-const Container = styled.div`
-  height: 30vh;
-  pointer-events: initial;
-  @media (max-width: 1024px) {
-    height: 40vh;
-  }
-`;
-
-const TableWrapper = styled.div`
-  height: 100%;
-  overflow-x: auto;
-  scrollbar-width: thin;
-  border-top-left-radius: 15px;
-  border-top-right-radius: 15px;
-`;
-
-const TableHeadData = styled.th`
-  padding: 10px 5px;
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 24px;
-  letter-spacing: 0px;
-`;
-
-const TableData = styled.td`
-  border-spacing: 0px;
-  padding: 10px 5px;
-  font-family: 'Lato', sans-serif;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 16px;
-  letter-spacing: 0px;
-`;
-
-const TableRow = styled.tr`
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  border-bottom: 1px solid rgb(215, 214, 213);
-  font-weight: 300;
-`;
-
-const TableBody = styled.tbody`
-  border-bottom-right-radius: 10px;
-  background: rgb(255, 255, 255);
-  height: 96%;
-  overflow: auto;
-  width: 100%;
-`;
-
-const TableHead = styled.thead`
-  position: sticky;
-  top: 0px;
-  z-index: 1;
-  background: #f8f8f8;
-  white-space: nowrap;
-`;
-
-const Table = styled.table`
-  width: 100%;
-  height: 50%;
-  background: rgb(255, 255, 255);
-  box-shadow: 0px 4px 30px 0px #2e2d740d;
-`;
-
-const MainContainer = styled.div`
-  .col {
-    display: flex;
-    align-items: center;
-    color: #3a3630;
-    padding: 10px 5px;
-    text-align: left;
-  }
-
-  .col.noFlex {
-    flex: 0;
-  }
-
-  .col.sm {
-    flex: 1;
-    min-width: 100px;
-  }
-
-  .col.md {
-    flex: 2;
-    justify-content: flex-start;
-    min-width: 85px;
-  }
-
-  .col.lg {
-    flex: 4;
-    justify-content: flex-start;
-    min-width: 180px;
-  }
-
-  .col.date {
-  }
-
-  .col.amount,
-  .col.price {
-    justify-content: flex-end;
-  }
-
-  .TableHeadData,
-  .TableData {
-    padding: 10px 5px;
-    text-align: left;
-    white-space: nowrap;
-  }
-
-  .TableRow {
-    display: flex;
-    width: 100%;
-  }
-
-  .Table {
-    width: 100%;
-  }
-`;
-
-export default DynamicTable;

package/src/components/order-view/details-filters/DetailsFilters.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import Details from './right-side-filters/Details';
-import ActionsMenu from './left-side-filters/ActionsMenu';
-
-const DetailsFilters = () => {
-  return (
-    <Flex>
-      <Details />
-      <ActionsMenu />
-    </Flex>
-  );
-};
-
-const Flex = styled.div`
-  border-radius: 40px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  background: linear-gradient(180deg, #fff 0%, #f9fcff 100%);
-
-  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  /* z-index: 9999; */
-  display: flex;
-  padding: 10px;
-  flex-direction: row;
-  gap: 10px;
-  align-self: stretch;
-  position: relative;
-  margin-bottom: -71px;
-  width: 97%;
-  margin-left: 21px;
-  top: -132px;
-  justify-content: space-between;
-`;
-export default DetailsFilters;

package/src/components/order-view/details-filters/left-side-filters/ActionsMenu.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import DropDowns from './dropdowns/DropDowns';
-
-const ActionsMenu = () => {
-  return (
-    <Flex>
-      <DropDowns />
-    </Flex>
-  );
-};
-const Flex = styled.div`
-  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  display: flex;
-  height: 34px;
-  padding: 1px;
-  align-items: flex-start;
-  border-radius: 20px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  background: #f0f2f2;
-  cursor: pointer;
-`;
-
-export default ActionsMenu;

package/src/components/order-view/details-filters/left-side-filters/actions/ActionItem.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { StyledBulkItem, Typo } from './ActionStyles';
-import styled from 'styled-components';
-
-interface ActionItemProps {
-  name: string;
-  onClick: () => void;
-  icon?: React.ReactNode;
-}
-
-const ActionItem: React.FC<ActionItemProps> = ({ name, onClick, icon }) => {
-  return (
-    <StyledBulkItem onClick={onClick}>
-      <Typo>{name}</Typo>
-      {icon && <IconWrapper>{icon}</IconWrapper>}
-    </StyledBulkItem>
-  );
-};
-
-const IconWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  height: 24px;
-  width: 34px;
-
-  & > svg {
-    width: 100%;
-    transform: scale(0.7);
-  }
-`;
-
-export default ActionItem;

package/src/components/order-view/details-filters/left-side-filters/actions/ActionStyles.tsx

@@ -1,62 +0,0 @@
-import styled from 'styled-components';
-
-export const Flex = styled.div`
-  display: flex;
-  height: 34px;
-  padding: 1px;
-  align-items: flex-start;
-`;
-export const Typo = styled.div`
-  text-align: center;
-  font-size: 14px;
-  font-style: normal;
-  color: #3a3630;
-  font-weight: 400;
-  line-height: 15px;
-  text-transform: uppercase;
-  @media screen and (max-width: 1220px) {
-    font-size: 13px;
-  }
-`;
-
-export const StyledBulkItem = styled.div`
-  padding: 8px 12px;
-  display: flex;
-  align-items: center;
-  border-right: 1px solid #d0d5dd;
-  gap: 8px;
-  cursor: pointer;
-  position: relative;
-
-  @media screen and (max-width: 1030px) {
-    padding: 6px 4px;
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    box-sizing: border-box;
-    top: 54px;
-  }
-  &:last-child {
-    border-right: none;
-  }
-  &.active svg.arrowDown {
-    transform: rotate(180deg);
-  }
-  label {
-    color: #3a3630;
-    text-align: center;
-    font-family: 'Open Sans';
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 18px;
-    cursor: pointer;
-  }
-
-  &.noPadding {
-    padding: 0;
-  }
-`;

package/src/components/order-view/details-filters/left-side-filters/actions/Actions.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { useAtom } from 'jotai';
-import ActionItem from './ActionItem';
-import { countReducerAtom } from '../../../store';
-
-const Actions: React.FC = () => {
-  const [, dispatch] = useAtom(countReducerAtom);
-
-  const handleBulkUpdateClick = () => {
-    dispatch({ type: 'bulkUpdate' });
-  };
-
-  return (
-    <>
-      <Flex>
-        <ActionItem name="SEND EMAIL" onClick={handleBulkUpdateClick} />
-        <ActionItem
-          name="SEND SMS"
-          onClick={() => console.log('ROUTING MAP clicked')}
-        />
-      </Flex>
-    </>
-  );
-};
-
-const Flex = styled.div`
-  display: flex;
-  height: 31px;
-`;
-
-export default Actions;

package/src/components/order-view/details-filters/left-side-filters/dropdowns/DropDowns.tsx

@@ -1,112 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import OptionsDropDown from './OptionsDropDown';
-import Print from '../../../general-information/dropdowns/Print';
-import BjsMenuDropDown from './MenuDropDown';
-import {
-  errorAtom,
-  useAtom,
-  useCurrentAction,
-  useOrderDetails,
-} from '../../../store';
-// components
-
-function DropDowns() {
-  const [orderDetails] = useOrderDetails();
-  const [, setCurrentAction] = useCurrentAction();
-  const [errors] = useAtom(errorAtom);
-  const [hasNotifiedMobile, setHasNotifiedMobile] = useState(false);
-  const [hasNotifiedEmail, setHasNotifiedEmail] = useState(false);
-
-  const isEmailId = orderDetails?.order_recipient?.contact_email;
-  // const isContactNum = orderDetails?.order_recipient?.contact_home;
-  const VALID_UK_MOBILE_REGEX = /^(07\d{8,12}|447\d{7,11})$/;
-  const VALID_IRISH_MOBILE_REGEX = /^(08[35679]\d{7}|3538[35679]\d{7}|\+3538[35679]\d{7})$/;
-
-  const isValidUKMobile = (number: string | null | undefined): boolean =>
-    typeof number === 'string' && VALID_UK_MOBILE_REGEX.test(number);
-  const isValidIrishMobile = (number: string | null | undefined): boolean =>
-    typeof number === 'string' && VALID_IRISH_MOBILE_REGEX.test(number);
-  const isValidMobile = (number: string | null | undefined): boolean =>
-    isValidUKMobile(number) || isValidIrishMobile(number);
-
-  const contactMobile = orderDetails?.order_recipient?.contact_mobile;
-  const contactHome = orderDetails?.order_recipient?.contact_home;
-  const contactWork = orderDetails?.order_recipient?.contact_work;
-
-  const allContacts = [contactMobile, contactHome, contactWork];
-  const hasValidMobile = allContacts.some(isValidMobile);
-
-  const actions = [];
-
-  if (hasValidMobile) {
-    if (errors?.mobileError) {
-      if (!hasNotifiedMobile) {
-        setHasNotifiedMobile(true);
-      }
-    } else {
-      actions.push({
-        label: 'Send SMS',
-        onClick: () => setCurrentAction('send-sms'),
-      });
-    }
-  }
-
-  if (isEmailId) {
-    if (errors?.emailError) {
-      if (!hasNotifiedEmail) {
-        setHasNotifiedEmail(true);
-      }
-    } else {
-      actions.push({
-        label: 'Send Email',
-        onClick: () => setCurrentAction('send-email'),
-      });
-    }
-  }
-
-  return (
-    <>
-      <DashBoardWrapper>
-        <BjsMenuDropDown />
-        <OptionsDropDown />
-        <Print />
-        {actions?.map((action, index) => (
-          <FontContainer
-            key={index}
-            onClick={action.onClick}
-            style={{ cursor: 'pointer' }}
-          >
-            {action?.label}
-          </FontContainer>
-        ))}
-      </DashBoardWrapper>
-    </>
-  );
-}
-
-const DashBoardWrapper = styled.section`
-  padding: 0 5px;
-  display: flex;
-  align-self: center;
-  gap: 10px;
-  align-items: center;
-`;
-
-export const FontContainer: any = styled.div<{ disabled?: boolean }>`
-  color: #6a7378;
-  text-align: center;
-  font-family: 'lato', sans-serif;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 18px;
-  text-transform: uppercase;
-  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
-  @media screen and (max-width: 1210px) {
-    font-size: 11px;
-    line-height: 12px;
-  }
-`;
-
-export default DropDowns;

package/src/components/order-view/details-filters/left-side-filters/dropdowns/MenuDropDown.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { bjsMenu } from '../../../fakedata';
-import { useCurrentAction, useStatusDetails } from '../../../store';
-import { useClientPortal } from '../../../../store';
-import ArrowDownIcon from '../../../../../assets/icons/ArrowDownIcon';
-import { Dropdown, Space } from 'antd';
-import styled from 'styled-components';
-
-function BjsMenuDropDown() {
-  const [, setCurrentAction] = useCurrentAction();
-  const handleSelectChange = (selectedOption: any) => {
-    setCurrentAction(selectedOption);
-  };
-
-  const [orderStatus] = useStatusDetails();
-  const [clientPortal] = useClientPortal();
-
-  if (clientPortal) {
-    return null; // hide completely for client portal!
-  }
-
-  const isReleased = orderStatus[0]?.released;
-
-  const filteredOptions = bjsMenu.filter(option => {
-    if (isReleased) {
-      return option.value !== 'release-order';
-    } else {
-      return option;
-    }
-  });
-
-  const menuItems = {
-    items: filteredOptions?.map(option => ({
-      key: option.value,
-      label: (
-        <div onClick={() => handleSelectChange(option.value)}>
-          {option.label}
-        </div>
-      ),
-    })),
-  };
-
-  return (
-    <Dropdown menu={menuItems} trigger={['hover']}>
-      <a onClick={e => e.preventDefault()} style={{ cursor: 'pointer' }}>
-        <StyledSpace>
-          BJS MENU
-          <ArrowDownIcon fill={'#f0f2f2'} />
-        </StyledSpace>
-      </a>
-    </Dropdown>
-  );
-}
-
-const StyledSpace = styled(Space)`
-  .ant-space-item {
-    color: #6a7378;
-    text-align: center;
-    font-family: Lato;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-  }
-`;
-
-export default BjsMenuDropDown;