@bjsdistribution/dms-client-return 0.0.1

package/src/components/order-view/order-actions/actions/escalation/NewEscalation.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import Escalation from './index';
+import { CustomCheckBox, TableSkelton } from '../update-product-type/UpdateProductTypeStyle';
+
+const NewEscalation = () => {
+  const [showContent, setShowContent] = useState(false);
+
+  const handleClick = () => {
+    setShowContent(!showContent);
+  };
+
+  const handleCancel = () => {
+    setShowContent(false);
+  };
+
+  return (
+    <>
+      <Component>
+        Want to Create New Escalation?
+        <Flex>
+          <Button onClick={handleClick}>
+            {showContent ? 'SAVE' : 'CLICK HERE'}
+          </Button>
+          {showContent && (
+            <>
+              <CancelButton onClick={handleCancel}>CANCEL</CancelButton>
+            </>
+          )}
+        </Flex>
+      </Component>
+
+      {showContent && (
+        <>
+          <Escalation />
+        </>
+      )}
+      <TableSkelton>
+        <table>
+          <thead>
+            <tr>
+              <th>
+                <CustomCheckBox>
+                  <label className="container">
+                    <input type="checkbox" />
+                    <span className="checkmark"></span>
+                  </label>
+                </CustomCheckBox>
+              </th>
+              <th>ID</th>
+              <th>Level</th>
+              <th>Escalation</th>
+              <th>Order Status</th>
+              <th>Warehouse</th>
+              <th>Timed Service</th>
+              <th>Routed</th>
+              <th>Pre Route Pre-Call</th>
+              <th>Stock Check</th>
+              <th>Stock Check</th>
+              <th>Driver Pre-Call</th>
+              <th>Del Status</th>
+              <th>Post call</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <CustomCheckBox>
+                  <label className="container">
+                    <input type="checkbox" />
+                    <span className="checkmark"></span>
+                  </label>
+                </CustomCheckBox>
+              </td>
+              <td>VIP4</td>
+              <td>B63015484248[Test] WAYVER</td>
+              <td>Allocated to Route</td>
+              <td>Revieved Picked</td>
+              <td>Data</td>
+              <td>Data</td>
+              <td>Data</td>
+              <td>Data</td>
+              <td>Data</td>
+              <td>Data</td>
+              <td>Data</td>
+              <td>Done</td>
+              <td>Done</td>
+              <td>Status</td>
+            </tr>
+          </tbody>
+        </table>
+      </TableSkelton>
+    </>
+  );
+};
+
+const Component = styled.div`
+  display: flex;
+  width: 98%;
+  padding: 15px 12px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 15px;
+  border-radius: 15px;
+  background: #f8fafc;
+`;
+
+const Button = styled.button`
+  border-radius: 20px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: #3a3630;
+  display: flex;
+  padding: 6px 10px;
+  align-items: flex-start;
+  gap: 16px;
+  color: white;
+  cursor: pointer;
+`;
+
+const Flex = styled.div`
+  display: flex;
+  gap: 10px;
+`;
+
+const CancelButton = styled.button`
+  display: flex;
+  padding: 6px 10px;
+  align-items: flex-start;
+  gap: 16px;
+  border-radius: 20px;
+  border: 1px solid #e95252;
+  background: #f8fafc;
+  color: #e95252; /* Added this line to set text color */
+  text-decoration-color: #e95252;
+  cursor: pointer;
+`;
+
+export default NewEscalation;

package/src/components/order-view/order-actions/actions/escalation/Notes.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { TextArea } from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+
+const Notes = () => {
+  const StyledTextArea = styled(TextArea)`
+    display: flex;
+    height: 135px;
+    width: 240px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    flex: 1 0 0;
+    border-radius: 12px;
+    //border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);
+    background: var(--Flowkit-White, #fff);
+    resize: none;
+  `;
+
+  const Label = styled.label`
+    font-family: 'lato', sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    color: var(--tonal-brown-651, #6a7378);
+  `;
+  return (
+    <div>
+      <Label>Note</Label>
+      <StyledTextArea name="note" placeholder="" />
+    </div>
+  );
+};
+
+export default Notes;

