Move payment settings to Brand tab in Settings

- Integrated PaymentSettingsForm into SettingsClient Brand tab - Added paymentSettings prop to SettingsClient and Settings page - Redirected /admin/settings/payments to /admin/settings#brand - Updated PaymentSettingsForm to use admin CSS variables for styling - Fixed colors to match admin design system (no dark backgrounds)
2026-06-02 04:14:27 +00:00
parent d44506dd01
commit 7783604141
11 changed files with 535 additions and 264 deletions
@@ -0,0 +1,300 @@
+"use client";
+
+import { useState } from "react";
+import GlassModal from "@/components/admin/GlassModal";
+import { AdminInput, AdminTextInput } from "@/components/admin/design-system";
+
+type Role = "platform_admin" | "brand_admin" | "store_employee";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: (user: import("@/actions/admin/users").AdminUserRow) => void;
+  brands: { id: string; name: string }[];
+  currentUser: {
+    role: string;
+  };
+};
+
+const FLAG_LABELS: Record<string, string> = {
+  can_manage_products: "Products",
+  can_manage_stops: "Stops",
+  can_manage_orders: "Orders",
+  can_manage_pickup: "Pickup",
+  can_manage_messages: "Messages",
+  can_manage_refunds: "Refunds",
+  can_manage_users: "Users",
+  can_manage_water_log: "Water Log",
+  can_manage_reports: "Reports",
+};
+
+const ALL_FLAGS = Object.keys(FLAG_LABELS);
+
+const defaultFlags: Record<string, boolean> = {
+  can_manage_products: false,
+  can_manage_stops: false,
+  can_manage_orders: false,
+  can_manage_pickup: false,
+  can_manage_messages: false,
+  can_manage_refunds: false,
+  can_manage_users: false,
+  can_manage_water_log: false,
+  can_manage_reports: false,
+};
+
+const UserIcon = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+    <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
+    <circle cx="9" cy="7" r="4"/>
+    <path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
+  </svg>
+);
+
+export default function CreateUserModal({ isOpen, onClose, onSuccess, brands, currentUser }: Props) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [role, setRole] = useState<Role>("store_employee");
+  const [brandId, setBrandId] = useState<string | null>(null);
+  const [flags, setFlags] = useState<Record<string, boolean>>({ ...defaultFlags });
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const showBrandSelect = role === "brand_admin" || role === "store_employee";
+
+  const availableRoles: Role[] =
+    currentUser.role === "platform_admin"
+      ? ["platform_admin", "brand_admin", "store_employee"]
+      : ["brand_admin", "store_employee"];
+
+  function toggleFlag(flag: string) {
+    setFlags((prev) => ({ ...prev, [flag]: !prev[flag] }));
+  }
+
+  function resetForm() {
+    setEmail("");
+    setPassword("");
+    setDisplayName("");
+    setPhoneNumber("");
+    setRole("store_employee");
+    setBrandId(null);
+    setFlags({ ...defaultFlags });
+    setError(null);
+  }
+
+  async function handleSubmit() {
+    if (!email.includes("@") || !password || password.length < 6) {
+      setError("Please enter a valid email and a password with at least 6 characters.");
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      const { createAdminUser } = await import("@/actions/admin/users");
+      const result = await createAdminUser({
+        email,
+        password,
+        display_name: displayName || undefined,
+        phone_number: phoneNumber || undefined,
+        role,
+        brand_id: brandId,
+        flags,
+        mustChangePassword: true,
+      });
+
+      if (result.error) {
+        setError(result.error);
+        return;
+      }
+
+      if (result.user) {
+        onSuccess(result.user);
+        resetForm();
+        onClose();
+      }
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : "An unexpected error occurred.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function handleClose() {
+    if (!saving) {
+      resetForm();
+      onClose();
+    }
+  }
+
+  const roleDescriptions: Record<Role, string> = {
+    platform_admin: "Full platform access",
+    brand_admin: "Brand-level admin",
+    store_employee: "Pickup and order operations only",
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <GlassModal
+      title="Create User"
+      titleIcon={<UserIcon className="h-5 w-5 text-[var(--admin-accent)]" />}
+      subtitle="Add a new admin user to your organization"
+      onClose={handleClose}
+      maxWidth="max-w-lg"
+    >
+      <div className="space-y-6">
+        {/* Error banner */}
+        {error && (
+          <div className="flex items-start justify-between rounded-lg bg-red-50 p-4 text-sm text-red-700 gap-3 border border-red-200">
+            <span>{error}</span>
+            <button onClick={() => setError(null)} className="text-red-400 hover:text-red-600 shrink-0">
+              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        )}
+
+        {/* Email */}
+        <div>
+          <label className="block text-sm font-medium text-[var(--admin-text-primary)] mb-1.5">Email</label>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full rounded-xl border border-[var(--admin-border)] bg-[var(--admin-card-bg)] px-3 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20 placeholder:text-[var(--admin-text-muted)]"
+            placeholder="user@example.com"
+          />
+        </div>
+
+        {/* Password */}
+        <div>
+          <label className="block text-sm font-medium text-[var(--admin-text-primary)] mb-1.5">Password</label>
+          <p className="text-xs text-[var(--admin-text-muted)] mb-1.5">Minimum 6 characters.</p>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full rounded-xl border border-[var(--admin-border)] bg-[var(--admin-card-bg)] px-3 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20 placeholder:text-[var(--admin-text-muted)]"
+            placeholder="Choose a password"
+            minLength={6}
+          />
+        </div>
+
+        {/* Display Name */}
+        <div>
+          <label className="block text-sm font-medium text-[var(--admin-text-primary)] mb-1.5">Display Name</label>
+          <input
+            type="text"
+            value={displayName}
+            onChange={(e) => setDisplayName(e.target.value)}
+            className="w-full rounded-xl border border-[var(--admin-border)] bg-[var(--admin-card-bg)] px-3 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20 placeholder:text-[var(--admin-text-muted)]"
+            placeholder="Kyle Martinez"
+          />
+        </div>
+
+        {/* Phone Number */}
+        <div>
+          <label className="block text-sm font-medium text-[var(--admin-text-primary)] mb-1.5">Phone Number</label>
+          <p className="text-xs text-[var(--admin-text-muted)] mb-1.5">Optional.</p>
+          <input
+            type="tel"
+            value={phoneNumber}
+            onChange={(e) => setPhoneNumber(e.target.value)}
+            className="w-full rounded-xl border border-[var(--admin-border)] bg-[var(--admin-card-bg)] px-3 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20 placeholder:text-[var(--admin-text-muted)]"
+            placeholder="+1 (555) 000-0000"
+          />
+        </div>
+
+        {/* Role */}
+        <div>
+          <label className="block text-sm font-medium text-[var(--admin-text-primary)] mb-2">Role</label>
+          <div className="space-y-2">
+            {availableRoles.map((r) => (
+              <label key={r} className="flex items-center gap-3 rounded-lg border border-[var(--admin-border)] px-3 py-2.5 cursor-pointer hover:bg-[var(--admin-bg)] transition-colors">
+                <input
+                  type="radio"
+                  name="role"
+                  value={r}
+                  checked={role === r}
+                  onChange={() => setRole(r)}
+                  className="accent-[var(--admin-accent)]"
+                />
+                <div>
+                  <span className="font-medium text-[var(--admin-text-primary)] capitalize">{r.replace("_", " ")}</span>
+                  <p className="text-xs text-[var(--admin-text-muted)]">{roleDescriptions[r]}</p>
+                </div>
+              </label>
+            ))}
+          </div>
+        </div>
+
+        {/* Brand */}
+        {showBrandSelect && (
+          <div>
+            <label className="block text-sm font-medium text-[var(--admin-text-primary)] mb-1.5">Brand</label>
+            <select
+              value={brandId ?? ""}
+              onChange={(e) => setBrandId(e.target.value || null)}
+              className="w-full rounded-xl border border-[var(--admin-border)] bg-[var(--admin-card-bg)] px-3 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20"
+            >
+              <option value="">Select a brand</option>
+              {brands.map((b) => (
+                <option key={b.id} value={b.id}>{b.name}</option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {/* Permissions */}
+        <div>
+          <label className="block text-sm font-medium text-[var(--admin-text-primary)] mb-2">Permissions</label>
+          <div className="space-y-2">
+            {ALL_FLAGS.map((flag) => (
+              <label key={flag} className="flex items-center justify-between rounded-lg border border-[var(--admin-border)] px-4 py-2.5 hover:bg-[var(--admin-bg)] cursor-pointer transition-colors">
+                <span className="text-sm text-[var(--admin-text-primary)]">{FLAG_LABELS[flag]}</span>
+                <button
+                  type="button"
+                  onClick={() => toggleFlag(flag)}
+                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${flags[flag] ? "bg-[var(--admin-accent)]" : "bg-stone-300"}`}
+                >
+                  <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${flags[flag] ? "translate-x-6" : "translate-x-1"}`} />
+                </button>
+              </label>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-end gap-3 mt-8 -mx-8 -mb-8 px-8 py-6 border-t border-[var(--admin-border)] bg-[var(--admin-bg)] rounded-b-2xl">
+        <button
+          onClick={handleClose}
+          disabled={saving}
+          className="rounded-xl border border-[var(--admin-border)] px-5 py-2.5 text-sm font-medium text-[var(--admin-text-secondary)] hover:bg-[var(--admin-bg-subtle)] transition-colors disabled:opacity-50"
+        >
+          Cancel
+        </button>
+        <button
+          onClick={handleSubmit}
+          disabled={saving || !email.includes("@") || !password || password.length < 6}
+          className="rounded-xl bg-[var(--admin-accent)] px-5 py-2.5 text-sm font-medium text-white hover:bg-[var(--admin-accent-hover)] transition-colors disabled:opacity-50"
+        >
+          {saving ? (
+            <span className="flex items-center gap-2">
+              <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+              </svg>
+              Creating...
+            </span>
+          ) : "Create User"}
+        </button>
+      </div>
+    </GlassModal>
+  );
+}