fix: Zone modal blank + Tax route redirect + Simplify notifications (Shopify style)

## 1. Fixed Blank Zone Modal ✅
**Problem:** Console error "setIsModalOpen is not defined"

**Fix:**
- Removed unused isModalOpen/setIsModalOpen state
- Use selectedZone state to control modal open/close
- Dialog/Drawer opens when selectedZone is truthy
- Simplified onClick handlers

## 2. Fixed Tax Settings Blank Page ✅
**Problem:** URL /settings/taxes (plural) was blank

**Fix:**
- Added redirect route from /settings/taxes → /settings/tax
- Maintains backward compatibility
- Users can access via either URL

## 3. Simplified Notifications (Shopify/Marketplace Style) ✅
**Philosophy:** "App for daily needs and quick access"

**Changes:**
- ✅ Removed individual "Edit in WooCommerce" links (cluttered)
- ✅ Removed "Email Sender" section (not daily need)
- ✅ Removed redundant "Advanced Settings" link at bottom
- ✅ Simplified info card with practical tips
- ✅ Clean toggle-only interface like Shopify
- ✅ Single link to advanced settings in info card

**What Shopify/Marketplaces Do:**
- Simple on/off toggles for each notification
- Brief description of what each email does
- Practical tips about which to enable
- Single link to advanced customization
- No clutter, focus on common tasks

**What We Provide:**
- Toggle to enable/disable each email
- Clear descriptions
- Quick tips for best practices
- Link to WooCommerce for templates/styling

**What WooCommerce Provides:**
- Email templates and HTML/CSS
- Subject lines and content
- Sender details
- Custom recipients

Perfect separation of concerns! 🎯

admin-spa/src/App.tsx

