@bjsdistribution/dms-client-return 0.0.1

package/src/components/order-view/order-actions/types.ts

@@ -0,0 +1,98 @@
+export interface Department {
+  id: number;
+  name: string;
+}
+
+interface TaskTypeExtended {
+  id: number;
+  department_id: number;
+  type: string;
+  is_active: boolean;
+}
+
+interface TaskCategory {
+  id: number;
+  category: string;
+}
+
+interface TaskSubCategory {
+  id: number;
+  sub_category: string;
+  category_id: number;
+}
+
+export interface TaskPriority {
+  id: number;
+  name: string;
+}
+
+export interface allTypes {
+  department: Department[];
+  task_categories: TaskCategory[];
+  task_sub_categories: TaskSubCategory[];
+  tasks_priority: TaskPriority[];
+  tasks_types: TaskTypeExtended[];
+}
+
+//create-task
+export interface CreateTaskPayload {
+  details: string;
+  task_type_id?: number | null;
+  task_categories_id: number | null;
+  task_subcategories_id: number | null;
+  task_priority_id: number | string | null;
+  task_status_id: number | null;
+  is_private?: boolean;
+  due_datetime: any;
+  order_id: number | null;
+  customer_id: number | null;
+  associated_object_id: number | null;
+  associated_object_name: string | null;
+  provider_id: number | null;
+  flag_attribute: string;
+  completion_note: string;
+  resolved_by: string;
+  sla: any;
+  description?: string;
+  assigned_to: number | null;
+  legacy_id: number | null;
+}
+
+//create reminder
+export interface CreateReminderPayload {
+  due: any;
+  details: string;
+  assigned_to: number | null;
+  status_id: number | null;
+  task_priority_id: number | null;
+  department_id: number | null;
+  task_categories_id: number | null;
+  task_subcategories_id: number | null;
+  order_id: number | null;
+}
+
+export interface SingleFlagPayload {
+  description?: string;
+  task_type_id?: number;
+  task_priority_id?: number;
+  is_resolved: boolean;
+  id: number | null;
+  is_private?: boolean;
+}
+
+export type StatusType = 'AD' | 'SD';
+
+export interface SingleResolvedPayload {
+  is_resolved: boolean;
+  id: number | null;
+}
+
+//update Reminder Payload
+export interface UpdateReminderPayload {
+  details: string;
+  id: number | null;
+  assigned_to: number | null;
+  due_date: any;
+  due_time: any;
+  status_id: number | null;
+}

package/src/components/order-view/order-actions/utils.ts

@@ -0,0 +1,58 @@
+import { format } from 'date-fns';
+import { StatusType } from './types';
+
+interface Option {
+  id: string;
+  name?: string;
+  type?: string;
+  category?: string;
+  color?: string;
+}
+
+//to change data into options
+export const transformOption = (option: Option, key: keyof Option) => {
+  const rawLabel = option[key] ? String(option[key]) : '';
+  const formattedLabel = rawLabel.replace(/_/g, ' ');
+  const capitalizedLabel =
+    formattedLabel.charAt(0).toUpperCase() + formattedLabel.slice(1);
+  return {
+    label: capitalizedLabel,
+    value: option.id,
+  };
+};
+
+export const getStatusColor = (status: StatusType) => {
+  switch (status) {
+    case 'AD':
+      return 'linear-gradient(180deg, #DC69AE 0%, #E95252 100%)';
+    case 'SD':
+      return 'linear-gradient(180deg, #B6DC69 0%, #57DB7A 100%)';
+    default:
+      return 'black';
+  }
+};
+
+//date format
+export function formatDate(dateString: any) {
+  if (dateString) {
+    const date = new Date(dateString);
+
+    if (!isNaN(date.getTime())) {
+      return format(date, 'MM/dd/yyyy HH:mm:ss');
+    }
+  }
+  return 'Invalid date';
+}
+
+//with colors
+export const priorityData = [
+  { id: 1, name: 'Low', color: '#6396E5' },
+  { id: 2, name: 'Medium', color: '#FEBA30' },
+  { id: 3, name: 'High', color: '#E95252' },
+];
+
+export const snoozeData = [
+  { id: 1, name: '15m' },
+  { id: 2, name: '30m' },
+  { id: 3, name: '1h' },
+];

