From 7fc68609e68d38aadfda5c4e539ce9236dda6815 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@jamesritchie.co.uk>
Date: Thu, 4 Jul 2024 15:47:19 +0100
Subject: [PATCH] Show a prompt to upgrade to get staging in the new env var
 modal

---
 .../route.tsx                                 | 47 ++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx
index 8d485ea11..01c2b841d 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx
@@ -54,13 +54,14 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   try {
     const presenter = new EnvironmentVariablesPresenter();
-    const { environments } = await presenter.call({
+    const { environments, hasStaging } = await presenter.call({
       userId,
       projectSlug: projectParam,
     });
 
     return typedjson({
       environments,
+      hasStaging,
     });
   } catch (error) {
     throw new Response(undefined, {
@@ -164,7 +165,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 
 export default function Page() {
   const [isOpen, setIsOpen] = useState(false);
-  const { environments } = useTypedLoaderData<typeof loader>();
+  const { environments, hasStaging } = useTypedLoaderData<typeof loader>();
   const lastSubmission = useActionData();
   const navigation = useNavigation();
   const navigate = useNavigate();
@@ -229,26 +230,27 @@ export default function Page() {
                     variant="button"
                   />
                 ))}
-
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <TextLink
-                        to={v3BillingPath(organization)}
-                        className="flex w-fit cursor-pointer items-center gap-2 rounded border border-dashed border-charcoal-600 py-3 pl-3 pr-4 transition hover:border-charcoal-500 hover:bg-charcoal-850"
-                      >
-                        <LockClosedIcon className="size-4 text-charcoal-500" />
-                        <Paragraph className="mt-0.5 text-xs uppercase tracking-wide text-staging">
-                          Staging
-                        </Paragraph>
-                      </TextLink>
-                    </TooltipTrigger>
-                    <TooltipContent className="flex items-center gap-2">
-                      <LockOpenIcon className="size-4 text-indigo-500" />
-                      Upgrade your plan to add a Staging environment.
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
+                {!hasStaging && (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <TextLink
+                          to={v3BillingPath(organization)}
+                          className="flex w-fit cursor-pointer items-center gap-2 rounded border border-dashed border-charcoal-600 py-3 pl-3 pr-4 transition hover:border-charcoal-500 hover:bg-charcoal-850"
+                        >
+                          <LockClosedIcon className="size-4 text-charcoal-500" />
+                          <Paragraph className="mt-0.5 text-xs uppercase tracking-wide text-staging">
+                            Staging
+                          </Paragraph>
+                        </TextLink>
+                      </TooltipTrigger>
+                      <TooltipContent className="flex items-center gap-2">
+                        <LockOpenIcon className="size-4 text-indigo-500" />
+                        Upgrade your plan to add a Staging environment.
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
               </div>
               <FormError id={environmentIds.errorId}>{environmentIds.error}</FormError>
               <Hint>
@@ -309,6 +311,7 @@ export default function Page() {
                   Cancel
                 </LinkButton>
               }
+              className="mt-2"
             />
           </Fieldset>
         </Form>