@webbycrown/webbycommerce 1.2.0 → 2.0.0

package/admin/src/components/CompareContent.jsx

@@ -0,0 +1,300 @@
+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';
+
+// Alternative imports if the above don't work:
+// import { EyeIcon, PencilIcon, TrashIcon, PlusIcon } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { useFetchClient } from '@strapi/admin/strapi-admin';
+import { useNotification } from '@strapi/admin/strapi-admin';
+
+const CompareContent = () => {
+  const { formatMessage } = useIntl();
+  const { get, del } = useFetchClient();
+  const { toggleNotification } = useNotification();
+
+  const [compares, setCompares] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedCompare, setSelectedCompare] = useState(null);
+
+  useEffect(() => {
+    fetchCompares();
+  }, []);
+
+  const fetchCompares = async () => {
+    try {
+      setLoading(true);
+      const response = await get('/webbycommerce/compares');
+      setCompares(response.data.data || []);
+    } catch (error) {
+      console.error('Error fetching compares:', error);
+      toggleNotification({
+        type: 'warning',
+        message: 'Failed to fetch compare lists',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDeleteCompare = async (compareId) => {
+    if (!confirm('Are you sure you want to delete this compare list?')) {
+      return;
+    }
+
+    try {
+      await del(`/webbycommerce/compares/${compareId}`);
+      setCompares(compares.filter(c => c.id !== compareId));
+      toggleNotification({
+        type: 'success',
+        message: 'Compare list deleted successfully',
+      });
+    } catch (error) {
+      console.error('Error deleting compare:', error);
+      toggleNotification({
+        type: 'warning',
+        message: 'Failed to delete compare list',
+      });
+    }
+  };
+
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleDateString();
+  };
+
+  return (
+    <Layout>
+      <HeaderLayout
+        title="Compare Management"
+        subtitle="Manage user compare lists and product comparisons"
+        as="h2"
+      />
+      <ActionLayout
+        startActions={
+          <Button
+            onClick={fetchCompares}
+            loading={loading}
+            variant="secondary"
+          >
+            Refresh
+          </Button>
+        }
+      />
+      <ContentLayout>
+        <Box
+          background="neutral0"
+          hasRadius
+          shadow="filterShadow"
+          padding={6}
+        >
+          {loading ? (
+            <Box padding={4}>
+              <Typography>Loading compare lists...</Typography>
+            </Box>
+          ) : compares.length === 0 ? (
+            <Box padding={4}>
+              <Typography>No compare lists found.</Typography>
+            </Box>
+          ) : (
+            <Table colCount={5} rowCount={compares.length}>
+              <Thead>
+                <Tr>
+                  <Th>
+                    <Typography variant="sigma">User</Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">Products</Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">Category</Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">Public</Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">Actions</Typography>
+                  </Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {compares.map((compare) => (
+                  <Tr key={compare.id}>
+                    <Td>
+                      <Flex>
+                        <Avatar
+                          src={null}
+                          alt={compare.userEmail}
+                          initials={compare.userEmail?.charAt(0).toUpperCase()}
+                        />
+                        <Box marginLeft={2}>
+                          <Typography>{compare.userEmail}</Typography>
+                          <Typography variant="pi" textColor="neutral600">
+                            ID: {compare.userId}
+                          </Typography>
+                        </Box>
+                      </Flex>
+                    </Td>
+                    <Td>
+                      <Badge>{compare.products?.length || 0}/4 products</Badge>
+                    </Td>
+                    <Td>
+                      <Typography variant="pi">
+                        {compare.category?.name || 'Mixed'}
+                      </Typography>
+                    </Td>
+                    <Td>
+                      <Badge color={compare.isPublic ? 'success' : 'neutral'}>
+                        {compare.isPublic ? 'Public' : 'Private'}
+                      </Badge>
+                    </Td>
+                    <Td>
+                      <Flex gap={1}>
+                        <IconButton
+                          onClick={() => setSelectedCompare(compare)}
+                          label="View compare list"
+                          icon={<Eye />}
+                        />
+                        <IconButton
+                          onClick={() => handleDeleteCompare(compare.id)}
+                          label="Delete compare list"
+                          icon={<Trash />}
+                        />
+                      </Flex>
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          )}
+        </Box>
+
+        {/* Compare Detail Modal/View */}
+        {selectedCompare && (
+          <Box
+            background="neutral0"
+            hasRadius
+            shadow="filterShadow"
+            padding={6}
+            marginTop={4}
+          >
+            <Typography variant="beta" marginBottom={4}>
+              Compare List Details - {selectedCompare.userEmail}
+            </Typography>
+
+            {selectedCompare.name && (
+              <Typography variant="epsilon" marginBottom={2}>
+                Name: {selectedCompare.name}
+              </Typography>
+            )}
+
+            {selectedCompare.notes && (
+              <Typography variant="pi" marginBottom={4}>
+                Notes: {selectedCompare.notes}
+              </Typography>
+            )}
+
+            <Typography variant="delta" marginBottom={3}>
+              Products ({selectedCompare.products?.length || 0}/4):
+            </Typography>
+
+            {selectedCompare.products?.length > 0 ? (
+              <Flex gap={4} wrap="wrap">
+                {selectedCompare.products.map((product) => (
+                  <Box key={product.id} flex="1" minWidth="300px">
+                    <Box
+                      padding={4}
+                      background="neutral100"
+                      hasRadius
+                      borderColor="neutral200"
+                    >
+                      <Flex alignItems="center" marginBottom={3}>
+                        {product.images?.[0] && (
+                          <Box marginRight={3}>
+                            <img
+                              src={product.images[0].url}
+                              alt={product.name}
+                              style={{ width: 60, height: 60, objectFit: 'cover', borderRadius: 4 }}
+                            />
+                          </Box>
+                        )}
+                        <Box flex={1}>
+                          <Typography variant="omega" fontWeight="bold">
+                            {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>
+
+                      {product.specifications && (
+                        <Box>
+                          <Typography variant="pi" fontWeight="bold" marginBottom={2}>
+                            Specifications:
+                          </Typography>
+                          {Object.entries(product.specifications).map(([key, value]) => (
+                            <Flex key={key} justifyContent="space-between" marginBottom={1}>
+                              <Typography variant="pi" textColor="neutral600">
+                                {key}:
+                              </Typography>
+                              <Typography variant="pi">
+                                {value || 'N/A'}
+                              </Typography>
+                            </Flex>
+                          ))}
+                        </Box>
+                      )}
+                    </Box>
+                  </Box>
+                ))}
+              </Flex>
+            ) : (
+              <Typography variant="pi" textColor="neutral600">
+                No products in this compare list
+              </Typography>
+            )}
+
+            <Flex marginTop={4} justifyContent="flex-end">
+              <Button
+                onClick={() => setSelectedCompare(null)}
+                variant="tertiary"
+              >
+                Close
+              </Button>
+            </Flex>
+          </Box>
+        )}
+      </ContentLayout>
+    </Layout>
+  );
+};
+
+export default CompareContent;

package/admin/src/components/ConfigureContent.jsx

@@ -0,0 +1,407 @@
+'use strict';
+
+import React, { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Box, Flex, Typography, TextInput, Button } from '@strapi/design-system';
+import { Trash } from '@strapi/icons';
+import { useFetchClient } from '@strapi/admin/strapi-admin';
+
+import { PLUGIN_ID } from '../pluginId';
+
+const emptyOriginRow = () => ({
+  id: Math.random().toString(36).slice(2),
+  value: '',
+});
+
+const ConfigureContent = () => {
+  const { formatMessage } = useIntl();
+  const fetchClient = useFetchClient();
+
+  const [rows, setRows] = useState([emptyOriginRow()]);
+  const [routePrefix, setRoutePrefix] = useState('webbycommerce');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isSeeding, setIsSeeding] = useState(false);
+  const [feedback, setFeedback] = useState(null);
+
+  const title = formatMessage({
+    id: `${PLUGIN_ID}.settings.configure.title`,
+    defaultMessage: 'Configure',
+  });
+
+  const description = formatMessage({
+    id: `${PLUGIN_ID}.settings.configure.description`,
+    defaultMessage:
+      'Global settings for the Strapi Advanced Ecommerce plugin. Use this page to control ecommerce-wide behavior.',
+  });
+
+  useEffect(() => {
+    let isMounted = true;
+    const loadSettings = async () => {
+      try {
+        setIsLoading(true);
+        const { data } = await fetchClient.get(`/webbycommerce/settings`);
+        const origins = Array.isArray(data?.allowedOrigins) ? data.allowedOrigins : [];
+        const prefix = data?.routePrefix || 'webbycommerce';
+        if (!isMounted) return;
+
+        setRoutePrefix(prefix);
+        if (origins.length) {
+          setRows(
+            origins.map((value) => ({
+              id: Math.random().toString(36).slice(2),
+              value,
+            }))
+          );
+        } else {
+          setRows([emptyOriginRow()]);
+        }
+      } catch (error) {
+        if (isMounted) {
+          setFeedback({
+            type: 'error',
+            message: formatMessage({
+              id: `${PLUGIN_ID}.settings.configure.load.error`,
+              defaultMessage: 'Failed to load settings.',
+            }),
+          });
+        }
+      } finally {
+        if (isMounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    loadSettings();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [fetchClient, formatMessage]);
+
+  const updateRowValue = (id, value) => {
+    setRows((current) =>
+      current.map((row) => (row.id === id ? { ...row, value } : row))
+    );
+  };
+
+  const addRow = () => {
+    setRows((current) => [...current, emptyOriginRow()]);
+  };
+
+  const removeRow = (id) => {
+    setRows((current) => {
+      const next = current.filter((row) => row.id !== id);
+      return next.length ? next : [emptyOriginRow()];
+    });
+  };
+
+  const handleSave = async () => {
+    try {
+      setIsSaving(true);
+      setFeedback(null);
+
+      const allowedOrigins = rows
+        .map((row) => (typeof row.value === 'string' ? row.value.trim() : ''))
+        .filter((value) => value.length > 0);
+
+      // Sanitize route prefix
+      const sanitizedPrefix = (routePrefix || 'webbycommerce')
+        .trim()
+        .replace(/^\/+|\/+$/g, '') // Remove leading/trailing slashes
+        .replace(/\/+/g, '/') // Replace multiple slashes with single
+        .replace(/[^a-zA-Z0-9\/_-]/g, '') // Remove invalid characters
+        || 'webbycommerce';
+
+      const { data } = await fetchClient.put(`/webbycommerce/settings`, {
+        allowedOrigins,
+        routePrefix: sanitizedPrefix,
+      });
+
+      const persisted = Array.isArray(data?.allowedOrigins) ? data.allowedOrigins : [];
+      setRows(
+        (persisted.length ? persisted : ['']).map((value) => ({
+          id: Math.random().toString(36).slice(2),
+          value,
+        }))
+      );
+
+      setFeedback({
+        type: 'success',
+        message: formatMessage({
+          id: `${PLUGIN_ID}.settings.configure.save.success`,
+          defaultMessage: 'Settings updated successfully.',
+        }),
+      });
+    } catch (error) {
+      setFeedback({
+        type: 'error',
+        message: formatMessage({
+          id: `${PLUGIN_ID}.settings.configure.save.error`,
+          defaultMessage: 'Failed to save settings.',
+        }),
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleSeedDemo = async () => {
+    if (!window.confirm(formatMessage({
+      id: `${PLUGIN_ID}.settings.configure.demo.confirm`,
+      defaultMessage: 'Are you sure you want to seed demo data? This will overwrite existing data with the same slugs.'
+    }))) {
+      return;
+    }
+
+    try {
+      setIsSeeding(true);
+      setFeedback(null);
+
+      const { data } = await fetchClient.post(`/webbycommerce/seed-demo`);
+
+      if (data.success) {
+        setFeedback({
+          type: 'success',
+          message: formatMessage({
+            id: `${PLUGIN_ID}.settings.configure.demo.success`,
+            defaultMessage: 'Demo data seeded successfully!',
+          }),
+        });
+      } else {
+        throw new Error(data.message);
+      }
+    } catch (error) {
+      setFeedback({
+        type: 'error',
+        message: formatMessage({
+          id: `${PLUGIN_ID}.settings.configure.demo.error`,
+          defaultMessage: 'Failed to seed demo data.',
+        }) + (error.message ? `: ${error.message}` : ''),
+      });
+    } finally {
+      setIsSeeding(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.routePrefix.title`,
+              defaultMessage: 'API Route Prefix',
+            })}
+          </Typography>
+          <Box marginTop={1}>
+            <Typography variant="pi" textColor="neutral600">
+              {formatMessage({
+                id: `${PLUGIN_ID}.settings.configure.routePrefix.description`,
+                defaultMessage:
+                  'Customize the API route prefix. All ecommerce API endpoints will use this prefix. Default: webbycommerce',
+              })}
+            </Typography>
+          </Box>
+          <Box marginTop={4}>
+            <TextInput
+              name="routePrefix"
+              label={formatMessage({
+                id: `${PLUGIN_ID}.settings.configure.routePrefix.label`,
+                defaultMessage: 'Route prefix',
+              })}
+              placeholder={formatMessage({
+                id: `${PLUGIN_ID}.settings.configure.routePrefix.placeholder`,
+                defaultMessage: 'e.g. ecommerce, v1, api/ecommerce',
+              })}
+              value={routePrefix}
+              onChange={(event) => setRoutePrefix(event.target.value)}
+              disabled={isLoading || isSaving}
+              hint={formatMessage({
+                id: `${PLUGIN_ID}.settings.configure.routePrefix.hint`,
+                defaultMessage: 'API endpoints will be available at /api/{prefix}/...',
+              })}
+            />
+          </Box>
+        </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.origins.title`,
+                defaultMessage: 'Allowed frontend domains',
+              })}
+            </Typography>
+          <Box marginTop={1}>
+            <Typography variant="pi" textColor="neutral600">
+              {formatMessage({
+                id: `${PLUGIN_ID}.settings.configure.origins.description`,
+                defaultMessage:
+                  'Only requests coming from these domains will be allowed to use the ecommerce facility. Leave empty to allow all domains.',
+              })}
+            </Typography>
+          </Box>
+
+          <Box marginTop={4}>
+            {rows.map((row, index) => (
+              <Box
+                key={row.id}
+                marginTop={index === 0 ? 2 : 4}
+                padding={4}
+                hasRadius
+                background="neutral100"
+                style={{ border: '1px solid #dcdce4' }}
+              >
+                <Flex
+                  justifyContent="space-between"
+                  alignItems="flex-start"
+                  gap={4}
+                  wrap="wrap"
+                >
+                  <Box style={{ flex: 1, minWidth: 0 }}>
+                    <Typography variant="epsilon" textColor="neutral800">
+                      {formatMessage(
+                        {
+                          id: `${PLUGIN_ID}.settings.configure.origins.entryTitle`,
+                          defaultMessage: 'Domain #{index}',
+                        },
+                        { index: index + 1 }
+                      )}
+                    </Typography>
+                    <Box marginTop={2}>
+                      <TextInput
+                        name={`origin-${row.id}`}
+                        label={formatMessage({
+                          id: `${PLUGIN_ID}.settings.configure.origins.label`,
+                          defaultMessage: 'Frontend domain',
+                        })}
+                        placeholder={formatMessage({
+                          id: `${PLUGIN_ID}.settings.configure.origins.placeholder`,
+                          defaultMessage: 'e.g. https://shop.example.com',
+                        })}
+                        value={row.value}
+                        onChange={(event) => updateRowValue(row.id, event.target.value)}
+                        disabled={isLoading || isSaving}
+                      />
+                    </Box>
+                  </Box>
+                  <Button
+                    variant="tertiary"
+                    startIcon={<Trash />}
+                    onClick={() => removeRow(row.id)}
+                    disabled={isLoading || isSaving}
+                  >
+                    {formatMessage({
+                      id: `${PLUGIN_ID}.settings.configure.origins.remove`,
+                      defaultMessage: 'Remove domain',
+                    })}
+                  </Button>
+                </Flex>
+              </Box>
+            ))}
+
+            <Box>
+              <Button
+                marginTop={2}
+                variant="tertiary"
+                onClick={addRow}
+                disabled={isLoading || isSaving}
+              >
+                {formatMessage({
+                  id: `${PLUGIN_ID}.settings.configure.origins.add`,
+                  defaultMessage: 'Add domain',
+                })}
+              </Button>
+            </Box>
+          </Box>
+        </Box>
+      </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.demo.title`,
+              defaultMessage: 'Demo Data',
+            })}
+          </Typography>
+          <Box marginTop={1}>
+            <Typography variant="pi" textColor="neutral600">
+              {formatMessage({
+                id: `${PLUGIN_ID}.settings.configure.demo.description`,
+                defaultMessage:
+                  'Import sample products, categories, tags, and shipping settings to test the plugin. This will not overwrite existing data with the same slugs.',
+              })}
+            </Typography>
+          </Box>
+          <Box marginTop={4}>
+            <Button
+              variant="secondary"
+              onClick={handleSeedDemo}
+              loading={isSeeding}
+              disabled={isLoading || isSaving || isSeeding}
+            >
+              {formatMessage({
+                id: `${PLUGIN_ID}.settings.configure.demo.button`,
+                defaultMessage: 'Seed Demo Data',
+              })}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+
+      <Box marginTop={6}>
+        <Flex gap={3} alignItems="center">
+            <Button onClick={handleSave} loading={isSaving} disabled={isLoading || isSaving}>
+              {formatMessage({
+                id: `${PLUGIN_ID}.settings.configure.save`,
+                defaultMessage: 'Save settings',
+              })}
+            </Button>
+            {feedback && (
+              <Typography
+                variant="pi"
+                textColor={feedback.type === 'error' ? 'danger600' : 'success600'}
+              >
+                {feedback.message}
+              </Typography>
+            )}
+          </Flex>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default ConfigureContent;
+