From 05d841159c61149b5c5855acaea689bb7f570d62 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Mon, 18 Jul 2022 10:39:07 -0700
Subject: [PATCH] CEC-2075 Remove supplier active directory id (#167)

* CEC-2075 Remove supplier oid

* Clean up
---
 .../Contexts/SupplierDetailsContext.jsx       | 36 ++++++++---
 .../Details/__snapshots__/index.test.js.snap  | 60 ++++-------------
 src/components/Suppliers/Details/index.js     | 55 +++++++++++-----
 .../List/__snapshots__/index.test.jsx.snap    | 64 +++++++++----------
 src/components/Suppliers/Table/index.jsx      | 12 ++--
 src/services/__mocks__/suppliersAPI.js        |  3 +
 src/services/suppliersAPI.js                  | 11 ++++
 src/utils/validationSupplier.js               |  4 --
 8 files changed, 134 insertions(+), 111 deletions(-)

diff --git a/src/components/Contexts/SupplierDetailsContext.jsx b/src/components/Contexts/SupplierDetailsContext.jsx
index a061c24..f3365fe 100644
--- a/src/components/Contexts/SupplierDetailsContext.jsx
+++ b/src/components/Contexts/SupplierDetailsContext.jsx
@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import api from "../../services/suppliersAPI";
+import { LocalDateTimeString } from "../../utils/dates";
 
 import {
   validateSupplier,
@@ -12,26 +13,26 @@ const SupplierDetailsContext = React.createContext();
 export const SupplierDetailsProvider = ({ children }) => {
   const { getSuppliers, suppliers } = useSupplierContext();
   const [busy, setBusy] = useState(false);
-  const [id, setID] = useState("");
   const [contact, setContact] = useState("");
   const [company, setCompany] = useState("");
   const [address, setAddress] = useState("");
   const [phone, setPhone] = useState("");
   const [program, setProgram] = useState("");
   const [ecus, setECUs] = useState("");
+  const [activated, setActivated] = useState(null);
 
   useEffect(() => {
     if (!suppliers || suppliers.length === 0) return;
 
     const supplier = suppliers[0];
 
-    setID(supplier?.id || "");
     setContact(supplier?.contact || "");
     setCompany(supplier?.company || "");
     setAddress(supplier?.address || "");
     setPhone(supplier?.telephone || "");
     setProgram(supplier?.program || "");
     setECUs(supplier?.ecus.join(",") || "");
+    setActivated(LocalDateTimeString(supplier?.activated));
   }, [suppliers]);
 
   const getSupplier = async (email, token) => {
@@ -55,7 +56,6 @@ export const SupplierDetailsProvider = ({ children }) => {
   };
 
   const formData = (email) => ({
-    id,
     contact,
     company,
     address,
@@ -65,6 +65,25 @@ export const SupplierDetailsProvider = ({ children }) => {
     ecus: getECUs(),
   });
 
+  const activateSupplier = async (email, token) => {
+    try {
+      setBusy(true);
+      validateEmail(email);
+
+      const result = await api.activateSupplier(email, token);
+      if (result.error)
+        throw new Error(`Activate supplier error. ${result.message}`);
+
+      setActivated(
+        LocalDateTimeString(result.activate) || new Date().toDateString()
+      );
+
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
   const updateSupplier = async (email, token) => {
     try {
       const supplier = formData(email);
@@ -80,14 +99,15 @@ export const SupplierDetailsProvider = ({ children }) => {
     }
   };
 
-  const deleteSupplier = async (vin, token) => {
+  const deleteSupplier = async (email, token) => {
     try {
       setBusy(true);
-      validateEmail(vin);
+      validateEmail(email);
 
-      const result = await api.deleteSupplier(vin, token);
+      const result = await api.deleteSupplier(email, token);
       if (result.error)
         throw new Error(`Delete supplier error. ${result.message}`);
+
       return result;
     } finally {
       setBusy(false);
@@ -97,18 +117,18 @@ export const SupplierDetailsProvider = ({ children }) => {
   return (
     <SupplierDetailsContext.Provider
       value={{
+        activated,
         busy,
-        id,
         contact,
         company,
         address,
         phone,
         program,
         ecus,
+        activateSupplier,
         deleteSupplier,
         getSupplier,
         updateSupplier,
-        setID,
         setContact,
         setCompany,
         setAddress,
diff --git a/src/components/Suppliers/Details/__snapshots__/index.test.js.snap b/src/components/Suppliers/Details/__snapshots__/index.test.js.snap
index ba15850..19762d3 100644
--- a/src/components/Suppliers/Details/__snapshots__/index.test.js.snap
+++ b/src/components/Suppliers/Details/__snapshots__/index.test.js.snap
@@ -19,52 +19,6 @@ exports[`Supplier page Render 1`] = `
             class="makeStyles-form-5"
             novalidate=""
           >
-            <div
-              class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-            >
-              <label
-                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                data-shrink="false"
-                for="id"
-                id="id-label"
-              >
-                Active Directory ID
-                <span
-                  aria-hidden="true"
-                  class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                >
-                   
-                  *
-                </span>
-              </label>
-              <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input MuiOutlinedInput-input"
-                  id="id"
-                  maxlength="255"
-                  name="id"
-                  required=""
-                  type="text"
-                  value=""
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-64"
-                  >
-                    <span>
-                      Active Directory ID
-                       *
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
             <div
               class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
             >
@@ -341,6 +295,20 @@ exports[`Supplier page Render 1`] = `
                 </fieldset>
               </div>
             </div>
+            <button
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedSecondary MuiButton-fullWidth"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                Activate
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
             <button
               class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
               tabindex="0"
diff --git a/src/components/Suppliers/Details/index.js b/src/components/Suppliers/Details/index.js
index 0d32cc4..430ffef 100644
--- a/src/components/Suppliers/Details/index.js
+++ b/src/components/Suppliers/Details/index.js
@@ -15,7 +15,7 @@ const Main = () => {
   const classes = useStyles();
   const {
     busy,
-    id,
+    activated,
     contact,
     company,
     address,
@@ -23,13 +23,13 @@ const Main = () => {
     program,
     ecus,
     getSupplier,
-    setID,
     setContact,
     setCompany,
     setAddress,
     setPhone,
     setProgram,
     setECUs,
+    activateSupplier,
     updateSupplier,
   } = useSupplierDetailsContext();
   const { setTitle, setSitePath, setMessage } = useStatusContext();
@@ -49,6 +49,16 @@ const Main = () => {
     }
   };
 
+  const activate = async (event) => {
+    event.preventDefault();
+    try {
+      await activateSupplier(email, token);
+      setMessage(`Activated ${email}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
   useEffect(() => {
     setTitle(`Supplier ${email}`);
     setSitePath([
@@ -74,20 +84,6 @@ const Main = () => {
   return (
     <div className={classes.paper}>
       <form className={classes.form} noValidate action="#">
-        <TextField
-          id="id"
-          name="id"
-          label="Active Directory ID"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          required
-          fullWidth
-          value={id}
-          onChange={(e) => setID(e.target.value)}
-        />
         <TextField
           id="contact"
           name="contact"
@@ -172,6 +168,33 @@ const Main = () => {
           value={ecus}
           onChange={(e) => setECUs(e.target.value)}
         />
+        {activated ? (
+          <TextField
+            id="activated"
+            name="activated"
+            label="Activated"
+            variant="outlined"
+            margin="normal"
+            inputProps={{
+              maxLength: "255",
+              readOnly: true,
+            }}
+            required
+            fullWidth
+            value={activated}
+          />
+        ) : (
+          <Button
+            disabled={busy}
+            fullWidth
+            variant="contained"
+            color="secondary"
+            className={classes.submit}
+            onClick={activate}
+          >
+            Activate
+          </Button>
+        )}
         <Button
           type="submit"
           disabled={busy}
diff --git a/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap b/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
index 6ba1aae..87220e7 100644
--- a/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
+++ b/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
@@ -23,29 +23,6 @@ exports[`Suppliers page Render 1`] = `
               <tr
                 class="MuiTableRow-root MuiTableRow-head"
               >
-                <th
-                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                  scope="col"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiTableSortLabel-root"
-                    role="button"
-                    tabindex="0"
-                  >
-                    ID
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                      />
-                    </svg>
-                  </span>
-                </th>
                 <th
                   class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                   scope="col"
@@ -190,6 +167,29 @@ exports[`Suppliers page Render 1`] = `
                     </svg>
                   </span>
                 </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Activated
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
               </tr>
             </thead>
             <tbody
@@ -198,9 +198,6 @@ exports[`Suppliers page Render 1`] = `
               <tr
                 class="MuiTableRow-root"
               >
-                <td
-                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                />
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 >
@@ -239,13 +236,13 @@ exports[`Suppliers page Render 1`] = `
                 >
                   7/14/2021 8:09:40 PM
                 </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
               </tr>
               <tr
                 class="MuiTableRow-root"
               >
-                <td
-                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                />
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 >
@@ -284,13 +281,13 @@ exports[`Suppliers page Render 1`] = `
                 >
                   7/16/2021 10:09:40 PM
                 </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
               </tr>
               <tr
                 class="MuiTableRow-root"
               >
-                <td
-                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                />
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 >
@@ -329,6 +326,9 @@ exports[`Suppliers page Render 1`] = `
                 >
                   7/16/2021 10:09:40 PM
                 </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
               </tr>
             </tbody>
             <tfoot
diff --git a/src/components/Suppliers/Table/index.jsx b/src/components/Suppliers/Table/index.jsx
index 09abf43..2de71e7 100644
--- a/src/components/Suppliers/Table/index.jsx
+++ b/src/components/Suppliers/Table/index.jsx
@@ -18,10 +18,6 @@ import TableHeaderSortable from "../../Table/HeaderSortable";
 import { logger } from "../../../services/monitoring";
 
 const tableColumns = [
-  {
-    id: "id",
-    label: "ID",
-  },
   {
     id: "contact",
     label: "Contact",
@@ -46,6 +42,10 @@ const tableColumns = [
     id: "created_at",
     label: "Registered",
   },
+  {
+    id: "activated_at",
+    label: "Activated",
+  },
 ];
 
 const SupplierTable = (props) => {
@@ -119,7 +119,6 @@ const SupplierTable = (props) => {
           {suppliers.map((row, index) => {
             return (
               <TableRow key={index}>
-                <TableCell align="center">{row?.id}</TableCell>
                 <TableCell align="center">
                   <Link to={`/supplier/${row.email}`}>{row.contact}</Link>
                 </TableCell>
@@ -132,6 +131,9 @@ const SupplierTable = (props) => {
                 <TableCell align="center">
                   {LocalDateTimeString(row.created)}
                 </TableCell>
+                <TableCell align="center">
+                  {LocalDateTimeString(row.activated)}
+                </TableCell>
               </TableRow>
             );
           })}
diff --git a/src/services/__mocks__/suppliersAPI.js b/src/services/__mocks__/suppliersAPI.js
index 3e39609..7c4f2e0 100644
--- a/src/services/__mocks__/suppliersAPI.js
+++ b/src/services/__mocks__/suppliersAPI.js
@@ -39,6 +39,9 @@ const suppliersAPI = {
     data.push(supplier);
     return supplier;
   },
+  activateSupplier: async (_email, _token) => {
+    return { message: "2022-07-14T21:02:58.998182Z" };
+  },
   deleteSupplier: async (email) => {
     const index = data.findIndex((element) => element.email === email);
     if (index >= 0) data.splice(index, 1);
diff --git a/src/services/suppliersAPI.js b/src/services/suppliersAPI.js
index ad9059e..efc6436 100644
--- a/src/services/suppliersAPI.js
+++ b/src/services/suppliersAPI.js
@@ -20,6 +20,17 @@ const suppliersAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler),
 
+  activateSupplier: async (email, token) =>
+    fetch(`${API_ENDPOINT}/supplier/activate/${email}`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler),
+
   deleteSupplier: async (email, token) =>
     fetch(`${API_ENDPOINT}/supplier/${email}`, {
       method: "DELETE",
diff --git a/src/utils/validationSupplier.js b/src/utils/validationSupplier.js
index afb2200..8c8eec7 100644
--- a/src/utils/validationSupplier.js
+++ b/src/utils/validationSupplier.js
@@ -7,10 +7,6 @@ export const validateSupplier = (supplier) => {
 
   validateEmail(supplier.email);
 
-  if (!supplier?.id) {
-    throw new Error("id required");
-  }
-
   if (!supplier?.contact) {
     throw new Error("contact required");
   }