package/src/components/order-view/order-details/collapsed-content/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import styled from 'styled-components';
+import { RicherSoundsLogo } from '../../../../assets/icons';
+import { displayValueOrNA } from '@bjsdistribution/dms-component-library';
+import { useCustomerDetails } from '../../store';
+
+function CollapsedContent() {
+  const [CustomerData] = useCustomerDetails();
+  const data = CustomerData;
+
+  return (
+    <Container>
+      <RicherSoundsLogo />
+      <Wrapper>
+        <CustomerName>{displayValueOrNA(data?.name)}</CustomerName>
+        <TradingNameContainer>
+          <TradingNameHeader>Trading Name:</TradingNameHeader>
+          <TradingName>{displayValueOrNA(data?.account_number)}</TradingName>
+        </TradingNameContainer>
+      </Wrapper>
+    </Container>
+  );
+}
+const Wrapper = styled.div``;
+
+const Container = styled.div`
+  display: flex;
+  gap: 15px;
+`;
+
+const TradingNameContainer = styled.div`
+  display: flex;
+  gap: 5px;
+`;
+
+const TradingName = styled.span`
+  color: #6396e5;
+  font-family: 'Lato', sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+`;
+
+const TradingNameHeader = styled.span`
+  color: #aea9a1;
+  font-family: 'Lato', sans-serif;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 145.455% */
+`;
+
+const CustomerName = styled.span`
+  color: #3a3630;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 24px;
+`;
+
+export default CollapsedContent;

package/src/components/order-view/order-details/common/Header.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface HeaderProps {
+  label: string;
+}
+
+function Header(props: HeaderProps) {
+  return (
+    <Container>
+      <Text>{props.label}</Text>
+    </Container>
+  );
+}
+
+const Text = styled.span`
+  border-bottom: 1px solid #feba30;
+  color: #3a3630;
+  font-family: 'Roboto', 'sans-serif';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  width: fit-content;
+  text-transform: uppercase;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+
+export default Header;

package/src/components/order-view/order-details/expanded-content/customer-section/RecipientName.tsx

@@ -0,0 +1,71 @@
+import { Input, Label } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import CopyText from '../../../../../common/copy/CopyText';
+import { useOrderDetails } from '../../../store';
+
+function RecipientName() {
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const orderRecipient = orderDetails?.order_recipient;
+
+  const showCopyIcon =
+    orderRecipient?.recipient_name !== undefined &&
+    orderRecipient?.recipient_name!?.length > 0;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    const updatedOrderRecipient = {
+      ...(orderRecipient === null
+        ? { recipient_name: val }
+        : { ...orderRecipient, recipient_name: val }),
+    };
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        order_recipient: updatedOrderRecipient,
+      };
+    });
+  };
+
+  return (
+    <Container>
+      <Wrapper>
+        <Label label="Recipient Name" htmlFor="recipient-name" />
+        {showCopyIcon && <CopyText text={orderRecipient?.recipient_name!} />}
+      </Wrapper>
+      <InputStyled
+        name="recipient-name"
+        type="text"
+        placeholder="Recipient Name"
+        value={orderRecipient?.recipient_name || ''}
+        onChange={onChange}
+        autoComplete="off"
+      />
+    </Container>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+const InputStyled = styled(Input)`
+  /* Hide autofill suggestions in Safari */
+  &:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0 100px white inset;
+    -webkit-text-fill-color: black;
+  }
+
+  &:-webkit-autofill::first-line {
+    font-family: 'inherit';
+    font-size: inherit;
+  }
+`;
+export default RecipientName;

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/CallCustomer.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import React from 'react';
+import { FlexCallIcon, SpokePhoneIcon } from '../../../../../../assets/icons';
+
+function CallCustomer() {
+  return (
+    <Container>
+      <FlexCallIcon />
+      <SpokePhoneIcon />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  gap: 7px;
+`;
+
+export default CallCustomer;

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactEmail.tsx

