add donation link to Support page

weareinreach · Oct 11, 2023 · d28fd81 · d28fd81
1 parent 2482106
commit d28fd81
Show file tree

Hide file tree

Showing 4 changed files with 216 additions and 185 deletions.
diff --git a/apps/app/public/locales/en/common.json b/apps/app/public/locales/en/common.json
@@ -83,8 +83,11 @@
 		"website": "Direct website"
 	},
 	"disclaimer": "Disclaimer",
-	"donation-hover-msg": "Donate today to help keep InReach free for everyone",
-	"donation-popup-msg": "Help keep InReach free for everyone",
+	"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",

diff --git a/apps/app/src/pages/support/index.tsx b/apps/app/src/pages/support/index.tsx
@@ -1,4 +1,4 @@
-import { Divider, Flex, Grid, Stack, Title, useMantineTheme } from '@mantine/core'
+import { Divider, Flex, Grid, Stack, Text, Title, useMantineTheme } from '@mantine/core'
 import { type GetStaticProps } from 'next'
 import dynamic from 'next/dynamic'
 import { useTranslation } from 'next-i18next'
@@ -19,53 +19,54 @@ const PrivacyStatementModal = dynamic(() =>
 	import('@weareinreach/ui/modals/PrivacyStatement').then((mod) => mod.PrivacyStatementModal)
 )
 
-const SavedLists = () => {
+const DonateModal = dynamic(() =>
+	import('@weareinreach/ui/components/core/Donate').then((mod) => mod.DonateModal)
+)
+
+const SupportItem = ({ tKey }: SupportItemProps) => {
+	const { t } = useTranslation('common')
+	const variants = useCustomVariant()
+	return (
+		<Flex justify='space-between' py={14}>
+			<Text variant={variants.Text.utility1}>{t(tKey)}</Text>
+			<Icon icon='carbon:chevron-right' height={24} />
+		</Flex>
+	)
+}
+interface SupportItemProps {
+	tKey: string
+}
+
+const SupportPage = () => {
 	const { t } = useTranslation('common')
 	const theme = useMantineTheme()
 
 	const variants = useCustomVariant()
 	const linkVar = { variant: variants.Link.inlineInvertedUtil1 }
 	const support = [
+		<DonateModal key={7}>
+			<SupportItem tKey='donate.to-inreach' />
+		</DonateModal>,
 		<Link key={0} href='/suggest' target='_self' {...linkVar}>
-			<Flex justify='space-between' py={14}>
-				{t('footer.suggest-org')}
-				<Icon icon='carbon:chevron-right' height={24} />
-			</Flex>
+			<SupportItem tKey='footer.suggest-org' />
 		</Link>,
 		<Link key={1} href='https://www.surveymonkey.com/r/96QD8ZQ' external {...linkVar}>
-			<Flex justify='space-between' py={14}>
-				{t('footer.share-feedback')}
-				<Icon icon='carbon:chevron-right' height={24} />
-			</Flex>
+			<SupportItem tKey='footer.share-feedback' />
 		</Link>,
 		<Link key={2} href='https://inreach.org/vetting-process/' external {...linkVar}>
-			<Flex justify='space-between' py={14}>
-				{t('footer.vetting-process')}
-				<Icon icon='carbon:chevron-right' height={24} />
-			</Flex>
+			<SupportItem tKey='footer.vetting-process' />
 		</Link>,
 		<PrivacyStatementModal key={3} component={Link} {...linkVar}>
-			<Flex justify='space-between' py={14}>
-				{t('footer.privacy-statement')}
-				<Icon icon='carbon:chevron-right' height={24} />
-			</Flex>
+			<SupportItem tKey='footer.privacy-statement' />
 		</PrivacyStatementModal>,
 		<GenericContentModal key={4} content='antiHate' component={Link} {...linkVar}>
-			<Flex justify='space-between' py={14}>
-				{t('footer.anti-hate')} <Icon icon='carbon:chevron-right' height={24} />
-			</Flex>
+			<SupportItem tKey='footer.anti-hate' />
 		</GenericContentModal>,
 		<GenericContentModal key={5} content='accessibilityStatement' component={Link} {...linkVar}>
-			<Flex justify='space-between' py={14}>
-				{t('footer.digital-accessibility')}
-				<Icon icon='carbon:chevron-right' height={24} />
-			</Flex>
+			<SupportItem tKey='footer.digital-accessibility' />
 		</GenericContentModal>,
 		<GenericContentModal key={6} content='disclaimer' component={Link} {...linkVar}>
-			<Flex justify='space-between' py={14}>
-				{t('footer.disclaimer')}
-				<Icon icon='carbon:chevron-right' height={24} />
-			</Flex>
+			<SupportItem tKey='footer.disclaimer' />
 		</GenericContentModal>,
 	]
 
@@ -94,4 +95,4 @@ export const getStaticProps: GetStaticProps = async ({ locale }) => {
 		},
 	}
 }
-export default SavedLists
+export default SupportPage
diff --git a/packages/ui/components/core/Donate/index.stories.tsx b/packages/ui/components/core/Donate/index.stories.tsx
@@ -1,14 +1,14 @@
 import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Donate } from './index'
+import { DonateModal } from './index'
 
 export default {
 	title: 'Components/Core/Donate',
-	component: Donate,
+	component: DonateModal,
 	parameters: {
 		layoutWrapper: 'centeredFullscreen',
 	},
-} satisfies Meta<typeof Donate>
+} satisfies Meta<typeof DonateModal>
 
-type StoryDef = StoryObj<typeof Donate>
+type StoryDef = StoryObj<typeof DonateModal>
 export const Default = {} satisfies StoryDef