@bjsdistribution/dms-client-return 0.0.1

package/src/components/order-view/order-actions/actions/cancel-order/CancelationReason.tsx

@@ -0,0 +1,18 @@
+import OrderActionsDropdown from '../../Dropdown';
+import React from 'react';
+
+function CancelationReason() {
+  const onSelect = () => {};
+  const onSearch = () => {};
+  return (
+    <OrderActionsDropdown
+      label="Cancelation Reason"
+      placeholder="Select Cancelation Reason"
+      options={[]}
+      onSelect={onSelect}
+      onSearch={onSearch}
+    />
+  );
+}
+
+export default CancelationReason;

package/src/components/order-view/order-actions/actions/cancel-order/ReturnAction.tsx

@@ -0,0 +1,17 @@
+import OrderActionsDropdown from '../../Dropdown';
+import React from 'react';
+function ReturnAction() {
+  const onSelect = () => {};
+  const onSearch = () => {};
+  return (
+    <OrderActionsDropdown
+      label="Return Action"
+      placeholder="Select Return Action"
+      options={[]}
+      onSelect={onSelect}
+      onSearch={onSearch}
+    />
+  );
+}
+
+export default ReturnAction;

package/src/components/order-view/order-actions/actions/cancel-order/ReturnReason.tsx

@@ -0,0 +1,17 @@
+import OrderActionsDropdown from '../../Dropdown';
+import React from 'react';
+function ReturnReason() {
+  const onSelect = () => {};
+  const onSearch = () => {};
+  return (
+    <OrderActionsDropdown
+      label="Return Reason"
+      placeholder="Select Return Reason"
+      options={[]}
+      onSelect={onSelect}
+      onSearch={onSearch}
+    />
+  );
+}
+
+export default ReturnReason;

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

@@ -0,0 +1,82 @@
+import styled from 'styled-components';
+import React from 'react';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import CancelationNote from './CancelationNote';
+import CancelationReason from './CancelationReason';
+import ReturnAction from './ReturnAction';
+import ReturnReason from './ReturnReason';
+import CancelOrderTable from './CancelOrderTable';
+import { useCurrentAction } from '../../../store';
+
+function CancelOrder() {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const onClose = () => {
+    setCurrentAction(undefined);
+  };
+  return (
+    <OrderActionModal
+      headerTitle="Cancel Order"
+      showAdditionalInfo
+      infoText="Gemma Harris, LE12 6AW"
+      onCloseHeader={onClose}
+      onSubmit={() => {}}
+    >
+      <ContentContainer>
+        <Top>
+          <TopLeft>
+            <CancelationReason />
+            <Wrapper>
+              <ReturnAction />
+              <ReturnReason />
+            </Wrapper>
+          </TopLeft>
+          <TopRight>
+            <CancelationNote />
+          </TopRight>
+        </Top>
+        <Bottom>
+          <CancelOrderTable />
+        </Bottom>
+      </ContentContainer>
+    </OrderActionModal>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  gap: 15px;
+  width: 100%;
+  > div {
+    width: 50%;
+  }
+`;
+
+const TopLeft = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  width: 50%;
+`;
+
+const TopRight = styled.div`
+  width: 50%;
+`;
+
+const Top = styled.div`
+  display: flex;
+  gap: 30px;
+  width: 100%;
+`;
+
+const Bottom = styled.div``;
+
+const ContentContainer = styled.div`
+  display: flex;
+  padding: 0px 15px;
+  align-items: flex-start;
+  gap: 10px;
+  flex-direction: column;
+`;
+
+export default CancelOrder;

package/src/components/order-view/order-actions/actions/change-customer-account/ChangeCustomerAccModal.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { AntSelect } from '@bjsdistribution/dms-component-library';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import { ContentContainer, Label, Row, SplitLayout } from '../modalstyle';
+import { OptionsMenu } from '../../../fakedata';
+import { useCurrentAction } from '../../../store';
+
+function ChangeCustomerAccModal() {
+
+  const [, setCurrentAction] = useCurrentAction();
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+  };
+
+  const handleSelectChange = () => {
+    alert('hello');
+  };
+  return (
+    <OrderActionModal
+      headerTitle="Change customer account"
+      onCloseHeader={closeModal}
+      onSubmit={() => {}}
+      showAdditionalInfo
+      infoText="632801 (OFS)"
+      submitBtnTitle="Save Details"
+    >
+      <ContentContainer>
+        <SplitLayout>
+          <Row>
+            <Label>New Customer</Label>
+            <AntSelect
+              options={OptionsMenu}
+              placeholder="Select Customer"
+              onChange={handleSelectChange}
+              disabled={false}
+              style={{ width: '22vw', height: 40 }}
+              showSearch={true}
+              popupClassName={'dropDownStyle'}
+              selectWrapperClass={'rounded'}
+            ></AntSelect>
+          </Row>
+
+          <Row>
+            <Label>New Trading Name</Label>
+            <AntSelect
+              options={OptionsMenu}
+              placeholder="Select Trading Name"
+              onChange={handleSelectChange}
+              disabled={false}
+              style={{ width: '22vw', height: 40 }}
+              showSearch={true}
+              popupClassName={'dropDownStyle'}
+              selectWrapperClass={'rounded'}
+            ></AntSelect>
+          </Row>
+        </SplitLayout>
+      </ContentContainer>
+    </OrderActionModal>
+  );
+}
+
+export default ChangeCustomerAccModal;

package/src/components/order-view/order-actions/actions/charge-log/DeleteLogModal.tsx

@@ -0,0 +1,39 @@
+import {
+  CancelAndCompleteAction,
+  CancelationModal,
+} from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { useCurrentAction } from '../../../store';
+
+const DeleteLogModal = () => {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const saveButton = () => {
+    setCurrentAction(undefined);
+  };
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+  };
+  return (
+    <CancelationModal
+      title="Delete Log"
+      description="Are you sure, you want to Delete the Log?"
+      actions={
+        <CustomCancelAndCompleteAction
+          cancelLabel="Cancel"
+          onCancel={closeModal}
+          completeLabel="Confirm"
+          onComplete={saveButton}
+        />
+      }
+    />
+  );
+};
+
+const CustomCancelAndCompleteAction = styled(CancelAndCompleteAction)`
+  justify-content: center;
+`;
+
+export default DeleteLogModal;

