chore: Apple pay extra step addition (#1047)

Co-authored-by: Pritish Budhiraja <[email protected]>

src/screens/Connectors/ConnectorMetaData/ApplePay/ApplePayIntegrationHelper.res

@@ -49,6 +49,86 @@ module HostURL = {
   }
 }
 
+module SampleEmail = {
+  @react.component
+  let make = () => {
+    let showToast = ToastState.useShowToast()
+
+    let (isTextVisible, setIsTextVisible) = React.useState(_ => false)
+
+    let businessDescription = "<One sentence about your business>. The business operates across <XX> countries and has customers across the world."
+    let featureReqText = "We are using Hyperswitch, a Level 1 PCI DSS 3.2.1 compliant Payments Orchestrator, to manage payments on our website. In addition to Stripe, since we are using other processors as well to process payments across multiple geographies, we wanted to use Hyperswitch's Payment Processing certificate to decrypt Apple pay tokens and send the decrypted Apple pay tokens to Stripe. So, please enable processing decrypted Apple pay token feature on our Stripe account. We've attached Hyperswitch's PCI DSS AoC for reference."
+
+    let emailContent = `Stripe Account id: <Enter your account id>
+
+    A detailed business description: 
+    ${businessDescription}
+
+    Feature Request:
+    ${featureReqText}`
+
+    let truncatedText = isTextVisible
+      ? featureReqText
+      : featureReqText->String.slice(~start=0, ~end=50)
+
+    let truncatedTextElement =
+      <p className="flex gap-2">
+        {truncatedText->React.string}
+        <p
+          className="cursor-pointer text-blue-400 text-xl"
+          onClick={_ => setIsTextVisible(_ => true)}>
+          {"..."->React.string}
+        </p>
+      </p>
+
+    <div className="flex flex-col">
+      <span className="mt-2 text-base  font-normal">
+        <span className="text-hyperswitch_black opacity-50">
+          {"Since the Apple Pay Web Domain flow involves decryption at Hyperswitch, you would need to write to Stripe support ([email protected]) to get this feature enabled for your Stripe account. You can use the following text in the email, attach our"->React.string}
+        </span>
+        <Link
+          to_={`/compliance`}
+          openInNewTab=false
+          className="text-blue-600 underline underline-offset-2 px-2 !opacity-100">
+          {"PCI DSS AoC certificate"->React.string}
+        </Link>
+        <span className="text-hyperswitch_black opacity-50">
+          {"and copy our Support team ([email protected]):"->React.string}
+        </span>
+      </span>
+      <div className="border border-gray-400 rounded-md flex flex-row gap-8 p-4 mt-4 bg-gray-200">
+        <div className="flex flex-col gap-4 ">
+          <span>
+            {"Stripe Account id: <Enter your account id:you can find it "->React.string}
+            <a
+              className="underline text-blue-400 underline-offset-1"
+              href="https://dashboard.stripe.com/settings/user">
+              {"here"->React.string}
+            </a>
+            <span> {">"->React.string} </span>
+          </span>
+          <span>
+            <p> {"A detailed business description:"->React.string} </p>
+            {businessDescription->React.string}
+          </span>
+          <span>
+            <p> {"Feature Request:"->React.string} </p>
+            {isTextVisible ? truncatedText->React.string : truncatedTextElement}
+          </span>
+        </div>
+        <img
+          src={`/assets/CopyToClipboard.svg`}
+          className="cursor-pointer h-fit w-fit"
+          onClick={_ => {
+            Clipboard.writeText(emailContent)
+            showToast(~message="Copied to Clipboard!", ~toastType=ToastSuccess, ())
+          }}
+        />
+      </div>
+    </div>
+  }
+}
+
 module CustomTag = {
   @react.component
   let make = (~tagText="", ~tagSize=5, ~tagLeftIcon=None, ~tagCustomStyle="") => {

src/screens/Connectors/ConnectorMetaData/ApplePay/ApplePaySimplifiedFlow.res

@@ -23,6 +23,7 @@ let make = (
   let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
     ReactFinalForm.useFormSubscription(["values"])->Nullable.make,
   )
+  let featureFlagDetails = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
   let initalFormValue =
     formState.values
     ->getDictFromJsonObject
@@ -158,6 +159,15 @@ let make = (
           )}`}
       />}
     />
+    <RenderIf condition={featureFlagDetails.isLiveMode && featureFlagDetails.complianceCertificate}>
+      <hr className="w-full" />
+      <SimplifiedHelper
+        heading="Get feature enabled from stripe"
+        subText=None
+        stepNumber="4"
+        customElement={<SampleEmail />}
+      />
+    </RenderIf>
     <div className="w-full flex gap-2 justify-end p-6">
       <Button
         text="Go Back"

src/screens/Connectors/ConnectorUIUtils/PaymentMethod.res

@@ -249,6 +249,7 @@ module CardRenderer = {
           <Modal
             modalHeading={`Additional Details to enable ${selectedWallet.payment_method_type->LogicUtils.snakeToTitle}`}
             headerTextClass={`${textColor.primaryNormal} font-bold text-xl`}
+            headBgClass="sticky top-0 z-30 bg-white"
             showModal={showWalletConfigurationModal}
             setShowModal={setShowWalletConfigurationModal}
             onCloseClickCustomFun={removeSelectedWallet}

src/screens/Settings/ComplianceCertificates/Compliance.res

@@ -1,12 +1,13 @@
 module DownloadCertificateTile = {
   @react.component
-  let make = (~header, ~onClick) => {
+  let make = (~header, ~onClick, ~buttonState) => {
     <div
       className="flex flex-col bg-white pt-6 pl-6 pr-8 pb-8 justify-between gap-10 border border-jp-gray-border_gray rounded">
       <div>
         <p className="text-fs-16 font-semibold m-2"> {header->React.string} </p>
       </div>
       <Button
+        buttonState
         text="Download"
         buttonSize={Medium}
         buttonType={Primary}
@@ -21,8 +22,10 @@ module DownloadCertificateTile = {
 let make = () => {
   let showToast = ToastState.useShowToast()
   let fetchApi = AuthHooks.useApiFetcher()
+  let (buttonState, setButtonState) = React.useState(_ => Button.Normal)
 
-  let downloadPDF = () => {
+  let downloadPDF = _ => {
+    setButtonState(_ => Button.Loading)
     let currentDate =
       Date.now()
       ->Js.Date.fromFloat
@@ -61,8 +64,10 @@ let make = () => {
         resolve()
       })
       ->ignore
+      setButtonState(_ => Button.Normal)
     } else {
       showToast(~toastType=ToastError, ~message="Oops, something went wrong with the download ", ())
+      setButtonState(_ => Button.Normal)
     }
   }
 
@@ -72,7 +77,7 @@ let make = () => {
     />
     <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8">
       <DownloadCertificateTile
-        header="Hyperswitch's PCI Attestation of Compliance" onClick={_ => downloadPDF()}
+        header="Hyperswitch's PCI Attestation of Compliance" onClick=downloadPDF buttonState
       />
     </div>
   </div>