-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BG-1019: Bank form to use new wise-proxy (#2631)
* container * requirements file * wise currencies * expected funds * requirements query * types * fields * order to preserve state * validation error * async validation * radio type * also return quote id * handle overflow * refresh endpoint * styles * required * dual optional * focus * date * style payment option * rename type * uniform style * remove popover * remove unused * use component classes * name * open sans * load text * required amount * create recipient * remove font-work * unregister to remove residual state * bank statement input * bank statement file * remove unused * prune props * move currency selector * update wise currencies * rename * expected funds * clean bank details * Recipient details form * recipient details form * remove unused * remove unused * currency selector * pass form buttons * setup onsubmit * use in registration * use updated * finished and reset * fix error * get file previews * updates * navigate * remove unused service * remove unused * disabled form * delay focus * remove disabled
- Loading branch information
Showing
38 changed files
with
691 additions
and
1,972 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import { Combobox } from "@headlessui/react"; | ||
import { useCurrencisQuery } from "services/aws/wise"; | ||
import { isEmpty } from "helpers"; | ||
|
||
type Props = { | ||
classes?: string; | ||
searchText?: string; | ||
}; | ||
|
||
export default function Options({ classes = "", searchText = "" }: Props) { | ||
const { data: currencies = [] } = useCurrencisQuery( | ||
{}, | ||
{ | ||
selectFromResult({ data = [], ...rest }) { | ||
return { | ||
data: data.filter((c) => { | ||
// check whether query matches either the currency name or any of its keywords | ||
const formatQuery = searchText.toLowerCase().replace(/\s+/g, ""); // ignore spaces and casing | ||
const matchesCode = c.code.toLowerCase().includes(formatQuery); | ||
const matchesName = c.name | ||
.toLowerCase() | ||
.replace(/\s+/g, "") // ignore spaces and casing | ||
.includes(formatQuery); | ||
|
||
return matchesCode || matchesName; | ||
}), | ||
...rest, | ||
}; | ||
}, | ||
} | ||
); | ||
|
||
return ( | ||
<Combobox.Options | ||
className={`${classes} w-full bg-white dark:bg-blue-d6 shadow-lg rounded max-h-52 overflow-y-auto scroller text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm`} | ||
> | ||
{isEmpty(currencies) ? ( | ||
<div className="p-2 text-sm cursor-default">Nothing found</div> | ||
) : ( | ||
currencies.map(({ code, name }) => ( | ||
<Combobox.Option key={code} value={{ code, name }}> | ||
{({ active, selected }) => ( | ||
<div | ||
className={`${active ? "bg-blue-l2 dark:bg-blue-d1" : ""} ${ | ||
selected ? "font-semibold" : "font-normal" | ||
} flex items-center gap-2 p-2 text-sm cursor-pointer truncate`} | ||
> | ||
{code} - {name} | ||
</div> | ||
)} | ||
</Combobox.Option> | ||
)) | ||
)} | ||
</Combobox.Options> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,69 +1,39 @@ | ||
import { Popover, Transition } from "@headlessui/react"; | ||
import { Fragment, useState } from "react"; | ||
import Icon from "components/Icon"; | ||
import { Label } from "components/form"; | ||
import { APP_NAME } from "constants/env"; | ||
|
||
type Props = { | ||
classes: { input: string }; | ||
disabled: boolean; | ||
onChange: (expectedFunds: number) => void; | ||
onChange: (amount: string) => void; | ||
value: string; | ||
disabled?: boolean; | ||
}; | ||
|
||
export default function ExpectedFunds(props: Props) { | ||
const [value, setValue] = useState(""); | ||
|
||
return ( | ||
<div className="field"> | ||
<div className="flex sm:gap-2 items-center mb-1"> | ||
<Label htmlFor="amount"> | ||
What is the amount of donations (in USD) you expect to receive monthly | ||
on our platform? | ||
</Label> | ||
<Popover className="relative"> | ||
<> | ||
<Popover.Button className="group flex items-center rounded-full text-base font-medium hover:text-orange focus:outline-none"> | ||
<Icon type="Info" className="text-2xl" /> | ||
</Popover.Button> | ||
{/** Transition is configured so that the popover appears from the top on smaller screens and from the bottom on larger screens*/} | ||
<Transition | ||
as={Fragment} | ||
enter="transition ease-out duration-200" | ||
enterFrom="opacity-0 translate-y-0 lg:translate-y-1" | ||
enterTo="opacity-100 translate-y-1 lg:translate-y-0" | ||
leave="transition ease-in duration-150" | ||
leaveFrom="opacity-100 translate-y-1 lg:translate-y-0" | ||
leaveTo="opacity-0 translate-y-0 lg:translate-y-1" | ||
> | ||
{/** using `-translate-x-2/4` instead of `-translate-x-1/2` here as the latter occasionally has no effect for some reason */} | ||
<Popover.Panel className="absolute -left-6 -translate-x-3/4 lg:-translate-x-2/4 lg:-top-40 mt-1 sm:mt-0 z-10 w-screen max-w-xs sm:max-w-sm p-4 bg-white dark:bg-blue-d3 overflow-hidden text-xs sm:text-sm rounded-lg shadow-lg ring-1 ring-black/5"> | ||
Depending on how much you expect to receive each month via{" "} | ||
{APP_NAME}, different details are required. At this point, we | ||
recommend using a conservative figure - Maybe $1000 per month. | ||
</Popover.Panel> | ||
</Transition> | ||
</> | ||
</Popover> | ||
</div> | ||
<Label htmlFor="wise__amount" required> | ||
What is the amount of donations (in USD) you expect to receive monthly | ||
on our platform? | ||
</Label> | ||
<input | ||
id="amount" | ||
id="wise__amount" | ||
type="text" | ||
value={value} | ||
value={props.value} | ||
pattern="^[1-9]\d*$" | ||
required | ||
placeholder="1,000" | ||
onChange={(event) => { | ||
const tvalue = Number(event.target.value); | ||
if (isNaN(tvalue)) { | ||
return event.preventDefault(); | ||
} | ||
setValue(event.target.value); | ||
props.onChange(tvalue); | ||
}} | ||
className={`field-input text-field ${props.classes.input}`} | ||
onChange={(event) => props.onChange(event.target.value)} | ||
className={`field-input text-field ${props.classes.input} invalid:ring-1 invalid:ring-red`} | ||
autoComplete="off" | ||
spellCheck={false} | ||
disabled={props.disabled} | ||
inputMode="numeric" | ||
/> | ||
<p className="text-gray-d1 text-sm my-2 italic"> | ||
Depending on how much you expect to receive each month via {APP_NAME}, | ||
different details are required. At this point, we recommend using a | ||
conservative figure - Maybe $1000 per month. | ||
</p> | ||
</div> | ||
); | ||
} |
Oops, something went wrong.