feat: Modal coverage area (IN-834)

apps/app/public/locales/en/common.json

@@ -34,6 +34,7 @@
 		"back-to-dynamic": "Back to <u>{{page}}</u>",
 		"back-to-search": "Back to search"
 	},
+	"can-help-people-in": "Can help people located anywhere in {{location}}",
 	"cancel": "Cancel",
 	"claim-org-modal": {
 		"list": "<textUtility1>🔗 Claim your organization’s profile page and build trust with your audience on InReach</textUtility1>\n<textUtility1>✍🏾 Update your organization's information on InReach</textUtility1>\n<textUtility1>📨 Invite other staff to join your organization on InReach</textUtility1>\n<textUtility1>🔑 Gain access to future features built specifically for affiliated service providers on InReach</textUtility1>",
@@ -210,6 +211,9 @@
 	"photo_one": "Photo",
 	"photo_other": "Photos",
 	"please-specify": "Please specify",
+	"portal-module": {
+		"service-area": "Service Area"
+	},
 	"powered-by-vercel": "Powered by Vercel",
 	"prefer-not-to-say": "Prefer not to say",
 	"privacy-policy": "Privacy policy",
@@ -264,6 +268,9 @@
 		"organization-placeholder-searchby": "Search by organization name...",
 		"suggest-resource": "Can't find it? <strong>Suggest an organization</strong> you think should be included."
 	},
