@npm_leadtech/legal-lib-components 7.60.0 → 7.61.1

package/dist/css/styles.css

@@ -532,6 +532,23 @@ html[data-theme=lawdistrictonline] {
   --others-black: #000;
 }
 html[data-theme=legalfinity] {
+  --button: #1039f5;
+  --button-secondary: #1039f5;
+  --button-hover: #3970ff;
+  --button-tertiary: #3970ff;
+  --button-2: #07144b;
+  --button-4: #07144b;
+  --button-2-hover: #163399;
+  --button-4-hover: #163399;
+  --snackbar-success-color: #163399;
+  --button-4-color: #e9f5ff;
+  --button-secondary-hover: #d7ecff;
+  --feeback-success: #d7ecff;
+  --button-tertiary-hover: #b7daff;
+  --snackbar-success-bg: #8bc1ff;
+  --snackbar-success-border: #5e99ff;
+  --snackbar-reminder-bg: #f98116;
+  --snackbar-reminder-border: #ea660c;
   --primary-main-light-6: #e9f5ff;
   --primary-main-light-5: #d7ecff;
   --primary-main-light-4: #b7daff;

package/dist/src/components/atoms/FeatureItem/FeatureItem.d.ts

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

package/dist/src/components/atoms/FeatureItem/FeatureItem.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FeatureCard } from './FeatureItem.styled';
+export const FeatureItem = ({ feature }) => {
+    return (_jsxs(FeatureCard, { children: [_jsx("img", { src: feature?.icon?.url, alt: 'Feature Icon', width: 16, height: 16 }), _jsx("span", { children: feature?.description })] }));
+};

package/dist/src/components/atoms/FeatureItem/FeatureItem.styled.d.ts

@@ -0,0 +1 @@
+export declare const FeatureCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

package/dist/src/components/atoms/FeatureItem/FeatureItem.styled.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+export const FeatureCard = styled.li `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 1rem 0.5rem 1rem 1rem;
+  border-radius: 1rem;
+  background-color: white;
+
+  img {
+    margin-bottom: 0.5rem;
+  }
+
+  span {
+    font-size: 14px;
+    font-weight: 400;
+  }
+`;

package/dist/src/components/atoms/FeatureItem/FeatureItem.styled.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const FeatureCard = styled.li`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 1rem 0.5rem 1rem 1rem;
+  border-radius: 1rem;
+  background-color: white;
+
+  img {
+    margin-bottom: 0.5rem;
+  }
+
+  span {
+    font-size: 14px;
+    font-weight: 400;
+  }
+`

package/dist/src/components/atoms/FeatureItem/FeatureItem.tsx

@@ -0,0 +1,12 @@
+import { FeatureCard } from './FeatureItem.styled'
+import { FeatureItemProps } from './FeatureItemProps'
+import React from 'react'
+
+export const FeatureItem: React.FC<FeatureItemProps> = ({ feature }) => {
+  return (
+    <FeatureCard>
+      <img src={feature?.icon?.url} alt='Feature Icon' width={16} height={16} />
+      <span>{feature?.description}</span>
+    </FeatureCard>
+  )
+}

package/dist/src/components/atoms/FeatureItem/FeatureItemProps.d.ts

@@ -0,0 +1,9 @@
+export interface FeatureItemProps {
+    feature: FeatureItemProp;
+}
+export interface FeatureItemProp {
+    description?: string;
+    icon: {
+        url?: string;
+    };
+}

package/dist/src/components/atoms/FeatureItem/FeatureItemProps.js

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

package/dist/src/components/atoms/FeatureItem/FeatureItemProps.ts

@@ -0,0 +1,10 @@
+export interface FeatureItemProps {
+  feature: FeatureItemProp
+}
+
+export interface FeatureItemProp {
+  description?: string
+  icon: {
+    url?: string
+  }
+}

package/dist/src/components/atoms/FeatureItem/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FeatureItem';
+export * from './FeatureItemProps';

package/dist/src/components/atoms/FeatureItem/index.js

@@ -0,0 +1,2 @@
+export * from './FeatureItem';
+export * from './FeatureItemProps';

package/dist/src/components/atoms/FeatureItem/index.ts

@@ -0,0 +1,2 @@
+export * from './FeatureItem'
+export * from './FeatureItemProps'

package/dist/src/components/atoms/PlanCard/PlanCard.d.ts

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

