@npm_leadtech/legal-lib-components 7.82.52 → 7.83.1

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

@@ -0,0 +1,130 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const PricingPageStyled = styled.div `
+  width: 100%;
+  .hero-section {
+    .hero-content__image {
+      .gatsby-image-wrapper {
+        min-height: 360px;
+        @media ${device['portrait-tablets']} {
+          min-height: auto;
+        }
+      }
+    }
+  }
+
+  .pricing-plans {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    align-items: center;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 2rem;
+    margin-bottom: 48px;
+    &__title {
+      color: var(--Neutral-800, var(--neutral-neutral-1));
+      font-size: 28px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 32px;
+      letter-spacing: -0.3px;
+      margin-top: 48px;
+      text-align: center;
+    }
+
+    .subscription-card {
+      min-width: 379px;
+    }
+
+    .subscription-card__feature {
+      margin-bottom: 1rem;
+      &.ratafia-feature {
+        padding: 0.5rem;
+      }
+    }
+
+    .subscription-card__button {
+      flex: inherit;
+    }
+
+    .primary {
+      .subscription-card__feature {
+        &.ratafia-feature {
+          background-color: var(--primary-main-light-5);
+        }
+      }
+    }
+    &__cards {
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+
+      @media ${device.desktop} {
+        flex-direction: row;
+      }
+    }
+  }
+
+  .support-section {
+    margin-top: 48px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    &__content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+
+      h2 {
+        color: var(--Neutral-800, var(--neutral-neutral-1));
+        font-size: 28px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 32px;
+        letter-spacing: -0.3px;
+        margin-bottom: 24px;
+      }
+    }
+  }
+
+  .benefits {
+    padding: 48px;
+    background: var(--primary-main-light-6);
+    border-radius: 16px;
+    margin-top: 48px;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    &__title {
+      color: var(--Neutral-800, var(--neutral-neutral-1));
+      font-size: 28px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 32px;
+      letter-spacing: -0.3px;
+      margin-bottom: 40px;
+    }
+    &__cards {
+      display: flex;
+      gap: 16px;
+      flex-direction: column;
+      width: 100%;
+
+      @media ${device.laptop} {
+        flex-direction: row;
+      }
+    }
+  }
+  .faqs-section {
+    max-width: inherit;
+    align-items: center;
+    padding-bottom: 80px;
+    padding-top: 48px;
+    background: var(--neutral-neutral-6);
+    &__content {
+      max-width: 1200px;
+    }
+  }
+`;

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

@@ -0,0 +1,131 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const PricingPageStyled = styled.div`
+  width: 100%;
+  .hero-section {
+    .hero-content__image {
+      .gatsby-image-wrapper {
+        min-height: 360px;
+        @media ${device['portrait-tablets']} {
+          min-height: auto;
+        }
+      }
+    }
+  }
+
+  .pricing-plans {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    align-items: center;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 2rem;
+    margin-bottom: 48px;
+    &__title {
+      color: var(--Neutral-800, var(--neutral-neutral-1));
+      font-size: 28px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 32px;
+      letter-spacing: -0.3px;
+      margin-top: 48px;
+      text-align: center;
+    }
+
+    .subscription-card {
+      min-width: 379px;
+    }
+
+    .subscription-card__feature {
+      margin-bottom: 1rem;
+      &.ratafia-feature {
+        padding: 0.5rem;
+      }
+    }
+
+    .subscription-card__button {
+      flex: inherit;
+    }
+
+    .primary {
+      .subscription-card__feature {
+        &.ratafia-feature {
+          background-color: var(--primary-main-light-5);
+        }
+      }
+    }
+    &__cards {
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+
+      @media ${device.desktop} {
+        flex-direction: row;
+      }
+    }
+  }
+
+  .support-section {
+    margin-top: 48px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    &__content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+
+      h2 {
+        color: var(--Neutral-800, var(--neutral-neutral-1));
+        font-size: 28px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 32px;
+        letter-spacing: -0.3px;
+        margin-bottom: 24px;
+      }
+    }
+  }
+
+  .benefits {
+    padding: 48px;
+    background: var(--primary-main-light-6);
+    border-radius: 16px;
+    margin-top: 48px;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    &__title {
+      color: var(--Neutral-800, var(--neutral-neutral-1));
+      font-size: 28px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 32px;
+      letter-spacing: -0.3px;
+      margin-bottom: 40px;
+    }
+    &__cards {
+      display: flex;
+      gap: 16px;
+      flex-direction: column;
+      width: 100%;
+
+      @media ${device.laptop} {
+        flex-direction: row;
+      }
+    }
+  }
+  .faqs-section {
+    max-width: inherit;
+    align-items: center;
+    padding-bottom: 80px;
+    padding-top: 48px;
+    background: var(--neutral-neutral-6);
+    &__content {
+      max-width: 1200px;
+    }
+  }
+`

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

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import { CardBoxFeaturedSection, CardBoxMinimalSection, FaqSection, HeroSection } from '../../sections'
+import { BenefitCard } from '../../atoms'
+import { PlanBoxPricingSubscriptionCard } from '../../molecules'
+import { PricingPageProps } from './PricingPageProps'
+import { PricingPageStyled } from './PricingPage.styled'
+
+export const PricingPage: React.FC<PricingPageProps> = ({
+  benefitsContent,
+  faqsContent,
+  helpResourcesCards,
+  pricingPlanContent,
+  pricingSection,
+  supportContent
+}) => {
+  return (
+    <PricingPageStyled>
+      {pricingSection != null && <HeroSection {...pricingSection} />}
+      <div className='pricing-plans wrapper wrapper--responsive'>
+        {pricingPlanContent?.title && <h2 className='pricing-plans__title'>{pricingPlanContent.title}</h2>}
+        <div className='pricing-plans__cards'>
+          {pricingPlanContent?.plans?.length > 0 &&
+            pricingPlanContent?.plans?.map((plan) => <PlanBoxPricingSubscriptionCard key={plan?.id} {...plan} />)}
+        </div>
+      </div>
+      <CardBoxMinimalSection cards={helpResourcesCards} />
+      <div className='wrapper wrapper--responsive'>
+        <div className='benefits'>
+          {benefitsContent?.title && <h2 className='benefits__title'>{benefitsContent.title}</h2>}
+          <div className='benefits__cards'>
+            {benefitsContent?.benefitsList?.length > 0 &&
+              benefitsContent?.benefitsList?.map((benefit) => (
+                <BenefitCard hasShadow={false} key={benefit?.id} {...benefit} />
+              ))}
+          </div>
+        </div>
+      </div>
+      <div className='support-section'>
+        {supportContent?.title && (
+          <div className='support-section__content'>
+            <h2>{supportContent.title}</h2>
+            {supportContent.description}
+          </div>
+        )}
+        <CardBoxFeaturedSection cards={supportContent?.benefitsList} />
+      </div>
+      <div className='faqs-section'>
+        <FaqSection groups={faqsContent?.faqItems} givenClass='faqs-section__content wrapper wrapper--responsive' />
+      </div>
+    </PricingPageStyled>
+  )
+}

