From 8b1718c9b34beece65c90eb89910640648716c7e Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Wed, 7 Feb 2024 10:10:34 +0100
Subject: [PATCH] chore: tweak billing page for clarity (#2028)

---
 .../billing/components/PricingTable.tsx       | 28 +++++++++++--------
 packages/ui/BillingSlider/index.tsx           |  8 +++---
 packages/ui/PricingCard/index.tsx             | 17 ++++-------
 3 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/billing/components/PricingTable.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/billing/components/PricingTable.tsx
index a342e9861a..f31ee788e9 100644
--- a/apps/web/app/(app)/environments/[environmentId]/settings/billing/components/PricingTable.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/settings/billing/components/PricingTable.tsx
@@ -112,7 +112,7 @@ export default function PricingTableComponent({
       unlimited: false,
     },
     {
-      title: "Multi Language Surveys",
+      title: "Multi-Language Surveys",
       comingSoon: true,
     },
     {
@@ -153,11 +153,15 @@ export default function PricingTableComponent({
       comingSoon: false,
     },
     {
-      title: "File Uploads upto 1 GB",
+      title: "File Uploads up to 1 GB",
+      comingSoon: false,
+    },
+    {
+      title: "Custom Domain",
       comingSoon: true,
     },
     {
-      title: "Multi Language Surveys",
+      title: "Multi-Language Surveys",
       comingSoon: true,
     },
   ];
@@ -255,11 +259,13 @@ export default function PricingTableComponent({
                 </defs>
               </svg>
               <div className="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-16 lg:text-left">
-                <h2 className="text-2xl font-bold text-white sm:text-3xl">Get the most out of Formbricks</h2>
+                <h2 className="text-2xl font-bold text-white sm:text-3xl">
+                  Unlock the full power of Formbricks, for free.
+                </h2>
                 <p className="text-md mt-6 leading-8 text-slate-300">
-                  Get access to all features by upgrading to a paid plan.
+                  Add a credit card, get access to all features.
                   <br />
-                  With our metered billing you will not be charged until you exceed the free tier limits.{" "}
+                  You will <b>not</b> be charged until you exceed the free tier limits.
                 </p>
               </div>
             </div>
@@ -267,8 +273,8 @@ export default function PricingTableComponent({
         )}
 
         <PricingCard
-          title={"Core & App Surveys"}
-          subtitle={"Get up to 250 free responses every month"}
+          title={"Formbricks Core & Surveys"}
+          subtitle={"Get 250 responses free every month"}
           featureName={ProductFeatureKeys[ProductFeatureKeys.inAppSurvey]}
           monthlyPrice={0}
           actionText={"Starting at"}
@@ -291,7 +297,7 @@ export default function PricingTableComponent({
         />
 
         <PricingCard
-          title={"Link Survey"}
+          title={"Link Survey Pro"}
           subtitle={"Link Surveys include unlimited surveys and responses for free."}
           featureName={ProductFeatureKeys[ProductFeatureKeys.linkSurvey]}
           monthlyPrice={30}
@@ -304,8 +310,8 @@ export default function PricingTableComponent({
         />
 
         <PricingCard
-          title={"User Targeting"}
-          subtitle={"Target up to 2500 users every month"}
+          title={"User Identification"}
+          subtitle={"Identify up to 2.500 users every month"}
           featureName={ProductFeatureKeys[ProductFeatureKeys.userTargeting]}
           monthlyPrice={0}
           actionText={"Starting at"}
diff --git a/packages/ui/BillingSlider/index.tsx b/packages/ui/BillingSlider/index.tsx
index 517bb472c7..a6d619a061 100644
--- a/packages/ui/BillingSlider/index.tsx
+++ b/packages/ui/BillingSlider/index.tsx
@@ -17,7 +17,7 @@ export const BillingSlider = React.forwardRef<React.ElementRef<typeof SliderPrim
       ref={ref}
       className={cn("relative flex w-full touch-none select-none items-center", className)}
       {...props}>
-      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-slate-300">
+      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-r-full bg-slate-300">
         <div
           style={{ width: `calc(${Math.min(value / max, 0.93) * 100}%)` }}
           className="absolute h-full bg-slate-800"></div>
@@ -26,12 +26,12 @@ export const BillingSlider = React.forwardRef<React.ElementRef<typeof SliderPrim
             width: `${((freeTierLimit - value) / max) * 100}%`,
             left: `${(value / max) * 100}%`,
           }}
-          className="absolute h-full bg-slate-500"></div>
+          className="absolute h-full bg-slate-400"></div>
       </SliderPrimitive.Track>
 
       <div
         style={{ left: `calc(${Math.min(value / max, 0.93) * 100}%)` }}
-        className="absolute mt-4 h-6 w-px bg-slate-500"></div>
+        className="absolute mt-4 h-6 w-px bg-slate-400"></div>
 
       <div
         style={{ left: `calc(${Math.min(value / max, 0.93) * 100}% + 0.5rem)` }}
@@ -48,7 +48,7 @@ export const BillingSlider = React.forwardRef<React.ElementRef<typeof SliderPrim
         className="absolute mt-4 h-6 w-px bg-slate-300"></div>
       <div
         style={{ left: `calc(${(freeTierLimit / max) * 100}% + 0.5rem)` }}
-        className="absolute mt-12 text-sm text-slate-700">
+        className="absolute mt-16 text-sm text-slate-700">
         <p className="text-xs">
           Free Tier Limit
           <br />
diff --git a/packages/ui/PricingCard/index.tsx b/packages/ui/PricingCard/index.tsx
index 5e176857f5..8d4c808554 100644
--- a/packages/ui/PricingCard/index.tsx
+++ b/packages/ui/PricingCard/index.tsx
@@ -66,7 +66,7 @@ export const PricingCard = ({
           <Badge text="Cancelling at End of this Month" size="normal" type="warning" />
         ) : null}
 
-        <p className=" whitespace-pre-wrap text-sm text-slate-600">{subtitle}</p>
+        <p className=" mt-1 whitespace-pre-wrap text-sm text-slate-600">{subtitle}</p>
 
         {metric && perMetricCharge && (
           <div className="rounded-xl bg-slate-100 py-4 dark:bg-slate-800">
@@ -95,9 +95,9 @@ export const PricingCard = ({
         <div className="flex py-3">
           <div className="w-3/5">
             {team.billing.features[featureNameKey].status === "inactive" && (
-              <p className=" whitespace-pre-wrap text-sm text-slate-600">
+              <p className="whitespace-pre-wrap text-sm leading-6 text-slate-600">
                 You&apos;re on the <b>Free plan</b> in {title}.<br />
-                Upgrade now to unlock the below features:
+                Upgrade now to unlock the following:
               </p>
             )}
 
@@ -118,8 +118,7 @@ export const PricingCard = ({
             </ul>
           </div>
 
-          <div className="w-1/5"></div>
-          <div className="w-1/5">
+          <div className="ml-6 flex w-2/5 flex-col items-end space-y-2">
             {!team.billing.features[featureNameKey].unlimited && (
               <div className="my-2">
                 {team.billing.features[featureNameKey].status !== "inactive" ? (
@@ -160,12 +159,8 @@ export const PricingCard = ({
               </div>
             )}
             {team.billing.features[featureNameKey].status === "inactive" && (
-              <Button
-                variant="darkCTA"
-                className="w-full justify-center py-2 text-white shadow-sm"
-                loading={loading}
-                onClick={() => onUpgrade()}>
-                Upgrade
+              <Button variant="darkCTA" loading={loading} onClick={() => onUpgrade()}>
+                Upgrade {title !== "Link Survey Pro" ? "for free" : "now"}
               </Button>
             )}
           </div>