@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import React from 'react';
+import { TextArea } from '@bjsdistribution/dms-component-library';
+
+function Notes({ onNotesChange }: { onNotesChange: (notes: string) => void }) {
+  const handleTextChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onNotesChange(event.target.value);
+  };
+
+  return (
+    <Container>
+      <Label>Notes</Label>
+      <TextArea rows={15} onChange={handleTextChange} />
+    </Container>
+  );
+}
+
+const Label = styled.span`
+  color: #6a7378;
+  font-family: 'Lato', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+`;
+
+const Container = styled.div`
+  display: flex;
+  gap: 5px;
+  flex-direction: column;
+  width: 100%;
+`;
+
+export default Notes;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import Checkbox from '../../../../../common/checkbox';
+import { getIcon } from './helper';
+
+function OrderServices() {
+  // TO DO -> get services from static data
+  return (
+    <Container>
+      <Checkbox checked={false} label="Assemble" imageSrc={getIcon(1)} />
+      <Checkbox checked={false} label="Disassemble" imageSrc={getIcon(2)} />
+      <Checkbox checked label="Unpack Items" imageSrc={getIcon(3)} />
+      <Checkbox checked label="Collect Disposal" imageSrc={getIcon(5)} />
+      <Checkbox
+        checked={false}
+        label="Take Package Away"
+        imageSrc={getIcon(4)}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  gap: 15px;
+  flex-wrap: wrap;
+`;
+
+export default OrderServices;

package/src/components/order-view/order-actions/actions/log-service-refusal/helper.ts

@@ -0,0 +1,26 @@
+const baseURL = "/assets/images/";
+
+// export type ServiceOffered =
+//   | "Assemble"
+//   | "Take Packaging Away"
+//   | "Disassemble"
+//   | "Collect Disposal"
+//   | "Unpack Items";
+
+export const paths: Record<number, string> = {
+  1: 'assembly.svg', //1
+  2: 'disassembly.svg', //2
+  3: 'unpack_items.svg', //3
+  4: 'packaging_removal.svg', //4
+  5: 'collect_disposal.svg', //5
+};
+
+export const getSubPath = (input: number): string => {
+  const result = paths[input];
+  return result;
+};
+
+export const getIcon = (input: number): string => {
+  const subPath = getSubPath(input);
+  return `${baseURL}${subPath}`;
+};

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import styled from 'styled-components';
+import DeliveryPoint from './DeliveryPoint';
+import OrderServices from './OrderServices';
+import Notes from './Notes';
+import { useCurrentAction } from '../../../store';
+
+function LogServiceRefusal() {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const onClose = () => {
+    setCurrentAction(undefined);
+  };
+  return (
+    <OrderActionModal
+      headerTitle="Service Refusal"
+      showAdditionalInfo
+      infoText="CURTIS RADCLIFFE, PR5 5TD"
+      submitBtnTitle="Log Refusal"
+      onCloseHeader={onClose}
+      onSubmit={() => {}}
+    >
+      <ContentContainer>
+        <Left>
+          <DeliveryPoint />
+          <OrderServices />
+        </Left>
+        <Right>
+          <Notes onNotesChange={() => console.log('object')} />
+        </Right>
+      </ContentContainer>
+    </OrderActionModal>
+  );
+}
+
+const ContentContainer = styled.div`
+  display: flex;
+  padding: 0px 15px;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+`;
+
+const Left = 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;
+`;
+
+const Right = styled(Left)``;
+
+export default LogServiceRefusal;

package/src/components/order-view/order-actions/actions/modalstyle.tsx

@@ -0,0 +1,407 @@
+import { Input, TextArea } from '@bjsdistribution/dms-component-library';
+import styled from 'styled-components';
+
+export const IconContainer = styled.div`
+  cursor: pointer;
+`;
+
+export const StyledInput = styled(Input)`
+  border-radius: 66px;
+  min-width: 700px;
+`;
+
+export const StyledTextArea = styled(TextArea)`
+  display: flex;
+  padding: 12px;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: 10px;
+  border: 1px solid #e0e2e7;
+  background: #fff;
+  resize: none;
+  min-height: 200px;
+`;
+
+export const StyledTextAreas = styled(TextArea)`
+  display: flex;
+  padding: 12px;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: 10px;
+  border: 1px solid #e0e2e7;
+  background: #fff;
+  resize: none;
+  min-height: 50px;
+`;
+
+export const SplitLayout = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+`;
+
+export const SplitText = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  flex-direction: column;
+  margin-bottom: 4px;
+`;
+
+export const Row = styled.div`
+  flex: 1 0 0;
+  display: grid;
+  gap: 5px;
+  justify-content: center;
+`;
+export const HoldRow = styled.div`
+  flex: 1 0 0;
+  display: grid;
+  gap: 5px;
+  justify-content: center;
+  /* margin-bottom: 25px; */
+`;
+
+export const Label = styled.label`
+  color: #758588;
+  font-family: 'Lato', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+`;
+
+export const ContentContainer = styled.div`
+  display: flex;
+  padding: 12px 12px;
+  margin: 5px 14px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 15px;
+  flex: 1 0 0;
+  border-radius: 15px;
+  background: #f8fafc;
+`;
+export const HoldContentContainer = styled.div`
+  display: flex;
+  padding: 20px 20px;
+  margin: 5px 14px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 15px;
+  flex: 1 0 0;
+  border-radius: 15px;
+`;
+
+export const Container = styled.div`
+  border-radius: 15px;
+  border: 1px solid #e0e2e7;
+  background: #fff;
+  display: flex;
+  padding: 15px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 15px;
+  flex: 1 0 0;
+  width: 450px;
+`;
+
+export const StaticText = styled.div`
+  color: #3a3630;
+  font-family: 'lato', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 18px; /* 128.571% */
+  flex: 1 0 0;
+`;
+
+export const ImageCircle = styled.div`
+  display: flex;
+  padding: 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 50px;
+  background: #f2f4f6;
+`;
+
+export const ImageRow = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+  align-self: stretch;
+`;
+export const HoldFooterText = styled.div`
+  color: #aea9a1;
+  font-family: 'lato', sans-serif;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 32px;
+  margin-bottom: 22px;
+`;
+export const FooterText = styled.div`
+  color: #aea9a1;
+  font-family: 'lato', sans-serif;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+`;
+
+export const HoldDatePickerWrap = styled.div`
+  position: relative;
+  border-radius: 66px;
+  border: 1px solid #e0e2e7;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+
+  input[type='text'] {
+    border-radius: 20px;
+    background: #fff;
+    border: none;
+    color: #6a7378;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    padding: 10px 0;
+    padding-left: 33px;
+    min-width: 21.5vw;
+    &:focus-visible {
+      outline: none;
+    }
+  }
+  svg {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .react-datepicker-wrapper {
+    background-color: white;
+    border-radius: 66px;
+  }
+  .ant-picker-outlined {
+    border-style: none;
+    border-radius: 66px;
+    outline: none;
+    width: 346px;
+  }
+`;
+
+export const DatePickerWrap = styled.div`
+  position: relative;
+
+  border-radius: 66px;
+  border: 1px solid #e0e2e7;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+
+  input[type='text'] {
+    border-radius: 20px;
+    background: #fff;
+    border: none;
+    color: #6a7378;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    padding: 10px 0;
+    padding-left: 33px;
+    min-width: 18vw;
+    &:focus-visible {
+      outline: none;
+    }
+  }
+  svg {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .react-datepicker-wrapper {
+    background-color: white;
+    border-radius: 66px;
+  }
+  .ant-picker-outlined {
+    border-style: none;
+    border-radius: 66px;
+    outline: none;
+    width: 100%;
+  }
+`;
+
+export const DeleteCircleIcon = styled.div`
+  border-radius: 20px;
+  border: 1px solid #e2e0db;
+  background: #fff;
+  display: flex;
+  padding: 6px;
+  justify-content: center;
+  align-items: center;
+  height: 25px;
+  width: 25px;
+`;
+
+export const RoundedTableSkelton = styled.div`
+  margin-top: -8px;
+  min-height: auto;
+  max-height: 300px;
+  table {
+    border-collapse: separate;
+    width: 100%;
+    border-spacing: 0px 8px;
+    thead {
+      tr {
+        th {
+          font-size: 14px;
+          font-weight: 600;
+          padding: 8px 15px;
+          text-align: left;
+          border-top: 1px solid rgba(0, 0, 0, 0.08);
+          border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+
+          background: #f0f2f2;
+          &:first-child {
+            border-radius: 20px 0 0 20px;
+          }
+          &:last-child {
+            border-radius: 0 20px 20px 0;
+          }
+        }
+      }
+    }
+    tbody {
+      tr {
+        td {
+          color: #3a3630;
+          font-size: 13px;
+          font-weight: 400;
+          line-height: 16px;
+          padding: 6px 15px;
+          text-align: left;
+          box-shadow: 3px 1px 3px 0px rgba(16, 24, 40, 0.1);
+
+          background: #fff;
+
+          &:first-child {
+            border-radius: 20px 0 0 20px;
+          }
+
+          &:last-child {
+            border-radius: 0 20px 20px 0;
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const TableWrapper = styled.div`
+  width: 800px;
+  min-height: 200px;
+  max-height: 400px;
+`;
+
+export const TableContainer = styled.div`
+  max-height: 200px; /* Adjust height as needed */
+  overflow-y: auto;
+  position: relative;
+
+  &::-webkit-scrollbar {
+    width: 8px; /* Adjust width for thin scrollbar */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2); /* Adjust color and transparency */
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar {
+    display: none; /* Hide the scrollbar */
+  }
+
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+`;
+
+export const StyledTable = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+`;
+
+export const StyledThead = styled.thead`
+  position: sticky;
+  top: 0;
+  background: white;
+  z-index: 1;
+`;
+
+export const Heading = styled.div`
+  color: #3a3630;
+  font-family: 'Roboto';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  text-transform: uppercase;
+`;
+
+export const SuccessText = styled.span`
+  color: #29cc6a;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+`;
+
+export const Td = styled.td`
+  color: #3a3630;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding: 5px 15px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-right: none;
+  border-left: none;
+`;
+
+export const StyledTr = styled.tr`
+  border-radius: 30px;
+  background: #fff;
+  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
+`;
+
+export const AmountContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const AmountSymbol = styled.span`
+  margin-right: 4px;
+`;
+
+export const StyledAmountInput = styled(Input)`
+  padding: 5px;
+  width: 50%;
+`;
+
+export const StatusWrapper = styled.div`
+  color: #3a3630;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+`;

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

@@ -0,0 +1,56 @@
+import {
+  CancelAndCompleteAction,
+  CancelationModal,
+} from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { useCurrentAction, useOrderDetails } from '../../../store';
+import useUpdateOrder from '../../../hooks/useUpdateOrder';
+
+function OrderLock() {
+  const [, setCurrentAction] = useCurrentAction();
+  const [orderDetails, setOrderdetails] = useOrderDetails();
+  const lockOrder = useUpdateOrder();
+  const title =
+    orderDetails?.order_locked === true ? 'Unlocking Order' : 'Locking Order';
+  const action = orderDetails?.order_locked === true ? 'Unlock' : 'Lock';
+
+  const onClose = () => {
+    setCurrentAction(undefined);
+  };
+
+  const onComplete = async () => {
+    const isLocked =
+      orderDetails?.order_locked === null ? false : orderDetails?.order_locked;
+    const payload = [{ id: orderDetails?.id, order_locked: !isLocked }];
+    const response = await lockOrder(payload);
+    if (response.data) {
+      setOrderdetails(response.data[0]);
+    }
+    onClose();
+  };
+  return (
+    <CustomCancelationModal
+      title={title}
+      description={`Are you sure want to ${action} this order?`}
+      actions={
+        <CustomCancelAndCompleteAction
+          cancelLabel="cancel"
+          onCancel={onClose}
+          completeLabel="confirm"
+          onComplete={onComplete}
+        />
+      }
+    />
+  );
+}
+
+const CustomCancelationModal = styled(CancelationModal)`
+  background: rgba(0, 0, 0, 0.8);
+`;
+
+const CustomCancelAndCompleteAction = styled(CancelAndCompleteAction)`
+  justify-content: center;
+`;
+
+export default OrderLock;

package/src/components/order-view/order-actions/actions/release-order/ReleaseOrder.tsx

@@ -0,0 +1,39 @@
+import { Alert } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { useCurrentAction } from '../../../store';
+
+function ReleaseOrder() {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const onClose = () => {
+    setCurrentAction(undefined);
+  };
+
+  return (
+    <ReleaseContainer>
+      <Alert
+        type="info"
+        title="Release"
+        description="Order Already Released"
+        onClose={() => alert(onClose())}
+        showCloseIcon={true} // Show or hide the close icon
+        showOkButton={true} // Show or hide the OK button
+        styleAlert="rounded" // Set the style variant of the alert
+      />
+    </ReleaseContainer>
+  );
+}
+
+const ReleaseContainer = styled.div`
+  top: -114px;
+  right: 81px;
+  opacity: 1;
+  overflow: unset;
+  color: inherit;
+  pointer-events: auto;
+  position: absolute;
+  transform: translate3d(57px, 308px, 0px) scaleX(1);
+`;
+
+export default ReleaseOrder;