Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(voucher): updated confirm voucher modal #4469

Merged
merged 1 commit into from
May 15, 2024
Merged

chore(voucher): updated confirm voucher modal #4469

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/voucher/components/create/confirm-modal/confirm-modal.module.css
View file
Open in desktop
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
Open in desktop
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
Loading