Merge remote-tracking branch 'origin/banner-modal-bill' into ask-for-payment

dashboard/src/main/home/Home.tsx

@@ -12,6 +12,7 @@ import ConfirmOverlay from "components/ConfirmOverlay";
 import Loading from "components/Loading";
 import NoClusterPlaceHolder from "components/NoClusterPlaceHolder";
 import Button from "components/porter/Button";
+import Link from "components/porter/Link";
 import Modal from "components/porter/Modal";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
@@ -56,6 +57,7 @@ import CreateClusterForm from "./infrastructure-dashboard/forms/CreateClusterFor
 import Integrations from "./integrations/Integrations";
 import LaunchWrapper from "./launch/LaunchWrapper";
 import ModalHandler from "./ModalHandler";
+import BillingModal from "./modals/BillingModal";
 import Navbar from "./navbar/Navbar";
 import { NewProjectFC } from "./new-project/NewProject";
 import Onboarding from "./onboarding/Onboarding";
@@ -109,6 +111,7 @@ const Home: React.FC<Props> = (props) => {
     setShouldRefreshClusters,
   } = useContext(Context);
 
+  const [showBillingModal, setShowBillingModal] = useState(false);
   const [showWelcome, setShowWelcome] = useState(false);
   const [forceRefreshClusters, setForceRefreshClusters] = useState(false);
   const [ghRedirect, setGhRedirect] = useState(false);
@@ -364,6 +367,9 @@ const Home: React.FC<Props> = (props) => {
     pushFiltered(props, "/dashboard", []);
   };
 
+  const showCardBanner = true;
+  const trialExpired = true;
+
   const { cluster, baseRoute } = props.match.params as any;
   const { hasPaymentEnabled } = checkIfProjectHasPayment();
   const { plan } = useCustomerPlan();
@@ -376,7 +382,43 @@ const Home: React.FC<Props> = (props) => {
       theme={currentProject?.simplified_view_enabled ? midnight : standard}
     >
       <DeploymentTargetProvider>
-        <StyledHome>
+        <StyledHome showCardBanner={showCardBanner}>
+          {!currentProject?.sandbox_enabled && showCardBanner && (
+            <>
+              <GlobalBanner>
+                <i className="material-icons-round">warning</i>
+                Please
+                <Spacer width="5px" inline />
+                <Link
+                  hasunderline
+                  onClick={() => {
+                    setShowBillingModal(true);
+                  }}
+                >
+                  connect a valid payment method
+                </Link>
+                . Your project has 127 free days remaining.
+              </GlobalBanner>
+              {!trialExpired && showBillingModal && (
+                <BillingModal
+                  back={() => {
+                    setShowBillingModal(false);
+                  }}
+                  onCreate={async () => {
+                    setShowBillingModal(false);
+                  }}
+                />
+              )}
+              {trialExpired && (
+                <BillingModal
+                  trialExpired
+                  onCreate={async () => {
+                    setShowBillingModal(false);
+                  }}
+                />
+              )}
+            </>
+          )}
           <ModalHandler setRefreshClusters={setForceRefreshClusters} />
           {currentOverlay &&
             createPortal(
@@ -627,9 +669,10 @@ const GlobalBanner = styled.div`
   z-index: 999;
   position: fixed;
   top: 0;
+  color: #fefefe;
   left: 0;
   height: 35px;
-  background: #263061;
+  background: #4752ba;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -640,6 +683,12 @@ const GlobalBanner = styled.div`
     height: 16px;
     margin-right: 10px;
   }
+
+  > i {
+    margin-right: 10px;
+    font-size: 16px;
+    opacity: 0.8;
+  }
 `;
 
 const ViewWrapper = styled.div`
@@ -664,13 +713,16 @@ const DashboardWrapper = styled.div`
   height: fit-content;
 `;
 
-const StyledHome = styled.div`
+const StyledHome = styled.div<{
+  showCardBanner: boolean;
+}>`
   width: 100vw;
   height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
   margin: 0;
+  padding-top: ${(props) => (props.showCardBanner ? "35px" : "0")};
   user-select: none;
   display: flex;
   justify-content: center;

dashboard/src/main/home/modals/BillingModal.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 
@@ -8,15 +8,20 @@ import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 import { usePublishableKey } from "lib/hooks/useStripe";
 
+import { Context } from "shared/Context";
+
 import PaymentSetupForm from "./PaymentSetupForm";
 
 const BillingModal = ({
   back,
   onCreate,
+  trialExpired,
 }: {
-  back: (value: React.SetStateAction<boolean>) => void;
+  back?: (value: React.SetStateAction<boolean>) => void;
   onCreate: () => Promise<void>;
+  trialExpired?: boolean;
 }) => {
+  const { currentProject } = useContext(Context);
   const { publishableKey } = usePublishableKey();
   const stripePromise = loadStripe(publishableKey);
 
@@ -44,20 +49,38 @@ const BillingModal = ({
   return (
     <Modal closeModal={back}>
       <div id="checkout">
-        <Text size={16}>Add payment method</Text>
-        <Spacer y={1} />
-        <Text color="helper">
-          <Text style={{ fontWeight: 500 }}>
-            You will not be charged until you have an app deployed and have run
-            out of credits.
-          </Text>{" "}
-          A payment method is required to begin deploying applications on
-          Porter. You can learn more about our pricing{" "}
-          <Link target="_blank" to="https://porter.run/pricing">
-            here
-          </Link>
+        <Text size={16}>
+          {trialExpired
+            ? "Your Porter trial has expired"
+            : "Add payment method"}
         </Text>
         <Spacer y={1} />
+        {currentProject?.sandbox_enabled ? (
+          <Text color="helper">
+            <Text style={{ fontWeight: 500 }}>
+              You will not be charged until you have an app deployed and have
+              run out of credits.
+            </Text>{" "}
+            A payment method is required to begin deploying applications on
+            Porter. You can learn more about our pricing{" "}
+            <Link target="_blank" to="https://porter.run/pricing">
+              here
+            </Link>
+          </Text>
+        ) : (
+          <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. `
+              : "Link a payment method to your Porter project."}
+            <br />
+            <br />
+            {`You can learn more about our pricing under "For Businesses" `}
+            <Link target="_blank" to="https://porter.run/pricing">
+              here
+            </Link>
+          </Text>
+        )}
+        <Spacer y={1} />
         <Elements
           stripe={stripePromise}
           options={options}