@@ -0,0 +1,79 @@
+import { Input, Label } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import CopyText from '../../../../../../common/copy/CopyText';
+import { errorAtom, useAtom, useOrderDetails } from '../../../../store';
+
+function ContactEmail() {
+  const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const [errors, setErrors] = useAtom(errorAtom);
+  const orderRecipient = orderDetails?.order_recipient;
+
+  const showCopyIcon =
+    orderRecipient?.contact_email !== undefined &&
+    orderRecipient?.contact_email !== null &&
+    orderRecipient?.contact_email?.length > 0;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    validateInput(val);
+    const updatedOrderRecipient = {
+      ...(orderRecipient === null
+        ? { contact_email: val }
+        : { ...orderRecipient, contact_email: val }),
+    };
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        order_recipient: updatedOrderRecipient,
+      };
+    });
+  };
+
+  const validateInput = (value: string) => {
+    const isValid = emailRegex.test(value);
+    setErrors(prev => ({
+      ...prev,
+      emailError: isValid ? '' : 'Please enter a valid Email Address',
+    }));
+  };
+
+  return (
+    <Container>
+      <Wrapper>
+        <Label label="Email" htmlFor="email-id" />
+        {showCopyIcon && <CopyText text={orderRecipient?.contact_email!} />}
+      </Wrapper>
+      <Input
+        name="email-id"
+        type="email"
+        placeholder="Email"
+        value={orderRecipient?.contact_email || ''}
+        onChange={onChange}
+      />
+      {errors.emailError && <ErrorText>{errors.emailError}</ErrorText>}
+    </Container>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+const ErrorText = styled.span`
+  color: red;
+  font-size: 0.85rem;
+  margin-top: 4px;
+`;
+
+export default ContactEmail;

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactHome.tsx

@@ -0,0 +1,92 @@
+import { Input, Label } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import CopyText from '../../../../../../common/copy/CopyText';
+import { useOrderDetails } from '../../../../store';
+import { handleKeyDown } from '../../../../utils';
+// import CallCustomer from './CallCustomer';
+
+// const LANDLINE_REGEX = /^\(?(?:(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?\(?(?:0\)?[\s-]?\(?)?|0)(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}|\d{3}\)?[\s-]?\d{3}[\\s-]?\d{3,4}|\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3})|\d{5}\)?[\s-]?\d{4,5}|8(?:00[\s-]?11[\s-]?11|45[\s-]?46[\s-]?4\d))(?:(?:[\s-]?(?:x|ext\.?\s?|\#)\d+)?)$/;
+
+function ContactHome() {
+  // Show call icons only if number is valid
+  // show copy icon if there is input value
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const orderRecipient = orderDetails?.order_recipient;
+
+  const showCopyIcon =
+    orderRecipient?.contact_home !== undefined &&
+    orderRecipient?.contact_home !== null &&
+    orderRecipient?.contact_home?.length > 0;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    const updatedOrderRecipient = {
+      ...(orderRecipient === null
+        ? { contact_home: val }
+        : { ...orderRecipient, contact_home: val }),
+    };
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        order_recipient: updatedOrderRecipient,
+      };
+    });
+  };
+  return (
+    <MainContainer>
+      <Wrapper>
+        <Label label="Contact Home" htmlFor="contact-home" />
+        {showCopyIcon && <CopyText text={orderRecipient?.contact_home!} />}
+      </Wrapper>
+      <InputContainer>
+        <CustomInput
+          name="contact-home"
+          type="text"
+          placeholder="Home Number"
+          onKeyDown={handleKeyDown}
+          value={orderRecipient?.contact_home || ''}
+          onChange={onChange}
+        />
+        {/* <CallCustomer /> */}
+      </InputContainer>
+    </MainContainer>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+const CustomInput = styled(Input)`
+  width: 80%;
+  // @media (max-width: 1024px) {
+  //   width: 80%;
+  // }
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &:focus-visible {
+    outline: none;
+  }
+`;
+
+const InputContainer = styled.div`
+  display: flex;
+  gap: 7px;
+  align-items: center;
+`;
+
+const MainContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default ContactHome;

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactMobile.tsx

@@ -0,0 +1,89 @@
+import { Input, Label } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import CopyText from '../../../../../../common/copy/CopyText';
+import CallCustomer from './CallCustomer';
+import { useOrderDetails } from '../../../../store';
+import { handleKeyDown } from '../../../../utils';
+// const MOBILE_REGEX = /^(\+44\s?7\d{3}|\(?07\d{3}\)?)\s?\d{3}\s?\d{3}$/;
+
+function ContactMobile() {
+  // Show call icons only if number is valid
+  // show copy icon if there is input value
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const orderRecipient = orderDetails?.order_recipient;
+
+  const showCopyIcon =
+    orderRecipient?.contact_mobile !== undefined &&
+    orderRecipient?.contact_mobile !== null &&
+    orderRecipient?.contact_mobile?.length > 0;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    const updatedOrderRecipient = {
+      ...(orderRecipient === null
+        ? { contact_mobile: val }
+        : { ...orderRecipient, contact_mobile: val }),
+    };
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        order_recipient: updatedOrderRecipient,
+      };
+    });
+  };
+
+  return (
+    <Container>
+      <Wrapper>
+        <Label label="Contact Mobile" htmlFor="contact-work" />
+        {showCopyIcon && <CopyText text={orderRecipient?.contact_mobile!} />}
+      </Wrapper>
+      <InputContainer>
+        <CustomInput
+          name="contact-work"
+          type="text"
+          placeholder="Mobile Number"
+          onKeyDown={handleKeyDown}
+          value={orderRecipient?.contact_mobile || ''}
+          onChange={onChange}
+        />
+        <CallCustomer />
+      </InputContainer>
+    </Container>
+  );
+}
+
+const InputContainer = styled.div`
+  display: flex;
+  gap: 7px;
+  align-items: center;
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+const CustomInput = styled(Input)`
+  width: 80%;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &:focus-visible {
+    outline: none;
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default ContactMobile;

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactWork.tsx

@@ -0,0 +1,88 @@
+import { Input, Label } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import CopyText from '../../../../../../common/copy/CopyText';
+import { useOrderDetails } from '../../../../store';
+import { handleKeyDown } from '../../../../utils';
+// import CallCustomer from './CallCustomer';
+
+function ContactWork() {
+  // Show call icons only if number is valid
+  // show copy icon if there is input value
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const orderRecipient = orderDetails?.order_recipient;
+
+  const showCopyIcon =
+    orderRecipient?.contact_work !== undefined &&
+    orderRecipient?.contact_work !== null &&
+    orderRecipient?.contact_work?.length > 0;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    const updatedOrderRecipient = {
+      ...(orderRecipient === null
+        ? { contact_work: val }
+        : { ...orderRecipient, contact_work: val }),
+    };
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        order_recipient: updatedOrderRecipient,
+      };
+    });
+  };
+
+  return (
+    <Container>
+      <Wrapper>
+        <Label label="Contact Work" htmlFor="contact-work" />
+        {showCopyIcon && <CopyText text={orderRecipient?.contact_work!} />}
+      </Wrapper>
+      <InputContainer>
+        <CustomInput
+          name="contact-work"
+          type="text"
+          placeholder="Work Number"
+          onKeyDown={handleKeyDown}
+          value={orderRecipient?.contact_work || ''}
+          onChange={onChange}
+        />
+        {/* <CallCustomer /> */}
+      </InputContainer>
+    </Container>
+  );
+}
+
+const InputContainer = styled.div`
+  display: flex;
+  gap: 7px;
+  align-items: center;
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+const CustomInput = styled(Input)`
+  width: 100%;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &:focus-visible {
+    outline: none;
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+`;
+
+export default ContactWork;