feat: Banner Addition in Disputes & Orders

src/screens/HyperSwitch/Disputes/Disputes.res

@@ -57,9 +57,22 @@ let make = () => {
   }, ~wait=200)
 
   let customUI =
-    <HelperComponents.BluredTableComponent
-      infoText="No disputes as of now." moduleName=" " showRedirectCTA=false
-    />
+    <>
+      <div
+        className="flex border items-start border-blue-800 text-sm rounded-md gap-2 px-4 py-3 mt-5">
+        <Icon name="info-vacent" className="text-blue-900 mt-1" size=18 />
+        <p>
+          {"Missing disputes? Disputes might not be supported for your payment processor or might not yet have been integrated with hyperswitch. Please check the"->React.string}
+          <a href="https://hyperswitch.io/pm-list" target="_blank" className="text-blue-900">
+            {" feature matrix "->React.string}
+          </a>
+          {"for your processor."->React.string}
+        </p>
+      </div>
+      <HelperComponents.BluredTableComponent
+        infoText="No disputes as of now." moduleName=" " showRedirectCTA=false
+      />
+    </>
 
   let {generateReport} =
     HyperswitchAtom.featureFlagAtom

src/screens/HyperSwitch/Order/ShowOrder.res

@@ -381,6 +381,12 @@ module Attempts = {
     }
 
     <div className="flex flex-col gap-4">
+      <div className="flex border items-start border-blue-800 text-sm rounded-md gap-2 px-4 py-3">
+        <Icon name="info-vacent" className="text-blue-900 mt-1" size=18 />
+        <span>
+          {`You can validate the information shown here by cross checking the hyperswitch payment attempt identifier (Attempt ID) in your payment processor portal.`->React.string}
+        </span>
+      </div>
       <p className="font-bold text-fs-16 text-jp-gray-900"> {"Payment Attempts"->React.string} </p>
       <CustomExpandableTable
         title="Attempts"