@npm_leadtech/legal-lib-components 7.64.0 → 7.65.0

package/dist/src/components/pages/PricingPlansPage/PricingPlansPage.tsx

@@ -0,0 +1,128 @@
+import { FeatureItem, PlanCard } from '../../atoms'
+import {
+  FeaturesGrid,
+  FeaturesSection,
+  PlanSelector,
+  PlanWrapper,
+  PlansWrapper,
+  PricingContainerStyled,
+  SelectorButton
+} from './PricingPlansPage.styled'
+import { PricingPageHeader } from '../../organisms'
+import { PricingPlansPageProps } from './PricingPlansPageProps'
+import React from 'react'
+import { StickyPlanBar } from '../../molecules/StickyPlanBar'
+import { throttle } from '../../../utils/throttle'
+
+export const PricingPlansPage: React.FC<PricingPlansPageProps> = ({
+  subscriptionPlans,
+  features,
+  onPlanSelect,
+  headerDivider,
+  siteName = 'Legalfinity',
+  phoneNumber
+}) => {
+  const [activePlanIndex, setActivePlanIndex] = React.useState(0)
+  const plansWrapperRef = React.useRef<HTMLDivElement | null>(null)
+  const lastScrollYRef = React.useRef(0)
+  const [showStickyBar, setShowStickyBar] = React.useState(false)
+
+  const activePlan = subscriptionPlans[activePlanIndex]
+
+  React.useEffect(() => {
+    const handleScroll = () => {
+      if (!plansWrapperRef.current) return
+
+      const currentScrollY = window.scrollY
+      const isMobile = window.innerWidth < 720
+
+      if (!isMobile) {
+        if (showStickyBar) {
+          setShowStickyBar(false)
+        }
+        return
+      }
+
+      const isScrollingUp = currentScrollY < lastScrollYRef.current - 10 ? 'up' : null
+
+      const scrollDirection = currentScrollY > lastScrollYRef.current + 10 ? 'down' : isScrollingUp
+      if (!scrollDirection) return
+
+      const targetRect = plansWrapperRef.current.getBoundingClientRect()
+      const isPastWrapper = targetRect.bottom < 400
+
+      if (scrollDirection === 'down' && isPastWrapper) {
+        if (!showStickyBar) {
+          setShowStickyBar(true)
+        }
+      } else if (scrollDirection === 'up' || !isPastWrapper) {
+        if (showStickyBar && !isPastWrapper) {
+          setShowStickyBar(false)
+        }
+      }
+
+      lastScrollYRef.current = currentScrollY
+    }
+
+    const handleResize = () => {
+      if (window.innerWidth >= 720) {
+        setShowStickyBar(false)
+      }
+    }
+
+    const throttledHandleScroll = throttle(handleScroll, 100)
+
+    window.addEventListener('scroll', throttledHandleScroll)
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('scroll', throttledHandleScroll)
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [showStickyBar])
+
+  return (
+    <>
+      <PricingPageHeader siteName={siteName} phoneNumber={phoneNumber} />
+      {headerDivider}
+      {subscriptionPlans?.length > 0 && (
+        <PricingContainerStyled>
+          <PlanSelector>
+            {subscriptionPlans.map((plan, index) => (
+              <SelectorButton
+                key={`selector-${plan?.pricingLabel}`}
+                isActive={index === activePlanIndex}
+                onClick={() => setActivePlanIndex(index)}
+                dataQa={`selector-${plan.subscription_type?.name.replaceAll(' ', '')}`}
+              >
+                {plan?.subscription_type?.name}
+              </SelectorButton>
+            ))}
+          </PlanSelector>
+          <PlansWrapper ref={plansWrapperRef}>
+            {subscriptionPlans.map((plan, index) => (
+              <PlanWrapper
+                key={plan.pricingLabel}
+                isHighlighted={plan.highlightPlan}
+                isActive={index === activePlanIndex}
+                className={`pricing-plan__element-container ${plan?.highlightPlan ? 'highlight' : ''} ${index === activePlanIndex ? 'active' : ''}`}
+              >
+                <PlanCard onSelect={onPlanSelect ?? (() => {})} plan={plan} />
+              </PlanWrapper>
+            ))}
+          </PlansWrapper>
+          {features && features.length > 0 && (
+            <FeaturesSection>
+              <FeaturesGrid>
+                {features.map((feature) => (
+                  <FeatureItem feature={feature} key={feature.description} />
+                ))}
+              </FeaturesGrid>
+            </FeaturesSection>
+          )}
+          <StickyPlanBar activePlan={activePlan} showStickyBar={showStickyBar} onPlanSelect={onPlanSelect} />
+        </PricingContainerStyled>
+      )}
+    </>
+  )
+}

package/dist/src/components/pages/PricingPlansPage/PricingPlansPageProps.d.ts

@@ -0,0 +1,9 @@
+import { FeatureItemProp, SubscriptionPlan } from '../../atoms';
+export interface PricingPlansPageProps {
+    subscriptionPlans: SubscriptionPlan[];
+    features?: FeatureItemProp[];
+    onPlanSelect?: (sku: string) => void;
+    headerDivider?: React.ReactNode;
+    siteName?: string;
+    phoneNumber?: string;
+}

package/dist/src/components/pages/PricingPlansPage/PricingPlansPageProps.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/pages/PricingPlansPage/PricingPlansPageProps.ts

@@ -0,0 +1,10 @@
+import { FeatureItemProp, SubscriptionPlan } from '../../atoms'
+
+export interface PricingPlansPageProps {
+  subscriptionPlans: SubscriptionPlan[]
+  features?: FeatureItemProp[]
+  onPlanSelect?: (sku: string) => void
+  headerDivider?: React.ReactNode
+  siteName?: string
+  phoneNumber?: string
+}

package/dist/src/components/pages/PricingPlansPage/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PricingPlansPage';
+export * from './PricingPlansPageProps';

package/dist/src/components/pages/PricingPlansPage/index.js

@@ -0,0 +1,2 @@
+export * from './PricingPlansPage';
+export * from './PricingPlansPageProps';

package/dist/src/components/pages/PricingPlansPage/index.ts

@@ -0,0 +1,2 @@
+export * from './PricingPlansPage'
+export * from './PricingPlansPageProps'

package/dist/src/components/pages/index.d.ts

@@ -12,3 +12,4 @@ export * from './RatafiaResultPage';
 export * from './UnsubscribePage';
 export * from './LoginRatafiaPage';
 export * from './PricingPage';
+export * from './PricingPlansPage';

package/dist/src/components/pages/index.js

@@ -12,3 +12,4 @@ export * from './RatafiaResultPage';
 export * from './UnsubscribePage';
 export * from './LoginRatafiaPage';
 export * from './PricingPage';
+export * from './PricingPlansPage';

package/dist/src/components/pages/index.ts

@@ -12,3 +12,4 @@ export * from './RatafiaResultPage'
 export * from './UnsubscribePage'
 export * from './LoginRatafiaPage'
 export * from './PricingPage'
+export * from './PricingPlansPage'

package/dist/src/globalStyles/themes.scss

@@ -52,9 +52,6 @@ html {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
 html[data-theme='districtlaws'] {
@@ -89,9 +86,6 @@ html[data-theme='districtlaws'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
 html[data-theme='lawdistricts'] {
@@ -126,9 +120,6 @@ html[data-theme='lawdistricts'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
 html[data-theme='lawdistrict'] {
@@ -163,9 +154,6 @@ html[data-theme='lawdistrict'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
 html[data-theme='lawdistrict'] {
@@ -226,9 +214,6 @@ html[data-theme='lawsdistrict'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
 html[data-theme='lawdistrictinfo'] {
@@ -263,9 +248,6 @@ html[data-theme='lawdistrictinfo'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
 html[data-theme='uslawdistrict'] {
@@ -300,9 +282,6 @@ html[data-theme='uslawdistrict'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
 html[data-theme='lawdistrictonline'] {
@@ -337,9 +316,6 @@ html[data-theme='lawdistrictonline'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
 html[data-theme='legalfinity'] {
@@ -392,7 +368,4 @@ html[data-theme='legalfinity'] {
   --others-white: #ffffff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Poppins', sans-serif;
-  --font-secondary: 'Poppins', sans-serif;
 }

package/dist/src/utils/throttle.d.ts

@@ -0,0 +1 @@
+export declare function throttle<T extends (...args: unknown[]) => unknown>(func: T, limit: number): (this: ThisParameterType<T>, ...args: Parameters<T>) => void;

package/dist/src/utils/throttle.js

@@ -0,0 +1,10 @@
+export function throttle(func, limit) {
+    let inThrottle;
+    return function (...args) {
+        if (!inThrottle) {
+            func.apply(this, args);
+            inThrottle = true;
+            setTimeout(() => (inThrottle = false), limit);
+        }
+    };
+}

package/dist/src/utils/throttle.ts

@@ -0,0 +1,11 @@
+export function throttle<T extends (...args: unknown[]) => unknown>(func: T, limit: number) {
+  let inThrottle: boolean | undefined
+
+  return function (this: ThisParameterType<T>, ...args: Parameters<T>): void {
+    if (!inThrottle) {
+      func.apply(this, args)
+      inThrottle = true
+      setTimeout(() => (inThrottle = false), limit)
+    }
+  }
+}