binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-4273] fix: plans comparison scroll issue (#7176)

Browse source
This commit is contained in:
Prateek Shourya 2025-06-05 22:51:05 +05:30 • committed by GitHub
parent f34f078bd2
commit 8c99a7df88
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 139 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

73
web/ce/components/workspace/billing/comparison/root.tsx
View file

@ -1,4 +1,3 @@
import { forwardRef } from "react";
import { observer } from "mobx-react";
// plane imports
import { EProductSubscriptionEnum } from "@plane/constants";
@ -10,52 +9,40 @@ import { PLANE_PLANS, TPlanePlans } from "@/constants/plans";
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;
export const PlansComparison = observer((props: TPlansComparisonProps) => {
const {
isCompareAllFeaturesSectionOpen,
getBillingFrequency,
setBillingFrequency,
setIsCompareAllFeaturesSectionOpen,
} = 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}
/>
);
})
);
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}
/>
);
});

29
web/ce/components/workspace/billing/root.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from "react";
import { useState } from "react";
import { observer } from "mobx-react";
// plane imports
import {
@ -16,8 +16,6 @@ import { getSubscriptionTextColor } from "@/components/workspace/billing/subscri
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
@ -43,33 +41,13 @@ export const BillingRoot = observer(() => {
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]);
return (
<section className="relative size-full flex flex-col overflow-y-auto scrollbar-hide">
<SettingsHeading
title={t("workspace_settings.settings.billing_and_plans.heading")}
description={t("workspace_settings.settings.billing_and_plans.description")}
/>
<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={cn("transition-all duration-500 ease-in-out will-change-[height,opacity]")}>
<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">
@ -89,13 +67,10 @@ export const BillingRoot = observer(() => {
<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>
);