@webbycrown/webbycommerce 1.2.0 → 2.0.0

package/admin/src/components/Initializer.jsx

@@ -0,0 +1,64 @@
+import { useEffect, useRef } from 'react';
+import { PLUGIN_ID } from '../pluginId';
+
+// Fix for Strapi 5.x: Provide checkUserHasPermissions in multiple scopes
+// This is a workaround for a known Strapi 5.x RBAC compatibility issue
+const provideCheckUserHasPermissions = () => {
+  const defaultImpl = async () => true;
+  
+  // Provide in multiple scopes to ensure it's accessible
+  if (typeof window !== 'undefined') {
+    if (!window.checkUserHasPermissions) {
+      window.checkUserHasPermissions = defaultImpl;
+    }
+  }
+  
+  if (typeof globalThis !== 'undefined') {
+    if (!globalThis.checkUserHasPermissions) {
+      globalThis.checkUserHasPermissions = defaultImpl;
+    }
+  }
+  
+  if (typeof global !== 'undefined') {
+    if (!global.checkUserHasPermissions) {
+      global.checkUserHasPermissions = defaultImpl;
+    }
+  }
+};
+
+// Provide immediately at module load
+provideCheckUserHasPermissions();
+
+const Initializer = () => {
+  const hasInitialized = useRef(false);
+
+  useEffect(() => {
+    if (!hasInitialized.current) {
+      hasInitialized.current = true;
+      
+      // Ensure the function is available after React hydration
+      provideCheckUserHasPermissions();
+      
+      // Also try to patch it into Strapi's app context if available
+      try {
+        // This will be called when the app context is available
+        const checkInterval = setInterval(() => {
+          if (window.strapi?.app && typeof window.strapi.app.checkUserHasPermissions === 'undefined') {
+            window.strapi.app.checkUserHasPermissions = async () => true;
+            clearInterval(checkInterval);
+          }
+        }, 100);
+        
+        // Clear after 5 seconds to avoid infinite checking
+        setTimeout(() => clearInterval(checkInterval), 5000);
+      } catch (error) {
+        // Silently fail if we can't access Strapi context
+      }
+    }
+  }, []);
+
+  return null;
+};
+
+export default Initializer;
+

package/admin/src/components/LoginRegisterContent.jsx