package/src/components/order-view/order-actions/actions/escalation/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Dropdowns from './Dropdowns';
+import Notes from './Notes';
+import styled from 'styled-components';
+import Upgrade from './upgrade';
+const Flex = styled.div`
+  border-radius: 15px;
+  background: #f8fafc;
+  display: flex;
+  /* flex-wrap: wrap; */
+  gap: 15px;
+  padding: 20px;
+  width: 97%;
+  @media (max-width: 768px) {
+    flex-direction: column;
+    padding: 10px;
+    gap: 10px;
+  }
+`;
+const Escalation = () => {
+  return (
+    <>
+      <Flex>
+        <Dropdowns />
+        <Notes />
+        <Upgrade />
+      </Flex>
+    </>
+  );
+};
+export default Escalation;

package/src/components/order-view/order-actions/actions/escalation/upgrade/index.tsx

@@ -0,0 +1,192 @@
+import React from 'react';
+import {
+  AntSelect,
+  Label,
+  Switch,
+} from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+
+const Upgrade = () => {
+  const handleSelectChange = () => {
+    alert('hello');
+  };
+
+  return (
+    <>
+      <Wrapper>
+        <Heading>Upgrade</Heading>
+        <Container>
+          <Top>
+            <InnerCont>
+              <Toggle
+                label={'Timed Service'}
+                checked={true}
+                onChange={(_event: React.ChangeEvent<HTMLInputElement>) => {
+                  throw new Error('Function not implemented.');
+                }}
+                name={''}
+              />
+            </InnerCont>
+          </Top>
+          <InnerCont>
+            <Label label="Time Slot" />
+            <StyledAntSelect
+              options={[]}
+              placeholder="Select Customer"
+              onChange={handleSelectChange}
+              disabled={false}
+              showSearch={true}
+              popupClassName={'dropDownStyle'}
+              selectWrapperClass={'rounded'}
+            />
+          </InnerCont>
+          <Top>
+            <InnerCont>
+              <Toggle
+                label={'Chargeable'}
+                checked={false}
+                onChange={(_event: React.ChangeEvent<HTMLInputElement>) => {
+                  throw new Error('Function not implemented.');
+                }}
+                name={''}
+              />
+            </InnerCont>
+          </Top>
+          <Top>
+            <InnerCont>
+              <Toggle
+                label={'Additional Time'}
+                checked={false}
+                onChange={(_event: React.ChangeEvent<HTMLInputElement>) => {
+                  throw new Error('Function not implemented.');
+                }}
+                name={''}
+              />
+            </InnerCont>
+          </Top>
+          <InnerCont>
+            <Label label="Drop Time" />
+            <StyledAntSelect
+              options={[]}
+              placeholder="Select Customer"
+              onChange={handleSelectChange}
+              disabled={false}
+              showSearch={true}
+              popupClassName={'dropDownStyle'}
+              selectWrapperClass={'rounded'}
+            />
+          </InnerCont>
+          <Top>
+            <InnerCont>
+              <Toggle
+                label={'Chargeable'}
+                checked={false}
+                onChange={(_event: React.ChangeEvent<HTMLInputElement>) => {
+                  throw new Error('Function not implemented.');
+                }}
+                name={''}
+              />
+            </InnerCont>
+          </Top>
+        </Container>
+      </Wrapper>
+      <GiftWrapper>
+        <BJSGift>
+          <Box />
+        </BJSGift>
+        <BJSGift>
+          <Box />
+        </BJSGift>
+      </GiftWrapper>
+    </>
+  );
+};
+
+const GiftWrapper = styled.div`
+  display: flex;
+  gap: 15px;
+  padding-top: 45px;
+`;
+
+const Box = styled.div`
+  position: relative;
+  width: 20px;
+  height: 20px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 11px;
+    height: 11px;
+    background-color: #ccc;
+    border-radius: 2px;
+    display: none;
+  }
+`;
+
+const Wrapper = styled.div``;
+
+const BJSGift = styled.div`
+  display: flex;
+  width: 130px;
+  height: 93px;
+  padding: 10px 15px 15px 10px;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 15px;
+  border: 1px solid #e0e2e7;
+
+  /* &:hover ${Box}::after {
+    display: block;
+  } */
+`;
+
+const Toggle = styled(Switch)`
+  padding: 15px;
+`;
+
+const Heading = styled.div`
+  color: #3a3630;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+`;
+
+const Container = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+  align-items: center;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+`;
+
+const InnerCont = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+`;
+
+const Top = styled.div`
+  padding-top: 35px;
+`;
+
+const StyledAntSelect = styled(AntSelect)`
+  width: 100%;
+  height: 40px;
+
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+`;
+
+export default Upgrade;

