From 05d18519305e267be6ea5e948ae88368dfd1d09d Mon Sep 17 00:00:00 2001
From: Mauricio Araujo <mauricio.araujo@proton.me>
Date: Thu, 25 Apr 2024 14:23:20 -0400
Subject: [PATCH] Add button to show intercom on billing modal (#4581)

---
 .../src/main/home/modals/BillingModal.tsx     | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/dashboard/src/main/home/modals/BillingModal.tsx b/dashboard/src/main/home/modals/BillingModal.tsx
index 01d72b2e73..8a54ce2cee 100644
--- a/dashboard/src/main/home/modals/BillingModal.tsx
+++ b/dashboard/src/main/home/modals/BillingModal.tsx
@@ -7,6 +7,7 @@ import Modal from "components/porter/Modal";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 import { usePublishableKey } from "lib/hooks/useStripe";
+import { useIntercom } from "lib/hooks/useIntercom";
 
 import { Context } from "shared/Context";
 
@@ -24,10 +25,11 @@ const BillingModal = ({
   const { currentProject } = useContext(Context);
   const { publishableKey } = usePublishableKey();
 
+  const { showIntercomWithMessage } = useIntercom();
+
   let stripePromise;
   if (publishableKey) {
     stripePromise = loadStripe(publishableKey);
-
   }
 
   const appearance = {
@@ -75,10 +77,20 @@ const BillingModal = ({
         ) : (
           <Text color="helper">
             {trialExpired
-              ? `Your applications will continue to run but you will not be able to access your project until you link a payment method. `
+              ? (
+                <div>
+                  Your applications will continue to run but you will not be able to access your project until you link a payment method.
+                  {" "}
+                  <Text style={{ cursor: "pointer" }} onClick={() => showIntercomWithMessage({
+                    message: "I have already redeemed my startup deal.",
+                    delaySeconds: 0,
+                  })}>
+                    Already redeemed your startup deal?
+                  </Text>
+                </div>
+              )
               : "Link a payment method to your Porter project."}
-            <br />
-            <br />
+            <Spacer y={0.5} />
             {`You can learn more about our pricing under "For Businesses" `}
             <Link target="_blank" to="https://porter.run/pricing">
               here
@@ -87,17 +99,18 @@ const BillingModal = ({
         )}
         <Spacer y={1} />
         {
-          publishableKey ? <Elements
-            stripe={stripePromise}
-            options={options}
-            appearance={appearance}
-          >
-            <PaymentSetupForm onCreate={onCreate}></PaymentSetupForm>
-          </Elements> : null
+          publishableKey ? (
+            <Elements
+              stripe={stripePromise || null}
+              options={options}
+              appearance={appearance}
+            >
+              <PaymentSetupForm onCreate={onCreate}></PaymentSetupForm>
+            </Elements>
+          ) : null
         }
-
       </div>
-    </Modal>
+    </Modal >
   );
 };