billng modal

dashboard/src/main/home/app-dashboard/apps/Apps.tsx

@@ -18,6 +18,7 @@ import Text from "components/porter/Text";
 import Toggle from "components/porter/Toggle";
 import DashboardHeader from "main/home/cluster-dashboard/DashboardHeader";
 import DeleteEnvModal from "main/home/cluster-dashboard/preview-environments/v2/DeleteEnvModal";
+import BillingModal from "main/home/modals/BillingModal";
 import { clientAddonFromProto, type ClientAddon } from "lib/addons";
 import { useAppAnalytics } from "lib/hooks/useAppAnalytics";
 
@@ -246,7 +247,13 @@ const Apps: React.FC = () => {
             </PorterLink>
           )}
           {showBillingModal && (
-            <Modal closeModal={() => setShowBillingModal(false)}>hello</Modal>
+            <BillingModal
+              back={() => setShowBillingModal(false)}
+              onCreate={() => {
+                history.push("/apps/new/app");
+              }}
+              project_id={currentProject?.id ?? -1}
+            />
           )}
         </DashboardPlaceholder>
       );

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

@@ -4,6 +4,10 @@ import { loadStripe } from "@stripe/stripe-js";
 import styled from "styled-components";
 
 import Heading from "components/form-components/Heading";
+import Link from "components/porter/Link";
+import Modal from "components/porter/Modal";
+import Spacer from "components/porter/Spacer";
+import Text from "components/porter/Text";
 
 import backArrow from "assets/back_arrow.png";
 
@@ -34,14 +38,18 @@ const BillingModal = ({ project_id, back, onCreate }) => {
   };
 
   return (
-    <>
+    <Modal closeModal={back}>
       <div id="checkout">
-        <ControlRow>
-          <Heading isAtTop={true}>Add Payment Method</Heading>
-          <BackButton onClick={back}>
-            <BackButtonImg src={backArrow} />
-          </BackButton>
-        </ControlRow>
+        <Text size={16}>Add Payment Method</Text>
+        <Spacer y={1} />
+        <Text color="helper">
+          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>
+        <Spacer y={1} />
         <Elements
           stripe={stripePromise}
           options={options}
@@ -53,7 +61,7 @@ const BillingModal = ({ project_id, back, onCreate }) => {
           ></PaymentSetupForm>
         </Elements>
       </div>
-    </>
+    </Modal>
   );
 };
 

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

@@ -6,7 +6,9 @@ import {
 } from "@stripe/react-stripe-js";
 import styled from "styled-components";
 
+import Button from "components/porter/Button";
 import Error from "components/porter/Error";
+import Spacer from "components/porter/Spacer";
 import SaveButton from "components/SaveButton";
 import { useCreatePaymentMethod } from "lib/hooks/useStripe";
 
@@ -39,6 +41,7 @@ const PaymentSetupForm = ({
 
     // Create the setup intent in the server
     const clientSecret = await createPaymentMethod();
+    console.log(clientSecret);
 
     // Finally, confirm with Stripe so the payment method is saved
     const { error } = await stripe.confirmSetup({
@@ -57,12 +60,10 @@ const PaymentSetupForm = ({
   return (
     <form>
       <PaymentElement />
-      <SubmitButton
-        className="submit-button"
-        text={"Add Payment Method"}
-        disabled={!stripe || loading}
-        onClick={handleSubmit}
-      ></SubmitButton>
+      <Spacer y={1} />
+      <Button disabled={!stripe || loading} onClick={handleSubmit}>
+        Add payment method
+      </Button>
       {errorMessage && <Error message={errorMessage}></Error>}
     </form>
   );