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

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

@@ -1,106 +0,0 @@
-import { format } from 'date-fns';
-import React, { useMemo, useState } from 'react';
-import styled from 'styled-components';
-import DatePickerHeaderDropdown from './DatePickerHeaderDropdown';
-import ChevronDownIcon from '../../../assets/icons/ChevronDownIcon';
-
-type MonthOrYear = 'month' | 'year';
-interface Props {
-  type: MonthOrYear;
-  date: Date;
-  onSelect: (newValue: number) => void;
-}
-
-const months = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-];
-
-const generateYears = (): number[] => {
-  const years: any = [];
-  const currentYear = new Date().getFullYear();
-  for (let i = 1990; i < currentYear + 1; i++) {
-    years.push(i);
-  }
-  return years.reverse();
-};
-
-function MonthOrYearPicker({ type, date, onSelect }: Props) {
-  const [open, setOpen] = useState(false);
-  const toggle = () => setOpen(old => !old);
-
-  const current = useMemo(() => {
-    if (type === 'month') {
-      return format(date, 'LLLL');
-    } else if (type === 'year') {
-      return format(date, 'yyyy');
-    }
-    return `Cannot find ${type}`;
-  }, [date, type]);
-
-  const options: string[] = useMemo(() => {
-    switch (type) {
-      case 'month':
-        return months;
-      case 'year':
-        return generateYears().map(year => `${year}`);
-      default:
-        return [];
-    }
-  }, [type]);
-
-  return (
-    <Container onClick={toggle}>
-      <Current>{current}</Current>
-      <div>
-        {' '}
-        {open ? (
-          <ChevronDownIcon fill="#C2C6CE" />
-        ) : (
-          <ChevronUpIcon fill="#C2C6CE" />
-        )}{' '}
-      </div>
-      {open && (
-        <DatePickerHeaderDropdown
-          options={options}
-          selected={current}
-          onSelect={onSelect}
-          useIndex={type === 'month'}
-        />
-      )}
-    </Container>
-  );
-}
-
-const ChevronUpIcon = styled(ChevronDownIcon)`
-  transform: rotate(180deg);
-  cursor: pointer;
-`;
-
-const Current = styled.span`
-  color: white;
-  font-weight: 500;
-  font-size: 18px;
-`;
-
-const Container = styled.div`
-  display: flex;
-  margin-right: 20px;
-  align-items: center;
-  gap: 10px;
-  cursor: pointer;
-  color: rgba(255, 255, 255, 0.4);
-  position: relative;
-`;
-
-export default MonthOrYearPicker;

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

