Correctly check for sandbox on apps page, fix relative date functions (#4584)

dashboard/src/main/home/Home.tsx

@@ -24,7 +24,9 @@ import { fakeGuardedRoute } from "shared/auth/RouteGuard";
 import { Context } from "shared/Context";
 import DeploymentTargetProvider from "shared/DeploymentTargetContext";
 import { pushFiltered, pushQueryParams, type PorterUrl } from "shared/routing";
-import { relativeDate, timeFrom } from "shared/string_utils";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
 import midnight from "shared/themes/midnight";
 import standard from "shared/themes/standard";
 import {
@@ -66,6 +68,8 @@ import Onboarding from "./onboarding/Onboarding";
 import ProjectSettings from "./project-settings/ProjectSettings";
 import Sidebar from "./sidebar/Sidebar";
 
+dayjs.extend(relativeTime);
+
 // Guarded components
 const GuardedProjectSettings = fakeGuardedRoute("settings", "", [
   "get",
@@ -377,13 +381,8 @@ const Home: React.FC<Props> = (props) => {
     if (timestamp === "") {
       return true;
     }
-
-    const diff = timeFrom(timestamp);
-    if (diff.when === "future") {
-      return false;
-    }
-
-    return true;
+    const timestampDate = dayjs(timestamp);
+    return timestampDate.isBefore(dayjs(new Date()));
   };
 
   const showCardBanner = !hasPaymentEnabled;
@@ -424,7 +423,7 @@ const Home: React.FC<Props> = (props) => {
                       connect a valid payment method
                     </Link>
                     . Your free trial is ending {" "}
-                    {relativeDate(plan.trial_info.ending_before, true)}.
+                    {dayjs().to(dayjs(plan.trial_info.ending_before))}
                   </GlobalBanner>
                 )}
                 {!trialExpired && showBillingModal && (

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

@@ -256,7 +256,7 @@ const Apps: React.FC = () => {
               Get started by creating an application.
             </Text>
             <Spacer y={1} />
-            {currentProject?.billing_enabled && !hasPaymentEnabled ? (
+            {currentProject?.sandbox_enabled && currentProject?.billing_enabled && !hasPaymentEnabled ? (
               <Button
                 alt
                 onClick={() => {
@@ -287,7 +287,7 @@ const Apps: React.FC = () => {
                 </Button>
               </PorterLink>
             )}
-            {showBillingModal && (
+            {currentProject?.sandbox_enabled && showBillingModal && (
               <BillingModal
                 back={() => {
                   setShowBillingModal(false);

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

@@ -436,7 +436,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
       let stringifiedJson = "unable to stringify errors";
       try {
         stringifiedJson = JSON.stringify(errors);
-      } catch (e) {}
+      } catch (e) { }
       void updateAppStep({
         step: "stack-launch-failure",
         errorMessage: `Form validation error (visible to user): ${errorMessage}. Stringified JSON errors (invisible to user): ${stringifiedJson}`,
@@ -545,8 +545,8 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
                     <Text
                       color={
                         isNameHighlight &&
-                        porterAppFormMethods.getValues("app.name.value")
-                          .length > 0
+                          porterAppFormMethods.getValues("app.name.value")
+                            .length > 0
                           ? "#FFCC00"
                           : "helper"
                       }
@@ -681,9 +681,8 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
                             }
                           >
                             {detectedServices.count > 0
-                              ? `Detected ${detectedServices.count} service${
-                                  detectedServices.count > 1 ? "s" : ""
-                                } from porter.yaml.`
+                              ? `Detected ${detectedServices.count} service${detectedServices.count > 1 ? "s" : ""
+                              } from porter.yaml.`
                               : `Could not detect any services from porter.yaml. Make sure it exists in the root of your repo.`}
                           </Text>
                         </AppearingDiv>
@@ -778,7 +777,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
           }}
         />
       )}
-      {currentProject?.billing_enabled && !hasPaymentEnabled && (
+      {currentProject?.sandbox_enabled && currentProject?.billing_enabled && !hasPaymentEnabled && (
         <BillingModal
           back={() => {
             history.push("/apps");

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

@@ -17,7 +17,8 @@ import {
   usePorterCredits,
   useSetDefaultPaymentMethod,
 } from "lib/hooks/useStripe";
-import { relativeDate } from "shared/string_utils";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
 
 import { Context } from "shared/Context";
 import cardIcon from "assets/credit-card.svg";
@@ -27,6 +28,8 @@ import trashIcon from "assets/trash.png";
 import BillingModal from "../modals/BillingModal";
 import Bars from "./Bars";
 
+dayjs.extend(relativeTime);
+
 function BillingPage(): JSX.Element {
   const { setCurrentOverlay } = useContext(Context);
   const [shouldCreate, setShouldCreate] = useState(false);
@@ -233,7 +236,7 @@ function BillingPage(): JSX.Element {
                         plan.trial_info.ending_before !== "" ? (
                         <Text>
                           Free trial ends{" "}
-                          {relativeDate(plan.trial_info.ending_before, true)}
+                          {dayjs().to(dayjs(plan.trial_info.ending_before))}
                         </Text>
                       ) : (
                         <Text>Started on {readableDate(plan.starting_on)}</Text>