app(IN-941): Search page alerts

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

@@ -16,7 +16,12 @@
 	"alert-message-instructions": "Enter the alert message",
 	"alert-title-instructions": "Enter a title for the message...",
 	"alerts": {
-		"search-page-legislative-map": "This <ATLink>anti-trans legislative risk map</ATLink> shows the 2-year risk for anti-trans laws in all 50 states and D.C."
+		"search-page-legislative-map": "This <ATLink>anti-trans legislative risk map</ATLink> shows the 2-year risk for anti-trans laws in all 50 states and D.C.",
+		"search-page-do-not-fly-florida": "Please be aware there is a <ATLink>travel advisory alert</ATLink> for the LGBTQ+ community in Florida.",
+		"search-page-high-risk-state": "This state is a <ATLink>high-risk state</ATLink> for anti-trans legislation. Contact providers for more information.",
+		"search-page-med-risk-state": "This state is a <ATLink>moderate-risk state</ATLink> for anti-trans legislation. Contact providers for more information.",
+		"search-page-low-risk-state": "This state is a <ATLink>low-risk state</ATLink> for anti-trans legislation.",
+		"search-page-most-protective-state": "This state is <ATLink>one of the most protective states</ATLink> for transgender, nonbinary and gender non-conforming people."
 	},
 	"all-service-category": "All {{serviceCategory}}",
 	"anti-hate": {

apps/app/src/pages/search/[...params]/index.tsx

@@ -43,6 +43,77 @@ const ServiceFilter = dynamic(() =>
 	import('@weareinreach/ui/modals/ServiceFilter').then((mod) => mod.ServiceFilter)
 )
 
+const stateRiskLevels: Record<string, string> = {
+	FL: 'alerts.search-page-do-not-fly-florida',
+	KS: 'alerts.search-page-high-risk-state',
+	MT: 'alerts.search-page-high-risk-state',
+	OK: 'alerts.search-page-high-risk-state',
+	ND: 'alerts.search-page-high-risk-state',
+	TN: 'alerts.search-page-high-risk-state',
+	UT: 'alerts.search-page-high-risk-state',
+	AL: 'alerts.search-page-high-risk-state',
+	AR: 'alerts.search-page-high-risk-state',
+	IA: 'alerts.search-page-high-risk-state',
+	IN: 'alerts.search-page-high-risk-state',
+	LA: 'alerts.search-page-high-risk-state',
+	MO: 'alerts.search-page-high-risk-state',
+	MS: 'alerts.search-page-high-risk-state',
+	NE: 'alerts.search-page-high-risk-state',
+	OH: 'alerts.search-page-high-risk-state',
+	SC: 'alerts.search-page-high-risk-state',
+	TX: 'alerts.search-page-high-risk-state',
+	WV: 'alerts.search-page-high-risk-state',
+	AK: 'alerts.search-page-med-risk-state',
+	GA: 'alerts.search-page-med-risk-state',
+	ID: 'alerts.search-page-med-risk-state',
+	KY: 'alerts.search-page-med-risk-state',
+	NC: 'alerts.search-page-med-risk-state',
+	NH: 'alerts.search-page-med-risk-state',
+	SD: 'alerts.search-page-med-risk-state',
+	WY: 'alerts.search-page-med-risk-state',
+	AZ: 'alerts.search-page-low-risk-state',
+	DE: 'alerts.search-page-low-risk-state',
+	ME: 'alerts.search-page-low-risk-state',
+	MI: 'alerts.search-page-low-risk-state',
+	NV: 'alerts.search-page-low-risk-state',
+	PA: 'alerts.search-page-low-risk-state',
+	RI: 'alerts.search-page-low-risk-state',
+	VA: 'alerts.search-page-low-risk-state',
+	WI: 'alerts.search-page-low-risk-state',
+	CA: 'alerts.search-page-most-protective-state',
+	CO: 'alerts.search-page-most-protective-state',
+	CT: 'alerts.search-page-most-protective-state',
+	DC: 'alerts.search-page-most-protective-state',
+	HI: 'alerts.search-page-most-protective-state',
+	IL: 'alerts.search-page-most-protective-state',
+	MA: 'alerts.search-page-most-protective-state',
+	MD: 'alerts.search-page-most-protective-state',
+	MN: 'alerts.search-page-most-protective-state',
+	NJ: 'alerts.search-page-most-protective-state',
+	NM: 'alerts.search-page-most-protective-state',
+	NY: 'alerts.search-page-most-protective-state',
+	OR: 'alerts.search-page-most-protective-state',
+	VT: 'alerts.search-page-most-protective-state',
+	WA: 'alerts.search-page-most-protective-state',
+}
+const protectiveStates = [
+	'CA',
+	'CO',
+	'CT',
+	'DC',
+	'HI',
+	'IL',
+	'MA',
+	'MD',
+	'MN',
+	'NJ',
+	'NM',
+	'NY',
+	'OR',
+	'VT',
+	'WA',
+]
+
 const PageIndexSchema = z.coerce.number().default(1)
 
 const useStyles = createStyles((theme) => ({
@@ -86,6 +157,35 @@ const useStyles = createStyles((theme) => ({
 			height: rem(80),
 		},
 	},
+	searchBanner: {
+		...theme.other.utilityFonts.utility1,
+		color: theme.other.colors.secondary.black,
+		width: '100%',
+		maxWidth: '100%',
+		height: 'auto',
+		display: 'flex',
+		alignItems: 'flex-start',
+		justifyContent: 'center',
+		textAlign: 'center',
+		position: 'relative',
+		borderRadius: rem(8),
+		padding: `${rem(12)} ${rem(16)} ${rem(16)}`,
+		marginBottom: rem(32),
+		[theme.fn.largerThan('sm')]: {
+			marginTop: rem(-40),
+		},
+		[theme.fn.largerThan('md')]: {
+			marginTop: rem(-20),
+		},
+		[theme.fn.smallerThan('sm')]: {
+			height: rem(80),
+		},
+	},
+	emoji: {
+		marginRight: rem(8),
+		verticalAlign: 'top',
+		display: 'block',
+	},
 }))
 
 const SearchResults = () => {
@@ -174,6 +274,16 @@ const SearchResults = () => {
 		}
 	}, [data, loadingPage])
 
+	const [stateInUS, setStateInUS] = useState<string>('')
+
+	useEffect(() => {
+		if (searchState.searchTerm?.slice(-3) == 'USA') {
+			setStateInUS(searchState.searchTerm?.split(', ')[1] || '')
+		} else {
+			setStateInUS('')
+		}
+	}, [searchState.searchTerm])
+
 	useEffect(
 		() => {
 			if (typeof router.query.page === 'string' && searchState.page !== router.query.page)
@@ -210,14 +320,15 @@ const SearchResults = () => {
 	}, [])
 
 	if (error) return <>Error</>
-	const showAlertMessage = ['PW', 'AS', 'UM', 'MP', 'MH', 'US', 'VI', 'GU', 'PR'].includes(country)
+	const showCountryAlertMessage = ['PW', 'AS', 'UM', 'MP', 'MH', 'US', 'VI', 'GU', 'PR'].includes(country)
+	const showStateAlertMessage = true
 
 	return (
 		<>
 			<Head>
 				<title>{t('page-title.base', { ns: 'common', title: '$t(page-title.search-results)' })}</title>
 			</Head>
-			{showAlertMessage && (
+			{showCountryAlertMessage && (
 				<Box className={classes.banner}>
 					<Text variant={variants.Text.utility1white}>
 						<Trans
@@ -237,25 +348,53 @@ const SearchResults = () => {
 					</Text>
 				</Box>
 			)}
+
+			{showStateAlertMessage && (
+				<Box className={classes.banner}>
+					<Text variant={variants.Text.utility1white}>
+						<Trans
+							i18nKey='alerts.search-page-legislative-map'
+							ns='common'
+							components={{
+								ATLink: (
+									<Link
+										external
+										variant={variants.Link.inheritStyle}
+										href='https://www.erininthemorning.com/p/anti-trans-legislative-risk-assessment-96f'
+										target='_blank'
+									></Link>
+								),
+							}}
+						/>
+					</Text>
+				</Box>
+			)}
+
 			<Grid.Col
 				xs={12}
 				sm={12}
 				pb={30}
-				{...(showAlertMessage ? { mt: { base: 80, xs: 80, sm: 20, md: 20, lg: 20, xl: 40 } } : {})}
+				{...(showCountryAlertMessage || showStateAlertMessage
+					? { mt: { base: 80, xs: 80, sm: 20, md: 20, lg: 20, xl: 40 } }
+					: {})}
 			>
 				<Group spacing={20} w='100%' className={classes.searchControls}>
 					<Group maw={{ md: '50%', base: '100%' }} w='100%'>
 						<SearchBox
 							type='location'
 							loadingManager={{ setLoading: setLoadingPage, isLoading: loadingPage }}
 							initialValue={searchState.searchTerm}
-							resetInitialValue={() => {
-								searchStateActions.setSearchTerm('')
+							setSearchValue={(newValue: string) => {
+								searchStateActions.setSearchTerm(newValue)
 							}}
 						/>
 					</Group>
 					<Group noWrap w={{ base: '100%', md: '50%' }}>
-						<ServiceFilter resultCount={resultCount} isFetching={searchIsFetching} />
+						<ServiceFilter
+							resultCount={resultCount}
+							isFetching={searchIsFetching}
+							current={searchState.services}
+						/>
 						{/* @ts-expect-error `component` prop not needed.. */}
 						<MoreFilter resultCount={resultCount} isFetching={searchIsFetching}>
 							{t('more.filters')}
@@ -279,16 +418,55 @@ const SearchResults = () => {
 					loadingManager={{ setLoading: setLoadingPage, isLoading: loadingPage }}
 				/>
 			</Grid.Col>
-			<Grid.Col xs={12} sm={8} md={8}>
-				{data?.resultCount === 0 && crisisResults ? (
-					<NoResults data={crisisResults} />
-				) : (
-					<>
-						{resultDisplay}
-						<Pagination total={getSearchResultPageCount(data?.resultCount)} />
-					</>
-				)}
-			</Grid.Col>
+			<>
+				<Grid.Col xs={12} sm={8} md={8}>
+					{data?.resultCount === 0 && crisisResults ? (
+						<NoResults data={crisisResults} />
+					) : (
+						<>
+							{stateRiskLevels[stateInUS] && (
+								<div>
+									<Box
+										className={classes.searchBanner}
+										style={{
+											backgroundColor: protectiveStates.includes(stateInUS)
+												? theme.other.colors.secondary.cornflower
+												: theme.fn.lighten(theme.other.colors.tertiary.pink, 0.3),
+										}}
+									>
+										<div className={classes.emoji}>🔔</div>
+										<Text
+											variant={
+												protectiveStates.includes(stateInUS)
+													? variants.Text.utility1white
+													: variants.Text.utility1
+											}
+										>
+											<Trans
+												i18nKey={stateRiskLevels[stateInUS]}
+												ns='common'
+												components={{
+													ATLink: (
+														<Link
+															external
+															variant={variants.Link.inheritStyle}
+															href='https://www.erininthemorning.com/p/anti-trans-legislative-risk-assessment-96f'
+															target='_blank'
+														></Link>
+													),
+												}}
+											/>
+										</Text>
+									</Box>
+								</div>
+							)}
+
+							{resultDisplay}
+							<Pagination total={getSearchResultPageCount(data?.resultCount)} />
+						</>
+					)}
+				</Grid.Col>
+			</>
 		</>
 	)
 }

packages/ui/components/core/SearchBox.tsx

@@ -143,7 +143,7 @@ export const SearchBox = ({
 	initialValue = '',
 	pinToLeft,
 	placeholderTextKey,
-	resetInitialValue,
+	setSearchValue: setSearchValue,
 }: SearchBoxProps) => {
 	const { classes, cx } = useStyles()
 	const variants = useCustomVariant()
@@ -181,6 +181,7 @@ export const SearchBox = ({
 			(!autocompleteData?.results?.length && autocompleteLoading && notBlank(search))
 		) {
 			setSearchLoading(true)
+			setSearchValue?.(search)
 			setResults([{ value: search, label: search, fetching: true }])
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -244,7 +245,7 @@ export const SearchBox = ({
 				onClick={() => {
 					form.reset()
 					form.values.search = ''
-					resetInitialValue?.()
+					setSearchValue?.('')
 				}}
 			>
 				<Text>{t('clear')}</Text>
@@ -402,7 +403,7 @@ type SearchBoxProps = {
 	initialValue?: string
 	pinToLeft?: boolean
 	placeholderTextKey?: string
-	resetInitialValue?: () => void
+	setSearchValue?: (newValue: string) => void
 }
 type FormValues = {
 	search: string

packages/ui/modals/ServiceFilter/index.tsx

@@ -28,7 +28,7 @@
 
 import { useAccordionStyles, useModalStyles, useStyles } from './styles'
 
-export const ServiceFilter = ({ resultCount, isFetching, disabled }: ServiceFilterProps) => {
+export const ServiceFilter = ({ resultCount, isFetching, current, disabled }: ServiceFilterProps) => {
 	const { data: serviceOptionData } = api.service.getFilterOptions.useQuery(undefined, {
 		select: (data) =>
 			data.map(({ id, tsKey, tsNs, services }) => ({
@@ -302,5 +302,6 @@
 interface ServiceFilterProps {
 	resultCount?: number
 	isFetching?: boolean
+	current?: string[]
 	disabled?: boolean
 }

packages/ui/theme/common.tsx

@@ -63,6 +63,8 @@ const colors = {
 		coolGray: '#d9d9d9',
 		red: '#C05C4A',
 		pink: '#D4A1BA',
+		lightPink: '#F2E1E9',
+		lightGreen: '#E4F9EA',
 		lightBlue: '#79ADD7',
 		purple: '#705890',
 		darkBlue: '#3c4e8f',