@bjsdistribution/dms-client-return 0.0.1

package/src/components/order-view/general-information/dropdowns/Options.tsx

@@ -0,0 +1,68 @@
+import {
+  SelectDropdown,
+  dropdownStyles,
+  filterDropdownStyles,
+} from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { OptionsMenu } from '../../fakedata';
+import { useCurrentAction, useIsOnHoldOrder } from '../../store';
+
+function Options() {
+  const [, setCurrentAction] = useCurrentAction();
+  const [hold] = useIsOnHoldOrder();
+
+  const handleSelectChange = (selectedOption: any) => {
+    setCurrentAction(selectedOption.value);
+  };
+
+  const filteredOptions = OptionsMenu.filter(option => {
+    if (hold) {
+      return option.value !== 'hold-order';
+    } else {
+      return option.value !== 'unhold-order';
+    }
+  });
+
+  return (
+    <Option>
+      <SelectDropdown
+        placeholder="OPTIONS"
+        inputId="bjsmenu"
+        options={filteredOptions}
+        onChange={handleSelectChange}
+        isSearchable={false}
+        styles={{
+          ...dropdownStyles,
+          ...filterDropdownStyles,
+          container: styles => ({
+            ...styles,
+            cursor: 'pointer',
+          }),
+          menu: styles => ({
+            ...styles,
+            top: '113%',
+            borderRadius: '5px',
+            width: 'max-content',
+            cursor: 'pointer',
+          }),
+          control: styles => ({
+            ...styles,
+            width: '105px',
+            boxShadow: 'none',
+            borderColor: 'transparent',
+            cursor: 'pointer',
+            '&:hover': {
+              boxShadow: 'none',
+              borderColor: 'transparent',
+            },
+          }),
+        }}
+        value="OPTIONS"
+      />
+    </Option>
+  );
+}
+const Option = styled.div``;
+
+export default Options;

package/src/components/order-view/general-information/dropdowns/Print.tsx

@@ -0,0 +1,48 @@
+import {
+  SelectDropdown,
+  dropdownStyles,
+  filterDropdownStyles,
+} from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { PrintMenu } from '../../fakedata';
+
+function Print() {
+  return (
+    <Container>
+      <SelectDropdown
+        placeholder="PRINT"
+        options={PrintMenu}
+        styles={{
+          ...dropdownStyles,
+          ...filterDropdownStyles,
+          container: styles => ({
+            ...styles,
+            cursor: 'pointer',
+          }),
+          menu: styles => ({
+            ...styles,
+            top: '113%',
+            borderRadius: '5px',
+            width: 'max-content',
+            cursor: 'pointer',
+          }),
+          control: styles => ({
+            ...styles,
+            width: '90px',
+            boxShadow: 'none',
+            borderColor: 'transparent',
+            cursor: 'pointer',
+            '&:hover': {
+              boxShadow: 'none',
+              borderColor: 'transparent',
+            },
+          }),
+        }}
+      />
+    </Container>
+  );
+}
+const Container = styled.div``;
+
+export default Print;

package/src/components/order-view/general-information/dropdowns/SendEmail.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FontContainer } from './helper';
+import { useCurrentAction } from '../../store';
+
+const SendEmail = () => {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const openModal = () => {
+    setCurrentAction('send-email');
+  };
+  return <FontContainer onClick={openModal}>Send Email</FontContainer>;
+};
+
+export default SendEmail;

package/src/components/order-view/general-information/dropdowns/SendSms.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FontContainer } from './helper';
+import { useCurrentAction } from '../../store';
+
+function SendSms() {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const openModal = () => {
+    setCurrentAction('send-sms');
+  };
+  return <FontContainer onClick={openModal}>Send SMS</FontContainer>;
+}
+
+export default SendSms;

package/src/components/order-view/general-information/dropdowns/Tasks.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FontContainer } from './helper';
+
+function Tasks () {
+  return <FontContainer>TASKS</FontContainer>;
+};
+
+export default Tasks;

package/src/components/order-view/general-information/dropdowns/Videos.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FontContainer } from './helper';
+
+function Videos () {
+  return <FontContainer>Videos</FontContainer>;
+};
+
+export default Videos;

package/src/components/order-view/general-information/dropdowns/ViewEpod.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FontContainer } from './helper';
+
+function ViewEpod() {
+  return <FontContainer>View ON EPOD</FontContainer>;
+}
+
+export default ViewEpod;

