feat: donate button (#829)

<!--- Please provide a general summary of your changes in the title
above -->

# Pull Request type

<!-- Please try to limit your pull request to one type; submit multiple
pull requests if needed. -->

Please check the type of change your PR introduces:

- [x] Bugfix
- [x] Feature
- [ ] Code style update (formatting, renaming)
- [ ] Refactoring (no functional changes, no API changes)
- [ ] Build-related changes
- [ ] Documentation content changes
- [ ] Other (please describe):

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: IN-928

## What is the new behavior?

<!-- Please describe the behavior or changes that are being added by
this PR. -->

-
-
-

## Does this introduce a breaking change?

- [ ] Yes
- [ ] No

<!-- If this does introduce a breaking change, please describe the
impact and migration path for existing applications below. -->

## Other information

<!-- Any other information that is important to this PR, such as
screenshots of how the component looks before and after the change. -->

apps/app/package.json

@@ -26,22 +26,17 @@
 		"@emotion/react": "11.11.1",
 		"@emotion/server": "11.11.0",
 		"@hookform/resolvers": "3.3.1",
-		"@iconify/react": "4.1.1",
 		"@mantine/carousel": "6.0.21",
 		"@mantine/core": "6.0.21",
 		"@mantine/dates": "6.0.21",
-		"@mantine/dropzone": "6.0.21",
 		"@mantine/form": "6.0.21",
 		"@mantine/hooks": "6.0.21",
 		"@mantine/modals": "6.0.21",
 		"@mantine/next": "6.0.21",
 		"@mantine/notifications": "6.0.21",
 		"@mantine/nprogress": "6.0.21",
-		"@mantine/prism": "6.0.21",
-		"@mantine/spotlight": "6.0.21",
-		"@mantine/tiptap": "6.0.21",
 		"@mantine/utils": "6.0.21",
-		"@next/bundle-analyzer": "13.5.4",
+		"@next/bundle-analyzer": "13.5.3",
 		"@opentelemetry/api": "1.6.0",
 		"@opentelemetry/exporter-trace-otlp-http": "0.44.0",
 		"@opentelemetry/resources": "1.17.1",
@@ -56,9 +51,6 @@
 		"@sentry/profiling-node": "1.2.1",
 		"@tanstack/react-query": "4.36.1",
 		"@tanstack/react-table": "8.10.6",
-		"@tiptap/extension-link": "2.1.11",
-		"@tiptap/react": "2.1.11",
-		"@tiptap/starter-kit": "2.1.11",
 		"@trpc/client": "10.40.0",
 		"@trpc/next": "10.40.0",
 		"@trpc/react-query": "10.40.0",
@@ -75,7 +67,6 @@
 		"@weareinreach/ui": "workspace:*",
 		"@weareinreach/util": "workspace:*",
 		"cookies-next": "4.0.0",
-		"core-js": "3.33.0",
 		"dayjs": "1.11.10",
 		"embla-carousel-autoplay": "7.1.0",
 		"embla-carousel-react": "7.1.0",
@@ -90,7 +81,7 @@
 		"just-compare": "2.3.0",
 		"luxon": "3.4.3",
 		"mantine-react-table": "1.3.3",
-		"next": "13.5.4",
+		"next": "13.5.3",
 		"next-auth": "4.23.2",
 		"next-i18next": "14.0.3",
 		"next-seo": "6.1.0",

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

@@ -83,6 +83,11 @@
 		"website": "Direct website"
 	},
 	"disclaimer": "Disclaimer",
+	"donate": {
+		"hover": "Donate today to help keep InReach free for everyone",
+		"popup": "Help keep InReach free for everyone",
+		"to-inreach": "Donate to InReach 💝"
+	},
 	"dont-have-account": "Don't have an account?",
 	"download-app": "Download the app",
 	"edit-profile": "Edit Profile",
@@ -392,6 +397,7 @@
 		"decline": "Decline",
 		"delete": "Delete",
 		"distance": "Distance",
+		"donate": "Donate",
 		"email": "Email",
 		"home": "Home",
 		"hours": "Hours",

apps/app/src/pages/401.tsx

@@ -1,12 +1,15 @@
 import { Container, rem, Stack, Title } from '@mantine/core'
 import { type GetStaticProps } from 'next'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 import { type Route } from 'nextjs-routes'
 import { z } from 'zod'
 
-import { LoginBody } from '@weareinreach/ui/modals/Login'
 import { getServerSideTranslations } from '~app/utils/i18n'
