@bjsdistribution/dms-client-return 0.0.1

package/src/components/order-view/order-actions/actions/update-product-type/UpdateProductType.tsx

@@ -0,0 +1,365 @@
+import React from 'react';
+
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+
+import {
+  // GLobalPopupInner,
+  // GLobalPopupHeader,
+  GLobalPopupContent,
+  TableSkelton,
+  CustomCheckBox,
+  ContentContainer,
+} from './UpdateProductTypeStyle';
+import { AntSelect } from '@bjsdistribution/dms-component-library';
+import { useCurrentAction } from '../../../store';
+
+export const options = [
+  { value: 'bjsCouriers', label: 'BJS COURIERS' },
+  { value: 'bjsSales', label: 'BJS SALES' },
+  { value: 'test', label: 'TEST' },
+];
+
+const UpdateProductType = () => {
+  const [, setCurrentAction] = useCurrentAction();
+
+  const onClose = () => {
+    setCurrentAction(undefined);
+  };
+  
+  const onChange = async (event: any) => {
+    console.log(event);
+  };
+
+  return (
+    // <GLobalPopupInner>
+    //   {/* <GLobalPopupHeader>
+    //     <div className="header">
+    //       <h2>
+    //         Bulk Update Product Type <i />
+    //       </h2>
+    //       <span className="label">Gemma Harris, LE12 6AW</span>
+    //     </div>
+    //   </GLobalPopupHeader> */}
+    //   <ShadowElement>
+    //     <GLobalPopupContent>
+    //       <section>
+    //         <div className="filterCover">
+    //           <div className="col">
+    //             <label>Collection Reason</label>
+    //             <AntSelect
+    //               options={options}
+    //               placeholder="Select Collection Reason"
+    //               onChange={onChange}
+    //               disabled={false}
+    //               // style={{ width: 120 }}
+    //               popupClassName={'dropDownStyle'}
+    //               selectWrapperClass={'rounded'}
+    //               defaultValue={'Select Collection Reason'}
+    //             ></AntSelect>
+    //           </div>
+    //           <div className="col">
+    //             <label>Collection Reason</label>
+    //             <AntSelect
+    //               options={options}
+    //               placeholder="Return Action"
+    //               onChange={onChange}
+    //               disabled={false}
+    //               // style={{ width: 120 }}
+    //               popupClassName={'dropDownStyle'}
+    //               selectWrapperClass={'rounded'}
+    //               defaultValue={'Select Return Action'}
+    //             ></AntSelect>
+    //           </div>
+    //           <div className="col">
+    //             <label>Collection Reason</label>
+    //             <AntSelect
+    //               options={options}
+    //               placeholder="Return Reason"
+    //               onChange={onChange}
+    //               disabled={false}
+    //               // style={{ width: 120 }}
+    //               popupClassName={'dropDownStyle'}
+    //               selectWrapperClass={'rounded'}
+    //               defaultValue={'Select Return Reason'}
+    //             ></AntSelect>
+    //           </div>
+    //         </div>
+    //       </section>
+    //       <TableSkelton>
+    //         <table>
+    //           <thead>
+    //             <tr>
+    //               <th>
+    //                 <CustomCheckBox>
+    //                   <label className="container">
+    //                     <input type="checkbox" />
+    //                     <span className="checkmark"></span>
+    //                   </label>
+    //                 </CustomCheckBox>
+    //               </th>
+    //               <th>Status</th>
+    //               <th>Code</th>
+    //               <th>Description</th>
+    //               <th>SKU</th>
+    //             </tr>
+    //           </thead>
+    //           <tbody>
+    //             <tr>
+    //               <td>
+    //                 <CustomCheckBox>
+    //                   <label className="container">
+    //                     <input type="checkbox" />
+    //                     <span className="checkmark"></span>
+    //                   </label>
+    //                 </CustomCheckBox>
+    //               </td>
+    //               <td>
+    //                 <AntSelect
+    //                   options={options}
+    //                   placeholder="Select Collection Reason"
+    //                   onChange={onChange}
+    //                   disabled={false}
+    //                   // style={{ width: 120 }}
+    //                   popupClassName={'dropDownStyle'}
+    //                   selectWrapperClass={'rounded'}
+    //                   defaultValue={'Select Collection Reason'}
+    //                 ></AntSelect>
+    //               </td>
+    //               <td>FFLMW-B1</td>
+    //               <td>
+    //                 Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST
+    //                 OF 3 TABLES - OAK
+    //               </td>
+    //               <td>007022530015429326</td>
+    //             </tr>
+    //             <tr>
+    //               <td>
+    //                 <CustomCheckBox>
+    //                   <label className="container">
+    //                     <input type="checkbox" />
+    //                     <span className="checkmark"></span>
+    //                   </label>
+    //                 </CustomCheckBox>
+    //               </td>
+    //               <td>
+    //                 <AntSelect
+    //                   options={options}
+    //                   placeholder="Select Collection Reason"
+    //                   onChange={onChange}
+    //                   disabled={false}
+    //                   // style={{ width: 120 }}
+    //                   popupClassName={'dropDownStyle'}
+    //                   selectWrapperClass={'rounded'}
+    //                   defaultValue={'Select Collection Reason'}
+    //                 ></AntSelect>
+    //               </td>
+    //               <td>FFLMW-B1</td>
+    //               <td>
+    //                 Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST
+    //                 OF 3 TABLES - OAK
+    //               </td>
+    //               <td>007022530015429326</td>
+    //             </tr>
+    //             <tr>
+    //               <td>
+    //                 <CustomCheckBox>
+    //                   <label className="container">
+    //                     <input type="checkbox" />
+    //                     <span className="checkmark"></span>
+    //                   </label>
+    //                 </CustomCheckBox>
+    //               </td>
+    //               <td>
+    //                 <AntSelect
+    //                   options={options}
+    //                   placeholder="Select Collection Reason"
+    //                   onChange={onChange}
+    //                   disabled={false}
+    //                   // style={{ width: 120 }}
+    //                   popupClassName={'dropDownStyle'}
+    //                   selectWrapperClass={'rounded'}
+    //                   defaultValue={'Select Collection Reason'}
+    //                 ></AntSelect>
+    //               </td>
+    //               <td>FFLMW-B1</td>
+    //               <td>
+    //                 Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST
+    //                 OF 3 TABLES - OAK
+    //               </td>
+    //               <td>007022530015429326</td>
+    //             </tr>
+    //           </tbody>
+    //         </table>
+    //       </TableSkelton>
+    //     </GLobalPopupContent>
+    //     <GLobalPopupFooter>
+    //       <div className="justifyEnd">
+    //         <a className="btn rounded">SUBMIT</a>
+    //         <a className="btn retringle">CONFIRM DELETE</a>
+    //       </div>
+    //     </GLobalPopupFooter>
+    //   </ShadowElement>
+    // </GLobalPopupInner>
+
+    <OrderActionModal
+      headerTitle="Bulk Update Product Type"
+      showAdditionalInfo
+      infoText="Gemma Harris, LE12 6AW"
+      onCloseHeader={onClose}
+      onSubmit={() => {}}
+    >
+      <ContentContainer>
+        <GLobalPopupContent>
+          <section>
+            <div className="filterCover">
+              <div className="col">
+                <label>Collection Reason</label>
+                <AntSelect
+                  options={options}
+                  placeholder="Select Collection Reason"
+                  onChange={onChange}
+                  disabled={false}
+                  popupClassName={'dropDownStyle'}
+                  selectWrapperClass={'rounded'}
+                  defaultValue={'Select Collection Reason'}
+                ></AntSelect>
+              </div>
+              <div className="col">
+                <label>Collection Reason</label>
+                <AntSelect
+                  options={options}
+                  placeholder="Return Action"
+                  onChange={onChange}
+                  disabled={false}
+                  popupClassName={'dropDownStyle'}
+                  selectWrapperClass={'rounded'}
+                  defaultValue={'Select Return Action'}
+                ></AntSelect>
+              </div>
+              <div className="col">
+                <label>Collection Reason</label>
+                <AntSelect
+                  options={options}
+                  placeholder="Return Reason"
+                  onChange={onChange}
+                  disabled={false}
+                  popupClassName={'dropDownStyle'}
+                  selectWrapperClass={'rounded'}
+                  defaultValue={'Select Return Reason'}
+                ></AntSelect>
+              </div>
+            </div>
+          </section>
+          <TableSkelton>
+            <table>
+              <thead>
+                <tr>
+                  <th>
+                    <CustomCheckBox>
+                      <label className="container">
+                        <input type="checkbox" />
+                        <span className="checkmark"></span>
+                      </label>
+                    </CustomCheckBox>
+                  </th>
+                  <th>Status</th>
+                  <th>Code</th>
+                  <th>Description</th>
+                  <th>SKU</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    <CustomCheckBox>
+                      <label className="container">
+                        <input type="checkbox" />
+                        <span className="checkmark"></span>
+                      </label>
+                    </CustomCheckBox>
+                  </td>
+                  <td>
+                    <AntSelect
+                      options={options}
+                      placeholder="Select Collection Reason"
+                      onChange={onChange}
+                      disabled={false}
+                      // style={{ width: 120 }}
+                      popupClassName={'dropDownStyle'}
+                      selectWrapperClass={'rounded'}
+                      defaultValue={'Select Collection Reason'}
+                    ></AntSelect>
+                  </td>
+                  <td>FFLMW-B1</td>
+                  <td>
+                    Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST
+                    OF 3 TABLES - OAK
+                  </td>
+                  <td>007022530015429326</td>
+                </tr>
+                <tr>
+                  <td>
+                    <CustomCheckBox>
+                      <label className="container">
+                        <input type="checkbox" />
+                        <span className="checkmark"></span>
+                      </label>
+                    </CustomCheckBox>
+                  </td>
+                  <td>
+                    <AntSelect
+                      options={options}
+                      placeholder="Select Collection Reason"
+                      onChange={onChange}
+                      disabled={false}
+                      // style={{ width: 120 }}
+                      popupClassName={'dropDownStyle'}
+                      selectWrapperClass={'rounded'}
+                      defaultValue={'Select Collection Reason'}
+                    ></AntSelect>
+                  </td>
+                  <td>FFLMW-B1</td>
+                  <td>
+                    Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST
+                    OF 3 TABLES - OAK
+                  </td>
+                  <td>007022530015429326</td>
+                </tr>
+                <tr>
+                  <td>
+                    <CustomCheckBox>
+                      <label className="container">
+                        <input type="checkbox" />
+                        <span className="checkmark"></span>
+                      </label>
+                    </CustomCheckBox>
+                  </td>
+                  <td>
+                    <AntSelect
+                      options={options}
+                      placeholder="Select Collection Reason"
+                      onChange={onChange}
+                      disabled={false}
+                      // style={{ width: 120 }}
+                      popupClassName={'dropDownStyle'}
+                      selectWrapperClass={'rounded'}
+                      defaultValue={'Select Collection Reason'}
+                    ></AntSelect>
+                  </td>
+                  <td>FFLMW-B1</td>
+                  <td>
+                    Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST
+                    OF 3 TABLES - OAK
+                  </td>
+                  <td>007022530015429326</td>
+                </tr>
+              </tbody>
+            </table>
+          </TableSkelton>
+        </GLobalPopupContent>
+      </ContentContainer>
+    </OrderActionModal>
+  );
+};
+
+export default UpdateProductType;

