@visns-studio/visns-components 5.5.5 → 5.5.7

package/src/components/crm/generic/GenericAuth.jsx

@@ -14,10 +14,13 @@ import 'react-toastify/dist/ReactToastify.css';
 
 import CustomFetch from '../Fetch';
 import GenericMain from './GenericMain';
+import GenericClientPortal from './GenericClientPortal';
 import Login from '../auth/Login';
 import Reset from '../auth/Reset';
 import Verify from '../auth/Verify';
 import TwoFactorAuth from '../auth/TwoFactorAuth';
+import ClientLogin from '../auth/ClientLogin';
+import ClientOTPVerify from '../auth/ClientOTPVerify';
 
 const ProtectedRoute = ({ user, loading, redirectPath = '/login' }) => {
     const location = useLocation();
@@ -33,6 +36,24 @@ const ProtectedRoute = ({ user, loading, redirectPath = '/login' }) => {
     );
 };
 
+const ClientProtectedRoute = ({
+    clientUser,
+    loading,
+    redirectPath = '/client/login',
+}) => {
+    const location = useLocation();
+
+    return loading ? null : !clientUser || !clientUser.id ? (
+        <Navigate
+            to={redirectPath}
+            replace
+            state={{ previousUrl: location.pathname }}
+        />
+    ) : (
+        <Outlet />
+    );
+};
+
 const GenericAuth = ({
     layout = 'full',
     loginBg,
@@ -43,12 +64,16 @@ const GenericAuth = ({
     routeConfig,
     themeType = 'primary',
     enforce2FA = false, // Default to not enforcing 2FA
+    clientPortalConfig = null, // Configuration for client portal with component and URLs
 }) => {
     const navigate = useNavigate();
     const location = useLocation();
     const [userProfile, setUserProfile] = useState({});
+    const [clientProfile, setClientProfile] = useState({});
     const [isLoading, setIsLoading] = useState(true);
+    const [isClientLoading, setIsClientLoading] = useState(true);
     const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const [isClientAuthenticated, setIsClientAuthenticated] = useState(false);
 
     const updateAuthStatus = async () => {
         try {
@@ -74,10 +99,68 @@ const GenericAuth = ({
         }
     };
 
+    const updateClientAuthStatus = async () => {
+        // Skip if client portal config is not provided
+        if (!clientPortalConfig) {
+            setIsClientLoading(false);
+            return;
+        }
+
+        // Get the profile URL from config or use default
+        const profileUrl =
+            clientPortalConfig.urls?.profile || '/client/profile';
+
+        try {
+            const result = await CustomFetch(profileUrl, 'GET');
+
+            if (
+                result.data &&
+                result.data[clientPortalConfig.model] &&
+                result.data[clientPortalConfig.model].id
+            ) {
+                setClientProfile(result.data[clientPortalConfig.model]);
+                setIsClientAuthenticated(true);
+            } else {
+                setIsClientAuthenticated(false);
+            }
+            setIsClientLoading(false);
+
+            // Get login and verify URLs from config
+            const loginPath = '/client/login';
+            const verifyPath = '/client/verify';
+
+            // If on client login page but already authenticated, redirect to portal
+            if (
+                isClientAuthenticated &&
+                (location.pathname === loginPath ||
+                    location.pathname === verifyPath)
+            ) {
+                navigate('/client/portal', { replace: true });
+            }
+        } catch (error) {
+            setIsClientLoading(false);
+            setIsClientAuthenticated(false);
+
+            // Get login path
+            const loginPath = '/client/login';
+
+            // Only redirect if currently on a client portal page
+            if (location.pathname.startsWith('/client/portal')) {
+                navigate(loginPath, {
+                    state: { previousUrl: location.pathname },
+                });
+            }
+        }
+    };
+
     useEffect(() => {
         updateAuthStatus();
     }, [isAuthenticated]);
 
+    useEffect(() => {
+        updateClientAuthStatus();
+    }, [isClientAuthenticated, clientPortalConfig, location.pathname]);
+
     return (
         <>
             <Routes>
@@ -93,6 +176,7 @@ const GenericAuth = ({
                         />
                     }
                 />
+                {/* Client Portal Routes */}
                 <Route
                     path="reset"
                     element={
@@ -124,6 +208,73 @@ const GenericAuth = ({
                         />
                     }
                 />
+                {/* Client Portal Routes and Protected Routes */}
+                {clientPortalConfig && (
+                    <Route path="client">
+                        {/* Client Auth Routes */}
+                        <Route
+                            path="login"
+                            element={
+                                <ClientLoginComponent
+                                    loginBg={loginBg}
+                                    logo={logo}
+                                    setIsAuthenticated={
+                                        setIsClientAuthenticated
+                                    }
+                                    setUserProfile={setClientProfile}
+                                    urls={clientPortalConfig.urls}
+                                />
+                            }
+                        />
+                        <Route
+                            path="verify"
+                            element={
+                                <ClientOTPVerifyComponent
+                                    loginBg={loginBg}
+                                    logo={logo}
+                                    setIsAuthenticated={
+                                        setIsClientAuthenticated
+                                    }
+                                    setUserProfile={setClientProfile}
+                                    urls={clientPortalConfig.urls}
+                                />
+                            }
+                        />
+
+                        {/* Client Portal Protected Route */}
+                        {clientPortalConfig.component && (
+                            <Route
+                                element={
+                                    <ClientProtectedRoute
+                                        clientUser={clientProfile}
+                                        loading={isClientLoading}
+                                    />
+                                }
+                            >
+                                <Route
+                                    path="portal/*"
+                                    element={
+                                        <GenericClientPortal
+                                            clientProfile={clientProfile}
+                                            setClientProfile={setClientProfile}
+                                            setClientAuth={
+                                                setIsClientAuthenticated
+                                            }
+                                            logo={headerLogo || logo}
+                                            portalConfig={clientPortalConfig}
+                                            themeType={themeType}
+                                            urls={clientPortalConfig.urls}
+                                        >
+                                            {clientPortalConfig.component}
+                                        </GenericClientPortal>
+                                    }
+                                />
+                            </Route>
+                        )}
+                    </Route>
+                )}
+
+                {/* Main Admin Routes */}
                 <Route
                     element={
                         <ProtectedRoute
@@ -199,4 +350,28 @@ const TwoFactorAuthComponent = React.memo(
     )
 );
 
+const ClientLoginComponent = React.memo(
+    ({ loginBg, logo, setIsAuthenticated, setUserProfile, urls }) => (
+        <ClientLogin
+            loginBg={loginBg}
+            logo={logo}
+            setSystemAuth={setIsAuthenticated}
+            setUserProfile={setUserProfile}
+            urls={urls}
+        />
+    )
+);
+
+const ClientOTPVerifyComponent = React.memo(
+    ({ loginBg, logo, setIsAuthenticated, setUserProfile, urls }) => (
+        <ClientOTPVerify
+            loginBg={loginBg}
+            logo={logo}
+            setSystemAuth={setIsAuthenticated}
+            setUserProfile={setUserProfile}
+            urls={urls}
+        />
+    )
+);
+
 export default GenericAuth;

package/src/components/crm/generic/GenericClientPortal.jsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { Routes, Route, useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { SignOut } from 'akar-icons';
+
+import CustomFetch from '../Fetch';
+
+import styles from './styles/GenericClientPortal.module.scss';
+
+/**
+ * GenericClientPortal - A wrapper component for client portal content
+ *
+ * Note: The main component (clientPortalConfig.component) is passed as children
+ * from GenericAuth.jsx and rendered in the default route.
+ *
+ * To pass props to the component, you can provide a function instead of a component instance:
+ * clientPortalConfig={{
+ *   component: (props) => <YourComponent {...props} customProp="value" />,
+ *   // other config...
+ * }}
+ *
+ * The function will receive { clientProfile, setClientProfile, clientId } as arguments.
+ * The clientId is extracted from clientProfile.id for convenience.
+ *
+ * @param {Object} props
+ * @param {Object} props.clientProfile - The client user profile data
+ * @param {Function} props.setClientProfile - Function to update client profile
+ * @param {Function} props.setClientAuth - Function to update client authentication state
+ * @param {string} props.logo - URL for the logo to display in header
+ * @param {Object} props.portalConfig - Configuration for the portal
+ * @param {Object} props.portalConfig.routes - Additional route components to render
+ * @param {Object} props.portalConfig.keys - Configuration for mapping client profile fields
+ * @param {string|string[]} props.portalConfig.keys.name - Field(s) to use for client name display
+ * @param {React.ReactNode|Function} props.portalConfig.component - Main component passed from GenericAuth (received as children prop).
+ * If a function is provided, it will be called with { clientProfile, setClientProfile, clientId } as arguments
+ * @param {Object} props.urls - URLs for API endpoints
+ * @param {string} props.urls.logout - URL for logout endpoint
+ * @param {string} props.themeType - Theme type (primary, secondary, etc.)
+ * @param {React.ReactNode|Function} props.children - Child components to render in default route.
+ * If a function is provided, it will be called with { clientProfile, setClientProfile, clientId } as arguments
+ */
+const GenericClientPortal = ({
+    clientProfile,
+    setClientProfile,
+    setClientAuth,
+    logo,
+    portalConfig = { routes: {}, keys: {} },
+    themeType = 'primary',
+    urls = {},
+    children,
+}) => {
+    const navigate = useNavigate();
+
+    // Handle logout
+    const handleLogout = async () => {
+        try {
+            const logoutUrl = urls.logout || '/client/logout';
+            await CustomFetch(logoutUrl, 'POST', {});
+            setClientProfile({});
+            setClientAuth(false);
+            toast.success('You have been logged out successfully');
+            const loginUrl = '/client/login';
+            navigate(loginUrl);
+        } catch (error) {
+            toast.error('Error logging out. Please try again.');
+        }
+    };
+
+    // Get client name based on configuration or fallback to defaults
+    const getClientName = () => {
+        // Check if keys.name is configured
+        if (portalConfig.keys && portalConfig.keys.name) {
+            // If keys.name is an array, concatenate the values
+            if (Array.isArray(portalConfig.keys.name)) {
+                const nameParts = portalConfig.keys.name
+                    .map((key) => clientProfile[key] || '')
+                    .filter((part) => part !== '');
+
+                if (nameParts.length > 0) {
+                    return nameParts.join(' ');
+                }
+            } else {
+                // If keys.name is a string, use it directly
+                const nameValue = clientProfile[portalConfig.keys.name];
+                if (nameValue) return nameValue;
+            }
+        }
+
+        // Fallback to existing fields
+        return clientProfile.name || clientProfile.email || 'Client';
+    };
+
+    const clientName = getClientName();
+
+    return (
+        <div className={`${styles.portalContainer} ${styles[themeType]}`}>
+            <header className={styles.portalHeader}>
+                <div className={styles.logoContainer}>
+                    <img
+                        src={logo}
+                        alt="Client Portal"
+                        className={styles.logo}
+                    />
+                </div>
+                <div className={styles.userInfo}>
+                    <span className={styles.welcomeText}>
+                        Welcome, <strong>{clientName}</strong>
+                    </span>
+                    <button
+                        onClick={handleLogout}
+                        className={styles.logoutButton}
+                        title="Logout"
+                        aria-label="Logout"
+                    >
+                        <SignOut strokeWidth={2} size={16} />
+                    </button>
+                </div>
+            </header>
+
+            <main className={styles.portalContent}>
+                <div className={styles.mainContent}>
+                    <Routes>
+                        {/* Render provided routes if any */}
+                        {portalConfig.routes &&
+                            Object.entries(portalConfig.routes).map(
+                                ([path, Component]) => (
+                                    <Route
+                                        key={path}
+                                        path={path}
+                                        element={
+                                            <Component
+                                                clientProfile={clientProfile}
+                                                setClientProfile={
+                                                    setClientProfile
+                                                }
+                                                dataId={
+                                                    clientProfile?.id || null
+                                                }
+                                            />
+                                        }
+                                    />
+                                )
+                            )}
+
+                        {/* Default route for main component (passed as children from GenericAuth) */}
+                        <Route
+                            path="/"
+                            element={
+                                typeof children === 'function'
+                                    ? children({
+                                          clientProfile,
+                                          setClientProfile,
+                                          dataId: clientProfile?.id || null,
+                                      })
+                                    : children
+                            }
+                        />
+                    </Routes>
+                </div>
+            </main>
+        </div>
+    );
+};
+
+export default GenericClientPortal;