@@ -1,60 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-import ClearDate from './ClearDate';
-
-import { format } from 'date-fns';
-import { ReactElement, useMemo } from 'react';
-
-interface Props {
-  date?: Date;
-  clearDate: () => void;
-  promptText: string | ReactElement;
-}
-
-function PromptOrClearDate({ date, clearDate, promptText }: Props) {
-  const selectedDate = useMemo(() => {
-    if (!date) {
-      return '';
-    }
-    return format(date, 'dd MMMM yyyy');
-  }, [date]);
-
-  return (
-    <Container>
-      {date && (
-        <>
-          <SelectedDate>{selectedDate}</SelectedDate>
-          <ClearDate onClick={clearDate} />
-        </>
-      )}
-      {!date && <Prompt>{promptText}</Prompt>}
-    </Container>
-  );
-}
-
-const SelectedDate = styled.span`
-  font-size: 15px;
-  font-weight: bold;
-  font-family: 'Lato', sans-serif;
-  color: #55d5f2;
-`;
-
-export const Prompt: any = styled.span`
-  color: #feba30;
-  font-size: 15px;
-  font-family: 'Lato', sans-serif;
-  font-weight: bold;
-  text-align: center;
-  width: 100%;
-`;
-
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 90px;
-  padding: 0 30px;
-`;
-
-export default PromptOrClearDate;

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

@@ -1,217 +0,0 @@
-import { motion } from 'framer-motion';
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import DateLegends from './legend/index';
-import Modal from './modal/Modal';
-
-import FilterByType from './FilterByType';
-
-type Props = {
-  close: () => void;
-  startDate: Date | undefined;
-  endDate: Date | undefined;
-  setStartDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
-  setEndDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
-  dateFieldName?: string;
-  type: 'single' | 'range';
-  onApply: (input: boolean) => void;
-  onlySingleDatePicker?: boolean;
-};
-
-const DatePicker = ({
-  startDate,
-  endDate,
-  close,
-  setStartDate,
-  setEndDate,
-  type,
-  onApply,
-  onlySingleDatePicker = false,
-}: Props) => {
-  const [ready, setReady] = useState(false);
-
-  useEffect(() => {
-    if (!startDate && !endDate) {
-      setReady(false);
-    } else if (startDate && !endDate && type === 'range') {
-      setReady(false);
-    } else {
-      setReady(true);
-    }
-  }, [startDate, endDate, type]);
-
-  return (
-    <DateModalWrapper>
-      <Container
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 100 }}
-        exit={{ height: 0, opacity: 0 }}
-      >
-        <InnerUI type={type}>
-          <FilterByType
-            {...{
-              startDate,
-              endDate,
-              setStartDate,
-              setEndDate,
-              type,
-            }}
-          />
-          <DateLegends
-            className={type === 'single' ? 'mb30' : 'moveDateLegends'}
-          />
-          <Footer>
-            <CloseButton onClick={close}>Close</CloseButton>
-            {onlySingleDatePicker ? (
-              <ActionButton
-                ready={ready}
-                singleDatePicker={onlySingleDatePicker}
-                onClick={() => onApply(ready)}
-              >
-                APPLY
-              </ActionButton>
-            ) : (
-              <ActionButton ready={ready} onClick={() => onApply(ready)}>
-                {ready ? (
-                  'APPLY'
-                ) : (
-                  <div>
-                    <img
-                      src="https://bjs-static.s3.eu-west-2.amazonaws.com/twilio-flex/general/shuffle.svg"
-                      alt="shuffle"
-                      height="13px"
-                    />
-                    {type === 'single' ? 'Date range' : 'Single'}
-                  </div>
-                )}
-              </ActionButton>
-            )}
-          </Footer>
-        </InnerUI>
-      </Container>
-    </DateModalWrapper>
-  );
-};
-
-const ActionButton = styled.div<{
-  ready?: Boolean;
-  singleDatePicker?: Boolean;
-}>`
-  cursor: pointer;
-  ${props =>
-    !props.ready &&
-    props.singleDatePicker &&
-    `pointer-events: none; opacity: 0.5;`}
-  color: ${props => (props.ready ? '#1B2020' : '#ccdae2')};
-  width: 182px;
-  height: 46px;
-  font-weight: ${props => (props.ready ? 'bolder' : '400')};
-  background: ${props => (props.ready ? '#FEBA30' : '#40454a')};
-  border-radius: 6px;
-
-  font-family: 'Lato', sans-serif;
-  font-weight: 900;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &:hover {
-    background: #ffffff 0% 0% no-repeat padding-box;
-    color: #1b2020;
-  }
-  div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    font-weight: 400;
-    font-family: 'Lato', sans-serif;
-  }
-`;
-
-const CloseButton = styled.div`
-  cursor: pointer;
-  color: #8d9090;
-  width: 182px;
-  height: 46px;
-
-  border: 1px solid #40454a;
-  border-radius: 6px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover {
-    border: 1px solid #ffffff;
-    color: #ffffff;
-  }
-`;
-
-const Footer = styled.div`
-  display: flex;
-  padding: 0px 30px 40px 30px;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const InnerUI = styled.div<{ type: string }>`
-  position: relative;
-  border: none;
-  background: #1b2020 0% 0% no-repeat padding-box;
-  box-shadow: 0px 0px 30px #1f242480;
-  border-radius: 10px;
-  opacity: 1;
-
-  .mb30 {
-    margin-bottom: 30px;
-  }
-
-  .moveDateLegends {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 52.5px;
-  }
-  .head {
-    font-weight: bolder;
-    text-transform: uppercase;
-    font-size: 22px;
-    font-family: 'Lato', sans-serif;
-    color: #3a3630;
-    text-align: center;
-    margin-top: 30px;
-  }
-  .lowerblock {
-    background: #f5f5f4;
-    padding: 30px 40px 20px 40px;
-    display: flex;
-
-    .clients {
-      display: flex;
-      justify-content: center;
-    }
-  }
-`;
-
-const DateModalWrapper = styled(Modal)`
-  justify-content: center;
-  align-items: center;
-  display: flex;
-
-  form {
-    height: 100%;
-    width: 100%;
-  }
-`;
-
-export const Container: any = styled(motion.div)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #ffffff 0% 0% no-repeat padding-box;
-  box-shadow: 0px 3px 40px #00000029;
-  border-radius: 10px;
-`;
-
-export default DatePicker;

package/src/common/date-picker/legend/DateLegend.tsx

@@ -1,36 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-
-interface Props {
-  color: string;
-  label: string;
-}
-
-function DateLegend({ color, label }: Props) {
-  return (
-    <Container>
-      <Palette color={color} />
-      <Label>{label}</Label>
-    </Container>
-  );
-}
-
-const Palette = styled.div<{ color: string }>`
-  height: 14px;
-  width: 14px;
-  border-radius: 50%;
-  background: ${props => props.color};
-`;
-
-const Label = styled.span`
-  font-size: 12px;
-  color: #ababab;
-`;
-
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
-
-export default styled(DateLegend)``;

package/src/common/date-picker/legend/index.tsx

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-import DateLegend from './DateLegend';
-
-const SELECTED_DATE_COLOR = `linear-gradient(137deg, #55f5df 0%, #55d0f5 100%)`;
-const TODAYS_DATE_COLOR = `#6396E5`;
-
-function DateLegends(props: any) {
-  return (
-    <Container className={props.className}>
-      <DateLegend label="Selected date" color={SELECTED_DATE_COLOR} />
-      <DateLegend label="Today's date" color={TODAYS_DATE_COLOR} />
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 40px;
-`;
-
-export default styled(DateLegends)``;

package/src/common/date-picker/modal/Modal.tsx

@@ -1,35 +0,0 @@
-import { motion } from 'framer-motion';
-import React from 'react';
-import styled from 'styled-components';
-
-interface ModalProps {
-  children: React.ReactNode;
-}
-
-function Modal(props: ModalProps) {
-  return (
-    <Backdrop
-      {...(props as any)}
-      layout
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-    >
-      {props.children}
-    </Backdrop>
-  );
-}
-
-const Backdrop = styled(motion.div)`
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 500;
-
-  background-color: rgba(51, 51, 51, 0.3);
-  backdrop-filter: blur(1px);
-`;
-
-export default styled(Modal)``;

package/src/common/date-picker/range-date-filter/RangeDates.tsx

@@ -1,102 +0,0 @@
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
-import CustomDatePicker from '../CustomDatePicker';
-import { Prompt } from '../header/PromptOrClearDate';
-import SingleRangeDateItem from './SingleRangeDateItem';
-
-function FromDate({ startDate, setFrom, setEnd }: any) {
-  useEffect(() => {
-    setFrom(startDate);
-  }, []);
-
-  return (
-    <SingleRangeDateItem
-      from={startDate}
-      date={startDate}
-      onSelect={(date: any) => {
-        setFrom(date);
-        setEnd(undefined);
-      }}
-      type="from"
-    />
-  );
-}
-
-function TillDate({ setTill, startDate, endDate }: any) {
-  const isWaiting = !!!startDate;
-
-  useEffect(() => {
-    setTill(endDate);
-  }, []);
-
-  return (
-    <TillDateItem
-      from={startDate}
-      date={endDate}
-      onSelect={setTill}
-      type="till"
-      $waiting={isWaiting}
-    >
-      {isWaiting && <AwaitingFrom />}
-    </TillDateItem>
-  );
-}
-
-function AwaitingFrom() {
-  return (
-    <AwaitingContainer>
-      <AwaitingText>
-        Awaiting{' '}
-        <b>
-          <i>FROM</i>
-        </b>{' '}
-        date
-      </AwaitingText>
-    </AwaitingContainer>
-  );
-}
-
-const AwaitingContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  width: calc(100% - 60px);
-  height: 100%;
-  background: #1b2020;
-  opacity: 0.95;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;
-const AwaitingText = styled.span`
-  font-weight: 300;
-  opacity: 0.65;
-  font-family: 'Lato', sans-serif;
-  font-size: 22px;
-  color: #fefefe;
-
-  & > b > i {
-    font-family: 'Lato', sans-serif;
-    font-weight: bold;
-    font-style: italic;
-  }
-`;
-
-const TillDateItem = styled(SingleRangeDateItem)<{ $waiting: boolean }>`
-  ${CustomDatePicker} {
-    //   filter: blur(1px);
-    ${props => props.$waiting && 'cursor: not-allowed;'};
-  }
-
-  ${Prompt} {
-    ${props => props.$waiting && 'visibility: hidden;'};
-  }
-  ${AwaitingText} {
-    //  filter: unset;
-  }
-`;
-
-export { FromDate, TillDate };
-

package/src/common/date-picker/range-date-filter/Seperator.tsx

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-import ChevronRight from '../../../assets/icons/ChevronRight';
-
-function Seperator() {
-  return (
-    <Container>
-      <ChevronRight/>
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-`;
-
-export default styled(Seperator)``;

package/src/common/date-picker/range-date-filter/SingleRangeDateItem.tsx

@@ -1,62 +0,0 @@
-import styled from 'styled-components';
-import PromptOrClearDate from '../header/PromptOrClearDate';
-import React, { useMemo } from 'react';
-import CustomDatePicker from '../CustomDatePicker';
-
-interface Props {
-  date: Date | undefined;
-  type: 'from' | 'till';
-  onSelect: (newDate: Date | undefined) => void;
-  from: Date;
-  children?: React.ReactNode;
-}
-
-function SingleRangeDateItem({ date, type, onSelect, children, from }: Props) {
-  const clearDate = () => onSelect(undefined);
-
-  const promptText = useMemo(() => {
-    if (type === 'from') {
-      return (
-        <span>
-          Please select a <Italic>{type.toUpperCase()}</Italic> date to filter
-        </span>
-      );
-    }
-    return (
-      <span>
-        Please select a <Italic>TO</Italic> date
-      </span>
-    );
-  }, [type]);
-
-  const today = new Date();
-
-  return (
-    <Container>
-      <PromptOrClearDate
-        clearDate={clearDate}
-        date={date}
-        promptText={promptText}
-      />
-      <CustomDatePicker
-        from={from}
-        maxStartDate={today}
-        type={type}
-        date={date}
-        onSelect={onSelect}
-        children={children}
-      />
-    </Container>
-  );
-}
-
-const Italic = styled.i`
-  font-style: italic;
-`;
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-`;
-export default SingleRangeDateItem;

package/src/common/date-picker/range-date-filter/index.tsx

@@ -1,47 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-import Seperator from './Seperator';
-import { FromDate, TillDate } from './RangeDates';
-
-type Props = {
-  startDate: any;
-  endDate: any;
-  setStartDate: any;
-  setEndDate: any;
-};
-
-function RangeDateFilter({
-  setStartDate,
-  setEndDate,
-  startDate,
-  endDate,
-}: Props) {
-  return (
-    <Container>
-      <FromDate
-        startDate={startDate}
-        setFrom={setStartDate}
-        setEnd={setEndDate}
-      />
-      <Seperator />
-      <TillDate
-        startDate={startDate}
-        setFrom={setStartDate}
-        endDate={endDate}
-        setTill={setEndDate}
-      />
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  justify-content: space-between;
-  gap: 20px;
-  padding: 0px;
-  align-items: center;
-  ${Seperator} {
-    // transform: translateX(-50%);
-  }
-`;
-export default RangeDateFilter;