diff --git a/src/components/Cashout/Cashout.consts.ts b/src/components/Cashout/Cashout.consts.ts index 8bad61a76..8cce2333d 100644 --- a/src/components/Cashout/Cashout.consts.ts +++ b/src/components/Cashout/Cashout.consts.ts @@ -67,4 +67,5 @@ export interface ICashoutScreenProps { crossChainDetails: [] appliedPromoCode?: string | null offrampType: OfframpType + onPromoCodeApplied: (code: string | null) => void } diff --git a/src/components/Cashout/Cashout.tsx b/src/components/Cashout/Cashout.tsx index d060399b7..9a3df0f48 100644 --- a/src/components/Cashout/Cashout.tsx +++ b/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) const [usdValue, setUsdValue] = useState(undefined) + const [appliedPromoCode, setAppliedPromoCode] = useState(null) const [linkDetails, setLinkDetails] = useState() const [password, setPassword] = useState('') @@ -175,6 +176,8 @@ export const Cashout = ({}) => { setTransactionHash, crossChainDetails, offrampType: OfframpType.CASHOUT, + appliedPromoCode, + onPromoCodeApplied: setAppliedPromoCode, } as any)} ) diff --git a/src/components/Offramp/Confirm.view.tsx b/src/components/Offramp/Confirm.view.tsx index a90a1f275..77810d367 100644 --- a/src/components/Offramp/Confirm.view.tsx +++ b/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(undefined) - ////////////////////// - // state for checking promo code - const [appliedPromoCode, setAppliedPromoCode] = useState(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 = ({ - + )} diff --git a/src/components/Offramp/Offramp.consts.ts b/src/components/Offramp/Offramp.consts.ts index 67c9a43ad..7f6d0d85c 100644 --- a/src/components/Offramp/Offramp.consts.ts +++ b/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 { diff --git a/src/components/Offramp/PromoCodeChecker.tsx b/src/components/Offramp/PromoCodeChecker.tsx index 42a67920c..dc24c627a 100644 --- a/src/components/Offramp/PromoCodeChecker.tsx +++ b/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(INITIAL_STATE) +interface PromoCodeCheckerProps { + onPromoCodeApplied: (code: string | null) => void + appliedPromoCode: string | null +} + +const PromoCodeChecker = ({ onPromoCodeApplied, appliedPromoCode }: PromoCodeCheckerProps) => { + const [promoCheckerState, setPromoCheckerState] = useState({ + ...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 (
{/* header */} diff --git a/src/components/Offramp/Success.view.tsx b/src/components/Offramp/Success.view.tsx index 36a8c4a64..58829348c 100644 --- a/src/components/Offramp/Success.view.tsx +++ b/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 (
@@ -47,11 +56,11 @@ export const OfframpSuccessView = ({
- {appliedPromoCode ? '$0' : accountType === 'iban' ? '$1' : '$0.50'} + ${calculateFee()}
- $ + ${/* 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 &&