[WIKI-563] refactor: subscription styles (#7444)

* refactor: billing UI

* refactor : fix typo

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

@@ -2,9 +2,8 @@ import { FC } from "react";
 // plane imports
 import { observer } from "mobx-react";
 import { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
+import { getSubscriptionBackgroundColor, getDiscountPillStyle } from "@plane/ui";
 import { calculateYearlyDiscount, cn } from "@plane/utils";
-// plane web imports
-import { getDiscountPillStyle, getSubscriptionBackgroundColor } from "@/components/workspace/billing/subscription";
 
 type TPlanFrequencyToggleProps = {
   subscriptionType: EProductSubscriptionEnum;

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

@@ -10,12 +10,10 @@ import {
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
-import { getButtonStyling } from "@plane/ui";
+import { getButtonStyling, getUpgradeButtonStyle } from "@plane/ui";
 import { cn, getSubscriptionName } from "@plane/utils";
 // components
 import { DiscountInfo } from "@/components/license/modal/card/discount-info";
-// constants
-import { getUpgradeButtonStyle } from "@/components/workspace/billing/subscription";
 import { TPlanDetail } from "@/constants/plans";
 // local imports
 import { captureSuccess } from "@/helpers/event-tracker.helper";

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

@@ -4,10 +4,10 @@ import { observer } from "mobx-react";
 import { DEFAULT_PRODUCT_BILLING_FREQUENCY, SUBSCRIPTION_WITH_BILLING_FREQUENCY } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EProductSubscriptionEnum, TBillingFrequency, TProductBillingFrequency } from "@plane/types";
+import { getSubscriptionTextColor } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { SettingsHeading } from "@/components/settings";
-import { getSubscriptionTextColor } from "@/components/workspace/billing/subscription";
 // local imports
 import { PlansComparison } from "./comparison/root";
 

apps/web/core/components/license/modal/card/base-paid-plan-card.tsx

@@ -7,12 +7,8 @@ import { Tab } from "@headlessui/react";
 // plane imports
 // helpers
 import { EProductSubscriptionEnum, TBillingFrequency, TSubscriptionPrice } from "@plane/types";
+import { getSubscriptionBackgroundColor, getUpgradeCardVariantStyle } from "@plane/ui";
 import { cn, getBaseSubscriptionName, getSubscriptionName } from "@plane/utils";
-// components
-import {
-  getSubscriptionBackgroundColor,
-  getUpgradeCardVariantStyle,
-} from "@/components/workspace/billing/subscription";
 
 export type TBasePaidPlanCardProps = {
   planVariant: EProductSubscriptionEnum;

apps/web/core/components/license/modal/card/checkout-button.tsx

@@ -3,10 +3,8 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
-import { getButtonStyling, Loader } from "@plane/ui";
+import { getButtonStyling, getUpgradeButtonStyle, Loader } from "@plane/ui";
 import { cn } from "@plane/utils";
-// components
-import { getUpgradeButtonStyle } from "@/components/workspace/billing/subscription";
 // local imports
 import { DiscountInfo } from "./discount-info";
 

apps/web/core/components/license/modal/card/plan-upgrade.tsx

@@ -5,11 +5,10 @@ import { observer } from "mobx-react";
 // plane imports
 import { TALK_TO_SALES_URL } from "@plane/constants";
 import { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
+import { getDiscountPillStyle } from "@plane/ui";
 import { calculateYearlyDiscount, cn, getSubscriptionName, getSubscriptionPriceDetails } from "@plane/utils";
 // components
 import { BasePaidPlanCard, TalkToSalesCard } from "@/components/license";
-// helpers
-import { getDiscountPillStyle } from "@/components/workspace/billing/subscription";
 // local components
 import { PlanCheckoutButton, TCheckoutParams } from "./checkout-button";
 

apps/web/core/components/license/modal/card/talk-to-sales.tsx

@@ -5,10 +5,8 @@ import { observer } from "mobx-react";
 // types
 // plane imports
 import { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
-import { getButtonStyling, Loader } from "@plane/ui";
+import { getButtonStyling, getUpgradeButtonStyle, Loader } from "@plane/ui";
 import { cn } from "@plane/utils";
-// plane web imports
-import { getUpgradeButtonStyle } from "@/components/workspace/billing/subscription";
 // local imports
 import { BasePaidPlanCard } from "./base-paid-plan-card";
 

apps/web/core/components/workspace/billing/comparison/feature-detail.tsx

@@ -2,9 +2,9 @@ import { FC } from "react";
 import { CheckCircle2, Minus, MinusCircle } from "lucide-react";
 import { EProductSubscriptionEnum } from "@plane/types";
 // plane imports
+import { getSubscriptionTextColor } from "@plane/ui";
 import { cn } from "@plane/utils";
 // constants
-import { getSubscriptionTextColor } from "@/components/workspace/billing/subscription";
 import { TPlanFeatureData } from "@/constants/plans";
 
 type TPlanFeatureDetailProps = {

packages/ui/src/billing/index.ts

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

packages/ui/src/billing/subscription.ts

@@ -2,10 +2,6 @@
 import { EProductSubscriptionEnum } from "@plane/types";
 import { cn } from "@plane/utils";
 
-// --------------- NOTE ----------------
-// This has to be in web application as tailwind won't be able to resolve the colors
-// ------------------------------------
-
 export const getSubscriptionTextColor = (
   planVariant: EProductSubscriptionEnum,
   shade: "200" | "400" = "200"

packages/ui/src/index.ts

@@ -35,3 +35,4 @@ export * from "./toast";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./utils";
+export * from "./billing";