diff --git a/src/pages/email/administration/contacts/edit.jsx b/src/pages/email/administration/contacts/edit.jsx new file mode 100644 index 000000000000..87e9febc70f9 --- /dev/null +++ b/src/pages/email/administration/contacts/edit.jsx @@ -0,0 +1,255 @@ +import React, { useEffect } from "react"; +import { useRouter } from "next/router"; +import { Grid, Divider } from "@mui/material"; +import { useForm } from "react-hook-form"; +import { useSelector } from "react-redux"; +import { Layout as DashboardLayout } from "/src/layouts/index.js"; +import CippFormPage from "/src/components/CippFormPages/CippFormPage"; +import CippFormComponent from "/src/components/CippComponents/CippFormComponent"; +import { useSettings } from "../../../../hooks/use-settings"; +import { ApiGetCall } from "../../../../api/ApiCall"; +import countryList from "/src/data/countryList.json"; + +const EditContact = () => { + const tenantDomain = useSettings().currentTenant; + const router = useRouter(); + const { id } = router.query; + + const contactInfo = ApiGetCall({ + url: `/api/ListContacts?tenantFilter=${tenantDomain}&id=${id}`, + queryKey: `ListContacts-${id}`, + waiting: false, + }); + + useEffect(() => { + if (id) { + contactInfo.refetch(); + } + }, [router.query, id, tenantDomain]); + + const formControl = useForm({ + mode: "onChange", + defaultValues: { + displayName: "", + firstName: "", + lastName: "", + email: "", + hidefromGAL: false, + streetAddress: "", + postalCode: "", + city: "", + country: "", + companyName: "", + mobilePhone: "", + businessPhone: "", + jobTitle: "", + }, + }); + + useEffect(() => { + if (contactInfo.isSuccess && contactInfo.data?.[0]) { + const contact = contactInfo.data[0]; + // Get the address info from the first address entry + const address = contact.addresses?.[0] || {}; + + // Find phone numbers by type + const phones = contact.phones || []; + const mobilePhone = phones.find((p) => p.type === "mobile")?.number; + const businessPhone = phones.find((p) => p.type === "business")?.number; + + formControl.reset({ + displayName: contact.displayName || "", + firstName: contact.givenName || "", + lastName: contact.surname || "", + email: contact.mail || "", + hidefromGAL: contact.hidefromGAL || false, + streetAddress: address.street || "", + postalCode: address.postalCode || "", + city: address.city || "", + country: address.countryOrRegion + ? countryList.find((c) => c.Name === address.countryOrRegion)?.Code || "" + : "", + companyName: contact.companyName || "", + mobilePhone: mobilePhone || "", + businessPhone: businessPhone || "", + jobTitle: contact.jobTitle || "", + }); + } + }, [contactInfo.isSuccess, contactInfo.data, contactInfo.isFetching]); + + if (contactInfo.isLoading) { + return
Loading...
; + } + + return ( + { + return { + tenantID: tenantDomain, + ContactID: contactInfo.data?.[0]?.id, + DisplayName: values.displayName, + hidefromGAL: values.hidefromGAL, + email: values.email, + FirstName: values.firstName, + LastName: values.lastName, + Title: values.jobTitle, + StreetAddress: values.streetAddress, + PostalCode: values.postalCode, + City: values.city, + CountryOrRegion: values.country?.value || values.country, + Company: values.companyName, + mobilePhone: values.mobilePhone, + phone: values.businessPhone, + }; + }} + > + + {/* Display Name */} + + + + + {/* First Name and Last Name */} + + + + + + + + + + {/* Email */} + + + + + {/* Hide from GAL */} + + + + + + + {/* Company Information */} + + + + + + + + + + {/* Address Information */} + + + + + + + + + + + ({ + label: Name, + value: Code, + }))} + formControl={formControl} + /> + + + + + {/* Phone Numbers */} + + + + + + + + + ); +}; + +EditContact.getLayout = (page) => {page}; + +export default EditContact; diff --git a/src/pages/email/administration/contacts/index.js b/src/pages/email/administration/contacts/index.js index ac22d6596579..9d75996d8652 100644 --- a/src/pages/email/administration/contacts/index.js +++ b/src/pages/email/administration/contacts/index.js @@ -3,12 +3,21 @@ import { CippTablePage } from "/src/components/CippComponents/CippTablePage.jsx" import { Edit, PersonAdd } from "@mui/icons-material"; import { Button } from "@mui/material"; import Link from "next/link"; -import TrashIcon from '@heroicons/react/24/outline/TrashIcon'; +import TrashIcon from "@heroicons/react/24/outline/TrashIcon"; const Page = () => { const pageTitle = "Contacts"; const actions = [ + { + label: "Edit Contact", + link: "/email/administration/contacts/edit?id=[id]", + multiPost: false, + postEntireRow: true, + icon: , + color: "warning", + condition: (row) => !row.onPremisesSyncEnabled, + }, { label: "Remove Contact", type: "GET", @@ -16,18 +25,12 @@ const Page = () => { data: { GUID: "id", }, - confirmText: "Are you sure you want to delete this contact?", + confirmText: + "Are you sure you want to delete this contact? Remember this will not work if the contact is AD Synced.", color: "danger", icon: , + condition: (row) => !row.onPremisesSyncEnabled, }, - /* TODO: Implement edit contact - { - label: "Edit Contact", - link: "/email/administration/edit-contact/[id]", - multiPost: false, - icon: , - color: "warning", - },*/ ]; const simpleColumns = ["displayName", "mail", "companyName", "onPremisesSyncEnabled"];