package/dist/src/components/atoms/PlanCard/PlanCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Benefit, BenefitsList, Divider, PlanCardContainer, PlanTitle, Price, PriceLabel, PricingInfo } from './PlanCard.styled';
+import { Button } from '../Button';
+export const PlanCard = ({ plan, onSelect }) => {
+    return (_jsxs(PlanCardContainer, { children: [_jsx(PlanTitle, { className: plan?.highlightPlan ? 'highlight' : 'asdfasdf', children: plan?.subscription_type?.name }), _jsxs(PricingInfo, { children: [_jsx(Price, { children: plan?.pricing }), _jsx(PriceLabel, { children: plan?.pricingLabel })] }), _jsx(Button, { label: plan?.buttonText ?? '', dataQa: `${plan?.subscription_type?.name.replaceAll(' ', '')}-button`, noLink: true, onClick: () => onSelect?.(plan?.subscription_type?.sku ?? ''), givenClass: 'pricing-plan__button', color: plan?.highlightPlan ? 'primary' : 'transparent' }), _jsx(Divider, {}), _jsx(BenefitsList, { children: plan?.benefits?.map((item) => (_jsxs(Benefit, { className: item?.type == 'default' ? 'default' : 'ai-benefit', children: [item?.icon, _jsx("p", { dangerouslySetInnerHTML: { __html: item?.benefit } })] }, item?.benefit))) })] }));
+};

package/dist/src/components/atoms/PlanCard/PlanCard.styled.d.ts

@@ -0,0 +1,8 @@
+export declare const PlanCardContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PlanTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const PricingInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Price: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const PriceLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>> & string;
+export declare const BenefitsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const Benefit: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

package/dist/src/components/atoms/PlanCard/PlanCard.styled.js

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+export const PlanCardContainer = styled.div `
+  text-align: center;
+  gap: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 1.5rem;
+
+  .pricing-plan__button {
+    width: 100%;
+  }
+`;
+export const PlanTitle = styled.span `
+  border-radius: 8px;
+  padding: 0.5rem 1rem;
+  background-color: var(--neutral-neutral-4);
+  font-size: large;
+  font-weight: 700;
+  &.highlight {
+    background-color: var(--primary-main-light-4);
+  }
+`;
+export const PricingInfo = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export const Price = styled.h4 `
+  font-size: 36px;
+  font-weight: 700;
+  margin: 0 0 -0.5rem 0;
+`;
+export const PriceLabel = styled.span `
+  font-size: 14px;
+`;
+export const Divider = styled.hr `
+  border: 1px solid black;
+  width: 100%;
+`;
+export const BenefitsList = styled.ul `
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+export const Benefit = styled.li `
+  display: flex;
+  align-items: start;
+  box-sizing: border-box;
+  padding: 0 1rem;
+
+  &.ai-benefit {
+    background-color: var(--primary-main-light-5);
+    padding: 1rem;
+    border-radius: 0.5rem;
+  }
+
+  p {
+    text-align: left;
+    font-size: 14px;
+  }
+
+  svg {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 0.3rem;
+    margin-right: 0.5rem;
+  }
+`;

package/dist/src/components/atoms/PlanCard/PlanCard.styled.ts

@@ -0,0 +1,83 @@
+import styled from 'styled-components'
+
+export const PlanCardContainer = styled.div`
+  text-align: center;
+  gap: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 1.5rem;
+
+  .pricing-plan__button {
+    width: 100%;
+  }
+`
+
+export const PlanTitle = styled.span`
+  border-radius: 8px;
+  padding: 0.5rem 1rem;
+  background-color: var(--neutral-neutral-4);
+  font-size: large;
+  font-weight: 700;
+  &.highlight {
+    background-color: var(--primary-main-light-4);
+  }
+`
+
+export const PricingInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+export const Price = styled.h4`
+  font-size: 36px;
+  font-weight: 700;
+  margin: 0 0 -0.5rem 0;
+`
+
+export const PriceLabel = styled.span`
+  font-size: 14px;
+`
+
+export const Divider = styled.hr`
+  border: 1px solid black;
+  width: 100%;
+`
+
+export const BenefitsList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`
+
+export const Benefit = styled.li`
+  display: flex;
+  align-items: start;
+  box-sizing: border-box;
+  padding: 0 1rem;
+
+  &.ai-benefit {
+    background-color: var(--primary-main-light-5);
+    padding: 1rem;
+    border-radius: 0.5rem;
+  }
+
+  p {
+    text-align: left;
+    font-size: 14px;
+  }
+
+  svg {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 0.3rem;
+    margin-right: 0.5rem;
+  }
+`

package/dist/src/components/atoms/PlanCard/PlanCard.tsx

