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)