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

package/src/common/checkbox/index.tsx

@@ -1,154 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-import styled from 'styled-components';
-
-interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
-  checked: boolean;
-  icon?: React.ReactNode;
-  imageSrc: string;
-  label: string;
-  enabled: boolean;
-  onClickCheckbox: (service: string) => void;
-}
-
-function Checkbox(props: CheckboxProps) {
-  const {
-    imageSrc,
-    label,
-    checked,
-    enabled = false,
-    onClickCheckbox,
-    ...rest
-  } = props;
-  return (
-    <MainContainer
-      $enabled={enabled}
-      $checked={checked}
-      onClick={() => onClickCheckbox(label)}
-    >
-      {/* Custom Checkbox */}
-      <CheckboxContainer>
-        <HiddenCheckbox type="checkbox" $enabled={enabled} {...rest} />
-        <CircleContainer $checked={checked} $enabled={enabled}>
-          <Circle $checked={checked} />
-        </CircleContainer>
-      </CheckboxContainer>
-      <InformationContainer>
-        <Image
-          src={imageSrc}
-          $checked={checked}
-          $enabled={enabled}
-          className="checkbox-img"
-        />
-        <Text $checked={checked} className="label">
-          {label?.replaceAll('_', ' ')}
-        </Text>
-      </InformationContainer>
-    </MainContainer>
-  );
-}
-
-const Image = styled.img<{ $checked: boolean; $enabled: boolean }>`
-  height: 28px;
-  width: 20px;
-  filter: ${props => (props.$checked ? 'grayscale(0)' : 'grayscale(1)')};
-  cursor: ${props => (props.$enabled ? 'pointer' : 'not-allowed')};
-`;
-
-const CircleContainer = styled.span<{ $checked: boolean; $enabled: boolean }>`
-  height: 20px;
-  width: 20px;
-  border: 1px solid ${props => (props.$checked ? '#feba30' : '#e0e2e7')};
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  cursor: ${props => (props.$enabled ? 'pointer' : 'not-allowed')};
-`;
-
-const Circle = styled.span<{ $checked: boolean }>`
-  height: 14px;
-  width: 14px;
-  background: ${props => (props.$checked ? '#feba30' : '#ffffff')};
-  border-radius: 50%;
-  display: inline-block;
-  transition: 0.2s ease all;
-`;
-
-const Text = styled.span<{ $checked: boolean }>`
-  color: ${props => (props.$checked ? '#3a3630' : 'rgba(58, 54, 48, 0.50)')};
-  font-family: 'lato', sans-serif;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-  text-transform: capitalize;
-`;
-
-const InformationContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  align-items: center;
-`;
-
-const CheckboxContainer = styled.div`
-  display: flex;
-`;
-
-const HiddenCheckbox = styled.input<{ $enabled: boolean }>`
-  border: 0;
-  height: 100%;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 100%;
-  opacity: 0;
-  /* cursor: pointer; */
-  cursor: ${props => (props.$enabled ? 'pointer' : 'not-allowed')};
-  top: 0;
-  left: 0;
-`;
-
-const MainContainer = styled.div<{ $enabled: boolean; $checked: boolean }>`
-  display: flex;
-  width: 130px;
-  height: 93px;
-  gap: 10px;
-  border-radius: 15px;
-  border: 1px solid ${props => (props.$checked ? '#cbc8c2' : '#e0e2e7')};
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  background: ${props => (props.$checked ? '#ffffff' : '#f8fafc')};
-  box-shadow: ${props =>
-    props.$checked ? '0px 4px 8px -2px rgba(16, 24, 40, 0.1)' : 'none'};
-  pointer-events: ${props => (props.$enabled ? 'visible' : 'none')};
-
-  /* &:hover {
-    border: 1px solid ${props => (props.$enabled ? '#cbc8c2' : '#e0e2e7')};
-    .checkbox-img {
-      filter: ${props => (props.$enabled ? 'grayscale(0)' : 'grayscale(1)')};
-    }
-  } */
-
-    ${props =>
-      props.$enabled &&
-      `&:hover {
-          border: 1px solid #cbc8c2;
-
-        .checkbox-img {
-          filter: grayscale(0);
-        }
-        
-        .label {
-          color: #3a3630;
-        }
-      }
-  `}
-`;
-
-export default Checkbox;

package/src/common/copy/CopyText.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { CopyIcon } from '../../assets/icons';
-import useCopyToClipboard from '../hooks/useCopyToClipboard';
-
-interface IProps {
-  text: string | number;
-}
-
-function CopyText(props: IProps) {
-  const copy = useCopyToClipboard();
-
-  return (
-    <IconContainer onClick={() => copy(props.text)}>
-      <CopyIcon fill="#6396e5" />
-    </IconContainer>
-  );
-}
-
-const IconContainer = styled.div`
-  cursor: pointer;
-`;
-
-export default CopyText;

package/src/common/custom-input/CustomInput.tsx

@@ -1,24 +0,0 @@
-import { Input } from '@bjsdistribution/dms-component-library';
-import React, { InputHTMLAttributes } from 'react';
-import styled from 'styled-components';
-
-function GenericInput(
-  props: InputHTMLAttributes<HTMLInputElement> & { hasError?: boolean }
-) {
-  return <StyledInput {...props} />;
-}
-
-const StyledInput = styled(Input)<{ hasError?: boolean }>`
-  height: 30px;
-  border: 1px solid ${({ hasError }) => (hasError ? 'red' : '#ccc')};
-  &:hover {
-    background: #ffffff;
-    outline: none;
-    border-color: #7b7874;
-  }
-  &:focus {
-    border-color: ${({ hasError }) => (hasError ? 'red' : '#888')};
-  }
-`;
-
-export default GenericInput;

package/src/common/custom-switch/index.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { options } from '../../components/fakeData';
-import SwitchSelector from 'react-switch-selector';
-import { notification } from 'antd';
-
-interface CustomSwitchSelectorProps {
-  onSwitchChange: (newValue: string) => void;
-}
-
-const CustomSwitchSelector: React.FC<CustomSwitchSelectorProps> = ({
-  onSwitchChange,
-}) => {
-  const initialSelectedIndex = options.findIndex(
-    ({ value }) => value === 'task'
-  );
-
-  const handleSwitchChange = (selectedOptionValue: unknown) => {
-    if (typeof selectedOptionValue === 'string') {
-      onSwitchChange(selectedOptionValue);
-    } else {
-      // console.error(
-      //   'Unexpected type for selectedOptionValue:',
-      //   typeof selectedOptionValue
-      // );
-
-      notification.error({
-        message: 'Error',
-        description:
-          `${typeof selectedOptionValue}` ||
-          'Unexpected type for selectedOptionValue.',
-      });
-    }
-  };
-
-  return (
-    <StyledSwitch>
-      <SwitchSelector
-        onChange={handleSwitchChange}
-        options={options}
-        initialSelectedIndex={initialSelectedIndex}
-        backgroundColor={'#cbc8c2'}
-        fontColor={'#f5f6fa'}
-        optionBorderRadius={30}
-      />
-    </StyledSwitch>
-  );
-};
-
-const StyledSwitch = styled.div`
-  width: 35%;
-  height: 40px;
-  .react-switch-selector-wrapper {
-    background: #777777;
-  }
-`;
-
-export default CustomSwitchSelector;

package/src/common/date-picker/CustomDatePicker.tsx

@@ -1,142 +0,0 @@
-import React from 'react';
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-import styled from 'styled-components';
-import DatePickerHeader from './header/DatePickerHeader';
-
-interface Props {
-  date: Date | undefined;
-  onSelect: (newDate: Date) => void;
-  type: string;
-  maxStartDate?: Date;
-  from: Date;
-  children?: React.ReactNode;
-}
-
-function CustomDatePicker({
-  date,
-  onSelect,
-  children,
-
-  type,
-  maxStartDate,
-  from,
-}: Props) {
-
-  return (
-    <Container>
-      {type === 'till' && (
-        <DatePicker
-          children={<div>{children}</div>}
-          inline
-          disabledKeyboardNavigation
-          showMonthDropdown
-          showPopperArrow={false}
-          selected={date}
-          maxDate={maxStartDate ? maxStartDate : new Date()}
-          minDate={from}
-          onChange={(date: Date) => onSelect(date)}
-          renderCustomHeader={props => <DatePickerHeader {...props} />}
-        />
-      )}
-      {type === 'from' && (
-        <DatePicker
-          children={<div>{children}</div>}
-          inline
-          showMonthDropdown
-          disabledKeyboardNavigation
-          showPopperArrow={false}
-          selected={date}
-          maxDate={maxStartDate ? maxStartDate : new Date()}
-          onChange={(date: Date) => onSelect(date)}
-          renderCustomHeader={props => <DatePickerHeader {...props} />}
-        />
-      )}
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  .react-datepicker__current-month {
-    font-weight: 500;
-    font-size: 18px;
-    color: white;
-  }
-  .react-datepicker__header {
-    background: none;
-    display: flex;
-    flex-direction: column;
-    border-bottom: none;
-  }
-  .react-datepicker {
-    padding: 0 30px;
-    border: none;
-    background: #1b2020 0% 0% no-repeat padding-box;
-    /* box-shadow: 0px 0px 30px #4158a266; */
-    border-radius: 10px;
-  }
-
-  .react-datepicker__day-names {
-    display: flex;
-    justify-content: space-between;
-    max-width: 390px;
-    margin-left: 15px; //Magic values to align
-  }
-  .react-datepicker__day-name {
-    color: rgba(255, 255, 255, 0.5);
-    font-weight: bold;
-    font-size: 13px;
-  }
-
-  .react-datepicker__day {
-    font-size: 18px;
-    width: 45px;
-    height: 45px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .react-datepicker__day:hover {
-    background: transparent linear-gradient(137deg, #55f5df 0%, #55d0f5 100%) 0%
-      0% no-repeat padding-box;
-    border-radius: 50%;
-  }
-  .react-datepicker__day,
-  .react-datepicker__time-name {
-    color: white;
-  }
-
-  .react-datepicker__week {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-  }
-
-  .react-datepicker__day--keyboard-selected {
-    background: transparent linear-gradient(137deg, #55f5df 0%, #55d0f5 100%) 0%
-      0% no-repeat padding-box;
-    border-radius: 50%;
-    color: black;
-    font-size: 18px;
-    font-weight: bold;
-  }
-  .react-datepicker__day--today {
-    color: #6396e5;
-    font-weight: normal;
-  }
-  .react-datepicker__day--selected {
-    background: transparent linear-gradient(137deg, #55f5df 0%, #55d0f5 100%) 0%
-      0% no-repeat padding-box;
-    border-radius: 50%;
-    color: black;
-    font-size: 18px;
-    font-weight: bold;
-  }
-  .react-datepicker__day--disabled {
-    opacity: 0.5;
-    background: transparent;
-    color: #fff;
-  }
-`;
-export default styled(CustomDatePicker)``;

