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: Connector files changes for paypal onboarding #115

Merged
merged 3 commits into from
Dec 20, 2023
Merged

fix: Connector files changes for paypal onboarding #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d4155e
fix: Connector files changes for paypal onboarding
Riddhiagrawal001 Dec 20, 2023
ccb8c93
Merge branch 'main' into feat/paypal-onboarding-1
Riddhiagrawal001 Dec 20, 2023
4689583
Merge branch 'main' into feat/paypal-onboarding-1
JeevaRamu0104 Dec 20, 2023
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
186 changes: 1 addition & 185 deletions src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,187 +1,3 @@
let connectorsWithIntegrationSteps: array<ConnectorTypes.connectorName> = [
ADYEN,
CHECKOUT,
STRIPE,
PAYPAL,
]

let mixpanelEventWrapper = (
~url: RescriptReactRouter.url,
~selectedConnector,
~actionName,
~hyperswitchMixPanel: HSMixPanel.functionType,
) => {
if selectedConnector->Js.String2.length > 0 {
[selectedConnector, "global"]->Js.Array2.forEach(ele =>
hyperswitchMixPanel(
~pageName=url.path->LogicUtils.getListHead,
~contextName=ele,
~actionName,
(),
)
)
}
}

module BusinessProfileRender = {
@react.component
let make = (~isUpdateFlow: bool, ~selectedConnector) => {
let url = RescriptReactRouter.useUrl()
let hyperswitchMixPanel = HSMixPanel.useSendEvent()
let {setDashboardPageState} = React.useContext(GlobalProvider.defaultContext)
let businessProfiles = Recoil.useRecoilValueFromAtom(HyperswitchAtom.businessProfilesAtom)
let arrayOfBusinessProfile = businessProfiles->MerchantAccountUtils.getArrayOfBusinessProfile
let defaultBusinessProfile = businessProfiles->MerchantAccountUtils.getValueFromBusinessProfile
let connectorLabelOnChange = ReactFinalForm.useField(`connector_label`).input.onChange

let (showModalFromOtherScreen, setShowModalFromOtherScreen) = React.useState(_ => false)

let hereTextStyle = isUpdateFlow
? "text-grey-700 opacity-50 cursor-not-allowed"
: "text-blue-900 cursor-pointer"

<>
<FormRenderer.FieldRenderer
labelClass="font-semibold !text-black"
field={FormRenderer.makeFieldInfo(
~label="Profile",
~isRequired=true,
~name="profile_id",
~customInput=(~input, ~placeholder as _) =>
InputFields.selectInput(
~input={
...input,
onChange: {
ev => {
let profileName = (
arrayOfBusinessProfile
->Js.Array2.find((ele: HSwitchSettingTypes.profileEntity) =>
ele.profile_id === ev->Identity.formReactEventToString
)
->Belt.Option.getWithDefault(defaultBusinessProfile)
).profile_name
connectorLabelOnChange(
`${selectedConnector}_${profileName}`->Identity.stringToFormReactEvent,
)
input.onChange(ev)
mixpanelEventWrapper(
~url,
~selectedConnector,
~actionName=`settings_choose_profile`,
~hyperswitchMixPanel,
)
}
},
},
~deselectDisable=true,
~disableSelect=isUpdateFlow,
~customStyle="max-h-48",
~options={
arrayOfBusinessProfile->MerchantAccountUtils.businessProfileNameDropDownOption
},
~buttonText="Select Profile",
~placeholder="",
(),
),
(),
)}
/>
<UIUtils.RenderIf condition={!isUpdateFlow}>
<div className="text-gray-400 text-sm mt-3">
<span> {"Manage your list of profiles."->React.string} </span>
<span
className={`ml-1 ${hereTextStyle}`}
onClick={_ => {
setDashboardPageState(_ => #HOME)
RescriptReactRouter.push("/business-profiles")
}}>
{React.string("here.")}
</span>
</div>
</UIUtils.RenderIf>
<BusinessProfile isFromSettings=false showModalFromOtherScreen setShowModalFromOtherScreen />
</>
}
}

module VerifyConnectoModal = {
@react.component
let make = (
~showVerifyModal,
~setShowVerifyModal,
~connector,
~verifyErrorMessage,
~suggestedActionExists,
~suggestedAction,
~setVerifyDone,
) => {
let hyperswitchMixPanel = HSMixPanel.useSendEvent()
let url = RescriptReactRouter.useUrl()
<Modal
showModal={showVerifyModal}
setShowModal={setShowVerifyModal}
modalClass="w-full md:w-5/12 mx-auto top-1/3 relative"
childClass="p-0 m-0 -mt-8"
customHeight="border-0 h-fit"
showCloseIcon=false
modalHeading=" "
headingClass="h-2 bg-orange-960 rounded-t-xl"
onCloseClickCustomFun={_ => {
setVerifyDone(_ => NoAttempt)
setShowVerifyModal(_ => false)
}}>
<div>
<div className="flex flex-col mb-2 p-2 m-2">
<div className="flex p-3">
<img
className="w-12 h-12 my-auto border-gray-100 w-fit mt-0"
src={`/icons/warning.svg`}
alt="warning"
/>
<div className="text-jp-gray-900">
<div
className="font-semibold ml-4 text-xl px-2 dark:text-jp-gray-text_darktheme dark:text-opacity-75">
{"Are you sure you want to proceed?"->React.string}
</div>
<div
className="whitespace-pre-line break-all flex flex-col gap-1 p-2 ml-4 text-base dark:text-jp-gray-text_darktheme dark:text-opacity-50 font-medium leading-7 opacity-50">
{`Received the following error from ${connector->LogicUtils.snakeToTitle}:`->React.string}
</div>
<div
className="whitespace-pre-line break-all flex flex-col gap-1 p-4 ml-6 text-base dark:text-jp-gray-text_darktheme dark:text-opacity-50 bg-red-50 rounded-md font-semibold">
{`${verifyErrorMessage->Belt.Option.getWithDefault("")}`->React.string}
</div>
<UIUtils.RenderIf condition={suggestedActionExists}>
{suggestedAction}
</UIUtils.RenderIf>
</div>
</div>
<div className="flex flex-row justify-end gap-5 mt-4 mb-2 p-3">
<FormRenderer.SubmitButton
buttonType={Button.Secondary} loadingText="Processing..." text="Proceed Anyway"
/>
<Button
text="Cancel"
onClick={_ => {
hyperswitchMixPanel(
~pageName=url.path->LogicUtils.getListHead,
~contextName="verify_connector",
~actionName="cancel_clicked",
(),
)
setVerifyDone(_ => ConnectorTypes.NoAttempt)
setShowVerifyModal(_ => false)
}}
buttonType={Primary}
buttonSize={Small}
/>
</div>
</div>
</div>
</Modal>
}
}

@react.component
let make = (
~currentStep,
Expand Down Expand Up @@ -503,7 +319,7 @@ let make = (
<IntegrationHelp.Render connector setShowModal showModal />
</div>
<FormValuesSpy />
<VerifyConnectoModal
<VerifyConnectorModal
showVerifyModal
setShowVerifyModal
connector
Expand Down
178 changes: 178 additions & 0 deletions src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
let metaDataInputKeysToIgnore = ["google_pay", "apple_pay", "zen_apple_pay"]

let connectorsWithIntegrationSteps: array<ConnectorTypes.connectorName> = [
ADYEN,
CHECKOUT,
STRIPE,
PAYPAL,
]

let getCurrencyOption: CurrencyUtils.currencyCode => SelectBox.dropdownOption = currencyType => {
open CurrencyUtils
{
Expand Down Expand Up @@ -236,3 +243,174 @@ module ConnectorConfigurationFields = {
</div>
}
}

module BusinessProfileRender = {
@react.component
let make = (~isUpdateFlow: bool, ~selectedConnector) => {
let url = RescriptReactRouter.useUrl()
let hyperswitchMixPanel = HSMixPanel.useSendEvent()
let {setDashboardPageState} = React.useContext(GlobalProvider.defaultContext)
let businessProfiles = Recoil.useRecoilValueFromAtom(HyperswitchAtom.businessProfilesAtom)
let arrayOfBusinessProfile = businessProfiles->MerchantAccountUtils.getArrayOfBusinessProfile
let defaultBusinessProfile = businessProfiles->MerchantAccountUtils.getValueFromBusinessProfile
let connectorLabelOnChange = ReactFinalForm.useField(`connector_label`).input.onChange

let (showModalFromOtherScreen, setShowModalFromOtherScreen) = React.useState(_ => false)

let hereTextStyle = isUpdateFlow
? "text-grey-700 opacity-50 cursor-not-allowed"
: "text-blue-900 cursor-pointer"
let _onClickHandler = countryOrLabel => {
if !isUpdateFlow {
setShowModalFromOtherScreen(_ => true)
ConnectorUtils.mixpanelEventWrapper(
~url,
~selectedConnector,
~actionName=`add_new_${countryOrLabel}`,
~hyperswitchMixPanel,
)
}
setDashboardPageState(_ => #HOME)
}

<>
<FormRenderer.FieldRenderer
labelClass="font-semibold !text-black"
field={FormRenderer.makeFieldInfo(
~label="Profile",
~isRequired=true,
~name="profile_id",
~customInput=(~input, ~placeholder as _) =>
InputFields.selectInput(
~input={
...input,
onChange: {
ev => {
let profileName = (
arrayOfBusinessProfile
->Js.Array2.find((ele: HSwitchSettingTypes.profileEntity) =>
ele.profile_id === ev->Identity.formReactEventToString
)
->Belt.Option.getWithDefault(defaultBusinessProfile)
).profile_name
connectorLabelOnChange(
`${selectedConnector}_${profileName}`->Identity.stringToFormReactEvent,
)
input.onChange(ev)
ConnectorUtils.mixpanelEventWrapper(
~url,
~selectedConnector,
~actionName=`settings_choose_profile`,
~hyperswitchMixPanel,
)
}
},
},
~deselectDisable=true,
~disableSelect=isUpdateFlow,
~customStyle="max-h-48",
~options={
arrayOfBusinessProfile->MerchantAccountUtils.businessProfileNameDropDownOption
},
~buttonText="Select Profile",
~placeholder="",
(),
),
(),
)}
/>
<UIUtils.RenderIf condition={!isUpdateFlow}>
<div className="text-gray-400 text-sm mt-3">
<span> {"Manage your list of profiles."->React.string} </span>
<span
className={`ml-1 ${hereTextStyle}`}
onClick={_ => {
setDashboardPageState(_ => #HOME)
RescriptReactRouter.push("/business-profiles")
}}>
{React.string("here.")}
</span>
</div>
</UIUtils.RenderIf>
<BusinessProfile isFromSettings=false showModalFromOtherScreen setShowModalFromOtherScreen />
</>
}
}

module VerifyConnectorModal = {
@react.component
let make = (
~showVerifyModal,
~setShowVerifyModal,
~connector,
~verifyErrorMessage,
~suggestedActionExists,
~suggestedAction,
~setVerifyDone,
) => {
let hyperswitchMixPanel = HSMixPanel.useSendEvent()
let url = RescriptReactRouter.useUrl()
<Modal
showModal={showVerifyModal}
setShowModal={setShowVerifyModal}
modalClass="w-full md:w-5/12 mx-auto top-1/3 relative"
childClass="p-0 m-0 -mt-8"
customHeight="border-0 h-fit"
showCloseIcon=false
modalHeading=" "
headingClass="h-2 bg-orange-960 rounded-t-xl"
onCloseClickCustomFun={_ => {
setVerifyDone(_ => NoAttempt)
setShowVerifyModal(_ => false)
}}>
<div>
<div className="flex flex-col mb-2 p-2 m-2">
<div className="flex p-3">
<img
className="w-12 h-12 my-auto border-gray-100 w-fit mt-0"
src={`/icons/warning.svg`}
alt="warning"
/>
<div className="text-jp-gray-900">
<div
className="font-semibold ml-4 text-xl px-2 dark:text-jp-gray-text_darktheme dark:text-opacity-75">
{"Are you sure you want to proceed?"->React.string}
</div>
<div
className="whitespace-pre-line break-all flex flex-col gap-1 p-2 ml-4 text-base dark:text-jp-gray-text_darktheme dark:text-opacity-50 font-medium leading-7 opacity-50">
{`Received the following error from ${connector->LogicUtils.snakeToTitle}:`->React.string}
</div>
<div
className="whitespace-pre-line break-all flex flex-col gap-1 p-4 ml-6 text-base dark:text-jp-gray-text_darktheme dark:text-opacity-50 bg-red-50 rounded-md font-semibold">
{`${verifyErrorMessage->Belt.Option.getWithDefault("")}`->React.string}
</div>
<UIUtils.RenderIf condition={suggestedActionExists}>
{suggestedAction}
</UIUtils.RenderIf>
</div>
</div>
<div className="flex flex-row justify-end gap-5 mt-4 mb-2 p-3">
<FormRenderer.SubmitButton
buttonType={Button.Secondary} loadingText="Processing..." text="Proceed Anyway"
/>
<Button
text="Cancel"
onClick={_ => {
hyperswitchMixPanel(
~pageName=url.path->LogicUtils.getListHead,
~contextName="verify_connector",
~actionName="cancel_clicked",
(),
)
setVerifyDone(_ => ConnectorTypes.NoAttempt)
setShowVerifyModal(_ => false)
}}
buttonType={Primary}
buttonSize={Small}
/>
</div>
</div>
</div>
</Modal>
}
}
Loading
Loading