+	"select": {
+		"base": "Select {{- item}}"
+	},
 	"send-email": "Send email",
 	"service": {
 		"additional-info": "Additional eligibility information",

apps/app/src/providers/index.tsx

@@ -2,7 +2,7 @@
 import { MantineProvider } from '@mantine/core'
 import { ModalsProvider } from '@mantine/modals'
 import dynamic, { type LoaderComponent } from 'next/dynamic'
-import { Work_Sans } from 'next/font/google'
+import { Noto_Color_Emoji, Work_Sans } from 'next/font/google'
 import { type Session } from 'next-auth'
 import { SessionProvider } from 'next-auth/react'
 import { Trans, useTranslation } from 'next-i18next'
@@ -14,6 +14,8 @@ import { SearchStateProvider } from '@weareinreach/ui/providers/SearchState'
 import { appCache, appTheme } from '@weareinreach/ui/theme'
 import 'react-hook-consent/dist/styles/style.css'
 
+const fallbackEmoji = Noto_Color_Emoji({ weight: '400', subsets: ['emoji'] })
+
 const fontWorkSans = Work_Sans({
 	subsets: ['latin-ext'],
 	weight: ['400', '500', '600'],
@@ -26,6 +28,7 @@ const fontWorkSans = Work_Sans({
 		'Arial',
 		'sans-serif',
 		'Apple Color Emoji',
+		'Noto Color Emoji',
 		'Segoe UI Emoji',
 	],
 })

packages/api/router/fieldOpt/index.ts

@@ -14,6 +14,8 @@ type FieldOptHandlerCache = {
 	countries: typeof import('./query.countries.handler').countries
 	userTitle: typeof import('./query.userTitle.handler').userTitle
 	countryGovDistMap: typeof import('./query.countryGovDistMap.handler').countryGovDistMap
+	getSubDistricts: typeof import('./query.getSubDistricts.handler').getSubDistricts
+	govDists: typeof import('./query.govDists.handler').govDists
 }
 export const fieldOptRouter = defineRouter({
 	/** All government districts by country (active for org listings). Gives up to 2 levels of sub-districts */
@@ -96,4 +98,18 @@ export const fieldOptRouter = defineRouter({
 		if (!HandlerCache.countryGovDistMap) throw new Error('Failed to load handler')
 		return HandlerCache.countryGovDistMap()
 	}),
+	getSubDistricts: publicProcedure.input(schema.ZGetSubDistrictsSchema).query(async ({ ctx, input }) => {
+		if (!HandlerCache.getSubDistricts)
+			HandlerCache.getSubDistricts = await import('./query.getSubDistricts.handler').then(
+				(mod) => mod.getSubDistricts
+			)
+		if (!HandlerCache.getSubDistricts) throw new Error('Failed to load handler')
+		return HandlerCache.getSubDistricts({ ctx, input })
+	}),
+	govDists: publicProcedure.input(schema.ZGovDistsSchema).query(async ({ ctx, input }) => {
+		if (!HandlerCache.govDists)
+			HandlerCache.govDists = await import('./query.govDists.handler').then((mod) => mod.govDists)
+		if (!HandlerCache.govDists) throw new Error('Failed to load handler')
+		return HandlerCache.govDists({ ctx, input })
+	}),
 })

packages/api/router/fieldOpt/query.countries.schema.ts

@@ -1,10 +1,8 @@
 import { z } from 'zod'
 
 export const ZCountriesSchema = z
-	.object({
-		where: z.object({ activeForOrgs: z.boolean(), cca2: z.string() }).partial(),
-		// includeGeo: z.object({ wkt: z.boolean(), json: z.boolean() }),
-	})
+	.object({ activeForOrgs: z.boolean(), cca2: z.string() })
 	.partial()
 	.optional()
+	.transform((val) => (val ? { where: val } : undefined))
 export type TCountriesSchema = z.infer<typeof ZCountriesSchema>

packages/api/router/fieldOpt/query.getSubDistricts.handler.ts

@@ -0,0 +1,32 @@
+import { prisma } from '@weareinreach/db'
+import { handleError } from '~api/lib/errorHandler'
+import { type TRPCHandlerParams } from '~api/types/handler'
+
+import { type TGetSubDistrictsSchema } from './query.getSubDistricts.schema'
+
+export const getSubDistricts = async ({ input }: TRPCHandlerParams<TGetSubDistrictsSchema>) => {
+	try {
+		const results = await prisma.govDist.findMany({
+			where: {
+				parentId: input,
+			},
+			select: {
+				id: true,
+				tsKey: true,
+				tsNs: true,
+				abbrev: true,
+				country: { select: { cca2: true } },
+				parent: { select: { tsKey: true, tsNs: true } },
+				govDistType: {
+					select: { tsKey: true, tsNs: true },
+				},
+			},
+			orderBy: {
+				name: 'asc',
+			},
+		})
+		return results
+	} catch (error) {
+		handleError(error)
+	}
+}

packages/api/router/fieldOpt/query.getSubDistricts.schema.ts

@@ -0,0 +1,6 @@
+import { type z } from 'zod'
+
+import { prefixedId } from '~api/schemas/idPrefix'
+
+export const ZGetSubDistrictsSchema = prefixedId('govDist')
+export type TGetSubDistrictsSchema = z.infer<typeof ZGetSubDistrictsSchema>

packages/api/router/fieldOpt/query.govDists.handler.ts

@@ -0,0 +1,24 @@
+import { prisma } from '@weareinreach/db'
+import { handleError } from '~api/lib/errorHandler'
+import { type TRPCHandlerParams } from '~api/types/handler'
+
+import { type TGovDistsSchema } from './query.govDists.schema'
+
+export const govDists = async ({ input }: TRPCHandlerParams<TGovDistsSchema>) => {
+	try {
+		const results = await prisma.govDist.findMany({
+			where: input,
+			select: {
+				id: true,
+				tsKey: true,
+				tsNs: true,
+				abbrev: true,
+				country: { select: { cca2: true } },
+				govDistType: { select: { tsKey: true, tsNs: true } },
+			},
+		})
+		return results
+	} catch (error) {
+		handleError(error)
+	}
+}

packages/api/router/fieldOpt/query.govDists.schema.ts

@@ -0,0 +1,22 @@
+import { z } from 'zod'
+
+import { prefixedId } from '~api/schemas/idPrefix'
+
+export const ZGovDistsSchema = z
+	.object({
+		id: prefixedId('govDist'),
+		name: z.string(),
+		slug: z.string(),
+		iso: z.string(),
+		abbrev: z.string(),
+		countryId: prefixedId('country'),
+		parentsOnly: z.boolean().default(true),
+	})
+	.partial()
+	.optional()
+	.transform((val) => {
+		if (!val) return val
+		const { parentsOnly, ...rest } = val
+		return { ...rest, ...(parentsOnly ? { parentId: null } : {}) }
+	})
+export type TGovDistsSchema = z.infer<typeof ZGovDistsSchema>

packages/api/router/fieldOpt/schemas.ts

@@ -2,6 +2,8 @@
 export * from './query.attributeCategories.schema'
 export * from './query.attributesByCategory.schema'
 export * from './query.countries.schema'
+export * from './query.getSubDistricts.schema'
+export * from './query.govDists.schema'
 export * from './query.govDistsByCountry.schema'
 export * from './query.govDistsByCountryNoSub.schema'
 export * from './query.languages.schema'

packages/api/router/index.ts

@@ -18,6 +18,7 @@ import { quickLinkRouter } from './quicklink'
 import { reviewRouter } from './review'
 import { savedListRouter } from './savedLists'
 import { serviceRouter } from './service'
+import { serviceAreaRouter } from './serviceArea'
 import { systemRouter } from './system'
 import { userRouter } from './user'
 
@@ -40,6 +41,7 @@ export const appRouter = defineRouter({
 	review: reviewRouter,
 	savedList: savedListRouter,
 	service: serviceRouter,
+	serviceArea: serviceAreaRouter,
 	system: systemRouter,
 	user: userRouter,
 })

packages/api/router/serviceArea/index.ts

@@ -0,0 +1,28 @@
+import { defineRouter, publicProcedure } from '~api/lib/trpc'
+
+import * as schema from './schemas'
+
+export const HandlerCache: Partial<HandlerCache> = {}
+export const serviceAreaRouter = defineRouter({
+	getServiceArea: publicProcedure.input(schema.ZGetServiceAreaSchema).query(async ({ ctx, input }) => {
+		if (!HandlerCache.getServiceArea) {
+			HandlerCache.getServiceArea = await import('./query.getServiceArea.handler').then(
+				(mod) => mod.getServiceArea
+			)
+		}
+		if (!HandlerCache.getServiceArea) throw new Error('Failed to load handler')
+		return HandlerCache.getServiceArea({ ctx, input })
+	}),
+	update: publicProcedure.input(schema.ZUpdateSchema).mutation(async ({ ctx, input }) => {
+		if (!HandlerCache.update) {
+			HandlerCache.update = await import('./mutation.update.handler').then((mod) => mod.update)
+		}
+		if (!HandlerCache.update) throw new Error('Failed to load handler')
+		return HandlerCache.update({ ctx, input })
+	}),
+})
+
+type HandlerCache = {
+	getServiceArea: typeof import('./query.getServiceArea.handler').getServiceArea
+	update: typeof import('./mutation.update.handler').update
+}

packages/api/router/serviceArea/mutation.update.handler.ts

@@ -0,0 +1,54 @@
+import { prisma } from '@weareinreach/db'
+import { handleError } from '~api/lib/errorHandler'
+import { type TRPCHandlerParams } from '~api/types/handler'
+
+import { type TUpdateSchema } from './mutation.update.schema'
+
+export const update = async ({ input }: TRPCHandlerParams<TUpdateSchema>) => {
+	try {
+		const { id: serviceAreaId, districts, countries } = input
+
+		const txn = await prisma.$transaction(async (tx) => {
+			const results = {
+				countries: {
+					created: 0,
+					deleted: 0,
+				},
+				districts: {
+					created: 0,
+					deleted: 0,
+				},
+			}
+			if (districts.createdVals) {
+				const { count } = await tx.serviceAreaDist.createMany({
+					data: districts.createdVals.map((govDistId) => ({ serviceAreaId, govDistId })),
+					skipDuplicates: true,
+				})
+				results.districts.created = count
+			}
+			if (districts.deletedVals) {
+				const { count } = await tx.serviceAreaDist.deleteMany({
+					where: { serviceAreaId, govDistId: { in: districts.deletedVals } },
+				})
+				results.districts.deleted = count
+			}
+			if (countries.createdVals) {
+				const { count } = await tx.serviceAreaCountry.createMany({
+					data: countries.createdVals.map((countryId) => ({ serviceAreaId, countryId })),
+					skipDuplicates: true,
+				})
+				results.countries.created = count
+			}
+			if (countries.deletedVals) {
+				const { count } = await tx.serviceAreaCountry.deleteMany({
+					where: { serviceAreaId, countryId: { in: countries.deletedVals } },
+				})
+				results.countries.deleted = count
+			}
+			return results
+		})
+		return txn
+	} catch (error) {
+		handleError(error)
+	}
+}

packages/api/router/serviceArea/mutation.update.schema.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod'
+
+import { prefixedId } from '~api/schemas/idPrefix'
+
+export const ZUpdateSchema = z.object({
+	id: prefixedId('serviceArea'),
+	districts: z.object({
+		createdVals: prefixedId('govDist').array().nullable(),
+		deletedVals: prefixedId('govDist').array().nullable(),
+	}),
+	countries: z.object({
+		createdVals: prefixedId('country').array().nullable(),
+		deletedVals: prefixedId('country').array().nullable(),
+	}),
+})
+export type TUpdateSchema = z.infer<typeof ZUpdateSchema>

packages/api/router/serviceArea/query.getServiceArea.handler.ts

@@ -0,0 +1,50 @@
+import { prisma } from '@weareinreach/db'
+import { handleError } from '~api/lib/errorHandler'
+import { type TRPCHandlerParams } from '~api/types/handler'
+
+import { type TGetServiceAreaSchema } from './query.getServiceArea.schema'
+
+export const getServiceArea = async ({ ctx, input }: TRPCHandlerParams<TGetServiceAreaSchema>) => {
+	try {
+		const result = await prisma.serviceArea.findUnique({
+			where: {
+				id: input,
+			},
+			select: {
+				id: true,
+				countries: {
+					select: {
+						country: {
+							select: { cca2: true, id: true },
+						},
+					},
+				},
+				districts: {
+					select: {
+						govDist: {
+							select: {
+								id: true,
+								parent: { select: { tsKey: true, tsNs: true } },
+								country: { select: { cca2: true } },
+								tsKey: true,
+								tsNs: true,
+							},
+						},
+					},
+				},
+			},
+		})
+
+		if (!result) return result
+
+		const { id, districts, countries } = result
+		const formatted = {
+			id,
+			districts: districts.map(({ govDist }) => govDist),
+			countries: countries.map(({ country }) => country),
+		}
+		return formatted
+	} catch (error) {
+		handleError(error)
+	}
+}

packages/api/router/serviceArea/query.getServiceArea.schema.ts

@@ -0,0 +1,6 @@
+import { type z } from 'zod'
+
+import { prefixedId } from '~api/schemas/idPrefix'
+
+export const ZGetServiceAreaSchema = prefixedId('serviceArea')
+export type TGetServiceAreaSchema = z.infer<typeof ZGetServiceAreaSchema>

packages/api/router/serviceArea/schemas.ts

@@ -0,0 +1,4 @@
+// codegen:start {preset: barrel, include: ./*.schema.ts}
+export * from './mutation.update.schema'
+export * from './query.getServiceArea.schema'
+// codegen:end

packages/ui/.storybook/i18next.ts

@@ -40,7 +40,6 @@ i18n
 				switch (format) {
 					case 'lowercase': {
 						if (typeof value === 'string') return value.toLowerCase()
-						break
 					}
 				}
 				return value

packages/ui/.storybook/preview.tsx

@@ -74,7 +74,10 @@ const preview: Preview = {
 		// },
 		msw: {
 			handlers: {
-				passthrough: http.get(/^\/(?!api|trpc).*$/, () => passthrough()),
+				passthrough: http.get(/^\/(?!api|trpc).*$/, (ctx) => {
+					console.log(`MSW Passthrough: ${ctx.request.url}`)
+					passthrough()
+				}),
 			},
 		},
 	},