[TASK-14544] Add Support CTA for claim and req fulfilment guest flows

src/app/[...recipient]/client.tsx

@@ -32,6 +32,7 @@ import ExternalWalletFulfilManager from '@/components/Request/views/ExternalWall
 import ActionList from '@/components/Common/ActionList'
 import NavHeader from '@/components/Global/NavHeader'
 import { ReqFulfillBankFlowManager } from '@/components/Request/views/ReqFulfillBankFlowManager'
+import SupportCTA from '@/components/Global/SupportCTA'
 
 export type PaymentFlow = 'request_pay' | 'external_wallet' | 'direct_pay' | 'withdraw'
 interface Props {
@@ -48,7 +49,7 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
     const [error, setError] = useState<ValidationErrorViewProps | null>(null)
     const [isUrlParsed, setIsUrlParsed] = useState(false)
     const [isRequestDetailsFetching, setIsRequestDetailsFetching] = useState(false)
-    const { user } = useAuth()
+    const { user, isFetchingUser } = useAuth()
     const searchParams = useSearchParams()
     const chargeId = searchParams.get('chargeId')
     const requestId = searchParams.get('id')
@@ -531,6 +532,9 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
                     )}
                 </>
             )}
+
+            {/* Show only to guest users */}
+            {!user && !isFetchingUser && <SupportCTA />}
         </div>
     )
 }

src/components/Claim/Claim.tsx

@@ -25,6 +25,8 @@ import * as _consts from './Claim.consts'
 import FlowManager from './Link/FlowManager'
 import { type PeanutCrossChainRoute } from '@/services/swap'
 import { NotFoundClaimLink, WrongPasswordClaimLink, ClaimedView } from './Generic'
+import SupportCTA from '../Global/SupportCTA'
+import { twMerge } from 'tailwind-merge'
 import { ClaimBankFlowStep, useClaimBankFlow } from '@/context/ClaimBankFlowContext'
 import { useSearchParams } from 'next/navigation'
 
@@ -268,7 +270,10 @@ export const Claim = ({}) => {
     }, [user])
 
     return (
-        <PageContainer alignItems="center">
+        <PageContainer
+            alignItems="center"
+            className={twMerge('flex flex-col', !user && !isFetchingUser && 'min-h-[calc(100dvh-110px)]')}
+        >
             {linkState === _consts.claimLinkStateType.LOADING && <PeanutLoading />}
             {linkState === _consts.claimLinkStateType.CLAIM && (
                 <FlowManager
@@ -327,6 +332,9 @@ export const Claim = ({}) => {
                     onClose={() => checkLink(window.location.href)}
                 />
             )}
+
+            {/* Show only to guest users */}
+            {linkState !== _consts.claimLinkStateType.LOADING && !user && !isFetchingUser && <SupportCTA />}
         </PageContainer>
     )
 }

src/components/Global/SupportCTA/index.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import Link from 'next/link'
+
+const SupportCTA = () => {
+    return (
+        <div className="flex flex-col items-center justify-center border-t border-grey-1">
+            <Link href="/support" className="mt-2 cursor-pointer text-sm text-grey-1 underline underline-offset-2">
+                Need help with this transaction?
+            </Link>
+        </div>
+    )
+}
+
+export default SupportCTA