feat: init

apps/web/ce/components/license/index.ts

@@ -0,0 +1 @@
+export * from "./modal";

apps/web/ce/components/license/modal/index.ts

@@ -0,0 +1 @@
+export * from "./upgrade-modal";

apps/web/ce/components/license/modal/upgrade-modal.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import type { FC } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import {
+  BUSINESS_PLAN_FEATURES,
+  ENTERPRISE_PLAN_FEATURES,
+  PLANE_COMMUNITY_PRODUCTS,
+  PRO_PLAN_FEATURES,
+  SUBSCRIPTION_REDIRECTION_URLS,
+  SUBSCRIPTION_WEBPAGE_URLS,
+  TALK_TO_SALES_URL,
+} from "@plane/constants";
+import { EProductSubscriptionEnum } from "@plane/types";
+import { EModalWidth, ModalCore } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { FreePlanCard, PlanUpgradeCard } from "@/components/license";
+import type { TCheckoutParams } from "@/components/license/modal/card/checkout-button";
+
+// Constants
+const COMMON_CARD_CLASSNAME = "flex flex-col w-full h-full justify-end col-span-12 sm:col-span-6 xl:col-span-3";
+const COMMON_EXTRA_FEATURES_CLASSNAME = "pt-2 text-center text-xs text-custom-primary-200 font-medium hover:underline";
+
+export type PaidPlanUpgradeModalProps = {
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+export const PaidPlanUpgradeModal: FC<PaidPlanUpgradeModalProps> = observer((props) => {
+  const { isOpen, handleClose } = props;
+  // derived values
+  const isSelfHosted = true;
+  const isTrialAllowed = false;
+
+  const handleRedirection = ({ planVariant, priceId }: TCheckoutParams) => {
+    // Get the product and price using plane community constants
+    const product = PLANE_COMMUNITY_PRODUCTS[planVariant];
+    const price = product.prices.find((price) => price.id === priceId);
+    const frequency = price?.recurring ?? "year";
+    // Redirect to the appropriate URL
+    const redirectUrl = SUBSCRIPTION_REDIRECTION_URLS[planVariant][frequency] ?? TALK_TO_SALES_URL;
+    window.open(redirectUrl, "_blank");
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} width={EModalWidth.VIIXL} className="rounded-2xl">
+      <div className="p-10 max-h-[90vh] overflow-auto">
+        <div className="grid grid-cols-12 gap-6 h-full">
+          {/* Free Plan Section */}
+          <div className={cn(COMMON_CARD_CLASSNAME)}>
+            <div className="text-3xl font-bold leading-8 flex">Upgrade to a paid plan and unlock missing features.</div>
+            <div className="mt-4 mb-2">
+              <p className="text-sm mb-4 pr-8 text-custom-text-100">
+                Dashboards, Workflows, Approvals, Time Management, and other superpowers are just a click away. Upgrade
+                today to unlock features your teams need yesterday.
+              </p>
+            </div>
+
+            {/* Free plan details */}
+            <FreePlanCard isOnFreePlan />
+          </div>
+
+          {/* Pro plan */}
+          <div className={cn(COMMON_CARD_CLASSNAME)}>
+            <PlanUpgradeCard
+              planVariant={EProductSubscriptionEnum.PRO}
+              product={PLANE_COMMUNITY_PRODUCTS[EProductSubscriptionEnum.PRO]}
+              features={PRO_PLAN_FEATURES}
+              verticalFeatureList
+              extraFeatures={
+                <p className={COMMON_EXTRA_FEATURES_CLASSNAME}>
+                  <a href={SUBSCRIPTION_WEBPAGE_URLS[EProductSubscriptionEnum.PRO]} target="_blank">
+                    See full features list
+                  </a>
+                </p>
+              }
+              handleCheckout={handleRedirection}
+              isSelfHosted={!!isSelfHosted}
+              isTrialAllowed={!!isTrialAllowed}
+            />
+          </div>
+          <div className={cn(COMMON_CARD_CLASSNAME)}>
+            <PlanUpgradeCard
+              planVariant={EProductSubscriptionEnum.BUSINESS}
+              product={PLANE_COMMUNITY_PRODUCTS[EProductSubscriptionEnum.BUSINESS]}
+              features={BUSINESS_PLAN_FEATURES}
+              verticalFeatureList
+              extraFeatures={
+                <p className={COMMON_EXTRA_FEATURES_CLASSNAME}>
+                  <a href={SUBSCRIPTION_WEBPAGE_URLS[EProductSubscriptionEnum.BUSINESS]} target="_blank">
+                    See full features list
+                  </a>
+                </p>
+              }
+              handleCheckout={handleRedirection}
+              isSelfHosted={!!isSelfHosted}
+              isTrialAllowed={!!isTrialAllowed}
+            />
+          </div>
+          <div className={cn(COMMON_CARD_CLASSNAME)}>
+            <PlanUpgradeCard
+              planVariant={EProductSubscriptionEnum.ENTERPRISE}
+              product={PLANE_COMMUNITY_PRODUCTS[EProductSubscriptionEnum.ENTERPRISE]}
+              features={ENTERPRISE_PLAN_FEATURES}
+              verticalFeatureList
+              extraFeatures={
+                <p className={COMMON_EXTRA_FEATURES_CLASSNAME}>
+                  <a href={SUBSCRIPTION_WEBPAGE_URLS[EProductSubscriptionEnum.ENTERPRISE]} target="_blank">
+                    See full features list
+                  </a>
+                </p>
+              }
+              handleCheckout={handleRedirection}
+              isSelfHosted={!!isSelfHosted}
+              isTrialAllowed={!!isTrialAllowed}
+            />
+          </div>
+        </div>
+      </div>
+    </ModalCore>
+  );
+});