package/src/components/order-view/order-actions/actions/hold-order/HoldOrderModal.tsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useState } from 'react';
+import { AntSelect, useApiHook } from '@bjsdistribution/dms-component-library';
+import {
+  useCurrentAction,
+  useOrderId,
+  useOrderStaticData,
+} from '../../../store';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import {
+  HoldContentContainer,
+  HoldDatePickerWrap,
+  HoldRow,
+  Label,
+  SplitText,
+} from '../modalstyle';
+import { DatePicker, DatePickerProps } from 'antd';
+import dayjs from 'dayjs';
+import { ApiResponse } from '../../../types';
+
+function HoldOrderModal() {
+  const [orderId] = useOrderId();
+  const [, setCurrentAction] = useCurrentAction();
+
+  const onClose = () => {
+    setCurrentAction(undefined);
+  };
+
+  const [orderStaticData] = useOrderStaticData();
+  const [selectedDate, setDate] = useState<Date | string | null>(null);
+  const [holdReason, setHoldReason] = useState<string | undefined>(undefined);
+
+  const onHoldReasonOptions = orderStaticData?.onhold_reasons?.map(
+    (item: any) => {
+      return {
+        label: item?.reason,
+        value: item?.reason,
+      };
+    }
+  );
+
+  const {
+    data: response,
+    setShouldPerformAction: setPerformAction,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/hold/?hold_reason=${holdReason}&hold_until=${selectedDate}`,
+    method: 'POST',
+    performAction: false,
+  });
+
+  useEffect(() => {
+    if (response && response?.data) {
+      setCurrentAction(undefined);
+    }
+  }, [response]);
+
+  const onChangeHold = (value: string) => {
+    setHoldReason(value);
+  };
+
+  const handleDateChange: DatePickerProps['onChange'] = (date, _dateString) => {
+    const newDate = date?.format('YYYY-MM-DDTHH:mm:ss');
+    if (newDate !== undefined) {
+      setDate(newDate);
+    } else {
+      setDate(null);
+    }
+  };
+
+  const onSubmitHold = () => {
+    if (orderId) {
+      setPerformAction(true);
+    }
+  };
+
+  const showSubmitBtn = holdReason !== undefined && selectedDate !== null;
+
+  return (
+    <OrderActionModal
+      headerTitle="Hold order"
+      onCloseHeader={onClose}
+      onSubmit={onSubmitHold}
+      showAdditionalInfo
+      infoText="632801 (OFS)"
+      submitBtnTitle="Save Details"
+      isSubmitDisabled={!showSubmitBtn}
+    >
+      <HoldContentContainer>
+        <SplitText>
+          <HoldRow>
+            <Label>Delivery Date</Label>
+            <HoldDatePickerWrap>
+              <DatePicker
+                needConfirm
+                format={'MMMM D, YYYY'}
+                onChange={handleDateChange}
+                value={
+                  selectedDate === null ? selectedDate : dayjs(selectedDate)
+                }
+              />
+            </HoldDatePickerWrap>
+          </HoldRow>
+
+          <HoldRow>
+            <Label>Hold Reason</Label>
+            <AntSelect
+              options={onHoldReasonOptions}
+              placeholder="Select Hold Reason"
+              onChange={onChangeHold}
+              disabled={false}
+              style={{ width: '346px', height: 40 }}
+              showSearch={true}
+              popupClassName={'dropDownStyle'}
+              selectWrapperClass={'rounded'}
+              defaultValue={holdReason}
+            />
+          </HoldRow>
+        </SplitText>
+      </HoldContentContainer>
+    </OrderActionModal>
+  );
+}
+
+export default HoldOrderModal;

package/src/components/order-view/order-actions/actions/log-feedback/FeedbackItem.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Container,
+  ImageCircle,
+  ImageRow,
+  Row,
+  StaticText,
+} from '../modalstyle';
+import { CustomRating } from '@bjsdistribution/dms-component-library';
+
+interface FeedbackItemProps {
+  icon: React.ComponentType;
+  question: string;
+}
+
+const FeedbackItem: React.FC<FeedbackItemProps> = ({
+  icon: Icon,
+  question,
+}) => (
+  <Row>
+    <Container>
+      <ImageRow>
+        <ImageCircle>
+          <Icon />
+        </ImageCircle>
+        <StaticText>{question}</StaticText>
+      </ImageRow>
+      <CustomRating showText={true} />
+    </Container>
+  </Row>
+);
+
+export default FeedbackItem;

package/src/components/order-view/order-actions/actions/log-feedback/LogFeedback.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import { useCurrentAction } from '../../../store';
+import {
+  Container,
+  ContentContainer,
+  Row,
+  SplitLayout,
+  StaticText,
+  StyledTextAreas,
+} from '../modalstyle';
+import CustomerServiceImg from '../../../../../assets/icons/CustomerServiceImg';
+import PackedImg from '../../../../../assets/icons/PackedImg';
+import InnovativeBulb from '../../../../../assets/icons/InnovativeBulb';
+import ProfileImg from '../../../../../assets/icons/ProfileImg';
+import GrowthImg from '../../../../../assets/icons/GrowthImg';
+import FeedbackItem from './FeedbackItem';
+
+function LogFeedback() {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+  };
+  return (
+    <OrderActionModal
+      headerTitle="MR ANDY CRONK"
+      onCloseHeader={closeModal}
+      onSubmit={() => {}}
+      showAdditionalInfo
+      infoText="632801 (OFS)"
+      submitBtnTitle="Save Details"
+    >
+      <ContentContainer>
+        <SplitLayout>
+          <FeedbackItem
+            icon={CustomerServiceImg}
+            question={
+              'How would you rate the communication prior to their arrival at your property?'
+            }
+          />
+          <FeedbackItem
+            icon={PackedImg}
+            question={
+              'How would you rate the handling of the products by the team?'
+            }
+          />
+        </SplitLayout>
+
+        <SplitLayout>
+          <FeedbackItem
+            icon={InnovativeBulb}
+            question={
+              'How would you rate the explanation on the level of service they have provided you today?'
+            }
+          />
+          <FeedbackItem
+            icon={ProfileImg}
+            question={
+              'How would you rate the level of professionalism shown by the team?'
+            }
+          />
+        </SplitLayout>
+
+        <SplitLayout>
+          <FeedbackItem
+            icon={GrowthImg}
+            question={
+              'How would you rate the overall performance during the delivery process?'
+            }
+          />
+          <Row>
+            <Container>
+              <StaticText>Anything below 3 needs to be investigated</StaticText>
+              <StyledTextAreas name="note" placeholder="Write here..." />
+            </Container>
+          </Row>
+        </SplitLayout>
+      </ContentContainer>
+    </OrderActionModal>
+  );
+}
+
+export default LogFeedback;

package/src/components/order-view/order-actions/actions/log-service-refusal/DeliveryPoint.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+import RadioButtonGroup from '../../../../../common/radio-group/RadioButtonGroup';
+import { StandardOptionsType } from '@bjsdistribution/dms-component-library';
+
+const deliveryPoints: StandardOptionsType[] = [
+  {
+    label: 'Hallway',
+    value: 'hallway',
+  },
+  {
+    label: 'ROC',
+    value: 'roc',
+  },
+  {
+    label: 'Front Door',
+    value: 'frontdoor',
+  },
+  {
+    label: 'Garden',
+    value: 'garden',
+  },
+];
+
+function DeliveryPoint() {
+  const radioGroupHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    // console.log(typeof event.target.value, 'value...');
+    setSelectedValue(event.target.value);
+  };
+
+  const [selectedValue, setSelectedValue] = React.useState<any>(
+    deliveryPoints[0].value
+  );
+  return (
+    <Container>
+      <RadioButtonGroup
+        heading="Delivery Point"
+        options={deliveryPoints || []}
+        onChange={radioGroupHandler}
+        direction="horizontal"
+        selectedValue={selectedValue}
+        required={false}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  /* height: 30px; */
+  padding: 1px;
+  align-items: flex-start;
+  align-self: stretch;
+`;
+
+export default DeliveryPoint;