feat: Webhook Section Update - In Connector Preview (#90)

juspay · Dec 11, 2023 · 07a2cf1 · 07a2cf1
1 parent 9e3aec7
commit 07a2cf1
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 175 deletions.
diff --git a/public/hyperswitch/icons/solid.svg b/public/hyperswitch/icons/solid.svg
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res
@@ -68,7 +68,7 @@ module BusinessProfileRender = {
                     mixpanelEventWrapper(
                       ~url,
                       ~selectedConnector,
-                      ~actionName=`settings_choose_country`,
+                      ~actionName=`settings_choose_profile`,
                       ~hyperswitchMixPanel,
                     )
                   }
@@ -80,7 +80,7 @@ module BusinessProfileRender = {
               ~options={
                 arrayOfBusinessProfile->MerchantAccountUtils.businessProfileNameDropDownOption
               },
-              ~buttonText="Select Country",
+              ~buttonText="Select Profile",
               ~placeholder="",
               (),
             ),
@@ -306,7 +306,7 @@ let make = (
         ~url,
         ~hyperswitchMixPanel,
       )
-      setCurrentStep(_ => isPayoutFlow ? PaymentMethods : Webhooks)
+      setCurrentStep(_ => PaymentMethods)
       setScreenState(_ => Success)
       setInitialValues(_ => body)
     } catch {

diff --git a/src/screens/HyperSwitch/Connectors/ConnectorHome.res b/src/screens/HyperSwitch/Connectors/ConnectorHome.res
@@ -150,14 +150,13 @@ let make = (~isPayoutFlow=false, ~showStepIndicator=true, ~showBreadCrumb=true)
       <UIUtils.RenderIf condition={currentStep !== Preview && showStepIndicator}>
         <ConnectorCurrentStepIndicator currentStep stepsArr borderWidth />
       </UIUtils.RenderIf>
-      <div className="bg-white rounded-lg border h-3/4 overflow-scroll shadow-boxShadowMultiple">
+      <div
+        className="bg-white rounded-lg border h-3/4 overflow-scroll shadow-boxShadowMultiple show-scrollbar">
         {switch currentStep {
         | IntegFields =>
           <ConnectorAccountDetails
             currentStep setCurrentStep setInitialValues initialValues isUpdateFlow isPayoutFlow
           />
-        | Webhooks =>
-          <ConnectorWebhooks connectorName={connector} setCurrentStep currentStep isUpdateFlow />
         | PaymentMethods =>
           <ConnectorPaymentMethod
             currentStep

diff --git a/src/screens/HyperSwitch/Connectors/ConnectorPreview.res b/src/screens/HyperSwitch/Connectors/ConnectorPreview.res
@@ -12,6 +12,26 @@ module InfoField = {
   }
 }
 
+module KeyAndCopyArea = {
+  @react.component
+  let make = (~copyValue) => {
+    let showToast = ToastState.useShowToast()
+    <div className={`flex flex-col md:flex-row gap-2 items-start`}>
+      <p className="text-base text-grey-700 opacity-70 break-all overflow-scroll">
+        {copyValue->React.string}
+      </p>
+      <div
+        className="cursor-pointer h-20 w-20 pt-1"
+        onClick={_ => {
+          Clipboard.writeText(copyValue)
+          showToast(~message="Copied to Clipboard!", ~toastType=ToastSuccess, ())
+        }}>
+        <img src={`/assets/CopyToClipboard.svg`} />
+      </div>
+    </div>
+  }
+}
+
 module MenuOption = {
   open HeadlessUI
   @react.component
@@ -99,9 +119,6 @@ module ConnectorSummaryGrid = {
     ~isPayoutFlow,
     ~setScreenState,
   ) => {
-    let url = RescriptReactRouter.useUrl()
-    let showToast = ToastState.useShowToast()
-    let hyperswitchMixPanel = HSMixPanel.useSendEvent()
     let businessProfiles = HyperswitchAtom.businessProfilesAtom->Recoil.useRecoilValueFromAtom
     let defaultBusinessProfile = businessProfiles->MerchantAccountUtils.getValueFromBusinessProfile
     let arrayOfBusinessProfile = businessProfiles->MerchantAccountUtils.getArrayOfBusinessProfile
@@ -112,6 +129,10 @@ module ConnectorSummaryGrid = {
       )
       ->Belt.Option.getWithDefault(defaultBusinessProfile)
     let merchantId = HSLocalStorage.getFromMerchantDetails("merchant_id")
+    let copyValueOfWebhookEndpoint = ConnectorUtils.getWebhooksUrl(
+      ~connectorName={connectorInfo.merchant_connector_id},
+      ~merchantId,
+    )
     let connectorDetails = React.useMemo1(() => {
       try {
         if connector->Js.String2.length > 0 {
@@ -135,21 +156,21 @@ module ConnectorSummaryGrid = {
     let (_, connectorAccountFields, _, _, _, _) = ConnectorUtils.getConnectorFields(
       connectorDetails,
     )
-    let webhooksUrl = ConnectorUtils.getWebhooksUrl(~connectorName=connector, ~merchantId)
 
     <div className="p-2 md:px-10">
       <div className="grid grid-cols-4 my-12">
-        <h4 className="text-lg font-semibold"> {"Processor Mode"->React.string} </h4>
+        <div className="flex items-start">
+          <h4 className="text-lg font-semibold"> {"Webhook Endpoint"->React.string} </h4>
+          <ToolTip
+            height=""
+            description="Configure this endpoint in the processors dashboard under webhook settings for us to receive events from the processor"
+            toolTipFor={<Icon name="tooltip_info" className={`mt-1 ml-1`} />}
+            toolTipPosition=Top
+            tooltipWidthClass="w-fit"
+          />
+        </div>
         <div className="col-span-3">
-          {if connectorInfo.test_mode {
-            <span className="font-semibold p-2 px-3 bg-orange-200 rounded-full">
-              {"TEST MODE"->React.string}
-            </span>
-          } else {
-            <span className="font-semibold p-2 px-3 bg-blue-200 rounded-full">
-              {"LIVE MODE"->React.string}
-            </span>
-          }}
+          <KeyAndCopyArea copyValue={copyValueOfWebhookEndpoint} />
         </div>
       </div>
       <div className="grid grid-cols-4 my-12">
@@ -175,25 +196,6 @@ module ConnectorSummaryGrid = {
           ->React.array}
         </div>
       </div>
-      <div className="grid grid-cols-4 my-12">
-        <h4 className="text-lg font-semibold"> {"Webhooks"->React.string} </h4>
-        <div className="flex col-span-3">
-          <div> {webhooksUrl->React.string} </div>
-          <img
-            src={`/assets/CopyToClipboard.svg`}
-            onClick={_ => {
-              Clipboard.writeText(webhooksUrl)
-              showToast(~message="Copied to Clipboard!", ~toastType=ToastSuccess, ())
-              hyperswitchMixPanel(
-                ~pageName=`${url.path->LogicUtils.getListHead}`,
-                ~contextName="webhook_processor",
-                ~actionName="hs_webhookcopied",
-                (),
-              )
-            }}
-          />
-        </div>
-      </div>
       <div className="grid grid-cols-4  my-12">
         <h4 className="text-lg font-semibold"> {"PMTs"->React.string} </h4>
         <div className="flex flex-col gap-6 col-span-3">

diff --git a/src/screens/HyperSwitch/Connectors/ConnectorTypes.res b/src/screens/HyperSwitch/Connectors/ConnectorTypes.res
@@ -1,4 +1,4 @@
-type steps = IntegFields | PaymentMethods | SummaryAndTest | Preview | Webhooks
+type steps = IntegFields | PaymentMethods | SummaryAndTest | Preview
 type connectorIntegrationField = {
   placeholder?: string,
   label?: string,

diff --git a/src/screens/HyperSwitch/Connectors/ConnectorUtils.res b/src/screens/HyperSwitch/Connectors/ConnectorUtils.res
@@ -10,14 +10,13 @@ external changeType: Js.Json.t => 't = "%identity"
 type object = {fromEntries: (. map) => Js.Json.t}
 external object: object = "Object"
 
-let stepsArr = [IntegFields, Webhooks, PaymentMethods, SummaryAndTest]
+let stepsArr = [IntegFields, PaymentMethods, SummaryAndTest]
 
 let payoutStepsArr = [IntegFields, PaymentMethods, SummaryAndTest]
 
 let getStepName = step => {
   switch step {
   | IntegFields => "Credentials"
-  | Webhooks => "Webhooks"
   | PaymentMethods => "Payment Methods"
   | SummaryAndTest => "Summary"
   | Preview => "Preview"

diff --git a/src/screens/HyperSwitch/Connectors/ConnectorWebhooks.res b/src/screens/HyperSwitch/Connectors/ConnectorWebhooks.res
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res b/src/screens/HyperSwitch/FraudAndRisk/FRMConfigure.res
@@ -120,8 +120,7 @@ let make = () => {
             setCurrentStep retrivedValues=Some(initialValues) setInitialValues isUpdateFlow
           />
         | SummaryAndTest
-        | Preview
-        | _ =>
+        | Preview =>
           <FRMSummary initialValues currentStep setCurrentStep isUpdateFlow />
         }}
       </div>

diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMInfo.res b/src/screens/HyperSwitch/FraudAndRisk/FRMInfo.res
@@ -77,7 +77,7 @@ let getNextStep: ConnectorTypes.steps => ConnectorTypes.steps = currentStep => {
   | PaymentMethods => IntegFields
   | IntegFields => SummaryAndTest
   | SummaryAndTest => SummaryAndTest
-  | Preview | _ => Preview
+  | Preview => Preview
   }
 }
 

diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res b/src/screens/HyperSwitch/FraudAndRisk/FRMIntegrationFields.res
@@ -2,7 +2,7 @@ module AdvanceSettings = {
   @react.component
   let make = (~isUpdateFlow, ~frmName, ~renderCountrySelector) => {
     let (isFRMSettings, setIsFRMSettings) = React.useState(_ => isUpdateFlow)
-
+    let featureFlagDetails = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
     let form = ReactFinalForm.useForm()
     let hyperswitchMixPanel = HSMixPanel.useSendEvent()
     let url = RescriptReactRouter.useUrl()
@@ -40,7 +40,7 @@ module AdvanceSettings = {
       None
     }, [businessProfileValue.profile_id])
 
-    <>
+    <UIUtils.RenderIf condition={featureFlagDetails.businessProfile}>
       <div className="flex gap-2 items-center p-2">
         <BoolInput input={inputLabel} isDisabled={isUpdateFlow} boolCustomClass="rounded-full" />
         <p className="font-semibold !text-black opacity-50 ">
@@ -50,7 +50,7 @@ module AdvanceSettings = {
       <UIUtils.RenderIf condition={renderCountrySelector && isFRMSettings}>
         <ConnectorAccountDetails.BusinessProfileRender isUpdateFlow selectedConnector={frmName} />
       </UIUtils.RenderIf>
-    </>
+    </UIUtils.RenderIf>
   }
 }
 

diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res b/src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res
@@ -130,20 +130,6 @@ let make = (~initialValues, ~currentStep, ~setCurrentStep, ~isUpdateFlow) => {
       }}
     </div>
     <div>
-      <div className="grid grid-cols-2 md:w-1/2 m-12">
-        <h4 className="text-lg font-semibold"> {"Processor Mode"->React.string} </h4>
-        <div>
-          {if frmInfo.test_mode {
-            <span className="font-semibold p-2 px-3 bg-orange-200 rounded-full">
-              {"TEST MODE"->React.string}
-            </span>
-          } else {
-            <span className="font-semibold p-2 px-3 bg-blue-200 rounded-full">
-              {"LIVE MODE"->React.string}
-            </span>
-          }}
-        </div>
-      </div>
       <div className="grid grid-cols-2 md:w-1/2 m-12">
         <h4 className="text-lg font-semibold"> {"Profile id"->React.string} </h4>
         <div> {frmInfo.profile_id->React.string} </div>