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

fix(payout): dropdown for selecting payment methods, UI updates #581

Merged
merged 1 commit into from
Aug 23, 2024
Merged

fix(payout): dropdown for selecting payment methods, UI updates #581

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
49 changes: 27 additions & 22 deletions src/CollectWidget.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,23 +497,28 @@ let make = (
}

let handleTabSelection = selectedPMT => {
if (
availablePaymentMethodTypesOrdered->Array.indexOf(selectedPMT) >=
defaultOptionsLimitInTabLayout
) {
// Move the selected payment method at the last tab position
let ordList = availablePaymentMethodTypes->Array.reduceWithIndex([], (acc, pmt, i) => {
if i === defaultOptionsLimitInTabLayout - 1 {
acc->Array.push(selectedPMT)
}
if pmt !== selectedPMT {
acc->Array.push(pmt)
}
acc
})
setAvailablePaymentMethodTypesOrdered(_ => ordList)
}
setSelectedPaymentMethodType(_ => Some(selectedPMT))
availablePaymentMethodTypesOrdered
->Array.find(pmt => pmt->getPaymentMethodTypeLabel === selectedPMT)
->Option.map(selectedPaymentMethod => {
if (
availablePaymentMethodTypesOrdered->Array.indexOf(selectedPaymentMethod) >=
defaultOptionsLimitInTabLayout
) {
// Move the selected payment method at the last tab position
let ordList = availablePaymentMethodTypes->Array.reduceWithIndex([], (acc, pmt, i) => {
if i === defaultOptionsLimitInTabLayout - 1 {
acc->Array.push(selectedPaymentMethod)
}
if pmt !== selectedPaymentMethod {
acc->Array.push(pmt)
}
acc
})
setAvailablePaymentMethodTypesOrdered(_ => ordList)
}
setSelectedPaymentMethodType(_ => Some(selectedPaymentMethod))
})
->ignore
}

let renderTabScreen = (~limit=defaultOptionsLimitInTabLayout) => {
Expand Down Expand Up @@ -541,9 +546,8 @@ let make = (
<option
key={i->Int.toString}
value={pmt->getPaymentMethodTypeLabel}
className="flex items-center px-2.5 py-0.5 cursor-pointer hover:bg-jp-gray-50"
onClick={_ => handleTabSelection(pmt)}>
<div className="ml-2.5"> {React.string(pmt->getPaymentMethodTypeLabel)} </div>
className="text-black bg-white hover:bg-gray-100">
{React.string(pmt->getPaymentMethodTypeLabel)}
</option>,
)
}
Expand All @@ -559,7 +563,7 @@ let make = (
<div
key={i->Int.toString}
onClick={_ => setSelectedPaymentMethodType(_ => Some(pmt))}
className="flex w-full items-center rounded border border-solid border-jp-gray-700 px-2.5 py-1.5 mr-2.5 cursor-pointer hover:bg-jp-gray-50"
className="flex w-full items-center rounded border-0 px-2.5 py-1.5 mr-2.5 cursor-pointer hover:bg-jp-gray-50"
style={selectedPaymentMethodType === Some(pmt) ? activeStyles : defaultStyles}>
{pmt->getPaymentMethodTypeIcon}
<div className="ml-2.5"> {React.string(pmt->getPaymentMethodTypeLabel)} </div>
Expand All @@ -582,7 +586,8 @@ let make = (
size=10
/>
<select
className="h-full relative rounded border border-solid border-jp-gray-700 py-1.5 cursor-pointer bg-white text-transparent w-8 hover:bg-jp-gray-50 focus:border-0.5">
onChange={ev => handleTabSelection(ReactEvent.Form.target(ev)["value"])}
className="h-full relative rounded border border-solid border-jp-gray-700 py-1.5 cursor-pointer bg-white text-transparent w-8 hover:bg-jp-gray-50">
{switch selectedPaymentMethodType {
| Some(selectedPaymentMethodType) =>
<option
Expand Down
13 changes: 7 additions & 6 deletions src/PaymentMethodCollectElement.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,10 +229,10 @@ let make = (~integrateError, ~logger) => {
<div
className="flex flex-row justify-between items-center w-full px-10 py-5 border-b border-jp-gray-300">
<div className="text-2xl font-semibold"> {React.string(options.collectorName)} </div>
<img className="h-7 w-auto" src={options.logo} alt="o" />
<img className="h-12 w-auto max-w-21" src={options.logo} alt="o" />
</div>
<img className="h-40 w-40 mt-7" src={imageSource} alt="o" />
<div className="text-5 font-semibold mt-2.5"> {React.string(readableStatus)} </div>
<div className="text-xl font-semibold mt-2.5"> {React.string(readableStatus)} </div>
<div className="text-jp-gray-800 m text-center mx-10 mb-10">
{React.string(statusInfo.message)}
</div>
Expand Down Expand Up @@ -292,11 +292,12 @@ let make = (~integrateError, ~logger) => {
<div
className="flex flex-col-reverse
lg:mx-5 lg:mt-5 lg:flex-row lg:justify-between">
<div className="font-bold text-5xl mt-5 lg:mt-0 lg:text-3xl">
{React.string(`${options.currency} ${options.amount}`)}
<div
className="font-bold text-5xl mt-5 lg:mt-0 lg:text-3xl flex justify-center items-center">
<p> {React.string(`${options.currency} ${options.amount}`)} </p>
</div>
<div className="flex items-center justify-center h-16 w-16 bg-white rounded-sm">
<img className="max-h-12 max-w-16 h-auto w-auto" src={merchantLogo} alt="O" />
<div className="flex items-center justify-center h-12 w-auto bg-white rounded-sm">
<img className="max-h-12 w-auto max-w-21 h-auto w-auto" src={merchantLogo} alt="O" />
</div>
</div>
<div className="lg:mx-5">
Expand Down
Loading