@npm_leadtech/legal-lib-components 7.63.4 → 7.63.6

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.styled.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+export const PricingHeaderStyled = styled.header `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+`;
+export const PhoneButtonStyled = styled.a `
+  display: none;
+  align-items: center;
+  gap: 0.25rem;
+  height: 2.5rem;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid var(--neutral-neutral-4);
+  font-size: 14px;
+  color: var(--primary-main);
+  @media (max-width: 768px) {
+    display: flex;
+  }
+`;
+export const PhoneNumberStyled = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--neutral-neutral-2);
+  height: 2.5rem;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.styled.tsx

@@ -0,0 +1,37 @@
+import styled from 'styled-components'
+
+export const PricingHeaderStyled = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+`
+
+export const PhoneButtonStyled = styled.a`
+  display: none;
+  align-items: center;
+  gap: 0.25rem;
+  height: 2.5rem;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid var(--neutral-neutral-4);
+  font-size: 14px;
+  color: var(--primary-main);
+  @media (max-width: 768px) {
+    display: flex;
+  }
+`
+
+export const PhoneNumberStyled = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--neutral-neutral-2);
+  height: 2.5rem;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.tsx

@@ -0,0 +1,21 @@
+import { PhoneButtonStyled, PhoneNumberStyled, PricingHeaderStyled } from './PricingPageHeader.styled'
+import { Logo } from '../../atoms'
+import { PhoneIcon } from '../../../../images/componentsSvg/PhoneIcon'
+import { PricingHeaderProps } from './PricingPageHeaderProps'
+import React from 'react'
+
+export const PricingPageHeader: React.FC<PricingHeaderProps> = ({ siteName = 'Legalfinity', phoneNumber }) => {
+  return (
+    <PricingHeaderStyled>
+      <Logo siteName={siteName} width='150' height='26' />
+      <PhoneNumberStyled>
+        <PhoneIcon width={16} height={16} fill='#6d7275' />
+        <strong>{phoneNumber}</strong>
+      </PhoneNumberStyled>
+      <PhoneButtonStyled href={`tel:${phoneNumber}`} target='__self'>
+        <PhoneIcon width={24} height={24} fill='currentColor' />
+        <strong>{'Call Us'}</strong>
+      </PhoneButtonStyled>
+    </PricingHeaderStyled>
+  )
+}

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeaderProps.d.ts

@@ -0,0 +1,4 @@
+export interface PricingHeaderProps {
+    siteName?: string;
+    phoneNumber?: string;
+}

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeaderProps.js

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

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeaderProps.ts

@@ -0,0 +1,4 @@
+export interface PricingHeaderProps {
+  siteName?: string
+  phoneNumber?: string
+}

package/dist/src/components/organisms/PricingPageHeader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PricingPageHeader';
+export * from './PricingPageHeaderProps';

package/dist/src/components/organisms/PricingPageHeader/index.js

@@ -0,0 +1,2 @@
+export * from './PricingPageHeader';
+export * from './PricingPageHeaderProps';

package/dist/src/components/organisms/PricingPageHeader/index.ts

@@ -0,0 +1,2 @@
+export * from './PricingPageHeader'
+export * from './PricingPageHeaderProps'

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

@@ -36,3 +36,4 @@ export * from './MobileMenu';
 export * from './MobilePanel';
 export * from './DesktopMenu';
 export * from './VisibleEnvVariables';
+export * from './PricingPageHeader';

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

@@ -36,3 +36,4 @@ export * from './MobileMenu';
 export * from './MobilePanel';
 export * from './DesktopMenu';
 export * from './VisibleEnvVariables';
+export * from './PricingPageHeader';

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

@@ -36,3 +36,4 @@ export * from './MobileMenu'
 export * from './MobilePanel'
 export * from './DesktopMenu'
 export * from './VisibleEnvVariables'
+export * from './PricingPageHeader'

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,9 @@
+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';
+export const PricingPlansPage = ({ subscriptionPlans, features, onPlanSelect, headerDivider, siteName = 'Legalfinity', phoneNumber }) => {
+    const [activePlanIndex, setActivePlanIndex] = React.useState(0);
+    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, { 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))) }) }))] }))] }));
+};

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,87 @@
+import styled, { css } from 'styled-components';
+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: 768px) {
+    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: 768px) {
+    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: 768px) {
+    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: 768px) {
+    display: flex;
+    justify-content: center;
+  }
+`;

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

@@ -0,0 +1,106 @@
+import styled, { css } from 'styled-components'
+
+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: 768px) {
+    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: 768px) {
+    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: 768px) {
+    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: 768px) {
+    display: flex;
+    justify-content: center;
+  }
+`

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

@@ -0,0 +1,68 @@
+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'
+
+export const PricingPlansPage: React.FC<PricingPlansPageProps> = ({
+  subscriptionPlans,
+  features,
+  onPlanSelect,
+  headerDivider,
+  siteName = 'Legalfinity',
+  phoneNumber
+}) => {
+  const [activePlanIndex, setActivePlanIndex] = React.useState(0)
+
+  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>
+            {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>
+          )}
+        </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'