Skip to content

Commit

Permalink
chore(voucher): updated confirm voucher modal (#4469)
Browse files Browse the repository at this point in the history
  • Loading branch information
@siddhart1o1
siddhart1o1 authored May 15, 2024
1 parent 4966684 commit 7169a5e
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 135 deletions.
6 changes: 3 additions & 3 deletions apps/voucher/components/create/confirm-modal/confirm-modal.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/* ConfirmModal.module.css */
.modal_container {
display: flex;
flex-direction: column;
gap: 0.7em;
gap: 1.3em;
min-height: 10em;
justify-content: space-between;
}

.modalTitle {
Expand All @@ -17,7 +17,7 @@
}

.modalSubtitle {
font-size: 1rem;
font-size: 0.9rem;
font-weight: bold;
}

Expand Down
270 changes: 138 additions & 132 deletions apps/voucher/components/create/confirm-modal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,16 @@ type Props = {
usdWallet: WalletDetails
}

const calculateProfitAmount = ({
amount,
commissionRatePercentage,
}: {
amount: number
commissionRatePercentage: number
}) => {
return (amount * commissionRatePercentage) / 100
}

const ConfirmModal = ({
open,
onClose,
Expand All @@ -35,28 +45,40 @@ const ConfirmModal = ({
btcWallet,
usdWallet,
}: Props) => {
const router = useRouter()
const { update } = useSession()

const [selectedWalletId, setSelectedWalletId] = useState("")
const [modalLoading, setModalLoading] = useState<boolean>(false)
const [modalError, setModalError] = useState<string | null>(null)
const [formIsValid, setFormIsValid] = useState(false)

const [createWithdrawLink, { loading: withdrawLinkLoading }] =
useCreateWithdrawLinkMutation()

const { data: currencyConversion, refetch } = useCurrencyConversionEstimationQuery({
variables: {
amount: Number(amount),
currency,
},
context: {
endpoint: "GALOY",
},
variables: { amount: Number(amount), currency },
context: { endpoint: "GALOY" },
pollInterval: 60000,
})

const { data: currencyDataForOneUnit } = useCurrencyConversionEstimationQuery({
variables: { amount: 1, currency },
context: { endpoint: "GALOY" },
})

useEffect(() => {
refetch({
amount: Number(amount),
currency,
})
refetch({ amount: Number(amount), currency })
}, [amount, currency, refetch])

const usdToCurrencyRate = Number(
currencyDataForOneUnit?.currencyConversionEstimation.usdCentAmount / 100,
)
const profitAmount = calculateProfitAmount({
amount: Number(amount),
commissionRatePercentage: Number(commissionPercentage),
})

const amountInDollars = Number(
(currencyConversion?.currencyConversionEstimation.usdCentAmount / 100).toFixed(2),
)
Expand All @@ -66,11 +88,6 @@ const ConfirmModal = ({
commissionRatePercentage: Number(commissionPercentage),
})

const { update } = useSession()
const [createWithdrawLink, { loading: withdrawLinkLoading }] =
useCreateWithdrawLinkMutation()
const router = useRouter()

const handleSubmit = async ({
voucherAmountInCents,
commissionPercentage,
Expand All @@ -83,13 +100,7 @@ const ConfirmModal = ({
setModalLoading(true)
try {
const createWithdrawLinkResult = await createWithdrawLink({
variables: {
input: {
voucherAmountInCents,
commissionPercentage,
walletId,
},
},
variables: { input: { voucherAmountInCents, commissionPercentage, walletId } },
})
update()

Expand All @@ -112,123 +123,118 @@ const ConfirmModal = ({

const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const selected = e.target.value
const isValid = selected !== "default"
setSelectedWalletId(selected === "btc" ? btcWallet.id : usdWallet.id)
setFormIsValid(isValid)
setFormIsValid(selected !== "default")
}

if (modalLoading || withdrawLinkLoading) {
return (
<ModalComponent open={open} onClose={onClose}>
<div className={styles.modal_container}>
<LoadingComponent />
</div>
</ModalComponent>
)
}
const renderErrorModal = () => (
<div className="flex flex-col justify-between gap-4 h-full">
<h1 className={styles.modalTitle}>Error</h1>
<div className="text-center mt-0">
<p className={styles.modalText}>{modalError}</p>
</div>
<Button className="w-full" onClick={() => setModalError(null)}>
Okay
</Button>
</div>
)

return (
<ModalComponent open={open} onClose={onClose}>
<div className={styles.modal_container}>
{modalError ? (
<>
<h1 className={styles.modalTitle}>Error</h1>
<div
style={{
justifyContent: "center",
display: "flex",
margin: "auto",
flexDirection: "column",
gap: "1em",
}}
>
<p className={styles.modalText}>{modalError}</p>
<div className={styles.button_container}>
<Button
className="w-full"
onClick={() => {
setModalError(null)
}}
>
Okay
</Button>
</div>
</div>
</>
) : (
<>
<h1 className={styles.modalTitle}>Confirm</h1>
<div>
<h3 className={styles.modalSubtitle}>Sales Amount </h3>
const renderConfirmationModal = () => (
<>
<div className="flex justify-between w-full">
<div>
<h3 className={styles.modalSubtitle}>Price</h3>
<p className={styles.modalText}>
{formatCurrency({ amount: Number(amount), currency })}
</p>
</div>
<div>
<h3 className={`${styles.modalSubtitle} text-right`}>Value</h3>
<p className={styles.modalText}>{Number(voucherAmountInDollars)} US Dollar</p>
</div>
</div>
<div className="flex justify-between w-full">
<div>
<h3 className={styles.modalSubtitle}>Commission</h3>
<p className={styles.modalText}>
{Number(commissionPercentage)}%
{currency !== "USD" &&
` (${formatCurrency({ amount: profitAmount, currency })})`}
</p>
</div>
<div>
{currency === "USD" ? (
<>
<h3 className={`${styles.modalSubtitle} text-right`}>Profit</h3>
<p className={styles.modalText}>
{formatCurrency({
amount: Number(amount),
currency,
})}
{formatCurrency({ amount: profitAmount, currency })} {currency}
</p>
</div>
<div>
<h3 className={styles.modalSubtitle}>Voucher Amount</h3>
</>
) : (
<>
<h3 className={`${styles.modalSubtitle} text-right`}>Rate</h3>
<p className={styles.modalText}>
{Number(voucherAmountInDollars)} US Dollar
1 USD = {formatCurrency({ amount: usdToCurrencyRate, currency })}{" "}
{currency}
</p>
</div>

<div>
<h3 className={styles.modalSubtitle}>Sales Commission</h3>
<p className={styles.modalText}>{Number(commissionPercentage)}%</p>
</div>

<div>
<h3 className={styles.modalSubtitle}>Paying Wallet</h3>
<select
name=""
id=""
defaultValue="default"
required={true}
onChange={handleSelectChange}
data-testid="wallet-select"
>
<option value="default" disabled>
Select Wallet
</option>
<option data-testid="wallet-select-btc" value="btc">
<div>BTC Wallet</div>
<div> {btcWallet.balance} sats</div>
</option>
<option
data-testid="wallet-select-usd"
value="usd"
className="flex flex-col p-1"
>
<div>USD Wallet</div>
<div> ${usdWallet.balance / 100} USD</div>
</option>
</select>
</div>

<div className="flex gap-2 mt-6">
<Button className="w-1/4" variant="link" onClick={onClose}>
Cancel
</Button>
<Button
className="w-3/4"
data-testid="pay-voucher-amount-btn"
disabled={!formIsValid}
onClick={() =>
handleSubmit({
voucherAmountInCents: Number(
(Number(voucherAmountInDollars) * 100).toFixed(),
),
commissionPercentage: Number(commissionPercentage),
walletId: selectedWalletId,
})
}
>
Pay
</Button>
</div>
</>
</>
)}
</div>
</div>
<div>
<h3 className={styles.modalSubtitle}>Paying Wallet</h3>
<select
defaultValue="default"
required
onChange={handleSelectChange}
data-testid="wallet-select"
className="w-full p-2 border rounded-md bg-secondary mt-1"
>
<option data-testid="wallet-select-btc" value="btc">
BTC Wallet - {btcWallet.balance} sats
</option>
<option data-testid="wallet-select-usd" value="usd">
USD Wallet - ${usdWallet.balance / 100} USD
</option>
</select>
</div>
<div className="flex gap-2 mt-0 flex-col w-full">
<Button
className="w-full"
data-testid="pay-voucher-amount-btn"
disabled={!formIsValid}
onClick={() =>
handleSubmit({
voucherAmountInCents: Number(
(Number(voucherAmountInDollars) * 100).toFixed(),
),
commissionPercentage: Number(commissionPercentage),
walletId: selectedWalletId,
})
}
>
Pay
</Button>
<Button
className="w-full text-primary font-bold p-1"
variant="link"
onClick={onClose}
>
Cancel
</Button>
</div>
</>
)

return (
<ModalComponent open={open} onClose={onClose}>
<div className={`${styles.modal_container} h-full`}>
{modalLoading || withdrawLinkLoading ? (
<LoadingComponent />
) : modalError ? (
renderErrorModal()
) : (
renderConfirmationModal()
)}
</div>
</ModalComponent>
Expand Down

0 comments on commit 7169a5e

Please sign in to comment.