Skip to content

Commit 3b3f7f4

Browse files
trigal2012trigal2012
committed
add emoji to search results alert, change text of both alerts, add pop-up for nationwide alert
1 parent 703f520 commit 3b3f7f4

File tree

9 files changed

+181
-9
lines changed

9 files changed

+181
-9
lines changed

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

+27
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,33 @@
258258
"questions": "Questions?",
259259
"quick-promo-body": "<textUtility1>💚 Save and share personalized resource lists</textUtility1>\n<textUtility1>💬 Leave public rating/reviews on organizations</textUtility1>\n<textUtility1>🏠 Suggest organizations in your area</textUtility1>\n<textUtility1>🔗 Claim your organization’s profile page (Coming soon!)</textUtility1>",
260260
"quick-promo-heading": "<emojiLg>🌈</emojiLg>\n<title2>You need to log in to do that.</title2>\n<textDarkGray>With a free InReach account you can unlock additional features:</textDarkGray>",
261+
"recommended-links": {
262+
"emoji": "🌈",
263+
"title": "Recommended Links",
264+
"body": "Find more information about your rights.",
265+
"buttons": {
266+
"btn-1": {
267+
"text": "Anti-Trans Risk Map (Erin Reed)",
268+
"link": "https://www.erininthemorning.com/p/post-election-2024-anti-trans-risk"
269+
},
270+
"btn-2": {
271+
"text": "ID Documents Center (A4TE)",
272+
"link": "https://transequality.org/documents"
273+
},
274+
"btn-3": {
275+
"text": "LGBTQ+ Immigrants' Rights (Immigration Equality)",
276+
"link": "https://immigrationequality.org/legal/legal-help/resources/know-your-rights/"
277+
},
278+
"btn-4": {
279+
"text": "Asylum Resources (CWS)",
280+
"link": "https://asylumandborderresources.org/"
281+
},
282+
"btn-5": {
283+
"text": "Immigrants' Rights (ACLU)",
284+
"link": "https://www.aclu.org/know-your-rights/immigrants-rights"
285+
}
286+
}
287+
},
261288
"remote-services": "Services available remotely",
262289
"remote-services-page-title": "Remote services",
263290
"reset-password": "Reset your password",

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

+8-1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@ import { api } from '~app/utils/api'
3434
import { getSearchResultPageCount, SEARCH_RESULT_PAGE_SIZE } from '~app/utils/constants'
3535
import { getServerSideTranslations } from '~app/utils/i18n'
3636

