From 9070b1d9451dc75705302198003234fcf1d10578 Mon Sep 17 00:00:00 2001
From: Joe Karow <58997957+JoeKarow@users.noreply.github.com>
Date: Tue, 9 Jan 2024 17:02:36 -0500
Subject: [PATCH] create edit mode ContactSection

---
 apps/app/src/pages/org/[slug]/edit.tsx        |  3 +-
 .../data-display/ContactInfo/PhoneNumbers.tsx | 69 +++++++++++++++++--
 .../data-display/ContactInfo/types.ts         |  1 +
 .../sections/ContactSection/index.tsx         |  5 +-
 4 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/apps/app/src/pages/org/[slug]/edit.tsx b/apps/app/src/pages/org/[slug]/edit.tsx
index 91d91a8244..0325f66395 100644
--- a/apps/app/src/pages/org/[slug]/edit.tsx
+++ b/apps/app/src/pages/org/[slug]/edit.tsx
@@ -87,7 +87,7 @@ const OrganizationPage: NextPageWithOptions<InferGetServerSidePropsType<typeof g
 			</Grid.Col>
 			<Grid.Col order={2}>
 				<Stack spacing={40}>
-					<ContactSection role='org' parentId={data.id} />
+					<ContactSection role='org' parentId={data.id} edit />
 					<Stack ref={ref} miw='100%'>
 						{width && (
 							<GoogleMap
@@ -134,6 +134,7 @@ export const getServerSideProps = async ({
 	const [i18n] = await Promise.allSettled([
 		getServerSideTranslations(locale, compact(['common', 'services', 'attribute', 'phone-type', orgId?.id])),
 		ssg.organization.forOrgPageEdits.prefetch({ slug }),
+		ssg.fieldOpt.countries.prefetch({ activeForOrgs: true }),
 	])
 	const props = {
 		session,
diff --git a/packages/ui/components/data-display/ContactInfo/PhoneNumbers.tsx b/packages/ui/components/data-display/ContactInfo/PhoneNumbers.tsx
index 4d17ecf558..b7f9859c50 100644
--- a/packages/ui/components/data-display/ContactInfo/PhoneNumbers.tsx
+++ b/packages/ui/components/data-display/ContactInfo/PhoneNumbers.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'next-i18next'
 import { type ReactElement } from 'react'
 
 import { isExternal, Link } from '~ui/components/core/Link'
+import { PhoneDrawer } from '~ui/components/data-portal/PhoneDrawer'
 import { useCustomVariant } from '~ui/hooks/useCustomVariant'
 import { parsePhoneNumber } from '~ui/hooks/usePhoneNumber'
 import { useSlug } from '~ui/hooks/useSlug'
@@ -10,14 +11,16 @@ import { trpc as api } from '~ui/lib/trpcClient'
 
 import { type PhoneNumbersProps } from './types'
 
-export const PhoneNumbers = ({ parentId = '', passedData, direct, locationOnly }: PhoneNumbersProps) => {
+export const PhoneNumbers = ({ edit, ...props }: PhoneNumbersProps) =>
+	edit ? <PhoneNumbersEdit {...props} /> : <PhoneNumbersDisplay {...props} />
+
+const PhoneNumbersDisplay = ({ parentId = '', passedData, direct, locationOnly }: PhoneNumbersProps) => {
 	const output: ReactElement[] = []
 	const slug = useSlug()
 	const { data: orgId } = api.organization.getIdFromSlug.useQuery({ slug })
 	const { t } = useTranslation(orgId?.id ? ['common', 'phone-type', orgId.id] : ['common', 'phone-type'])
 	const variants = useCustomVariant()
 	const { data } = api.orgPhone.forContactInfo.useQuery({ parentId, locationOnly }, { enabled: !passedData })
-	let k = 0
 
 	const componentData = passedData ? passedData : data
 
@@ -52,9 +55,9 @@ export const PhoneNumbers = ({ parentId = '', passedData, direct, locationOnly }
 				: undefined
 
 		const item = (
-			<Stack spacing={4} key={k}>
+			<Stack spacing={4} key={phone.id}>
 				{isExternal(dialURL) ? (
-					<Link key={k} external href={dialURL} variant={variants.Link.inlineInverted}>
+					<Link external href={dialURL} variant={variants.Link.inlineInverted}>
 						{phoneNumber}
 					</Link>
 				) : (
@@ -64,7 +67,63 @@ export const PhoneNumbers = ({ parentId = '', passedData, direct, locationOnly }
 			</Stack>
 		)
 		primary ? output.unshift(item) : output.push(item)
-		k++
+	}
+	return (
+		<Stack spacing={12}>
+			<Title order={3}>{t('words.phone')}</Title>
+			{output}
+		</Stack>
+	)
+}
+
+const PhoneNumbersEdit = ({ parentId = '', passedData, direct }: PhoneNumbersProps) => {
+	const output: ReactElement[] = []
+	const slug = useSlug()
+	const { data: orgId } = api.organization.getIdFromSlug.useQuery({ slug })
+	const { t } = useTranslation(orgId?.id ? ['common', 'phone-type', orgId.id] : ['common', 'phone-type'])
+	const variants = useCustomVariant()
+	const { data } = api.orgPhone.forContactInfoEdit.useQuery({ parentId }, { enabled: !passedData })
+
+	const componentData = passedData ? passedData : data
+
+	if (!componentData?.length) return null
+
+	for (const phone of componentData) {
+		const { country, ext, number, phoneType, primary, description } = phone
+		const parsedPhone = parsePhoneNumber(number, country)
+		if (!parsedPhone) continue
+		if (ext) parsedPhone.setExt(ext)
+		const dialURL = parsedPhone.getURI()
+		const phoneNumber = parsedPhone.formatNational()
+		if (direct) {
+			return (
+				<Stack spacing={12}>
+					<Title order={3}>{t('direct.phone')}</Title>
+					{isExternal(dialURL) ? (
+						<Link external href={dialURL} variant={variants.Link.inlineInverted}>
+							{phoneNumber}
+						</Link>
+					) : (
+						<Text>{phoneNumber}</Text>
+					)}
+				</Stack>
+			)
+		}
+		const desc = description
+			? t(description.key, { ns: orgId?.id, defaultValue: description.defaultText })
+			: phoneType?.key
+				? t(phoneType.key, { ns: 'phone-type' })
+				: undefined
+
+		const item = (
+			<Stack spacing={4} key={phone.id}>
+				<PhoneDrawer id={phone.id} component={Link} variant={variants.Link.inlineInverted}>
+					{phoneNumber}
+				</PhoneDrawer>
+				{desc && <Text variant={variants.Text.utility4darkGray}>{desc}</Text>}
+			</Stack>
+		)
+		primary ? output.unshift(item) : output.push(item)
 	}
 	return (
 		<Stack spacing={12}>
diff --git a/packages/ui/components/data-display/ContactInfo/types.ts b/packages/ui/components/data-display/ContactInfo/types.ts
index a58a90864d..3020041dbf 100644
--- a/packages/ui/components/data-display/ContactInfo/types.ts
+++ b/packages/ui/components/data-display/ContactInfo/types.ts
@@ -18,6 +18,7 @@ interface CommonProps {
 	locationOnly?: boolean
 	serviceOnly?: boolean
 	websiteDesc?: boolean
+	edit?: boolean
 }
 
 export type PhoneNumbersProps = CommonProps & (ApiData | PassedData<'orgPhone', 'forContactInfo'>)
diff --git a/packages/ui/components/sections/ContactSection/index.tsx b/packages/ui/components/sections/ContactSection/index.tsx
index bb380309dc..bf00e4a5e1 100644
--- a/packages/ui/components/sections/ContactSection/index.tsx
+++ b/packages/ui/components/sections/ContactSection/index.tsx
@@ -5,7 +5,7 @@ import { ContactInfo } from '~ui/components/data-display/ContactInfo'
 import { useScreenSize } from '~ui/hooks'
 import { trpc as api } from '~ui/lib/trpcClient'
 
-export const ContactSection = ({ parentId }: ContactSectionProps) => {
+export const ContactSection = ({ parentId, edit }: ContactSectionProps) => {
 	const { t } = useTranslation(['common'])
 	const { isMobile, isTablet } = useScreenSize()
 	const { data: hasContactInfo } = api.misc.hasContactInfo.useQuery(parentId)
@@ -15,7 +15,7 @@ export const ContactSection = ({ parentId }: ContactSectionProps) => {
 	const body = (
 		<Stack spacing={isMobile ? 32 : 40}>
 			<Title order={2}>{t('contact')}</Title>
-			<ContactInfo parentId={parentId} gap={40} />
+			<ContactInfo parentId={parentId} gap={40} edit={edit} />
 		</Stack>
 	)
 	return isTablet || isMobile ? body : <Card>{body}</Card>
@@ -24,4 +24,5 @@ export const ContactSection = ({ parentId }: ContactSectionProps) => {
 export type ContactSectionProps = {
 	role: 'org' | 'location'
 	parentId: string
+	edit?: boolean
 }