@umituz/web-dashboard 6.0.0 → 6.2.0

package/src/domains/onboarding/components/screens/AccountGateScreen.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { PrimaryButton } from '../PrimaryButton';
+import {
+  accountGateAllowsSkip,
+  hasOnSignIn,
+} from '../../predicates/has-handler';
+import { useOnboardingIntl } from '../OnboardingIntl';
+import type { AccountGateScreenConfig, SignInMethod } from '../../types/screens';
+import type { OnboardingLabels } from '../../types/config';
+
+export interface AccountGateScreenProps {
+  config: AccountGateScreenConfig;
+  onNext: (data: { signedIn: boolean; method?: SignInMethod }) => void;
+}
+
+function methodLabel(method: SignInMethod, labels: OnboardingLabels): string {
+  switch (method) {
+    case 'email':
+      return labels.continueWithEmail;
+    case 'google':
+      return labels.continueWithGoogle;
+    case 'apple':
+      return labels.continueWithApple;
+    case 'github':
+      return labels.continueWithGitHub;
+  }
+}
+
+export function AccountGateScreen({ config, onNext }: AccountGateScreenProps) {
+  const { labels } = useOnboardingIntl();
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSignIn(method: SignInMethod) {
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await config.onSignIn(method);
+      onNext(result);
+    } catch (e) {
+      const message = e instanceof Error ? e.message : labels.signInFailed;
+      setError(message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="udb-onb-stage">
+      {config.title && <h2 className="udb-onb-title udb-onb-title--display">{config.title}</h2>}
+      {config.subtitle && <p className="udb-onb-lead">{config.subtitle}</p>}
+      {error && (
+        <p role="alert" className="udb-onb-error">
+          {error}
+        </p>
+      )}
+      <div className="udb-onb-question__body">
+        {config.signInMethod && hasOnSignIn(config) && (
+          <PrimaryButton
+            onClick={() => handleSignIn(config.signInMethod as SignInMethod)}
+            loading={busy}
+          >
+            {methodLabel(config.signInMethod, labels)}
+          </PrimaryButton>
+        )}
+        {accountGateAllowsSkip(config) && (
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => onNext({ signedIn: false })}
+            className="udb-onb-link"
+          >
+            {config.skipText ?? labels.skipForNow}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/domains/onboarding/components/screens/AppDemoScreen.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { PrimaryButton } from '../PrimaryButton';
+import { useOnboardingIntl } from '../OnboardingIntl';
+import type { AppDemoScreenConfig } from '../../types/screens';
+
+export interface AppDemoScreenProps {
+  config: AppDemoScreenConfig;
+  onNext: (data: { result: unknown }) => void;
+}
+
+export function AppDemoScreen({ config, onNext }: AppDemoScreenProps) {
+  const { labels } = useOnboardingIntl();
+  const [result, setResult] = useState<unknown>(null);
+  const Demo = config.demo.component;
+
+  return (
+    <div className="udb-onb-proof">
+      {config.title && <h2 className="udb-onb-title">{config.title}</h2>}
+      <div className="udb-onb-demo">
+        <Demo
+          {...((config.demo.props ?? {}) as Record<string, unknown>)}
+          onSave={(value: unknown) => {
+            setResult(value);
+            config.demo.onSave(value);
+          }}
+        />
+      </div>
+      <PrimaryButton onClick={() => onNext({ result })} disabled={result === null}>
+        {config.cta ?? labels.continueWithResult}
+      </PrimaryButton>
+    </div>
+  );
+}

package/src/domains/onboarding/components/screens/ComparisonScreen.tsx

@@ -0,0 +1,49 @@
+import { Check, X } from 'lucide-react';
+import { PrimaryButton } from '../PrimaryButton';
+import { useOnboardingIntl } from '../OnboardingIntl';
+import type { ComparisonScreenConfig } from '../../types/screens';
+
+export interface ComparisonScreenProps {
+  config: ComparisonScreenConfig;
+  onNext: () => void;
+}
+
+export function ComparisonScreen({ config, onNext }: ComparisonScreenProps) {
+  const { labels } = useOnboardingIntl();
+  return (
+    <div className="udb-onb-proof">
+      {config.title && <h2 className="udb-onb-title">{config.title}</h2>}
+      <div className="udb-onb-compare">
+        <ComparisonColumn heading={labels.withoutUs} items={config.before} tone="negative" />
+        <ComparisonColumn heading={labels.withUs} items={config.after} tone="positive" />
+      </div>
+      <PrimaryButton onClick={onNext}>{config.cta ?? labels.continueAction}</PrimaryButton>
+    </div>
+  );
+}
+
+interface ComparisonColumnProps {
+  heading: string;
+  items: ReadonlyArray<string>;
+  tone: 'positive' | 'negative';
+}
+
+function ComparisonColumn({ heading, items, tone }: ComparisonColumnProps) {
+  const Icon = tone === 'positive' ? Check : X;
+  return (
+    <div className={`udb-onb-compare__col udb-onb-compare__col--${tone === 'positive' ? 'pos' : 'neg'}`}>
+      <h3 className="udb-onb-compare__heading">{heading}</h3>
+      <ul className="udb-onb-list">
+        {items.map((item) => (
+          <li key={item} className="udb-onb-compare__item">
+            <Icon
+              className={`udb-onb-icon--sm udb-onb-compare__icon udb-onb-compare__icon--${tone === 'positive' ? 'pos' : 'neg'}`}
+              aria-hidden="true"
+            />
+            <span>{item}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/domains/onboarding/components/screens/GoalQuestionScreen.tsx

@@ -0,0 +1,59 @@
+import { useCallback, useState } from 'react';
+import { OptionCard } from '@umituz/web-design-system/molecules';
+import { PrimaryButton } from '../PrimaryButton';
+import { QuestionWrapper } from '../QuestionWrapper';
+import { renderBundledIcon } from '../renderBundledIcon';
+import { useOnboardingIntl } from '../OnboardingIntl';
+import type { GoalQuestionScreenConfig } from '../../types/screens';
+
+export interface GoalQuestionScreenProps {
+  config: GoalQuestionScreenConfig;
+  onNext: (data: { selected: string[] }) => void;
+  initialSelected?: ReadonlyArray<string>;
+}
+
+export function GoalQuestionScreen({ config, onNext, initialSelected }: GoalQuestionScreenProps) {
+  const { labels } = useOnboardingIntl();
+  const [selected, setSelected] = useState<string[]>([...(initialSelected ?? [])]);
+  const multiSelect = config.multiSelect ?? false;
+
+  const toggle = useCallback(
+    (id: string) => {
+      setSelected((prev) => {
+        if (multiSelect) {
+          return prev.includes(id) ? prev.filter((p) => p !== id) : [...prev, id];
+        }
+        return prev.includes(id) ? [] : [id];
+      });
+    },
+    [multiSelect],
+  );
+
+  return (
+    <QuestionWrapper
+      title={config.question}
+      subtitle={multiSelect ? labels.selectAllThatApply : labels.selectOne}
+    >
+      <div
+        className="udb-onb-list"
+        role={multiSelect ? 'group' : 'radiogroup'}
+        aria-label={config.question}
+      >
+        {config.options.map((option) => (
+          <OptionCard
+            key={option.id}
+            label={option.label}
+            description={option.description}
+            icon={renderBundledIcon(option.iconName)}
+            selected={selected.includes(option.id)}
+            onSelect={() => toggle(option.id)}
+            multiSelect={multiSelect}
+          />
+        ))}
+      </div>
+      <PrimaryButton onClick={() => onNext({ selected })} disabled={selected.length === 0}>
+        {config.cta ?? labels.continueAction}
+      </PrimaryButton>
+    </QuestionWrapper>
+  );
+}

package/src/domains/onboarding/components/screens/PainPointsScreen.tsx

@@ -0,0 +1,65 @@
+import { useCallback, useState } from 'react';
+import { OptionCard } from '@umituz/web-design-system/molecules';
+import { PrimaryButton } from '../PrimaryButton';
+import { QuestionWrapper } from '../QuestionWrapper';
+import { renderBundledIcon } from '../renderBundledIcon';
+import { formatLabel, useOnboardingIntl } from '../OnboardingIntl';
+import type { PainPointsScreenConfig } from '../../types/screens';
+
+export interface PainPointsScreenProps {
+  config: PainPointsScreenConfig;
+  onNext: (data: { selected: string[] }) => void;
+  initialSelected?: ReadonlyArray<string>;
+}
+
+export function PainPointsScreen({ config, onNext, initialSelected }: PainPointsScreenProps) {
+  const { labels } = useOnboardingIntl();
+  const [selected, setSelected] = useState<string[]>([...(initialSelected ?? [])]);
+  const multiSelect = config.multiSelect ?? true;
+  const max = config.maxSelect;
+
+  const subtitle = multiSelect
+    ? max !== undefined
+      ? formatLabel(labels.pickUpToPattern, { max })
+      : labels.selectAllThatApply
+    : labels.pickTheOne;
+
+  const toggle = useCallback(
+    (id: string) => {
+      setSelected((prev) => {
+        if (multiSelect) {
+          if (prev.includes(id)) return prev.filter((p) => p !== id);
+          if (max !== undefined && prev.length >= max) return prev;
+          return [...prev, id];
+        }
+        return prev.includes(id) ? [] : [id];
+      });
+    },
+    [multiSelect, max],
+  );
+
+  return (
+    <QuestionWrapper title={config.title} subtitle={subtitle}>
+      <div
+        className="udb-onb-list"
+        role={multiSelect ? 'group' : 'radiogroup'}
+        aria-label={config.title}
+      >
+        {config.painPoints.map((point) => (
+          <OptionCard
+            key={point.id}
+            label={point.label}
+            description={point.description}
+            icon={renderBundledIcon(point.iconName)}
+            selected={selected.includes(point.id)}
+            onSelect={() => toggle(point.id)}
+            multiSelect={multiSelect}
+          />
+        ))}
+      </div>
+      <PrimaryButton onClick={() => onNext({ selected })} disabled={selected.length === 0}>
+        {config.cta ?? labels.continueAction}
+      </PrimaryButton>
+    </QuestionWrapper>
+  );
+}

package/src/domains/onboarding/components/screens/PaywallScreen.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { ShieldCheck } from 'lucide-react';
+import { PrimaryButton } from '../PrimaryButton';
+import { renderBundledIcon } from '../renderBundledIcon';
+import { useOnboardingAnalytics } from '../../hooks/useOnboardingAnalytics';
+import { doesIconNameResolve } from '../../predicates/icon-name-resolves';
+import { formatCountWithLocale } from '../../calc/count-with-locale';
+import { cn } from '@umituz/web-design-system/utils/cn';
+import { formatLabel, useOnboardingIntl } from '../OnboardingIntl';
+import type { PaywallScreenConfig } from '../../types/screens';
+import type { AnalyticsConfig } from '../../types/config';
+
+export interface PaywallScreenProps {
+  config: PaywallScreenConfig;
+  onNext: (data: { accepted: boolean; trialStarted: boolean }) => void;
+  analytics?: AnalyticsConfig;
+}
+
+export function PaywallScreen({ config, onNext, analytics }: PaywallScreenProps) {
+  const { labels, locale } = useOnboardingIntl();
+  const { trackEvent } = useOnboardingAnalytics(analytics);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    trackEvent({ name: 'paywall_viewed', stepId: config.id, timestamp: Date.now() });
+  }, [trackEvent, config.id]);
+
+  async function handleAccept() {
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await config.onAccept();
+      trackEvent({
+        name: result.accepted ? 'paywall_accepted' : 'paywall_declined',
+        stepId: config.id,
+        price: config.price,
+        timestamp: Date.now(),
+      });
+      onNext(result);
+    } catch (e) {
+      const message = e instanceof Error ? e.message : labels.couldNotStartTrial;
+      setError(message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="udb-onb-proof">
+      <div className="udb-onb-question__head udb-onb-question__head--center">
+        <h2 className="udb-onb-title udb-onb-title--display">{config.title}</h2>
+        <p className="udb-onb-lead">{config.subtitle}</p>
+      </div>
+      <motion.div
+        initial={{ scale: 0.95, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.3 }}
+        className="udb-onb-price"
+      >
+        <div className="udb-onb-price__amount">{config.price}</div>
+        <div className="udb-onb-price__terms">
+          {config.trialPrice !== undefined
+            ? formatLabel(labels.trialIntroPattern, {
+                price: config.trialPrice,
+                days: config.trialDays,
+              })
+            : formatLabel(labels.trialDaysPattern, { count: config.trialDays })}
+        </div>
+      </motion.div>
+      <ul className="udb-onb-list">
+        {config.features.map((feature, i) => (
+          <li
+            key={`${feature.text}-${i}`}
+            className={cn('udb-onb-feature', feature.highlighted && 'udb-onb-feature--hl')}
+          >
+            {doesIconNameResolve(feature.iconName) && (
+              <span className="udb-onb-feature__icon">
+                {renderBundledIcon(feature.iconName, 'udb-onb-icon')}
+              </span>
+            )}
+            <span>{feature.text}</span>
+          </li>
+        ))}
+      </ul>
+      {config.socialProof && (
+        <p className="udb-onb-note">
+          {config.socialProof.text} ({formatCountWithLocale(config.socialProof.count, locale)}+ users)
+        </p>
+      )}
+      {error && (
+        <p role="alert" className="udb-onb-error">
+          {error}
+        </p>
+      )}
+      <div className="udb-onb-question__body">
+        <PrimaryButton onClick={handleAccept} loading={busy}>
+          {config.cta}
+        </PrimaryButton>
+        {config.secondaryCta && (
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => {
+              trackEvent({ name: 'paywall_declined', stepId: config.id, timestamp: Date.now() });
+              config.onSecondaryCta?.();
+              onNext({ accepted: false, trialStarted: false });
+            }}
+            className="udb-onb-link"
+          >
+            {config.secondaryCta}
+          </button>
+        )}
+      </div>
+      <p className="udb-onb-note">
+        <ShieldCheck className="udb-onb-icon--xs" />
+        {labels.cancelAnytimeNote}
+      </p>
+    </div>
+  );
+}

package/src/domains/onboarding/components/screens/PermissionPrimingScreen.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { PrimaryButton } from '../PrimaryButton';
+import { renderBundledIcon } from '../renderBundledIcon';
+import { usePermissionPriming } from '../../hooks/usePermissionPriming';
+import { useOnboardingAnalytics } from '../../hooks/useOnboardingAnalytics';
+import { doesIconNameResolve } from '../../predicates/icon-name-resolves';
+import { isPermissionGranted } from '../../predicates/permission-granted';
+import { useOnboardingIntl } from '../OnboardingIntl';
+import type { PermissionPrimingScreenConfig, PermissionStatus } from '../../types/screens';
+import type { AnalyticsConfig } from '../../types/config';
+
+const PERMISSION_DEFAULT_ICON: Record<string, string> = {
+  camera: 'Camera',
+  microphone: 'Mic',
+  location: 'MapPin',
+  notifications: 'Bell',
+  photos: 'Image',
+  contacts: 'Users',
+};
+
+export interface PermissionPrimingScreenProps {
+  config: PermissionPrimingScreenConfig;
+  onNext: (data: { status: PermissionStatus }) => void;
+  analytics?: AnalyticsConfig;
+}
+
+export function PermissionPrimingScreen({ config, onNext, analytics }: PermissionPrimingScreenProps) {
+  const { labels } = useOnboardingIntl();
+  const { trackEvent } = useOnboardingAnalytics(analytics);
+  const { status } = usePermissionPriming(config.permission);
+  const [isRequesting, setIsRequesting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const iconName = doesIconNameResolve(config.iconName)
+    ? config.iconName
+    : PERMISSION_DEFAULT_ICON[config.permission];
+
+  async function handleRequest() {
+    setError(null);
+    setIsRequesting(true);
+    trackEvent({
+      name: 'permission_requested',
+      permission: config.permission,
+      stepId: config.id,
+      timestamp: Date.now(),
+    });
+    try {
+      const next = await config.onRequest();
+      trackEvent({
+        name: next === 'granted' ? 'permission_granted' : 'permission_denied',
+        permission: config.permission,
+        stepId: config.id,
+        timestamp: Date.now(),
+      });
+      onNext({ status: next });
+    } catch (e) {
+      trackEvent({
+        name: 'permission_denied',
+        permission: config.permission,
+        stepId: config.id,
+        timestamp: Date.now(),
+      });
+      const message = e instanceof Error ? e.message : labels.permissionRequestFailed;
+      setError(message);
+    } finally {
+      setIsRequesting(false);
+    }
+  }
+
+  return (
+    <div className="udb-onb-proof">
+      {doesIconNameResolve(iconName) && (
+        <div className="udb-onb-hero udb-onb-hero--lg" aria-hidden="true">
+          {renderBundledIcon(iconName, 'udb-onb-icon--lg')}
+        </div>
+      )}
+      <div className="udb-onb-question__head">
+        <h2 className="udb-onb-title">{config.title}</h2>
+        <p className="udb-onb-lead">{config.description}</p>
+      </div>
+      <ul className="udb-onb-list">
+        {config.benefits.map((benefit) => (
+          <li key={benefit} className="udb-onb-benefit">
+            <span className="udb-onb-benefit__dot" />
+            <span>{benefit}</span>
+          </li>
+        ))}
+      </ul>
+      {error && (
+        <p role="alert" className="udb-onb-error">
+          {error}
+        </p>
+      )}
+      <PrimaryButton onClick={handleRequest} loading={isRequesting}>
+        {isPermissionGranted(status) ? labels.continueAction : config.cta ?? labels.allowAccess}
+      </PrimaryButton>
+    </div>
+  );
+}

package/src/domains/onboarding/components/screens/PersonalizedSolutionScreen.tsx

@@ -0,0 +1,40 @@
+import { motion } from 'framer-motion';
+import { CheckCircle2 } from 'lucide-react';
+import { PrimaryButton } from '../PrimaryButton';
+import { useOnboardingIntl } from '../OnboardingIntl';
+import type { PersonalizedSolutionScreenConfig } from '../../types/screens';
+
+export interface PersonalizedSolutionScreenProps {
+  config: PersonalizedSolutionScreenConfig;
+  onNext: () => void;
+}
+
+export function PersonalizedSolutionScreen({ config, onNext }: PersonalizedSolutionScreenProps) {
+  const { labels } = useOnboardingIntl();
+  const visible = config.solutions.filter((s) => config.selectedPainPointIds.includes(s.painPointId));
+
+  return (
+    <div className="udb-onb-proof">
+      {config.title && <h2 className="udb-onb-title">{config.title}</h2>}
+      {config.subtitle && <p className="udb-onb-lead">{config.subtitle}</p>}
+      <ul className="udb-onb-solutions">
+        {visible.map((solution, i) => (
+          <motion.li
+            key={solution.painPointId}
+            initial={{ opacity: 0, x: -12 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: i * 0.1, duration: 0.3 }}
+            className="udb-onb-solution"
+          >
+            <CheckCircle2 className="udb-onb-icon udb-onb-solution__icon" aria-hidden="true" />
+            <div className="udb-onb-solution__body">
+              <p>{solution.solution}</p>
+              {solution.statistic && <p className="udb-onb-solution__stat">{solution.statistic}</p>}
+            </div>
+          </motion.li>
+        ))}
+      </ul>
+      <PrimaryButton onClick={onNext}>{config.cta ?? labels.continueAction}</PrimaryButton>
+    </div>
+  );
+}