diff --git a/cypress/e2e/processors/processors-list.cy.js b/cypress/e2e/processors/processors-list.cy.js new file mode 100644 index 000000000..de54ac1b3 --- /dev/null +++ b/cypress/e2e/processors/processors-list.cy.js @@ -0,0 +1,20 @@ +describe.only("Processors Landing Module", () => { + beforeEach(() => { + cy.visit("http://localhost:9000/"); + }); + it("should successfully log in with valid credentials", () => { + cy.get("[data-testid=email]").type("jeeva.ramachandran+19@juspay.in"); + cy.get("[data-testid=password]").type("Jeeva12#"); + cy.get('button[type="submit"]').click({ force: true }); + cy.get("[data-testid=processors]").click({ force: true }); + cy.url().should("eq", "http://localhost:9000/connectors"); + cy.contains("Processors").should("be.visible"); + cy.contains( + "Connect and manage payment processors to enable payment acceptance", + ).should("be.visible"); + cy.contains("Connect a new connector").should("be.visible"); + cy.get("[data-testid=search-processor]") + .type("stripe", { force: true }) + .should("have.value", "stripe"); + }); +}); diff --git a/src/components/HeadlessUISelectBox.res b/src/components/HeadlessUISelectBox.res index 3b8738960..feda2ba7b 100644 --- a/src/components/HeadlessUISelectBox.res +++ b/src/components/HeadlessUISelectBox.res @@ -35,22 +35,107 @@ let make = ( }
- - {menuProps => -
- {buttonProps => children} - - {if showBottomUp { - + + + {menuProps => +
+ {buttonProps => children} + + {if showBottomUp { + + + {props => + options + ->Array.mapWithIndex((option, index) => { + let selected = switch value { + | String(v) => v === option.value + | Array(arr) => arr->Array.includes(option.value) + } + let disabledClass = option.isDisabled ? "disabled cursor-not-allowed" : "" + + Js.Int.toString}> + {props => { + let isCloseIcon = props["active"] && deSelectAllowed + +
{ + if !closeListOnClick { + ev->ReactEvent.Mouse.stopPropagation + ev->ReactEvent.Mouse.preventDefault + } + setValue(option.value) + }} + className={`group flex flex-row items-center justify-between rounded-md w-full p-3 text-fs-14 font-normal cursor-pointer ${props["active"] + ? "bg-gray-100 dark:bg-gray-700" + : ""} ${disabledClass}`} + disabled={option.isDisabled}> +
+ {switch option.leftIcon { + | FontAwesome(iconName) => + Belt.Option.getWithDefault( + "", + )}`} + size=14 + name=iconName + /> + | CustomIcon(element) => element + + | Euler(iconName) => + + | _ => React.null + }} + +
Belt.Option.getWithDefault( + "", + )}> + + {React.string(option.label)} + +
+ + {switch option.rightIcon { + | FontAwesome(iconName) => + Belt.Option.getWithDefault( + "", + )}`} + size=12 + name=iconName + /> + | CustomIcon(element) => element + + | Euler(iconName) => + + | _ => React.null + }} +
+ + {if isCloseIcon { + + } else { + + }} + +
+ }} + + }) + ->React.array} + + + } else { + className={`absolute z-10 ${dropdownPositionClass} mt-2 p-1 origin-top-right bg-white dark:bg-jp-gray-950 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${dropDownClass}`}> {props => options ->Array.mapWithIndex((option, index) => { @@ -58,12 +143,11 @@ let make = ( | String(v) => v === option.value | Array(arr) => arr->Array.includes(option.value) } + let disabledClass = option.isDisabled ? "disabled cursor-not-allowed" : "" Js.Int.toString}> - {props => { - let isCloseIcon = props["active"] && deSelectAllowed - + {props =>
{ if !closeListOnClick { @@ -72,7 +156,7 @@ let make = ( } setValue(option.value) }} - className={`group flex flex-row items-center justify-between rounded-md w-full p-3 text-fs-14 font-normal cursor-pointer ${props["active"] + className={`group flex flex-row items-center justify-between rounded-md w-full p-2 ${textClass} cursor-pointer ${props["active"] ? "bg-gray-100 dark:bg-gray-700" : ""} ${disabledClass}`} disabled={option.isDisabled}> @@ -83,7 +167,7 @@ let make = ( className={`align-middle ${option.customIconStyle->Belt.Option.getWithDefault( "", )}`} - size=14 + size=12 name=iconName /> | CustomIcon(element) => element @@ -118,100 +202,20 @@ let make = ( | _ => React.null }}
- - {if isCloseIcon { - - } else { - - }} - -
- }} + {selected + ? props["active"] && deSelectAllowed + ? + : + : React.null} +
} }) ->React.array} - - } else { - - {props => - options - ->Array.mapWithIndex((option, index) => { - let selected = switch value { - | String(v) => v === option.value - | Array(arr) => arr->Array.includes(option.value) - } - - let disabledClass = option.isDisabled ? "disabled cursor-not-allowed" : "" - - Js.Int.toString}> - {props => -
{ - if !closeListOnClick { - ev->ReactEvent.Mouse.stopPropagation - ev->ReactEvent.Mouse.preventDefault - } - setValue(option.value) - }} - className={`group flex flex-row items-center justify-between rounded-md w-full p-2 ${textClass} cursor-pointer ${props["active"] - ? "bg-gray-100 dark:bg-gray-700" - : ""} ${disabledClass}`} - disabled={option.isDisabled}> -
- {switch option.leftIcon { - | FontAwesome(iconName) => - Belt.Option.getWithDefault( - "", - )}`} - size=12 - name=iconName - /> - | CustomIcon(element) => element - - | Euler(iconName) => - - | _ => React.null - }} - -
Belt.Option.getWithDefault("")}> - - {React.string(option.label)} - -
- - {switch option.rightIcon { - | FontAwesome(iconName) => - Belt.Option.getWithDefault( - "", - )}`} - size=12 - name=iconName - /> - | CustomIcon(element) => element - - | Euler(iconName) => - - | _ => React.null - }} -
- {selected - ? props["active"] && deSelectAllowed - ? - : - : React.null} -
} - - }) - ->React.array} - - }} - -
} - + }} + + } + + } diff --git a/src/genericUtils/DOMUtils.res b/src/genericUtils/DOMUtils.res index 40fe6011a..e26641f2d 100644 --- a/src/genericUtils/DOMUtils.res +++ b/src/genericUtils/DOMUtils.res @@ -19,3 +19,4 @@ external event: string => event = "Event" @send external remove: (Dom.element, unit) => unit = "remove" @scope(("document", "body")) external appendChild: Dom.element => unit = "appendChild" +external domProps: {..} => JsxDOM.domProps = "%identity" diff --git a/src/screens/HyperSwitch/Connectors/ConnectorList.res b/src/screens/HyperSwitch/Connectors/ConnectorList.res index ff9e2fcf5..8fe83df71 100644 --- a/src/screens/HyperSwitch/Connectors/ConnectorList.res +++ b/src/screens/HyperSwitch/Connectors/ConnectorList.res @@ -69,14 +69,18 @@ module NewProcessorCards = {
- ReactDOM.Ref.domRef} - type_="text" - value=searchedConnector - onChange=handleSearch - placeholder="Search a processor" - className={`rounded-md px-4 py-2 focus:outline-none w-1/3 border`} - /> + + ReactDOM.Ref.domRef} + type_="text" + value=searchedConnector + onChange=handleSearch + placeholder="Search a processor" + className={`rounded-md px-4 py-2 focus:outline-none w-1/3 border`} + // dataTestid=dataTestId + id="search-connector" + /> +
ReactDOM.Ref.domRef} type_="text" value=searchedConnector diff --git a/src/screens/HyperSwitch/Sidebar/Sidebar.res b/src/screens/HyperSwitch/Sidebar/Sidebar.res index 43581b21b..bdcb312a5 100644 --- a/src/screens/HyperSwitch/Sidebar/Sidebar.res +++ b/src/screens/HyperSwitch/Sidebar/Sidebar.res @@ -99,17 +99,18 @@ module SidebarItem = { | Link(tabOption) => { let {name, icon, link, access} = tabOption let redirectionLink = `${link}${getSearchParamByLink(link)}` - -
ReactDOM.Ref.domRef} - onClick={_ => isMobileView ? setIsSidebarExpanded(_ => false) : ()} - className={`${textColor} relative overflow-hidden flex flex-row items-center rounded-lg cursor-pointer ${selectedClass} p-3 ${isExpanded - ? "mx-2" - : "mx-1"} hover:bg-light_white my-0.5`}> - -
+ String.toLowerCase)]> +
ReactDOM.Ref.domRef} + onClick={_ => isMobileView ? setIsSidebarExpanded(_ => false) : ()} + className={`${textColor} relative overflow-hidden flex flex-row items-center rounded-lg cursor-pointer ${selectedClass} p-3 ${isExpanded + ? "mx-2" + : "mx-1"} hover:bg-light_white my-0.5`}> + +
+ } @@ -197,22 +198,24 @@ module NestedSidebarItem = { -
ReactDOM.Ref.domRef} - onClick={_ => isMobileView ? setIsSidebarExpanded(_ => false) : ()} - className={`${textColor} relative overflow-hidden flex flex-row items-center cursor-pointer rounded-lg ${paddingClass} ${selectedClass}`}> - - Belt.Option.isSome && isSideBarExpanded}> -
- Belt.Option.getWithDefault(26)} - name={iconTag->Belt.Option.getWithDefault("")} - className={iconStyles->Belt.Option.getWithDefault("w-26 h-26")} - /> -
- - -
+ String.toLowerCase)]> +
ReactDOM.Ref.domRef} + onClick={_ => isMobileView ? setIsSidebarExpanded(_ => false) : ()} + className={`${textColor} relative overflow-hidden flex flex-row items-center cursor-pointer rounded-lg ${paddingClass} ${selectedClass}`}> + + Belt.Option.isSome && isSideBarExpanded}> +
+ Belt.Option.getWithDefault(26)} + name={iconTag->Belt.Option.getWithDefault("")} + className={iconStyles->Belt.Option.getWithDefault("w-26 h-26")} + /> +
+ + +
+ } @@ -253,56 +256,58 @@ module NestedSectionItem = { let sectionExpandedAnimation = `rounded-sm transition duration-[250ms] ease-in-out` -
-
ReactDOM.Ref.domRef} - className={`${isSideBarExpanded - ? "mx-2" - : "mx-1"} text-sm ${textColor} ${bgColor} relative overflow-hidden flex flex-row items-center justify-between p-3 ${cursor} ${isSectionExpanded - ? "" - : sectionExpandedAnimation} border-l-2 ${isAnySubItemSelected - ? "border-white" - : "border-transparent"} hover:bg-light_white`} - onClick=toggleSectionExpansion> -
- {if isSideBarExpanded { -
- -
- } else { - - }} + String.toLowerCase)]> +
+
ReactDOM.Ref.domRef} + className={`${isSideBarExpanded + ? "mx-2" + : "mx-1"} text-sm ${textColor} ${bgColor} relative overflow-hidden flex flex-row items-center justify-between p-3 ${cursor} ${isSectionExpanded + ? "" + : sectionExpandedAnimation} border-l-2 ${isAnySubItemSelected + ? "border-white" + : "border-transparent"} hover:bg-light_white`} + onClick=toggleSectionExpansion> +
+ {if isSideBarExpanded { +
+ +
+ } else { + + }} + +
+ {React.string(section.name)} +
+ +
-
- {React.string(section.name)} -
+
- - + + {section.links + ->Array.mapWithIndex((subLevelItem, index) => { + let isSelected = subLevelItem->isSubLevelItemSelected + + }) + ->React.array}
- - {section.links - ->Array.mapWithIndex((subLevelItem, index) => { - let isSelected = subLevelItem->isSubLevelItemSelected - - }) - ->React.array} - -
+ } }