fix: Live Mode SDK Fixes.

README.md

@@ -136,9 +136,9 @@ The `home_page` feature flag controls whether the dashboard home page is enabled
 
 The `test_live_toggle` feature flag enables users to toggle between test and live modes when signing in. When enabled, users will see an option during sign-in to actively switch between test and live environments.
 
-#### Test Live Mode
+#### Is Live Mode
 
-The `test_live_mode` feature flag enables displaying the current mode - test or live - that the user is accessing. When enabled, it will show a visual indicator within the dashboard signaling whether the user is currently in a test environment or live production environment.
+The `is_live_mode` feature flag enables the live mode - that the user is accessing. When enabled, it will show a visual indicator within the dashboard signaling whether the user is currently in a test environment or live production environment.
 
 #### Magic Link
 
@@ -152,10 +152,6 @@ The `production_access` feature flag enables a flow for users to request live pr
 
 The `quick_start` feature flag enables the simplified onboarding flow for new users, where he connects to processors, configure payment routing and testing a payment, all in one flow.
 
-#### Open SDK
-
-The `open_sdk` feature flag enables access to the Checkout Page web SDK from within the dashboard. When enabled, developers can preview the SDK from within the dashboard and make payments.
-
 ---
 
 ## Deployment

config/FeatureFlag.json

