@bjsdistribution/dms-client-return 0.0.82 → 0.0.84

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

@@ -1,315 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import OrderActionModal from '../../../common/modals/order-action-modal/OrderActionModal';
-
-import AssigneeDropdown from './AssigneeDropdown';
-import DatePickerIcon from '../../../assets/icons/DatePickerIcon';
-import DatePicker from 'react-datepicker';
-import { useCurrentAction } from '../store';
-import { Label } from '../order-actions/actions/modalstyle';
-import {
-  ReferenceContainer,
-  StyledDateContainer,
-  StyledText,
-  StyledTime,
-  InnerContainer,
-  ContentsContainer,
-  Left,
-  Right,
-  DateTimeContainer,
-  Row,
-  DetailedContainer,
-  MiniContainer,
-  TimeWrapper,
-} from './reminder-styles';
-import useFetchSingleReminderData from '../order-actions/hooks/useFetchSingleReminder';
-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, parse } from 'date-fns';
-import useUpdateReminder from '../order-actions/hooks/useUpdateReminder';
-import useFetchReminders from '../order-actions/hooks/useAllReminderData';
-
-const ViewReminderModal = () => {
-  const [, setCurrentAction] = useCurrentAction();
-  const fetchData = useFetchSingleReminderData();
-  const fetchRemindersData = useFetchReminders();
-
-  const updateReminder = useUpdateReminder();
-  const [, setDueDate] = useState<Date | 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: Date | null) => {
-    if (date && isValid(date)) {
-      setDueDate(date);
-      const formattedDate = `${format(new Date(date), '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>
-          <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>
-                {reminderPayload?.due_date && (
-                  <StyledDateContainer>
-                    <DatePicker
-                      dateFormat="EEE, dd MMM yyyy"
-                      selected={
-                        reminderPayload?.due_date
-                          ? parse(
-                              reminderPayload.due_date,
-                              'yyyy-MM-dd',
-                              new Date()
-                            )
-                          : null
-                      }
-                      onChange={handleDateChange}
-                      placeholderText="Choose Due Date"
-                    />
-                    <DatePickerIcon />
-                  </StyledDateContainer>
-                )}
-
-                <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 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

@@ -1,173 +0,0 @@
-import { TextArea, Input } from '@bjsdistribution/dms-component-library';
-import styled from 'styled-components';
-export const ReferenceContainer = styled.div`
-  display: flex;
-  height: 52px;
-  width: 740px;
-  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: 96px;
-  padding: 8px 12px;
-  align-items: flex-start;
-  gap: 4px;
-  align-self: stretch;
-  border-radius: 22px;
-  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);
-`;
-` `;