minor edit (#4440)

Co-authored-by: jusrhee <justin@porter.run>
Co-authored-by: sunguroku <trevor@porter.run>

dashboard/src/main/home/app-dashboard/create-app/CreateApp.tsx

@@ -22,6 +22,7 @@ import Text from "components/porter/Text";
 import VerticalSteps from "components/porter/VerticalSteps";
 import DashboardHeader from "main/home/cluster-dashboard/DashboardHeader";
 import { useClusterContext } from "main/home/infrastructure-dashboard/ClusterContextProvider";
+import BillingModal from "main/home/modals/BillingModal";
 import { useAppAnalytics } from "lib/hooks/useAppAnalytics";
 import { useAppValidation } from "lib/hooks/useAppValidation";
 import {
@@ -31,6 +32,7 @@ import {
 } from "lib/hooks/useDeploymentTarget";
 import { useIntercom } from "lib/hooks/useIntercom";
 import { usePorterYaml } from "lib/hooks/usePorterYaml";
+import { checkIfProjectHasPayment } from "lib/hooks/useStripe";
 import {
   porterAppFormValidator,
   type PorterAppFormData,
@@ -71,6 +73,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
     return /^[a-z0-9-]{1,63}$/.test(value);
   };
   const [isNameHighlight, setIsNameHighlight] = React.useState(false);
+  const { hasPaymentEnabled } = checkIfProjectHasPayment();
 
   const { showIntercomWithMessage } = useIntercom();
 
@@ -757,6 +760,16 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
           }}
         />
       )}
+      {!hasPaymentEnabled && (
+        <BillingModal
+          back={() => {
+            history.push("/apps");
+          }}
+          onCreate={() => {
+            history.push("/apps/new/app");
+          }}
+        />
+      )}
     </CenterWrapper>
   );
 };

dashboard/src/main/home/cluster-dashboard/preview-environments/v2/PreviewEnvs.tsx

@@ -62,9 +62,9 @@ const PreviewEnvs: React.FC = () => {
             apps immediately.
           </Text>
           <Spacer y={1} />
-          <PorterLink to="https://docs.porter.run/other/eject">
+          <PorterLink to="https://docs.porter.run/other/eject" target="_blank">
             <Button alt height="35px">
-              Request ejection
+             Eject to AWS, Azure, or GCP.
             </Button>
           </PorterLink>
         </DashboardPlaceholder>

dashboard/src/main/home/compliance-dashboard/ComplianceDashboard.tsx

@@ -54,9 +54,9 @@ const ComplianceDashboard: React.FC = () => {
               dashboard.
             </Text>
             <Spacer y={1} />
-            <PorterLink to="https://docs.porter.run/other/eject">
+            <PorterLink to="https://docs.porter.run/other/eject" target="_blank">
               <Button alt height="35px">
-                Request ejection
+                Eject to AWS, Azure, or GCP.
               </Button>
             </PorterLink>
           </DashboardPlaceholder>

dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx

@@ -94,9 +94,9 @@ const DatabaseDashboard: React.FC = () => {
             datastores immediately.
           </Text>
           <Spacer y={1} />
-          <PorterLink to="https://docs.porter.run/other/eject">
+          <PorterLink to="https://docs.porter.run/other/eject" target="_blank">
             <Button alt height="35px">
-              Request ejection
+             Eject to AWS, Azure, or GCP.
             </Button>
           </PorterLink>
         </DashboardPlaceholder>

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

@@ -42,7 +42,7 @@ const BillingModal = ({ back, onCreate }) => {
   return (
     <Modal closeModal={back}>
       <div id="checkout">
-        <Text size={16}>Add Payment Method</Text>
+        <Text size={16}>Add payment method</Text>
         <Spacer y={1} />
         <Text color="helper">
           A payment method is required to begin deploying applications on

dashboard/src/main/home/project-settings/ProjectSettings.tsx

@@ -75,7 +75,10 @@ function ProjectSettings(props: any) {
 
     const tabOpts = [];
     tabOpts.push({ value: "manage-access", label: "Manage access" });
-    tabOpts.push({ value: "metadata", label: "Metadata" });
+
+    if (!currentProject?.sandbox_enabled) {
+      tabOpts.push({ value: "metadata", label: "Metadata" });
+    }
 
     if (props.isAuthorized("settings", "", ["get", "delete"])) {
       if (currentProject?.api_tokens_enabled) {