Develop

src/components/Cashout/Cashout.consts.ts

@@ -67,4 +67,5 @@ export interface ICashoutScreenProps {
     crossChainDetails: []
     appliedPromoCode?: string | null
     offrampType: OfframpType
+    onPromoCodeApplied: (code: string | null) => void
 }

src/components/Cashout/Cashout.tsx

@@ -9,6 +9,7 @@ export const Cashout = ({}) => {
     const [step, setStep] = useState<_consts.ICashoutScreenState>(_consts.INIT_VIEW_STATE)
     const [tokenValue, setTokenValue] = useState<undefined | string>(undefined)
     const [usdValue, setUsdValue] = useState<undefined | string>(undefined)
+    const [appliedPromoCode, setAppliedPromoCode] = useState<string | null>(null)
 
     const [linkDetails, setLinkDetails] = useState<peanutInterfaces.IPeanutLinkDetails>()
     const [password, setPassword] = useState<string>('')
@@ -175,6 +176,8 @@ export const Cashout = ({}) => {
                 setTransactionHash,
                 crossChainDetails,
                 offrampType: OfframpType.CASHOUT,
+                appliedPromoCode,
+                onPromoCodeApplied: setAppliedPromoCode,
             } as any)}
         </div>
     )

src/components/Offramp/Confirm.view.tsx

@@ -51,6 +51,8 @@ export const OfframpConfirmView = ({
     attachment, // available on link claim offramps
     estimatedPoints, // available on link claim offramps
     crossChainDetails, // available on link claim offramps
+    appliedPromoCode,
+    onPromoCodeApplied,
 }: IOfframpConfirmScreenProps) => {
     //////////////////////
     // state and context vars w/ shared functionality across all offramp types
@@ -70,10 +72,6 @@ export const OfframpConfirmView = ({
     const { createLinkWrapper } = useCreateLink()
     const [createdLink, setCreatedLink] = useState<string | undefined>(undefined)
 
-    //////////////////////
-    // state for checking promo code
-    const [appliedPromoCode, setAppliedPromoCode] = useState<string | null>(null)
-
     //////////////////////
     // state and context vars for claim link offramp
 
@@ -98,9 +96,8 @@ export const OfframpConfirmView = ({
     }
 
     const handlePromoCodeApplied = (code: string | null) => {
-        setAppliedPromoCode(code)
+        onPromoCodeApplied(code)
     }
-
     //////////////////////
     // functions for cashout offramps
     // TODO: they need to be refactored to a separate file
@@ -860,7 +857,10 @@ export const OfframpConfirmView = ({
                             </div>
                         </div>
 
-                        <PromoCodeChecker onPromoCodeApplied={handlePromoCodeApplied} />
+                        <PromoCodeChecker
+                            onPromoCodeApplied={handlePromoCodeApplied}
+                            appliedPromoCode={appliedPromoCode!}
+                        />
                     </div>
                 </div>
             )}

src/components/Offramp/Offramp.consts.ts

@@ -61,6 +61,8 @@ export interface IOfframpConfirmScreenProps {
     estimatedPoints?: number
     attachment?: { message: string | undefined; attachmentUrl: string | undefined }
     recipientType?: interfaces.RecipientType
+    appliedPromoCode?: string | null
+    onPromoCodeApplied: (code: string | null) => void
 }
 
 export interface IOfframpSuccessScreenProps {

src/components/Offramp/PromoCodeChecker.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Icon from '@/components/Global/Icon'
 import { VALID_PROMO_CODES } from './Offramp.consts'
 
@@ -16,8 +16,17 @@ const INITIAL_STATE: PromoState = {
     isApplied: false,
 }
 
-const PromoCodeChecker = ({ onPromoCodeApplied }: { onPromoCodeApplied: (code: string | null) => void }) => {
-    const [promoCheckerState, setPromoCheckerState] = useState<PromoState>(INITIAL_STATE)
+interface PromoCodeCheckerProps {
+    onPromoCodeApplied: (code: string | null) => void
+    appliedPromoCode: string | null
+}
+
+const PromoCodeChecker = ({ onPromoCodeApplied, appliedPromoCode }: PromoCodeCheckerProps) => {
+    const [promoCheckerState, setPromoCheckerState] = useState<PromoState>({
+        ...INITIAL_STATE,
+        code: appliedPromoCode || '',
+        isApplied: !!appliedPromoCode,
+    })
 
     const handlePromoCodeSubmit = () => {
         const normalizedCode = promoCheckerState.code.trim().toUpperCase()
@@ -56,6 +65,17 @@ const PromoCodeChecker = ({ onPromoCodeApplied }: { onPromoCodeApplied: (code: s
         }))
     }
 
+    // update state if promo code is applied
+    useEffect(() => {
+        if (appliedPromoCode) {
+            setPromoCheckerState((prev) => ({
+                ...prev,
+                code: appliedPromoCode,
+                isApplied: true,
+            }))
+        }
+    }, [appliedPromoCode])
+
     return (
         <div className="w-full">
             {/* header */}

src/components/Offramp/Success.view.tsx

@@ -32,6 +32,15 @@ export const OfframpSuccessView = ({
         blockExplorerUrl = utils.getExplorerUrl(claimLinkData.chainId)
     }
 
+    const calculateFee = () => {
+        // if promo code is applied, fee is zero
+        if (appliedPromoCode) {
+            return '0.00'
+        }
+        // else return fee based on account type
+        return accountType === 'iban' ? '1.00' : '0.50'
+    }
+
     return (
         <div className="flex w-full flex-col items-center justify-center gap-6 py-2 pb-20 text-center">
             <label className="text-h2">Yay!</label>
@@ -47,11 +56,11 @@ export const OfframpSuccessView = ({
                     </div>
                     <div className="relative flex flex-1 items-center justify-end gap-1 text-sm font-normal">
                         <div className="flex items-center gap-1">
-                            {appliedPromoCode ? '$0' : accountType === 'iban' ? '$1' : '$0.50'}
+                            ${calculateFee()}
                             <MoreInfo
                                 text={
                                     appliedPromoCode
-                                        ? 'Fees waived with promo code!'
+                                        ? `Fees waived with promo code ${appliedPromoCode}`
                                         : `For ${accountType === 'iban' ? 'SEPA' : 'ACH'} transactions a fee of ${
                                               accountType === 'iban' ? '$1' : '$0.50'
                                           } is charged.`
@@ -69,14 +78,15 @@ export const OfframpSuccessView = ({
                     </div>
                     <div className="flex items-center justify-end gap-1 text-sm font-normal">
                         <div className="flex items-center gap-1">
-                            $
+                            ${/* if promo code is applied, show full amount without fee deduction */}
                             {appliedPromoCode
                                 ? offrampType === _consts.OfframpType.CASHOUT
                                     ? utils.formatTokenAmount(parseFloat(usdValue ?? ''))
                                     : tokenPrice &&
                                       claimLinkData &&
                                       utils.formatTokenAmount(tokenPrice * parseFloat(claimLinkData.tokenAmount))
-                                : accountType === 'iban'
+                                : // if no promo code, apply fee deduction based on account type
+                                  accountType === 'iban'
                                   ? offrampType == _consts.OfframpType.CASHOUT
                                       ? utils.formatTokenAmount(parseFloat(usdValue ?? '') - 1)
                                       : tokenPrice &&