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! 🎯
This commit is contained in:
dwindown
@@ -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 />} />
|
||||
|
||||
@@ -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')}
|
||||
description={__('Quick enable/disable controls for WooCommerce emails')}
|
||||
title={__('Email Notifications')}
|
||||
description={__('Manage automated emails sent to customers and admins')}
|
||||
>
|
||||
<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.')}
|
||||
<div className="text-sm space-y-3">
|
||||
<p className="text-muted-foreground">
|
||||
{__('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>
|
||||
|
||||
<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">
|
||||
<Mail className="h-4 w-4 text-muted-foreground" />
|
||||
<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§ion=${email.id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
<h3 className="font-medium text-sm">{email.title}</h3>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">{email.description}</p>
|
||||
</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">
|
||||
<Mail className="h-4 w-4 text-muted-foreground" />
|
||||
<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§ion=${email.id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
<h3 className="font-medium text-sm">{email.title}</h3>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">{email.description}</p>
|
||||
</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>
|
||||
);
|
||||
|
||||
@@ -243,10 +243,7 @@ export default function ShippingPage() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedZone(zone);
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
onClick={() => setSelectedZone(zone)}
|
||||
>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user