@@ -150,10 +155,11 @@ export function RequestPotActionList({
{/* pay with peanut button */}
diff --git a/src/features/payments/flows/contribute-pot/views/ContributePotInputView.tsx b/src/features/payments/flows/contribute-pot/views/ContributePotInputView.tsx
index 1c58697e8..5d521fd4f 100644
--- a/src/features/payments/flows/contribute-pot/views/ContributePotInputView.tsx
+++ b/src/features/payments/flows/contribute-pot/views/ContributePotInputView.tsx
@@ -19,6 +19,7 @@ import ErrorAlert from '@/components/Global/ErrorAlert'
import SupportCTA from '@/components/Global/SupportCTA'
import { useContributePotFlow } from '../useContributePotFlow'
import { useRouter } from 'next/navigation'
+import { useState } from 'react'
import { useAuth } from '@/context/authContext'
import { RequestPotActionList } from '../components/RequestPotActionList'
@@ -62,12 +63,18 @@ export function ContributePotInputView() {
}
// handle External Wallet click
+ const [isExternalWalletLoading, setIsExternalWalletLoading] = useState(false)
const handleOpenExternalWalletFlow = async () => {
if (canProceed && !isLoading) {
- const res = await executeContribution(true, true) // return after creating charge
- // Proceed only if charge is created successfully
- if (res && res.success) {
- setCurrentView('EXTERNAL_WALLET')
+ setIsExternalWalletLoading(true)
+ try {
+ const res = await executeContribution(true, true) // return after creating charge
+ // proceed only if charge is created successfully
+ if (res && res.success) {
+ setCurrentView('EXTERNAL_WALLET')
+ }
+ } finally {
+ setIsExternalWalletLoading(false)
}
}
}
@@ -122,8 +129,10 @@ export function ContributePotInputView() {
isAmountEntered={isAmountEntered}
usdAmount={amount}
recipientUserId={recipient?.userId}
+ recipientUsername={recipient?.username}
onPayWithPeanut={handlePayWithPeanut}
- isPaymentLoading={isLoading}
+ isPaymentLoading={isLoading && !isExternalWalletLoading}
+ isExternalWalletLoading={isExternalWalletLoading}
onPayWithExternalWallet={handleOpenExternalWalletFlow}
/>
diff --git a/src/features/payments/shared/components/SendWithPeanutCta.tsx b/src/features/payments/shared/components/SendWithPeanutCta.tsx
index 62656a627..ebe59d9f0 100644
--- a/src/features/payments/shared/components/SendWithPeanutCta.tsx
+++ b/src/features/payments/shared/components/SendWithPeanutCta.tsx
@@ -12,6 +12,9 @@ import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
import { Button, type ButtonProps } from '@/components/0_Bruddle/Button'
import type { IconName } from '@/components/Global/Icons/Icon'
import { useAuth } from '@/context/authContext'
+import { useAppDispatch } from '@/redux/hooks'
+import { setupActions } from '@/redux/slices/setup-slice'
+import { EInviteType } from '@/services/services.types'
import { saveRedirectUrl, saveToLocalStorage } from '@/utils/general.utils'
import Image from 'next/image'
import { useRouter } from 'next/navigation'
@@ -22,6 +25,8 @@ interface SendWithPeanutCtaProps extends ButtonProps {
// when true, will redirect to login if user is not logged in
requiresAuth?: boolean
insufficientBalance?: boolean
+ // username of the person who created the request/link — used to generate an invite code for non-logged-in users
+ inviterUsername?: string
}
/**
@@ -38,9 +43,11 @@ export default function SendWithPeanutCta({
requiresAuth = true,
onClick,
insufficientBalance = false,
+ inviterUsername,
...props
}: SendWithPeanutCtaProps) {
const router = useRouter()
+ const dispatch = useAppDispatch()
const { user, isFetchingUser } = useAuth()
const isLoggedIn = !!user?.user?.userId
@@ -51,10 +58,20 @@ export default function SendWithPeanutCta({
// don't act while auth is still resolving
if (isFetchingUser) return
- // if auth is required and user is not logged in, redirect to login
+ // if auth is required and user is not logged in, redirect to signup
if (requiresAuth && !isLoggedIn) {
- saveRedirectUrl()
- router.push('/setup')
+ const redirectUri = encodeURIComponent(
+ window.location.pathname + window.location.search + window.location.hash
+ )
+ if (inviterUsername) {
+ const inviteCode = `${inviterUsername.toUpperCase()}INVITESYOU`
+ dispatch(setupActions.setInviteCode(inviteCode))
+ dispatch(setupActions.setInviteType(EInviteType.PAYMENT_LINK))
+ router.push(`/invite?code=${inviteCode}&redirect_uri=${redirectUri}`)
+ } else {
+ saveRedirectUrl()
+ router.push('/setup')
+ }
return
}