@umituz/web-dashboard 6.0.0 → 6.1.0

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

@@ -0,0 +1,56 @@
+import { useCallback, useState } from 'react';
+import { OptionCard } from '../shared/OptionCard';
+import { PrimaryButton } from '../shared/PrimaryButton';
+import { QuestionWrapper } from '../shared/QuestionWrapper';
+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="flex flex-col gap-2"
+        role={multiSelect ? 'group' : 'radiogroup'}
+        aria-label={config.question}
+      >
+        {config.options.map((option) => (
+          <OptionCard
+            key={option.id}
+            option={option}
+            selected={selected.includes(option.id)}
+            onToggle={toggle}
+            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 '../shared/OptionCard';
+import { PrimaryButton } from '../shared/PrimaryButton';
+import { QuestionWrapper } from '../shared/QuestionWrapper';
+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="flex flex-col gap-2"
+        role={multiSelect ? 'group' : 'radiogroup'}
+        aria-label={config.title}
+      >
+        {config.painPoints.map((point) => (
+          <OptionCard
+            key={point.id}
+            option={point}
+            selected={selected.includes(point.id)}
+            onToggle={toggle}
+            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,138 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { ShieldCheck } from 'lucide-react';
+import { PrimaryButton } from '../shared/PrimaryButton';
+import { renderBundledIcon } from '../shared/renderBundledIcon';
+import { useOnboardingAnalytics } from '../hooks/useOnboardingAnalytics';
+import { doesIconNameResolve } from '../../predicates/icon-name-resolves';
+import { formatCountWithLocale } from '../../calc/count-with-locale';
+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;
+}
+
+/**
+ * Hard paywall with trial.
+ *
+ * Error contract: if `onAccept` throws (network failure, provider outage), the
+ * user STAYS on this screen with a retryable error. A failed purchase attempt
+ * must never silently advance the user past the paywall.
+ */
+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);
+
+  // "Viewed" is a view event — fire when the paywall is shown, not on interaction.
+  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="flex flex-1 flex-col gap-6">
+      <div className="flex flex-col gap-2 text-center">
+        <h2 className="text-3xl font-bold text-[rgb(var(--uob-text-primary))] sm:text-4xl">
+          {config.title}
+        </h2>
+        <p className="text-base text-[rgb(var(--uob-text-muted))]">{config.subtitle}</p>
+      </div>
+      <motion.div
+        initial={{ scale: 0.95, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.3 }}
+        className="rounded-2xl border-2 border-[rgb(var(--uob-primary-500))] bg-[rgb(var(--uob-primary-50))] p-6 text-center"
+      >
+        <div className="text-3xl font-bold text-[rgb(var(--uob-primary-700))]">{config.price}</div>
+        <div className="mt-1 text-sm text-[rgb(var(--uob-text-muted))]">
+          {config.trialPrice !== undefined
+            ? formatLabel(labels.trialIntroPattern, {
+                price: config.trialPrice,
+                days: config.trialDays,
+              })
+            : formatLabel(labels.trialDaysPattern, { count: config.trialDays })}
+        </div>
+      </motion.div>
+      <ul className="flex flex-col gap-2">
+        {config.features.map((feature, i) => (
+          <li
+            key={`${feature.text}-${i}`}
+            className={
+              feature.highlighted
+                ? 'flex items-start gap-3 rounded-lg border border-[rgb(var(--uob-primary-500))] bg-[rgb(var(--uob-primary-50))] p-3'
+                : 'flex items-start gap-3 rounded-lg border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] p-3'
+            }
+          >
+            {doesIconNameResolve(feature.iconName) && (
+              <span className="mt-0.5 text-[rgb(var(--uob-primary-500))]">
+                {renderBundledIcon(feature.iconName, 'h-5 w-5')}
+              </span>
+            )}
+            <span className="text-sm text-[rgb(var(--uob-text-primary))]">{feature.text}</span>
+          </li>
+        ))}
+      </ul>
+      {config.socialProof && (
+        <p className="text-center text-sm text-[rgb(var(--uob-text-muted))]">
+          {config.socialProof.text} ({formatCountWithLocale(config.socialProof.count, locale)}+ users)
+        </p>
+      )}
+      {error && (
+        <p
+          role="alert"
+          className="rounded-md border border-[rgb(var(--uob-error))] bg-[rgb(var(--uob-error))]/10 p-3 text-sm text-[rgb(var(--uob-error))]"
+        >
+          {error}
+        </p>
+      )}
+      <div className="flex flex-col gap-2">
+        <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="text-sm font-semibold text-[rgb(var(--uob-text-muted))] underline-offset-4 hover:underline disabled:opacity-50"
+          >
+            {config.secondaryCta}
+          </button>
+        )}
+      </div>
+      <p className="flex items-center justify-center gap-1 text-xs text-[rgb(var(--uob-text-muted))]">
+        <ShieldCheck className="h-3.5 w-3.5" />
+        {labels.cancelAnytimeNote}
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { PrimaryButton } from '../shared/PrimaryButton';
+import { renderBundledIcon } from '../shared/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);
+  // Hook tracks the live permission state for UI feedback; the screen invokes the
+  // consumer-provided `config.onRequest` so the consumer controls the actual mechanism.
+  const { status } = usePermissionPriming(config.permission);
+  const [isRequesting, setIsRequesting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // Configured icon wins; fall back to the permission's default glyph when the
+  // configured name is missing or not in the bundled registry.
+  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="flex flex-1 flex-col gap-6">
+      {doesIconNameResolve(iconName) && (
+        <div
+          className="flex h-20 w-20 items-center justify-center rounded-2xl bg-[rgb(var(--uob-primary-50))] text-[rgb(var(--uob-primary-500))]"
+          aria-hidden="true"
+        >
+          {renderBundledIcon(iconName, 'h-10 w-10')}
+        </div>
+      )}
+      <div className="flex flex-col gap-2">
+        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
+          {config.title}
+        </h2>
+        <p className="text-base text-[rgb(var(--uob-text-muted))]">{config.description}</p>
+      </div>
+      <ul className="flex flex-col gap-2">
+        {config.benefits.map((benefit) => (
+          <li
+            key={benefit}
+            className="flex items-start gap-2 rounded-lg border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] p-3 text-sm text-[rgb(var(--uob-text-primary))]"
+          >
+            <span className="mt-1 h-2 w-2 shrink-0 rounded-full bg-[rgb(var(--uob-primary-500))]" />
+            <span>{benefit}</span>
+          </li>
+        ))}
+      </ul>
+      {error && (
+        <p
+          role="alert"
+          className="rounded-md border border-[rgb(var(--uob-error))] bg-[rgb(var(--uob-error))]/10 p-3 text-sm text-[rgb(var(--uob-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,53 @@
+import { motion } from 'framer-motion';
+import { CheckCircle2 } from 'lucide-react';
+import { PrimaryButton } from '../shared/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="flex flex-1 flex-col gap-6">
+      {config.title && (
+        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
+          {config.title}
+        </h2>
+      )}
+      {config.subtitle && (
+        <p className="text-base text-[rgb(var(--uob-text-muted))]">{config.subtitle}</p>
+      )}
+      <ul className="flex flex-col gap-3">
+        {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="flex items-start gap-3 rounded-xl border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] p-4"
+          >
+            <CheckCircle2
+              className="mt-0.5 h-5 w-5 shrink-0 text-[rgb(var(--uob-success))]"
+              aria-hidden="true"
+            />
+            <div className="flex flex-1 flex-col gap-1">
+              <p className="text-base text-[rgb(var(--uob-text-primary))]">{solution.solution}</p>
+              {solution.statistic && (
+                <p className="text-sm font-semibold text-[rgb(var(--uob-primary-500))]">
+                  {solution.statistic}
+                </p>
+              )}
+            </div>
+          </motion.li>
+        ))}
+      </ul>
+      <PrimaryButton onClick={onNext}>{config.cta ?? labels.continueAction}</PrimaryButton>
+    </div>
+  );
+}

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

@@ -0,0 +1,194 @@
+import { useId, useState } from 'react';
+import { PrimaryButton } from '../shared/PrimaryButton';
+import { QuestionWrapper } from '../shared/QuestionWrapper';
+import { useOnboardingIntl } from '../OnboardingIntl';
+import {
+  clampValueToBounds,
+  resolveSliderBounds,
+} from '../../calc/slider-value-bounds';
+import type {
+  OnboardingOption,
+  PreferenceItem,
+  PreferencesScreenConfig,
+} from '../../types/screens';
+
+type PrefValue = string | number | string[] | boolean;
+
+function defaultFor(item: PreferenceItem): PrefValue {
+  if (item.defaultValue !== undefined) {
+    if (item.type === 'slider' && typeof item.defaultValue === 'number') {
+      return clampValueToBounds(item.defaultValue, item.min ?? 0, item.max ?? 0, item.id);
+    }
+    return item.defaultValue;
+  }
+  switch (item.type) {
+    case 'multi-select':
+      return [];
+    case 'toggle':
+      return false;
+    case 'slider':
+      return resolveSliderBounds(item.min, item.max).min;
+    case 'select':
+    default:
+      return item.options?.[0]?.id ?? '';
+  }
+}
+
+function toggleMulti(values: string[], id: string): string[] {
+  return values.includes(id) ? values.filter((v) => v !== id) : [...values, id];
+}
+
+export interface PreferencesScreenProps {
+  config: PreferencesScreenConfig;
+  onNext: (data: { values: Record<string, PrefValue> }) => void;
+}
+
+export function PreferencesScreen({ config, onNext }: PreferencesScreenProps) {
+  const { labels } = useOnboardingIntl();
+  const [values, setValues] = useState<Record<string, PrefValue>>(() => {
+    const initial: Record<string, PrefValue> = {};
+    for (const item of config.preferences) initial[item.id] = defaultFor(item);
+    return initial;
+  });
+
+  function update(id: string, value: PrefValue) {
+    setValues((prev) => ({ ...prev, [id]: value }));
+  }
+
+  const canContinue = config.preferences.every((item) => {
+    const v = values[item.id];
+    if (item.type === 'select') return typeof v === 'string' && v.length > 0;
+    if (item.type === 'multi-select') return Array.isArray(v);
+    return true;
+  });
+
+  return (
+    <QuestionWrapper title={config.title} subtitle={labels.tailorExperience}>
+      <div className="flex flex-col gap-5">
+        {config.preferences.map((item) => (
+          <PreferenceRow key={item.id} item={item} value={values[item.id]} onChange={(v) => update(item.id, v)} />
+        ))}
+      </div>
+      <PrimaryButton onClick={() => onNext({ values })} disabled={!canContinue}>
+        {config.cta ?? labels.continueAction}
+      </PrimaryButton>
+    </QuestionWrapper>
+  );
+}
+
+interface PreferenceRowProps {
+  item: PreferenceItem;
+  value: PrefValue;
+  onChange: (value: PrefValue) => void;
+}
+
+function PreferenceRow({ item, value, onChange }: PreferenceRowProps) {
+  const fieldId = useId();
+  return (
+    <div className="flex flex-col gap-2">
+      <label className="text-sm font-semibold text-[rgb(var(--uob-text-primary))]" htmlFor={fieldId}>
+        {item.label}
+      </label>
+      <PreferenceControl item={item} value={value} onChange={onChange} fieldId={fieldId} />
+    </div>
+  );
+}
+
+interface PreferenceControlProps extends PreferenceRowProps {
+  fieldId: string;
+}
+
+function PreferenceControl({ item, value, onChange, fieldId }: PreferenceControlProps) {
+  switch (item.type) {
+    case 'select':
+      return (
+        <select
+          id={fieldId}
+          className="rounded-md border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] p-2 text-sm"
+          value={typeof value === 'string' ? value : ''}
+          onChange={(e) => onChange(e.target.value)}
+        >
+          {item.options?.map((opt: OnboardingOption) => (
+            <option key={opt.id} value={opt.id}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      );
+    case 'multi-select': {
+      const list = Array.isArray(value) ? value : [];
+      return (
+        <div className="flex flex-wrap gap-2" role="group" aria-label={item.label}>
+          {item.options?.map((opt) => {
+            const isOn = list.includes(opt.id);
+            return (
+              <button
+                key={opt.id}
+                type="button"
+                aria-pressed={isOn}
+                onClick={() => onChange(toggleMulti(list, opt.id))}
+                className={
+                  isOn
+                    ? 'rounded-full bg-[rgb(var(--uob-primary-500))] px-3 py-1 text-sm text-white'
+                    : 'rounded-full border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] px-3 py-1 text-sm hover:border-[rgb(var(--uob-primary-500))]'
+                }
+              >
+                {opt.label}
+              </button>
+            );
+          })}
+        </div>
+      );
+    }
+    case 'toggle':
+      return (
+        <button
+          type="button"
+          id={fieldId}
+          role="switch"
+          aria-checked={value === true}
+          onClick={() => onChange(!value)}
+          className={
+            value === true
+              ? 'h-6 w-11 rounded-full bg-[rgb(var(--uob-primary-500))] p-0.5'
+              : 'h-6 w-11 rounded-full bg-[rgb(var(--uob-border))] p-0.5'
+          }
+        >
+          <span
+            className={
+              value === true
+                ? 'block h-5 w-5 translate-x-5 rounded-full bg-white transition-transform'
+                : 'block h-5 w-5 translate-x-0 rounded-full bg-white transition-transform'
+            }
+          />
+        </button>
+      );
+    case 'slider': {
+      const { min, max } = resolveSliderBounds(item.min, item.max);
+      const numeric = typeof value === 'number' ? value : min;
+      return (
+        <div className="flex flex-col gap-1">
+          <input
+            type="range"
+            id={fieldId}
+            min={min}
+            max={max}
+            value={numeric}
+            onChange={(e) => onChange(Number(e.target.value))}
+            aria-valuemin={min}
+            aria-valuemax={max}
+            aria-valuenow={numeric}
+            className="w-full"
+          />
+          <div className="flex justify-between text-xs text-[rgb(var(--uob-text-muted))]">
+            <span>{min}</span>
+            <span>{numeric}</span>
+            <span>{max}</span>
+          </div>
+        </div>
+      );
+    }
+    default:
+      return null;
+  }
+}