[WEB-3854] feat: billing and plans new design (#6920)

* [WEB-3854] feat: billing and plans new design

* chore: add missing styles

web/ce/components/workspace/billing/comparison/frequency-toggle.tsx

@@ -0,0 +1,63 @@
+import { FC } from "react";
+// plane imports
+import { observer } from "mobx-react";
+import { EProductSubscriptionEnum } from "@plane/constants";
+import { TBillingFrequency } from "@plane/types";
+import { calculateYearlyDiscount, cn } from "@plane/utils";
+// plane web imports
+import { getDiscountPillStyle, getSubscriptionBackgroundColor } from "@/components/workspace/billing/subscription";
+
+type TPlanFrequencyToggleProps = {
+  subscriptionType: EProductSubscriptionEnum;
+  monthlyPrice: number;
+  yearlyPrice: number;
+  selectedFrequency: TBillingFrequency;
+  setSelectedFrequency: (frequency: TBillingFrequency) => void;
+};
+
+export const PlanFrequencyToggle: FC<TPlanFrequencyToggleProps> = observer((props) => {
+  const { subscriptionType, monthlyPrice, yearlyPrice, selectedFrequency, setSelectedFrequency } = props;
+  // derived values
+  const yearlyDiscount = calculateYearlyDiscount(monthlyPrice, yearlyPrice);
+
+  return (
+    <div className="flex w-full items-center cursor-pointer py-1 animate-slide-up">
+      <div
+        className={cn(
+          "flex space-x-1 rounded-md bg-custom-primary-200/10 p-0.5 w-full",
+          getSubscriptionBackgroundColor(subscriptionType, "50")
+        )}
+      >
+        <div
+          key="month"
+          onClick={() => setSelectedFrequency("month")}
+          className={cn(
+            "w-full rounded px-1 py-0.5 text-xs font-medium leading-5 text-center",
+            selectedFrequency === "month"
+              ? "bg-custom-background-100 text-custom-text-100 shadow"
+              : "text-custom-text-300 hover:text-custom-text-200"
+          )}
+        >
+          Monthly
+        </div>
+        <div
+          key="year"
+          onClick={() => setSelectedFrequency("year")}
+          className={cn(
+            "w-full rounded px-1 py-0.5 text-xs font-medium leading-5 text-center",
+            selectedFrequency === "year"
+              ? "bg-custom-background-100 text-custom-text-100 shadow"
+              : "text-custom-text-300 hover:text-custom-text-200"
+          )}
+        >
+          Yearly
+          {yearlyDiscount > 0 && (
+            <span className={cn(getDiscountPillStyle(subscriptionType), "rounded-full px-1 py-0.5 ml-1 text-[9px]")}>
+              -{yearlyDiscount}%
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});

web/ce/components/workspace/billing/comparison/plan-detail.tsx

@@ -0,0 +1,103 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import {
+  EProductSubscriptionEnum,
+  SUBSCRIPTION_REDIRECTION_URLS,
+  SUBSCRIPTION_WITH_BILLING_FREQUENCY,
+  TALK_TO_SALES_URL,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TBillingFrequency } from "@plane/types";
+import { getButtonStyling } from "@plane/ui";
+import { cn, getSubscriptionName } from "@plane/utils";
+// constants
+import { getUpgradeButtonStyle } from "@/components/workspace/billing/subscription";
+import { TPlanDetail } from "@/constants/plans";
+// components
+import { PlanFrequencyToggle } from "./frequency-toggle";
+
+type TPlanDetailProps = {
+  subscriptionType: EProductSubscriptionEnum;
+  planDetail: TPlanDetail;
+  billingFrequency: TBillingFrequency | undefined;
+  setBillingFrequency: (frequency: TBillingFrequency) => void;
+};
+
+const COMMON_BUTTON_STYLE =
+  "relative inline-flex items-center justify-center w-full px-4 py-1.5 text-xs font-medium rounded-lg focus:outline-none transition-all duration-300 animate-slide-up";
+
+export const PlanDetail: FC<TPlanDetailProps> = observer((props) => {
+  const { subscriptionType, planDetail, billingFrequency, setBillingFrequency } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // subscription details
+  const subscriptionName = getSubscriptionName(subscriptionType);
+  const isSubscriptionActive = planDetail.isActive;
+  // pricing details
+  const displayPrice = billingFrequency === "month" ? planDetail.monthlyPrice : planDetail.yearlyPrice;
+  const pricingDescription = isSubscriptionActive ? "a user per month" : "Quote on request";
+  const pricingSecondaryDescription =
+    billingFrequency === "month"
+      ? planDetail.monthlyPriceSecondaryDescription
+      : planDetail.yearlyPriceSecondaryDescription;
+  // helper styles
+  const upgradeButtonStyle = getUpgradeButtonStyle(subscriptionType, false) ?? getButtonStyling("primary", "lg");
+
+  const handleRedirection = () => {
+    const frequency = billingFrequency ?? "year";
+    // Get the redirection URL based on the subscription type and billing frequency
+    const redirectUrl = SUBSCRIPTION_REDIRECTION_URLS[subscriptionType][frequency] ?? TALK_TO_SALES_URL;
+    // Open the URL in a new tab
+    window.open(redirectUrl, "_blank");
+  };
+
+  return (
+    <div className="flex flex-col justify-between col-span-1 p-3 space-y-0.5">
+      {/* Plan name and pricing section */}
+      <div className="flex flex-col items-start">
+        <div className="flex w-full gap-2 items-center text-xl font-medium">
+          <span className="transition-all duration-300">{subscriptionName}</span>
+          {subscriptionType === EProductSubscriptionEnum.PRO && (
+            <span className="px-2 rounded text-custom-primary-200 bg-custom-primary-100/20 text-xs">Popular</span>
+          )}
+        </div>
+        <div className="flex gap-x-2 items-start text-custom-text-300 pb-1 transition-all duration-300 animate-slide-up">
+          {isSubscriptionActive && displayPrice !== undefined && (
+            <span className="text-custom-text-100 text-2xl font-semibold transition-all duration-300">
+              {"$" + displayPrice}
+            </span>
+          )}
+          <div className="pt-2">
+            {pricingDescription && <div className="transition-all duration-300">{pricingDescription}</div>}
+            {pricingSecondaryDescription && (
+              <div className="text-xs text-custom-text-400 transition-all duration-300">
+                {pricingSecondaryDescription}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Billing frequency toggle */}
+      {SUBSCRIPTION_WITH_BILLING_FREQUENCY.includes(subscriptionType) && billingFrequency && (
+        <div className="h-8 py-0.5">
+          <PlanFrequencyToggle
+            subscriptionType={subscriptionType}
+            monthlyPrice={planDetail.monthlyPrice || 0}
+            yearlyPrice={planDetail.yearlyPrice || 0}
+            selectedFrequency={billingFrequency}
+            setSelectedFrequency={setBillingFrequency}
+          />
+        </div>
+      )}
+
+      {/* Subscription button */}
+      <div className={cn("flex flex-col gap-1 py-3 items-start transition-all duration-300")}>
+        <button onClick={handleRedirection} className={cn(upgradeButtonStyle, COMMON_BUTTON_STYLE)}>
+          {isSubscriptionActive ? `Upgrade to ${subscriptionName}` : t("common.upgrade_cta.talk_to_sales")}
+        </button>
+      </div>
+    </div>
+  );
+});

web/ce/components/workspace/billing/comparison/root.tsx

@@ -0,0 +1,61 @@
+import { forwardRef } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EProductSubscriptionEnum } from "@plane/constants";
+import { TBillingFrequency } from "@plane/types";
+// components
+import { PlansComparisonBase, shouldRenderPlanDetail } from "@/components/workspace/billing/comparison/base";
+import { PLANE_PLANS, TPlanePlans } from "@/constants/plans";
+// plane web imports
+import { PlanDetail } from "./plan-detail";
+
+type TPlansComparisonProps = {
+  isScrolled: boolean;
+  isCompareAllFeaturesSectionOpen: boolean;
+  getBillingFrequency: (subscriptionType: EProductSubscriptionEnum) => TBillingFrequency | undefined;
+  setBillingFrequency: (subscriptionType: EProductSubscriptionEnum, frequency: TBillingFrequency) => void;
+  setIsCompareAllFeaturesSectionOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsScrolled: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const PlansComparison = observer(
+  forwardRef<HTMLDivElement, TPlansComparisonProps>(function PlansComparison(
+    props: TPlansComparisonProps,
+    ref: React.Ref<HTMLDivElement>
+  ) {
+    const {
+      isScrolled,
+      isCompareAllFeaturesSectionOpen,
+      getBillingFrequency,
+      setBillingFrequency,
+      setIsCompareAllFeaturesSectionOpen,
+      setIsScrolled,
+    } = props;
+    // plan details
+    const { planDetails } = PLANE_PLANS;
+
+    return (
+      <PlansComparisonBase
+        ref={ref}
+        planeDetails={Object.entries(planDetails).map(([planKey, plan]) => {
+          const currentPlanKey = planKey as TPlanePlans;
+          if (!shouldRenderPlanDetail(currentPlanKey)) return null;
+          return (
+            <PlanDetail
+              key={planKey}
+              subscriptionType={plan.id}
+              planDetail={plan}
+              billingFrequency={getBillingFrequency(plan.id)}
+              setBillingFrequency={(frequency) => setBillingFrequency(plan.id, frequency)}
+            />
+          );
+        })}
+        isSelfManaged
+        isScrolled={isScrolled}
+        isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
+        setIsCompareAllFeaturesSectionOpen={setIsCompareAllFeaturesSectionOpen}
+        setIsScrolled={setIsScrolled}
+      />
+    );
+  })
+);

web/ce/components/workspace/billing/root.tsx

@@ -1,27 +1,100 @@
-import { MARKETING_PRICING_PAGE_LINK } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/ui";
+import { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import {
+  DEFAULT_PRODUCT_BILLING_FREQUENCY,
+  EProductSubscriptionEnum,
+  SUBSCRIPTION_WITH_BILLING_FREQUENCY,
+} from "@plane/constants";
+import { TBillingFrequency, TProductBillingFrequency } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { getSubscriptionTextColor } from "@/components/workspace/billing/subscription";
+// local imports
+import { PlansComparison } from "./comparison/root";
+
+export const BillingRoot = observer(() => {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isCompareAllFeaturesSectionOpen, setIsCompareAllFeaturesSectionOpen] = useState(false);
+  const [productBillingFrequency, setProductBillingFrequency] = useState<TProductBillingFrequency>(
+    DEFAULT_PRODUCT_BILLING_FREQUENCY
+  );
+
+  /**
+   * Retrieves the billing frequency for a given subscription type
+   * @param {EProductSubscriptionEnum} subscriptionType - Type of subscription to get frequency for
+   * @returns {TBillingFrequency | undefined} - Billing frequency if subscription supports it, undefined otherwise
+   */
+  const getBillingFrequency = (subscriptionType: EProductSubscriptionEnum): TBillingFrequency | undefined =>
+    SUBSCRIPTION_WITH_BILLING_FREQUENCY.includes(subscriptionType)
+      ? productBillingFrequency[subscriptionType]
+      : undefined;
+
+  /**
+   * Updates the billing frequency for a specific subscription type
+   * @param {EProductSubscriptionEnum} subscriptionType - Type of subscription to update
+   * @param {TBillingFrequency} frequency - New billing frequency to set
+   * @returns {void}
+   */
+  const setBillingFrequency = (subscriptionType: EProductSubscriptionEnum, frequency: TBillingFrequency): void =>
+    setProductBillingFrequency({ ...productBillingFrequency, [subscriptionType]: frequency });
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleScroll = () => {
+      const scrollTop = container.scrollTop;
+      const isScrolled = isCompareAllFeaturesSectionOpen ? scrollTop > 0 : false;
+      setIsScrolled(isScrolled);
+    };
+
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [isCompareAllFeaturesSectionOpen]);
 
-export const BillingRoot = () => {
-  const { t } = useTranslation();
   return (
-    <section className="w-full overflow-y-auto">
+    <section className="relative size-full flex flex-col overflow-y-auto scrollbar-hide">
       <div>
-        <div className="flex  items-center border-b border-custom-border-100 pb-3.5">
-          <h3 className="text-xl font-medium">{t("workspace_settings.settings.billing_and_plans.title")}</h3>
+        <div className="flex items-center">
+          <h3 className="text-xl font-medium flex gap-4">Billing and plans</h3>
         </div>
       </div>
-      <div className="py-6">
-        <div>
-          <h4 className="text-md mb-1 leading-6">{t("workspace_settings.settings.billing_and_plans.current_plan")}</h4>
-          <p className="mb-3 text-sm text-custom-text-200">
-            {t("workspace_settings.settings.billing_and_plans.free_plan")}
-          </p>
-          <a href={MARKETING_PRICING_PAGE_LINK} target="_blank" rel="noreferrer">
-            <Button variant="neutral-primary">{t("workspace_settings.settings.billing_and_plans.view_plans")}</Button>
-          </a>
+
+      <div
+        className={cn(
+          "transition-all duration-500 ease-in-out will-change-[height,opacity]",
+          isScrolled ? "h-0 opacity-0 pointer-events-none" : "h-[300px] opacity-100"
+        )}
+      >
+        <div className="py-6">
+          <div className={cn("px-6 py-4 border border-custom-border-200 rounded-lg")}>
+            <div className="flex gap-2 font-medium items-center justify-between">
+              <div className="flex flex-col gap-1">
+                <h4
+                  className={cn("text-xl leading-6 font-bold", getSubscriptionTextColor(EProductSubscriptionEnum.FREE))}
+                >
+                  Community
+                </h4>
+                <div className="text-sm text-custom-text-200 font-medium">
+                  Unlimited projects, issues, cycles, modules, pages, and storage
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
+        <div className="text-xl font-semibold mt-3">All plans</div>
       </div>
+      <PlansComparison
+        ref={containerRef}
+        isScrolled={isScrolled}
+        isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
+        getBillingFrequency={getBillingFrequency}
+        setBillingFrequency={setBillingFrequency}
+        setIsCompareAllFeaturesSectionOpen={setIsCompareAllFeaturesSectionOpen}
+        setIsScrolled={setIsScrolled}
+      />
     </section>
   );
-};
+});