package/dist/src/components/pages/PricingPage/PricingPageProps.d.ts

@@ -0,0 +1,28 @@
+import { BenefitCardProps, CardBoxProps } from 'src/components/atoms';
+import { FaqGroupProps } from 'src/components/organisms';
+import { HeroSectionProps } from 'src/components/sections';
+import { PlanBoxPricingSubscriptionCardProps } from 'src/components/molecules';
+export interface BenefitContentProps {
+    title: string;
+    benefitsList: BenefitCardProps[];
+}
+export interface FaqsContentProps {
+    faqItems: FaqGroupProps[];
+}
+export interface PricingPlanContentProps {
+    title: string;
+    plans: PlanBoxPricingSubscriptionCardProps[];
+}
+export interface SupportContentProps {
+    title: string;
+    description: string;
+    benefitsList: CardBoxProps[];
+}
+export interface PricingPageProps {
+    benefitsContent: BenefitContentProps;
+    faqsContent: FaqsContentProps;
+    helpResourcesCards: CardBoxProps[];
+    supportContent: SupportContentProps;
+    pricingPlanContent: PricingPlanContentProps;
+    pricingSection: HeroSectionProps;
+}

package/dist/src/components/pages/PricingPage/PricingPageProps.js

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

package/dist/src/components/pages/PricingPage/PricingPageProps.ts

@@ -0,0 +1,33 @@
+import { BenefitCardProps, CardBoxProps } from 'src/components/atoms'
+import { FaqGroupProps } from 'src/components/organisms'
+import { HeroSectionProps } from 'src/components/sections'
+import { PlanBoxPricingSubscriptionCardProps } from 'src/components/molecules'
+
+export interface BenefitContentProps {
+  title: string
+  benefitsList: BenefitCardProps[]
+}
+
+export interface FaqsContentProps {
+  faqItems: FaqGroupProps[]
+}
+
+export interface PricingPlanContentProps {
+  title: string
+  plans: PlanBoxPricingSubscriptionCardProps[]
+}
+
+export interface SupportContentProps {
+  title: string
+  description: string
+  benefitsList: CardBoxProps[]
+}
+
+export interface PricingPageProps {
+  benefitsContent: BenefitContentProps
+  faqsContent: FaqsContentProps
+  helpResourcesCards: CardBoxProps[]
+  supportContent: SupportContentProps
+  pricingPlanContent: PricingPlanContentProps
+  pricingSection: HeroSectionProps
+}

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

@@ -0,0 +1,2 @@
+export { PricingPage } from './PricingPage';
+export * from './PricingPageProps';

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

@@ -0,0 +1,2 @@
+export { PricingPage } from './PricingPage';
+export * from './PricingPageProps';

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

@@ -0,0 +1,2 @@
+export { PricingPage } from './PricingPage'
+export * from './PricingPageProps'

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

@@ -0,0 +1,3 @@
+import { PricingPlansPageProps } from './PricingPlansPageProps';
+import React from 'react';
+export declare const PricingPlansPage: React.FC<PricingPlansPageProps>;

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

@@ -0,0 +1,58 @@
+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, isRedirectingToPayment }) => {
+    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, { isRedirectingToPayment: isRedirectingToPayment, 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

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

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

@@ -0,0 +1,107 @@
+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;
+  }
+`