display data

weareinreach · Mar 27, 2024 · 3f274e6 · 3f274e6
1 parent 03a07a0
commit 3f274e6
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 27 deletions.
diff --git 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 <Stack spacing={gap}>{items}</Stack>
 }
 
-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
@@ -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
@@ -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<HTMLButtonElement, ServiceEditDrawerProps>
 		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<HTMLButtonElement, ServiceEditDrawerProps>
 
 		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<HTMLButtonElement, ServiceEditDrawerProps>
 									{serviceAreas()}
 									{/* {Boolean(geoMap?.size) && } */}
 								</Stack>
-								<Section.Divider title={t('service.get-help')}>{t('service.get-help')}</Section.Divider>
+								<Section.Divider title={t('service.get-help')}>
+									{hasContactInfo(getHelp) && (
+										<ContactInfo passedData={getHelp} direct order={['phone', 'email', 'website']} />
+									)}
+									{Boolean(data.hours) && <Hours parentId={serviceId} label='service' data={data.hours} />}
+								</Section.Divider>
 								<Section.Divider title={t('service.clients-served')}>
-									{t('service.clients-served')}
+									<Section.Sub title={t('service.community-focus')}>
+										{attributes.clientsServed.srvfocus}
+									</Section.Sub>
+									<Section.Sub title={t('service.target-population')}>
+										{attributes.clientsServed.targetPop}
+									</Section.Sub>
+								</Section.Divider>
+								<Section.Divider title={t('service.cost')}>{attributes.cost}</Section.Divider>
+								<Section.Divider title={t('service.eligibility')}>
+									<Section.Sub title={t('service.ages')}>{attributes.eligibility.age}</Section.Sub>
+									<Section.Sub title={t('service.requirements')}>
+										<List>
+											{attributes.eligibility.requirements.map((text, i) => (
+												<List.Item key={`${i}-${text}`}>{text}</List.Item>
+											))}
+										</List>
+									</Section.Sub>
+									<Section.Sub title={t('service.additional-info')}>
+										{attributes.eligibility.freeText}
+									</Section.Sub>
+								</Section.Divider>
+								<Section.Divider title={t('service.languages')}>
+									<Section.Sub title={t('service.languages')}>
+										<List>
+											{attributes.lang.map((lang, i) => (
+												<List.Item key={`${i}-${lang}`}>{lang}</List.Item>
+											))}
+										</List>
+									</Section.Sub>
+								</Section.Divider>
+								<Section.Divider title={t('service.extra-info')}>
+									<Section.Sub key='miscbadges'>
+										<Badge.Group withSeparator={false}>{attributes.miscWithIcons}</Badge.Group>
+									</Section.Sub>
+									<Section.Sub key='misc' title={t('service.additional-info')}>
+										<List>
+											{attributes.misc.map((text, i) => (
+												<List.Item key={`${i}-${text}`}>{text}</List.Item>
+											))}
+										</List>
+									</Section.Sub>
 								</Section.Divider>
-								<Section.Divider title={t('service.cost')}>{t('service.cost')}</Section.Divider>
-								<Section.Divider title={t('service.eligibility')}>{t('service.eligibility')}</Section.Divider>
-								<Section.Divider title={t('service.languages')}>{t('service.languages')}</Section.Divider>
-								<Section.Divider title={t('service.extra-info')}>{t('service.extra-info')}</Section.Divider>
 							</Stack>
 						</Drawer.Body>
 					</Drawer.Content>

diff --git 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
@@ -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(<ModalText key={id}>{t(key, options)}</ModalText>)
@@ -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(<ModalText key={id}>{t(key, options)}</ModalText>)
@@ -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)