@webbycrown/webbycommerce 1.2.0 → 2.0.0

package/admin/src/components/SmtpContent.jsx

@@ -0,0 +1,316 @@
+'use strict';
+
+import React, { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Box, Flex, Typography, TextInput, Button } from '@strapi/design-system';
+import { useFetchClient } from '@strapi/admin/strapi-admin';
+
+import { PLUGIN_ID } from '../pluginId';
+
+const SmtpContent = () => {
+  const { formatMessage } = useIntl();
+  const fetchClient = useFetchClient();
+
+  const [smtpSettings, setSmtpSettings] = useState({
+    host: '',
+    port: '587',
+    secure: false,
+    username: '',
+    password: '',
+    from: '',
+    fromName: '',
+    rejectUnauthorized: true,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [feedback, setFeedback] = useState(null);
+
+  const title = formatMessage({
+    id: `${PLUGIN_ID}.settings.smtp.title`,
+    defaultMessage: 'SMTP Configuration',
+  });
+
+  const description = formatMessage({
+    id: `${PLUGIN_ID}.settings.smtp.description`,
+    defaultMessage:
+      'Configure SMTP settings to send OTP emails. If not configured, Strapi\'s default email plugin will be used.',
+  });
+
+  useEffect(() => {
+    let isMounted = true;
+    const loadSettings = async () => {
+      try {
+        setIsLoading(true);
+        const { data } = await fetchClient.get(`/webbycommerce/settings`);
+        const smtp = data?.smtp || {};
+        if (!isMounted) return;
+
+        setSmtpSettings({
+          host: smtp.host || '',
+          port: smtp.port || '587',
+          secure: smtp.secure === true,
+          username: smtp.username || '',
+          password: smtp.password || '',
+          from: smtp.from || '',
+          fromName: smtp.fromName || '',
+          rejectUnauthorized: smtp.rejectUnauthorized !== false,
+        });
+      } catch (error) {
+        if (isMounted) {
+          setFeedback({
+            type: 'error',
+            message: formatMessage({
+              id: `${PLUGIN_ID}.settings.smtp.load.error`,
+              defaultMessage: 'Failed to load SMTP settings.',
+            }),
+          });
+        }
+      } finally {
+        if (isMounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    loadSettings();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [fetchClient, formatMessage]);
+
+  const handleSave = async () => {
+    try {
+      setIsSaving(true);
+      setFeedback(null);
+
+      const { data } = await fetchClient.put(`/webbycommerce/settings`, {
+        smtp: smtpSettings,
+      });
+
+      setFeedback({
+        type: 'success',
+        message: formatMessage({
+          id: `${PLUGIN_ID}.settings.smtp.save.success`,
+          defaultMessage: 'SMTP settings updated successfully.',
+        }),
+      });
+    } catch (error) {
+      setFeedback({
+        type: 'error',
+        message: formatMessage({
+          id: `${PLUGIN_ID}.settings.smtp.save.error`,
+          defaultMessage: 'Failed to save SMTP settings.',
+        }),
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <Box paddingTop={6}>
+      <Typography variant="beta" textColor="neutral800">
+        {title}
+      </Typography>
+
+      <Box marginTop={2}>
+        <Typography variant="pi" textColor="neutral600">
+          {description}
+        </Typography>
+      </Box>
+
+      <Box marginTop={6}>
+        <Box
+          background="neutral0"
+          hasRadius
+          shadow="filterShadow"
+          padding={4}
+          style={{ maxWidth: '640px' }}
+        >
+          <Typography variant="delta" textColor="neutral800">
+            {formatMessage({
+              id: `${PLUGIN_ID}.settings.configure.smtp.title`,
+              defaultMessage: 'SMTP Configuration (for OTP emails)',
+            })}
+          </Typography>
+          <Box marginTop={1}>
+            <Typography variant="pi" textColor="neutral600">
+              {formatMessage({
+                id: `${PLUGIN_ID}.settings.configure.smtp.description`,
+                defaultMessage:
+                  'Configure SMTP settings to send OTP emails. If not configured, Strapi\'s default email plugin will be used.',
+              })}
+            </Typography>
+          </Box>
+
+          <Box marginTop={4}>
+            <Flex direction="column" gap={4} alignItems="start">
+              <TextInput
+                name="smtp-host"
+                label={formatMessage({
+                  id: `${PLUGIN_ID}.settings.configure.smtp.host.label`,
+                  defaultMessage: 'SMTP Host',
+                })}
+                placeholder={formatMessage({
+                  id: `${PLUGIN_ID}.settings.configure.smtp.host.placeholder`,
+                  defaultMessage: 'e.g. smtp.gmail.com',
+                })}
+                value={smtpSettings.host}
+                onChange={(event) =>
+                  setSmtpSettings({ ...smtpSettings, host: event.target.value })
+                }
+                disabled={isLoading || isSaving}
+              />
+
+              <Flex gap={3} alignItems="flex-end">
+                <Box style={{ flex: 1 }}>
+                  <TextInput
+                    name="smtp-port"
+                    label={formatMessage({
+                      id: `${PLUGIN_ID}.settings.configure.smtp.port.label`,
+                      defaultMessage: 'SMTP Port',
+                    })}
+                    placeholder="587"
+                    value={smtpSettings.port}
+                    onChange={(event) =>
+                      setSmtpSettings({ ...smtpSettings, port: event.target.value })
+                    }
+                    disabled={isLoading || isSaving}
+                    type="number"
+                  />
+                </Box>
+                <Box style={{ flex: 1 }}>
+                  <Box marginBottom={2}>
+                    <Typography variant="pi" textColor="neutral800" fontWeight="semiBold">
+                      {formatMessage({
+                        id: `${PLUGIN_ID}.settings.configure.smtp.secure.label`,
+                        defaultMessage: 'Secure (TLS/SSL)',
+                      })}
+                    </Typography>
+                  </Box>
+                  <Flex alignItems="center" gap={2}>
+                    <input
+                      type="checkbox"
+                      id="smtp-secure"
+                      checked={smtpSettings.secure}
+                      onChange={(event) =>
+                        setSmtpSettings({
+                          ...smtpSettings,
+                          secure: event.target.checked,
+                        })
+                      }
+                      disabled={isLoading || isSaving}
+                      style={{
+                        width: '16px',
+                        height: '16px',
+                        accentColor: '#4945ff',
+                        cursor: isLoading || isSaving ? 'not-allowed' : 'pointer',
+                      }}
+                    />
+                    <Typography variant="pi" textColor="neutral600">
+                      {formatMessage({
+                        id: `${PLUGIN_ID}.settings.configure.smtp.secure.hint`,
+                        defaultMessage: 'Enable for port 465 (SSL), disable for port 587 (TLS)',
+                      })}
+                    </Typography>
+                  </Flex>
+                </Box>
+              </Flex>
+
+              <TextInput
+                name="smtp-username"
+                label={formatMessage({
+                  id: `${PLUGIN_ID}.settings.configure.smtp.username.label`,
+                  defaultMessage: 'SMTP Username',
+                })}
+                placeholder={formatMessage({
+                  id: `${PLUGIN_ID}.settings.configure.smtp.username.placeholder`,
+                  defaultMessage: 'Your email address',
+                })}
+                value={smtpSettings.username}
+                onChange={(event) =>
+                  setSmtpSettings({ ...smtpSettings, username: event.target.value })
+                }
+                disabled={isLoading || isSaving}
+              />
+
+              <TextInput
+                name="smtp-password"
+                label={formatMessage({
+                  id: `${PLUGIN_ID}.settings.configure.smtp.password.label`,
+                  defaultMessage: 'SMTP Password',
+                })}
+                placeholder={formatMessage({
+                  id: `${PLUGIN_ID}.settings.configure.smtp.password.placeholder`,
+                  defaultMessage: 'Your email password or app password',
+                })}
+                value={smtpSettings.password}
+                onChange={(event) =>
+                  setSmtpSettings({ ...smtpSettings, password: event.target.value })
+                }
+                disabled={isLoading || isSaving}
+                type="password"
+              />
+
+              <TextInput
+                name="smtp-from"
+                label={formatMessage({
+                  id: `${PLUGIN_ID}.settings.configure.smtp.from.label`,
+                  defaultMessage: 'From Email',
+                })}
+                placeholder={formatMessage({
+                  id: `${PLUGIN_ID}.settings.configure.smtp.from.placeholder`,
+                  defaultMessage: 'noreply@example.com',
+                })}
+                value={smtpSettings.from}
+                onChange={(event) =>
+                  setSmtpSettings({ ...smtpSettings, from: event.target.value })
+                }
+                disabled={isLoading || isSaving}
+              />
+
+              <TextInput
+                name="smtp-from-name"
+                label={formatMessage({
+                  id: `${PLUGIN_ID}.settings.configure.smtp.fromName.label`,
+                  defaultMessage: 'From Name',
+                })}
+                placeholder={formatMessage({
+                  id: `${PLUGIN_ID}.settings.configure.smtp.fromName.placeholder`,
+                  defaultMessage: 'Strapi Advanced Ecommerce',
+                })}
+                value={smtpSettings.fromName}
+                onChange={(event) =>
+                  setSmtpSettings({ ...smtpSettings, fromName: event.target.value })
+                }
+                disabled={isLoading || isSaving}
+              />
+            </Flex>
+          </Box>
+        </Box>
+
+        <Box marginTop={6}>
+          <Flex gap={3} alignItems="center">
+            <Button onClick={handleSave} loading={isSaving} disabled={isLoading || isSaving}>
+              {formatMessage({
+                id: `${PLUGIN_ID}.settings.smtp.save`,
+                defaultMessage: 'Save SMTP settings',
+              })}
+            </Button>
+            {feedback && (
+              <Typography
+                variant="pi"
+                textColor={feedback.type === 'error' ? 'danger600' : 'success600'}
+              >
+                {feedback.message}
+              </Typography>
+            )}
+          </Flex>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default SmtpContent;

package/admin/src/components/WishlistContent.jsx

@@ -0,0 +1,273 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Layout,
+  HeaderLayout,
+  ContentLayout,
+  ActionLayout,
+} from '@strapi/design-system/Layout';
+import {
+  Box,
+  Typography,
+  Button,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Td,
+  Th,
+  Avatar,
+  Badge,
+  Flex,
+  IconButton,
+} from '@strapi/design-system';
+import {
+  Eye,
+  Pencil,
+  Trash,
+  Plus,
+} from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { useFetchClient } from '@strapi/admin/strapi-admin';
+import { useNotification } from '@strapi/admin/strapi-admin';
+
+const WishlistContent = () => {
+  const { formatMessage } = useIntl();
+  const { get, del } = useFetchClient();
+  const { toggleNotification } = useNotification();
+
+  const [wishlists, setWishlists] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedWishlist, setSelectedWishlist] = useState(null);
+
+  useEffect(() => {
+    fetchWishlists();
+  }, []);
+
+  const fetchWishlists = async () => {
+    try {
+      setLoading(true);
+      const response = await get('/webbycommerce/wishlists');
+      setWishlists(response.data.data || []);
+    } catch (error) {
+      console.error('Error fetching wishlists:', error);
+      toggleNotification({
+        type: 'warning',
+        message: 'Failed to fetch wishlists',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDeleteWishlist = async (wishlistId) => {
+    if (!confirm('Are you sure you want to delete this wishlist?')) {
+      return;
+    }
+
+    try {
+      await del(`/webbycommerce/wishlists/${wishlistId}`);
+      setWishlists(wishlists.filter(w => w.id !== wishlistId));
+      toggleNotification({
+        type: 'success',
+        message: 'Wishlist deleted successfully',
+      });
+    } catch (error) {
+      console.error('Error deleting wishlist:', error);
+      toggleNotification({
+        type: 'warning',
+        message: 'Failed to delete wishlist',
+      });
+    }
+  };
+
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleDateString();
+  };
+
+  return (
+    <Layout>
+      <HeaderLayout
+        title="Wishlist Management"
+        subtitle="Manage user wishlists and favorite products"
+        as="h2"
+      />
+      <ActionLayout
+        startActions={
+          <Button
+            onClick={fetchWishlists}
+            loading={loading}
+            variant="secondary"
+          >
+            Refresh
+          </Button>
+        }
+      />
+      <ContentLayout>
+        <Box
+          background="neutral0"
+          hasRadius
+          shadow="filterShadow"
+          padding={6}
+        >
+          {loading ? (
+            <Box padding={4}>
+              <Typography>Loading wishlists...</Typography>
+            </Box>
+          ) : wishlists.length === 0 ? (
+            <Box padding={4}>
+              <Typography>No wishlists found.</Typography>
+            </Box>
+          ) : (
+            <Table colCount={5} rowCount={wishlists.length}>
+              <Thead>
+                <Tr>
+                  <Th>
+                    <Typography variant="sigma">User</Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">Products</Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">Public</Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">Created</Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">Actions</Typography>
+                  </Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {wishlists.map((wishlist) => (
+                  <Tr key={wishlist.id}>
+                    <Td>
+                      <Flex>
+                        <Avatar
+                          src={null}
+                          alt={wishlist.userEmail}
+                          initials={wishlist.userEmail?.charAt(0).toUpperCase()}
+                        />
+                        <Box marginLeft={2}>
+                          <Typography>{wishlist.userEmail}</Typography>
+                          <Typography variant="pi" textColor="neutral600">
+                            ID: {wishlist.userId}
+                          </Typography>
+                        </Box>
+                      </Flex>
+                    </Td>
+                    <Td>
+                      <Badge>{wishlist.products?.length || 0} products</Badge>
+                    </Td>
+                    <Td>
+                      <Badge color={wishlist.isPublic ? 'success' : 'neutral'}>
+                        {wishlist.isPublic ? 'Public' : 'Private'}
+                      </Badge>
+                    </Td>
+                    <Td>
+                      <Typography>{formatDate(wishlist.createdAt)}</Typography>
+                    </Td>
+                    <Td>
+                      <Flex gap={1}>
+                        <IconButton
+                          onClick={() => setSelectedWishlist(wishlist)}
+                          label="View wishlist"
+                          icon={<Eye />}
+                        />
+                        <IconButton
+                          onClick={() => handleDeleteWishlist(wishlist.id)}
+                          label="Delete wishlist"
+                          icon={<Trash />}
+                        />
+                      </Flex>
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          )}
+        </Box>
+
+        {/* Wishlist Detail Modal/View */}
+        {selectedWishlist && (
+          <Box
+            background="neutral0"
+            hasRadius
+            shadow="filterShadow"
+            padding={6}
+            marginTop={4}
+          >
+            <Typography variant="beta" marginBottom={4}>
+              Wishlist Details - {selectedWishlist.userEmail}
+            </Typography>
+
+            {selectedWishlist.name && (
+              <Typography variant="epsilon" marginBottom={2}>
+                Name: {selectedWishlist.name}
+              </Typography>
+            )}
+
+            {selectedWishlist.description && (
+              <Typography variant="pi" marginBottom={4}>
+                Description: {selectedWishlist.description}
+              </Typography>
+            )}
+
+            <Typography variant="delta" marginBottom={3}>
+              Products ({selectedWishlist.products?.length || 0}):
+            </Typography>
+
+            {selectedWishlist.products?.length > 0 ? (
+              <Box>
+                {selectedWishlist.products.map((product) => (
+                  <Flex
+                    key={product.id}
+                    alignItems="center"
+                    padding={3}
+                    background="neutral100"
+                    hasRadius
+                    marginBottom={2}
+                  >
+                    {product.images?.[0] && (
+                      <Box marginRight={3}>
+                        <img
+                          src={product.images[0].url}
+                          alt={product.name}
+                          style={{ width: 50, height: 50, objectFit: 'cover', borderRadius: 4 }}
+                        />
+                      </Box>
+                    )}
+                    <Box flex={1}>
+                      <Typography variant="omega">{product.name}</Typography>
+                      <Typography variant="pi" textColor="neutral600">
+                        ${product.price || 'N/A'}
+                      </Typography>
+                    </Box>
+                    <Badge color={product.stockQuantity > 0 ? 'success' : 'danger'}>
+                      {product.stockQuantity > 0 ? 'In Stock' : 'Out of Stock'}
+                    </Badge>
+                  </Flex>
+                ))}
+              </Box>
+            ) : (
+              <Typography variant="pi" textColor="neutral600">
+                No products in this wishlist
+              </Typography>
+            )}
+
+            <Flex marginTop={4} justifyContent="flex-end">
+              <Button
+                onClick={() => setSelectedWishlist(null)}
+                variant="tertiary"
+              >
+                Close
+              </Button>
+            </Flex>
+          </Box>
+        )}
+      </ContentLayout>
+    </Layout>
+  );
+};
+
+export default WishlistContent;

package/admin/src/index.js

@@ -0,0 +1,81 @@
+import { PLUGIN_ID } from './pluginId';
+import Initializer from './components/Initializer';
+import PluginIcon from './components/PluginIcon';
+
+// Fix for Strapi 5.x: Provide checkUserHasPermissions globally
+// This is a workaround for a known Strapi 5.x RBAC issue
+if (typeof globalThis !== 'undefined') {
+  if (!globalThis.checkUserHasPermissions) {
+    globalThis.checkUserHasPermissions = async () => true;
+  }
+}
+
+export default {
+  register(app) {
+    // Ensure checkUserHasPermissions is available in app context
+    if (app && typeof app.checkUserHasPermissions === 'undefined') {
+      app.checkUserHasPermissions = async () => true;
+    }
+
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      initializer: Initializer,
+      // Use a function for isReady to ensure proper initialization order
+      // This helps prevent conflicts with Strapi's core (tours, etc.)
+      isReady: () => true,
+      name: 'WebbyCommerce',
+    });
+
+    // Settings page: Advanced Ecommerce -> Configure (single page with tabs)
+    app.addSettingsLink(
+      {
+        id: 'webbycommerce',
+        intlLabel: {
+          id: `${PLUGIN_ID}.settings.section`,
+          defaultMessage: 'WebbyCommerce',
+        },
+        icon: PluginIcon,
+      },
+      {
+        id: `${PLUGIN_ID}.settings.configure`,
+        intlLabel: {
+          id: `${PLUGIN_ID}.settings.configure.title`,
+          defaultMessage: 'Configure',
+        },
+        to: `${PLUGIN_ID}`,
+        Component: () => import('./pages/Settings'),
+      }
+    );
+  },
+
+  bootstrap(app) {
+    // Bootstrap logic if needed
+    // Ensure checkUserHasPermissions is available
+    if (app && typeof app.checkUserHasPermissions === 'undefined') {
+      app.checkUserHasPermissions = async () => true;
+    }
+  },
+
+  async registerTrads({ locales }) {
+    return Promise.all(
+      locales.map(async (locale) => {
+        if (locale === 'en') {
+          try {
+            const { default: data } = await import('./translations/en.json');
+            return { data, locale };
+          } catch {
+            return { data: {}, locale };
+          }
+        }
+
+        try {
+          const { default: data } = await import(`./translations/${locale}.json`);
+          return { data, locale };
+        } catch {
+          return { data: {}, locale };
+        }
+      })
+    );
+  },
+};
+