@@ -430,6 +430,7 @@ function AppRoutes() {
       <Route path="/settings/payments" element={<SettingsPayments />} />
       <Route path="/settings/shipping" element={<SettingsShipping />} />
       <Route path="/settings/tax" element={<SettingsTax />} />
+      <Route path="/settings/taxes" element={<Navigate to="/settings/tax" replace />} />
       <Route path="/settings/local-pickup" element={<SettingsLocalPickup />} />
       <Route path="/settings/checkout" element={<SettingsIndex />} />
       <Route path="/settings/customers" element={<SettingsIndex />} />

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

@@ -65,35 +65,41 @@ export default function NotificationsSettings() {
       }
     >
       <div className="space-y-6">
-        {/* Info Card */}
+        {/* Info Card - Shopify/Marketplace Style */}
         <SettingsCard
-          title={__('About Email Notifications')}
+          title={__('Email Notifications')}
-          description={__('Quick enable/disable controls for WooCommerce emails')}
+          description={__('Manage automated emails sent to customers and admins')}
         >
-          <div className="text-sm text-muted-foreground space-y-2">
+          <div className="text-sm space-y-3">
-            <p>
+            <p className="text-muted-foreground">
-              {__('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.')}
+              {__('Control which email notifications are sent automatically when orders are placed, shipped, or updated. All emails use your store branding and can be customized in WooCommerce settings.')}
-            </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 className="bg-muted/50 rounded-lg p-4 space-y-2">
+              <p className="font-medium text-foreground text-sm">
+                💡 {__('Quick Tips')}
+              </p>
+              <ul className="text-xs text-muted-foreground space-y-1.5">
+                <li>• {__('Keep order confirmation emails enabled - customers expect immediate confirmation')}</li>
+                <li>• {__('Enable shipping notifications to reduce "where is my order?" inquiries')}</li>
+                <li>• {__('Admin notifications help you stay on top of new orders and issues')}</li>
+                <li>• {__('Disable emails you don\'t need to reduce inbox clutter')}</li>
+              </ul>
+            </div>
+
+            <div className="pt-2">
+              <p className="text-xs text-muted-foreground">
+                {__('Need to customize email templates, subject lines, or sender details?')}{' '}
+                <a 
+                  href={`${(window as any).WNW_CONFIG?.wpAdminUrl || '/wp-admin'}/admin.php?page=wc-settings&tab=email`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary hover:underline"
+                >
+                  {__('Go to advanced email settings →')}
+                </a>
+              </p>
+            </div>
           </div>
         </SettingsCard>
 
@@ -104,37 +110,19 @@ export default function NotificationsSettings() {
         >
           <div className="space-y-4">
             {customerEmails.map((email: any) => (
-              <div key={email.id} className="flex items-start justify-between py-3 border-b last:border-0">
+              <div key={email.id} className="flex items-center justify-between py-3 border-b last:border-0">
                 <div className="flex-1">
-                  <div className="flex items-center gap-2 mb-1">
+                  <h3 className="font-medium text-sm">{email.title}</h3>
-                    <Mail className="h-4 w-4 text-muted-foreground" />
+                  <p className="text-xs text-muted-foreground mt-0.5">{email.description}</p>
-                    <h3 className="font-medium">{email.title}</h3>
-                  </div>
-                  <p className="text-sm text-muted-foreground">{email.description}</p>
-                </div>
-                <div className="flex items-center gap-3">
-                  <Switch
-                    checked={email.enabled === 'yes'}
-                    onCheckedChange={(checked) => toggleMutation.mutate({ 
-                      emailId: email.id, 
-                      enabled: checked 
-                    })}
-                    disabled={toggleMutation.isPending}
-                  />
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    asChild
-                  >
-                    <a
-                      href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=email&section=${email.id}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <ExternalLink className="h-4 w-4" />
-                    </a>
-                  </Button>
                 </div>
+                <Switch
+                  checked={email.enabled === 'yes'}
+                  onCheckedChange={(checked) => toggleMutation.mutate({ 
+                    emailId: email.id, 
+                    enabled: checked 
+                  })}
+                  disabled={toggleMutation.isPending}
+                />
               </div>
             ))}
           </div>
@@ -147,113 +135,24 @@ export default function NotificationsSettings() {
         >
           <div className="space-y-4">
             {adminEmails.map((email: any) => (
-              <div key={email.id} className="flex items-start justify-between py-3 border-b last:border-0">
+              <div key={email.id} className="flex items-center justify-between py-3 border-b last:border-0">
                 <div className="flex-1">
-                  <div className="flex items-center gap-2 mb-1">
+                  <h3 className="font-medium text-sm">{email.title}</h3>
-                    <Mail className="h-4 w-4 text-muted-foreground" />
+                  <p className="text-xs text-muted-foreground mt-0.5">{email.description}</p>
-                    <h3 className="font-medium">{email.title}</h3>
-                  </div>
-                  <p className="text-sm text-muted-foreground">{email.description}</p>
-                </div>
-                <div className="flex items-center gap-3">
-                  <Switch
-                    checked={email.enabled === 'yes'}
-                    onCheckedChange={(checked) => toggleMutation.mutate({ 
-                      emailId: email.id, 
-                      enabled: checked 
-                    })}
-                    disabled={toggleMutation.isPending}
-                  />
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    asChild
-                  >
-                    <a
-                      href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=email&section=${email.id}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <ExternalLink className="h-4 w-4" />
-                    </a>
-                  </Button>
                 </div>
+                <Switch
+                  checked={email.enabled === 'yes'}
+                  onCheckedChange={(checked) => toggleMutation.mutate({ 
+                    emailId: email.id, 
+                    enabled: checked 
+                  })}
+                  disabled={toggleMutation.isPending}
+                />
               </div>
             ))}
           </div>
         </SettingsCard>
 
-        {/* Email Sender Settings */}
-        <SettingsCard
-          title={__('Email Sender')}
-          description={__('Configure who emails are sent from')}
-        >
-          <div className="space-y-3">
-            <div className="flex items-center justify-between py-2">
-              <div>
-                <p className="font-medium text-sm">{__('From Name')}</p>
-                <p className="text-xs text-muted-foreground">
-                  {settings?.from_name || __('Not configured')}
-                </p>
-              </div>
-              <Button
-                variant="outline"
-                size="sm"
-                asChild
-              >
-                <a
-                  href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=email`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {__('Change')}
-                </a>
-              </Button>
-            </div>
-
-            <div className="flex items-center justify-between py-2 border-t">
-              <div>
-                <p className="font-medium text-sm">{__('From Email')}</p>
-                <p className="text-xs text-muted-foreground">
-                  {settings?.from_email || __('Not configured')}
-                </p>
-              </div>
-              <Button
-                variant="outline"
-                size="sm"
-                asChild
-              >
-                <a
-                  href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=email`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {__('Change')}
-                </a>
-              </Button>
-            </div>
-          </div>
-        </SettingsCard>
-
-        {/* Advanced Settings Link */}
-        <div className="rounded-lg border border-dashed p-6 text-center">
-          <p className="text-sm text-muted-foreground mb-4">
-            {__('For email templates, styling, and advanced configuration, use the WooCommerce settings page')}
-          </p>
-          <Button
-            variant="outline"
-            asChild
-          >
-            <a
-              href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=email`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <ExternalLink className="h-4 w-4 mr-2" />
-              {__('Open Email Settings in WooCommerce')}
-            </a>
-          </Button>
-        </div>
       </div>
     </SettingsLayout>
   );

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

@@ -243,10 +243,7 @@ export default function ShippingPage() {
                 <Button 
                   variant="ghost" 
                   size="sm"
-                  onClick={() => {
+                  onClick={() => setSelectedZone(zone)}
-                    setSelectedZone(zone);
-                    setIsModalOpen(true);
-                  }}
                 >
                   <Edit className="h-4 w-4" />
                 </Button>
@@ -325,7 +322,7 @@ export default function ShippingPage() {
       {/* Settings Modal/Drawer */}
       {selectedZone && (
         isDesktop ? (
-          <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+          <Dialog open={!!selectedZone} onOpenChange={(open) => !open && setSelectedZone(null)}>
             <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col p-0">
               <DialogHeader className="px-6 py-4 border-b">
                 <DialogTitle>{selectedZone.name}</DialogTitle>
@@ -497,14 +494,14 @@ export default function ShippingPage() {
                     {__('Edit in WooCommerce')}
                   </a>
                 </Button>
-                <Button onClick={() => setIsModalOpen(false)}>
+                <Button onClick={() => setSelectedZone(null)}>
                   {__('Done')}
                 </Button>
               </div>
             </DialogContent>
           </Dialog>
         ) : (
-          <Drawer open={isModalOpen} onOpenChange={setIsModalOpen}>
+          <Drawer open={!!selectedZone} onOpenChange={(open) => !open && setSelectedZone(null)}>
             <DrawerContent className="max-h-[90vh] flex flex-col">
               <DrawerHeader className="border-b">
                 <DrawerTitle>{selectedZone.name}</DrawerTitle>
@@ -668,7 +665,7 @@ export default function ShippingPage() {
                     {__('Edit in WooCommerce')}
                   </a>
                 </Button>
-                <Button onClick={() => setIsModalOpen(false)} className="w-full">
+                <Button onClick={() => setSelectedZone(null)} className="w-full">
                   {__('Done')}
                 </Button>
               </div>