+// import { LoginBody } from '@weareinreach/ui/modals/Login'
+
+const LoginBody = dynamic(() => import('@weareinreach/ui/modals/Login').then((mod) => mod.LoginBody))
 
 const RouteSchema = z.object({
 	pathname: z.string(),

apps/app/src/pages/_app.tsx

@@ -4,6 +4,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { Analytics } from '@vercel/analytics/react'
 import { type NextPage } from 'next'
 import { type AppProps, type NextWebVitalsMetric } from 'next/app'
+import dynamic from 'next/dynamic'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { type Session } from 'next-auth'
@@ -21,6 +22,10 @@ import { Providers } from '~app/providers'
 import { api } from '~app/utils/api'
 
 import nextI18nConfig from '../../next-i18next.config.mjs'
+// import { Donate, DonateModal } from '@weareinreach/ui/components/core/Donate'
+const DonateModal = dynamic(() =>
+	import('@weareinreach/ui/components/core/Donate').then((mod) => mod.DonateModal)
+)
 
 const defaultSEO = {
 	titleTemplate: '%s | InReach',
@@ -95,6 +100,7 @@ const MyApp = (appProps: AppPropsWithGridSwitch) => {
 				<Notifications transitionDuration={500} />
 				<ReactQueryDevtools initialIsOpen={false} toggleButtonProps={{ style: { zIndex: 99998 } }} />
 				<Analytics />
+				<DonateModal />
 			</Providers>
 		</>
 	)

apps/app/src/pages/account/index.tsx

@@ -1,13 +1,18 @@
 import { Center, Grid, Loader, Overlay, Stack, Title } from '@mantine/core'
 import { type GetServerSideProps } from 'next'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { useSession } from 'next-auth/react'
 import { useTranslation } from 'next-i18next'
 
 import { getServerSession } from '@weareinreach/auth'
-import { QuickPromotionModal } from '@weareinreach/ui/modals'
 import { getServerSideTranslations } from '~app/utils/i18n'
+// import { QuickPromotionModal } from '@weareinreach/ui/modals'
 
+// @ts-expect-error Next Dynamic doesn't like polymorphic components
+const QuickPromotionModal = dynamic(() =>
+	import('@weareinreach/ui/modals/QuickPromotion').then((mod) => mod.QuickPromotionModal)
+)
 const SavedLists = () => {
 	const { t } = useTranslation('common')
 	const { data: session, status } = useSession()
@@ -22,7 +27,7 @@ const SavedLists = () => {
 	if (status === 'unauthenticated' || session === null) {
 		return (
 			<Overlay blur={2}>
-				<QuickPromotionModal autoLaunch onClose={() => router.replace('/')} />
+				<QuickPromotionModal component='button' autoLaunch onClose={() => router.replace('/')} />
 			</Overlay>
 		)
 	}

apps/app/src/pages/account/reviews.tsx

@@ -1,12 +1,18 @@
 import { Center, Grid, Loader, Overlay, Stack, Title } from '@mantine/core'
-import { type GetServerSideProps, InferGetServerSidePropsType } from 'next'
+import { type GetServerSideProps } from 'next'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { useSession } from 'next-auth/react'
 import { useTranslation } from 'next-i18next'
 
 import { getServerSession } from '@weareinreach/auth'
-import { QuickPromotionModal } from '@weareinreach/ui/modals'
 import { getServerSideTranslations } from '~app/utils/i18n'
+// import { QuickPromotionModal } from '@weareinreach/ui/modals'
+
+// @ts-expect-error Next Dynamic doesn't like polymorphic components
+const QuickPromotionModal = dynamic(() =>
+	import('@weareinreach/ui/modals/QuickPromotion').then((mod) => mod.QuickPromotionModal)
+)
 
 const Reviews = () => {
 	const { t } = useTranslation('common')
@@ -22,7 +28,7 @@ const Reviews = () => {
 	if (status === 'unauthenticated' || session === null) {
 		return (
 			<Overlay blur={2}>
-				<QuickPromotionModal autoLaunch onClose={() => router.replace('/')} />
+				<QuickPromotionModal component='button' autoLaunch onClose={() => router.replace('/')} />
 			</Overlay>
 		)
 	}

apps/app/src/pages/account/saved.tsx

@@ -1,13 +1,18 @@
 import { Center, Grid, Loader, Overlay, Stack, Title } from '@mantine/core'
 import { type GetServerSideProps } from 'next'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { useSession } from 'next-auth/react'
 import { useTranslation } from 'next-i18next'
 
 import { getServerSession } from '@weareinreach/auth'
-import { QuickPromotionModal } from '@weareinreach/ui/modals'
 import { getServerSideTranslations } from '~app/utils/i18n'
+// import { QuickPromotionModal } from '@weareinreach/ui/modals'
 
+// @ts-expect-error Next Dynamic doesn't like polymorphic components
+const QuickPromotionModal = dynamic(() =>
+	import('@weareinreach/ui/modals/QuickPromotion').then((mod) => mod.QuickPromotionModal)
+)
 const SavedLists = () => {
 	const { t } = useTranslation('common')
 	const { data: session, status } = useSession()
@@ -22,7 +27,7 @@ const SavedLists = () => {
 	if (status === 'unauthenticated' || session === null) {
 		return (
 			<Overlay blur={2}>
-				<QuickPromotionModal autoLaunch onClose={() => router.replace('/')} />
+				<QuickPromotionModal component='button' autoLaunch onClose={() => router.replace('/')} />
 			</Overlay>
 		)
 	}

apps/app/src/pages/admin/index.tsx

@@ -1,4 +1,4 @@
-import { Container, Stack, Title } from '@mantine/core'
+import { Stack, Title } from '@mantine/core'
 import { type GetServerSideProps, type NextPage } from 'next'
 import Head from 'next/head'
 import { useSession } from 'next-auth/react'

apps/app/src/pages/admin/quicklink/email.tsx

@@ -32,6 +32,7 @@ import {
 // import { ReactTableDevtools } from '@tanstack/react-table-devtools'
 import compact from 'just-compact'
 import { type GetServerSideProps } from 'next'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { useSession } from 'next-auth/react'
 import { type Route } from 'nextjs-routes'
@@ -44,9 +45,13 @@ import { Link } from '@weareinreach/ui/components/core/Link'
 import { MultiSelectPopover } from '@weareinreach/ui/components/data-portal/MultiSelectPopover'
 import { useCustomVariant } from '@weareinreach/ui/hooks/useCustomVariant'
 import { Icon } from '@weareinreach/ui/icon'
-import { QuickPromotionModal } from '@weareinreach/ui/modals'
 import { api } from '~app/utils/api'
 import { getServerSideTranslations } from '~app/utils/i18n'
+// import { QuickPromotionModal } from '@weareinreach/ui/modals'
+// @ts-expect-error Next Dynamic doesn't like polymorphic components
+const QuickPromotionModal = dynamic(() =>
+	import('@weareinreach/ui/modals/QuickPromotion').then((mod) => mod.QuickPromotionModal)
+)
 
 const RESULTS_PER_PAGE = 20
 
@@ -405,7 +410,7 @@ const QuickLink = () => {
 				<>
 					<Space h={400} />
 					<Overlay blur={2}>
-						<QuickPromotionModal autoLaunch noClose />
+						<QuickPromotionModal component='button' autoLaunch noClose />
 					</Overlay>
 				</>
 			) : !isLoading && !form.values.data?.length ? (

apps/app/src/pages/admin/quicklink/index.tsx

@@ -2,6 +2,7 @@
 
 import { Overlay, Stack, Tabs, Title } from '@mantine/core'
 import { type GetServerSideProps } from 'next'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { useSession } from 'next-auth/react'
 import { type Route } from 'nextjs-routes'
@@ -10,8 +11,13 @@ import { useEffect, useState } from 'react'
 import { trpcServerClient } from '@weareinreach/api/trpc'
 import { checkServerPermissions } from '@weareinreach/auth'
 import { Icon } from '@weareinreach/ui/icon'
-import { QuickPromotionModal } from '@weareinreach/ui/modals'
 import { getServerSideTranslations } from '~app/utils/i18n'
+// import { QuickPromotionModal } from '@weareinreach/ui/modals'
+
+// @ts-expect-error Next Dynamic doesn't like polymorphic components
+const QuickPromotionModal = dynamic(() =>
+	import('@weareinreach/ui/modals/QuickPromotion').then((mod) => mod.QuickPromotionModal)
+)
 
 const QuickLinkIndex = () => {
 	const router = useRouter()
@@ -43,7 +49,7 @@ const QuickLinkIndex = () => {
 			</Stack>
 			{overlay && (
 				<Overlay blur={2}>
-					<QuickPromotionModal autoLaunch noClose />
+					<QuickPromotionModal component='button' autoLaunch noClose />
 				</Overlay>
 			)}
 		</>

apps/app/src/pages/admin/quicklink/phone.tsx

@@ -31,6 +31,7 @@ import {
 } from '@tanstack/react-table'
 import compact from 'just-compact'
 import { type GetServerSideProps } from 'next'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { useSession } from 'next-auth/react'
 import { type Route } from 'nextjs-routes'
@@ -44,9 +45,14 @@ import { MultiSelectPopover } from '@weareinreach/ui/components/data-portal/Mult
 import { useCustomVariant } from '@weareinreach/ui/hooks'
 import { parsePhoneNumber } from '@weareinreach/ui/hooks/usePhoneNumber'
 import { Icon } from '@weareinreach/ui/icon'
-import { QuickPromotionModal } from '@weareinreach/ui/modals'
 import { api } from '~app/utils/api'
 import { getServerSideTranslations } from '~app/utils/i18n'
+// import { QuickPromotionModal } from '@weareinreach/ui/modals'
+
+// @ts-expect-error Next Dynamic doesn't like polymorphic components
+const QuickPromotionModal = dynamic(() =>
+	import('@weareinreach/ui/modals/QuickPromotion').then((mod) => mod.QuickPromotionModal)
+)
 
 const RESULTS_PER_PAGE = 20
 
@@ -388,7 +394,7 @@ const QuickLink = () => {
 				<>
 					<Space h={400} />
 					<Overlay blur={2}>
-						<QuickPromotionModal autoLaunch noClose />
+						<QuickPromotionModal component='button' autoLaunch noClose />
 					</Overlay>
 				</>
 			) : isSuccess && !form.values.data?.length ? (

apps/app/src/pages/admin/quicklink/services.tsx

@@ -31,6 +31,7 @@ import {
 } from '@tanstack/react-table'
 import compact from 'just-compact'
 import { type GetServerSideProps } from 'next'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { useSession } from 'next-auth/react'
 import { type Route } from 'nextjs-routes'
@@ -43,9 +44,14 @@ import { Link } from '@weareinreach/ui/components/core/Link'
 import { MultiSelectPopover } from '@weareinreach/ui/components/data-portal/MultiSelectPopover'
 import { useCustomVariant } from '@weareinreach/ui/hooks'
 import { Icon } from '@weareinreach/ui/icon'
-import { QuickPromotionModal } from '@weareinreach/ui/modals'
 import { api } from '~app/utils/api'
 import { getServerSideTranslations } from '~app/utils/i18n'
+// import { QuickPromotionModal } from '@weareinreach/ui/modals'
+
+// @ts-expect-error Next Dynamic doesn't like polymorphic components
+const QuickPromotionModal = dynamic(() =>
+	import('@weareinreach/ui/modals/QuickPromotion').then((mod) => mod.QuickPromotionModal)
+)
 
 const RESULTS_PER_PAGE = 20
 
@@ -323,7 +329,7 @@ const QuickLink = () => {
 				<>
 					<Space h={400} />
 					<Overlay blur={2}>
-						<QuickPromotionModal autoLaunch noClose />
+						<QuickPromotionModal component='button' autoLaunch noClose />
 					</Overlay>
 				</>
 			) : !isLoading && !form.values.data?.length ? (

apps/app/src/pages/index.tsx

@@ -16,8 +16,9 @@ import { getCookie } from 'cookies-next'
 import Autoplay from 'embla-carousel-autoplay'
 import { type GetStaticProps } from 'next'
 import Head from 'next/head'
+import { useRouter } from 'next/router'
 import { type TFunction, Trans, useTranslation } from 'next-i18next'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { ms } from '@weareinreach/api/lib/milliseconds'
 import { trpcServerClient } from '@weareinreach/api/trpc'
@@ -154,6 +155,7 @@ const CardTranslation = ({ i18nKey, t }: { i18nKey: string; t: TFunction }) => {
 }
 
 const Home: NextPageWithoutGrid = () => {
+	const router = useRouter()
 	const { t } = useTranslation('landingPage')
 	const theme = useMantineTheme()
 	const variants = useCustomVariant()
@@ -166,6 +168,11 @@ const Home: NextPageWithoutGrid = () => {
 
 	const launchAHpopup = getCookie('inr-ahpop')
 
+	useEffect(() => {
+		router.prefetch('/search/[...params]')
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [])
+
 	return (
 		<>
 			<Head>