@bjsdistribution/dms-client-return 0.0.85 → 0.0.87

package/src/components/order-view/order-details/expanded-content/orders-section/Carrier.tsx

@@ -16,7 +16,7 @@ function Carrier() {
   const onChange = (selectedOption: any) => {
     setOrderDetails(prev => ({
       ...prev,
-      carrier_id: selectedOption.value,
+      carrier_id: selectedOption?.value,
     }));
   };
 

package/src/components/order-view/order-details/expanded-content/services-section/DeliveryPoint.tsx

@@ -31,7 +31,7 @@ function DeliveryPointDropdown() {
 
   return (
     <Container>
-      <Label label="Delivery Point" htmlFor="deliveryPointDropdown" />
+      <Label label="Delivery Point" />
       <StyledSelectDropdown
         placeholder="Select Delivery Point"
         options={deliveryPointOptions || []}

package/src/components/order-view/order-details/expanded-content/services-section/TimedService.tsx

@@ -48,7 +48,7 @@ function TimedServiceDropdown() {
 
   return (
     <Container>
-      <Label label="Timed Service" htmlFor="timedServiceDropdown" />
+      <Label label="Timed Service" />
       <StyledSelectDropdown
         styles={{
           ...dropdownStyles,

package/src/components/order-view/view-reminder/AssigneeDropdown.tsx

@@ -0,0 +1,33 @@
+import { Label, AntSelect } from '@bjsdistribution/dms-component-library';
+import { notification } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+
+function AssigneeDropdown() {
+  const handleSelectChange = () => {
+    notification.success({
+      message: 'Success',
+      description: 'Successfully updated',
+    });
+  };
+  return (
+    <FormContainer>
+      <Label label="Assigned To" required htmlFor="assigneDropdown" />
+      <StyledAntSelect
+        options={[]}
+        onChange={handleSelectChange}
+        selectWrapperClass={'rounded'}
+        style={{ display: 'flex' }}
+      />
+    </FormContainer>
+  );
+}
+const FormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+  width: 325px;
+`;
+const StyledAntSelect = styled(AntSelect)``;
+export default AssigneeDropdown;

package/src/components/order-view/view-reminder/ViewReminder.tsx

@@ -0,0 +1,314 @@
+import React, { useEffect, useState } from 'react';
+import OrderActionModal from '../../../common/modals/order-action-modal/OrderActionModal';
+import { useCurrentAction } from '../store';
+import { DatePickerWrap, Label } from '../order-actions/actions/modalstyle';
+import {
+  useFlagsLoading,
+  useReminderRefId,
+  useSingleReminderData,
+  useUpdateReminderData,
+} from '../order-actions/store';
+import Loader from '../../order-daily-overview/header/loader/Loader';
+import StatusIndicator from '../flags-action-modal/StatusIndicator';
+import styled from 'styled-components';
+import { format, isValid } from 'date-fns';
+import useFetchReminders from '../order-actions/hooks/useAllReminderData';
+import { DatePicker } from 'antd';
+import dayjs from 'dayjs';
+import {
+  ReferenceContainer,
+  StyledText,
+  StyledTime,
+  InnerContainer,
+  ContentsContainer,
+  Left,
+  Right,
+  DateTimeContainer,
+  Row,
+  DetailedContainer,
+  MiniContainer,
+  TimeWrapper,
+} from './reminder-styles';
+import useFetchSingleReminderData from '../order-actions/hooks/useFetchSingleReminder';
+import useUpdateReminder from '../order-actions/hooks/useUpdateReminder';
+import AssigneeDropdown from './AssigneeDropdown';
+
+const ViewReminderModal = () => {
+  const [, setCurrentAction] = useCurrentAction();
+  const fetchData = useFetchSingleReminderData();
+  const fetchRemindersData = useFetchReminders();
+
+  const updateReminder = useUpdateReminder();
+  const [, setDueDate] = useState<any | null>(null);
+  const [reminderData, setReminderData] = useSingleReminderData();
+  const [reminderRefId] = useReminderRefId();
+  const [loading, setLoading] = useFlagsLoading();
+  const [reminderPayload, setPayload] = useUpdateReminderData();
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+  };
+
+  const fetchReminderData = async () => {
+    setLoading(true);
+    const result = await fetchData();
+    setReminderData(result);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    fetchReminderData();
+  }, [reminderRefId]);
+
+  useEffect(() => {
+    if (reminderData) {
+      setPayload({
+        ...reminderPayload,
+        details: reminderData?.details,
+        id: reminderData?.id,
+        assigned_to: reminderData?.assigned_to,
+        due_date: reminderData?.due_date,
+        due_time: reminderData?.due_time,
+        status_id: reminderData?.status_id,
+      });
+      setDueDate(reminderData?.due_date);
+    }
+  }, [reminderData]);
+
+  const handleDateChange = (date: any | null) => {
+    if (date && isValid(date.$d)) {
+      setDueDate(date);
+      const formattedDate = format(new Date(date.$d), 'yyyy-MM-dd');
+
+      setPayload((prevState: any) => ({
+        ...prevState,
+        due_date: formattedDate,
+      }));
+    } else {
+      setDueDate(null);
+      setPayload((prevState: any) => ({
+        ...prevState,
+        due_date: undefined,
+      }));
+    }
+  };
+
+  const handleTime = (event: any) => {
+    setPayload({
+      ...reminderPayload,
+      due_time: event.target.value,
+    });
+  };
+
+  const onChangeDetails = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setPayload({
+      ...reminderPayload,
+      details: event.target.value,
+    });
+  };
+
+  //set mark as complete
+  const handleResolved = (event: any) => {
+    setPayload({
+      ...reminderPayload,
+      status_id: reminderPayload.status_id === event ? 0 : event,
+    });
+  };
+
+  const handleEditReminder = async () => {
+    setLoading(true);
+    await updateReminder([reminderPayload]);
+    fetchRemindersData();
+    closeModal();
+  };
+
+  const isDisabled = reminderData?.reminder_status?.name_alias === 'resolved';
+
+  const additional =
+    reminderData?.order_data?.order_recipient?.recipient_name +
+    ' ' +
+    reminderData?.order_data?.order_recipient?.postcode;
+
+  return (
+    <>
+      {reminderData && loading && <Loader />}
+      <OrderActionModal
+        headerTitle="View Reminder"
+        onCloseHeader={closeModal}
+        onSubmit={handleEditReminder}
+        submitBtnTitle="Save Details"
+        isSubmitDisabled={isDisabled}
+        showAdditionalInfo
+        infoText={additional || 'NA'}
+        headerActions={
+          <OuterDiv>
+            {reminderData?.reminder_status?.name_alias === 'pending' ||
+            reminderData?.reminder_status?.name_alias === 'unresolved' ? (
+              <>
+                <StyledWrapper>
+                  <StyledLabel>
+                    <StyledCheckbox>
+                      <input
+                        type="checkbox"
+                        onChange={() => handleResolved(2)}
+                      />
+                      <RoundCheckbox />
+                    </StyledCheckbox>
+                    <StyledSpan>Mark As Complete</StyledSpan>
+                  </StyledLabel>
+                </StyledWrapper>
+              </>
+            ) : null}
+          </OuterDiv>
+        }
+      >
+        <ReferenceContainer style={{ marginTop: '20px' }}>
+          <InnerContainer>
+            <MiniContainer>
+              {' '}
+              <Label>Reference {} </Label>
+              <LabelText>{reminderData?.reference || 'N/A'}</LabelText>
+            </MiniContainer>
+            <MiniContainer>
+              {' '}
+              <Label>Status </Label>
+              <LabelText>
+                {reminderData?.reminder_status?.name_alias === 'pending' ||
+                reminderData?.reminder_status?.name_alias === 'unresolved' ? (
+                  <StatusIndicator text="Incomplete" status="AD" />
+                ) : (
+                  <StatusIndicator
+                    text={`Completed on ${reminderData?.completed} by ${reminderData?.completed_by}`}
+                    status="SD"
+                  />
+                )}
+              </LabelText>
+            </MiniContainer>
+          </InnerContainer>
+        </ReferenceContainer>
+        <ContentsContainer>
+          <Left>
+            <AssigneeDropdown />
+            <DateTimeContainer>
+              <Label>Due </Label>
+              <Row>
+                <StyleContainer>
+                  <DatePickerWrap>
+                    <DatePicker
+                      format="DD/MM/YYYY"
+                      value={
+                        reminderPayload?.due_date
+                          ? dayjs(reminderPayload?.due_date)
+                          : null
+                      }
+                      onChange={handleDateChange}
+                    />
+                  </DatePickerWrap>
+                </StyleContainer>
+
+                <TimeWrapper>
+                  <StyledTime
+                    onChange={handleTime}
+                    value={reminderPayload?.due_time}
+                    type="time"
+                  />
+                </TimeWrapper>
+              </Row>
+            </DateTimeContainer>
+          </Left>
+          <Right>
+            <DetailedContainer>
+              <Label>Details</Label>
+              <StyledText
+                name="text"
+                required
+                value={reminderPayload?.details}
+                onChange={onChangeDetails}
+              />
+            </DetailedContainer>
+          </Right>
+        </ContentsContainer>
+      </OrderActionModal>
+    </>
+  );
+};
+
+const StyleContainer = styled.div`
+  border-radius: 20px;
+  background: #fff;
+  width: 235px;
+`;
+
+const StyledWrapper = styled.div`
+  display: flex;
+  padding: 6px 10px;
+  align-items: center;
+  gap: 5px;
+  border-radius: 30px;
+  background: #fff;
+`;
+
+const StyledLabel = styled.label`
+  cursor: pointer;
+  display: flex;
+`;
+
+const StyledSpan = styled.span`
+  color: #131313;
+  font-family: 'Lato', sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 17px;
+  white-space: nowrap;
+`;
+
+const StyledCheckbox = styled.div`
+  input[type='checkbox'] {
+    display: none;
+  }
+
+  input[type='checkbox'] + span:before {
+    width: 14px;
+    height: 14px;
+    border: 1.5px solid #3a3630;
+    content: '';
+    display: inline-block;
+    margin: 0 8px 0 0;
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  input[type='checkbox']:checked + span:before {
+    background: #feba30;
+    border: 1.5px solid #3a3630;
+    box-shadow: inset 0px 0px 0px 1px #fff;
+    color: #333;
+    content: '';
+    text-align: center;
+    border-radius: 50%;
+    display: flex;
+    width: 14px;
+    height: 14px;
+  }
+
+  input[type='checkbox']:focus + span::before {
+    outline: 0;
+  }
+`;
+
+const OuterDiv = styled.div`
+  padding-left: 33%;
+`;
+
+const RoundCheckbox = styled.span``;
+
+const LabelText = styled.span`
+  color: var(--primary-dark-brown, #3a3630);
+  font-family: Lato;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+`;
+export default ViewReminderModal;

package/src/components/order-view/view-reminder/reminder-styles.tsx

@@ -0,0 +1,173 @@
+import { TextArea, Input } from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+export const ReferenceContainer = styled.div`
+  display: flex;
+  height: 52px;
+  width: 770px;
+  padding: 10px 15px;
+  align-items: center;
+  flex: 1 0 0;
+  border-radius: 40px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: #fff;
+`;
+export const InnerContainer = styled.div`
+  display: flex;
+  height: 52px;
+  padding: 10px 15px;
+  align-items: center;
+  gap: 20px;
+  flex: 1 0 0;
+`;
+export const MiniContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  flex: 1;
+`;
+export const StyledText = styled(TextArea)`
+  display: flex;
+  height: 105px;
+  padding: 8px 12px;
+  align-items: flex-start;
+  gap: 4px;
+  align-self: stretch;
+  border-radius: 15px;
+  resize: none;
+`;
+export const ReferInput = styled(Input)`
+  border: none;
+  border-radius: 15px;
+  width: 330px;
+`;
+export const InputContainer = styled(Input)`
+  border: none;
+  border-radius: 15px;
+  width: 330px;
+`;
+export const ReferInputContainer = styled(Input)`
+  border: none;
+  border-radius: 15px;
+  width: 330px;
+`;
+export const StyledDateContainer = styled.div`
+  position: relative;
+  border-radius: 66px;
+  border: 1px solid #e0e2e7;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  input[type='text'] {
+    border-radius: 20px;
+    background: #fff;
+    border: none;
+    color: #6a7378;
+    font-size: 14px;
+    font-weight: 400;
+    padding: 10px 0;
+    padding-left: 33px;
+    &:focus-visible {
+      outline: none;
+    }
+  }
+  svg {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+`;
+
+export const StyledDate = styled(Input)`
+  border-radius: 66px;
+  width: 175px;
+  padding-right: 30px;
+`;
+
+export const TimeWrapper = styled.div`
+  display: flex;
+  width: 80px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+`;
+export const StyledTime = styled(Input)`
+  border-radius: 30px;
+  border: 1px solid #e0e2e7;
+  background: #fff;
+
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  display: flex;
+  padding: 8px 5px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+`;
+export const IconContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+`;
+const Column = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+export const Row = styled(Column)`
+  gap: 10px;
+`;
+export const Right = styled.div`
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  gap: 15px;
+`;
+export const Left = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  gap: 15px;
+  padding: 15px;
+`;
+export const DateTimeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 15px;
+  align-self: stretch;
+`;
+export const AssigneeContainer = styled.div`
+  display: flex;
+  padding: 15px 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 15px;
+  flex: 1 0 0;
+  border-radius: 15px;
+  background: #f8fafc;
+`;
+export const DetailedContainer = styled.div`
+  display: flex;
+  width: 416px;
+  padding: 15px 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 15px;
+  flex: 1 0 0;
+  border-radius: 66px;
+  background: #f8fafc;
+`;
+export const ContentsContainer = styled(Column)`
+  display: flex;
+  margin: 15px;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 15px;
+  border-radius: 15px;
+  background: #f8fafc;
+  /* shadow/shadow-sm */
+  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
+`;
+` `;