@bjsdistribution/dms-client-return 0.0.1

package/src/common/infiniteScrolling.tsx

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

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

@@ -0,0 +1,57 @@
+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; 
+}
+
+function OrderActionModal(props: ActionModalProps) {
+  return (
+    <BackgroundModal>
+      <MainContainer>
+        <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>
+  );
+}
+const MainContainer = styled.div`
+  min-height: 30vh;
+  max-height: 80vh;
+  /* overflow: auto; */
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0px 20px 24px -4px #10182814;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  align-items: center;
+  justify-content: space-between;
+  overflow-x: hidden;
+`;
+
+export default OrderActionModal;

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

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

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

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

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

@@ -0,0 +1,114 @@
+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;
+  margin-bottom: 7px;
+`;
+
+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: 32px;
+  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

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

package/src/common/scrollbar/index.tsx

@@ -0,0 +1,39 @@
+import Scrollbars from 'react-custom-scrollbars-2';
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  children: React.ReactNode;
+  thumbHeight?: number;
+}
+
+function CustomScrollBar(props: IProps) {
+  const { children, thumbHeight = 66 } = props;
+  return (
+    <Scrollbars
+      thumbSize={thumbHeight}
+      renderTrackHorizontal={props => <TrackHorizontal {...props} />}
+      renderView={props => <View {...props} />}
+      renderThumbVertical={props => <ThumbVertical {...props} />}
+    >
+      {children}
+    </Scrollbars>
+  );
+}
+
+const ThumbVertical = styled.div`
+  background-color: #586164;
+  border-radius: 66px;
+  width: 2px !important; // to overide styles
+  margin-top: 60px;
+`;
+
+const View = styled.div`
+  overflow-x: hidden;
+`;
+
+const TrackHorizontal = styled.div`
+  display: none;
+`;
+
+export default CustomScrollBar;

package/src/common/services-slider/ServiceSlider.tsx

@@ -0,0 +1,58 @@
+import { Switch } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { getIcon } from './helper';
+
+interface SliderProps {
+  serviceName: string;
+  serviceId: number;
+  isSelected: boolean;
+  toggle: (id: number) => void;
+}
+
+function ServiceSlider(props: SliderProps) {
+
+  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    props.toggle(props.serviceId);
+  };
+  
+  return (
+    <Container onClick={() => props.toggle(props.serviceId)}>
+      <ServiceIcon src={getIcon(props.serviceId)} />
+      <ServiceName>{props.serviceName}</ServiceName>
+      {/* to stop event propagation */}
+      <div onClick={onClick}>
+        <Switch
+          checked={props.isSelected}
+          name={props.serviceName}
+          onChange={() => {}}
+        />
+      </div>
+    </Container>
+  );
+}
+
+const ServiceName = styled.span`
+  color: #6a7378;
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  text-transform: capitalize;
+`;
+
+const ServiceIcon = styled.img`
+  min-width: 28px;
+  height: 28px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  cursor: pointer;
+  flex: 1;
+`;
+
+export default ServiceSlider;

package/src/common/services-slider/helper.ts

@@ -0,0 +1,26 @@
+const baseURL = "/assets/images/";
+
+// export type ServiceOffered =
+//   | "Assemble"
+//   | "Take Packaging Away"
+//   | "Disassemble"
+//   | "Collect Disposal"
+//   | "Unpack Items";
+
+export const paths: Record<number, string> = {
+  1: 'assembly.svg', //1
+  2: 'disassembly.svg', //2
+  3: 'unpack_items.svg', //3
+  4: 'packaging_removal.svg', //4
+  5: 'collect_disposal.svg', //5
+};
+
+export const getSubPath = (input: number): string => {
+  const result = paths[input];
+  return result;
+};
+
+export const getIcon = (input: number): string => {
+  const subPath = getSubPath(input);
+  return `${baseURL}${subPath}`;
+};

package/src/common/style.ts

@@ -0,0 +1,24 @@
+
+//   const Left = styled.div`
+//     font-family: 'lato', sans-serif;
+//     font-size: 14px;
+//     font-weight: 500;
+//     line-height: 20px;
+//     color: #8e8a85;
+//   `;
+
+//   const Right = styled.div`
+//     display: flex;
+//     gap: 10px;
+//     align-items: center;
+//   `;
+
+//   const TableFooter = styled.div`
+//     padding: 18px 24px;
+//     background: #ffffff;
+//     display: flex;
+//     justify-content: space-between;
+//     align-items: center;
+//     border-bottom-left-radius: 25px;
+//     border-bottom-right-radius: 25px;
+//   `;