@umituz/web-dashboard 3.2.2 → 4.0.0

package/src/domains/onboarding/components/PlanStep.tsx

@@ -1,190 +1,222 @@
-import { Check } from "lucide-react";
-import { cn } from "@umituz/web-design-system/utils";
+/**
+ * PlanStep
+ *
+ * Subscription plan selection step. All copy is i18n-keyed;
+ * the 20% yearly discount is a named constant, not a magic 0.8.
+ * Badge tones are semantic (`muted` | `primary` | `accent`) —
+ * no data-driven utility classes.
+ */
+
+import { useMemo } from "react";
+import { Check, Sparkles } from "lucide-react";
+import { useT } from "../../../i18n";
+import { cn } from "../../../primitives";
 import type { OnboardingState, PlanOption } from "../types/onboarding";
+import { ONBOARDING_KEYS } from "../utils/i18nKeys";
 
-interface PlanStepProps {
-  /** Current onboarding state */
+export interface PlanStepProps {
   state: OnboardingState;
-  /** Update state function */
   updateState: (updates: Partial<OnboardingState>) => void;
-  /** Plan options */
   plans?: PlanOption[];
+  /** Yearly discount percentage (0-100). Default 20. */
+  yearlyDiscountPercent?: number;
+  /** Free trial duration in days, shown in the subtitle. Default 14. */
+  trialDays?: number;
 }
 
-/**
- * Plan Selection Step
- *
- * Fourth step - select subscription plan
- */
+const MONTHS_IN_YEAR = 12;
+const DEFAULT_YEARLY_DISCOUNT = 20;
+const DEFAULT_TRIAL_DAYS = 14;
+
+const DEFAULT_PLANS: PlanOption[] = [
+  {
+    id: "standard",
+    name: "Standard",
+    badgeKey: ONBOARDING_KEYS.plan.mostPopular,
+    badgeTone: "muted",
+    description: "Perfect for individuals and small businesses",
+    price: 12,
+    features: [
+      { text: "3 Social Accounts", bold: true },
+      "100 posts per month",
+      "Basic Analytics",
+      "Email Support",
+    ],
+  },
+  {
+    id: "pro",
+    name: "Pro",
+    badgeKey: ONBOARDING_KEYS.plan.bestValue,
+    badgeTone: "primary",
+    description: "For growing businesses and teams",
+    price: 29,
+    features: [
+      { text: "15 Social Accounts", bold: true },
+      "Unlimited posts",
+      "Advanced Analytics",
+      "AI Caption Suggestions",
+      { text: "5 Team Members", bold: true },
+      "Priority Support",
+    ],
+    highlight: true,
+  },
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    badgeKey: ONBOARDING_KEYS.plan.custom,
+    badgeTone: "accent",
+    description: "For large organizations with custom needs",
+    price: 99,
+    features: [
+      { text: "Unlimited Accounts", bold: true },
+      "Unlimited everything",
+      "Custom Integrations",
+      "Dedicated Account Manager",
+      "24/7 Phone Support",
+      "SLA Guarantee",
+    ],
+  },
+];
+
 export const PlanStep = ({
   state,
   updateState,
   plans,
+  yearlyDiscountPercent = DEFAULT_YEARLY_DISCOUNT,
+  trialDays = DEFAULT_TRIAL_DAYS,
 }: PlanStepProps) => {
-  // Default plans
-  const defaultPlans: PlanOption[] = [
-    {
-      id: "standard",
-      name: "Standard",
-      badge: "Most Popular",
-      badgeColor: "bg-muted text-muted-foreground",
-      description: "Perfect for individuals and small businesses",
-      price: 12,
-      features: [
-        { text: "3 Social Accounts", bold: true },
-        "100 posts per month",
-        "Basic Analytics",
-        "Email Support",
-      ],
-    },
-    {
-      id: "pro",
-      name: "Pro",
-      badge: "Best Value",
-      badgeColor: "bg-primary text-primary-foreground",
-      description: "For growing businesses and teams",
-      price: 29,
-      features: [
-        { text: "15 Social Accounts", bold: true },
-        "Unlimited posts",
-        "Advanced Analytics",
-        "AI Caption Suggestions",
-        { text: "5 Team Members", bold: true },
-        "Priority Support",
-      ],
-      highlight: true,
-    },
-    {
-      id: "enterprise",
-      name: "Enterprise",
-      badge: "Custom",
-      badgeColor: "bg-purple-600 text-white",
-      description: "For large organizations with custom needs",
-      price: 99,
-      features: [
-        { text: "Unlimited Accounts", bold: true },
-        "Unlimited everything",
-        "Custom Integrations",
-        "Dedicated Account Manager",
-        "24/7 Phone Support",
-        "SLA Guarantee",
-      ],
-    },
-  ];
-
-  const planOptions = plans || defaultPlans;
-
-  // Calculate price with billing cycle discount
-  const getPlanPrice = (plan: PlanOption) => {
-    const basePrice = plan.price;
-    return state.billingCycle === "yearly" ? basePrice * 12 * 0.8 : basePrice; // 20% discount
+  const t = useT();
+  const planOptions = plans ?? DEFAULT_PLANS;
+
+  /**
+   * Pure function for plan pricing — given a base monthly price and
+   * a cycle, return the effective price. The discount multiplier
+   * is derived from the named constant; no more magic 0.8.
+   */
+  const getPlanPrice = (plan: PlanOption): number => {
+    const base = plan.price;
+    if (state.billingCycle === "yearly") {
+      return (base * MONTHS_IN_YEAR * (100 - yearlyDiscountPercent)) / 100;
+    }
+    return base;
   };
 
+  const selectedPlan = useMemo(
+    () => planOptions.find((p) => p.id === state.selectedPlan) ?? null,
+    [planOptions, state.selectedPlan],
+  );
+
   return (
-    <div className="w-full max-w-5xl">
-      <div className="text-center mb-8">
-        <h1 className="text-3xl md:text-4xl font-extrabold text-foreground mb-3">
-          Choose your plan
+    <div className="udb-step udb-step--widest">
+      <div className="udb-step__header">
+        <h1 className="udb-step__title">
+          {t(ONBOARDING_KEYS.plan.title)}
         </h1>
-        <p className="text-muted-foreground text-lg">
-          Start with a 14-day free trial - no credit card required
+        <p className="udb-step__description udb-step__description--lg">
+          {t(ONBOARDING_KEYS.plan.description, { days: trialDays })}
         </p>
       </div>
 
-      {/* Billing Cycle Toggle */}
-      <div className="flex items-center justify-center gap-2 mb-12">
-        <div className="flex bg-muted rounded-full p-1.5 border border-border">
+      <div className="udb-cycle-toggle-row">
+        <div
+          className="udb-cycle-toggle"
+          role="group"
+          aria-label={t(ONBOARDING_KEYS.plan.title)}
+        >
           <button
+            type="button"
+            aria-pressed={state.billingCycle === "monthly"}
             onClick={() => updateState({ billingCycle: "monthly" })}
             className={cn(
-              "px-6 py-2 rounded-full text-sm font-bold transition-all",
-              state.billingCycle === "monthly"
-                ? "bg-primary text-primary-foreground shadow-lg shadow-primary/20"
-                : "text-muted-foreground hover:text-foreground"
+              "udb-cycle-toggle__pill",
+              state.billingCycle === "monthly" && "udb-cycle-toggle__pill--on",
             )}
           >
-            Monthly
+            {t(ONBOARDING_KEYS.plan.monthly)}
           </button>
           <button
+            type="button"
+            aria-pressed={state.billingCycle === "yearly"}
             onClick={() => updateState({ billingCycle: "yearly" })}
             className={cn(
-              "px-6 py-2 rounded-full text-sm font-bold transition-all flex items-center gap-2",
-              state.billingCycle === "yearly"
-                ? "bg-primary text-primary-foreground shadow-lg shadow-primary/20"
-                : "text-muted-foreground hover:text-foreground"
+              "udb-cycle-toggle__pill udb-cycle-toggle__pill--with-badge",
+              state.billingCycle === "yearly" && "udb-cycle-toggle__pill--on",
             )}
           >
-            Yearly
+            {t(ONBOARDING_KEYS.plan.yearly)}
             <span
               className={cn(
-                "text-[10px] px-1.5 py-0.5 rounded-full transition-colors",
-                state.billingCycle === "yearly" ? "bg-white/20 text-white" : "bg-green-500/10 text-green-600"
+                "udb-cycle-toggle__save",
+                state.billingCycle === "yearly" && "udb-cycle-toggle__save--on",
               )}
             >
-              Save 20%
+              {t(ONBOARDING_KEYS.plan.save, { percent: yearlyDiscountPercent })}
             </span>
           </button>
         </div>
       </div>
 
-      {/* Plans Grid */}
-      <div className="grid md:grid-cols-3 gap-8">
+      <div
+        className="udb-plans"
+        role="radiogroup"
+        aria-label={t(ONBOARDING_KEYS.plan.title)}
+      >
         {planOptions.map((plan) => {
           const isSelected = state.selectedPlan === plan.id;
           const planPrice = getPlanPrice(plan);
+          const badge = plan.badge ?? (plan.badgeKey ? t(plan.badgeKey) : undefined);
 
           return (
             <button
               key={plan.id}
+              type="button"
+              role="radio"
+              aria-checked={isSelected}
               onClick={() => updateState({ selectedPlan: plan.id })}
               className={cn(
-                "bg-background border-2 rounded-[32px] p-8 text-left transition-all hover:translate-y-[-4px] relative",
-                isSelected
-                  ? "border-primary ring-4 ring-primary/10"
-                  : "border-border hover:border-primary/40",
-                plan.highlight && "shadow-xl"
+                "udb-plan",
+                isSelected && "udb-plan--selected",
+                plan.highlight && "udb-plan--highlight",
               )}
             >
               {plan.highlight && (
-                <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-primary to-purple-600 text-white text-[10px] font-black uppercase tracking-widest px-4 py-1 rounded-full">
-                  Recommended
+                <div className="udb-plan__recommended">
+                  {t(ONBOARDING_KEYS.plan.recommended)}
                 </div>
               )}
 
-              <div className="flex items-center justify-between mb-4">
-                <h3 className="text-2xl font-black text-foreground">{plan.name}</h3>
-                {plan.badge && (
-                  <div
-                    className={cn(
-                      "text-[10px] font-black uppercase tracking-widest px-3 py-1 rounded-full",
-                      plan.badgeColor
-                    )}
-                  >
-                    {plan.badge}
+              <div className="udb-plan__heading">
+                <h3 className="udb-plan__name">{plan.name}</h3>
+                {badge && (
+                  <div className={cn("udb-plan__badge", plan.badgeTone && `udb-plan__badge--${plan.badgeTone}`)}>
+                    {badge}
                   </div>
                 )}
               </div>
 
-              <p className="text-muted-foreground mb-8 font-medium">{plan.description}</p>
+              <p className="udb-plan__description">{plan.description}</p>
 
-              <div className="flex items-baseline gap-1 mb-8">
-                <span className="text-5xl font-black text-foreground">
+              <div className="udb-plan__price-row">
+                <span className="udb-plan__price">
                   ${Math.round(planPrice)}
                 </span>
-                <span className="text-lg font-bold text-muted-foreground">/mo</span>
+                <span className="udb-plan__price-unit">
+                  /{state.billingCycle === "yearly"
+                    ? t(ONBOARDING_KEYS.plan.yearlyShort)
+                    : t(ONBOARDING_KEYS.plan.monthlyShort)}
+                </span>
               </div>
 
-              <ul className="space-y-4">
+              <ul className="udb-plan__features">
                 {plan.features.map((feature, i) => {
                   const text = typeof feature === "string" ? feature : feature.text;
                   const bold = typeof feature !== "string" && feature.bold;
-
                   return (
-                    <li key={i} className="flex items-start gap-3 text-sm font-medium">
-                      <div className="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
-                        <Check className="h-3 w-3 text-primary" />
-                      </div>
-                      <span className={cn("text-foreground/90", bold && "font-black")}>
+                    <li key={`${plan.id}-feature-${i}`} className="udb-plan__feature">
+                      <span className="udb-plan__feature-check">
+                        <Check className="udb-plan__feature-check-icon" aria-hidden="true" />
+                      </span>
+                      <span className={cn("udb-plan__feature-text", bold && "udb-plan__feature-text--bold")}>
                         {text}
                       </span>
                     </li>
@@ -196,9 +228,10 @@ export const PlanStep = ({
         })}
       </div>
 
-      {state.selectedPlan && (
-        <p className="mt-8 text-center text-sm text-muted-foreground animate-in fade-in">
-          ✨ Great choice! You selected the {planOptions.find((p) => p.id === state.selectedPlan)?.name} plan
+      {selectedPlan && (
+        <p className="udb-step__hint" role="status" aria-live="polite">
+          <Sparkles className="udb-step__hint-icon" aria-hidden="true" />
+          {t(ONBOARDING_KEYS.plan.selectedPlan, { name: selectedPlan.name })}
         </p>
       )}
     </div>

package/src/domains/onboarding/components/PlatformsStep.tsx

@@ -1,43 +1,52 @@
-import { cn } from "@umituz/web-design-system/utils";
-import type { OnboardingState } from "../types/onboarding";
+/**
+ * PlatformsStep
+ *
+ * Connect-platform onboarding step. Icons are Lucide components —
+ * emoji is forbidden by project rules. Platform `color` is a plain
+ * CSS color (brand hex), applied inline — no utility classes.
+ */
 
-interface PlatformsStepProps {
-  /** Current onboarding state */
+import {
+  Instagram,
+  Twitter,
+  Facebook,
+  Linkedin,
+  Youtube,
+  Pin,
+  Hash,
+} from "lucide-react";
+import { useT } from "../../../i18n";
+import { cn } from "../../../primitives";
+import type { OnboardingState, PlatformOption } from "../types/onboarding";
+import { ONBOARDING_KEYS } from "../utils/i18nKeys";
+
+export interface PlatformsStepProps {
   state: OnboardingState;
-  /** Update state function */
   updateState: (updates: Partial<OnboardingState>) => void;
-  /** Platform options */
-  platforms?: Array<{
-    id: string;
-    name: string;
-    icon: string;
-    color?: string;
-  }>;
+  platforms?: PlatformOption[];
 }
 
 /**
- * Platform Selection Step
- *
- * Third step - select social media platforms to connect
+ * Default platform set with brand-accurate Lucide icons and
+ * brand colors (CSS color strings, no emoji).
  */
+const DEFAULT_PLATFORMS: PlatformOption[] = [
+  { id: "instagram", name: "Instagram", icon: Instagram, color: "#c026d3" },
+  { id: "twitter",   name: "Twitter / X", icon: Twitter, color: "#0f172a" },
+  { id: "facebook",  name: "Facebook", icon: Facebook, color: "#1d4ed8" },
+  { id: "linkedin",  name: "LinkedIn", icon: Linkedin, color: "#1e3a8a" },
+  { id: "tiktok",    name: "TikTok", icon: Hash, color: "#111111" },
+  { id: "youtube",   name: "YouTube", icon: Youtube, color: "#dc2626" },
+  { id: "pinterest", name: "Pinterest", icon: Pin, color: "#b91c1c" },
+];
+
 export const PlatformsStep = ({
   state,
   updateState,
   platforms,
 }: PlatformsStepProps) => {
-  // Default platforms
-  const defaultPlatforms = [
-    { id: "instagram", name: "Instagram", icon: "📸", color: "bg-gradient-to-br from-purple-500 to-pink-500" },
-    { id: "twitter", name: "Twitter / X", icon: "🐦", color: "bg-black" },
-    { id: "facebook", name: "Facebook", icon: "👍", color: "bg-blue-600" },
-    { id: "linkedin", name: "LinkedIn", icon: "💼", color: "bg-blue-700" },
-    { id: "tiktok", name: "TikTok", icon: "🎵", color: "bg-black" },
-    { id: "youtube", name: "YouTube", icon: "📺", color: "bg-red-600" },
-    { id: "pinterest", name: "Pinterest", icon: "📌", color: "bg-red-700" },
-    { id: "threads", name: "Threads", icon: "🧵", color: "bg-black" },
-  ];
-
-  const platformOptions = platforms || defaultPlatforms;
+  const t = useT();
+  const platformOptions = platforms ?? DEFAULT_PLATFORMS;
 
   const togglePlatform = (id: string) => {
     const isConnected = state.connectedPlatforms.includes(id);
@@ -48,58 +57,69 @@ export const PlatformsStep = ({
     });
   };
 
+  const selectedCount = state.connectedPlatforms.length;
+
   return (
-    <div className="w-full max-w-4xl">
-      <div className="text-center mb-10">
-        <h1 className="text-3xl md:text-4xl font-extrabold text-foreground mb-3">
-          Connect your platforms
+    <div className="udb-step udb-step--wide">
+      <div className="udb-step__header">
+        <h1 className="udb-step__title">
+          {t(ONBOARDING_KEYS.platforms.title)}
         </h1>
-        <p className="text-muted-foreground">
-          Select the platforms you want to manage - you can add more later
+        <p className="udb-step__description">
+          {t(ONBOARDING_KEYS.platforms.description)}
         </p>
       </div>
 
-      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+      <div
+        className="udb-platforms"
+        role="group"
+        aria-label={t(ONBOARDING_KEYS.platforms.title)}
+      >
         {platformOptions.map((platform) => {
           const isConnected = state.connectedPlatforms.includes(platform.id);
-
+          const Icon = platform.icon;
           return (
             <button
               key={platform.id}
+              type="button"
+              aria-pressed={isConnected}
               onClick={() => togglePlatform(platform.id)}
               className={cn(
-                "group bg-background border rounded-2xl p-6 flex flex-col items-center gap-4 transition-all hover:scale-[1.02]",
-                isConnected ? "border-primary ring-2 ring-primary/20 bg-primary/5" : "border-border hover:border-primary/40"
+                "udb-platform",
+                isConnected && "udb-platform--connected",
               )}
             >
-              <div
-                className={cn(
-                  "w-12 h-12 rounded-2xl bg-muted flex items-center justify-center text-2xl group-hover:scale-110 transition-transform",
-                  platform.color
-                )}
+              <span
+                className="udb-platform__icon-box"
+                style={{ background: platform.color }}
               >
-                {platform.icon}
-              </div>
+                <Icon className="udb-platform__icon" aria-hidden="true" />
+              </span>
 
-              <div className="flex flex-col items-center">
-                <span className="font-bold text-foreground text-sm">{platform.name}</span>
+              <span className="udb-platform__meta">
+                <span className="udb-platform__name">{platform.name}</span>
                 <span
                   className={cn(
-                    "text-[10px] font-bold uppercase tracking-wider mt-1 transition-colors",
-                    isConnected ? "text-primary" : "text-muted-foreground"
+                    "udb-platform__state",
+                    isConnected && "udb-platform__state--on",
                   )}
                 >
-                  {isConnected ? "Connected" : "Connect"}
+                  {isConnected
+                    ? t(ONBOARDING_KEYS.platforms.connected)
+                    : t(ONBOARDING_KEYS.platforms.connect)}
                 </span>
-              </div>
+              </span>
             </button>
           );
         })}
       </div>
 
-      {state.connectedPlatforms.length > 0 && (
-        <p className="mt-8 text-center text-sm text-muted-foreground animate-in fade-in">
-          ✨ {state.connectedPlatforms.length} platform{state.connectedPlatforms.length > 1 ? "s" : ""} selected
+      {selectedCount > 0 && (
+        <p className="udb-step__hint" role="status" aria-live="polite">
+          {t(ONBOARDING_KEYS.platforms.selected, {
+            count: selectedCount,
+            plural: selectedCount === 1 ? '' : 's',
+          })}
         </p>
       )}
     </div>

package/src/domains/onboarding/components/StepNavigation.tsx

@@ -0,0 +1,108 @@
+/**
+ * Onboarding - Step Navigation Footer
+ *
+ * Renders the wizard's bottom action bar: back, skip, next/getStarted.
+ * All labels are i18n keys; the consumer maps them to localized strings.
+ */
+
+import { ArrowLeft, Loader2 } from "lucide-react";
+import { Button } from "../../../primitives";
+
+/**
+ * Centralized i18n keys for navigation labels.
+ * Components stay free of hardcoded UI strings.
+ */
+export const STEP_NAVIGATION_KEYS = {
+  back: 'onboarding.buttons.back',
+  skip: 'onboarding.buttons.skip',
+  next: 'onboarding.buttons.next',
+  getStarted: 'onboarding.buttons.getStarted',
+  finalizing: 'onboarding.buttons.finalizing',
+} as const;
+
+export type StepNavigationKey =
+  (typeof STEP_NAVIGATION_KEYS)[keyof typeof STEP_NAVIGATION_KEYS];
+
+/**
+ * Translation function shape consumers must inject.
+ * The wizard never depends on a specific i18n library.
+ */
+export type Translate = (key: string) => string;
+
+export interface StepNavigationProps {
+  currentStep: number;
+  totalSteps: number;
+  canGoNext: boolean;
+  isSaving?: boolean;
+  nextLabel?: string;
+  prevLabel?: string;
+  onNext: () => void;
+  onPrev: () => void;
+  allowSkip?: boolean;
+  onSkip?: () => void;
+  translate: Translate;
+}
+
+export const StepNavigation = ({
+  currentStep,
+  totalSteps,
+  canGoNext,
+  isSaving = false,
+  nextLabel,
+  prevLabel,
+  onNext,
+  onPrev,
+  allowSkip = false,
+  onSkip,
+  translate: t,
+}: StepNavigationProps) => {
+  const isLastStep = currentStep === totalSteps;
+
+  return (
+    <footer className="udb-onboarding__footer">
+      {currentStep > 1 ? (
+        <Button
+          variant="ghost"
+          onClick={onPrev}
+          className="udb-onboarding__footer-btn"
+          disabled={isSaving}
+        >
+          <ArrowLeft className="udb-onboarding__footer-icon" aria-hidden="true" />
+          {prevLabel ?? t(STEP_NAVIGATION_KEYS.back)}
+        </Button>
+      ) : (
+        <div />
+      )}
+
+      <div className="udb-onboarding__footer-actions">
+        {allowSkip && onSkip && !isLastStep && (
+          <Button
+            variant="ghost"
+            onClick={onSkip}
+            className="udb-onboarding__footer-btn"
+            disabled={isSaving}
+          >
+            {t(STEP_NAVIGATION_KEYS.skip)}
+          </Button>
+        )}
+
+        <Button
+          onClick={onNext}
+          className="udb-onboarding__footer-next"
+          disabled={!canGoNext || isSaving}
+        >
+          {isSaving ? (
+            <>
+              <Loader2 className="udb-onboarding__footer-icon udb-spin" aria-hidden="true" />
+              {t(STEP_NAVIGATION_KEYS.finalizing)}
+            </>
+          ) : isLastStep ? (
+            nextLabel ?? t(STEP_NAVIGATION_KEYS.getStarted)
+          ) : (
+            t(STEP_NAVIGATION_KEYS.next)
+          )}
+        </Button>
+      </div>
+    </footer>
+  );
+};