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

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

@@ -1,14 +1,15 @@
-import { Form, Input } from "antd";
-import React from "react";
+import { Form, Input, Tooltip } from "antd";
+import { CloseCircleFilled } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
-import FormItemPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
 
-export default function OwnerDetailFormComponent({ form, loading }) {
+export default function OwnerDetailFormComponent({ form, loading, isPhone1OptedOut, isPhone2OptedOut }) {
   const { t } = useTranslation();
   const { getFieldValue } = form;
+
   return (
     <div>
       <FormFieldsChanged form={form} />
@@ -62,19 +63,55 @@ export default function OwnerDetailFormComponent({ form, loading }) {
         >
           <FormItemEmail email={getFieldValue("ownr_ea")} />
         </Form.Item>
-        <Form.Item
-          label={t("owners.fields.ownr_ph1")}
-          name="ownr_ph1"
-          rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ownr_ph1")]}
-        >
-          <FormItemPhone />
+        <Form.Item label={t("owners.fields.ownr_ph1")} style={{ marginBottom: 0 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+            <Form.Item
+              name="ownr_ph1"
+              noStyle
+              rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ownr_ph1")]}
+            >
+              <Input style={{ flex: 1, minWidth: "150px" }} />
+            </Form.Item>
+            {isPhone1OptedOut && (
+              <Tooltip title={t("consent.text_body")}>
+                <CloseCircleFilled
+                  style={{
+                    color: "#ff4d4f",
+                    fontSize: 16,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: "100%"
+                  }}
+                />
+              </Tooltip>
+            )}
+          </div>
         </Form.Item>
-        <Form.Item
-          label={t("owners.fields.ownr_ph2")}
-          name="ownr_ph2"
-          rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ownr_ph2")]}
-        >
-          <FormItemPhone />
+        <Form.Item label={t("owners.fields.ownr_ph2")} style={{ marginBottom: 0 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+            <Form.Item
+              name="ownr_ph2"
+              noStyle
+              rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ownr_ph2")]}
+            >
+              <Input style={{ flex: 1, minWidth: "150px" }} />
+            </Form.Item>
+            {isPhone2OptedOut && (
+              <Tooltip title={t("consent.text_body")}>
+                <CloseCircleFilled
+                  style={{
+                    color: "#ff4d4f",
+                    fontSize: 16,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: "100%"
+                  }}
+                />
+              </Tooltip>
+            )}
+          </div>
         </Form.Item>
         <Form.Item label={t("owners.fields.preferred_contact")} name="preferred_contact">
           <Input />

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);

client/src/utils/phoneOptOutService.js

@@ -0,0 +1,44 @@
+import { phone } from "phone";
+import { GET_PHONE_NUMBER_OPT_OUT } from "../graphql/phone-number-opt-out.queries";
+
+/**
+ * Check if phone numbers are opted out for a given bodyshop
+ * @param {Object} apolloClient - Apollo Client instance
+ * @param {string} bodyshopId - The ID of the bodyshop
+ * @param {string[]} phoneNumbers - Array of phone numbers to check
+ * @returns {Promise<Set<string>>} - Set of normalized opted-out phone numbers
+ */
+export const checkPhoneOptOutStatus = async (apolloClient, bodyshopId, phoneNumbers) => {
+  if (!apolloClient || !bodyshopId || !phoneNumbers?.length) {
+    return new Set();
+  }
+
+  // Normalize phone numbers (remove +1 for CA numbers)
+  const normalizedPhones = phoneNumbers
+    .filter(Boolean)
+    .map((num) => phone(num, "CA").phoneNumber?.replace(/^\+1/, ""))
+    .filter(Boolean);
+
+  const optedOutPhones = new Set();
+
+  for (const phoneNum of normalizedPhones) {
+    try {
+      const { data } = await apolloClient.query({
+        query: GET_PHONE_NUMBER_OPT_OUT,
+        variables: {
+          bodyshopid: bodyshopId,
+          phone_number: phoneNum // Single string
+        },
+        fetchPolicy: "network-only"
+      });
+
+      if (data?.phone_number_opt_out?.length) {
+        optedOutPhones.add(phoneNum);
+      }
+    } catch (error) {
+      console.error(`Error checking opt-out for ${phoneNum}:`, error);
+    }
+  }
+
+  return optedOutPhones;
+};