@@ -0,0 +1,280 @@
+'use strict';
+
+import React, { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import {
+  Box,
+  Flex,
+  Typography,
+  Button,
+} from '@strapi/design-system';
+import { useFetchClient } from '@strapi/admin/strapi-admin';
+import { PLUGIN_ID } from '../pluginId';
+
+const LoginRegisterContent = () => {
+  const { formatMessage } = useIntl();
+  const fetchClient = useFetchClient();
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [method, setMethod] = useState('default'); // 'default', 'otp', or 'both'
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const loadSettings = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const { data } = await fetchClient.get(`/webbycommerce/settings`);
+      if (data.loginRegisterMethod) {
+        setMethod(data.loginRegisterMethod);
+      }
+    } catch (err) {
+      console.error('Failed to load login/register settings:', err);
+      setError(
+        formatMessage({
+          id: `${PLUGIN_ID}.settings.loginRegister.load.error`,
+          defaultMessage: 'Failed to load settings.',
+        })
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    try {
+      setSaving(true);
+      setError(null);
+      setSuccess(false);
+
+      await fetchClient.put(`/webbycommerce/settings`, {
+        loginRegisterMethod: method,
+      });
+
+      setSuccess(true);
+      setTimeout(() => setSuccess(false), 3000);
+    } catch (err) {
+      console.error('Failed to save login/register settings:', err);
+      setError(
+        formatMessage({
+          id: `${PLUGIN_ID}.settings.loginRegister.save.error`,
+          defaultMessage: 'Failed to save settings.',
+        })
+      );
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box paddingTop={6}>
+        <Typography variant="omega" textColor="neutral600">
+          {formatMessage({
+            id: `${PLUGIN_ID}.settings.loginRegister.loading`,
+            defaultMessage: 'Loading settings...',
+          })}
+        </Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Box paddingTop={6}>
+      <Typography variant="delta" textColor="neutral800" fontWeight="bold" marginBottom={4}>
+        {formatMessage({
+          id: `${PLUGIN_ID}.settings.loginRegister.title`,
+          defaultMessage: 'Login/Register Configuration',
+        })}
+      </Typography>
+
+      <Typography variant="omega" textColor="neutral600" marginBottom={6} display="block">
+        {formatMessage({
+          id: `${PLUGIN_ID}.settings.loginRegister.description`,
+          defaultMessage:
+            'Choose the authentication method for user login and registration. Default uses Strapi\'s standard email/password authentication. OTP allows users to login or register using email or mobile number with OTP verification.',
+        })}
+      </Typography>
+
+      <Box
+        background="neutral0"
+        hasRadius
+        shadow="filterShadow"
+        padding={4}
+        style={{ maxWidth: '640px' }}
+      >
+        <Typography variant="delta" textColor="neutral800" fontWeight="semiBold">
+          {formatMessage({
+            id: `${PLUGIN_ID}.settings.loginRegister.method.label`,
+            defaultMessage: 'Authentication Method',
+          })}
+        </Typography>
+        <Box marginTop={1}>
+          <Typography variant="pi" textColor="neutral600">
+            {formatMessage({
+              id: `${PLUGIN_ID}.settings.loginRegister.method.hint`,
+              defaultMessage: 'Select the method users will use to login and register.',
+            })}
+          </Typography>
+        </Box>
+        <Box marginTop={4}>
+          <Flex direction="column" gap={3} alignItems="start">
+            <Box
+              as="label"
+              padding={3}
+              background={method === 'default' ? 'primary100' : 'neutral0'}
+              hasRadius
+              style={{
+                cursor: 'pointer',
+                border: `1px solid ${method === 'default' ? '#4945ff' : '#dcdce4'}`,
+              }}
+            >
+              <Flex gap={2} alignItems="flex-start">
+                <input
+                  type="radio"
+                  name="loginMethod"
+                  value="default"
+                  checked={method === 'default'}
+                  onChange={(e) => setMethod(e.target.value)}
+                  style={{
+                    marginTop: '4px',
+                    cursor: 'pointer',
+                  }}
+                />
+                <Box>
+                  <Typography variant="omega" textColor="neutral800" fontWeight="semiBold">
+                    {formatMessage({
+                      id: `${PLUGIN_ID}.settings.loginRegister.method.default`,
+                      defaultMessage: 'Default (Email/Password)',
+                    })}
+                  </Typography>
+                  <Typography variant="pi" textColor="neutral600" marginTop={1} display="block">
+                    {formatMessage({
+                      id: `${PLUGIN_ID}.settings.loginRegister.method.default.description`,
+                      defaultMessage:
+                        'Uses Strapi\'s built-in authentication system with email and password.',
+                    })}
+                  </Typography>
+                </Box>
+              </Flex>
+            </Box>
+
+            <Box
+              as="label"
+              padding={3}
+              background={method === 'otp' ? 'primary100' : 'neutral0'}
+              hasRadius
+              style={{
+                cursor: 'pointer',
+                border: `1px solid ${method === 'otp' ? '#4945ff' : '#dcdce4'}`,
+              }}
+            >
+              <Flex gap={2} alignItems="flex-start">
+                <input
+                  type="radio"
+                  name="loginMethod"
+                  value="otp"
+                  checked={method === 'otp'}
+                  onChange={(e) => setMethod(e.target.value)}
+                  style={{
+                    marginTop: '4px',
+                    cursor: 'pointer',
+                  }}
+                />
+                <Box>
+                  <Typography variant="omega" textColor="neutral800" fontWeight="semiBold">
+                    {formatMessage({
+                      id: `${PLUGIN_ID}.settings.loginRegister.method.otp`,
+                      defaultMessage: 'OTP (Email/Mobile Verification)',
+                    })}
+                  </Typography>
+                  <Typography variant="pi" textColor="neutral600" marginTop={1} display="block">
+                    {formatMessage({
+                      id: `${PLUGIN_ID}.settings.loginRegister.method.otp.description`,
+                      defaultMessage:
+                        'Users can login or register using email or mobile number. An OTP (One-Time Password) will be sent for verification.',
+                    })}
+                  </Typography>
+                </Box>
+              </Flex>
+            </Box>
+
+            <Box
+              as="label"
+              padding={3}
+              background={method === 'both' ? 'primary100' : 'neutral0'}
+              hasRadius
+              style={{
+                cursor: 'pointer',
+                border: `1px solid ${method === 'both' ? '#4945ff' : '#dcdce4'}`,
+              }}
+            >
+              <Flex gap={2} alignItems="flex-start">
+                <input
+                  type="radio"
+                  name="loginMethod"
+                  value="both"
+                  checked={method === 'both'}
+                  onChange={(e) => setMethod(e.target.value)}
+                  style={{
+                    marginTop: '4px',
+                    cursor: 'pointer',
+                  }}
+                />
+                <Box>
+                  <Typography variant="omega" textColor="neutral800" fontWeight="semiBold">
+                    {formatMessage({
+                      id: `${PLUGIN_ID}.settings.loginRegister.method.both`,
+                      defaultMessage: 'Both Methods (Unified)',
+                    })}
+                  </Typography>
+                  <Typography variant="pi" textColor="neutral600" marginTop={1} display="block">
+                    {formatMessage({
+                      id: `${PLUGIN_ID}.settings.loginRegister.method.both.description`,
+                      defaultMessage:
+                        'Users can choose between OTP or email/password authentication. Use the unified /auth/unified endpoint to support both methods simultaneously.',
+                    })}
+                  </Typography>
+                </Box>
+              </Flex>
+            </Box>
+          </Flex>
+        </Box>
+        {error && (
+          <Box marginTop={4} padding={3} background="danger100" hasRadius>
+            <Typography variant="omega" textColor="danger700">
+              {error}
+            </Typography>
+          </Box>
+        )}
+
+        {success && (
+          <Box marginTop={4} padding={3} background="success100" hasRadius>
+            <Typography variant="omega" textColor="success700">
+              {formatMessage({
+                id: `${PLUGIN_ID}.settings.loginRegister.save.success`,
+                defaultMessage: 'Settings updated successfully.',
+              })}
+            </Typography>
+          </Box>
+        )}
+
+        <Flex marginTop={6} gap={2}>
+          <Button onClick={handleSave} loading={saving} disabled={saving}>
+            {formatMessage({
+              id: `${PLUGIN_ID}.settings.loginRegister.save`,
+              defaultMessage: 'Save settings',
+            })}
+          </Button>
+        </Flex>
+      </Box>
+    </Box>
+  );
+};
+
+export default LoginRegisterContent;
+

package/admin/src/components/PluginIcon.jsx

@@ -0,0 +1,6 @@
+import { ShoppingCart } from '@strapi/icons';
+
+const PluginIcon = () => <ShoppingCart />;
+
+export default PluginIcon;
+

package/admin/src/components/ShippingTypeContent.jsx

@@ -0,0 +1,230 @@
+'use strict';
+
+import React, { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import {
+  Box,
+  Flex,
+  Typography,
+  Button,
+} from '@strapi/design-system';
+import { useFetchClient } from '@strapi/admin/strapi-admin';
+import { PLUGIN_ID } from '../pluginId';
+
+const ShippingTypeContent = () => {
+  const { formatMessage } = useIntl();
+  const fetchClient = useFetchClient();
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [shippingType, setShippingType] = useState('single'); // 'single' or 'multiple'
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const loadSettings = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const { data } = await fetchClient.get(`/webbycommerce/settings`);
+      if (data.shippingType) {
+        setShippingType(data.shippingType);
+      }
+    } catch (err) {
+      console.error('Failed to load shipping type settings:', err);
+      setError(
+        formatMessage({
+          id: `${PLUGIN_ID}.settings.shippingType.load.error`,
+          defaultMessage: 'Failed to load settings.',
+        })
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    try {
+      setSaving(true);
+      setError(null);
+      setSuccess(false);
+
+      const { data } = await fetchClient.put(`/webbycommerce/settings`, {
+        shippingType,
+      });
+
+      if (data.shippingType) {
+        setShippingType(data.shippingType);
+      }
+
+      setSuccess(true);
+      setTimeout(() => setSuccess(false), 3000);
+    } catch (err) {
+      console.error('Failed to save shipping type settings:', err);
+      setError(
+        formatMessage({
+          id: `${PLUGIN_ID}.settings.shippingType.save.error`,
+          defaultMessage: 'Failed to save settings. Please try again.',
+        })
+      );
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box padding={4}>
+        <Typography>
+          {formatMessage({
+            id: `${PLUGIN_ID}.settings.shippingType.loading`,
+            defaultMessage: 'Loading settings...',
+          })}
+        </Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Box paddingBottom={4}>
+        <Typography variant="beta" as="h2">
+          {formatMessage({
+            id: `${PLUGIN_ID}.settings.shippingType.title`,
+            defaultMessage: 'Shipping Type Settings',
+          })}
+        </Typography>
+        <Typography variant="omega" textColor="neutral600" as="p" style={{ marginTop: '8px' }}>
+          {formatMessage({
+            id: `${PLUGIN_ID}.settings.shippingType.description`,
+            defaultMessage: 'Configure how users can manage their billing and shipping addresses.',
+          })}
+        </Typography>
+      </Box>
+
+      <Box paddingBottom={6}>
+        <Box paddingBottom={3}>
+          <Typography variant="omega" fontWeight="semiBold" as="label" style={{ display: 'block', marginBottom: '8px' }}>
+            {formatMessage({
+              id: `${PLUGIN_ID}.settings.shippingType.method.label`,
+              defaultMessage: 'Address Management Type',
+            })}
+          </Typography>
+        </Box>
+
+        <Flex direction="column" gap={3} alignItems="start">
+          <Box
+            as="label"
+            padding={4}
+            borderColor={shippingType === 'single' ? 'primary600' : 'neutral200'}
+            borderStyle="solid"
+            borderWidth="1px"
+            hasRadius
+            style={{
+              cursor: 'pointer',
+              backgroundColor: shippingType === 'single' ? 'rgba(0, 122, 255, 0.05)' : 'transparent',
+            }}
+            onClick={() => setShippingType('single')}
+          >
+            <Flex gap={2} alignItems="center">
+              <input
+                type="radio"
+                name="shippingType"
+                value="single"
+                checked={shippingType === 'single'}
+                onChange={() => setShippingType('single')}
+                style={{ margin: 0 }}
+              />
+              <Box>
+                <Typography variant="omega" fontWeight="semiBold">
+                  {formatMessage({
+                    id: `${PLUGIN_ID}.settings.shippingType.single.label`,
+                    defaultMessage: 'Single Address Mode',
+                  })}
+                </Typography>
+                <Typography variant="omega" textColor="neutral600" style={{ marginTop: '4px' }} display="block">
+                  {formatMessage({
+                    id: `${PLUGIN_ID}.settings.shippingType.single.description`,
+                    defaultMessage: 'Users can have one billing address and one shipping address. Suitable for simple e-commerce sites.',
+                  })}
+                </Typography>
+              </Box>
+            </Flex>
+          </Box>
+
+          <Box
+            as="label"
+            padding={4}
+            borderColor={shippingType === 'multiple' ? 'primary600' : 'neutral200'}
+            borderStyle="solid"
+            borderWidth="1px"
+            hasRadius
+            style={{
+              cursor: 'pointer',
+              backgroundColor: shippingType === 'multiple' ? 'rgba(0, 122, 255, 0.05)' : 'transparent',
+            }}
+            onClick={() => setShippingType('multiple')}
+          >
+            <Flex gap={2} alignItems="center">
+              <input
+                type="radio"
+                name="shippingType"
+                value="multiple"
+                checked={shippingType === 'multiple'}
+                onChange={() => setShippingType('multiple')}
+                style={{ margin: 0 }}
+              />
+              <Box>
+                <Typography variant="omega" fontWeight="semiBold">
+                  {formatMessage({
+                    id: `${PLUGIN_ID}.settings.shippingType.multiple.label`,
+                    defaultMessage: 'Multiple Address Mode',
+                  })}
+                </Typography>
+                <Typography variant="omega" textColor="neutral600" style={{ marginTop: '4px' }} display="block">
+                  {formatMessage({
+                    id: `${PLUGIN_ID}.settings.shippingType.multiple.description`,
+                    defaultMessage: 'Users can have multiple billing and shipping addresses. They can select any address during checkout. Similar to Amazon/Flipkart.',
+                  })}
+                </Typography>
+              </Box>
+            </Flex>
+          </Box>
+        </Flex>
+      </Box>
+
+      {error && (
+        <Box paddingBottom={4}>
+          <Typography textColor="danger600" variant="omega">
+            {error}
+          </Typography>
+        </Box>
+      )}
+
+      {success && (
+        <Box paddingBottom={4}>
+          <Typography textColor="success600" variant="omega">
+            {formatMessage({
+              id: `${PLUGIN_ID}.settings.shippingType.save.success`,
+              defaultMessage: 'Settings saved successfully!',
+            })}
+          </Typography>
+        </Box>
+      )}
+
+      <Flex justifyContent="flex-start">
+        <Button onClick={handleSave} loading={saving} disabled={saving}>
+          {formatMessage({
+            id: `${PLUGIN_ID}.settings.shippingType.save.button`,
+            defaultMessage: 'Save Settings',
+          })}
+        </Button>
+      </Flex>
+    </Box>
+  );
+};
+
+export default ShippingTypeContent;
+