From 42cc78de4ee6ff034d2458fd90ecd7c3e19285e4 Mon Sep 17 00:00:00 2001 From: Joe Karow <58997957+JoeKarow@users.noreply.github.com> Date: Thu, 12 Oct 2023 12:54:27 -0400 Subject: [PATCH] fix donation links --- apps/app/src/pages/index.tsx | 9 +- apps/app/src/pages/support/index.tsx | 19 +- packages/ui/components/core/Donate/index.tsx | 202 +++++-------------- 3 files changed, 72 insertions(+), 158 deletions(-) diff --git a/apps/app/src/pages/index.tsx b/apps/app/src/pages/index.tsx index 62cfbe415e..94b4b4ec86 100644 --- a/apps/app/src/pages/index.tsx +++ b/apps/app/src/pages/index.tsx @@ -20,6 +20,7 @@ import { useRouter } from 'next/router' import { type TFunction, Trans, useTranslation } from 'next-i18next' import { useEffect, useRef, useState } from 'react' +import { donateEvent } from '@weareinreach/analytics/events' import { ms } from '@weareinreach/api/lib/milliseconds' import { trpcServerClient } from '@weareinreach/api/trpc' import { AntiHatePopup } from '@weareinreach/ui/components/core/AntiHateMessage' @@ -27,7 +28,7 @@ import { Link } from '@weareinreach/ui/components/core/Link' import { UserReview } from '@weareinreach/ui/components/core/UserReview' import { CallOut } from '@weareinreach/ui/components/sections/CallOut' import { Hero } from '@weareinreach/ui/components/sections/Hero' -import { useCustomVariant } from '@weareinreach/ui/hooks' +import { useCustomVariant } from '@weareinreach/ui/hooks/useCustomVariant' import { AccountVerifyModal } from '@weareinreach/ui/modals/AccountVerified' import { PrivacyStatementModal } from '@weareinreach/ui/modals/PrivacyStatement' import { ResetPasswordModal } from '@weareinreach/ui/modals/ResetPassword' @@ -134,7 +135,11 @@ const CardTranslation = ({ i18nKey, t }: { i18nKey: string; t: TFunction }) => { ), Text: ., LinkFree: ( - + . ), diff --git a/apps/app/src/pages/support/index.tsx b/apps/app/src/pages/support/index.tsx index fe17a4e679..e5b0e7c224 100644 --- a/apps/app/src/pages/support/index.tsx +++ b/apps/app/src/pages/support/index.tsx @@ -3,11 +3,11 @@ import { type GetStaticProps } from 'next' import dynamic from 'next/dynamic' import { useTranslation } from 'next-i18next' +import { donateEvent } from '@weareinreach/analytics/events' import { AntiHateMessage } from '@weareinreach/ui/components/core/AntiHateMessage' import { Link } from '@weareinreach/ui/components/core/Link' -import { useCustomVariant } from '@weareinreach/ui/hooks' +import { useCustomVariant } from '@weareinreach/ui/hooks/useCustomVariant' import { Icon } from '@weareinreach/ui/icon' -// import { GenericContentModal, PrivacyStatementModal } from '@weareinreach/ui/modals' import { getServerSideTranslations } from '~app/utils/i18n' // @ts-expect-error Next Dynamic doesn't like polymorphic components @@ -19,10 +19,6 @@ const PrivacyStatementModal = dynamic(() => import('@weareinreach/ui/modals/PrivacyStatement').then((mod) => mod.PrivacyStatementModal) ) -const DonateModal = dynamic(() => - import('@weareinreach/ui/components/core/Donate').then((mod) => mod.DonateModal) -) - const SupportItem = ({ tKey }: SupportItemProps) => { const { t } = useTranslation('common') const variants = useCustomVariant() @@ -43,10 +39,17 @@ const SupportPage = () => { const variants = useCustomVariant() const linkVar = { variant: variants.Link.inlineInvertedUtil1 } + const support = [ - + - , + , , diff --git a/packages/ui/components/core/Donate/index.tsx b/packages/ui/components/core/Donate/index.tsx index d365329364..5779a0e516 100644 --- a/packages/ui/components/core/Donate/index.tsx +++ b/packages/ui/components/core/Donate/index.tsx @@ -3,11 +3,10 @@ import { useDisclosure, useTimeout } from '@mantine/hooks' import { useRouter } from 'next/router' import Script from 'next/script' import { useTranslation } from 'next-i18next' -import { type ReactElement, useEffect, useState } from 'react' +import { useEffect, useState } from 'react' import { donateEvent } from '@weareinreach/analytics/events' import { Button } from '~ui/components/core/Button' -import { Link } from '~ui/components/core/Link' import { useCustomVariant } from '~ui/hooks/useCustomVariant' import { useScreenSize } from '~ui/hooks/useScreenSize' import { bounce } from '~ui/theme/animation' @@ -33,10 +32,7 @@ const useStyles = createStyles((theme) => ({ }, })) -interface DonateModalProps { - children?: ReactElement -} -export const DonateModal = ({ children }: DonateModalProps) => { +export const DonateModal = () => { const [opened, handler] = useDisclosure(false) const [modalOpened, modalHandler] = useDisclosure(false) const { t } = useTranslation() @@ -68,75 +64,57 @@ export const DonateModal = ({ children }: DonateModalProps) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []) - const InjectedChildren = () => { - if (!children) return null - - return ( - - {children} - - ) - } - - const showPopover = !children && (opened || !showEmoji) - const hasChildren = !!children const isSupportPage = router.pathname === '/support' - - if (isSupportPage && !hasChildren) return null + const showPopover = !isSupportPage && (opened || !showEmoji) return ( <> - - - {hasChildren ? ( - - ) : ( - - - - )} - - - {t(showEmoji ? 'donate.hover' : 'donate.popup')} - - + + + + + + + {t(showEmoji ? 'donate.hover' : 'donate.popup')} + + + { id='kindful-donate-form-9e692b4a-fcfc-46a2-9a0e-4f9b8b0bd37b' className={cx('kindful-embed-wrapper', classes.modalBody)} style={{ paddingLeft: '0 !important', paddingRight: '0 !important' }} - > -