Deposit

Usage

import { Deposit } from '@wdzyi/ui';

<Deposit
  balance={account.balance}
  limit={{ amount: 500, used: account.depositedThisWeek, period: 'weekly' }}
  methods={account.paymentMethods}
  onChangeLimit={() => open('limits')}
  onDeposit={async ({ amount, method }) => {
    const { reference } = await deposit(amount, method.id);
    return reference;
  }}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

balancenumber = 84.2

What the player has now, in the header, and what the new balance counts up from. Give the new balance once a deposit has gone through, or leave it, and the card counts it on itself.

presetsnumber[] = [20, 50, 100, 250]

The amounts offered, smallest first. None is chosen until the player chooses it.

methodsDepositMethod[]

The ways to pay, each with an id, its kind, which is card, bank or wallet, its name in full, a short name for its tile and how soon it arrives. A saved card ending 4021, a bank transfer and a wallet by default.

defaultMethodstring

The id of the way to pay chosen to begin with. Left out, the player chooses.

defaultAmountnumber

An amount to begin with. Left out, the field is empty.

limitDepositLimit | null = { amount: 500, used: 350, period: 'weekly' }

The deposit limit, what’s gone in so far this period, and the period, daily, weekly or monthly. Null for none.

minnumber = 10

The least that can be deposited.

onChangeLimit() => void

Called when Change, beside the limit, is pressed, to open where limits are set. Left out, Change isn’t shown.

onDeposit(deposit: DepositRequest) => Promise<string | void>

Makes the deposit, with its amount and way to pay. Resolve with its reference for the receipt, or reject and the card says nothing was taken and offers to try again. Left out, it stands in for 2.4 seconds.

onDone() => void

Called when Done is pressed on the receipt, as the card goes back to a new deposit.

currencystring = 'AUD'

The currency, written the Australian way, as in $1,240.50.

denseboolean = false

A shorter cashier for a tight space: the presets and the field share a row, and the ways to pay are three squares beside Deposit.

classNamestring

Added to the card. It’s 360px wide at most, and narrows with the space it’s in.

Notes

• Nothing is chosen to begin with, the presets run smallest first, and there’s no bonus or offer anywhere on it. The line under the amount says what’s left of the limit, and an amount over it is refused right there as it goes over, in pink with the reason, while the button says Over your limit.
• Depositing works in the foil for as long as it takes, 2.4 seconds in the demo. Then the card becomes its receipt rather than swapping: the ways to pay fold away over 420ms as the form lifts off, a green tick, Deposit complete and the reference rise into its place a line at a time, and the button becomes Done. After 320ms the amount counts in on the Money Count the payout pieces share, an odometer whose cents land last, and only once it has landed do the balance in the corner and the limit line move on.
• Sound: select for a preset or a way to pay, key and erase in the field, error once as an amount goes over the limit, a rising run of coin as the amount counts in, nine notes a second at most, and land as it lands.
• The ways to pay are a radio group, moved through with the arrows. Enter in the field deposits, and focus moves to Done once it has. A refusal, the deposit and the new balance are announced. The shorter cashier keeps the same height from the form to the receipt, so it fits a phone’s card at every step.
• With reduced motion, the form and the receipt fade into each other in place, the ways to pay go at once, and the amount is simply there.