base

plane-src/apps/web/ce/components/workspace/billing/billing-actions-button.tsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+export type TBillingActionsButtonProps = {
+  canPerformWorkspaceAdminActions: boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const BillingActionsButton = observer(function BillingActionsButton(props: TBillingActionsButtonProps) {
+  return <></>;
+});

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

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { observer } from "mobx-react";
+import type { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
+import { calculateYearlyDiscount, cn } from "@plane/utils";
+
+type TPlanFrequencyToggleProps = {
+  subscriptionType: EProductSubscriptionEnum;
+  monthlyPrice: number;
+  yearlyPrice: number;
+  selectedFrequency: TBillingFrequency;
+  setSelectedFrequency: (frequency: TBillingFrequency) => void;
+};
+
+export const PlanFrequencyToggle = observer(function PlanFrequencyToggle(props: TPlanFrequencyToggleProps) {
+  const { monthlyPrice, yearlyPrice, selectedFrequency, setSelectedFrequency } = props;
+  // derived values
+  const yearlyDiscount = calculateYearlyDiscount(monthlyPrice, yearlyPrice);
+
+  return (
+    <div className="flex w-full cursor-pointer items-center py-1">
+      <div className="flex w-full space-x-1 rounded-md bg-layer-3 p-0.5">
+        <button
+          type="button"
+          onClick={() => setSelectedFrequency("month")}
+          className={cn(
+            "w-full rounded-sm px-1 py-0.5 text-center text-caption-sm-medium leading-5",
+            selectedFrequency === "month"
+              ? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
+              : "text-tertiary hover:text-secondary"
+          )}
+        >
+          Monthly
+        </button>
+        <button
+          type="button"
+          onClick={() => setSelectedFrequency("year")}
+          className={cn(
+            "w-full rounded-sm px-1 py-0.5 text-center text-caption-sm-medium leading-5",
+            selectedFrequency === "year"
+              ? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
+              : "text-tertiary hover:text-secondary"
+          )}
+        >
+          Yearly
+          {yearlyDiscount > 0 && (
+            <span className="ml-1.5 rounded-full bg-accent-primary px-1 py-0.5 text-caption-xs-regular text-on-color">
+              -{yearlyDiscount}%
+            </span>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import {
+  SUBSCRIPTION_REDIRECTION_URLS,
+  SUBSCRIPTION_WITH_BILLING_FREQUENCY,
+  TALK_TO_SALES_URL,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { TBillingFrequency } from "@plane/types";
+import { EProductSubscriptionEnum } from "@plane/types";
+import { getSubscriptionName } from "@plane/utils";
+// components
+import { DiscountInfo } from "@/components/license/modal/card/discount-info";
+import type { TPlanDetail } from "@/constants/plans";
+// local imports
+import { PlanFrequencyToggle } from "./frequency-toggle";
+
+type TPlanDetailProps = {
+  subscriptionType: EProductSubscriptionEnum;
+  planDetail: TPlanDetail;
+  billingFrequency: TBillingFrequency | undefined;
+  setBillingFrequency: (frequency: TBillingFrequency) => void;
+};
+
+export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps) {
+  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;
+
+  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="col-span-1 flex flex-col justify-between space-y-0.5 p-3">
+      {/* Plan name and pricing section */}
+      <div className="flex flex-col items-start">
+        <div className="flex w-full items-center gap-2 text-h4-semibold">
+          <span>{subscriptionName}</span>
+          {subscriptionType === EProductSubscriptionEnum.PRO && (
+            <span className="rounded-sm bg-accent-primary px-2 py-0.5 text-caption-sm-medium text-on-color">
+              Popular
+            </span>
+          )}
+        </div>
+        <div className="flex items-start gap-x-2 pb-1 text-tertiary">
+          {isSubscriptionActive && displayPrice !== undefined && (
+            <div className="flex items-center gap-1 text-h3-semibold text-primary">
+              <DiscountInfo
+                currency="$"
+                frequency={billingFrequency ?? "month"}
+                price={displayPrice}
+                subscriptionType={subscriptionType}
+                className="mr-1.5"
+              />
+            </div>
+          )}
+          <div className="pt-1">
+            {pricingDescription && <div>{pricingDescription}</div>}
+            {pricingSecondaryDescription && (
+              <div className="text-caption-xs text-placeholder">{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="flex flex-col items-start gap-1 py-3">
+        <Button variant="primary" size="lg" onClick={handleRedirection} className="w-full">
+          {isSubscriptionActive ? `Upgrade to ${subscriptionName}` : t("common.upgrade_cta.talk_to_sales")}
+        </Button>
+      </div>
+    </div>
+  );
+});

plane-src/apps/web/ce/components/workspace/billing/comparison/root.tsx

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import type { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
+// components
+import { PlansComparisonBase, shouldRenderPlanDetail } from "@/components/workspace/billing/comparison/base";
+import type { TPlanePlans } from "@/constants/plans";
+import { PLANE_PLANS } from "@/constants/plans";
+// plane web imports
+import { PlanDetail } from "./plan-detail";
+
+type TPlansComparisonProps = {
+  isCompareAllFeaturesSectionOpen: boolean;
+  getBillingFrequency: (subscriptionType: EProductSubscriptionEnum) => TBillingFrequency | undefined;
+  setBillingFrequency: (subscriptionType: EProductSubscriptionEnum, frequency: TBillingFrequency) => void;
+  setIsCompareAllFeaturesSectionOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const PlansComparison = observer(function PlansComparison(props: TPlansComparisonProps) {
+  const {
+    isCompareAllFeaturesSectionOpen,
+    getBillingFrequency,
+    setBillingFrequency,
+    setIsCompareAllFeaturesSectionOpen,
+  } = props;
+  // plan details
+  const { planDetails } = PLANE_PLANS;
+
+  return (
+    <PlansComparisonBase
+      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
+      isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
+      setIsCompareAllFeaturesSectionOpen={setIsCompareAllFeaturesSectionOpen}
+    />
+  );
+});

plane-src/apps/web/ce/components/workspace/billing/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";

plane-src/apps/web/ce/components/workspace/billing/root.tsx

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { DEFAULT_PRODUCT_BILLING_FREQUENCY, SUBSCRIPTION_WITH_BILLING_FREQUENCY } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TBillingFrequency, TProductBillingFrequency } from "@plane/types";
+import { EProductSubscriptionEnum } from "@plane/types";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+import { SettingsHeading } from "@/components/settings/heading";
+// local imports
+import { PlansComparison } from "./comparison/root";
+
+export const BillingRoot = observer(function BillingRoot() {
+  const [isCompareAllFeaturesSectionOpen, setIsCompareAllFeaturesSectionOpen] = useState(false);
+  const [productBillingFrequency, setProductBillingFrequency] = useState<TProductBillingFrequency>(
+    DEFAULT_PRODUCT_BILLING_FREQUENCY
+  );
+  const { t } = useTranslation();
+
+  /**
+   * 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 });
+
+  return (
+    <section className="relative scrollbar-hide size-full overflow-y-auto">
+      <div>
+        <SettingsHeading
+          title={t("workspace_settings.settings.billing_and_plans.heading")}
+          description={t("workspace_settings.settings.billing_and_plans.description")}
+        />
+        <div className="mt-6">
+          <SettingsBoxedControlItem
+            title={t("billing.community_plan_title")}
+            description={t("billing.community_plan_description")}
+          />
+        </div>
+      </div>
+      <div className="mt-10 flex flex-col gap-y-3">
+        <h4 className="text-h6-semibold">{t("billing.all_plans")}</h4>
+        <PlansComparison
+          isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
+          getBillingFrequency={getBillingFrequency}
+          setBillingFrequency={setBillingFrequency}
+          setIsCompareAllFeaturesSectionOpen={setIsCompareAllFeaturesSectionOpen}
+        />
+      </div>
+    </section>
+  );
+});