package/src/components/order-view/general-information/dropdowns/helper.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const FontContainer: any = styled.div`
+  color: #6a7378;
+  text-align: center;
+  font-family: 'lato', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+  text-transform: uppercase;
+  cursor: pointer;
+  @media screen and (max-width: 1210px) {
+    font-size: 11px;
+    line-height: 12px;
+  }
+`;

package/src/components/order-view/general-information/dropdowns/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+import BjsMenu from './BjsMenu';
+import CreateTask from './CreateTask';
+import Options from './Options';
+import Print from './Print';
+import ViewEpod from './ViewEpod';
+import SendSms from './SendSms';
+import Tasks from './Tasks';
+import Videos from './Videos';
+import SendEmail from './SendEmail';
+
+function DropDownOptions() {
+  return (
+    <Container>
+      <CreateTask />
+      <BjsMenu />
+      <Options />
+      <Print />
+      <ViewEpod />
+      <Tasks />
+      <Videos />
+      <SendEmail />
+      <SendSms />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  padding: 0 20px;
+  /* height: 40px; */
+  gap: 10px;
+  align-items: center;
+  border-top: 1px solid #ccc;
+  font-size: 14px;
+  cursor: pointer;
+
+  > * + * {
+    border-left: 1px solid #ccc;
+    padding-left: 10px;
+    height: 40px;
+    align-content: center;
+
+    @media screen and (max-width: 1210px) {
+      padding-left: 5px;
+    }
+  }
+
+  > :last-child {
+    border-right: 1px solid #ccc;
+    padding-right: 10px;
+  }
+
+  @media screen and (max-width: 1210px) {
+    flex-wrap: wrap;
+  }
+`;
+
+export default DropDownOptions;

package/src/components/order-view/general-information/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Status from './Status';
+// import LockOrder from './LockOrder';
+// import DropDownOptions from './dropdowns';
+import styled from 'styled-components';
+// import LockOrder from './LockOrder';
+
+function GeneralHeader() {
+  return (
+    <Section>
+      <Status />
+      {/* <LockOrder /> */}
+
+      {/* <LockOrder />
+
+      
+      <DropDownOptions /> */}
+    </Section>
+  );
+}
+
+const Section = styled.div`
+  /* display: flex;
+  background: #ffffff;
+  // padding: 15px;
+  flex-direction: column;
+  gap: 14px;
+  border-radius: 12px;
+  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
+  border: 1px solid #e0e0e0; */
+`;
+
+export default GeneralHeader;

package/src/components/order-view/helper.ts

@@ -0,0 +1,37 @@
+export const StatusOptions = [
+  {
+    label: 'Released',
+    value: 'released',
+  },
+  {
+    label: 'Recieved',
+    value: 'received',
+  },
+  {
+    label: 'Scheduled',
+    value: 'scheduled',
+  },
+  {
+    label: 'Routed',
+    value: 'routed',
+  },
+  {
+    label: 'Confirmed',
+    value: 'confirmed',
+  },
+  {
+    label: 'Delivered',
+    value: 'delivered',
+  },
+];
+
+  export const notesTypeOptions = [
+    {
+      label: 'Public',
+      value: 'public',
+    },
+    {
+      label: 'Private',
+      value: 'private',
+    },
+  ];

package/src/components/order-view/hooks/useUpdateOrder.ts

@@ -0,0 +1,48 @@
+import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
+import { getCookie } from '../utils';
+
+function useUpdateOrder() {
+  let controller: AbortController;
+  const ssoToken = getCookie('id_token');
+
+  const update = async (data: any) => {
+    const endpoint = `${getBaseEndpoint()}/orders/update/`;
+
+    if (controller) {
+      controller.abort();
+    }
+
+    // Create new AbortController
+    controller = new AbortController();
+    const signal = controller.signal;
+    // setLoading(true); // Set loading to true
+    try {
+      const requestOptions = {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${ssoToken}`,
+        },
+        method: 'PUT',
+        body: JSON.stringify(data),
+        signal,
+      };
+      const response = await fetch(endpoint, requestOptions);
+      if (!response.ok) {
+        // setLoading(false);
+        throw new Error('response is not ok');
+      }
+      const json = await response.json();
+      alert('Order has been updated');
+      return json;
+    } catch (err) {
+      //   setLoading(false);
+      console.log(err, 'error');
+    } finally {
+      //   setLoading(false); // Set loading to false after fetching
+    }
+  };
+
+  return update;
+}
+
+export default useUpdateOrder;