tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Move payment settings to Brand tab in Settings

Browse Source 
- 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)
This commit is contained in:
default
2026-06-02 04:14:27 +00:00
parent d44506dd01
commit 7783604141
11 changed files with 535 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin/SettingsClient.tsx
+75 -1
View File
@@ -3,12 +3,16 @@
import { useState, useEffect } from "react";
import SettingsSections from "@/components/admin/SettingsSections";
import UsersPage from "@/components/admin/UsersPage";
import BrandSettingsForm from "@/components/admin/BrandSettingsForm";
import PaymentSettingsForm from "@/components/admin/PaymentSettingsForm";
import { PageHeader, AdminButton } from "@/components/admin/design-system";
import type { PaymentProvider } from "@/actions/payments";
type Tab = "general" | "workers" | "tasks" | "users";
type Tab = "general" | "brand" | "workers" | "tasks" | "users";
const TABS: { id: Tab; label: string; icon: string; hash: string }[] = [
{ id: "general", label: "General", icon: "settings", hash: "general" },
{ id: "brand", label: "Brand", icon: "brand", hash: "brand" },
{ id: "workers", label: "Workers", icon: "users", hash: "workers" },
{ id: "tasks", label: "Tasks", icon: "list", hash: "tasks" },
{ id: "users", label: "Users", icon: "user-check", hash: "users" },
@@ -22,6 +26,11 @@ const Icons = {
<circle cx="12" cy="12" r="3"/>
</svg>
),
brand: (className: string) => (
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.592 9.592c1.106.105 1.35.374 1.591.659l4.317 4.317c.221.241.375.574.375.896v.318c0 .621-.504 1.125-1.125 1.125H5.25A2.25 2.25 0 013 16.5v-4.318c0-.597-.237-1.17-.659-1.591l-9.592-9.592A2.25 2.25 0 012.25 5.25m5.318 4.5v4.318l3.591 3.591M5.25 7.5a2.25 2.25 0 012.25-2.25h4.318m0 0L9 10.5m5.25-2.25v4.318m0 0L14.25 12m5.25-2.25H9.75" />
</svg>
),
users: (className: string) => (
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
@@ -53,6 +62,17 @@ type Props = {
brandId: string;
users: import("@/actions/admin/users").AdminUserRow[];
brands: Brand[];
paymentSettings?: {
provider?: PaymentProvider | null;
stripe_publishable_key?: string | null;
stripe_secret_key?: string | null;
square_access_token?: string | null;
square_location_id?: string | null;
square_sync_enabled?: boolean;
square_inventory_mode?: "none" | "rc_to_square" | "square_to_rc" | "bidirectional";
square_last_sync_at?: string | null;
square_last_sync_error?: string | null;
} | null;
currentUser: {
id: string;
role: string;
@@ -64,6 +84,7 @@ export default function SettingsClient({
brandId,
users,
brands,
paymentSettings,
currentUser,
}: Props) {
const [activeTab, setActiveTab] = useState<Tab>("general");
@@ -128,6 +149,59 @@ export default function SettingsClient({
</div>
)}
{activeTab === "brand" && (
<div className="space-y-6">
{/* Brand Settings */}
<div className="rounded-2xl border border-[var(--admin-border)] bg-white overflow-hidden">
<div className="p-4 sm:p-6 border-b border-[var(--admin-border)]">
<div className="flex items-center gap-3">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500">
{Icons.brand("w-4 h-4 text-white")}
</div>
<div>
<h2 className="text-sm sm:text-lg font-bold text-[var(--admin-text-primary)]">Brand Settings</h2>
<p className="text-[10px] sm:text-xs text-[var(--admin-text-muted)]">Company information, logos, and default signatures</p>
</div>
</div>
</div>
<div className="p-4 sm:p-6">
<BrandSettingsForm
settings={null}
brandId={brandId}
brandName=""
brands={brands}
isPlatformAdmin={currentUser.role === "platform_admin"}
/>
</div>
</div>
{/* Payment Settings */}
<div className="rounded-2xl border border-[var(--admin-border)] bg-white overflow-hidden">
<div className="p-4 sm:p-6 border-b border-[var(--admin-border)]">
<div className="flex items-center gap-3">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--admin-accent)]">
<svg className="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 0h3m-3.75 0h3m-3.75 0h3m-3.75 0h3m3.75 0h3m-3.75 0h3m-3.75 0h3m-3.75 0h3m3.75 0h3m-3.75 0h3m-3.75 0h3m-3.75 0h3" />
</svg>
</div>
<div>
<h2 className="text-sm sm:text-lg font-bold text-[var(--admin-text-primary)]">Payment Settings</h2>
<p className="text-[10px] sm:text-xs text-[var(--admin-text-muted)]">Configure your payment provider for checkout processing</p>
</div>
</div>
</div>
<div className="p-4 sm:p-6">
<PaymentSettingsForm
settings={paymentSettings ?? null}
brandId={brandId}
brands={brands}
isPlatformAdmin={currentUser.role === "platform_admin"}
/>
</div>
</div>
</div>
)}
{activeTab === "workers" && (
<div className="rounded-2xl border border-[var(--admin-border)] bg-white overflow-hidden">
<div className="p-4 sm:p-6 border-b border-[var(--admin-border)]">