fix: Shipping toggle refresh + AlertDialog + Local Pickup nav + Notifications info

## 1. Fixed Shipping Method Toggle State ✅
- Updated useEffect to properly sync selectedZone with zones data
- Added JSON comparison to prevent infinite loops
- Toggle now refreshes zone data correctly

## 2. Replace confirm() with AlertDialog ✅
- Added AlertDialog component for delete confirmation
- Shows method name in confirmation message
- Better UX with proper dialog styling
- Updated both desktop and mobile versions

## 3. Added Local Pickup to Navigation ✅
- Added "Local Pickup" menu item in Settings
- Now accessible from Settings > Local Pickup
- Path: /settings/local-pickup

## 4. Shipping Cost Shortcodes ✅
- Already supported via HTML rendering
- WooCommerce shortcodes like [fee percent="10"] work
- [qty], [cost] are handled by WooCommerce backend
- No additional SPA work needed

## 5. Enhanced Notifications Page ✅
- Added comprehensive info card explaining:
  - What WooNooW provides (simple toggle)
  - What WooCommerce provides (advanced config)
- Clear guidance on when to use each
- Links to WooCommerce for templates/styling
- Replaced ToggleField with Switch for simpler usage

## Key Decisions:
✅ AlertDialog > confirm() for better UX
✅ Notifications = Simple toggle + guidance to WC
✅ Shortcodes handled by WooCommerce (no SPA work)
✅ Local Pickup now discoverable in nav

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

@@ -3,7 +3,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import { SettingsLayout } from './components/SettingsLayout';
 import { SettingsCard } from './components/SettingsCard';
-import { ToggleField } from './components/ToggleField';
+import { Switch } from '@/components/ui/switch';
 import { Button } from '@/components/ui/button';
 import { ExternalLink, RefreshCw, Mail } from 'lucide-react';
 import { toast } from 'sonner';
@@ -65,6 +65,38 @@ export default function NotificationsSettings() {
       }
     >
       <div className="space-y-6">
+        {/* Info Card */}
+        <SettingsCard
+          title={__('About Email Notifications')}
+          description={__('Quick enable/disable controls for WooCommerce emails')}
+        >
+          <div className="text-sm text-muted-foreground space-y-2">
+            <p>
+              {__('WooNooW provides simple toggle controls to enable or disable email notifications. For advanced customization like email templates, styling, content, and recipients, use the WooCommerce settings page.')}
+            </p>
+            <p className="font-medium text-foreground">
+              {__('What you can do here:')}
+            </p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li>{__('Enable/disable customer emails (order confirmations, shipping updates, etc.)')}</li>
+              <li>{__('Enable/disable admin emails (new order notifications, low stock alerts, etc.)')}</li>
+              <li>{__('View current sender name and email address')}</li>
+            </ul>
+            <p className="font-medium text-foreground mt-3">
+              {__('For advanced configuration:')}
+            </p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li>{__('Email templates and HTML/CSS styling')}</li>
+              <li>{__('Email subject lines and content')}</li>
+              <li>{__('Custom recipient addresses')}</li>
+              <li>{__('Additional email headers')}</li>
+            </ul>
+            <p className="mt-3">
+              {__('Use the "Edit in WooCommerce" links below or the advanced settings link at the bottom.')}
+            </p>
+          </div>
+        </SettingsCard>
+
         {/* Customer Emails */}
         <SettingsCard
           title={__('Customer Notifications')}
@@ -81,9 +113,9 @@ export default function NotificationsSettings() {
                   <p className="text-sm text-muted-foreground">{email.description}</p>
                 </div>
                 <div className="flex items-center gap-3">
-                  <ToggleField
+                  <Switch
                     checked={email.enabled === 'yes'}
-                    onChange={(checked) => toggleMutation.mutate({ 
+                    onCheckedChange={(checked) => toggleMutation.mutate({ 
                       emailId: email.id, 
                       enabled: checked 
                     })}
@@ -124,9 +156,9 @@ export default function NotificationsSettings() {
                   <p className="text-sm text-muted-foreground">{email.description}</p>
                 </div>
                 <div className="flex items-center gap-3">
-                  <ToggleField
+                  <Switch
                     checked={email.enabled === 'yes'}
-                    onChange={(checked) => toggleMutation.mutate({ 
+                    onCheckedChange={(checked) => toggleMutation.mutate({ 
                       emailId: email.id, 
                       enabled: checked 
                     })}