chore: frm api changes (#782)

Co-authored-by: Riddhiagrawal001 <[email protected]> Co-authored-by: Pritish Budhiraja <[email protected]>
juspay · Aug 20, 2024 · e0f2911 · e0f2911
1 parent 86bcb16
commit e0f2911
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 152 deletions.
diff --git a/src/screens/Connectors/ConnectorTypes.res b/src/screens/Connectors/ConnectorTypes.res
@@ -220,13 +220,14 @@ type payment_methods_enabled = array<paymentMethodEnabledType>
 
 type frm_payment_method_type = {
   payment_method_type: string,
-  mutable flow: string,
-  mutable action: string,
+  flow: string,
+  action: string,
 }
 
 type frm_payment_method = {
   payment_method: string,
-  payment_method_types: array<frm_payment_method_type>,
+  payment_method_types?: array<frm_payment_method_type>,
+  flow: string,
 }
 
 type frm_config = {

diff --git a/src/screens/FraudAndRisk/FRMPaymentMethods.res b/src/screens/FraudAndRisk/FRMPaymentMethods.res
@@ -1,44 +1,3 @@
-module RadioSection = {
-  open ConnectorTypes
-  open FRMTypes
-  open FRMInfo
-  @react.component
-  let make = (~option, ~frmConfigs, ~paymentMethodTypeInfo, ~sectionType, ~setConfigJson) => {
-    let isOptionSelected =
-      switch sectionType {
-      | FlowType => paymentMethodTypeInfo.flow
-      | ActionType => paymentMethodTypeInfo.action
-      } === option
-
-    let handleOnClick = () => {
-      switch sectionType {
-      | FlowType =>
-        if paymentMethodTypeInfo.flow !== option {
-          switch option->getFlowTypeVariantFromString {
-          | PreAuth => paymentMethodTypeInfo.action = CancelTxn->getActionTypeNameString
-          | PostAuth => paymentMethodTypeInfo.action = ManualReview->getActionTypeNameString
-          }
-          paymentMethodTypeInfo.flow = option
-        }
-      | ActionType => paymentMethodTypeInfo.action = option
-      }
-      setConfigJson(frmConfigs->Identity.anyTypeToReactEvent)
-    }
-
-    <div>
-      <div className="flex items-center gap-2 break-all">
-        <div onClick={_ => handleOnClick()}>
-          <RadioIcon isSelected={isOptionSelected} />
-        </div>
-        {switch sectionType {
-        | FlowType => option->getFlowTypeLabel->React.string
-        | ActionType => option->getActionTypeLabel->LogicUtils.snakeToTitle->React.string
-        }}
-      </div>
-    </div>
-  }
-}
-
 module ToggleSwitch = {
   open FRMUtils
   @react.component
@@ -68,19 +27,9 @@ module ToggleSwitch = {
 }
 
 module FormField = {
-  open ConnectorTypes
   open FRMInfo
-  open FRMTypes
   @react.component
-  let make = (
-    ~options,
-    ~label,
-    ~paymentMethodTypeInfo,
-    ~frmConfigs,
-    ~sectionType,
-    ~setConfigJson,
-    ~description,
-  ) => {
+  let make = (~fromConfigIndex, ~paymentMethodIndex, ~options, ~label, ~description) => {
     <div className="w-max">
       <div className="flex">
         <h3 className="font-semibold text-bold text-lg pb-2">
@@ -96,25 +45,23 @@ module FormField = {
         </div>
       </div>
       <div className={`grid grid-cols-2 md:grid-cols-4 gap-4`}>
-        <RenderIf condition={sectionType == ActionType}>
-          <div className="flex items-center gap-2 break-all">
-            {paymentMethodTypeInfo.action->getActionTypeLabel->Jsx.string}
-          </div>
-        </RenderIf>
-        <RenderIf condition={sectionType != ActionType}>
-          {options
-          ->Array.mapWithIndex((option, i) => {
-            <RadioSection
-              key={i->Int.toString}
-              option
-              paymentMethodTypeInfo
-              frmConfigs
-              sectionType
-              setConfigJson
-            />
-          })
-          ->React.array}
-        </RenderIf>
+        <FormRenderer.FieldRenderer
+          field={FormRenderer.makeFieldInfo(
+            ~label="",
+            ~name=`frm_configs[${fromConfigIndex}].payment_methods[${paymentMethodIndex}].flow`,
+            ~customInput=InputFields.radioInput(
+              ~options=options->Array.map((item): SelectBox.dropdownOption => {
+                {
+                  label: item->getFlowTypeLabel,
+                  value: item,
+                }
+              }),
+              ~buttonText="options",
+              ~baseComponentCustomStyle="flex",
+              ~customStyle="flex gap-2 !overflow-visible",
+            ),
+          )}
+        />
       </div>
     </div>
   }
@@ -123,9 +70,9 @@ module FormField = {
 module CheckBoxRenderer = {
   open FRMUtils
   open FRMInfo
-  open FRMTypes
   @react.component
   let make = (
+    ~fromConfigIndex,
     ~frmConfigInfo: ConnectorTypes.frm_config,
     ~frmConfigs,
     ~connectorPaymentMethods,
@@ -229,49 +176,32 @@ module CheckBoxRenderer = {
       {frmConfigInfo.payment_methods
       ->Array.mapWithIndex((paymentMethodInfo, index) => {
         <RenderIf condition={isOpen} key={index->Int.toString}>
-          {paymentMethodInfo.payment_method_types
-          ->Array.mapWithIndex((paymentMethodTypeInfo, i) => {
-            <Accordion
-              key={i->Int.toString}
-              initialExpandedArray=[0]
-              accordion={[
-                {
-                  title: paymentMethodTypeInfo.payment_method_type->LogicUtils.snakeToTitle,
-                  renderContent: () => {
-                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
-                      <FormField
-                        options={flowTypeAllOptions}
-                        label="Choose one of the flows"
-                        paymentMethodTypeInfo
-                        frmConfigs
-                        sectionType={FlowType}
-                        setConfigJson
-                        description="i. \"PreAuth\" - facilitate transaction verification prior to payment authorization.
+          <Accordion
+            key={index->Int.toString}
+            initialExpandedArray=[0]
+            accordion={[
+              {
+                title: paymentMethodInfo.payment_method->LogicUtils.snakeToTitle,
+                renderContent: () => {
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
+                    <FormField
+                      options={flowTypeAllOptions}
+                      label="Choose one of the flows"
+                      fromConfigIndex
+                      paymentMethodIndex={index->Int.toString}
+                      description="i. \"PreAuth\" - facilitate transaction verification prior to payment authorization.
                         ii. \"PostAuth\" - facilitate transaction validation post-authorization, before amount capture."
-                      />
-                      <FormField
-                        options={paymentMethodTypeInfo.flow->getActionTypeAllOptions}
-                        label="Preferred Action"
-                        paymentMethodTypeInfo
-                        frmConfigs
-                        sectionType={ActionType}
-                        setConfigJson
-                        description={paymentMethodTypeInfo.flow
-                        ->getFlowTypeVariantFromString
-                        ->actionDescriptionForFlow}
-                      />
-                    </div>
-                  },
-                  renderContentOnTop: None,
+                    />
+                  </div>
                 },
-              ]}
-              accordianTopContainerCss="border"
-              accordianBottomContainerCss="p-5"
-              contentExpandCss="px-10 pb-6 pt-3 !border-t-0"
-              titleStyle="font-semibold text-bold text-md"
-            />
-          })
-          ->React.array}
+                renderContentOnTop: None,
+              },
+            ]}
+            accordianTopContainerCss="border"
+            accordianBottomContainerCss="p-5"
+            contentExpandCss="px-10 pb-6 pt-3 !border-t-0"
+            titleStyle="font-semibold text-bold text-md"
+          />
         </RenderIf>
       })
       ->React.array}
@@ -335,6 +265,7 @@ module PaymentMethodsRenderer = {
             frmConfigs
             connectorPaymentMethods={connectorConfig->Dict.get(configInfo.gateway)}
             isUpdateFlow
+            fromConfigIndex={i->Int.toString}
           />
         })
         ->React.array}
@@ -363,7 +294,12 @@ let make = (~setCurrentStep, ~retrivedValues=None, ~setInitialValues, ~isUpdateF
       ->parseFRMConfig
       ->Array.filter(config => config.payment_methods->Array.length > 0)
 
-    valuesDict->Dict.set("frm_configs", filteredArray->Identity.genericTypeToJson)
+    valuesDict->Dict.set(
+      "frm_configs",
+      filteredArray->Array.length > 0
+        ? filteredArray->Identity.genericTypeToJson
+        : JSON.Encode.null,
+    )
     setInitialValues(_ => valuesDict->JSON.Encode.object)
     setCurrentStep(prev => prev->getNextStep)
 

diff --git a/src/screens/FraudAndRisk/FRMSummary.res b/src/screens/FraudAndRisk/FRMSummary.res
@@ -1,18 +1,13 @@
 module InfoField = {
   open LogicUtils
-  open FRMInfo
   @react.component
-  let make = (~label, ~flowTypeValue, ~actionTypeValue) => {
+  let make = (~label, ~flowTypeValue) => {
     <div className="flex flex-col gap-2 mb-7">
       <h4 className="text-lg font-semibold underline"> {label->snakeToTitle->React.string} </h4>
       <div className="flex flex-col gap-1">
         <h3 className="break-all">
           <span className="font-semibold mr-3"> {"Flow :"->React.string} </span>
-          {flowTypeValue->getFlowTypeLabel->React.string}
-        </h3>
-        <h3 className="break-all">
-          <span className="font-semibold mr-3"> {"Action :"->React.string} </span>
-          {actionTypeValue->getActionTypeLabel->React.string}
+          {flowTypeValue->React.string}
         </h3>
       </div>
     </div>
@@ -22,6 +17,7 @@ module InfoField = {
 module ConfigInfo = {
   open LogicUtils
   open ConnectorTypes
+  open FRMInfo
   @react.component
   let make = (~frmConfigs) => {
     frmConfigs
@@ -31,20 +27,28 @@ module ConfigInfo = {
         <div>
           {config.payment_methods
           ->Array.mapWithIndex((paymentMethod, ind) => {
-            <div key={ind->Int.toString}>
-              {paymentMethod.payment_method_types
+            if paymentMethod.payment_method_types->Option.getOr([])->Array.length == 0 {
+              <InfoField
+                key={ind->Int.toString}
+                label={paymentMethod.payment_method}
+                flowTypeValue={paymentMethod.flow->getFlowTypeLabel}
+              />
+            } else {
+              paymentMethod.payment_method_types
+              ->Option.getOr([])
               ->Array.mapWithIndex(
                 (paymentMethodType, index) => {
-                  <InfoField
-                    key={index->Int.toString}
-                    label={paymentMethodType.payment_method_type}
-                    flowTypeValue={paymentMethodType.flow}
-                    actionTypeValue={paymentMethodType.action}
-                  />
+                  <RenderIf condition={index == 0}>
+                    <InfoField
+                      key={index->Int.toString}
+                      label={paymentMethod.payment_method}
+                      flowTypeValue={paymentMethodType.flow->getFlowTypeLabel}
+                    />
+                  </RenderIf>
                 },
               )
-              ->React.array}
-            </div>
+              ->React.array
+            }
           })
           ->React.array}
         </div>

diff --git a/src/screens/FraudAndRisk/FRMTypes.res b/src/screens/FraudAndRisk/FRMTypes.res
@@ -1,7 +1,5 @@
 type filterType = Connector | FRMPlayer | ThreedsAuthenticator
 
-type frmPaymentMethodsSectionType = FlowType | ActionType
-
 type flowType = PreAuth | PostAuth
 
 type frmActionType = CancelTxn | AutoRefund | ManualReview | Process

diff --git a/src/screens/FraudAndRisk/FRMUtils.res b/src/screens/FraudAndRisk/FRMUtils.res
@@ -134,26 +134,16 @@ let createAllOptions = connectorsConfig => {
   })
 }
 
-let generateFRMPaymentMethodsConfig = paymentMethodsDict => {
+let generateFRMPaymentMethodsConfig = (paymentMethodsDict): array<
+  ConnectorTypes.frm_payment_method,
+> => {
   open ConnectorTypes
   paymentMethodsDict
   ->Dict.keysToArray
   ->Array.map(paymentMethodName => {
-    let paymentMethodTypesArr =
-      paymentMethodsDict
-      ->Dict.get(paymentMethodName)
-      ->Option.getOr([])
-      ->Array.map(paymentMethodType => {
-        {
-          payment_method_type: paymentMethodType,
-          flow: "pre",
-          action: "cancel_txn",
-        }
-      })
-
     {
       payment_method: paymentMethodName,
-      payment_method_types: paymentMethodTypesArr,
+      flow: getFlowTypeNameString(PreAuth),
     }
   })
 }