Withdrawal

Usage

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

<Withdrawal
  available={account.withdrawable}
  account='Bank account ending 7713'
  progress={withdrawal}
  onWithdraw={async (amount) => {
    const { reference, eta } = await withdraw(amount);
    return { reference, expected: eta };
  }}
  onDone={() => setWithdrawal(undefined)}
/>

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

Props

availablenumber = 1284.5

What can be withdrawn now. Give the new figure once a withdrawal is requested, or leave it, and the card takes the amount off itself.

accountstring = 'Bank account ending 7713'

Where the money goes, as it should read.

defaultAmountnumber = 240

The amount in the field to begin with.

minnumber = 20

The least that can be withdrawn.

progressWithdrawalProgress

A withdrawal on its way: its amount, the step it has reached, when each step happened, when it should arrive, and its reference. Give it, and the card follows it. Left out, the card asks for an amount, and once it’s requested, shows it at its first step.

hintsRecord<WithdrawalStep, string>

How long each step usually takes, shown beside it until it happens: Now, Within 1 hr, Same day and 1–3 hrs by default.

onWithdraw(amount: number) => Promise<WithdrawalReceipt | string | void>

Requests the withdrawal. Resolve with its reference and when it should arrive, or reject and the card offers to try again. Left out, it stands in for a second.

onDone() => void

Called when Done is pressed on the receipt. The card goes back to asking for an amount while the money carries on its way; when you give progress, clear it here too.

currencystring = 'AUD'

The currency, written the Australian way.

denseboolean = false

A shorter card for a tight space: the amount and the account share a row, and the steps run across rather than down.

classNamestring

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

Notes

• The four steps are there before anything is asked for, Requested, Approved, Sent and Arrived, each with how long it usually takes. Once it’s requested, the card becomes its receipt where it stands: a green tick, Withdrawal requested and the reference rise in where the amount was, the amount counts in on the Money Count the payout pieces share, and only once it lands does what’s available roll down by it. The line under it says when it’s due, and the button becomes Done.
• Below, each step lands with a green tick and the time it happened, the step it’s at has a light that breathes out every 1.8 seconds, and the line on to the next one runs while the money is moving. Arriving pops the tick again, and the receipt says it’s paid to the bank and when. There’s nothing on it to call the money back, and no offer to play on with it: Done only puts the receipt away.
• In the demo, the request takes a second, approval lands 2.8 seconds later and the money is sent 3.2 seconds after that, the clock times moving on a couple of minutes and then nine more, as a bank’s would. It rests on Sent, still live, with its arrival due.
• Sound: key and erase in the field, error once as an amount goes over what’s available, a rising run of coin as the amount counts in and land as it lands, notify as Approved and Sent land, and land again as it arrives, from its own row. Each step is announced with its time.
• With reduced motion, the light holds still, the line on to the next step stands as dashes, the form and the receipt fade into each other, and the amount is simply there.