Move billing modal to page dashboard, add link to billing page

dashboard/src/main/home/Home.tsx

@@ -221,7 +221,7 @@ const Home: React.FC<Props> = (props) => {
       } else {
         setHasFinishedOnboarding(true);
       }
-    } catch (error) {}
+    } catch (error) { }
   };
 
   useEffect(() => {
@@ -428,32 +428,6 @@ const Home: React.FC<Props> = (props) => {
                     {dayjs().to(dayjs(plan.trial_info.ending_before))}
                   </GlobalBanner>
                 )}
-                {!trialExpired && showBillingModal && (
-                  <BillingModal
-                    back={() => {
-                      setShowBillingModal(false);
-                    }}
-                    onCreate={async () => {
-                      await refetchPaymentEnabled({
-                        throwOnError: false,
-                        cancelRefetch: false,
-                      });
-                      setShowBillingModal(false);
-                    }}
-                  />
-                )}
-                {trialExpired && (
-                  <BillingModal
-                    trialExpired
-                    onCreate={async () => {
-                      await refetchPaymentEnabled({
-                        throwOnError: false,
-                        cancelRefetch: false,
-                      });
-                      setShowBillingModal(false);
-                    }}
-                  />
-                )}
               </>
             )}
           <ModalHandler setRefreshClusters={setForceRefreshClusters} />
@@ -550,8 +524,8 @@ const Home: React.FC<Props> = (props) => {
 
               <Route path="/addons/new">
                 {currentProject?.capi_provisioner_enabled &&
-                currentProject?.simplified_view_enabled &&
-                currentProject?.beta_features_enabled ? (
+                  currentProject?.simplified_view_enabled &&
+                  currentProject?.beta_features_enabled ? (
                   <AddonTemplates />
                 ) : (
                   <LegacyNewAddOnFlow />
@@ -565,8 +539,8 @@ const Home: React.FC<Props> = (props) => {
               </Route>
               <Route path="/addons">
                 {currentProject?.capi_provisioner_enabled &&
-                currentProject?.simplified_view_enabled &&
-                currentProject?.beta_features_enabled ? (
+                  currentProject?.simplified_view_enabled &&
+                  currentProject?.beta_features_enabled ? (
                   <AddonDashboard />
                 ) : (
                   <LegacyAddOnDashboard />

dashboard/src/main/home/app-dashboard/AppDashboard.tsx

@@ -32,6 +32,9 @@ import time from "assets/time.png";
 import letter from "assets/vector.svg";
 
 import DashboardHeader from "../cluster-dashboard/DashboardHeader";
+import BillingModal from "../modals/BillingModal";
+import { checkIfProjectHasPayment, useCustomerPlan } from "lib/hooks/useStripe";
+import dayjs from "dayjs";
 
 type Props = {};
 
@@ -53,7 +56,7 @@ const namespaceBlacklist = [
   "monitoring",
 ];
 
-const AppDashboard: React.FC<Props> = ({}) => {
+const AppDashboard: React.FC<Props> = ({ }) => {
   const { currentProject, currentCluster, setFeaturePreview } =
     useContext(Context);
   const [apps, setApps] = useState([]);
@@ -66,6 +69,19 @@ const AppDashboard: React.FC<Props> = ({}) => {
   const [isLoading, setIsLoading] = useState(true);
   const [shouldLoadTime, setShouldLoadTime] = useState(true);
 
+  const { hasPaymentEnabled, refetchPaymentEnabled } =
+    checkIfProjectHasPayment();
+  const { plan } = useCustomerPlan();
+
+  const isTrialExpired = (timestamp: string): boolean => {
+    if (timestamp === "") {
+      return true;
+    }
+    const timestampDate = dayjs(timestamp);
+    return timestampDate.isBefore(dayjs(new Date()));
+  };
+  const trialExpired = plan !== null && plan && isTrialExpired(plan.trial_info.ending_before);
+
   const filteredApps = useMemo(() => {
     const filteredBySearch = search(apps ?? [], searchValue, {
       keys: ["name"],
@@ -368,6 +384,17 @@ const AppDashboard: React.FC<Props> = ({}) => {
           )}
         </>
       )}
+      {trialExpired && !hasPaymentEnabled && (
+        <BillingModal
+          trialExpired
+          onCreate={async () => {
+            await refetchPaymentEnabled({
+              throwOnError: false,
+              cancelRefetch: false,
+            });
+          }}
+        />
+      )}
       <Spacer y={5} />
     </StyledAppDashboard>
   );

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

@@ -87,6 +87,9 @@ const BillingModal = ({
                   })}>
                     Already redeemed your startup deal?
                   </Text>
+                  <Spacer y={0.5} />
+                  {"For more details on the current costs and usage of this project, visit the "}
+                  <Link to="/project-settings?selected_tab=billing">billing page.</Link>
                 </div>
               )
               : "Link a payment method to your Porter project."}