@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import styled from 'styled-components';
+import CustomerInformation from './customer-info';
+import ProductTable from './tables/ProductTable';
+import NotesTable from './tables/NotesTable';
+import SlotAndInstructions from './slot-and-instructions';
+import { Alert } from '@bjsdistribution/dms-component-library';
+import { useCurrentAction } from '../../../store';
+// import DocFileUpload from './DocFileUpload';
+
+function ConfirmOrder() {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const onClose = () => {
+    setCurrentAction(undefined);
+  };
+  return (
+    <OrderActionModal
+      headerTitle="Confirm Order"
+      showAdditionalInfo
+      infoText="632801 (OFS)"
+      onCloseHeader={onClose}
+      onSubmit={() => {}}
+      submitBtnTitle="Save Details"
+    >
+      <ContentContainer>
+        <Alert
+          description=""
+          onClose={() => {}}
+          type="info"
+          title="There is Orders with identical postcodes that are yet to be delivered.View Orders"
+          showOkButton={false}
+        />
+        <Wrapper>
+          <CustomerInformation />
+          <SlotAndInstructions />
+        </Wrapper>
+        <ProductTable />
+        <NotesTable />
+      </ContentContainer>
+    </OrderActionModal>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  gap: 10px;
+`;
+
+const ContentContainer = styled.div`
+  /* display: flex; */
+  padding: 15px 12px;
+  flex: 1 0 0;
+  border-radius: 15px;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  overflow: auto;
+  min-height: 500px;
+  overflow-x: hidden;
+  max-height: 500px;
+`;
+
+export default ConfirmOrder;

package/src/components/order-view/order-actions/actions/confirm-order/slot-and-instructions/ConfirmationNotes.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import React from 'react';
+import { TextArea } from '@bjsdistribution/dms-component-library';
+
+function ConfirmationNotes() {
+  return (
+    <Container>
+      <Label>Notes</Label>
+      <TextArea rows={5} placeholder="Enter Notes" />
+    </Container>
+  );
+}
+
+const Label = styled.label`
+  color: #6a7378;
+  font-family: 'Lato', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+export default ConfirmationNotes;

package/src/components/order-view/order-actions/actions/confirm-order/slot-and-instructions/DeliveryInstructions.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import React from 'react';
+import { TextArea } from '@bjsdistribution/dms-component-library';
+
+function DeliveryInstructions() {
+  return (
+    <Container>
+      <Label>Delivery Instructions</Label>
+      <TextArea rows={5} placeholder="Enter Delivery Instructions" />
+    </Container>
+  );
+}
+
+const Label = styled.label`
+  color: #6a7378;
+  font-family: 'Lato', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+export default DeliveryInstructions;

package/src/components/order-view/order-actions/actions/confirm-order/slot-and-instructions/index.tsx

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+import React from 'react';
+import ConfirmationNotes from './ConfirmationNotes';
+import DeliveryInstructions from './DeliveryInstructions';
+
+function SlotAndInstructions() {
+  return (
+    <Container>
+      <Slot>
+        <Title>Slot</Title>
+        <Value>07:00-10:00</Value>
+      </Slot>
+      <DeliveryInstructions />
+      <ConfirmationNotes />
+    </Container>
+  );
+}
+
+const Value = styled.span`
+  color: #3a3630;
+  font-family: 'Lato', 'Open Sans';
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+`;
+
+const Slot = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+
+const Title = styled.span`
+  color: #3a3630;
+  font-family: 'Lato', 'Open Sans';
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 700;
+`;
+
+const Container = styled.div`
+  padding: 15px 12px;
+  flex: 1 0 0;
+  border-radius: 15px;
+  background: #f8fafc;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+
+export default SlotAndInstructions;

package/src/components/order-view/order-actions/actions/confirm-order/tables/NotesTable.tsx

@@ -0,0 +1,51 @@
+import { AntTable } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+
+function NotesTable() {
+  const data = [
+    {
+      created: 'optimizer @ BJS via API',
+      notes: 'DropTime Updated: 12 to 10',
+    },
+    {
+      created: 'process_lgv_order_create',
+      notes:
+        'Latitude and Longitude have been updated. New lat,long:51.284781,-0.426978',
+    },
+  ];
+
+  const columns = [
+    { key: 'created', title: 'Created', isSelect: false },
+    { key: 'notes', title: 'Notes', isSelect: false },
+  ];
+
+  return (
+    <Container>
+      <Title>Notes (2)</Title>
+      <AntTable columns={columns} data={data} />
+    </Container>
+  );
+}
+
+const Title = styled.h2`
+  color: #3a3630;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  text-transform: uppercase;
+  padding: 0;
+  margin: 0;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  > div {
+    min-height: 165px;
+  }
+`;
+
+export default NotesTable;

package/src/components/order-view/order-actions/actions/confirm-order/tables/ProductTable.tsx

@@ -0,0 +1,65 @@
+import { AntTable } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+
+function ProductTable() {
+  const data = [
+    {
+      action: 'option1',
+      code: 'FFLMW-B1',
+      description:
+        'Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
+      parts: '1',
+    },
+    {
+      action: 'option2',
+      code: 'FFLMW-B1',
+      description:
+        'Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
+      parts: '1',
+    },
+    {
+      action: 'option3',
+      code: 'FFLMW-B1',
+      description:
+        'Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF 3 TABLES - OAK',
+      parts: '2',
+    },
+  ];
+
+  const columns = [
+    { key: 'action', title: 'Action', isSelect: false },
+    { key: 'code', title: 'Code', isSelect: false },
+    { key: 'description', title: 'Description', isSelect: false },
+    { key: 'parts', title: 'Parts', isSelect: false },
+  ];
+
+  return (
+    <Container>
+      <Title>Products(1)</Title>
+      <AntTable columns={columns} data={data} />
+    </Container>
+  );
+}
+
+const Title = styled.h2`
+  color: #3a3630;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  text-transform: uppercase;
+  padding: 0;
+  margin: 0;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  > div {
+    min-height: 165px;
+  }
+`;
+
+export default ProductTable;

package/src/components/order-view/order-actions/actions/create-task-reminder/CreateReminderModal.tsx

@@ -0,0 +1,254 @@
+import React, { useState } from 'react';
+import {
+  useCategoryData,
+  useCreateReminderPayload,
+  useDepartmentData,
+  useTaskTypeExtended,
+} from '../../store';
+import { priorityData, transformOption } from '../../utils';
+import { isValid } from 'date-fns';
+import {
+  DoubleDropdownContainer,
+  FormRow,
+  SplitContainer,
+  Wrapper,
+} from './SharedComponents';
+import { DatePickerWrap } from '../modalstyle';
+import RadioButtonGroup from '../../../../../common/radio-group/RadioButtonGroup';
+import styled from 'styled-components';
+import { TextArea } from '@bjsdistribution/dms-component-library';
+import { DatePicker, Select } from 'antd';
+import { StandardOptionsType } from '../../../../../common/radio-group/types';
+import dayjs from 'dayjs';
+
+function CreateReminderModal() {
+  const [CategoryData] = useCategoryData();
+  const [SelectedPriority, setPriority] = useState(1);
+  const [departmentData] = useDepartmentData();
+  const [subCategoryOptions, setSubCategoryOptions] = useState([]);
+  const [, setSelectedCategory] = useState(null);
+  const [subCategory] = useTaskTypeExtended();
+  const [createReminder, setPayload] = useCreateReminderPayload();
+
+  const handleSelectChange = () => console.log('hello');
+
+  //options for department
+  const departmentOptions = departmentData.map((option: any) =>
+    transformOption(option, 'name')
+  );
+
+  //options for priority
+  const priorityOptions: StandardOptionsType[] = priorityData.map(
+    (option: any) => ({
+      label: option.name,
+      value: option.id,
+      color: option.color,
+    })
+  );
+
+  //subcategory change
+  const handleDepartmentChange = (event: any) => {
+    setPayload(prevState => ({
+      ...prevState,
+      department_id: event,
+    }));
+  };
+
+  // date change here
+  const handleDateChange = (date: any | null) => {
+    if (date && isValid(date.$d)) {
+      const formattedDateTime = date.$d.toISOString();
+
+      setPayload((prevState: any) => ({
+        ...prevState,
+        due: formattedDateTime,
+      }));
+    } else {
+      setPayload((prevState: any) => ({
+        ...prevState,
+        due: undefined,
+      }));
+    }
+  };
+
+  //handlePriority change
+  const handlePriorityChange = (event: any) => {
+    const newValue = event.target.value;
+    setPriority(newValue);
+    setPayload(prevState => ({
+      ...prevState,
+      task_priority_id: +newValue,
+    }));
+  };
+
+  //description change
+  const handleChange = (event: any) => {
+    const desc = event.target.value;
+    setPayload(prevState => ({
+      ...prevState,
+      details: desc,
+    }));
+  };
+
+  // Options for category types
+  const categoryOptions = CategoryData.map((option: any) =>
+    transformOption(option, 'category')
+  );
+
+  //handling dependent subcategory dropdown
+  const handleCategoryChange = (value: any) => {
+    setSelectedCategory(value);
+    setPayload((prevstate: any) => ({
+      ...prevstate,
+      task_categories_id: value,
+    }));
+    const filteredSubCategories = subCategory
+      .filter((subCat: any) => subCat.category_id == value)
+      .map((subCat: any) => ({
+        label: subCat.sub_category,
+        value: subCat.id,
+      }));
+    setSubCategoryOptions(filteredSubCategories);
+  };
+
+  //subcategory change
+  const handleTypeChange = (event: any) => {
+    setPayload(prevState => ({
+      ...prevState,
+      task_subcategories_id: event,
+    }));
+  };
+
+  return (
+    <Wrapper>
+      <SplitContainer>
+        <FormRow label="Assigned To">
+          <DoubleDropdownContainer>
+            <StyledAntSelect
+              options={[]}
+              placeholder="IND"
+              onChange={handleSelectChange}
+              style={{ width: '8vw' }}
+            />
+            <StyledAntSelect
+              options={departmentOptions}
+              placeholder="Select Department"
+              onChange={handleDepartmentChange}
+              style={{ width: '18vw' }}
+              value={createReminder.department_id}
+            />
+          </DoubleDropdownContainer>
+          <StyledAntSelect
+            options={[]}
+            placeholder="Select User"
+            onChange={handleSelectChange}
+            style={{ width: '100%' }}
+          />
+          <StyledLink>Assign to me</StyledLink>
+        </FormRow>
+
+        {(createReminder.department_id === 1 ||
+          createReminder.department_id === 2) && (
+          <>
+            <FormRow label="Category">
+              <StyledAntSelect
+                style={{ minWidth: '20vw' }}
+                options={categoryOptions}
+                placeholder="Select Category"
+                onChange={handleCategoryChange}
+                value={createReminder.task_categories_id}
+              />
+            </FormRow>
+            <FormRow label="Type">
+              <StyledAntSelect
+                options={subCategoryOptions}
+                placeholder="Select Type"
+                onChange={handleTypeChange}
+                style={{ minWidth: '20vw' }}
+                value={createReminder.task_subcategories_id}
+              />
+            </FormRow>
+          </>
+        )}
+
+        <FormRow label="Priority">
+          <RadioButtonGroup
+            heading=""
+            options={priorityOptions}
+            onChange={handlePriorityChange}
+            direction="horizontal"
+            selectedValue={SelectedPriority}
+            required={false}
+          />
+        </FormRow>
+        <FormRow label="Due Date & Time" required>
+          <StyleContainer>
+            <DatePickerWrap>
+              <DatePicker
+                format="YYYY-MM-DD HH:mm"
+                value={createReminder?.due ? dayjs(createReminder.due) : null}
+                onChange={handleDateChange}
+                placeholder="Select Date & Time"
+                showTime={{ defaultValue: dayjs('00:00', 'HH:mm') }}
+              />
+            </DatePickerWrap>
+          </StyleContainer>
+        </FormRow>
+      </SplitContainer>
+      <SplitContainer>
+        <Label>
+          Description{' '}
+          <span style={{ color: 'red', fontSize: '20px' }}> * </span>
+        </Label>
+        <StyledTextArea
+          placeholder="Add Description"
+          required
+          onChange={handleChange}
+        />
+      </SplitContainer>
+    </Wrapper>
+  );
+}
+
+const StyleContainer = styled.div`
+  border-radius: 20px;
+  background: var(--Flowkit-White, #fff);
+`;
+const Label = styled.label`
+  color: #6a7378;
+  font-family: 'Lato', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+`;
+
+export const StyledAntSelect = styled(Select)`
+  .ant-select-selector {
+    width: 20vw;
+    border-radius: 22px;
+  }
+`;
+
+const StyledTextArea = styled(TextArea)`
+  display: flex;
+  padding: 12px;
+  align-items: flex-start;
+  gap: 4px;
+  align-self: stretch;
+  border-radius: 10px;
+  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);
+  background: var(--Flowkit-White, #fff);
+  resize: none;
+  height: 100px;
+`;
+
+const StyledLink = styled.div`
+  color: var(--contextual-blue, #6396e5);
+  font-family: Lato;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  cursor: pointer;
+`;
+
+export default CreateReminderModal;