[WEB-4253] improvement: plan card enhancements (#7168)

* [WEB-4253] improvement: plan card enhancements

* improvement: pricing changes

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

@@ -6,8 +6,10 @@ import { EProductSubscriptionEnum } from "@plane/constants";
 import { IPaymentProduct, TSubscriptionPrice } from "@plane/types";
 import { getButtonStyling, Loader } from "@plane/ui";
 import { cn } from "@plane/utils";
-// helpers
+// components
 import { getUpgradeButtonStyle } from "@/components/workspace/billing/subscription";
+// local imports
+import { DiscountInfo } from "./discount-info";
 
 export type TCheckoutParams = {
   planVariant: EProductSubscriptionEnum;
@@ -56,8 +58,13 @@ export const PlanCheckoutButton: FC<Props> = observer((props) => {
             </Loader>
           ) : (
             <span className="animate-fade-in">
-              {price.currency}
-              {price.price}
+              <DiscountInfo
+                currency={price.currency}
+                frequency={price.recurring}
+                price={price.price}
+                subscriptionType={planVariant}
+                className="mr-1.5"
+              />
             </span>
           )}
         </div>

web/core/components/license/modal/card/discount-info.tsx

@@ -0,0 +1,61 @@
+import { useTheme } from "next-themes";
+// plane imports
+import { EProductSubscriptionEnum } from "@plane/constants";
+import { TBillingFrequency } from "@plane/types";
+import { cn } from "@plane/utils";
+
+type TDiscountInfoProps = {
+  className?: string;
+  currency: string;
+  frequency: TBillingFrequency;
+  price: number;
+  subscriptionType: EProductSubscriptionEnum;
+};
+
+const PLANS_WITH_DISCOUNT = [EProductSubscriptionEnum.PRO];
+
+const getActualPrice = (frequency: TBillingFrequency, subscriptionType: EProductSubscriptionEnum): number | null => {
+  switch (subscriptionType) {
+    case EProductSubscriptionEnum.PRO:
+      return frequency === "month" ? 10 : 8;
+    default:
+      return null;
+  }
+};
+
+export const DiscountInfo = ({ className, currency, frequency, price, subscriptionType }: TDiscountInfoProps) => {
+  const { resolvedTheme } = useTheme();
+  // derived values
+  const actualPrice = getActualPrice(frequency, subscriptionType);
+
+  if (!PLANS_WITH_DISCOUNT.includes(subscriptionType)) {
+    return (
+      <>
+        {currency}
+        {price}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {actualPrice != price && (
+        <span className={cn("relative", className)}>
+          <img
+            src={
+              resolvedTheme === "dark"
+                ? "https://images.plane.so/pricing/hero/scribble-white.svg"
+                : "https://images.plane.so/pricing/hero/scribble-black.svg"
+            }
+            alt="image"
+            className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 w-full scale-x-125"
+          />
+          {currency}
+          {actualPrice}
+        </span>
+      )}
+      {currency}
+      {price}
+    </>
+  );
+};