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

package/src/common/date-picker/single-date-filter/SingleDateFilter.tsx

@@ -1,43 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-import { useEffect } from 'react';
-import CustomDatePicker from '../CustomDatePicker';
-import Header from '../header/Header';
-
-type Props = {
-  startDate: any;
-  setStartDate: any;
-  setEndDate: any;
-};
-
-function SingleDateFilter({ setStartDate, startDate, setEndDate }: Props) {
-  useEffect(() => {
-    setStartDate(startDate);
-  }, []);
-
-  const today = new Date();
-
-  return (
-    <Container>
-      <Header {...{ startDate, setStartDate }} />
-      <CustomDatePicker
-        from={startDate}
-        date={startDate}
-        maxStartDate={today}
-        type="from"
-        onSelect={(newDate: any) => {
-          setStartDate(newDate);
-          setEndDate(undefined);
-        }}
-      />
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-export default styled(SingleDateFilter)``;

package/src/common/expand-collapse/index.tsx

@@ -1,112 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import ChevronUp from '../../assets/icons/ChevronUp';
-
-interface IProps {
-  collapsedContent: React.ReactNode;
-  children: React.ReactNode;
-  extraActions?: React.ReactNode;
-}
-
-function CollapsableForm(props: IProps) {
-  const [isExpanded, setIsExpanded] = useState<boolean>(true);
-  return (
-    <MainContainer>
-      <CardHeader>
-        <CollapsedContent>
-          {props.collapsedContent}
-          <Container>
-            {props?.extraActions}
-            <Text onClick={() => setIsExpanded(prev => !prev)}>
-              {isExpanded ? 'COLLAPSE' : 'SHOW'}
-            </Text>
-            <IconContainer
-              onClick={() => setIsExpanded(prev => !prev)}
-              isExpanded={isExpanded}
-            >
-              <ChevronUp />
-            </IconContainer>
-          </Container>
-        </CollapsedContent>
-      </CardHeader>
-      {isExpanded && (
-        <CustomizedFormSection>
-          <ExpandedContent>{props.children}</ExpandedContent>
-        </CustomizedFormSection>
-      )}
-    </MainContainer>
-  );
-}
-
-const CustomizedFormSection = styled.div`
-  display: flex;
-  background: #ffffff;
-  padding: 12px;
-  flex-direction: column;
-  gap: 14px;
-  border: 1px solid #f0f2f2;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
-  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
-`;
-
-const CardHeader = styled.div`
-  border: 1px solid #f0f2f2;
-  background-color: #f8fafc;
-  color: #3a3630;
-  font-size: 16px;
-  padding: 10px;
-  border-bottom: 1px solid #ddd;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  font-family: 'Roboto', sans-serif;
-  font-weight: 600;
-`;
-
-const Text = styled.span`
-  font-size: 14px;
-  color: #3a3630;
-  font-weight: 500;
-  font-family: 'lato', sans-serif;
-  cursor: pointer;
-`;
-
-const Container = styled.div`
-  display: flex;
-  gap: 10px;
-  align-items: center;
-`;
-
-const MainContainer = styled.div`
-  gap: 0;
-`;
-
-const IconContainer = styled.div<{ isExpanded: boolean }>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  width: 25px;
-  height: 25px;
-  padding: 2px;
-  border-radius: 3px;
-  background: #ffffff;
-  box-shadow: 0px 1px 2px 0px #1018280d;
-  &:hover {
-    background: rgba(58, 54, 57, 0.05);
-  }
-  svg {
-    transform: rotate(${props => (props.isExpanded ? '360deg' : '180deg')});
-  }
-`;
-
-const ExpandedContent = styled.div``;
-
-const CollapsedContent = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-`;
-
-export default CollapsableForm;

package/src/common/hooks/useCopyToClipboard.ts

@@ -1,17 +0,0 @@
-function useCopyToClipboard() {
-  const copy = async (text: any) => {
-    if (navigator.clipboard) {
-      try {
-        await navigator.clipboard.writeText(text);
-      } catch (err) {
-        console.log('Failed to copy text: ', err);
-      }
-    } else {
-      console.log('Clipboard API is not supported');
-    }
-  };
-
-  return copy;
-}
-
-export default useCopyToClipboard;

package/src/common/infiniteScrolling.tsx

@@ -1,54 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-const useInfiniteScroll = (
-  paginationData: any,
-  setShouldPerformAction: Function,
-  tableScrolling: any
-) => {
-  const [page, setPage] = useState(1);
-  const [scrollActivated, setScrollActivated] = useState(false);
-  const debounce = (func: Function, wait: number) => {
-    let timeout: ReturnType<typeof setTimeout>;
-    return (...args: any[]) => {
-      clearTimeout(timeout);
-      timeout = setTimeout(() => func(...args), wait);
-    };
-  };
-
-  const handleInfiniteScroll = useCallback(
-    debounce(() => {
-      setScrollActivated(true);
-      const element = document.getElementById(tableScrolling);
-      if (element) {
-        const { scrollHeight, offsetHeight, scrollTop } = element;
-        let totalPages;
-        if (paginationData) {
-          totalPages = JSON.parse(paginationData).total_pages;
-        }
-        if (
-          offsetHeight + scrollTop >= scrollHeight &&
-          totalPages >= page &&
-          totalPages > page
-        ) {
-          setShouldPerformAction(true);
-          setPage(prev => prev + 1);
-        }
-      }
-    }, 700),
-    [paginationData, page, setShouldPerformAction]
-  );
-  useEffect(() => {
-    const element = document.getElementById(tableScrolling);
-    if (element) {
-      element.addEventListener('scroll', handleInfiniteScroll);
-    }
-    return () => {
-      if (element) {
-        element.removeEventListener('scroll', handleInfiniteScroll);
-      }
-    };
-  }, [handleInfiniteScroll]);
-  return { page, scrollActivated };
-};
-
-export default useInfiniteScroll;

package/src/common/modals/order-action-modal/BackgroundModal.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { createPortal } from 'react-dom';
-import styled from 'styled-components';
-
-interface BackgroundModalProps {
-  children: React.ReactNode;
-}
-
-function BackgroundModal(props: BackgroundModalProps) {
-  return createPortal(
-    <Container {...props}>{props.children}</Container>,
-    document.body
-  );
-}
-
-const Container = styled.div`
-  border: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;  
-  z-index: 1000;
-  background: rgba(0, 0, 0, 0.8);
-  box-shadow: 0px 3px 10px #00000029;
-`;
-
-export default BackgroundModal;

package/src/common/modals/order-action-modal/OrderActionModal.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import BackgroundModal from './BackgroundModal';
-import OrderActionHeader from './header/OrderActionHeader';
-import OrderActionFooter from './footer/OrderActionFooter';
-
-interface ActionModalProps {
-  headerTitle: string;
-  showAdditionalInfo?: boolean;
-  infoText?: string;
-  headerActions?: React.ReactNode;
-  submitBtnTitle?: string;
-  footerActions?: React.ReactNode;
-  children: React.ReactNode;
-  onCloseHeader: () => void;
-  onSubmit: () => void;
-  isSubmitDisabled?: boolean;
-  minWidth?: string; // New optional prop for min-width
-  maxWidth?: string; // New optional prop for min-width
-}
-
-function OrderActionModal({
-  minWidth = '30vw',
-  maxWidth = '75vw',
-  ...props
-}: ActionModalProps) {
-  return (
-    <BackgroundModal>
-      <MainContainer minWidth={minWidth} maxWidth={maxWidth}>
-        <OrderActionHeader
-          title={props.headerTitle}
-          onClose={props.onCloseHeader}
-          showInformation={props.showAdditionalInfo}
-          infoText={props.infoText}
-          actions={props.headerActions}
-        />
-        {props.children}
-        <OrderActionFooter
-          submitButtonTitle={props.submitBtnTitle}
-          onSubmit={props.onSubmit}
-          actions={props.footerActions}
-          isSubmitDisabled={props.isSubmitDisabled}
-        />
-      </MainContainer>
-    </BackgroundModal>
-  );
-}
-
-// Styled component with dynamic min-width
-const MainContainer = styled.div<{ minWidth: string; maxWidth: string }>`
-  min-height: 30vh;
-  max-height: 80vh;
-  border-radius: 12px;
-  background: #fff;
-  box-shadow: 0px 20px 24px -4px #10182814;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  overflow-x: hidden;
-  max-width: ${({ maxWidth }) => maxWidth}; // Dynamic max-width
-  min-width: ${({ minWidth }) => minWidth}; // Dynamic min-width
-`;
-
-export default OrderActionModal;

package/src/common/modals/order-action-modal/footer/OrderActionFooter.tsx

@@ -1,46 +0,0 @@
-import { Button } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-
-interface FooterProps {
-  submitButtonTitle?: string;
-  cancelButtonTitle?: string;
-  actions?: React.ReactNode;
-  onSubmit: () => void;
-  onCancel?: () => void;
-  isSubmitDisabled?: boolean;
-}
-
-function OrderActionFooter(props: FooterProps) {
-  const { isSubmitDisabled } = props;
-  return (
-    <Container>
-      <SubmitButton
-        shape="rounded"
-        colors="primary"
-        onClick={props.onSubmit}
-        disabled={isSubmitDisabled}
-      >
-        {props.submitButtonTitle || 'submit'}
-      </SubmitButton>
-      {props.actions}
-    </Container>
-  );
-}
-
-const SubmitButton = styled(Button)``;
-
-const Container = styled.div`
-  display: flex;
-  /* justify-content: space-between; */
-  gap: 15px;
-  align-items: center;
-  width: 100%;
-  background: #f8fafc;
-  border-radius: 0px 0px 6px 6px;
-  padding: 10px 15px 10px 15px;
-  border-top: 1px solid #edebe8;
-  margin-left: 25px;
-`;
-
-export default OrderActionFooter;

package/src/common/modals/order-action-modal/header/AdditionalInformation.tsx

@@ -1,51 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-
-interface IProps {
-  info: string;
-}
-
-function AdditionalInformation(props: IProps) {
-  return (
-    <Container>
-      <Rect />
-      <AdditionalInfo>
-        <Text>{props.info}</Text>
-      </AdditionalInfo>
-    </Container>
-  );
-}
-
-const Text = styled.p`
-  color: #ffffff;
-  font-family: 'Lato', sans-serif;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 600;
-  margin: 0;
-  padding: 0;
-`;
-
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const Rect = styled.div`
-  width: 9px;
-  height: 45px;
-  background: #3a3630;
-`;
-
-const AdditionalInfo = styled.div`
-  display: flex;
-  padding: 3px 10px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 20px;
-  border-radius: 0px 15px 15px 0px;
-  background: rgba(63, 151, 188, 0.6);
-  box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.25) inset;
-`;
-
-export default AdditionalInformation;

package/src/common/modals/order-action-modal/header/OrderActionHeader.tsx

@@ -1,78 +0,0 @@
-import { CrossIcon } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-import AdditionalInformation from './AdditionalInformation';
-
-interface HeaderProps {
-  title: string;
-  actions?: React.ReactNode;
-  showInformation?: boolean;
-  infoText?: string;
-  onClose: () => void;
-}
-
-function OrderActionHeader(props: HeaderProps) {
-  const {
-    title,
-    actions,
-    showInformation = false,
-    infoText = ' ',
-    onClose,
-  } = props;
-
-  return (
-    <Container>
-      <Wrapper>
-        <Title>{title}</Title>
-        {showInformation && <AdditionalInformation info={infoText} />}
-        {actions}
-      </Wrapper>
-
-      <IconContainer onClick={onClose}>
-        <CrossIcon />
-      </IconContainer>
-    </Container>
-  );
-}
-
-const Wrapper = styled.div`
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  width: 90%;
-  margin-left: 20px;
-`;
-
-const IconContainer = styled.div`
-  svg > path {
-    fill: #ffffff;
-  }
-  cursor: pointer;
-`;
-
-const Title = styled.h3`
-  margin: 0;
-  padding: 0;
-  color: #edebe8;
-  text-transform: uppercase;
-  font-size: 20px;
-  font-family: 'Roboto', sans-serif;
-  font-style: normal;
-  font-weight: 900;
-  text-wrap: nowrap;
-`;
-
-const Container = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  background: #3a3630;
-  border-radius: 12px 12px 0px 0px;
-  padding: 10px 15px 10px 15px;
-  position: sticky;
-  top: 0;
-  z-index: 9;
-`;
-
-export default OrderActionHeader;

package/src/common/radio-group/RadioButton.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import RadioButtonCheckIcon from '../../assets/icons/RadioButtonCheckIcon';
-import { RadioInputProps, fonts } from './types';
-
-function RadioButton(props: RadioInputProps) {
-  return (
-    <RadioContainer>
-      {props.checked && <RadioButtonCheckIcon color={props.color} />}
-      <Input className="appearance" type="radio" {...props} />
-      <Label htmlFor={props.id}>{props.label}</Label>
-    </RadioContainer>
-  );
-}
-
-const Label = styled.label`
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 400;
-  font-family: ${fonts.secondary};
-  color: #aea9a1;
-  white-space: nowrap;
-`;
-
-const Input = styled.input<{ color?: string }>`
-  appearance: none;
-  margin: 0;
-  width: 16px;
-  height: 16px;
-  border: 1px solid #aea9a1;
-  border-radius: 14px;
-  cursor: pointer;
-
-  &:checked {
-    & + ${Label} {
-      color: ${props => props.color || '#6396e5'};
-    }
-    display: none;
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    border-radius: 14px;
-    width: 12px;
-    height: 12px;
-    margin: 2px;
-  }
-
-  &:checked::after {
-    background-color: ${props => props.color || '#6396e5'};
-  }
-`;
-
-const RadioContainer = styled.div`
-  display: flex;
-  gap: 5px;
-  align-items: center;
-`;
-
-export default RadioButton;

package/src/common/radio-group/RadioButtonGroup.tsx

@@ -1,113 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-// import { StandardOptionsType } from '@bjsdistribution/dms-component-library';
-import RadioButton from './RadioButton';
-import {
-  DirectionType,
-  RadioButtonGroupProps,
-  RequiredTextProps,
-  fonts,
-} from './types';
-
-type StandardOptionsType = {
-  label: string;
-  value: any;
-  color?: string;
-};
-
-function RadioButtonGroup(props: RadioButtonGroupProps) {
-  const {
-    heading,
-    direction = 'horizontal',
-    required = true,
-    options,
-    onChange,
-  } = props;
-
-  function renderOptions() {
-    return options?.map((option: StandardOptionsType, index: number) => {
-      const { label, value, color } = option;
-      const shortenedOptionLabel = label?.replace(/\s+/g, '');
-      const optionId = `radio-option-${shortenedOptionLabel}`;
-
-      return (
-        <>
-          <RadioButton
-            value={value}
-            label={label}
-            key={optionId}
-            id={optionId}
-            name={heading.replace(/ /g, '-').toLowerCase()}
-            checked={props.selectedValue == value}
-            onChange={onChange}
-            color={color}
-          />
-          {options.length - 1 !== index && <Separator />}
-        </>
-      );
-    });
-  }
-  return (
-    <Fieldset>
-      <LegendContainer>
-        <Legend>{heading}</Legend>
-        {required && (
-          <RequiredText $required={required || false}>*</RequiredText>
-        )}
-      </LegendContainer>
-      <Wrapper $direction={direction} className="custom-wrapper">
-        {renderOptions()}
-      </Wrapper>
-    </Fieldset>
-  );
-}
-
-const Separator = styled.div`
-  width: 1px;
-  background: #e0e2e7;
-`;
-
-const labelStyles = css`
-  color: #6a7378;
-  font-size: 14px;
-  font-weight: 400;
-  font-family: ${fonts.secondary};
-  line-height: 20px;
-`;
-
-const RequiredText = styled.span<RequiredTextProps>`
-  ${props => !props.$required && 'visibility: hidden;'}
-  ${labelStyles}
-`;
-
-const LegendContainer = styled.div`
-  display: flex;
-`;
-
-const Legend = styled.legend`
-  color: #6a7378;
-  font-size: 14px;
-  font-weight: 400;
-  font-family: ${fonts.secondary};
-  line-height: 20px;
-`;
-
-const Fieldset = styled.fieldset`
-  border: none;
-  padding: 0px;
-`;
-
-const Wrapper = styled.div<{ $direction: DirectionType }>`
-  display: flex;
-  flex-direction: ${props =>
-    props.$direction === 'horizontal' ? 'row' : 'column'};
-  gap: 20px;
-  padding: 0px 10px;
-  border-radius: 15px;
-  border: 1px solid #e0e2e7;
-  background: #fff;
-  height: 30px;
-  justify-content: space-evenly;
-`;
-
-export default RadioButtonGroup;

package/src/common/radio-group/types.ts

@@ -1,32 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-
-export const fonts = {
-  primary: `'Roboto', sans-serif`,
-  secondary: `'Lato', sans-serif`,
-};
-
-export type DirectionType = 'horizontal' | 'vertical';
-
-export type StandardOptionsType = {
-  label: string;
-  value: string;
-  color?: string;
-};
-
-export interface RadioButtonGroupProps {
-  heading: string;
-  direction?: DirectionType;
-  required?: boolean;
-  options: StandardOptionsType[];
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  selectedValue: number;
-}
-
-export interface RadioInputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label: string;
-  id: string;
-}
-
-export interface RequiredTextProps {
-  $required: boolean;
-}