@npm_leadtech/legal-lib-components 7.63.10 → 7.64.0

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

@@ -1,58 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { FeatureItem, PlanCard } from '../../atoms';
-import { FeaturesGrid, FeaturesSection, PlanSelector, PlanWrapper, PlansWrapper, PricingContainerStyled, SelectorButton } from './PricingPlansPage.styled';
-import { PricingPageHeader } from '../../organisms';
-import React from 'react';
-import { StickyPlanBar } from '../../molecules/StickyPlanBar';
-import { throttle } from '../../../utils/throttle';
-export const PricingPlansPage = ({ subscriptionPlans, features, onPlanSelect, headerDivider, siteName = 'Legalfinity', phoneNumber }) => {
-    const [activePlanIndex, setActivePlanIndex] = React.useState(0);
-    const plansWrapperRef = React.useRef(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 (_jsxs(_Fragment, { children: [_jsx(PricingPageHeader, { siteName: siteName, phoneNumber: phoneNumber }), headerDivider, subscriptionPlans?.length > 0 && (_jsxs(PricingContainerStyled, { children: [_jsx(PlanSelector, { children: subscriptionPlans.map((plan, index) => (_jsx(SelectorButton, { isActive: index === activePlanIndex, onClick: () => setActivePlanIndex(index), dataQa: `selector-${plan.subscription_type?.name.replaceAll(' ', '')}`, children: plan?.subscription_type?.name }, `selector-${plan?.pricingLabel}`))) }), _jsx(PlansWrapper, { ref: plansWrapperRef, children: subscriptionPlans.map((plan, index) => (_jsx(PlanWrapper, { isHighlighted: plan.highlightPlan, isActive: index === activePlanIndex, className: `pricing-plan__element-container ${plan?.highlightPlan ? 'highlight' : ''} ${index === activePlanIndex ? 'active' : ''}`, children: _jsx(PlanCard, { onSelect: onPlanSelect ?? (() => { }), plan: plan }) }, plan.pricingLabel))) }), features && features.length > 0 && (_jsx(FeaturesSection, { children: _jsx(FeaturesGrid, { children: features.map((feature) => (_jsx(FeatureItem, { feature: feature }, feature.description))) }) })), _jsx(StickyPlanBar, { activePlan: activePlan, showStickyBar: showStickyBar, onPlanSelect: onPlanSelect })] }))] }));
-};

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

@@ -1,16 +0,0 @@
-type PlanWrapperProps = {
-    isActive: boolean;
-    isHighlighted?: boolean;
-};
-type SelectorButton = {
-    isActive: boolean;
-    dataQa: string;
-};
-export declare const PricingContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-export declare const PlanSelector: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SelectorButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, SelectorButton>> & string;
-export declare const PlansWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const PlanWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PlanWrapperProps>> & string;
-export declare const FeaturesSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FeaturesGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
-export {};

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

@@ -1,88 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../../globalStyles/breakpoints';
-export const PricingContainerStyled = styled.section `
-  margin: 0 auto 0 auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  max-width: 996px;
-  gap: 1.5rem;
-  margin-bottom: 3rem;
-  padding: 0 1.5rem;
-`;
-export const PlanSelector = styled.div `
-  display: flex;
-  justify-content: center;
-  gap: 0.5rem;
-  border-radius: 1rem;
-  padding: 0.5rem;
-
-  @media (min-width: ${size.sm}) {
-    display: none;
-  }
-`;
-export const SelectorButton = styled.button `
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  border: none;
-  outline: inherit;
-  flex: 1;
-  font-size: 12px;
-  font-weight: 700;
-  background-color: var(--neutral-neutral-4);
-  color: var(--neutral-neutral-1);
-  cursor: pointer;
-  transition: background-color 0.3s;
-
-  ${({ isActive }) => isActive &&
-    css `
-      background-color: var(--primary-main);
-      color: white;
-    `}
-`;
-export const PlansWrapper = styled.div `
-  display: flex;
-  height: 100%;
-  gap: 1rem;
-  width: 100%;
-  max-width: 327px;
-
-  @media (min-width: ${size.sm}) {
-    max-width: none;
-    gap: 20px;
-  }
-`;
-export const PlanWrapper = styled.div `
-  max-width: 327px;
-  border-radius: 1rem;
-  flex: 1;
-  display: ${({ isActive }) => (isActive ? 'block' : 'none')};
-  background-color: white;
-
-  ${({ isHighlighted }) => isHighlighted &&
-    css `
-      border: 2px solid var(--primary-main);
-    `}
-
-  @media (min-width: ${size.sm}) {
-    display: block;
-    max-width: none;
-  }
-`;
-export const FeaturesSection = styled.div `
-  width: 100%;
-`;
-export const FeaturesGrid = styled.ul `
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.5rem;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  @media (min-width: ${size.sm}) {
-    display: flex;
-    justify-content: center;
-  }
-`;

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

@@ -1,107 +0,0 @@
-import styled, { css } from 'styled-components'
-import { size } from '../../../globalStyles/breakpoints'
-
-type PlanWrapperProps = {
-  isActive: boolean
-  isHighlighted?: boolean
-}
-
-type SelectorButton = {
-  isActive: boolean
-  dataQa: string
-}
-
-export const PricingContainerStyled = styled.section`
-  margin: 0 auto 0 auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  max-width: 996px;
-  gap: 1.5rem;
-  margin-bottom: 3rem;
-  padding: 0 1.5rem;
-`
-
-export const PlanSelector = styled.div`
-  display: flex;
-  justify-content: center;
-  gap: 0.5rem;
-  border-radius: 1rem;
-  padding: 0.5rem;
-
-  @media (min-width: ${size.sm}) {
-    display: none;
-  }
-`
-
-export const SelectorButton = styled.button<SelectorButton>`
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  border: none;
-  outline: inherit;
-  flex: 1;
-  font-size: 12px;
-  font-weight: 700;
-  background-color: var(--neutral-neutral-4);
-  color: var(--neutral-neutral-1);
-  cursor: pointer;
-  transition: background-color 0.3s;
-
-  ${({ isActive }) =>
-    isActive &&
-    css`
-      background-color: var(--primary-main);
-      color: white;
-    `}
-`
-
-export const PlansWrapper = styled.div`
-  display: flex;
-  height: 100%;
-  gap: 1rem;
-  width: 100%;
-  max-width: 327px;
-
-  @media (min-width: ${size.sm}) {
-    max-width: none;
-    gap: 20px;
-  }
-`
-
-export const PlanWrapper = styled.div<PlanWrapperProps>`
-  max-width: 327px;
-  border-radius: 1rem;
-  flex: 1;
-  display: ${({ isActive }) => (isActive ? 'block' : 'none')};
-  background-color: white;
-
-  ${({ isHighlighted }) =>
-    isHighlighted &&
-    css`
-      border: 2px solid var(--primary-main);
-    `}
-
-  @media (min-width: ${size.sm}) {
-    display: block;
-    max-width: none;
-  }
-`
-
-export const FeaturesSection = styled.div`
-  width: 100%;
-`
-
-export const FeaturesGrid = styled.ul`
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.5rem;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  @media (min-width: ${size.sm}) {
-    display: flex;
-    justify-content: center;
-  }
-`

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

@@ -1,128 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-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

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

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

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

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

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

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

@@ -1 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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)
-    }
-  }
-}