@npm_leadtech/legal-lib-components 7.64.0 → 7.65.1

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/animations.scss

@@ -55,9 +55,14 @@
 }
 
 .background-ratafia-animation {
-  background: radial-gradient(90.31% 103.09% at 74.2% -62.04%, rgba(7, 128, 128, 0.3) 0%, #062f3c 100%),
-    radial-gradient(80.63% 44.37% at 73.54% 70.76%, #078080 0%, #052a37 100%),
-    radial-gradient(92.19% 33.51% at 0% 0%, #078080 0%, #042b39 100%), #032a38;
+  background: radial-gradient(
+      90.31% 103.09% at 74.2% -62.04%,
+      var(--primary-main-dark-2) 0%,
+      var(--primary-main-dark-1) 100%
+    ),
+    radial-gradient(80.63% 44.37% at 73.54% 70.76%, var(--primary-main) 0%, var(--primary-main-dark-2) 100%),
+    radial-gradient(92.19% 33.51% at 0% 0%, var(--primary-main) 0%, var(--primary-main-dark-1) 100%),
+    var(--primary-main-dark-2);
   background-blend-mode: lighten, lighten, lighten, normal;
   background-size: 150% 150%;
   animation: gradientAnimation 4s ease infinite;

package/dist/src/globalStyles/themes.scss

@@ -52,8 +52,7 @@ html {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
+  --font-primary: 'Inter', sans-serif;
   --font-secondary: 'Lora', serif;
 }
 
@@ -89,8 +88,7 @@ html[data-theme='districtlaws'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
+  --font-primary: 'Inter', sans-serif;
   --font-secondary: 'Lora', serif;
 }
 
@@ -126,8 +124,7 @@ html[data-theme='lawdistricts'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
+  --font-primary: 'Inter', sans-serif;
   --font-secondary: 'Lora', serif;
 }
 
@@ -163,8 +160,7 @@ html[data-theme='lawdistrict'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
+  --font-primary: 'Inter', sans-serif;
   --font-secondary: 'Lora', serif;
 }
 
@@ -226,8 +222,7 @@ html[data-theme='lawsdistrict'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
+  --font-primary: 'Inter', sans-serif;
   --font-secondary: 'Lora', serif;
 }
 
@@ -263,8 +258,7 @@ html[data-theme='lawdistrictinfo'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
+  --font-primary: 'Inter', sans-serif;
   --font-secondary: 'Lora', serif;
 }
 
@@ -300,8 +294,7 @@ html[data-theme='uslawdistrict'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
+  --font-primary: 'Inter', sans-serif;
   --font-secondary: 'Lora', serif;
 }
 
@@ -337,8 +330,7 @@ html[data-theme='lawdistrictonline'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
+  --font-primary: 'Inter', sans-serif;
   --font-secondary: 'Lora', serif;
 }
 
@@ -392,7 +384,6 @@ html[data-theme='legalfinity'] {
   --others-white: #ffffff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Poppins', sans-serif;
-  --font-secondary: 'Poppins', sans-serif;
+  --font-primary: 'Poppins', sans-serif;
+  --font-secondary: 'Poppins', serif;
 }

package/dist/src/globalStyles/variablesCss.scss

@@ -14,3 +14,20 @@ html {
 
   --global-gap: 1rem;
 }
+
+html[data-theme='legalfinity'] {
+  --font-sans: 'Poppins', sans-serif;
+  --font-serif: 'Poppins', serif;
+
+  --s-border-radius: 0.25rem;
+  --m-border-radius: 0.5rem;
+  --l-border-radius: 1rem;
+
+  --box-shadow-small: 0 0.125rem 0.375rem 0 rgba(var(--primary-main-dark-1-rgb), 0.25);
+  --box-shadow-medium: 0 0.25rem 0.5rem 0 rgba(var(--primary-main-dark-1-rgb), 0.2);
+  --box-shadow-menu: 0 0.25rem 0.5rem -0.5rem rgba(var(--primary-main-dark-1-rgb), 0.2);
+  --box-shadow-tippy-box: 0 0.25rem 0.5rem 0.25rem rgba(var(--primary-main-dark-1-rgb), 0.2);
+  --box-shadow-container: 0px 2px 6px 0px rgba(var(--primary-main-dark-1-rgb), 0.25);
+
+  --global-gap: 1rem;
+}

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)
+    }
+  }
+}