From 1b4292c68b6f2323b3f77803149d0487c1c8249a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daphn=C3=A9=20Popin?= <PopDaph@users.noreply.github.com>
Date: Mon, 25 Mar 2024 12:19:19 +0100
Subject: [PATCH] Price Plans: Display Free Trial & cleanup (#4423)

* Price Plans: Display Free Trial & cleanup

* Fix button padding

* Fix grandfathered see the Price table on subscription page
---
 front/components/PlansTables.tsx           | 18 +++++++++++++-----
 front/pages/index.tsx                      | 17 +++++++++++++++++
 front/pages/w/[wId]/subscription/index.tsx |  4 ++--
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/front/components/PlansTables.tsx b/front/components/PlansTables.tsx
index 275a9444f6c8..2c2508e2343a 100644
--- a/front/components/PlansTables.tsx
+++ b/front/components/PlansTables.tsx
@@ -189,18 +189,26 @@ export function ProPriceTable({
           />
         )
       )}
-      <PriceTable.ActionContainer>
-        {plan && plan.code !== PRO_PLAN_SEAT_29_CODE && (
+
+      {display === "landing" && (
+        <PriceTable.ActionContainer>
+          <div className="text-base font-bold text-action-400">
+            Try it for free for 2 weeks
+          </div>
+        </PriceTable.ActionContainer>
+      )}
+      {onClick && (!plan || plan.code !== PRO_PLAN_SEAT_29_CODE) && (
+        <PriceTable.ActionContainer>
           <Button
             variant="primary"
             size={biggerButtonSize}
             label="Start now"
             icon={RocketIcon}
-            disabled={isProcessing || plan.code === PRO_PLAN_SEAT_29_CODE}
+            disabled={isProcessing}
             onClick={onClick}
           />
-        )}
-      </PriceTable.ActionContainer>
+        </PriceTable.ActionContainer>
+      )}
     </PriceTable>
   );
 }
diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index 92cdd11e1421..7899159c93aa 100644
--- a/front/pages/index.tsx
+++ b/front/pages/index.tsx
@@ -787,16 +787,33 @@ export default function Home({
                 size="xs"
                 className="lg:hidden"
                 isTabs
+                onClickProPlan={() =>
+                  (window.location.href = `/api/auth/login?returnTo=${getReturnToUrl(
+                    router.query
+                  )}`)
+                }
+                onClickEnterprisePlan={() => setShowContactUsDrawer(true)}
               />
               <PricePlans
                 display="landing"
                 size="xs"
                 className="hidden lg:flex xl:hidden"
+                onClickProPlan={() =>
+                  (window.location.href = `/api/auth/login?returnTo=${getReturnToUrl(
+                    router.query
+                  )}`)
+                }
+                onClickEnterprisePlan={() => setShowContactUsDrawer(true)}
               />
               <PricePlans
                 display="landing"
                 size="sm"
                 className="hidden xl:flex"
+                onClickProPlan={() =>
+                  (window.location.href = `/api/auth/login?returnTo=${getReturnToUrl(
+                    router.query
+                  )}`)
+                }
                 onClickEnterprisePlan={() => setShowContactUsDrawer(true)}
               />
             </div>
diff --git a/front/pages/w/[wId]/subscription/index.tsx b/front/pages/w/[wId]/subscription/index.tsx
index 21a5748bd393..fe6411d97222 100644
--- a/front/pages/w/[wId]/subscription/index.tsx
+++ b/front/pages/w/[wId]/subscription/index.tsx
@@ -423,7 +423,7 @@ export default function Subscription({
                         onClickProPlan={onClickProPlan}
                         onClickEnterprisePlan={onClickEnterprisePlan}
                         isProcessing={isProcessing}
-                        display="landing"
+                        display="subscribe"
                       />
                       <PricePlans
                         size="xs"
@@ -433,7 +433,7 @@ export default function Subscription({
                         onClickProPlan={onClickProPlan}
                         onClickEnterprisePlan={onClickEnterprisePlan}
                         isProcessing={isProcessing}
-                        display="landing"
+                        display="subscribe"
                       />
                     </div>
                   </div>