feat(funnels): CTA micro-liners to fact screen (#4502)

Co-authored-by: Lee Hansel Solevilla <[email protected]>
Co-authored-by: Lee Hansel Solevilla <[email protected]>

Author: AmarTrebinjac

packages/shared/src/components/Badge.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+import React from 'react';
+import {
+  Typography,
+  TypographyTag,
+  TypographyType,
+} from './typography/Typography';
+
+type BadgeProps = {
+  icon?: ReactNode;
+  label: string;
+  variant: 'primary' | 'onion';
+};
+
+const variantToClassName: Record<BadgeProps['variant'], string> = {
+  primary: 'border-border-subtlest-secondary text-surface-primary',
+  onion: 'border-overlay-secondary-onion text-accent-onion-subtler',
+};
+
+export const Badge = ({ label, icon, variant }: BadgeProps) => {
+  return (
+    <div
+      className={classNames(
+        variantToClassName[variant],
+        'flex items-center gap-1 rounded-20 border px-3 py-2',
+      )}
+    >
+      {icon}
+      <Typography type={TypographyType.Body} bold tag={TypographyTag.P}>
+        {label}
+      </Typography>
+    </div>
+  );
+};

packages/shared/src/features/onboarding/shared/FunnelStepCtaWrapper.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import type { ButtonProps } from '../../../components/buttons/Button';
 import {
@@ -10,10 +10,17 @@ import {
 } from '../../../components/buttons/Button';
 import { FunnelTargetId } from '../types/funnelEvents';
 import { MoveToIcon } from '../../../components/icons';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { sanitizeMessage } from './utils';
 
 export type FunnelStepCtaWrapperProps = ButtonProps<'button'> & {
   cta?: {
     label?: string;
+    note?: string;
   };
   containerClassName?: string;
   skip?: ButtonProps<'button'> & {
@@ -29,10 +36,28 @@ export function FunnelStepCtaWrapper({
   containerClassName,
   ...props
 }: FunnelStepCtaWrapperProps): ReactElement {
+  const note = useMemo(() => {
+    if (!cta?.note) {
+      return null;
+    }
+
+    const sanitized = sanitizeMessage(cta.note);
+
+    return (
+      <Typography
+        className="text-center"
+        type={TypographyType.Title3}
+        color={TypographyColor.Primary}
+        dangerouslySetInnerHTML={{ __html: sanitized }}
+      />
+    );
+  }, [cta?.note]);
+
   return (
     <div className="relative flex flex-1 flex-col gap-4">
       <div className={classNames('flex-1', containerClassName)}>{children}</div>
       <div className="sticky bottom-2 m-4 flex flex-col gap-4">
+        {note}
         <Button
           className={classNames(className, 'w-full')}
           data-funnel-track={FunnelTargetId.StepCta}

packages/shared/src/features/onboarding/shared/StepHeadline.tsx

@@ -37,7 +37,7 @@ export const StepHeadline = ({
   return (
     <div
       data-testid="step-headline-container"
-      className={classNames('flex flex-col gap-2', className, {
+      className={classNames('flex flex-col gap-4', className, {
         'text-left': align === StepHeadlineAlign.Left,
         'text-center': align === StepHeadlineAlign.Center,
         'text-right': align === StepHeadlineAlign.Right,

packages/shared/src/features/onboarding/steps/FunnelFact/FunnelFact.spec.tsx

@@ -3,6 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { FunnelFact } from '.';
 import { FunnelStepType } from '../../types/funnel';
 import type { FunnelStepFact } from '../../types/funnel';
+import { StepHeadlineAlign } from '../../shared';
 
 const mockOnTransition = jest.fn();
 
@@ -13,7 +14,7 @@ const defaultProps: FunnelStepFact = {
   parameters: {
     headline: 'Test Headline',
     explainer: 'Test explanation text',
-    align: 'center',
+    align: StepHeadlineAlign.Center,
     cta: 'Continue',
   },
   onTransition: mockOnTransition,
@@ -36,6 +37,21 @@ describe('FunnelFact', () => {
     ).toBeInTheDocument();
   });
 
+  it('should render badge when provided', async () => {
+    renderComponent({
+      parameters: {
+        ...defaultProps.parameters,
+        badge: {
+          cta: 'Badge CTA',
+          variant: 'primary',
+          placement: 'top',
+        },
+      },
+    });
+
+    expect(await screen.findByText('Badge CTA')).toBeInTheDocument();
+  });
+
   it('should call onTransition when button is clicked', async () => {
     renderComponent();
     const button = await screen.findByText('Continue');
@@ -85,7 +101,7 @@ describe('FunnelFact', () => {
     renderComponent({
       parameters: {
         ...defaultProps.parameters,
-        align: 'left',
+        align: StepHeadlineAlign.Left,
       },
     });
 

packages/shared/src/features/onboarding/steps/FunnelFact/FunnelFactCentered.tsx

@@ -11,15 +11,27 @@ import {
   ButtonVariant,
   ButtonIconPosition,
 } from '../../../../components/buttons/common';
-import { MoveToIcon } from '../../../../components/icons';
+import {
+  MoveToIcon,
+  ReputationLightningIcon,
+} from '../../../../components/icons';
 import { FunnelTargetId } from '../../types/funnelEvents';
+import { Badge } from '../../../../components/Badge';
 
 export const FunnelFactCentered = (props: FunnelStepFact): ReactElement => {
   const { parameters, transitions, onTransition } = props;
+  const { badge, headline, explainer, align, visualUrl } = parameters;
   const skip = useMemo(
     () => transitions.find((t) => t.on === FunnelStepTransitionType.Skip),
     [transitions],
   );
+  const badgeComponent = !badge?.cta ? null : (
+    <Badge
+      label={badge.cta}
+      icon={<ReputationLightningIcon className="h-6 w-6" secondary />}
+      variant={badge.variant}
+    />
+  );
 
   return (
     <FunnelFactWrapper {...props}>
@@ -42,27 +54,30 @@ export const FunnelFactCentered = (props: FunnelStepFact): ReactElement => {
             {skip?.cta ?? 'Skip'}
           </Button>
         )}
-        {parameters?.visualUrl && (
+        {visualUrl && (
           <>
             <Head>
-              <link rel="preload" as="image" href={parameters.visualUrl} />
+              <link rel="preload" as="image" href={visualUrl} />
             </Head>
             <LazyImage
               aria-hidden
               eager
-              imgSrc={parameters?.visualUrl}
+              imgSrc={visualUrl}
               className="max-h-[25rem] w-full flex-1"
               imgAlt="Supportive illustration for the information"
               fit="contain"
             />
           </>
         )}
-        <StepHeadline
-          className="!gap-6"
-          heading={parameters?.headline}
-          description={parameters?.explainer}
-          align={parameters?.align}
-        />
+        <div className="flex flex-col items-center gap-4">
+          {badge?.placement === 'top' && badgeComponent}
+          <StepHeadline
+            heading={headline}
+            description={explainer}
+            align={align}
+          />
+          {badge?.placement === 'bottom' && badgeComponent}
+        </div>
       </div>
     </FunnelFactWrapper>
   );

packages/shared/src/features/onboarding/steps/FunnelFact/FunnelFactDefault.tsx

@@ -6,19 +6,24 @@ import { StepHeadline } from '../../shared';
 import type { FunnelStepFact } from '../../types/funnel';
 import { FunnelStepTransitionType } from '../../types/funnel';
 import { LazyImage } from '../../../../components/LazyImage';
+import { Badge } from '../../../../components/Badge';
+import {
+  ReputationLightningIcon,
+  MoveToIcon,
+} from '../../../../components/icons';
 import { FunnelFactWrapper } from './FunnelFactWrapper';
 import { Button } from '../../../../components/buttons/Button';
 import {
   ButtonVariant,
   ButtonIconPosition,
 } from '../../../../components/buttons/common';
-import { MoveToIcon } from '../../../../components/icons';
 import { FunnelTargetId } from '../../types/funnelEvents';
 
 export const FunnelFactDefault = (props: FunnelStepFact): ReactElement => {
   const { parameters, transitions, onTransition } = props;
-  const isLayoutReversed =
-    parameters.layout === 'reversed' || parameters.reverse;
+  const { badge, headline, explainer, align, reverse, layout, visualUrl } =
+    parameters;
+  const isLayoutReversed = layout === 'reversed' || reverse;
   const skip = useMemo(
     () => transitions.find((t) => t.on === FunnelStepTransitionType.Skip),
     [transitions],
@@ -37,6 +42,14 @@ export const FunnelFactDefault = (props: FunnelStepFact): ReactElement => {
     </Button>
   );
 
+  const badgeComponent = !badge?.cta ? null : (
+    <Badge
+      label={badge.cta}
+      icon={<ReputationLightningIcon className="h-6 w-6" secondary />}
+      variant={badge.variant}
+    />
+  );
+
   return (
     <FunnelFactWrapper {...props}>
       <div
@@ -48,21 +61,25 @@ export const FunnelFactDefault = (props: FunnelStepFact): ReactElement => {
             : 'flex-col justify-between',
         )}
       >
-        {skip?.placement === 'top' && !isLayoutReversed && skipButton}
-        <StepHeadline
-          heading={parameters?.headline}
-          description={parameters?.explainer}
-          align={parameters?.align}
-        />
-        {parameters?.visualUrl && (
+        <div className="flex flex-col items-center gap-4">
+          {badge?.placement === 'top' && badgeComponent}
+          {skip?.placement === 'top' && !isLayoutReversed && skipButton}
+          <StepHeadline
+            heading={headline}
+            description={explainer}
+            align={align}
+          />
+          {badge?.placement === 'bottom' && badgeComponent}
+        </div>
+        {visualUrl && (
           <>
             <Head>
-              <link rel="preload" as="image" href={parameters.visualUrl} />
+              <link rel="preload" as="image" href={visualUrl} />
             </Head>
             <LazyImage
               aria-hidden
               eager
-              imgSrc={parameters?.visualUrl}
+              imgSrc={visualUrl}
               className="h-auto w-full object-cover"
               ratio="64%"
               imgAlt="Supportive illustration for the information"

packages/shared/src/features/onboarding/steps/FunnelFact/FunnelFactWrapper.tsx

@@ -9,6 +9,7 @@ export const FunnelFactWrapper = ({
   ...props
 }: PropsWithChildren<FunnelStepFact>) => {
   const { parameters, onTransition, transitions } = props;
+  const { cta, ctaNote } = parameters;
   const skip = useMemo(
     () => transitions.find((t) => t.on === FunnelStepTransitionType.Skip),
     [transitions],
@@ -25,7 +26,7 @@ export const FunnelFactWrapper = ({
   return (
     <FunnelStepCtaWrapper
       containerClassName="flex"
-      cta={{ label: parameters?.cta ?? 'Next' }}
+      cta={{ label: cta ?? 'Next', note: ctaNote }}
       onClick={() =>
         onTransition({
           type: FunnelStepTransitionType.Complete,

packages/shared/src/features/onboarding/types/funnel.ts

@@ -110,7 +110,13 @@ export interface FunnelStepLoading
 export interface FunnelStepFactParameters {
   headline: string;
   cta?: string;
+  ctaNote?: string;
   reverse?: boolean;
+  badge?: {
+    placement?: 'bottom' | 'top';
+    cta?: string;
+    variant?: 'primary' | 'onion';
+  };
   explainer: string;
   align: StepHeadlineAlign;
   visualUrl?: string;