diff --git a/src/components/ButtonGroupIp.res b/src/components/ButtonGroupIp.res index 58fd16ccb..cf0953ab8 100644 --- a/src/components/ButtonGroupIp.res +++ b/src/components/ButtonGroupIp.res @@ -13,10 +13,11 @@ let make = ( let buttons = options - ->Js.Array2.map(op => { + ->Array.mapWithIndex((op, i) => { let active = input.value->LogicUtils.getStringFromJson("") === op.value if isSeparate { <Button + key={i->string_of_int} text={op.label} onClick={_ => onChange(op.value)} buttonType={active ? Primary : SecondaryFilled} @@ -26,6 +27,7 @@ let make = ( /> } else { <Button + key={i->string_of_int} text={op.label} onClick={_ => onChange(op.value)} textStyle={active ? "text-blue-800" : ""} diff --git a/src/components/Chip.res b/src/components/Chip.res index a869d2b76..ebe2ed923 100644 --- a/src/components/Chip.res +++ b/src/components/Chip.res @@ -1,29 +1,23 @@ @react.component let make = (~values=[], ~showButton=false, ~onButtonClick=_ => (), ~converterFn=str => str) => { - <div> - {if values->Js.Array2.length !== 0 { - <div className="flex flex-wrap flex-row"> - {values - ->Js.Array2.map(value => { - let onClick = _evt => { - onButtonClick(value) - } - <div - className="px-4 py-2 m-2 mr-0.5 rounded-full border border-gray-300 bg-gradient-to-b from-jp-gray-200 to-jp-gray-300 dark:from-jp-gray-950 dark:to-jp-gray-950 text-gray-500 hover:shadow dark:text-jp-gray-text_darktheme dark:text-opacity-50 flex align-center w-max cursor-pointer transition duration-300 ease"> - {React.string(value->converterFn)} - {if showButton { - <div className="float-right cursor-pointer mt-0.5 ml-0.5 opacity-50"> - <Icon className="align-middle" size=14 name="times" onClick /> - </div> - } else { - React.null - }} - </div> - }) - ->React.array} - </div> - } else { - React.null - }} - </div> + <UIUtils.RenderIf condition={values->Js.Array2.length !== 0}> + <div className="flex flex-wrap flex-row"> + {values + ->Js.Array2.map(value => { + let onClick = _evt => { + onButtonClick(value) + } + <div + className="px-4 py-2 m-2 mr-0.5 rounded-full border border-gray-300 bg-gradient-to-b from-jp-gray-200 to-jp-gray-300 dark:from-jp-gray-950 dark:to-jp-gray-950 text-gray-500 hover:shadow dark:text-jp-gray-text_darktheme dark:text-opacity-50 flex align-center w-max cursor-pointer transition duration-300 ease"> + {React.string(value->converterFn)} + <UIUtils.RenderIf condition={showButton}> + <div className="float-right cursor-pointer mt-0.5 ml-0.5 opacity-50"> + <Icon className="align-middle" size=14 name="times" onClick /> + </div> + </UIUtils.RenderIf> + </div> + }) + ->React.array} + </div> + </UIUtils.RenderIf> } diff --git a/src/components/CollapsableTableRow.res b/src/components/CollapsableTableRow.res index a2b73ee39..fe1a81be8 100644 --- a/src/components/CollapsableTableRow.res +++ b/src/components/CollapsableTableRow.res @@ -45,7 +45,8 @@ let make = ( let cursorI = cellIndex == 0 ? "cursor-pointer" : "" let location = `${title}_tr${(rowIndex + 1)->Belt.Int.toString}_td${(cellIndex + 1) ->Belt.Int.toString}` - <AddDataAttributes attributes=[("data-table-location", location)]> + <AddDataAttributes + key={cellIndex->string_of_int} attributes=[("data-table-location", location)]> <td key={string_of_int(cellIndex)} className={`h-full p-0 align-top ${borderClass} ${hCell} ${cursorI}`} @@ -81,7 +82,7 @@ let make = ( {item ->Js.Array2.mapi((obj, index) => { let heading = headingArray->Belt.Array.get(index)->Belt.Option.getWithDefault("") - <UIUtils.RenderIf condition={index !== 0}> + <UIUtils.RenderIf condition={index !== 0} key={index->string_of_int}> <div className="flex mb-5 justify-between"> <div className="text-jp-gray-900 opacity-50 font-medium"> {React.string(heading)} diff --git a/src/genericUtils/BreadCrumbNavigation.res b/src/genericUtils/BreadCrumbNavigation.res index f1d05a33e..9ddc3ad0f 100644 --- a/src/genericUtils/BreadCrumbNavigation.res +++ b/src/genericUtils/BreadCrumbNavigation.res @@ -57,10 +57,8 @@ let make = ( }, }) } - <UIUtils.RenderIf condition=showCrumb> - <div - key={Belt.Int.toString(index)} - className={`flex ${flexDirection} ${childGapClass} items-center`}> + <UIUtils.RenderIf key={Belt.Int.toString(index)} condition=showCrumb> + <div className={`flex ${flexDirection} ${childGapClass} items-center`}> {if collapse { <div className="flex flex-row gap-1 text-jp-2-gray-100 font-medium items-center justify-center"> diff --git a/src/screens/HyperSwitch/Routing/AdvancedRouting/RoutingPreviewer.res b/src/screens/HyperSwitch/Routing/AdvancedRouting/RoutingPreviewer.res index f4f65963e..951b18891 100644 --- a/src/screens/HyperSwitch/Routing/AdvancedRouting/RoutingPreviewer.res +++ b/src/screens/HyperSwitch/Routing/AdvancedRouting/RoutingPreviewer.res @@ -4,7 +4,7 @@ open RoutingUtils module SimplePreview = { @react.component let make = (~gateways) => { - if gateways->Js.Array2.length > 0 { + <UIUtils.RenderIf condition={gateways->Js.Array2.length > 0}> <div className="w-full mb-6 p-4 px-6 bg-white dark:bg-jp-gray-lightgray_background rounded-md border border-jp-gray-600 dark:border-jp-gray-850"> <div @@ -23,9 +23,7 @@ module SimplePreview = { ->React.array} </div> </div> - } else { - React.null - } + </UIUtils.RenderIf> } } module GatewayView = { @@ -189,16 +187,15 @@ module RulePreviewer = { {React.string(string_of_int(index + 1))} </div> <div> {gateway->React.string} </div> - {if index !== ruleInfo.default_gateways->Js.Array2.length - 1 { + <UIUtils.RenderIf + condition={index !== ruleInfo.default_gateways->Js.Array2.length - 1}> <Icon name="chevron-right" size=14 className="cursor-pointer text-jp-gray-700" onClick={ev => ()} /> - } else { - React.null - }} + </UIUtils.RenderIf> </div> }) ->React.array} diff --git a/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res b/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res index d3ea4e15b..4ee5031aa 100644 --- a/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res +++ b/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res @@ -169,7 +169,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => { {selectedOptions ->Array.mapWithIndex((item, i) => { let key = string_of_int(i + 1) - <div className="flex flex-row"> + <div key className="flex flex-row"> <div className="w-min flex flex-row items-center justify-around gap-2 h-10 rounded-md border border-jp-gray-500 dark:border-jp-gray-960 text-jp-gray-900 text-opacity-75 hover:text-opacity-100 dark:text-jp-gray-text_darktheme dark:hover:text-jp-gray-text_darktheme diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res index 10d32844e..31f8ce1d6 100644 --- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res +++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res @@ -19,9 +19,10 @@ module LogicalOps = { <ButtonGroup wrapperClass="flex flex-row mr-2 ml-1"> {["AND", "OR"] - ->Js.Array2.map(text => { + ->Array.mapWithIndex((text, i) => { let active = logicalOpsInput.value->LogicUtils.getStringFromJson("") === text <Button + key={i->string_of_int} text onClick={_ => onChange(text)} textStyle={active ? "text-blue-800" : ""} @@ -417,6 +418,7 @@ module MakeRuleField = { <div className="flex flex-wrap items-center"> {Array.mapWithIndex(fields, (_, i) => <RuleFieldBase + key={i->string_of_int} onClick={_ => onCrossClick(i)} isFirst={i === 0} id={`${ruleJsonPath}[${i->Belt.Int.toString}]`} diff --git a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res index c513079d5..108ccd419 100644 --- a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res +++ b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res @@ -142,8 +142,8 @@ module ExternalUser = { {props => <> <div className="px-1 py-1 "> {options - ->Js.Array2.map(option => - <Menu.Item> + ->Js.Array2.mapi((option, i) => + <Menu.Item key={i->string_of_int}> {props => <div className="relative"> <button diff --git a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res index fc7e3f54f..fc2b730c0 100644 --- a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res +++ b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res @@ -65,6 +65,7 @@ module Configure3DSRule = { let id = {`algorithm.rules[${string_of_int(index)}]`} let i = 1 <AdvancedRouting.Wrapper + key={index->string_of_int} id heading={`Rule ${string_of_int(index + i)}`} onClickAdd={_ => addRule(index, false)} diff --git a/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res b/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res index ed55e92a0..110caefcf 100644 --- a/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res +++ b/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res @@ -62,7 +62,10 @@ let make = (~heading, ~sidebarOptions: array<sidebarOption>=[]) => { } let subOptionsArray = sidebarOption.subOptions->Belt.Option.getWithDefault([]) - <div className={`p-6 border-y border-gray-200 cursor-pointer ${background}`} onClick> + <div + key={i->string_of_int} + className={`p-6 border-y border-gray-200 cursor-pointer ${background}`} + onClick> <div key={i->Belt.Int.toString} className={`grid grid-cols-12 items-center ${textColor} font-medium gap-5`}> @@ -79,7 +82,7 @@ let make = (~heading, ~sidebarOptions: array<sidebarOption>=[]) => { condition={sidebarOption.status === ONGOING && subOptionsArray->Array.length > 0}> <div className="my-4"> {subOptionsArray - ->Js.Array2.map(subOption => { + ->Js.Array2.mapi((subOption, i) => { let (subIcon, subIconColor, subBackground, subFont) = switch subOption.status { | COMPLETED => ("check", "green", "", "text-gray-600") | PENDING => ("nonselected", "text-gray-100", "", "text-gray-400") @@ -87,6 +90,7 @@ let make = (~heading, ~sidebarOptions: array<sidebarOption>=[]) => { } <div + key={i->string_of_int} className={`flex gap-1 items-center pl-6 py-2 rounded-md my-1 ${subBackground} ${subFont}`}> <Icon name=subIcon customIconColor=subIconColor customHeight="14" /> <span className="flex-1"> {subOption.title->React.string} </span>