@@ -0,0 +1,42 @@
+import {
+  Benefit,
+  BenefitsList,
+  Divider,
+  PlanCardContainer,
+  PlanTitle,
+  Price,
+  PriceLabel,
+  PricingInfo
+} from './PlanCard.styled'
+import { Button } from '../Button'
+import { PlanCardProps } from './PlanCardProps'
+import React from 'react'
+
+export const PlanCard: React.FC<PlanCardProps> = ({ plan, onSelect }) => {
+  return (
+    <PlanCardContainer>
+      <PlanTitle className={plan?.highlightPlan ? 'highlight' : 'asdfasdf'}>{plan?.subscription_type?.name}</PlanTitle>
+      <PricingInfo>
+        <Price>{plan?.pricing}</Price>
+        <PriceLabel>{plan?.pricingLabel}</PriceLabel>
+      </PricingInfo>
+      <Button
+        label={plan?.buttonText ?? ''}
+        dataQa={`${plan?.subscription_type?.name.replaceAll(' ', '')}-button`}
+        noLink
+        onClick={() => onSelect?.(plan?.subscription_type?.sku ?? '')}
+        givenClass='pricing-plan__button'
+        color={plan?.highlightPlan ? 'primary' : 'transparent'}
+      />
+      <Divider />
+      <BenefitsList>
+        {plan?.benefits?.map((item) => (
+          <Benefit key={item?.benefit} className={item?.type == 'default' ? 'default' : 'ai-benefit'}>
+            {item?.icon}
+            <p dangerouslySetInnerHTML={{ __html: item?.benefit }}></p>
+          </Benefit>
+        ))}
+      </BenefitsList>
+    </PlanCardContainer>
+  )
+}

package/dist/src/components/atoms/PlanCard/PlanCardProps.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface PlanCardProps {
+    plan: SubscriptionPlan;
+    onSelect?: (sku: string) => void;
+}
+export interface SubscriptionPlan {
+    benefits?: Benefit[];
+    pricing?: string;
+    pricingLabel?: string;
+    buttonText?: string;
+    highlightPlan?: boolean;
+    subscription_type?: SubscriptionType;
+}
+interface Benefit {
+    type: 'default' | 'lawgenius';
+    benefit: string;
+    icon: ReactNode;
+}
+interface SubscriptionType {
+    name: string;
+    sku: string;
+}
+export {};

package/dist/src/components/atoms/PlanCard/PlanCardProps.js

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

package/dist/src/components/atoms/PlanCard/PlanCardProps.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react'
+
+export interface PlanCardProps {
+  plan: SubscriptionPlan
+  onSelect?: (sku: string) => void
+}
+
+export interface SubscriptionPlan {
+  benefits?: Benefit[]
+  pricing?: string
+  pricingLabel?: string
+  buttonText?: string
+  highlightPlan?: boolean
+  subscription_type?: SubscriptionType
+}
+
+interface Benefit {
+  type: 'default' | 'lawgenius'
+  benefit: string
+  icon: ReactNode
+}
+
+interface SubscriptionType {
+  name: string
+  sku: string
+}

package/dist/src/components/atoms/PlanCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PlanCard';
+export * from './PlanCardProps';

package/dist/src/components/atoms/PlanCard/index.js

@@ -0,0 +1,2 @@
+export * from './PlanCard';
+export * from './PlanCardProps';

package/dist/src/components/atoms/PlanCard/index.ts

@@ -0,0 +1,2 @@
+export * from './PlanCard'
+export * from './PlanCardProps'

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

@@ -69,3 +69,5 @@ export * from './WideInfoBar';
 export * from './MobileTrigger';
 export * from './PhoneNumberDisplay';
 export * from './ContactInformationHeader';
+export * from './FeatureItem';
+export * from './PlanCard';

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

@@ -69,3 +69,5 @@ export * from './WideInfoBar';
 export * from './MobileTrigger';
 export * from './PhoneNumberDisplay';
 export * from './ContactInformationHeader';
+export * from './FeatureItem';
+export * from './PlanCard';

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

@@ -69,3 +69,5 @@ export * from './WideInfoBar'
 export * from './MobileTrigger'
 export * from './PhoneNumberDisplay'
 export * from './ContactInformationHeader'
+export * from './FeatureItem'
+export * from './PlanCard'

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,8 @@
+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 React from 'react';
+export const PricingPlansPage = ({ subscriptionPlans, features, onPlanSelect, header }) => {
+    const [activePlanIndex, setActivePlanIndex] = React.useState(0);
+    return (_jsxs(_Fragment, { children: [header, 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;
+  }
+`;