From 5896b0cd53eefadfbd4c449a52bf2cc5ad401ceb Mon Sep 17 00:00:00 2001
From: Riddhiagrawal001 <50551695+Riddhiagrawal001@users.noreply.github.com>
Date: Thu, 25 Jul 2024 18:55:57 +0530
Subject: [PATCH] chore: Apple pay extra step addition (#1047)

Co-authored-by: Pritish Budhiraja <pritish.budhiraja@gmail.com>
---
 .../ApplePay/ApplePayIntegrationHelper.res    | 80 +++++++++++++++++++
 .../ApplePay/ApplePaySimplifiedFlow.res       | 10 +++
 .../ConnectorUIUtils/PaymentMethod.res        |  1 +
 .../ComplianceCertificates/Compliance.res     | 11 ++-
 4 files changed, 99 insertions(+), 3 deletions(-)

diff --git a/src/screens/Connectors/ConnectorMetaData/ApplePay/ApplePayIntegrationHelper.res b/src/screens/Connectors/ConnectorMetaData/ApplePay/ApplePayIntegrationHelper.res
index 0caa7af2f..bec7604b5 100644
--- a/src/screens/Connectors/ConnectorMetaData/ApplePay/ApplePayIntegrationHelper.res
+++ b/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 (support@stripe.com) 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 (biz@hyperswitch.io):"->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="") => {
diff --git a/src/screens/Connectors/ConnectorMetaData/ApplePay/ApplePaySimplifiedFlow.res b/src/screens/Connectors/ConnectorMetaData/ApplePay/ApplePaySimplifiedFlow.res
index 9927f2b20..e9e1a81e6 100644
--- a/src/screens/Connectors/ConnectorMetaData/ApplePay/ApplePaySimplifiedFlow.res
+++ b/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"
diff --git a/src/screens/Connectors/ConnectorUIUtils/PaymentMethod.res b/src/screens/Connectors/ConnectorUIUtils/PaymentMethod.res
index 0c0d2b4c7..d8340f240 100644
--- a/src/screens/Connectors/ConnectorUIUtils/PaymentMethod.res
+++ b/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}
diff --git a/src/screens/Settings/ComplianceCertificates/Compliance.res b/src/screens/Settings/ComplianceCertificates/Compliance.res
index fc8cfd3bb..b4218e12a 100644
--- a/src/screens/Settings/ComplianceCertificates/Compliance.res
+++ b/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>