diff --git a/packages/ui/components/data-display/ContactInfo/index.tsx b/packages/ui/components/data-display/ContactInfo/index.tsx
index d5d22b9c09..0c809072bc 100644
--- a/packages/ui/components/data-display/ContactInfo/index.tsx
+++ b/packages/ui/components/data-display/ContactInfo/index.tsx
@@ -47,7 +47,8 @@ export const ContactInfo = ({
return {items}
}
-export const hasContactInfo = (data: PassedDataObject) => {
+export const hasContactInfo = (data: PassedDataObject | null | undefined): data is PassedDataObject => {
+ if (!data) return false
const { websites, phones, emails, socialMedia } = data
return Boolean(websites.length || phones.length || emails.length || socialMedia.length)
}
diff --git a/packages/ui/components/data-portal/ServiceEditDrawer/index.stories.tsx b/packages/ui/components/data-portal/ServiceEditDrawer/index.stories.tsx
index 5bbc2c1fd1..159611f216 100644
--- a/packages/ui/components/data-portal/ServiceEditDrawer/index.stories.tsx
+++ b/packages/ui/components/data-portal/ServiceEditDrawer/index.stories.tsx
@@ -4,6 +4,7 @@ import { Button } from '~ui/components/core/Button'
import { component } from '~ui/mockData/component'
import { fieldOpt } from '~ui/mockData/fieldOpt'
import { organization } from '~ui/mockData/organization'
+import { orgHours } from '~ui/mockData/orgHours'
import { service } from '~ui/mockData/service'
import { ServiceEditDrawer } from './index'
@@ -31,6 +32,7 @@ export default {
fieldOpt.govDistsByCountry,
fieldOpt.countryGovDistMap,
component.ServiceSelect,
+ orgHours.forHoursDisplay,
],
},
args: {
diff --git a/packages/ui/components/data-portal/ServiceEditDrawer/index.tsx b/packages/ui/components/data-portal/ServiceEditDrawer/index.tsx
index 158cee8d10..08179869b9 100644
--- a/packages/ui/components/data-portal/ServiceEditDrawer/index.tsx
+++ b/packages/ui/components/data-portal/ServiceEditDrawer/index.tsx
@@ -21,6 +21,8 @@ import { Badge } from '~ui/components/core/Badge'
import { Breadcrumb } from '~ui/components/core/Breadcrumb'
import { Button } from '~ui/components/core/Button'
import { Section } from '~ui/components/core/Section'
+import { ContactInfo, hasContactInfo } from '~ui/components/data-display/ContactInfo'
+import { Hours } from '~ui/components/data-display/Hours'
import { ServiceSelect } from '~ui/components/data-portal/ServiceSelect'
import { useCustomVariant } from '~ui/hooks'
import { Icon } from '~ui/icon'
@@ -39,7 +41,7 @@ const _ServiceEditDrawer = forwardRef
const [drawerOpened, drawerHandler] = useDisclosure(true)
const { classes } = useStyles()
const variants = useCustomVariant()
- const { t } = useTranslation(['common', 'gov-dist'])
+ const { t, i18n } = useTranslation(['common', 'gov-dist'])
// #region Get existing data/populate form
const { data } = api.service.forServiceEditDrawer.useQuery(serviceId, {
refetchOnWindowFocus: false,
@@ -143,13 +145,19 @@ const _ServiceEditDrawer = forwardRef
if (!data) return null
- // const { getHelp, publicTransit } = data
- // ? processAccessInstructions({
- // accessDetails: data?.accessDetails,
- // locations: data?.locations,
- // t,
- // })
- // : { getHelp: null, publicTransit: null }
+ const { getHelp, publicTransit } = data
+ ? processAccessInstructions({
+ accessDetails: data?.accessDetails,
+ locations: data?.locations,
+ t,
+ })
+ : { getHelp: null, publicTransit: null }
+
+ const attributes = processAttributes({
+ attributes: data.attributes,
+ locale: i18n.resolvedLanguage ?? 'en',
+ t,
+ })
return (
<>
@@ -206,14 +214,55 @@ const _ServiceEditDrawer = forwardRef
{serviceAreas()}
{/* {Boolean(geoMap?.size) && } */}
- {t('service.get-help')}
+
+ {hasContactInfo(getHelp) && (
+
+ )}
+ {Boolean(data.hours) && }
+
- {t('service.clients-served')}
+
+ {attributes.clientsServed.srvfocus}
+
+
+ {attributes.clientsServed.targetPop}
+
+
+ {attributes.cost}
+
+ {attributes.eligibility.age}
+
+
+ {attributes.eligibility.requirements.map((text, i) => (
+ {text}
+ ))}
+
+
+
+ {attributes.eligibility.freeText}
+
+
+
+
+
+ {attributes.lang.map((lang, i) => (
+ {lang}
+ ))}
+
+
+
+
+
+ {attributes.miscWithIcons}
+
+
+
+ {attributes.misc.map((text, i) => (
+ {text}
+ ))}
+
+
- {t('service.cost')}
- {t('service.eligibility')}
- {t('service.languages')}
- {t('service.extra-info')}
diff --git a/packages/ui/modals/Service/index.stories.tsx b/packages/ui/modals/Service/index.stories.tsx
index df7df9b1b9..e2919b20f1 100644
--- a/packages/ui/modals/Service/index.stories.tsx
+++ b/packages/ui/modals/Service/index.stories.tsx
@@ -1,7 +1,6 @@
import { type Meta } from '@storybook/react'
import { Button } from '~ui/components/core/Button'
-import { getTRPCMock } from '~ui/lib/getTrpcMock'
import { organization } from '~ui/mockData/organization'
import { savedList } from '~ui/mockData/savedList'
import { service } from '~ui/mockData/service'
diff --git a/packages/ui/modals/Service/processor.tsx b/packages/ui/modals/Service/processor.tsx
index 8ba9d50879..c140ccbcd7 100644
--- a/packages/ui/modals/Service/processor.tsx
+++ b/packages/ui/modals/Service/processor.tsx
@@ -13,13 +13,25 @@ import { isValidIcon } from '~ui/icon'
import { ModalText } from './ModalText'
+type AccessDetailsAPI =
+ | ApiOutput['service']['forServiceModal']['accessDetails']
+ | ApiOutput['service']['forServiceEditDrawer']['accessDetails']
+
+type LocationsAPI =
+ | ApiOutput['service']['forServiceModal']['locations']
+ | ApiOutput['service']['forServiceEditDrawer']['locations']
+
+type AttributesAPI =
+ | ApiOutput['service']['forServiceModal']['attributes']
+ | ApiOutput['service']['forServiceEditDrawer']['attributes']
+
export const processAccessInstructions = ({
accessDetails,
locations,
t,
}: {
- accessDetails: ApiOutput['service']['forServiceModal']['accessDetails']
- locations: ApiOutput['service']['forServiceModal']['locations']
+ accessDetails: AccessDetailsAPI
+ locations: LocationsAPI
t: TFunction
}): AccessInstructionsOutput => {
const output: AccessInstructionsOutput = {
@@ -32,8 +44,8 @@ export const processAccessInstructions = ({
publicTransit: null,
}
- for (const { supplement } of accessDetails) {
- const { data, text, id } = supplement
+ for (const item of accessDetails) {
+ const { data, text, supplementId: id } = item
const parsed = accessInstructions.getAll().safeParse(data)
if (parsed.success) {
const { access_type, access_value } = parsed.data
@@ -100,7 +112,7 @@ export const processAttributes = ({
locale = 'en',
t,
}: {
- attributes: ApiOutput['service']['forServiceModal']['attributes']
+ attributes: AttributesAPI
locale: string
t: TFunction
}): AttributesOutput => {
@@ -118,8 +130,8 @@ export const processAttributes = ({
misc: [],
miscWithIcons: [],
}
- for (const { attribute, supplement } of attributes) {
- const { tsKey, icon, tsNs, id } = attribute
+ for (const attribute of attributes) {
+ const { tsKey, icon, tsNs, supplementId: id } = attribute
const namespace = tsKey.split('.').shift() as string
switch (namespace) {
@@ -139,7 +151,7 @@ export const processAttributes = ({
const type = tsKey.split('.').pop() as string
switch (type) {
case 'elig-age': {
- const { data, id } = supplement
+ const { data } = attribute
const parsed = attributeSupplementSchema.numMinMaxOrRange.safeParse(data)
if (!parsed.success) break
const { min, max } = parsed.data
@@ -150,7 +162,7 @@ export const processAttributes = ({
break
}
case 'other-describe': {
- const { text, id } = supplement
+ const { text } = attribute
if (!text) break
const { key, options } = getFreeText(text)
output.clientsServed.targetPop.push({t(key, options)})
@@ -168,7 +180,7 @@ export const processAttributes = ({
description: ReactNode[]
} = { description: [] }
- const { text, data, id } = supplement
+ const { text, data } = attribute
if (text) {
const { key, options } = getFreeText(text)
costDetails.description.push({t(key, options)})
@@ -199,7 +211,7 @@ export const processAttributes = ({
}
case 'lang': {
- const { language } = supplement
+ const { language } = attribute
if (!language) break
const { languageName } = language
output.lang.push(languageName)