@@ -1,10 +1,9 @@
 {
   "test_live_toggle": false,
-  "test_live_mode": false,
+  "is_live_mode": false,
   "magic_link": false,
   "production_access": false,
   "quick_start": false,
-  "open_sdk": false,
   "switch_merchant": false,
   "audit_trail": false,
   "system_metrics": false,

src/entryPoints/hyperswitch/FeatureFlagUtils.res

@@ -4,9 +4,8 @@ type featureFlag = {
   testLiveToggle: bool,
   magicLink: bool,
   quickStart: bool,
-  openSDK: bool,
   switchMerchant: bool,
-  testLiveMode: bool,
+  isLiveMode: bool,
   auditTrail: bool,
   systemMetrics: bool,
   sampleData: bool,
@@ -32,9 +31,8 @@ let featureFlagType = (featureFlags: Js.Json.t) => {
     testLiveToggle: dict->getBool("test_live_toggle", false),
     magicLink: dict->getBool("magic_link", false),
     quickStart: dict->getBool("quick_start", false),
-    openSDK: dict->getBool("open_sdk", false),
     switchMerchant: dict->getBool("switch_merchant", false),
-    testLiveMode: dict->getBool("test_live_mode", false),
+    isLiveMode: dict->getBool("is_live_mode", false),
     auditTrail: dict->getBool("audit_trail", false),
     systemMetrics: dict->getBool("system_metrics", false),
     sampleData: dict->getBool("sample_data", false),

src/entryPoints/hyperswitch/HyperSwitchApp.res

@@ -50,10 +50,10 @@ let make = () => {
   let getEnumDetails = EnumVariantHook.useFetchEnumDetails()
   let verificationDays = getFromMerchantDetails("verification")->LogicUtils.getIntFromString(-1)
   let userRole = getFromUserDetails("user_role")
-  let modeText = featureFlagDetails.testLiveMode ? "Live Mode" : "Test Mode"
+  let modeText = featureFlagDetails.isLiveMode ? "Live Mode" : "Test Mode"
   let titleComingSoonMessage = "Coming Soon!"
   let subtitleComingSoonMessage = "We are currently working on this page."
-  let modeStyles = featureFlagDetails.testLiveMode
+  let modeStyles = featureFlagDetails.isLiveMode
     ? "bg-hyperswitch_green_trans border-hyperswitch_green_trans text-hyperswitch_green"
     : "bg-orange-600/80 border-orange-500 text-grey-700"
 
@@ -125,7 +125,7 @@ let make = () => {
         let _featureFlag = await fetchInitialEnums()
       }
 
-      if featureFlagDetails.testLiveMode {
+      if featureFlagDetails.isLiveMode {
         getAgreementEnum()->ignore
       } else {
         setDashboardPageState(_ => #HOME)
@@ -331,7 +331,7 @@ let make = () => {
                           <Recon />
                         </FeatureFlagEnabledComponent>
                       | list{"sdk"} =>
-                        <FeatureFlagEnabledComponent isEnabled=featureFlagDetails.openSDK>
+                        <FeatureFlagEnabledComponent isEnabled={!featureFlagDetails.isLiveMode}>
                           <SDKPage />
                         </FeatureFlagEnabledComponent>
                       | list{"3ds"} => <HSwitchThreeDS />

src/entryPoints/hyperswitch/HyperSwitchEntry.res

@@ -43,7 +43,7 @@ module HyperSwitchEntryComponent = {
 
     let setPageName = pageTitle => {
       let page = pageTitle->LogicUtils.snakeToTitle
-      let title = featureFlagDetails.testLiveMode
+      let title = featureFlagDetails.isLiveMode
         ? `${page} - Dashboard`
         : `${page} - Dashboard [Test]`
       DOMUtils.document.title = title

src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res

@@ -343,7 +343,7 @@ let make = (
         ~connector,
         ~bodyType,
         ~isPayoutFlow,
-        ~isLiveMode={featureFlagDetails.testLiveMode},
+        ~isLiveMode={featureFlagDetails.isLiveMode},
         (),
       )
       setScreenState(_ => Loading)
@@ -396,7 +396,7 @@ let make = (
           ~connector,
           ~bodyType,
           ~isPayoutFlow,
-          ~isLiveMode={featureFlagDetails.testLiveMode},
+          ~isLiveMode={featureFlagDetails.isLiveMode},
           (),
         )->ignoreFields(connectorID, verifyConnectorIgnoreField)
 

src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res

@@ -132,7 +132,7 @@ module RenderConnectorInputFields = {
               ~selectedConnector,
               ~dict=details,
               ~fieldName=formName,
-              ~isLiveMode={featureFlagDetails.testLiveMode},
+              ~isLiveMode={featureFlagDetails.isLiveMode},
             )}
           />
         </div>

src/screens/HyperSwitch/Connectors/ConnectorList.res

@@ -11,7 +11,7 @@ module NewProcessorCards = {
       ->LogicUtils.safeParse
       ->FeatureFlagUtils.featureFlagType
 
-    let connectorsAvailableForIntegration = featureFlagDetails.testLiveMode
+    let connectorsAvailableForIntegration = featureFlagDetails.isLiveMode
       ? ConnectorUtils.connectorListForLive
       : isPayoutFlow
       ? ConnectorUtils.payoutConnectorList

src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res

@@ -32,7 +32,7 @@ let make = () => {
     setInitialValues(_ => {
       generateInitialValuesDict(
         ~selectedFRMInfo=frmInfo,
-        ~isLiveMode=featureFlagDetails.testLiveMode,
+        ~isLiveMode=featureFlagDetails.isLiveMode,
         (),
       )
     })

src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res

@@ -228,7 +228,7 @@ let make = (
       }
 
     | None =>
-      generateInitialValuesDict(~selectedFRMInfo, ~isLiveMode={featureFlagDetails.testLiveMode}, ())
+      generateInitialValuesDict(~selectedFRMInfo, ~isLiveMode={featureFlagDetails.isLiveMode}, ())
     }
   }, [retrivedValues])
 

src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res

@@ -6,7 +6,6 @@ let make = (~connectProcessorValue: connectProcessor) => {
   open QuickStartUtils
   open APIUtils
   let updateDetails = useUpdateMethod()
-
   let usePostEnumDetails = EnumVariantHook.usePostEnumDetails()
   let {quickStartPageState, setQuickStartPageState, setDashboardPageState} = React.useContext(
     GlobalProvider.defaultContext,

src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res

@@ -91,7 +91,7 @@ module ConfigureProcessor = {
         ~connector=connectorName,
         ~bodyType,
         ~isPayoutFlow=false,
-        ~isLiveMode={featureFlagDetails.testLiveMode},
+        ~isLiveMode={featureFlagDetails.isLiveMode},
         (),
       )
       setInitialValues(_ => body)

src/screens/HyperSwitch/Home/HomeUtils.res

@@ -269,21 +269,21 @@ module ControlCenter = {
     let url = RescriptReactRouter.useUrl()
     let hyperswitchMixPanel = HSMixPanel.useSendEvent()
     let merchantDetailsValue = useMerchantDetailsValue()
-    let {testLiveMode} =
+    let {isLiveMode} =
       HyperswitchAtom.featureFlagAtom
       ->Recoil.useRecoilValueFromAtom
       ->LogicUtils.safeParse
       ->FeatureFlagUtils.featureFlagType
 
     let pageName = url.path->getPageNameFromUrl
 
-    let isLiveModeEnabledStyles = testLiveMode
+    let isLiveModeEnabledStyles = isLiveMode
       ? "flex flex-col md:flex-row gap-5 w-full"
       : "flex flex-col gap-5 md:w-1/2 w-full"
 
     <div className="flex flex-col gap-5 md:flex-row">
       <div className=isLiveModeEnabledStyles>
-        <CardLayout width="w-full" customStyle={testLiveMode ? "" : "h-3/6"}>
+        <CardLayout width="w-full" customStyle={isLiveMode ? "" : "h-3/6"}>
           <CardHeader
             heading="Integrate a connector"
             subHeading="Give a headstart to the control centre by connecting with more than 20+ gateways, payment methods, and networks."
@@ -313,7 +313,7 @@ module ControlCenter = {
             />
           </CardFooter>
         </CardLayout>
-        <CardLayout width="w-full" customStyle={testLiveMode ? "" : "h-4/6"}>
+        <CardLayout width="w-full" customStyle={isLiveMode ? "" : "h-4/6"}>
           <CardHeader
             heading="Credentials and Keys"
             subHeading="Your secret credentials to start integrating hyperswitch."
@@ -342,7 +342,7 @@ module ControlCenter = {
           </CardFooter>
         </CardLayout>
       </div>
-      <UIUtils.RenderIf condition={!testLiveMode}>
+      <UIUtils.RenderIf condition={!isLiveMode}>
         <CheckoutCard />
       </UIUtils.RenderIf>
     </div>

src/screens/HyperSwitch/Order/OrderUIUtils.res

@@ -81,22 +81,22 @@ module GenerateSampleDataButton = {
 module NoData = {
   @react.component
   let make = (~isConfigureConnector, ~paymentModal, ~setPaymentModal) => {
-    let {testLiveMode} =
+    let {isLiveMode} =
       HyperswitchAtom.featureFlagAtom
       ->Recoil.useRecoilValueFromAtom
       ->LogicUtils.safeParse
       ->FeatureFlagUtils.featureFlagType
     <HelperComponents.BluredTableComponent
       infoText={isConfigureConnector
-        ? testLiveMode
+        ? isLiveMode
             ? "There are no payments as of now."
             : "There are no payments as of now. Try making a test payment and visualise the checkout experience."
         : "Connect to a connector like Stripe, Adyen or Hyperswitch provided test connector to make your first payment."}
       buttonText={isConfigureConnector ? "Make a payment" : "Connect a connector"}
       moduleName=""
       paymentModal
       setPaymentModal
-      showRedirectCTA={!testLiveMode}
+      showRedirectCTA={!isLiveMode}
       mixPanelEventName={isConfigureConnector
         ? "paymentops_makeapayment"
         : "payemntops_connectaconnector"}

src/screens/HyperSwitch/SDKPayment/TestPayment.res

@@ -87,6 +87,7 @@ let make = (
         buttonOnClick={_ => onProceed(~paymentId)->ignore}
         customWidth
         bgColor="bg-green-success_page_bg"
+        isButtonVisible={paymentId->Js.String2.length > 0}
       />
 
     | FAILED(_err) =>

src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/ProdOnboardingUIUtils.res

@@ -137,20 +137,23 @@ module BasicAccountSetupSuccessfulPage = {
     ~customWidth="w-full",
     ~bgColor="bg-green-success_page_bg",
     ~buttonState=Button.Normal,
+    ~isButtonVisible=true,
   ) => {
     <div className={`flex flex-col gap-4 p-9 h-full ${customWidth} justify-between rounded shadow`}>
       <div className={`p-4 h-5/6 ${bgColor} flex flex-col justify-center items-center gap-8`}>
         <Icon name=iconName size=120 />
         <p className=headerTextStyle> {statusText->React.string} </p>
       </div>
-      <Button
-        text=buttonText
-        buttonSize={Small}
-        buttonType={Primary}
-        customButtonStyle="!rounded-md"
-        onClick={_ => buttonOnClick()}
-        buttonState
-      />
+      <UIUtils.RenderIf condition={isButtonVisible}>
+        <Button
+          text=buttonText
+          buttonSize={Small}
+          buttonType={Primary}
+          customButtonStyle="!rounded-md"
+          onClick={_ => buttonOnClick()}
+          buttonState
+        />
+      </UIUtils.RenderIf>
     </div>
   }
 }

src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res

@@ -173,7 +173,7 @@ let make = (~selectedConnector, ~pageView, ~setPageView, ~setConnectorID) => {
         ~values,
         ~connector=connectorName,
         ~bodyType,
-        ~isLiveMode={featureFlagDetails.testLiveMode},
+        ~isLiveMode={featureFlagDetails.isLiveMode},
         (),
       )
 
@@ -238,7 +238,7 @@ let make = (~selectedConnector, ~pageView, ~setPageView, ~setConnectorID) => {
           ~connector={connectorName},
           ~bodyType,
           ~isPayoutFlow=false,
-          ~isLiveMode={featureFlagDetails.testLiveMode},
+          ~isLiveMode={featureFlagDetails.isLiveMode},
           (),
         )->ignoreFields(connectorID, verifyConnectorIgnoreField)
 

src/screens/login/HSwitchLoginFlow/HyperSwitchAuthScreen.res

@@ -47,7 +47,7 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit) => {
   open HyperSwitchAuthTypes
   let url = RescriptReactRouter.useUrl()
   let (mode, setMode) = React.useState(_ => TestButtonMode)
-  let {testLiveMode, magicLink: isMagicLinkEnabled} =
+  let {isLiveMode, magicLink: isMagicLinkEnabled} =
     HyperswitchAtom.featureFlagAtom
     ->Recoil.useRecoilValueFromAtom
     ->LogicUtils.safeParse
@@ -74,7 +74,7 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit) => {
   }, [isMagicLinkEnabled])
 
   React.useEffect1(() => {
-    if testLiveMode {
+    if isLiveMode {
       setMode(_ => LiveButtonMode)
     } else {
       setMode(_ => TestButtonMode)

src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res

@@ -310,7 +310,7 @@ module Header = {
   @react.component
   let make = (~authType, ~setAuthType, ~email) => {
     let form = ReactFinalForm.useForm()
-    let {magicLink: isMagicLinkEnabled, testLiveMode} =
+    let {magicLink: isMagicLinkEnabled, isLiveMode} =
       HyperswitchAtom.featureFlagAtom
       ->Recoil.useRecoilValueFromAtom
       ->LogicUtils.safeParse
@@ -383,7 +383,7 @@ module Header = {
       <h1 className="font-semibold text-xl md:text-2xl"> {cardHeaderText->React.string} </h1>
       {switch authType {
       | LoginWithPassword | LoginWithEmail =>
-        !testLiveMode
+        !isLiveMode
           ? getHeaderLink(
               ~prefix="New to Hyperswitch?",
               ~authType=SignUP,