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

refactor: payment settings redesign #1996

Merged
merged 2 commits into from
Jan 3, 2025
Merged

refactor: payment settings redesign #1996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
12a4d9a
refactor: payment-settings redesign
kanikabansal-juspay Jan 2, 2025
47ee33a
fix: clicktopay
kanikabansal-juspay Jan 2, 2025
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
163 changes: 85 additions & 78 deletions src/screens/Developer/PaymentSettings/PaymentSettings.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ module WebHookSection = {
<form onSubmit={handleSubmit} className="flex flex-col gap-8 h-full w-full py-6 px-4">
<WebHookAuthenticationHeaders setAllowEdit allowEdit />
<DesktopRow>
<div className="flex justify-start w-full gap-2">
<div className="flex justify-end w-full gap-2">
<SubmitButton
customSumbitButtonStyle="justify-start"
text="Update"
Expand Down Expand Up @@ -294,7 +294,7 @@ module WebHook = {
<div className="ml-4 mt-4">
<FieldRenderer
field={DeveloperUtils.webhookUrl}
labelClass="!text-base !text-grey-700 font-semibold"
labelClass="!text-fs-15 !text-grey-700 font-semibold"
fieldWrapperClass="max-w-xl"
/>
</div>
Expand All @@ -310,7 +310,7 @@ module ReturnUrl = {
<FieldRenderer
field={DeveloperUtils.returnUrl}
errorClass={HSwitchUtils.errorClass}
labelClass="!text-base !text-grey-700 font-semibold"
labelClass="!text-fs-15 !text-grey-700 font-semibold"
fieldWrapperClass="max-w-xl"
/>
</DesktopRow>
Expand All @@ -325,8 +325,9 @@ type options = {

module CollectDetails = {
@react.component
let make = (~title, ~options: array<options>) => {
let make = (~title, ~subTitle, ~options: array<options>) => {
open LogicUtils
open FormRenderer
let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
ReactFinalForm.useFormSubscription(["values"])->Nullable.make,
)
Expand Down Expand Up @@ -357,37 +358,43 @@ module CollectDetails = {
}
None
}, [isSelected])

<div>
<div className="flex gap-2 items-center">
<BoolInput.BaseComponent
isSelected
setIsSelected={_ => setIsSelected(val => !val)}
isDisabled=false
boolCustomClass="rounded-lg"
/>
<p className="!text-base !text-grey-700 font-semibold"> {title->React.string} </p>
</div>
<RenderIf condition={isSelected}>
<div className="mt-4">
{options
->Array.mapWithIndex((option, index) =>
<div
key={index->Int.toString}
className="flex gap-2 mb-3 items-center cursor-pointer"
onClick={_ => onClick(option.key)}>
<RadioIcon
isSelected={valuesDict->getBool(option.key, false)} fill="text-green-700"
/>
<div className=p2RegularTextStyle>
{option.name->LogicUtils.snakeToTitle->React.string}
</div>
</div>
)
->React.array}
<DesktopRow>
<div className="w-full border-t border-gray-200 pt-8">
<div className="flex justify-between items-center">
<div className="flex-1 ">
<p className="font-semibold text-fs-15"> {title->React.string} </p>
<p className="font-medium text-fs-14 text-black opacity-50 pt-2">
{subTitle->React.string}
</p>
</div>
<BoolInput.BaseComponent
isSelected
setIsSelected={_ => setIsSelected(val => !val)}
isDisabled=false
boolCustomClass="rounded-lg"
/>
</div>
</RenderIf>
</div>
<RenderIf condition={isSelected}>
<div className="mt-4">
{options
->Array.mapWithIndex((option, index) =>
<div
key={index->Int.toString}
className="flex gap-2 mb-3 items-center cursor-pointer"
onClick={_ => onClick(option.key)}>
<RadioIcon
isSelected={valuesDict->getBool(option.key, false)} fill="text-green-700"
/>
<div className=p2RegularTextStyle>
{option.name->LogicUtils.snakeToTitle->React.string}
</div>
</div>
)
->React.array}
</div>
</RenderIf>
</div>
</DesktopRow>
}
}

Expand Down Expand Up @@ -416,8 +423,8 @@ module AutoRetries = {
<>
<DesktopRow>
<FieldRenderer
labelClass="!text-base !text-grey-700 font-semibold"
fieldWrapperClass="max-w-xl"
labelClass="!text-fs-15 !text-grey-700 font-semibold"
fieldWrapperClass="w-full flex justify-between items-center border-t border-gray-200 pt-8 "
field={makeFieldInfo(
~name="is_auto_retries_enabled",
~label="Auto Retries",
Expand All @@ -429,7 +436,7 @@ module AutoRetries = {
<FieldRenderer
field={maxAutoRetries}
errorClass
labelClass="!text-base !text-grey-700 font-semibold"
labelClass="!text-fs-15 !text-grey-700 font-semibold"
fieldWrapperClass="max-w-xl mx-4"
/>
</RenderIf>
Expand Down Expand Up @@ -462,8 +469,8 @@ module ClickToPaySection = {
<RenderIf condition={featureFlagDetails.clickToPay && connectorView}>
<DesktopRow>
<FieldRenderer
labelClass="!text-base !text-grey-700 font-semibold"
fieldWrapperClass="max-w-xl"
labelClass="!text-fs-15 !text-grey-700 font-semibold"
fieldWrapperClass="w-full flex justify-between items-center border-t border-gray-200 pt-8 "
field={makeFieldInfo(
~name="is_click_to_pay_enabled",
~label="Click to Pay",
Expand All @@ -476,7 +483,7 @@ module ClickToPaySection = {
<RenderIf condition={isClickToPayEnabled}>
<DesktopRow>
<FormRenderer.FieldRenderer
labelClass="!text-base !text-grey-700 font-semibold"
labelClass="!text-fs-15 !text-grey-700 font-semibold"
field={FormRenderer.makeFieldInfo(
~label="Click to Pay - Connector ID",
~name="authentication_product_ids.click_to_pay",
Expand Down Expand Up @@ -603,10 +610,10 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
: "px-2 py-4"} flex flex-col gap-7 overflow-hidden`}>
<div className="flex items-center">
<InfoViewForWebhooks
heading="Profile ID" subHeading=busiProfieDetails.profile_id isCopy=true
heading="Profile Name" subHeading=busiProfieDetails.profile_name
/>
<InfoViewForWebhooks
heading="Profile Name" subHeading=busiProfieDetails.profile_name
heading="Profile ID" subHeading=busiProfieDetails.profile_id isCopy=true
/>
</div>
<div className="flex items-center">
Expand All @@ -619,72 +626,72 @@ let make = (~webhookOnly=false, ~showFormOnly=false, ~profileId="") => {
isCopy=true
/>
</div>
<DesktopRow>
<CollectDetails
title={"Collect billing details from wallets"}
options=[
{
name: "only if required by connector",
key: "collect_billing_details_from_wallet_connector",
},
{
name: "always",
key: "always_collect_billing_details_from_wallet_connector",
},
]
/>
<CollectDetails
title={"Collect shipping details from wallets"}
options=[
{
name: "only if required by connector",
key: "collect_shipping_details_from_wallet_connector",
},
{
name: "always",
key: "always_collect_shipping_details_from_wallet_connector",
},
]
/>
</DesktopRow>
<CollectDetails
title={"Collect billing details from wallets"}
subTitle={"Enable automatic collection of billing information when customers connect their wallets"}
options=[
{
name: "only if required by connector",
key: "collect_billing_details_from_wallet_connector",
},
{
name: "always",
key: "always_collect_billing_details_from_wallet_connector",
},
]
/>
<CollectDetails
title={"Collect shipping details from wallets"}
subTitle={"Enable automatic collection of shipping information when customers connect their wallets"}
options=[
{
name: "only if required by connector",
key: "collect_shipping_details_from_wallet_connector",
},
{
name: "always",
key: "always_collect_shipping_details_from_wallet_connector",
},
]
/>
<DesktopRow>
<FieldRenderer
labelClass="!text-base !text-grey-700 font-semibold"
fieldWrapperClass="max-w-xl"
labelClass="!text-fs-15 !text-grey-700 font-semibold"
fieldWrapperClass="w-full flex justify-between items-center border-t border-gray-200 pt-8 "
field={makeFieldInfo(
~name="is_connector_agnostic_mit_enabled",
~label="Connector Agnostic",
~customInput=InputFields.boolInput(
~isDisabled=false,
~boolCustomClass="rounded-lg",
~boolCustomClass="rounded-lg ",
),
)}
/>
</DesktopRow>
<ClickToPaySection />
<AutoRetries setCheckMaxAutoRetry />
<RenderIf condition={isBusinessProfileHasThreeds}>
<DesktopRow>
<FieldRenderer
field={threedsConnectorList
->Array.map(item => item.connector_name)
->authenticationConnectors}
errorClass
labelClass="!text-base !text-grey-700 font-semibold"
labelClass="!text-fs-15 !text-grey-700 font-semibold "
fieldWrapperClass="max-w-xl"
/>
<FieldRenderer
field={threeDsRequestorUrl}
errorClass
labelClass="!text-base !text-grey-700 font-semibold"
labelClass="!text-fs-15 !text-grey-700 font-semibold"
fieldWrapperClass="max-w-xl"
/>
</DesktopRow>
</RenderIf>
<AutoRetries setCheckMaxAutoRetry />
<ClickToPaySection />
<ReturnUrl />
<WebHook />
<DesktopRow>
<div className="flex justify-start w-full gap-2">
<div className="flex justify-end w-full gap-2">
<SubmitButton
customSumbitButtonStyle="justify-start"
text="Update"
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ module.exports = {
"fs-11": "11px",
"fs-13": "13px",
"fs-14": "14px",
"fs-15": "15px",
"fs-16": "16px",
"fs-18": "18px",
"fs-20": "20px",
Expand Down
Loading