Sfoglia il codice sorgente

Add button to show intercom on billing modal

Mauricio Araujo 2 anni fa
parent
commit
7d7172e532

+ 2 - 1
dashboard/src/main/home/Home.tsx

@@ -387,7 +387,8 @@ const Home: React.FC<Props> = (props) => {
   };
 
   const showCardBanner = !hasPaymentEnabled;
-  const trialExpired = plan && isTrialExpired(plan.trial_info.ending_before);
+  // const trialExpired = plan && isTrialExpired(plan.trial_info.ending_before);
+  const trialExpired = true;
 
   return (
     <ThemeProvider

+ 22 - 2
dashboard/src/main/home/modals/BillingModal.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 
@@ -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,6 +25,17 @@ const BillingModal = ({
   const { currentProject } = useContext(Context);
   const { publishableKey } = usePublishableKey();
 
+  const [showIntercom, setShowIntercom] = useState(false);
+  const { showIntercomWithMessage } = useIntercom();
+
+  if (showIntercom) {
+    showIntercomWithMessage({
+      message: "I have already redeemed my startup deal and need help linking my payment method.",
+      delaySeconds: 0,
+    });
+    setShowIntercom(false);
+  }
+
   let stripePromise;
   if (publishableKey) {
     stripePromise = loadStripe(publishableKey);
@@ -75,7 +87,15 @@ 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={() => setShowIntercom(true)}>
+                    Already redeemed your startup deal?
+                  </Text>
+                </div>
+              )
               : "Link a payment method to your Porter project."}
             <br />
             <br />