package/src/components/order-view/order-actions/actions/update-product-type/UpdateProductTypeStyle.tsx

@@ -0,0 +1,251 @@
+import styled from 'styled-components';
+
+export const ContentContainer = styled.div`
+  display: flex;
+  padding: 0px 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 15px;
+  flex: 1 0 0;
+  border-radius: 15px;
+`;
+
+export const GLobalPopupInner = styled.div`
+  padding: 10px;
+  border-radius: 16px;
+
+  * {
+    box-sizing: border-box;
+  }
+`;
+
+export const ShadowElement = styled.div`
+  box-shadow: -4px 3px 15px rgba(0, 0, 0, 0.2);
+  border-radius: 0 0 10px 10px;
+`;
+
+export const GLobalPopupHeader = styled.div`
+  .header {
+    background: linear-gradient(90deg, #313130 0%, rgba(0, 0, 0, 0.4) 100%),
+      linear-gradient(90deg, #191919 0%, #3a3630 100%);
+    display: flex;
+    height: 52px;
+    padding: 20px;
+    align-items: center;
+    gap: 10px;
+    border-radius: 15px 15px 0 0;
+  }
+  h2 {
+    color: #edebe8;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: 32px;
+    text-transform: uppercase;
+    margin: 0;
+    position: relative;
+    i {
+      width: 9px;
+      height: 45px;
+      position: absolute;
+      right: -14px;
+      top: -7px;
+      background: linear-gradient(180deg, #232221 0%, #232221 116.67%),
+        linear-gradient(90deg, #191919 0%, #3a3630 100%);
+      box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
+    }
+  }
+  .label {
+    color: #fff;
+    font-family: Lato;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    border-radius: 0px 15px 15px 0px;
+    background: rgba(63, 151, 188, 0.6);
+    box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.25) inset;
+    padding: 3px 10px;
+  }
+`;
+
+export const GLobalPopupContent = styled.div`
+  section {
+    padding: 0px 0 15px;
+    .filterCover {
+      border-radius: 16px;
+      border: 1px solid var(--tonal-brown-10, #edebe8);
+      background: #f8fafc;
+      display: flex;
+      gap: 30px;
+      padding: 15px;
+      gap: 15px;
+      .col {
+        width: 21%;
+        label {
+          color: #8d8f90;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 20px;
+          display: block;
+          margin-bottom: 4px;
+        }
+        .ant-select-single {
+          width: 100%;
+        }
+        select {
+          width: 100%;
+        }
+        &:first-child {
+          width: 43%;
+        }
+        &:last-child {
+          width: 33%;
+        }
+      }
+    }
+  }
+`;
+
+export const TableSkelton = styled.div`
+  margin-top: -8px;
+  min-height: auto;
+  width: 100%;
+
+  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 CustomCheckBox = styled.div`
+  .container {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    width: 20px;
+    height: 20px;
+  }
+
+  .container input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 100%;
+    width: 100%;
+  }
+
+  .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #cfcfcf;
+    border-radius: 4px;
+  }
+
+  .container:hover input ~ .checkmark {
+    border-color: #7f7a7a;
+  }
+
+  .container input:checked ~ .checkmark {
+    background-color: #000;
+  }
+
+  .checkmark:after {
+    content: '';
+    position: absolute;
+    display: none;
+  }
+
+  .container input:checked ~ .checkmark:after {
+    display: block;
+  }
+
+  .container .checkmark:after {
+    left: 8px;
+    top: 4px;
+    width: 3px;
+    height: 6px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+`;
+
+export const GLobalPopupFooter = styled.div`
+  border-top: 1px solid #edebe8;
+  background: #f8fafc;
+  padding: 10px 15px;
+  border-radius: 0 0 10px 10px;
+  .justifyEnd {
+    display: flex;
+    justify-content: end;
+    .btn {
+      padding: 6px 14px;
+      border-radius: 15px;
+      background: #3a3630;
+      color: #fff;
+      font-family: Lato;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+      &.retringle {
+        background: #fecdca;
+        border-radius: 6px;
+      }
+    }
+  }
+`;

package/src/components/order-view/order-actions/hooks/useAllReminderData.ts

@@ -0,0 +1,59 @@
+import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
+import { useOrderDetails } from '../../store';
+import { getCookie } from '../../utils';
+import { useReminderNotiData } from '../store';
+
+function useFetchReminders() {
+  const ssoToken = getCookie('id_token');
+  const [, setReminderData] = useReminderNotiData();
+  const [OrderData] = useOrderDetails();
+
+  const perform = async () => {
+    const endpoint = `${getBaseEndpoint()}/tasks/reminder/get/`;
+    try {
+      const headers = {
+        accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${ssoToken}`,
+        'x-pagination': JSON.stringify({
+          page: 1,
+          per_page: 100,
+        }),
+        'x-filters': JSON.stringify([
+          {
+            field: 'order_id',
+            op: '=',
+            value: `${OrderData.id}`,
+          },
+        ]),
+      };
+      const response = await fetch(endpoint, {
+        method: 'GET',
+        headers,
+      });
+      if (!response.ok) {
+        const json = await response.json();
+        const detail = json?.detail;
+        const msg = detail[0]?.msg;
+        console.error('Error response:', msg);
+        // setLoading(false);
+        return [];
+      }
+      const json = await response.json();
+      if (json.code === 200) {
+        // setLoading(false);
+        setReminderData(json.data);
+        return json.data;
+      }
+      return [];
+    } catch (err) {
+      console.error('Error fetching data:', err);
+      return [];
+    } finally {
+      //   setLoading(false);
+    }
+  };
+  return perform;
+}
+
+export default useFetchReminders;