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

client/src/components/phone-number-consent/phone-number-consent.component.jsx

@@ -1,14 +1,17 @@
 import { useQuery } from "@apollo/client";
-import { Input, Table } from "antd";
+import { Input, Space, Table, Typography } from "antd";
+import { Link } from "react-router-dom";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { GET_PHONE_NUMBER_OPT_OUTS, SEARCH_OWNERS_BY_PHONE_NUMBERS } from "../../graphql/phone-number-opt-out.queries";
-
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import { TimeAgoFormatter } from "../../utils/DateFormatter";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+
+const { Paragraph } = Typography; // Destructure Paragraph from Typography
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -44,18 +47,6 @@ function PhoneNumberConsentList({ bodyshop, currentUser }) {
     fetchPolicy: "network-only"
   });
 
-  // Format owner names for display
-  const formatOwnerName = (owner) => {
-    const parts = [];
-    if (owner.ownr_fn || owner.ownr_ln) {
-      parts.push([owner.ownr_fn, owner.ownr_ln].filter(Boolean).join(" "));
-    }
-    if (owner.ownr_co_nm) {
-      parts.push(owner.ownr_co_nm);
-    }
-    return parts.join(", ") || "-";
-  };
-
   // Map phone numbers to their associated owners and identify phone field
   const getAssociatedOwners = (phoneNumber) => {
     if (!ownersData?.owners) return [];
@@ -102,15 +93,20 @@ function PhoneNumberConsentList({ bodyshop, currentUser }) {
         }
         return owners.map((owner) => (
           <div key={owner.id}>
-            {formatOwnerName(owner)} ({owner.phoneField})
+            <Space direction="horizontal">
+              <Link to={"/manage/owners/" + owner.id}>
+                <OwnerNameDisplay ownerObject={owner} />
+              </Link>
+              ({owner.phoneField})
+            </Space>
           </div>
         ));
       },
       sorter: (a, b) => {
         const aOwners = getAssociatedOwners(a.phone_number);
         const bOwners = getAssociatedOwners(b.phone_number);
-        const aName = aOwners[0] ? formatOwnerName(aOwners[0]) : "";
-        const bName = bOwners[0] ? formatOwnerName(bOwners[0]) : "";
+        const aName = aOwners[0] ? `${aOwners[0].ownr_fn} ${aOwners[0].ownr_ln}` : "";
+        const bName = bOwners[0] ? `${bOwners[0].ownr_fn} ${bOwners[0].ownr_ln}` : "";
         return aName.localeCompare(bName);
       }
     },
@@ -124,6 +120,7 @@ function PhoneNumberConsentList({ bodyshop, currentUser }) {
 
   return (
     <div>
+      <Paragraph>{t("consent.text_body")}</Paragraph>
       <Input.Search
         placeholder={t("general.labels.search")}
         onSearch={(value) => setSearch(value)}