feat: Improve settings layout and add addon integration design

🎨 Layout Changes:
- Changed settings from boxed (max-w-5xl) to full-width
- Consistent with Orders/Dashboard pages
- Better use of space for complex forms

📝 Payments Page Reorder:
- Manual payment methods first (Bank Transfer, COD)
- Payment providers second (Stripe, PayPal)
- Payment settings third (test mode, capture)
- Test mode banner moved inside Payment Settings card

📚 Documentation:
- Created SETUP_WIZARD_DESIGN.md
- 5-step wizard flow (Store, Payments, Shipping, Taxes, Product)
- Smart defaults and skip logic
- Complete addon integration architecture

🔌 Addon Integration Design:
- PaymentProviderRegistry with filter hooks
- ShippingMethodRegistry with filter hooks
- REST API endpoints for dynamic loading
- Example addon implementations
- Support for custom React components

✨ Key Features:
- woonoow_payment_providers filter hook
- woonoow_shipping_zones filter hook
- Dynamic component loading from addons
- OAuth flow support for payment gateways
- Backward compatible with WooCommerce

admin-spa/src/routes/Settings/Payments.tsx

@@ -65,21 +65,51 @@ export default function PaymentsPage() {
       description="Manage how you get paid"
       onSave={handleSave}
     >
-      {/* Test Mode Banner */}
-      {testMode && (
-        <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
-          <div className="flex items-center gap-2">
-            <span className="text-yellow-600 dark:text-yellow-400 font-semibold">
-              ⚠️ Test Mode Active
-            </span>
-            <span className="text-sm text-yellow-700 dark:text-yellow-300">
-              No real charges will be processed
-            </span>
-          </div>
+      {/* Manual Payment Methods - First priority */}
+      <SettingsCard
+        title="Manual Payment Methods"
+        description="Accept payments outside your online store"
+      >
+        <div className="space-y-4">
+          {manualMethods.map((method) => (
+            <div
+              key={method.id}
+              className="border rounded-lg p-4"
+            >
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <div className="p-2 bg-muted rounded-lg">
+                    <Banknote className="h-5 w-5 text-muted-foreground" />
+                  </div>
+                  <div>
+                    <h3 className="font-medium">{method.name}</h3>
+                    {method.enabled && (
+                      <p className="text-sm text-muted-foreground mt-1">
+                        Customers can choose this at checkout
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {method.enabled && (
+                    <Button variant="ghost" size="sm">
+                      <Settings className="h-4 w-4" />
+                    </Button>
+                  )}
+                  <ToggleField
+                    id={method.id}
+                    label=""
+                    checked={method.enabled}
+                    onCheckedChange={() => toggleManualMethod(method.id)}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
         </div>
-      )}
+      </SettingsCard>
 
-      {/* Payment Providers */}
+      {/* Payment Providers - Second priority */}
       <SettingsCard
         title="Payment Providers"
         description="Accept credit cards and digital wallets"
@@ -141,55 +171,25 @@ export default function PaymentsPage() {
         </div>
       </SettingsCard>
 
-      {/* Manual Payment Methods */}
-      <SettingsCard
-        title="Manual Payment Methods"
-        description="Accept payments outside your online store"
-      >
-        <div className="space-y-4">
-          {manualMethods.map((method) => (
-            <div
-              key={method.id}
-              className="border rounded-lg p-4"
-            >
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-4">
-                  <div className="p-2 bg-muted rounded-lg">
-                    <Banknote className="h-5 w-5 text-muted-foreground" />
-                  </div>
-                  <div>
-                    <h3 className="font-medium">{method.name}</h3>
-                    {method.enabled && (
-                      <p className="text-sm text-muted-foreground mt-1">
-                        Customers can choose this at checkout
-                      </p>
-                    )}
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  {method.enabled && (
-                    <Button variant="ghost" size="sm">
-                      <Settings className="h-4 w-4" />
-                    </Button>
-                  )}
-                  <ToggleField
-                    id={method.id}
-                    label=""
-                    checked={method.enabled}
-                    onCheckedChange={() => toggleManualMethod(method.id)}
-                  />
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </SettingsCard>
-
-      {/* Payment Settings */}
+      {/* Payment Settings - Third priority (test mode, capture, etc) */}
       <SettingsCard
         title="Payment Settings"
         description="General payment options"
       >
+        {/* Test Mode Banner */}
+        {testMode && (
+          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-4">
+            <div className="flex items-center gap-2">
+              <span className="text-yellow-600 dark:text-yellow-400 font-semibold">
+                ⚠️ Test Mode Active
+              </span>
+              <span className="text-sm text-yellow-700 dark:text-yellow-300">
+                No real charges will be processed
+              </span>
+            </div>
+          </div>
+        )}
+
         <ToggleField
           id="testMode"
           label="Test mode"

admin-spa/src/routes/Settings/components/SettingsLayout.tsx

@@ -58,8 +58,8 @@ export function SettingsLayout({
         </div>
       )}
 
-      {/* Content */}
-      <div className="container max-w-5xl mx-auto px-4 py-8">
+      {/* Content - Full width like Orders/Dashboard */}
+      <div className="px-4 py-8 w-full">
         {!onSave && (
           <div className="mb-8">
             <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
@@ -68,13 +68,12 @@ export function SettingsLayout({
             )}
           </div>
         )}
-
         {isLoading ? (
           <div className="flex items-center justify-center py-12">
             <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
           </div>
         ) : (
-          <div className="space-y-6">{children}</div>
+          <div className="space-y-6 max-w-6xl">{children}</div>
         )}
       </div>
     </div>