init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
import { forwardRef, type ReactNode } from "react";
import { cn } from "../../utils/utils";
import { Button } from "../button/button";
import { EnterpriseBadge } from "../enterprise-badge/enterprise-badge";
import { Typography } from "../typography/typography";
import styles from "./enterprise-upgrade-overlay.module.scss";
 
/**
 * EnterpriseUpgradeOverlay Component
 *
 * A reusable overlay component that encourages users to upgrade to Enterprise plan.
 * Displays a centered card with an Enterprise badge, customizable messaging, and action buttons.
 *
 * Features:
 * - Gradient border effect with backdrop blur
 * - Customizable title, description, and button labels
 * - Optional "Learn more" button with configurable URL
 * - Flexible callback handlers for user interactions
 * - Consistent styling with design system
 *
 * @example
 * Basic usage:
 * ```tsx
 * <EnterpriseUpgradeOverlay
 *   title="Unlock Advanced Features"
 *   description="Get access to premium features with our Enterprise plan."
 *   onContactSales={() => console.log('Contact sales clicked')}
 * />
 * ```
 *
 * @example
 * Custom button labels and URL:
 * ```tsx
 * <EnterpriseUpgradeOverlay
 *   title="Get access to Project Dashboards!"
 *   description="Performance analytics are available within the Enterprise plan."
 *   primaryButtonLabel="Talk to Sales"
 *   secondaryButtonLabel="View Pricing"
 *   learnMoreUrl="https://humansignal.com/pricing"
 *   onContactSales={handleContactSales}
 * />
 * ```
 *
 * @example
 * Without "Learn more" button:
 * ```tsx
 * <EnterpriseUpgradeOverlay
 *   title="Premium Feature"
 *   description="This feature is available exclusively in our Enterprise plan."
 *   showLearnMore={false}
 *   onContactSales={handleContactSales}
 * />
 * ```
 */
 
export interface EnterpriseUpgradeOverlayProps {
  /** Main title displayed in the overlay */
  title?: ReactNode;
  /** Description text or content explaining the feature */
  description?: ReactNode;
  /** Name of the feature being promoted (used in default text) */
  feature?: string;
  /** Optional URL for the "Learn more" button */
  learnMoreUrl?: string;
  /** Optional custom label for the primary CTA button */
  primaryButtonLabel?: string;
  /** Optional custom label for the secondary button */
  secondaryButtonLabel?: string;
  /** Whether to show the "Learn more" button */
  showLearnMore?: boolean;
  /** Callback when contact sales button is clicked */
  onContactSales?: () => void;
  /** Callback when learn more button is clicked */
  onLearnMore?: () => void;
  /** Custom wrapper class name */
  className?: string;
  /** Test ID for testing */
  "data-testid"?: string;
}
 
export const EnterpriseUpgradeOverlay = forwardRef<HTMLDivElement, EnterpriseUpgradeOverlayProps>(
  (
    {
      title = "Get access to Enterprise Features",
      description = "This feature is available within the Enterprise plan. Contact our sales team to get access to this and more!",
      learnMoreUrl = "https://docs.humansignal.com",
      primaryButtonLabel = "Contact Sales",
      secondaryButtonLabel = "Learn more",
      showLearnMore = true,
      onContactSales,
      onLearnMore,
      className,
      "data-testid": testId,
    },
    ref,
  ) => {
    const handleContactSales = () => {
      onContactSales?.();
    };
 
    const handleLearnMore = () => {
      if (onLearnMore) {
        onLearnMore();
      } else {
        window.open(learnMoreUrl, "_blank");
      }
    };
 
    return (
      <div ref={ref} className={cn(styles.overlay, className)} data-testid={testId}>
        <div className={styles.container}>
          <div className={styles.content}>
            <div className={styles.badge}>
              <EnterpriseBadge filled />
            </div>
 
            <Typography variant="headline" size="medium" className={styles.title}>
              {title}
            </Typography>
 
            <Typography variant="body" size="medium" className={styles.description}>
              {description}
            </Typography>
 
            <div className={styles.actions}>
              <Button onClick={handleContactSales} size="medium">
                {primaryButtonLabel}
              </Button>
              {showLearnMore && (
                <Button onClick={handleLearnMore} variant="primary" look="outlined" size="medium">
                  {secondaryButtonLabel}
                </Button>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  },
);
 
EnterpriseUpgradeOverlay.displayName = "EnterpriseUpgradeOverlay";
 
export default EnterpriseUpgradeOverlay;