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

import { useQuery } from "@apollo/client";
import { Input, Table, Typography } from "antd";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import { GET_PHONE_NUMBER_OPT_OUTS } from "../../graphql/phone-number-opt-out.queries";
import { TimeAgoFormatter } from "../../utils/DateFormatter";
import ChatOpenButton from "../chat-open-button/chat-open-button.component";
import { useTranslation } from "react-i18next";
import { useState } from "react";

const { Paragraph } = Typography;

// Commented out Associated Owners section for now
//import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
//import { Link } from "react-router-dom";
//import { useMemo, useState } from "react";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser
});

const mapDispatchToProps = () => ({});

function PhoneNumberConsentList({ bodyshop, currentUser }) {
  const { t } = useTranslation();
  const [search, setSearch] = useState("");

  // Fetch opt-out phone numbers
  const { loading: optOutLoading, data: optOutData } = useQuery(GET_PHONE_NUMBER_OPT_OUTS, {
    variables: { bodyshopid: bodyshop.id, search: search ? `%${search}%` : undefined },
    fetchPolicy: "network-only"
  });

  // Commented out Associated Owners section for now
  /*// Prepare phone numbers for owner query
  const phoneNumbers = useMemo(() => {
    return optOutData?.phone_number_opt_out?.map((item) => item.phone_number) || [];
  }, [optOutData?.phone_number_opt_out]);
  const allPhoneNumbers = useMemo(() => {
    const normalized = phoneNumbers;
    const withPlusOne = phoneNumbers.map((num) => `+1${num}`);
    return [...normalized, ...withPlusOne].filter(Boolean);
  }, [phoneNumbers]);

  // Fetch owners for all phone numbers
  const { loading: ownersLoading, data: ownersData } = useQuery(SEARCH_OWNERS_BY_PHONE_NUMBERS, {
    variables: { bodyshopid: bodyshop.id, phone_numbers: allPhoneNumbers },
    skip: allPhoneNumbers.length === 0 || !bodyshop.id,
    fetchPolicy: "network-only"
  });

  // Map phone numbers to their associated owners and identify phone field
  const getAssociatedOwners = (phoneNumber) => {
    if (!ownersData?.owners) return [];
    const normalizedPhone = phoneNumber.replace(/^\+1/, "");
    return ownersData.owners
      .filter(
        (owner) =>
          owner.ownr_ph1 === phoneNumber ||
          owner.ownr_ph2 === phoneNumber ||
          owner.ownr_ph1 === normalizedPhone ||
          owner.ownr_ph2 === normalizedPhone ||
          owner.ownr_ph1 === `+1${phoneNumber}` ||
          owner.ownr_ph2 === `+1${phoneNumber}`
      )
      .map((owner) => ({
        ...owner,
        phoneField:
          [owner.ownr_ph1, owner.ownr_ph2].includes(phoneNumber) ||
          [owner.ownr_ph1, owner.ownr_ph2].includes(normalizedPhone) ||
          [owner.ownr_ph1, owner.ownr_ph2].includes(`+1${phoneNumber}`)
            ? owner.ownr_ph1 === phoneNumber ||
              owner.ownr_ph1 === normalizedPhone ||
              owner.ownr_ph1 === `+1${phoneNumber}`
              ? t("consent.phone_1")
              : t("consent.phone_2")
            : null
      }));
  };*/

  const columns = [
    {
      title: t("consent.phone_number"),
      dataIndex: "phone_number",
      render: (text) => <ChatOpenButton phone={text} />,
      sorter: (a, b) => a.phone_number.localeCompare(b.phone_number)
    },
    // Commented out Associated Owners section for now
    /*{
      title: t("consent.associated_owners"),
      dataIndex: "phone_number",
      render: (phoneNumber) => {
        const owners = getAssociatedOwners(phoneNumber);
        if (!owners || owners.length === 0) {
          return t("consent.no_owners");
        }
        return owners.map((owner) => (
          <div key={owner.id}>
            <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] ? `${aOwners[0].ownr_fn} ${aOwners[0].ownr_ln}` : "";
        const bName = bOwners[0] ? `${bOwners[0].ownr_fn} ${bOwners[0].ownr_ln}` : "";
        return aName.localeCompare(bName);
      }
    },*/
    {
      title: t("consent.created_at"),
      dataIndex: "created_at",
      render: (text) => <TimeAgoFormatter>{text}</TimeAgoFormatter>,
      sorter: (a, b) => new Date(a.created_at) - new Date(b.created_at)
    }
  ];

  return (
    <div>
      <Paragraph>{t("consent.text_body")}</Paragraph>
      <Input.Search
        placeholder={t("general.labels.search")}
        onSearch={(value) => setSearch(value)}
        style={{ marginBottom: 16 }}
      />

      <Table
        columns={columns}
        dataSource={optOutData?.phone_number_opt_out}
        loading={optOutLoading /* || ownersLoading*/}
        rowKey="id"
        style={{ marginTop: 16 }}
      />
    </div>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(PhoneNumberConsentList);