package/src/common/date-picker/FilterByType.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import RangeDateFilter from './range-date-filter';
-import SingleDateFilter from './single-date-filter/SingleDateFilter';
-
-function FilterByType({
-  startDate,
-  setStartDate,
-  setEndDate,
-  endDate,
-  type,
-}: any) {
-  if (type === 'single') {
-    return (
-      <SingleDateFilter
-        startDate={startDate}
-        setStartDate={setStartDate}
-        setEndDate={setEndDate}
-      />
-    );
-  }
-  return (
-    <RangeDateFilter
-      startDate={startDate}
-      endDate={endDate}
-      setStartDate={setStartDate}
-      setEndDate={setEndDate}
-    />
-  );
-}
-
-export default styled(FilterByType)``;

package/src/common/date-picker/header/ClearDate.tsx

@@ -1,32 +0,0 @@
-import React, { PropsWithoutRef } from 'react';
-import styled from 'styled-components';
-import CloseIcon from '../../../assets/icons/CloseIcon';
-
-type Props = PropsWithoutRef<JSX.IntrinsicElements['div']>;
-
-function ClearDate(props: Props) {
-  return (
-    <Container {...props}>
-      <CloseIcon />
-      <Text>Clear date</Text>
-    </Container>
-  );
-}
-
-const Text = styled.span`
-  color: #a3a5a5;
-  font-size: 15px;
-  font-family: 'Lato', sans-serif;
-  text-decoration: underline;
-  color: inherit;
-  cursor: pointer;
-`;
-
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #a3a5a5;
-`;
-
-export default styled(ClearDate)``;

package/src/common/date-picker/header/DatePickerHeader.tsx

@@ -1,70 +0,0 @@
-import { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
-import styled, { css } from 'styled-components';
-import React from 'react';
-import MonthOrYearPicker from './MonthOrYearPicker';
-import Left from '../../../assets/icons/Leftarrow';
-import Right from '../../../assets/icons/Rightarrow';
-
-type Props = ReactDatePickerCustomHeaderProps;
-
-function DatePickerHeader(props: Props) {
-  return (
-    <Container>
-      <IconContainer
-        onClick={props.decreaseMonth}
-        $disabled={props.prevMonthButtonDisabled}
-      >
-        <Left />
-      </IconContainer>
-      <PickerContainer>
-        <MonthOrYearPicker
-          type={'month'}
-          date={props.date}
-          onSelect={(newMonthIndex: number) => props.changeMonth(newMonthIndex)}
-        />
-        <MonthOrYearPicker
-          type={'year'}
-          date={props.date}
-          onSelect={(newYear: number) => props.changeYear(newYear)}
-        />
-      </PickerContainer>
-      <Wrapper $disabled={props.nextMonthButtonDisabled}>
-        <IconContainer
-          onClick={props.increaseMonth}
-          $disabled={props.nextMonthButtonDisabled}
-        >
-          <Right />
-        </IconContainer>
-      </Wrapper>
-    </Container>
-  );
-}
-
-const DisabledArrow = css`
-  opacity: 0.3;
-  pointer-events: none;
-`;
-
-const Wrapper = styled.div<{ $disabled: boolean }>`
-  ${props => props.$disabled && 'cursor: not-allowed'};
-`;
-
-const IconContainer = styled.div<{ $disabled: boolean }>`
-  ${props => props.$disabled && DisabledArrow};
-`;
-
-const PickerContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 186px;
-  max-width: 186px;
-`;
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-`;
-
-export default styled(DatePickerHeader)``;

package/src/common/date-picker/header/DatePickerHeaderDropdown.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-
-interface Props {
-  options: string[];
-  selected?: string;
-  onSelect: (option: number) => void;
-  useIndex?: boolean;
-}
-function DatePickerHeaderDropdown({
-  options,
-  selected,
-  useIndex,
-  onSelect,
-}: Props) {
-  return (
-    <Container>
-      {options.map((option, index) => (
-        <Option
-          key={option}
-          onClick={() => {
-            if (useIndex) {
-              onSelect(index);
-            } else {
-              onSelect((option as any) as number);
-            }
-          }}
-          $selected={selected === option}
-        >
-          {option}
-        </Option>
-      ))}
-    </Container>
-  );
-}
-
-const SelectedStyle = css`
-  background: rgba(117, 133, 136, 0.15);
-  font-weight: bold;
-`;
-
-const Option = styled.div<{ $selected: boolean }>`
-  padding: 10px;
-  font-size: 15px;
-  color: #3a3630;
-
-  ${props => props.$selected && SelectedStyle};
-`;
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-  max-height: 325px;
-  border-radius: 6px;
-  background: white;
-  padding: 5px;
-  position: absolute;
-  overflow: auto;
-  width: 185px;
-  z-index: 10;
-  top: 50px;
-`;
-export default DatePickerHeaderDropdown;

package/src/common/date-picker/header/Header.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PromptOrClearDate from './PromptOrClearDate';
-
-function Header({ startDate, setStartDate }: any) {
-  const clearDate = () => setStartDate(undefined);
-
-  return (
-    <PromptOrClearDate
-      date={startDate}
-      clearDate={clearDate}
-      promptText="Please select a date"
-    />
-  );
-}
-
-export default styled(Header)``;