FRMSelect.res

module NewProcessorCards = {
  open FRMInfo
  @react.component
  let make = (~configuredFRMs: array<ConnectorTypes.connectorTypes>) => {
    let {userHasAccess} = GroupACLHooks.useUserGroupACLHook()
    let mixpanelEvent = MixpanelHook.useSendEvent()
    let featureFlagDetails = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
    let {frmProcessorsLiveList} =
      HyperswitchAtom.connectorListForLiveAtom->Recoil.useRecoilValueFromAtom
    let frmAvailableForIntegration = featureFlagDetails.isLiveMode ? frmProcessorsLiveList : frmList

    let handleClick = frmName => {
      mixpanelEvent(~eventName=`connect_frm_${frmName}`)
      RescriptReactRouter.push(
        GlobalVars.appendDashboardPath(~url=`/fraud-risk-management/new?name=${frmName}`),
      )
    }
    let configuredFRMCount = configuredFRMs->Array.length

    let descriptedFRMs = (frmList: array<ConnectorTypes.connectorTypes>, heading) => {
      <>
        <h2
          className={`${Typography.heading.sm.semibold} text-black text-opacity-75 dark:text-white dark:text-opacity-75`}>
          {heading->React.string}
        </h2>
        <div className="grid gap-4 lg:grid-cols-3 grid-cols-1 mb-5">
          {frmList
          ->Array.mapWithIndex((frm, i) => {
            let frmName = frm->ConnectorUtils.getConnectorNameString
            let frmDisplayName =
              frmName->ConnectorUtils.getDisplayNameForConnector(~connectorType=FRMPlayer)
            let frmInfo = frm->ConnectorUtils.getConnectorInfo

            <CardUtils.CardLayout key={Int.toString(i)} width="w-full">
              <div className="flex gap-2 items-center mb-3">
                <GatewayIcon
                  gateway={frmName->String.toUpperCase} className="w-10 h-10 rounded-lg"
                />
                <h1 className="text-xl font-semibold break-all">
                  {frmDisplayName->React.string}
                </h1>
              </div>
              <div className="overflow-hidden text-gray-400 flex-1 mb-6">
                {frmInfo.description->React.string}
              </div>
              <ACLButton
                text="Connect"
                authorization={userHasAccess(~groupAccess=ConnectorsManage)}
                buttonType=Secondary
                buttonSize=Small
                onClick={_ => handleClick(frmName)}
                leftIcon={CustomIcon(
                  <Icon
                    name="plus"
                    size=16
                    className="text-jp-gray-900 fill-opacity-50 dark:jp-gray-text_darktheme"
                  />,
                )}
              />
            </CardUtils.CardLayout>
          })
          ->React.array}
        </div>
      </>
    }

    let headerText = "Connect a new fraud & risk management player"

    <RenderIf condition={configuredFRMCount == 0}>
      <div className="flex flex-col gap-4">
        {frmAvailableForIntegration->descriptedFRMs(headerText)}
      </div>
    </RenderIf>
  }
}

@react.component
let make = () => {
  let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
  let isMobileView = MatchMedia.useMatchMedia("(max-width: 844px)")
  let {userHasAccess} = GroupACLHooks.useUserGroupACLHook()
  let (
    configuredFRMs: array<ConnectorTypes.connectorPayloadCommonType>,
    setConfiguredFRMs,
  ) = React.useState(_ => [])
  let (filteredFRMData, setFilteredFRMData) = React.useState(_ => [])
  let (offset, setOffset) = React.useState(_ => 0)
  let (searchText, setSearchText) = React.useState(_ => "")
  let connectorList = ConnectorListInterface.useFilteredConnectorList(
    ~retainInList=PaymentProcessor,
  )
  let frmConnectorList = ConnectorListInterface.useFilteredConnectorList(~retainInList=PaymentVas)

  let customUI =
    <BlurredTableComponent
      infoText="No connectors configured yet. Try connecting a connector with card enabled as a payment method."
      buttonText="Take me to connectors"
      onClickElement={React.null}
      onClickUrl="connectors"
      moduleName="Fraud & Risk Management"
      moduleSubtitle="Connect and configure processors to screen transactions and mitigate fraud"
    />

  let getConnectorList = async _ => {
    try {
      let filteredArrayLength =
        FRMUtils.filterConnectorArrayByPaymentMethod(~connectorList)->Array.length
      if filteredArrayLength > 0 {
        setConfiguredFRMs(_ => frmConnectorList)
        setFilteredFRMData(_ => frmConnectorList->Array.map(Nullable.make))
        setScreenState(_ => Success)
      } else {
        setScreenState(_ => Custom)
      }
    } catch {
    | _ => setScreenState(_ => PageLoaderWrapper.Error("Failed to fetch"))
    }
  }

  React.useEffect(() => {
    getConnectorList()->ignore
    None
  }, [])
  // TODO: Convert it to remote filter
  let filterLogic = ReactDebounce.useDebounced(ob => {
    open LogicUtils
    let (searchText, arr) = ob
    let filteredList = if searchText->isNonEmptyString {
      arr->Array.filter((frmPlayer: Nullable.t<ConnectorTypes.connectorPayloadCommonType>) => {
        switch Nullable.toOption(frmPlayer) {
        | Some(frmPlayer) =>
          isContainingStringLowercase(frmPlayer.connector_name, searchText) ||
          isContainingStringLowercase(frmPlayer.id, searchText) ||
          isContainingStringLowercase(frmPlayer.connector_label, searchText)
        | None => false
        }
      })
    } else {
      arr
    }
    setFilteredFRMData(_ => filteredList)
  }, ~wait=200)

  <PageLoaderWrapper screenState customUI>
    <div className="flex flex-col gap-10 ">
      <PageUtils.PageHeading
        title="Fraud & Risk Management"
        subTitle="Connect and configure processors to screen transactions and mitigate fraud"
      />
      <RenderIf condition={configuredFRMs->Array.length > 0}>
        <LoadedTable
          title="Connected Processors"
          actualData={filteredFRMData}
          totalResults={filteredFRMData->Array.length}
          filters={<TableSearchFilter
            data={configuredFRMs->Array.map(Nullable.make)}
            filterLogic
            placeholder="Search Processor or Merchant Connector Id or Connector Label"
            customSearchBarWrapperWidth="w-full lg:w-1/2"
            customInputBoxWidth="w-full"
            searchVal={searchText}
            setSearchVal={setSearchText}
          />}
          resultsPerPage=20
          offset
          setOffset
          entity={FRMTableUtils.connectorEntity(
            "fraud-risk-management",
            ~authorization={userHasAccess(~groupAccess=ConnectorsManage)},
          )}
          currentFetchCount={configuredFRMs->Array.length}
          collapseTableRow=false
          showAutoScroll=true
        />
      </RenderIf>
      <NewProcessorCards
        configuredFRMs={ConnectorListInterface.mapConnectorPayloadToConnectorType(
          ConnectorListInterface.connectorInterfaceV1,
          ConnectorTypes.FRMPlayer,
          configuredFRMs,
        )}
      />
      <RenderIf condition={!isMobileView}>
        <img alt="frm-banner" className="w-full max-w-[1400px] mb-10" src="/assets/frmBanner.svg" />
      </RenderIf>
    </div>
  </PageLoaderWrapper>
}