Skip to content

Commit

Permalink
create edit mode ContactSection
Browse files Browse the repository at this point in the history
  • Loading branch information
JoeKarow committed Jan 9, 2024
1 parent 9359e01 commit 9070b1d
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 8 deletions.
3 changes: 2 additions & 1 deletion apps/app/src/pages/org/[slug]/edit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand Down
69 changes: 64 additions & 5 deletions packages/ui/components/data-display/ContactInfo/PhoneNumbers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,24 @@ 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'
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

Expand Down Expand Up @@ -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>
) : (
Expand All @@ -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}>
Expand Down
1 change: 1 addition & 0 deletions packages/ui/components/data-display/ContactInfo/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ interface CommonProps {
locationOnly?: boolean
serviceOnly?: boolean
websiteDesc?: boolean
edit?: boolean
}

export type PhoneNumbersProps = CommonProps & (ApiData | PassedData<'orgPhone', 'forContactInfo'>)
Expand Down
5 changes: 3 additions & 2 deletions packages/ui/components/sections/ContactSection/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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>
Expand All @@ -24,4 +24,5 @@ export const ContactSection = ({ parentId }: ContactSectionProps) => {
export type ContactSectionProps = {
role: 'org' | 'location'
parentId: string
edit?: boolean
}

0 comments on commit 9070b1d

Please sign in to comment.