package/src/components/order-view/order-actions/actions/charge-log/index.tsx

@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import {
+  AmountContainer,
+  AmountSymbol,
+  ContentContainer,
+  DeleteCircleIcon,
+  Heading,
+  StatusWrapper,
+  StyledAmountInput,
+  SuccessText,
+} from '../modalstyle';
+import { AntTable, DeleteIcon } from '@bjsdistribution/dms-component-library';
+
+import { useCurrentAction } from '../../../store';
+import { ChargeLogData, Column } from '../../../types';
+import { initialData } from '../../../fakedata';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+
+function ChargeLog() {
+  const [, setCurrentAction] = useCurrentAction();
+  const [data, setData] = useState<ChargeLogData[]>(initialData);
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+  };
+
+  const handleDelete = (record: ChargeLogData) => {
+    const newData = data.filter(item => item.id !== record.id);
+    setData(newData);
+  };
+
+  const handleAmountChange = (value: string, id: number) => {
+    const amountValue = value.replace(/[^0-9.]/g, '');
+    const parts = amountValue.split('.');
+    if (parts.length > 2) {
+      return;
+    }
+    if (parts.length === 2 && parts[1].length > 2) {
+      return;
+    }
+
+    const newData = data.map(item => {
+      if (item.id === id) {
+        return { ...item, amount: amountValue };
+      }
+      return item;
+    });
+    setData(newData);
+  };
+
+  const columns: Column[] = [
+    { key: 'date', title: 'Date', dataIndex: 'date' },
+    { key: 'description', title: 'Description', dataIndex: 'description' },
+    {
+      key: 'amount',
+      title: 'Amount',
+      dataIndex: 'amount',
+      render: (record: any) => (
+        <AmountContainer>
+          <AmountSymbol>£</AmountSymbol>
+          {record.status ? (
+            <StyledAmountInput
+              type="text"
+              value={record.amount}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                handleAmountChange(e.target.value, record.id)
+              }
+            />
+          ) : (
+            <div>{record.amount}</div>
+          )}
+        </AmountContainer>
+      ),
+    },
+    {
+      key: 'status',
+      title: 'Status',
+      render: (record: any) => (
+        <StatusWrapper>
+          {record.status ? (
+            <>
+              Invoice : <SuccessText>{record.status}</SuccessText>
+            </>
+          ) : (
+            'Awaiting Invoice'
+          )}
+        </StatusWrapper>
+      ),
+    },
+    {
+      key: 'action',
+      title: 'Action',
+      render: (record: any) => (
+        <DeleteCircleIcon onClick={() => handleDelete(record)}>
+         <DeleteIcon/>
+        </DeleteCircleIcon>
+      ),
+    },
+  ];
+
+  return (
+    <OrderActionModal
+      headerTitle="Charges For"
+      onCloseHeader={closeModal}
+      onSubmit={() => {}}
+      submitBtnTitle="Save Details"
+      showAdditionalInfo
+      infoText="632801 (OFS)"
+    >
+      <ContentContainer>
+        <Heading> PRODUCTS </Heading>
+        <AntTable
+          columns={columns}
+          data={data}
+          onSelectChange={(value: any, record: ChargeLogData) =>
+            console.log('Selected value:', value, 'for record:', record)
+          }
+        />
+      </ContentContainer>
+    </OrderActionModal>
+  );
+}
+
+export default ChargeLog;

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ActionDropdown.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import OrderActionsDropdown from '../../../Dropdown';
+
+function ActionDropdown() {
+  const onSelect = () => {};
+  const onSearch = () => {};
+
+  const options = [
+    { label: 'small', value: 'small' },
+    { label: 'medium', value: 'medium' },
+    { label: 'large', value: 'large' },
+  ];
+
+  return (
+    <OrderActionsDropdown
+      label="Action"
+      placeholder="Select Action"
+      options={options}
+      onSelect={onSelect}
+      onSearch={onSearch}
+      className='action-dropdown'
+    />
+  );
+}
+
+export default ActionDropdown;

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ContactMobile.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Input } from 'antd';
+
+function ContactMobile() {
+  return (
+    <Container>
+      <Label>Contact Mobile</Label>
+      <Input style={{ borderRadius: '15px' }} />
+    </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 ContactMobile;

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ContactPhone.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Input } from 'antd';
+
+function ContactPhone() {
+  return (
+    <Container>
+      <Label>Contact Phone</Label>
+      <Input style={{ borderRadius: '15px' }} />
+    </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 ContactPhone;

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ContactTypeDropdown.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import OrderActionsDropdown from '../../../Dropdown';
+
+function ContactTypeDropdown() {
+  const onSelect = () => {};
+  const onSearch = () => {};
+
+  const options = [
+    { label: 'small', value: 'small' },
+    { label: 'medium', value: 'medium' },
+    { label: 'large', value: 'large' },
+  ];
+
+  return (
+    <OrderActionsDropdown
+      label="Contact Type"
+      placeholder="Select Contact Type"
+      options={options}
+      onSelect={onSelect}
+      onSearch={onSearch}
+      className="contact-type-dropdown"
+    />
+  );
+}
+
+export default ContactTypeDropdown;

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/ContactWork.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Input } from 'antd';
+
+function ContactWork() {
+  return (
+    <Container>
+      <Label>Contact Work</Label>
+      <Input style={{ borderRadius: '15px' }} />
+    </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 ContactWork;

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/DeliveryDate.tsx

@@ -0,0 +1,30 @@
+import { DatePicker } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+
+function DeliveryDate() {
+  const onChange = () => {};
+  return (
+    <Container>
+      <Label>Delivery Date</Label>
+      <DatePicker onChange={onChange} style={{ borderRadius: '15px' }} />
+    </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;
+  flex: 1;
+`;
+
+export default DeliveryDate;

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/EmailAddress.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Input } from 'antd';
+
+function EmailAddress() {
+  return (
+    <Container>
+      <Label>Email Address</Label>
+      <Input style={{ borderRadius: '15px' }} />
+    </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 EmailAddress;

package/src/components/order-view/order-actions/actions/confirm-order/customer-info/TimedServiceDropdown.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import OrderActionsDropdown from '../../../Dropdown';
+
+function TimedServiceDropdown() {
+  const onSelect = () => {};
+  const onSearch = () => {};
+
+  const options = [
+    { label: 'small', value: 'small' },
+    { label: 'medium', value: 'medium' },
+    { label: 'large', value: 'large' },
+  ];
+
+  return (
+    <OrderActionsDropdown
+      label="Timed Service"
+      placeholder="Select Timed Service"
+      options={options}
+      onSelect={onSelect}
+      onSearch={onSearch}
+    />
+  );
+}
+
+export default TimedServiceDropdown;

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+import EmailAddress from './EmailAddress';
+import ContactPhone from './ContactPhone';
+import ContactWork from './ContactWork';
+import ContactMobile from './ContactMobile';
+import ContactTypeDropdown from './ContactTypeDropdown';
+import ActionDropdown from './ActionDropdown';
+import DeliveryDate from './DeliveryDate';
+import TimedServiceDropdown from './TimedServiceDropdown';
+
+function CustomerInformation() {
+  return (
+    <Container>
+      <Title>Address</Title>
+      <AddressField>34 NORTHFIELD AVENUE, PONTEFRACT, WF9 3TG</AddressField>
+      <Wrapper>
+        <EmailAddress />
+        <ContactPhone />
+      </Wrapper>
+      <Wrapper>
+        <ContactWork />
+        <ContactMobile />
+      </Wrapper>
+      <Wrapper>
+        <ContactTypeDropdown />
+        <ActionDropdown />
+      </Wrapper>
+      <Wrapper>
+        <DeliveryDate />
+        <TimedServiceDropdown />
+      </Wrapper>
+    </Container>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  gap: 15px;
+  width: 100%;
+  .contact-type-dropdown,
+  .action-dropdown {
+    flex: 1;
+  }
+`;
+
+const AddressField = styled.p`
+  color: #3a3630;
+  font-family: 'Open Sans';
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  padding: 0;
+  margin: 0;
+`;
+
+const Title = styled.span`
+  color: #3a3630;
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+`;
+
+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 CustomerInformation;