chore: add launch and pricing ui tweaks (#2782)

Co-authored-by: Matti Nannt <mail@matthiasnannt.com>

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/billing/components/PricingTable.tsx

@@ -10,6 +10,7 @@ import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { CLOUD_PRICING_DATA } from "@formbricks/ee/billing/lib/constants";
 import { cn } from "@formbricks/lib/cn";
+import { capitalizeFirstLetter } from "@formbricks/lib/utils/strings";
 import { TOrganization, TOrganizationBillingPeriod } from "@formbricks/types/organizations";
 import { Badge } from "@formbricks/ui/Badge";
 import { BillingSlider } from "@formbricks/ui/BillingSlider";
@@ -131,8 +132,8 @@ export const PricingTable = ({
       <div className="flex flex-col gap-8">
         <div className="flex flex-col">
           <div className="flex w-full">
-            <h2 className="mr-2 inline-flex w-full text-2xl font-bold text-slate-700">
-              Current Plan: {organization.billing.plan}
+            <h2 className="mb-3 mr-2 inline-flex w-full text-2xl font-bold text-slate-700">
+              Current Plan: {capitalizeFirstLetter(organization.billing.plan)}
               {cancellingOn && (
                 <Badge
                   className="mx-2"
@@ -156,7 +157,7 @@ export const PricingTable = ({
             )}
           </div>
 
-          <div className="mt-2 flex flex-col rounded-lg border border-slate-300 bg-slate-100 py-4 capitalize shadow-sm dark:bg-slate-800">
+          <div className="mt-2 flex flex-col rounded-xl border border-slate-200 bg-white py-4 capitalize shadow-sm dark:bg-slate-800">
             <div
               className={cn(
                 "relative mx-8 mb-8 flex flex-col gap-4",
@@ -197,21 +198,26 @@ export const PricingTable = ({
           </div>
         </div>
 
-        <div className="mx-auto">
-          <div className="mb-4 flex w-fit max-w-xs cursor-pointer overflow-hidden rounded-lg border border-slate-200 p-1 lg:mb-0">
-            <div
-              className={`flex-1 rounded-md px-4 py-0.5 text-center ${
-                planPeriod === "monthly" ? "bg-slate-200 font-semibold" : "bg-transparent"
-              }`}
-              onClick={() => handleMonthlyToggle("monthly")}>
-              Monthly
+        <div className="mx-auto mb-12">
+          <div className="flex gap-x-2">
+            <div className="mb-4 flex w-fit max-w-xs cursor-pointer overflow-hidden rounded-lg border border-slate-200 p-1 lg:mb-0">
+              <div
+                className={`flex-1 rounded-md px-4 py-0.5 text-center ${
+                  planPeriod === "monthly" ? "bg-slate-200 font-semibold" : "bg-transparent"
+                }`}
+                onClick={() => handleMonthlyToggle("monthly")}>
+                Monthly
+              </div>
+              <div
+                className={`flex-1 rounded-md px-4 py-0.5 text-center ${
+                  planPeriod === "yearly" ? "bg-slate-200 font-semibold" : "bg-transparent"
+                }`}
+                onClick={() => handleMonthlyToggle("yearly")}>
+                Yearly
+              </div>
             </div>
-            <div
-              className={`flex-1 rounded-md px-4 py-0.5 text-center ${
-                planPeriod === "yearly" ? "bg-slate-200 font-semibold" : "bg-transparent"
-              }`}
-              onClick={() => handleMonthlyToggle("yearly")}>
-              Yearly
+            <div className="mb-4 flex w-fit items-center overflow-hidden rounded-lg border border-orange-200 bg-orange-50 px-3 py-1 text-orange-950 lg:mb-0">
+              50% off for 6 months with PH50 - 24h only 🔥
             </div>
           </div>
           <div className="relative mx-auto grid max-w-md grid-cols-1 gap-y-8 lg:mx-0 lg:-mb-14 lg:max-w-none lg:grid-cols-4">

packages/ee/billing/lib/constants.ts

@@ -28,13 +28,14 @@ export const CLOUD_PRICING_DATA = {
       id: "startup",
       featured: false,
       description: "Everything in Free with additional features.",
-      price: { monthly: "€59", yearly: "€49" },
+      offer: true,
+      price: { monthly: "€29", yearly: "€25" },
       mainFeatures: [
         "Everything in Free",
         "Remove Branding",
+        "Email Support",
         "2.000 Monthly Responses",
         "2.500 Monthly Identified Users",
-        "Email Support",
       ],
       href: "https://app.formbricks.com/auth/signup?plan=startup",
     },
@@ -43,7 +44,8 @@ export const CLOUD_PRICING_DATA = {
       id: "scale",
       featured: true,
       description: "Advanced features for scaling your business.",
-      price: { monthly: "€199", yearly: "€179" },
+      offer: true,
+      price: { monthly: "€99", yearly: "€89" },
       mainFeatures: [
         "Everything in Startup",
         "Team Access Roles",

packages/ui/Badge/index.tsx

@@ -21,14 +21,21 @@ export const Badge: React.FC<BadgeProps> = ({
 }) => {
   const bgColor = {
     warning: "bg-amber-100",
-    success: "bg-green-100",
+    success: "bg-emerald-100",
     error: "bg-red-100",
     gray: "bg-slate-100",
   };
 
+  const borderColor = {
+    warning: "border-amber-200",
+    success: "border-emerald-200",
+    error: "border-red-200",
+    gray: "border-slate-200",
+  };
+
   const textColor = {
     warning: "text-amber-800",
-    success: "text-green-800",
+    success: "text-emerald-800",
     error: "text-red-800",
     gray: "text-slate-600",
   };
@@ -44,8 +51,9 @@ export const Badge: React.FC<BadgeProps> = ({
   return (
     <span
       className={cn(
-        "inline-flex cursor-default items-center rounded-full font-medium",
+        "inline-flex cursor-default items-center rounded-full border font-medium",
         bgColor[type],
+        borderColor[type],
         textColor[type],
         padding[size],
         textSize,

packages/ui/PricingCard/index.tsx

@@ -15,6 +15,7 @@ interface PricingCardProps {
       monthly: string;
       yearly: string;
     };
+    offer?: boolean;
     mainFeatures: string[];
     href: string;
   };
@@ -119,21 +120,23 @@ export const PricingCard = ({
         "relative rounded-xl"
       )}>
       <div className="p-8 lg:pt-12 xl:p-10 xl:pt-14">
-        {isCurrentPlan && <Badge text="Current Plan" type="success" size="normal" />}
-
-        <h2
-          id={plan.id}
-          className={cn(
-            plan.featured ? "text-slate-900" : "text-slate-800",
-            "text-sm font-semibold leading-6"
-          )}>
-          {plan.name}
-        </h2>
+        <div className="flex gap-x-2">
+          <h2
+            id={plan.id}
+            className={cn(
+              plan.featured ? "text-slate-900" : "text-slate-800",
+              "text-sm font-semibold leading-6"
+            )}>
+            {plan.name}
+          </h2>
+          {isCurrentPlan && <Badge text="Current Plan" type="success" size="normal" />}
+        </div>
         <div className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between lg:flex-col lg:items-stretch">
           <div className="mt-2 flex items-center gap-x-4">
             <p
               className={cn(
                 plan.featured ? "text-slate-900" : "text-slate-800",
+                plan.offer ? "text-orange-600" : "",
                 "text-4xl font-bold tracking-tight"
               )}>
               {planPeriod === "monthly" ? plan.price.monthly : plan.price.yearly}