@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,217 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,47 @@
+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;

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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import ChevronUp from '../../assets/icons/ChevronUp';
+
+interface IProps {
+  collapsedContent: React.ReactNode;
+  children: React.ReactNode;
+}
+
+function CollapsableForm(props: IProps) {
+  const [isExpanded, setIsExpanded] = useState<boolean>(true);
+  return (
+    <MainContainer>
+      <CardHeader>
+        <CollapsedContent>
+          {props.collapsedContent}
+          <Container>
+            <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: 15px;
+  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

@@ -0,0 +1,17 @@
+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;