@npm_leadtech/legal-lib-components 7.60.0 → 7.61.1

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,64 @@
+import { FeatureItem, PlanCard } from '../../atoms'
+import {
+  FeaturesGrid,
+  FeaturesSection,
+  PlanSelector,
+  PlanWrapper,
+  PlansWrapper,
+  PricingContainerStyled,
+  SelectorButton
+} from './PricingPlansPage.styled'
+import { PricingPlansPageProps } from './PricingPlansPageProps'
+import React from 'react'
+
+export const PricingPlansPage: React.FC<PricingPlansPageProps> = ({
+  subscriptionPlans,
+  features,
+  onPlanSelect,
+  header
+}) => {
+  const [activePlanIndex, setActivePlanIndex] = React.useState(0)
+
+  return (
+    <>
+      {header}
+      {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,7 @@
+import { FeatureItemProp, SubscriptionPlan } from '../../atoms';
+export interface PricingPlansPageProps {
+    subscriptionPlans: SubscriptionPlan[];
+    features?: FeatureItemProp[];
+    onPlanSelect?: (sku: string) => void;
+    header?: React.ReactNode;
+}

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

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

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

@@ -0,0 +1,8 @@
+import { FeatureItemProp, SubscriptionPlan } from '../../atoms'
+
+export interface PricingPlansPageProps {
+  subscriptionPlans: SubscriptionPlan[]
+  features?: FeatureItemProp[]
+  onPlanSelect?: (sku: string) => void
+  header?: React.ReactNode
+}

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

@@ -319,6 +319,24 @@ html[data-theme='lawdistrictonline'] {
 }
 
 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;