Superposition changes

.github/workflows/rescript-build-check.yml

@@ -31,6 +31,7 @@ jobs:
             },
             "dependencies": {
               "@rescript/core": "^1.6.1",
+              "@rescript/react": "^0.13.1",
               "rescript": "^11.1.4"
             }
           }
@@ -55,6 +56,7 @@ jobs:
             ],
             "suffix": ".bs.js",
             "bs-dependencies": [
+              "@rescript/react",
               "@rescript/core"
             ],
             "bsc-flags": [

assets/jsons/locales/en

@@ -81,7 +81,7 @@
   "surchargeMsgAmountForCardPart2": " will be applied for this transaction.",
   "surchargeMsgAmountForOneClickWallets": "Additional fee applicable.",
   "on": "on",
-  "\"and": "and",
+  "and": "and",
   "nameEmptyText": "Please provide your name.",
   "completeNameEmptyText": "Please provide your complete name.",
   "billingDetailsText": "Billing Details",

sdk-utils/components/ReactFinalForm.res

@@ -0,0 +1,137 @@
+type getState = {values: Dict.t<JSON.t>, valid: bool}
+
+type formMethods = {
+  reset: unit => unit,
+  submit: unit => unit,
+  getState: unit => getState,
+}
+
+type formProps = {
+  handleSubmit: ReactEvent.Form.t => unit,
+  form: formMethods,
+  values: Dict.t<JSON.t>,
+  errors: Dict.t<string>,
+  touched: Dict.t<bool>,
+  dirty: bool,
+  pristine: bool,
+  valid: bool,
+  invalid: bool,
+  submitting: bool,
+}
+
+module Form = {
+  @module("react-final-form") @react.component
+  external make: (
+    ~onSubmit: (Dict.t<string>, formMethods) => unit=?,
+    ~validate: option<Dict.t<string> => Dict.t<string>>=?,
+    ~initialValues: option<Dict.t<JSON.t>>=?,
+    ~render: formProps => React.element,
+  ) => React.element = "Form"
+}
+
+type fieldState = {
+  value: option<string>,
+  error: option<string>,
+  touched: bool,
+  active: bool,
+  dirty: bool,
+  invalid: bool,
+  pristine: bool,
+  valid: bool,
+}
+
+type inputProps<'t> = {
+  name: string,
+  value: option<string>,
+  onChange: string => unit,
+  onBlur: 't => unit,
+  onFocus: 't => unit,
+}
+
+type fieldProps<'t> = {
+  input: inputProps<'t>,
+  meta: fieldState,
+}
+
+type fieldRenderPropsCustomInput<'t> = {
+  name: string,
+  onBlur: ReactEvent.Focus.t => unit,
+  onChange: 't => unit,
+  onFocus: ReactEvent.Focus.t => unit,
+  value: option<string>,
+  checked: bool,
+}
+
+module Field = {
+  @module("react-final-form") @react.component
+  external make: (
+    ~name: string,
+    ~validate: option<option<string> => option<string>>=?,
+    ~children: fieldProps<'t> => React.element,
+  ) => React.element = "Field"
+}
+
+let createSubmitHandler = (onSubmit: option<Dict.t<string> => unit>) => {
+  React.useCallback((values: Dict.t<string>) => {
+    switch onSubmit {
+    | Some(submitFn) => submitFn(values)
+    | None => ()
+    }
+  }, [onSubmit])
+}
+
+let useFormStateHandler = (
+  ~onFormChange: Dict.t<JSON.t> => unit,
+  ~onValidationChange: bool => unit,
+  ~formProps: formProps,
+) => {
+  React.useEffect2(() => {
+    onFormChange(formProps.values)
+    onValidationChange(formProps.valid)
+    None
+  }, (formProps.values, formProps.valid))
+}
+
+type useFieldConfig<'a> = {
+  afterSubmit?: unit => unit,
+  allowNull?: bool,
+  beforeSubmit?: unit => option<bool>,
+  component?: React.component<'a>,
+  data?: Dict.t<'a>,
+  defaultValue?: 'a,
+  format?: ('a, string) => 'a,
+  formatOnBlur?: bool,
+  initialValue?: 'a,
+  isEqual?: ('a, 'a) => bool,
+  multiple?: bool,
+  parse?: ('a, string) => 'a,
+  type_?: string,
+  validate?: 'a => option<string>,
+  validateFields?: array<string>,
+  value?: 'a,
+}
+
+@module("react-final-form")
+external useField: (string, ~config: useFieldConfig<'a>=?) => fieldProps<'t> = "useField"
+
+type formSubscription = JSON.t
+module FormSpy = {
+  @module("react-final-form") @react.component
+  external make: (
+    ~children: formProps => React.element,
+    ~component: bool=?,
+    ~onChange: bool=?,
+    ~render: formProps => React.element=?,
+    ~subscription: formSubscription,
+  ) => React.element = "FormSpy"
+}
+
+let useFormSubscription = (keys): formSubscription => {
+  React.useMemo(() => {
+    let dict = Dict.make()
+    keys->Array.forEach(key => {
+      Dict.set(dict, key, JSON.Encode.bool(true))
+    })
+    dict->JSON.Encode.object
+  }, [])
+}

sdk-utils/hooks/ConfigurationService.res

@@ -0,0 +1,102 @@
+open SuperpositionHelper
+
+type configurationService = {
+  evaluateConfig: SuperpositionTypes.superpositionContext => Dict.t<JSON.t>,
+}
+
+type jsonModule = {
+  @as("default")
+  default: JSON.t,
+}
+
+external importJSON: string => promise<jsonModule> = "import"
+@module("./../superposition/superposition.js") @new
+external cacReader: JSON.t => Nullable.t<configurationService> = "CacReader"
+
+let service = ref(None)
+
+let useConfigurationService = () => {
+  let superpositionConfigLoadedPromise = React.useRef(Promise.make((_, _) => {()}))
+  React.useEffect0(() => {
+    let initializeService = async resolve => {
+      if service.contents->Option.isNone {
+        try {
+          let configData = try {
+            let response = await Utils.fetchApi(
+              "https://beta.hyperswitch.io/assets/v1/configs/superposition.config.json",
+              ~bodyStr="",
+              ~method=#GET,
+            )
+            await response->Fetch.Response.json
+          } catch {
+          | _ =>
+            let configModule = await importJSON("./../superposition/config.json")
+            configModule.default
+          }
+
+          let configService = cacReader(configData)->Nullable.toOption
+          service.contents = configService
+        } catch {
+        | _ex => service.contents = None
+        }
+      }
+      resolve()
+    }
+    superpositionConfigLoadedPromise.current = Promise.make((resolve, _) =>
+      initializeService(resolve)->ignore
+    )
+    None
+  })
+
+  async (
+    eligibleConnectors: array<RescriptCore.JSON.t>,
+    configParams: SuperpositionTypes.superpositionBaseContext,
+    requiredFieldsFromPML,
+  ) => {
+    await superpositionConfigLoadedPromise.current
+    let requiredFieldsFromSuperPosition = switch (
+      service.contents,
+      Array.length(eligibleConnectors) === 0,
+    ) {
+    | (_, true)
+    | (None, false) => []
+    | (Some(svc), false) =>
+      eligibleConnectors
+      ->removeDuplicateConnectors
+      ->Array.reduce([], (acc, connector) => {
+        try {
+          switch connector->JSON.Decode.string {
+          | Some("") | None => ()
+          | Some(connector) =>
+            let transformedContext: SuperpositionTypes.superpositionContext = {
+              connector: connector->CommonUtils.snakeToPascalCase,
+              payment_method: configParams.payment_method->CommonUtils.snakeToPascalCase,
+              payment_method_type: configParams.payment_method_type->CommonUtils.snakeToPascalCase,
+              country: configParams.country,
+              mandate_type: configParams.mandate_type,
+              collect_billing_details_from_wallet_connector: configParams.collect_billing_details_from_wallet_connector,
+              collect_shipping_details_from_wallet_connector: configParams.collect_shipping_details_from_wallet_connector,
+            }
+            let resolvedConfig =
+              svc.evaluateConfig(transformedContext)->convertConfigurationToRequiredFields
+            acc->Array.pushMany(resolvedConfig)
+          }
+        } catch {
+        | _ex => ()
+        }
+        acc
+      })
+      ->removeShippingAndDuplicateFields
+      ->sortFieldsByPriorityOrder
+    }
+
+    let missingRequiredFields = filterFieldsBasedOnMissingData(
+      requiredFieldsFromSuperPosition,
+      requiredFieldsFromPML,
+    )
+
+    let initialValues = convertFlatDictToNestedObject(requiredFieldsFromPML)
+
+    (requiredFieldsFromSuperPosition, missingRequiredFields, initialValues)
+  }
+}