feature/IO-3182-Phone-Number-Consent - Checkpoint

client/src/components/owner-detail-form/owner-detail-form.container.jsx

@@ -1,69 +1,113 @@
 import { Button, Form, Popconfirm } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
-
-import React, { useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useMutation } from "@apollo/client";
+import { useApolloClient, useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { DELETE_OWNER, UPDATE_OWNER } from "../../graphql/owners.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors"; // Adjust path
+import { checkPhoneOptOutStatus } from "../../utils/phoneOptOutService.js"; // Adjust path
 import OwnerDetailFormComponent from "./owner-detail-form.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { phone } from "phone"; // Import phone utility for formatting
 
-function OwnerDetailFormContainer({ owner, refetch }) {
+// Connect to Redux to access bodyshop
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+function OwnerDetailFormContainer({ owner, refetch, bodyshop }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-  const history = useNavigate();
+  const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
+  const [optedOutPhones, setOptedOutPhones] = useState(new Set());
   const [updateOwner] = useMutation(UPDATE_OWNER);
   const [deleteOwner] = useMutation(DELETE_OWNER);
   const notification = useNotification();
+  const apolloClient = useApolloClient();
+
+  // Fetch opt-out status on mount
+  useEffect(() => {
+    const fetchOptOutStatus = async () => {
+      if (bodyshop?.id && (owner?.ownr_ph1 || owner?.ownr_ph2)) {
+        const phoneNumbers = [owner.ownr_ph1, owner.ownr_ph2].filter(Boolean);
+        const optOutSet = await checkPhoneOptOutStatus(apolloClient, bodyshop.id, phoneNumbers);
+        setOptedOutPhones(optOutSet);
+      }
+    };
+
+    fetchOptOutStatus();
+  }, [apolloClient, bodyshop?.id, owner?.ownr_ph1, owner?.ownr_ph2]);
+
+  // Reset form fields when owner changes
+  useEffect(() => {
+    form.setFieldsValue({
+      ownr_ph1: owner?.ownr_ph1,
+      ownr_ph2: owner?.ownr_ph2,
+      ...owner
+    });
+  }, [owner, form]);
 
   const handleDelete = async () => {
     setLoading(true);
-    const result = await deleteOwner({
-      variables: { id: owner.id }
-    });
-    console.log(result);
-    if (result.errors) {
+    try {
+      const result = await deleteOwner({
+        variables: { id: owner.id }
+      });
+      if (result.errors) {
+        notification.error({
+          message: t("owners.errors.deleting", {
+            error: JSON.stringify(result.errors)
+          })
+        });
+      } else {
+        notification.success({
+          message: t("owners.successes.delete")
+        });
+        navigate(`/manage/owners`);
+      }
+    } catch (error) {
       notification.error({
         message: t("owners.errors.deleting", {
-          error: JSON.stringify(result.errors)
+          error: error.message
         })
       });
+    } finally {
       setLoading(false);
-    } else {
-      notification.success({
-        message: t("owners.successes.delete")
-      });
-      setLoading(false);
-      history(`/manage/owners`);
     }
   };
 
   const handleFinish = async (values) => {
     setLoading(true);
-    const result = await updateOwner({
-      variables: { ownerId: owner.id, owner: values }
-    });
-
-    if (!!result.errors) {
+    try {
+      const result = await updateOwner({
+        variables: { ownerId: owner.id, owner: values }
+      });
+      if (result.errors) {
+        notification.error({
+          message: t("owners.errors.saving", {
+            error: JSON.stringify(result.errors)
+          })
+        });
+      } else {
+        notification.success({
+          message: t("owners.successes.save")
+        });
+        if (refetch) await refetch();
+        form.resetFields();
+      }
+    } catch (error) {
       notification.error({
         message: t("owners.errors.saving", {
-          error: JSON.stringify(result.errors)
+          error: error.message
         })
       });
+    } finally {
       setLoading(false);
-      return;
     }
-
-    notification.success({
-      message: t("owners.successes.save")
-    });
-
-    if (refetch) await refetch();
-    form.resetFields();
-    form.resetFields();
-    setLoading(false);
   };
 
   return (
@@ -72,6 +116,7 @@ function OwnerDetailFormContainer({ owner, refetch }) {
         title={t("menus.header.owners")}
         extra={[
           <Popconfirm
+            key="delete"
             trigger="click"
             onConfirm={handleDelete}
             disabled={owner.jobs.length !== 0}
@@ -81,16 +126,25 @@ function OwnerDetailFormContainer({ owner, refetch }) {
               {t("general.actions.delete")}
             </Button>
           </Popconfirm>,
-          <Button type="primary" loading={loading} onClick={() => form.submit()}>
+          <Button key="save" type="primary" loading={loading} onClick={() => form.submit()}>
             {t("general.actions.save")}
           </Button>
         ]}
       />
       <Form form={form} onFinish={handleFinish} autoComplete="off" layout="vertical" initialValues={owner}>
-        <OwnerDetailFormComponent loading={loading} form={form} />
+        <OwnerDetailFormComponent
+          loading={loading}
+          form={form}
+          isPhone1OptedOut={
+            owner?.ownr_ph1 && optedOutPhones.has(phone(owner.ownr_ph1, "CA").phoneNumber?.replace(/^\+1/, ""))
+          }
+          isPhone2OptedOut={
+            owner?.ownr_ph2 && optedOutPhones.has(phone(owner.ownr_ph2, "CA").phoneNumber?.replace(/^\+1/, ""))
+          }
+        />
       </Form>
     </>
   );
 }
 
-export default OwnerDetailFormContainer;
+export default connect(mapStateToProps)(OwnerDetailFormContainer);