From 275f6c7042307a34d98e6a5add44df58d11e61a2 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 20 Dec 2024 20:19:44 +0530 Subject: [PATCH 1/3] fix: promo checker fees calculation --- src/components/Cashout/Cashout.consts.ts | 1 + src/components/Cashout/Cashout.tsx | 3 +++ src/components/Offramp/Confirm.view.tsx | 14 +++++------ src/components/Offramp/Offramp.consts.ts | 2 ++ src/components/Offramp/PromoCodeChecker.tsx | 26 ++++++++++++++++++--- src/components/Offramp/Success.view.tsx | 26 +++++++++++++++++---- 6 files changed, 57 insertions(+), 15 deletions(-) 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..c0008dda7 100644 --- a/src/components/Offramp/Success.view.tsx +++ b/src/components/Offramp/Success.view.tsx @@ -32,6 +32,22 @@ export const OfframpSuccessView = ({ blockExplorerUrl = utils.getExplorerUrl(claimLinkData.chainId) } + const calculateAmount = () => { + if (offrampType === _consts.OfframpType.CASHOUT) { + // add safeguards for usd value + if (!usdValue || isNaN(parseFloat(usdValue))) { + return '0.00' + } + return utils.formatTokenAmount(parseFloat(usdValue)) + } else { + // for CLAIM type + if (!tokenPrice || !claimLinkData || isNaN(tokenPrice) || isNaN(parseFloat(claimLinkData.tokenAmount))) { + return '0.00' + } + return utils.formatTokenAmount(tokenPrice * parseFloat(claimLinkData.tokenAmount)) + } + } + return (
@@ -47,14 +63,14 @@ export const OfframpSuccessView = ({
- {appliedPromoCode ? '$0' : accountType === 'iban' ? '$1' : '$0.50'} + ${calculateAmount()}
From 03a3739dae00df9362a9fe415cba63c14728a868 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 20 Dec 2024 20:23:39 +0530 Subject: [PATCH 2/3] fix: fees message in more-info --- src/components/Offramp/Success.view.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Offramp/Success.view.tsx b/src/components/Offramp/Success.view.tsx index c0008dda7..46ea0beef 100644 --- a/src/components/Offramp/Success.view.tsx +++ b/src/components/Offramp/Success.view.tsx @@ -68,9 +68,9 @@ export const OfframpSuccessView = ({ text={ appliedPromoCode ? `Fees waived with promo code ${appliedPromoCode}` - : accountType === 'iban' - ? 'For SEPA transactions...' - : 'For ACH transactions...' + : `For ${accountType === 'iban' ? 'SEPA' : 'ACH'} transactions a fee of ${ + accountType === 'iban' ? '$1' : '$0.50' + } is charged.` } />
From 17279cb5dbe900b38d44c4a26c5d68d198fdf158 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Fri, 20 Dec 2024 22:18:13 +0530 Subject: [PATCH 3/3] fix: fee calculation --- src/components/Offramp/Success.view.tsx | 26 ++++++++++--------------- 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/src/components/Offramp/Success.view.tsx b/src/components/Offramp/Success.view.tsx index 46ea0beef..58829348c 100644 --- a/src/components/Offramp/Success.view.tsx +++ b/src/components/Offramp/Success.view.tsx @@ -32,20 +32,13 @@ export const OfframpSuccessView = ({ blockExplorerUrl = utils.getExplorerUrl(claimLinkData.chainId) } - const calculateAmount = () => { - if (offrampType === _consts.OfframpType.CASHOUT) { - // add safeguards for usd value - if (!usdValue || isNaN(parseFloat(usdValue))) { - return '0.00' - } - return utils.formatTokenAmount(parseFloat(usdValue)) - } else { - // for CLAIM type - if (!tokenPrice || !claimLinkData || isNaN(tokenPrice) || isNaN(parseFloat(claimLinkData.tokenAmount))) { - return '0.00' - } - return utils.formatTokenAmount(tokenPrice * parseFloat(claimLinkData.tokenAmount)) + 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 ( @@ -63,7 +56,7 @@ export const OfframpSuccessView = ({
- ${calculateAmount()} + ${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 &&