37+
// @ts-expect-error Next Dynamic doesn't like polymorphic components
38+
const RecommendedLinksModal = dynamic(() =>
39+
import('@weareinreach/ui/modals/RecommendedLinks').then((mod) => mod.RecommendedLinksModal)
40+
)
41+
3742
const MoreFilter = dynamic(() => import('@weareinreach/ui/modals/MoreFilter').then((mod) => mod.MoreFilter))
3843
const ServiceFilter = dynamic(() =>
3944
import('@weareinreach/ui/modals/ServiceFilter').then((mod) => mod.ServiceFilter)
@@ -223,7 +228,9 @@ const SearchResults = () => {
223228
<title>{t('page-title.base', { ns: 'common', title: '$t(page-title.search-results)' })}</title>
224229
</Head>
225230

226-
<LocationBasedAlertBanner lat={lat} lon={lon} type='primary' />
231+
<RecommendedLinksModal component={'div'}>
232+
<LocationBasedAlertBanner lat={lat} lon={lon} type='primary' />
233+
</RecommendedLinksModal>
227234

228235
<Grid.Col
229236
xs={12}

‎packages/db/prisma/data-migrations/2025-02-24_update-locationbased-alert-string-add-emoji.ts ‎packages/db/prisma/data-migrations/2025-03-01_update-locationbased-alert-string-add-emoji.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type JobDef } from '~db/prisma/jobPreRun'
33

44
/** Define the job metadata here. */
55
const jobDef: JobDef = {
6-
jobId: '2025-02-24_update-locationbased-alert-string-add-emoji',
6+
jobId: '2025-03-01_update-locationbased-alert-string-add-emoji',
77
title: 'add "Bell" emoji to alert link',
88
createdBy: 'Diana Garbarino',
99
/** Optional: Longer description for the job */
@@ -12,7 +12,7 @@ const jobDef: JobDef = {
1212
/**
1313
* Job export - this variable MUST be UNIQUE
1414
*/
15-
export const job20250224_update_locationbased_alert_string_add_emoji = {
15+
export const job20250301_update_locationbased_alert_string_add_emoji = {
1616
title: `[${jobDef.jobId}] ${jobDef.title}`,
1717
task: async (ctx, task) => {
1818
const { createLogger, formatMessage, jobPostRunner, prisma } = ctx
@@ -21,10 +21,10 @@ export const job20250224_update_locationbased_alert_string_add_emoji = {
2121
const log = (...args: Parameters<typeof formatMessage>) => (task.output = formatMessage(...args))
2222

2323
// Variables for the update
24-
const key = 'locationBasedAlert.alrt_01J1D1GAT5G5S6QNMCND5PMDAX'
24+
const key = 'locationBasedAlert.alrt_01J5XNBQ5GREHSHK5D2QTCXRWE'
2525
const ns = 'org-data'
2626
const newTextValue =
27-
'🔔 This <Link href="https://www.erininthemorning.com/p/post-election-2024-anti-trans-risk">anti-trans legislative risk map</Link> shows the 2-year risk for anti-trans laws in all 50 states and D.C.'
27+
'🔔 Some organizations are adjusting services due to recent funding cuts and policy changes. Contact providers directly for updates.'
2828

2929
// Perform the update
3030
const update = await prisma.translationKey.update({

‎packages/db/prisma/data-migrations/2025-03-01_update-nationwide-locationbased-alert.ts

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { type MigrationJob } from '~db/prisma/dataMigrationRunner'
2+
import { type JobDef } from '~db/prisma/jobPreRun'
3+
4+
/** Define the job metadata here. */
5+
const jobDef: JobDef = {
6+
jobId: '2025-03-01_update-nationwide-based-alert-text',
7+
title: 'change the nationwide alert text string',
8+
createdBy: 'Diana Garbarino',
9+
/** Optional: Longer description for the job */
10+
description: 'change the nationwide alert text string',
11+
}
12+
/**
13+
* Job export - this variable MUST be UNIQUE
14+
*/
15+
export const job20250301_update_nationwide_based_alert = {
16+
title: `[${jobDef.jobId}] ${jobDef.title}`,
17+
task: async (ctx, task) => {
18+
const { createLogger, formatMessage, jobPostRunner, prisma } = ctx
19+
/** Create logging instance */
20+
createLogger(task, jobDef.jobId)
21+
const log = (...args: Parameters<typeof formatMessage>) => (task.output = formatMessage(...args))
22+
23+
// Variables for the update
24+
const key = 'locationBasedAlert.alrt_01J1D1GAT5G5S6QNMCND5PMDAX'
25+
const ns = 'org-data'
26+
const newTextValue = 'Check out our list of recommended links for trans and immigrant communities'
27+
// Perform the update
28+
const update1 = await prisma.translationKey.update({
29+
where: { ns_key: { key, ns } },
30+
data: { text: newTextValue },
31+
})
32+
33+
log(`Location-based alert text string updated: ${update1.key} with new text: "${update1.text}"`)
34+
35+
/**
36+
* DO NOT REMOVE BELOW
37+
*
38+
* This writes a record to the DB to register that this migration has run successfully.
39+
*/
40+
await jobPostRunner(jobDef)
41+
},
42+
def: jobDef,
43+
} satisfies MigrationJob

‎packages/db/prisma/data-migrations/index.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,6 @@ export * from './2025-02-17_new_legal-service-tag'
2525
export * from './2025-02-17_new_mental-health-service-tag'
2626
export * from './2025-02-17_new-cost-attribute'
2727
export * from './2025-02-17_update-medical-tags'
28-
export * from './2025-02-24_update-locationbased-alert-string-add-emoji'
28+
export * from './2025-03-01_update-locationbased-alert-string-add-emoji'
29+
export * from './2025-03-01_update-nationwide-locationbased-alert'
2930
// codegen:end

‎packages/ui/components/core/LocationBasedAlertBanner/index.tsx

+14-3
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const useStyles = createStyles((theme) => ({
6767
},
6868
}))
6969

70-
export const LocationBasedAlertBanner = ({ lat, lon, type }: LocationBasedAlertBannerProps) => {
70+
export const LocationBasedAlertBanner = ({ lat, lon, type, onClick }: LocationBasedAlertBannerProps) => {
7171
const { classes, cx } = useStyles()
7272
const variants = useCustomVariant()
7373

@@ -91,7 +91,13 @@ export const LocationBasedAlertBanner = ({ lat, lon, type }: LocationBasedAlertB
9191
{locationBasedAlertBannerProps
9292
.filter((alertProps) => alertProps.level.toLowerCase().endsWith(type))
9393
.map((alertProps) => (
94-
<Box className={classes[type]} data-alert-level={alertProps.level} key={alertProps.id}>
94+
<Box
95+
className={classes[type]}
96+
data-alert-level={alertProps.level}
97+
key={alertProps.id}
98+
onClick={onClick}
99+
style={{ cursor: onClick ? 'pointer' : 'default' }}
100+
>
95101
<Text>
96102
<Trans
97103
i18nKey={alertProps.i18nKey}
@@ -109,4 +115,9 @@ export const LocationBasedAlertBanner = ({ lat, lon, type }: LocationBasedAlertB
109115
)
110116
}
111117

112-
export type LocationBasedAlertBannerProps = { lat: number; lon: number; type: 'primary' | 'secondary' }
118+
export type LocationBasedAlertBannerProps = {
119+
lat: number
120+
lon: number
121+
type: 'primary' | 'secondary'
122+
onClick?: () => void
123+
}

‎packages/ui/modals/RecommendedLinks.stories.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { type Meta } from '@storybook/react'
2+
3+
import { Button } from '~ui/components/core/Button'
4+
5+
import { RecommendedLinksModal } from './RecommendedLinks'
6+
7+
export default {
8+
title: 'Modals/Recommended Links',
9+
component: RecommendedLinksModal,
10+
parameters: { layout: 'fullscreen', layoutWrapper: 'centeredHalf' },
11+
args: {
12+
component: Button,
13+
children: 'Open Recommended Links Modal',
14+
variant: 'inlineInvertedUtil1',
15+
},
16+
} satisfies Meta<typeof RecommendedLinksModal>
17+
18+
export const Modal = {}

‎packages/ui/modals/RecommendedLinks.tsx

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Box, type ButtonProps, createPolymorphicComponent, Modal, Stack, Text, Title } from '@mantine/core'
2+
import { useDisclosure } from '@mantine/hooks'
3+
import { useTranslation } from 'next-i18next'
4+
import { forwardRef } from 'react'
5+
6+
import { Button } from '~ui/components/core/Button'
7+
import { useCustomVariant, useScreenSize } from '~ui/hooks'
8+
9+
import { ModalTitle } from './ModalTitle'
10+
11+
const RecommendedLinksModalBody = forwardRef<HTMLButtonElement, RecommendedLinksModalProps>((props, ref) => {
12+
const { t } = useTranslation()
13+
const variants = useCustomVariant()
14+
const [opened, handler] = useDisclosure(false)
15+
const { isMobile } = useScreenSize()
16+
17+
const modalTitle = <ModalTitle breadcrumb={{ option: 'close', onClick: handler.close }} />
18+
19+
const buttons = Object.entries(t('recommended-links.buttons', { returnObjects: true }) || {})
20+
21+
return (
22+
<>
23+
<Modal title={modalTitle} opened={opened} onClose={handler.close} fullScreen={isMobile} zIndex={999999}>
24+
<Stack align='center' spacing={16}>
25+
<Text align='center' fz={40}>
26+
{t('recommended-links.emoji')}
27+
</Text>
28+
<Title order={2} align='center'>
29+
{t('recommended-links.title')}
30+
</Title>
31+
<Text align='center' variant={variants.Text.darkGray}>
32+
{t('recommended-links.body')}
33+
</Text>
34+
<Stack spacing={16} style={{ maxWidth: '100%' }}>
35+
{buttons.map(([key, btn]) => (
36+
<Button
37+
key={key}
38+
variant='secondary-icon'
39+
sx={{
40+
paddingLeft: isMobile ? '1rem' : undefined,
41+
paddingRight: isMobile ? '1rem' : undefined,
42+
textDecoration: 'none',
43+
}}
44+
onClick={() => window.open(btn.link, '_blank')}
45+
>
46+
<Text ta='center' variant={variants.Text.utility1} fz={isMobile ? '.75rem' : undefined}>
47+
{btn.text}
48+
</Text>
49+
</Button>
50+
))}
51+
</Stack>
52+
</Stack>
53+
</Modal>
54+
<Box component='button' ref={ref} onClick={handler.open} {...props} />
55+
</>
56+
)
57+
})
58+
RecommendedLinksModalBody.displayName = 'RecommendedLinksModal'
59+
60+
export const RecommendedLinksModal = createPolymorphicComponent<'button', RecommendedLinksModalProps>(
61+
RecommendedLinksModalBody
62+
)
63+
64+
export type RecommendedLinksModalProps = ButtonProps

‎packages/ui/modals/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export * from './ModalTitle'
1212
export * from './MoreFilter'
1313
export * from './PrivacyStatement'
1414
export * from './QuickPromotion'
15+
export * from './RecommendedLinks'
1516
export * from './ResetPassword'
1617
export * from './Review'
1718
export * from './Service/index'

0 commit comments

Comments
 (0)