fix: make basic details form to accept form input without Save button

juspay · Jan 18, 2024 · f921c10 · f921c10
1 parent 3749e32
commit f921c10
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 125 deletions.
diff --git a/src/screens/HyperSwitch/Routing/RoutingUtils.res b/src/screens/HyperSwitch/Routing/RoutingUtils.res
@@ -537,15 +537,15 @@ module SaveAndActivateButton = {
 }
 module ConfigureRuleButton = {
   @react.component
-  let make = (~setShowModal, ~isConfigButtonEnabled) => {
+  let make = (~setShowModal) => {
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
       ReactFinalForm.useFormSubscription(["values"])->Js.Nullable.return,
     )
 
     <Button
       text={"Configure Rule"}
       buttonType=Primary
-      buttonState={!formState.hasValidationErrors && isConfigButtonEnabled ? Normal : Disabled}
+      buttonState={!formState.hasValidationErrors ? Normal : Disabled}
       onClick={_ => {
         setShowModal(_ => true)
       }}

diff --git a/src/screens/HyperSwitch/Routing/VolumeSplitRouting.res b/src/screens/HyperSwitch/Routing/VolumeSplitRouting.res
@@ -14,7 +14,6 @@ module VolumeRoutingView = {
     ~setPageState,
     ~connectors: array<ConnectorTypes.connectorPayload>,
     ~isActive,
-    ~isConfigButtonEnabled,
     ~profile,
     ~setFormState,
     ~initialValues,
@@ -129,7 +128,7 @@ module VolumeRoutingView = {
                     dropDownButtonText="Add Processors"
                     connectorList
                   />
-                  <ConfigureRuleButton setShowModal isConfigButtonEnabled />
+                  <ConfigureRuleButton setShowModal />
                   <CustomModal.RoutingCustomModal
                     showModal
                     setShowModal
@@ -208,7 +207,6 @@ let make = (~routingRuleId, ~isActive) => {
   let (pageState, setPageState) = React.useState(() => Create)
   let (connectors, setConnectors) = React.useState(_ => [])
   let currentTabName = Recoil.useRecoilValueFromAtom(RoutingUtils.currentTabNameRecoilAtom)
-  let (isConfigButtonEnabled, setIsConfigButtonEnabled) = React.useState(_ => false)
   let showToast = ToastState.useShowToast()
   let connectorListJson =
     HyperswitchAtom.connectorListAtom->Recoil.useRecoilValueFromAtom->safeParse
@@ -333,14 +331,7 @@ let make = (~routingRuleId, ~isActive) => {
         <div className="w-full flex justify-between">
           <div className="w-full">
             <BasicDetailsForm
-              formState
-              setFormState
-              currentTabName
-              setInitialValues
-              setIsConfigButtonEnabled
-              profile
-              setProfile
-              routingType=VOLUME_SPLIT
+              currentTabName setInitialValues profile setProfile routingType=VOLUME_SPLIT
             />
           </div>
         </div>
@@ -352,7 +343,6 @@ let make = (~routingRuleId, ~isActive) => {
             connectors
             routingId={routingRuleId}
             isActive
-            isConfigButtonEnabled
             initialValues
             profile
             setFormState

diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
@@ -397,7 +397,6 @@ let make = (~routingRuleId, ~isActive, ~setCurrentRouting) => {
   let (pageState, setPageState) = React.useState(() => Create)
   let (showModal, setShowModal) = React.useState(_ => false)
   let currentTabName = Recoil.useRecoilValueFromAtom(RoutingUtils.currentTabNameRecoilAtom)
-  let (isConfigButtonEnabled, setIsConfigButtonEnabled) = React.useState(_ => false)
   let connectorListJson = HyperswitchAtom.connectorListAtom->Recoil.useRecoilValueFromAtom
   let connectorList = React.useMemo0(() => {
     connectorListJson->safeParse->ConnectorTableUtils.getArrayOfConnectorListPayloadType
@@ -670,9 +669,7 @@ let make = (~routingRuleId, ~isActive, ~setCurrentRouting) => {
             initialValues={initialValues} validate onSubmit={(values, _) => onSubmit(values, true)}>
             <div className="w-full flex flex-row  justify-between">
               <div className="w-full">
-                <BasicDetailsForm
-                  formState setFormState currentTabName setIsConfigButtonEnabled profile setProfile
-                />
+                <BasicDetailsForm currentTabName profile setProfile />
                 <UIUtils.RenderIf condition={formState != CreateConfig}>
                   <div className="mb-5">
                     <RuleBasedUI
@@ -704,8 +701,7 @@ let make = (~routingRuleId, ~isActive, ~setCurrentRouting) => {
                           />
                         </UIUtils.RenderIf>
                       </div>
-                    | Create =>
-                      <RoutingUtils.ConfigureRuleButton setShowModal isConfigButtonEnabled />
+                    | Create => <RoutingUtils.ConfigureRuleButton setShowModal />
                     | _ => React.null
                     }}
                   </div>

diff --git a/src/screens/HyperSwitch/RoutingRevamp/BasicDetailsForm.res b/src/screens/HyperSwitch/RoutingRevamp/BasicDetailsForm.res
@@ -1,5 +1,4 @@
 open FormRenderer
-open LogicUtils
 open AdvancedRoutingTypes
 
 let configurationNameInput = makeFieldInfo(
@@ -67,27 +66,14 @@ module BusinessProfileInp = {
 
 @react.component
 let make = (
-  ~formState,
-  ~setFormState,
   ~currentTabName="",
   ~setInitialValues=_ => (),
-  ~setIsConfigButtonEnabled=_ => (),
   ~isThreeDs=false,
   ~profile=?,
   ~setProfile=?,
   ~routingType=ADVANCED,
 ) => {
   open MerchantAccountUtils
-  let ip1 = ReactFinalForm.useField(`name`).input
-  let ip2 = ReactFinalForm.useField(`description`).input
-  let ip3 = ReactFinalForm.useField(`profile_id`).input
-
-  let isMobileView = MatchMedia.useMobileChecker()
-
-  let btnEnable = React.useMemo2(() => {
-    let name = getStringFromJson(ip1.value, "")->String.trim
-    name !== "" && getStringFromJson(ip2.value, "")->String.trim !== ""
-  }, (ip1.value, ip2.value))
 
   let businessProfiles = Recoil.useRecoilValueFromAtom(HyperswitchAtom.businessProfilesAtom)
   let defaultBusinessProfile = businessProfiles->getValueFromBusinessProfile
@@ -105,93 +91,20 @@ let make = (
 
   <div
     className={` mb-6 p-4 bg-white dark:bg-jp-gray-lightgray_background rounded-md border border-jp-gray-600 dark:border-jp-gray-850`}>
-    {if formState === ViewConfig {
-      <div>
-        <div className="flex flex-row justify-between gap-4">
-          <div className={isMobileView ? "flex flex-row gap-10" : "flex flex-row gap-40"}>
-            <AddDataAttributes attributes=[("data-field", "Configuration Name")]>
-              <div className="flex flex-col gap-2 items-start justify-between py-2">
-                <span className="text-gray-500 dark:text-gray-400">
-                  {React.string("Configuration Name")}
-                </span>
-                <AddDataAttributes attributes=[("data-text", getStringFromJson(ip1.value, ""))]>
-                  <span className="font-semibold">
-                    {React.string(getStringFromJson(ip1.value, ""))}
-                  </span>
-                </AddDataAttributes>
-              </div>
-            </AddDataAttributes>
-            <AddDataAttributes attributes=[("data-field", "Description")]>
-              <div className="flex flex-col gap-2 items-start justify-between py-2">
-                <span className="text-gray-500 dark:text-gray-400">
-                  {React.string("Description")}
-                </span>
-                <AddDataAttributes attributes=[("data-text", getStringFromJson(ip2.value, ""))]>
-                  <span className="font-semibold">
-                    {React.string(getStringFromJson(ip2.value, ""))}
-                  </span>
-                </AddDataAttributes>
-              </div>
-            </AddDataAttributes>
-          </div>
-        </div>
-        <div className="flex flex-row justify-between gap-4">
-          <div className={isMobileView ? "flex flex-row gap-10" : "flex flex-row gap-48 "}>
-            <AddDataAttributes attributes=[("data-field", "Profile Id")]>
-              <div className="flex flex-col gap-2 items-start justify-between py-2">
-                <span className="text-gray-500 dark:text-gray-400">
-                  {React.string("Profile")}
-                </span>
-                <AddDataAttributes attributes=[("data-text", getStringFromJson(ip3.value, ""))]>
-                  <span className="font-semibold">
-                    <MerchantAccountUtils.BusinessProfile
-                      profile_id={profile->Belt.Option.getWithDefault(
-                        defaultBusinessProfile.profile_id,
-                      )}
-                    />
-                  </span>
-                </AddDataAttributes>
-              </div>
-            </AddDataAttributes>
-          </div>
-        </div>
+    {<div className="flex">
+      <div className="w-full md:w-1/2 lg:w-1/3">
+        <UIUtils.RenderIf condition={!isThreeDs}>
+          <BusinessProfileInp
+            setProfile={setProfile->Belt.Option.getWithDefault(_ => ())}
+            profile={profile->Belt.Option.getWithDefault(defaultBusinessProfile.profile_id)}
+            options={arrayOfBusinessProfile->businessProfileNameDropDownOption}
+            label="Profile"
+            routingType
+          />
+        </UIUtils.RenderIf>
+        <FieldRenderer field=configurationNameInput />
+        <FieldRenderer field=descriptionInput />
       </div>
-    } else {
-      <>
-        <div className="flex">
-          <div className="w-full md:w-1/2 lg:w-1/3">
-            <UIUtils.RenderIf condition={!isThreeDs}>
-              <BusinessProfileInp
-                setProfile={setProfile->Belt.Option.getWithDefault(_ => ())}
-                profile={profile->Belt.Option.getWithDefault(defaultBusinessProfile.profile_id)}
-                options={arrayOfBusinessProfile->businessProfileNameDropDownOption}
-                label="Profile"
-                routingType
-              />
-            </UIUtils.RenderIf>
-            <FieldRenderer field=configurationNameInput />
-            <FieldRenderer field=descriptionInput />
-          </div>
-        </div>
-        <Button
-          buttonType=Primary
-          buttonSize=Small
-          text={formState === CreateConfig ? "Next" : "Save"}
-          onClick={_ => {
-            setFormState(_ => ViewConfig)
-            setInitialValues(prevValues => {
-              prevValues->Js.Dict.set(
-                "profile_id",
-                ip3.value->getStringFromJson("")->Js.Json.string,
-              )
-              prevValues
-            })
-            setIsConfigButtonEnabled(_ => btnEnable)
-          }}
-          customButtonStyle="my-4 ml-2"
-          buttonState={btnEnable ? Normal : Disabled}
-        />
-      </>
-    }}
+    </div>}
   </div>
 }
diff --git a/src/screens/HyperSwitch/Surcharge/Surcharge.res b/src/screens/HyperSwitch/Surcharge/Surcharge.res
@@ -103,7 +103,6 @@ let make = () => {
   let (initialRule, setInitialRule) = React.useState(() => None)
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
   let (pageView, setPageView) = React.useState(_ => LANDING)
-  let (formState, setFormState) = React.useState(_ => AdvancedRoutingTypes.EditReplica)
   let showPopUp = PopUpState.useShowPopUp()
   let (showWarning, setShowWarning) = React.useState(_ => true)
 
@@ -248,7 +247,7 @@ let make = () => {
       | NEW =>
         <div className="w-full border p-8 bg-white rounded-md ">
           <Form initialValues validate formClass="flex flex-col gap-6 justify-between" onSubmit>
-            <BasicDetailsForm formState setFormState isThreeDs=true />
+            <BasicDetailsForm isThreeDs=true />
             <ConfigureSurchargeRule wasm />
             <FormValuesSpy />
             <div className="flex gap-4">

diff --git a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
@@ -109,7 +109,6 @@ let make = () => {
   let (initialRule, setInitialRule) = React.useState(() => None)
   let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
   let (pageView, setPageView) = React.useState(_ => NEW)
-  let (formState, setFormState) = React.useState(_ => AdvancedRoutingTypes.EditReplica)
   let showPopUp = PopUpState.useShowPopUp()
   let (showWarning, setShowWarning) = React.useState(_ => true)
 
@@ -268,7 +267,7 @@ let make = () => {
       | NEW =>
         <div className="w-full border p-8 bg-white rounded-md ">
           <Form initialValues validate formClass="flex flex-col gap-6 justify-between" onSubmit>
-            <BasicDetailsForm formState setFormState isThreeDs=true />
+            <BasicDetailsForm isThreeDs=true />
             <Configure3DSRule wasm />
             <FormValuesSpy />
             <div className="flex gap-4">