fix: Newsletter React error #310 and refactor Wishlist module

Newsletter Fix:
- Move all hooks (useQuery, useMutation) before conditional returns
- Add 'enabled' option to useQuery to control when it fetches
- Fixes React error #310: useEffect called conditionally
- Newsletter page now loads without errors at /marketing/newsletter

Wishlist Module Refactoring:
- Create WishlistSettings.php with 8 configurable settings:
  * Enable guest wishlists
  * Wishlist page selector
  * Show in header toggle
  * Enable sharing
  * Back in stock notifications
  * Max items per wishlist
  * Multiple wishlists support
  * Show add to cart button
- Add has_settings flag to wishlist module in ModuleRegistry
- Initialize WishlistSettings in woonoow.php
- Update customer-spa BaseLayout to use isEnabled('wishlist') check
- Wishlist page already has module check (no changes needed)

Files Added (1):
- includes/Modules/WishlistSettings.php

Files Modified (5):
- admin-spa/src/routes/Marketing/Newsletter.tsx
- includes/Core/ModuleRegistry.php
- woonoow.php
- customer-spa/src/layouts/BaseLayout.tsx
- admin-spa/dist/app.js (rebuilt)

Both newsletter and wishlist now follow the same module pattern:
- Settings via schema (no code required)
- Module enable/disable controls feature visibility
- Settings page at /settings/modules/{module_id}
- Consistent user experience
This commit is contained in:
Dwindi Ramadhana
2025-12-26 21:29:27 +07:00
parent c6cef97ef8
commit daebd5f989
7 changed files with 567 additions and 21 deletions

View File

@@ -24,32 +24,14 @@ export default function NewsletterSubscribers() {
const navigate = useNavigate();
const { isEnabled } = useModules();
if (!isEnabled('newsletter')) {
return (
<SettingsLayout
title="Newsletter Subscribers"
description="Newsletter module is disabled"
>
<div className="bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-900 rounded-lg p-6 text-center">
<Mail className="h-12 w-12 text-yellow-600 mx-auto mb-3" />
<h3 className="font-semibold text-lg mb-2">Newsletter Module Disabled</h3>
<p className="text-sm text-muted-foreground mb-4">
The newsletter module is currently disabled. Enable it in Settings &gt; Modules to use this feature.
</p>
<Button onClick={() => navigate('/settings/modules')}>
Go to Module Settings
</Button>
</div>
</SettingsLayout>
);
}
// Always call ALL hooks before any conditional returns
const { data: subscribersData, isLoading } = useQuery({
queryKey: ['newsletter-subscribers'],
queryFn: async () => {
const response = await api.get('/newsletter/subscribers');
return response.data;
},
enabled: isEnabled('newsletter'), // Only fetch when module is enabled
});
const deleteSubscriber = useMutation({
@@ -88,6 +70,26 @@ export default function NewsletterSubscribers() {
sub.email.toLowerCase().includes(searchQuery.toLowerCase())
);
if (!isEnabled('newsletter')) {
return (
<SettingsLayout
title="Newsletter Subscribers"
description="Newsletter module is disabled"
>
<div className="bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-900 rounded-lg p-6 text-center">
<Mail className="h-12 w-12 text-yellow-600 mx-auto mb-3" />
<h3 className="font-semibold text-lg mb-2">Newsletter Module Disabled</h3>
<p className="text-sm text-muted-foreground mb-4">
The newsletter module is currently disabled. Enable it in Settings &gt; Modules to use this feature.
</p>
<Button onClick={() => navigate('/settings/modules')}>
Go to Module Settings
</Button>
</div>
</SettingsLayout>
);
}
return (
<SettingsLayout
title="Newsletter Subscribers"