@genesislcap/blank-app-seed 3.30.0-prerelease.3 → 3.30.0-prerelease.30

package/client-tmp/react/lint-css.ts

@@ -0,0 +1,19 @@
+import { execSync } from 'child_process';
+import glob from 'glob';
+import path from 'path';
+
+const cssFiles: string[] = glob.sync(path.join(__dirname, '**/*.css'));
+
+if (cssFiles.length === 0) {
+  console.log('No CSS files found.');
+  process.exit(0);
+}
+
+const command: string = `genx lint -l stylelint ${cssFiles.join(' ')}`;
+
+try {
+  execSync(command, { stdio: 'inherit' });
+} catch (error) {
+  console.error('Error running stylelint:', error);
+  process.exit(1);
+}

package/client-tmp/react/package.json

@@ -2,29 +2,35 @@
   "name": "{{pkgName}}",
   "version": "{{applicationVersionWeb}}",
   "private": true,
+  "config": {
+    "PERSIST_LAYOUT_IN_DEV": false
+  },
   "scripts": {
     "baseline": "npm run clean && npm run bootstrap",
     "bootstrap": "npm i --legacy-peer-deps",
     "bootstrap:ci": "npm ci --no-fund --no-audit",
-    "build": "vite build",
     "build:stats": "npm run build --stats-json",
     "clean": "genx clean dist node_modules",
-    "dev": "vite",
+    "dev": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "stats": "webpack --mode production --json > stats.json",
+    "build:vite": "vite build",
+    "dev:vite": "vite build && vite preview",
     "dev:docker": "npm run dev -- --host 0.0.0.0",
     "dev:no-open": "NO_OPEN=true npm run dev",
     "dev:intellij": "npm run dev",
     "dev:https": "HTTPS=true npm run dev",
     "dsconfig": "dsconfig --path src/styles/design-tokens.json",
-    "lint": "eslint src/**/*.js src/**/*.jsx",
-    "lint:fix": "eslint src/**/*.js src/**/*.jsx --fix",
+    "lint": "eslint src/**/*.ts src/**/*.tsx",
+    "lint:fix": "eslint src/**/*.ts src/**/*.tsx --fix",
     "lint:eslint": "npm lint",
-    "lint:stylelint": "node lint-css.js",
-    "test": "genx test",
+    "lint:stylelint": "npx ts-node lint-css.ts",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "test:unit:watch": "jest --watchAll",
     "test:e2e": "genx test --e2e",
     "test:e2e:debug": "genx test --e2e --debug",
-    "test:e2e:ui": "genx test --e2e --interactive",
-    "test:coverage": "genx test --no-watch --coverage",
-    "test:unit:watch": "genx test --watch"
+    "test:e2e:ui": "genx test --e2e --interactive"
   },
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "29.2.0",
@@ -33,24 +39,32 @@
     "@ag-grid-enterprise/core": "29.2.0",
     "@ag-grid-enterprise/row-grouping": "29.2.0",
     "@ag-grid-enterprise/server-side-row-model": "29.2.0",
+    "@genesislcap/foundation-comms": "{{versions.UI}}",
+    "@genesislcap/foundation-entity-management": "{{versions.UI}}",
     {{#if FDC3.includeDependencies}}
     "@genesislcap/foundation-fdc3": "{{versions.UI}}",
     {{/if}}
-    "@genesislcap/foundation-comms": "{{versions.UI}}",
-    "@genesislcap/foundation-login": "{{versions.UI}}",
-    "@genesislcap/foundation-entity-management": "{{versions.UI}}",
     "@genesislcap/foundation-header": "{{versions.UI}}",
+    "@genesislcap/foundation-layout": "{{versions.UI}}",
+    "@genesislcap/foundation-logger": "{{versions.UI}}",
+    "@genesislcap/foundation-login": "{{versions.UI}}",
+    "@genesislcap/foundation-shell": "{{versions.UI}}",
     "@genesislcap/foundation-ui": "{{versions.UI}}",
+    "@genesislcap/foundation-utils": "{{versions.UI}}",
     "@genesislcap/rapid-design-system": "{{versions.UI}}",
     "@genesislcap/rapid-grid-pro": "{{versions.UI}}",
-    "@genesislcap/foundation-layout": "{{versions.UI}}",
+    "@genesislcap/web-core": "{{versions.UI}}",
     "@genesislcap/g2plot-chart": "{{versions.UI}}",
     "history": "^5.3.0",
-    "react": "^19.0.0-beta-94eed63c49-20240425",
-    "react-dom": "^19.0.0-beta-94eed63c49-20240425",
-    "react-router-dom": "6.24.1"
+    "react": "^19.0.0-rc-ed966dac-20241007",
+    "react-dom": "^19.0.0-rc-ed966dac-20241007",
+    "react-router-dom": "6.24.1",
+    "web-vitals": "^2.1.4"
   },
   "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
     "@genesislcap/design-system-configurator": "{{versions.UI}}",
     "@genesislcap/eslint-config": "{{versions.UI}}",
     "@genesislcap/prettier-config": "{{versions.UI}}",
@@ -60,17 +74,31 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
+    "@types/css-modules": "^1.0.5",
+    "@types/jest": "^29.5.12",
     "@types/node": "^20.14.10",
     "@types/react": "npm:types-react@alpha",  
     "@types/react-dom": "npm:types-react-dom@alpha",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-react": "^4.3.1",
+    "babel-loader": "^9.2.1",
+    "babel-plugin-react-require": "^4.0.3",
+    "dotenv-webpack": "^8.1.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
+    "file-loader": "^6.2.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
-    "vite": "^5.3.1"
+    "vite": "^5.3.1",
+    "vite-plugin-tsconfig-paths": "^1.4.1",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
   },  
   "overrides": {  
     "@types/react": "npm:types-react@alpha",  

package/client-tmp/react/public/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{capitalCase appName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/bundle.js"></script>
+  </body>
+</html>

package/client-tmp/react/src/App.tsx

@@ -1,31 +1,75 @@
+import { useEffect, useState } from 'react';
+import { unstable_HistoryRouter as HistoryRouter, Routes, Route, useLocation } from 'react-router-dom';
 import {
-  unstable_HistoryRouter as HistoryRouter,
-  Routes,
-  Route,
-  useLocation,
-} from 'react-router-dom';
-import { useEffect } from 'react';
-import { history, setApiHost{{#if FDC3.channels.length}}, listenToChannel{{/if}} } from './utils';
+  history,
+  setApiHost,
+  getLayoutNameByRoute,
+  {{#if FDC3.channels.length~}}
+  listenToChannel,
+  onFDC3Ready,
+  {{/if}}
+} from './utils';
+import { customEventFactory, registerStylesTarget } from '@/pbc/utils';
 import LayoutWrapper from './layouts/LayoutWrapper';
-import { AUTH_PATH, NOT_PERMITTED_PATH, routeLayouts } from './config';
-import AuthGuard from './guards/AuthGuard';
-import PermissionsGuard from './guards/PermissionsGuard';
+import LayoutName from '@/types/LayoutName';
+import { AUTH_PATH, routeLayouts } from './config';
 import { AuthProvider } from './store/AuthContext';
-// Pages Components
+import { RoutesProvider, useRoutesContext } from './store/RoutesContext';
 import AuthPage from './pages/AuthPage/AuthPage';
-import NotPermittedPage from './pages/NotPermittedPage/NotPermittedPage';
-{{#each routes}}
-import {{pascalCase this.name}} from './pages/{{kebabCase this.name}}/{{pascalCase this.name}}';
-{{/each}}
-
-// Genesis Components
-import './share/genesis-components';
+import { registerComponents as genesisRegisterComponents } from './share/genesis-components';
+import { configureFoundationLogin } from './share/foundation-login';
+import ProtectedGuard from './guards/ProtectedGuard';
+import { storeService } from '@/services/store.service';
 
-const LayoutWithLocation = () => {
+const DynamicLayout = () => {
   const location = useLocation();
-  const layout = routeLayouts[location.pathname] || 'default';
-  {{#if FDC3.channels.length}}
+  const [layoutName, setLayoutName] = useState<LayoutName>(routeLayouts[location.pathname]  || 'default');
+  const handleRouteChange = (location: any) => {
+    setLayoutName(getLayoutNameByRoute(location.pathname));
+  };
+  const route = useRoutesContext().find((r) => r.path === location.pathname);
+  let pageComponent;
+  let content;
+
   useEffect(() => {
+    handleRouteChange(location);
+    const unlisten = history.listen(handleRouteChange);
+
+    return () => {
+      unlisten();
+    }
+  }, [location]);
+
+  if (route) {
+    pageComponent = route.element;
+  } else {
+    pageComponent = <AuthPage />;
+  }
+
+  if (location.pathname === `/${AUTH_PATH}` || location.pathname === '/') {
+    content = pageComponent;
+  } else {
+    content = <ProtectedGuard>{pageComponent}</ProtectedGuard>
+  }
+
+  return <LayoutWrapper layout={layoutName}>{content}</LayoutWrapper>
+
+};
+
+interface AppProps {
+  rootElement: HTMLElement;
+}
+
+const App: React.FC<AppProps> = ({ rootElement }) => {
+  const [isStoreConnected, setIsStoreConnected] = useState(false);
+  const dispatchCustomEvent = (type: string, detail?: any) => {
+    rootElement.dispatchEvent(customEventFactory(type, detail));
+  };
+  const handleStoreConnected = (event: CustomEvent) => {
+    storeService.onConnected(event);
+  };
+  {{#if FDC3.channels.length~}}
+  const FDC3ReadyHandler = () => {
     {{#each FDC3.channels}}
     listenToChannel('{{this.name}}', '{{this.type}}', (result) => {
       console.log('Received FDC3 channel message on: {{this.name}} channel, type: {{this.type}}', result);
@@ -33,61 +77,44 @@ const LayoutWithLocation = () => {
       // E.g. open a modal or route to specific page: Route.path.push(`[Route name]`);
     });
     {{/each}}
-    
-    return () => {
-      console.log('Component is being unmounted');
-    };
-  }, []);
+  };
   {{/if}}
 
-  let pageComponent;
-  let permissionCode = '{{this.permissions.viewRight}}';
-
-  switch (location.pathname) {
-    case `/${AUTH_PATH}`:
-      pageComponent = <AuthPage />;
-      break;
-    case `/${NOT_PERMITTED_PATH}`:
-      pageComponent = <NotPermittedPage />;
-      break;
-  {{#each routes}}
-    case '/{{kebabCase this.name}}':
-      pageComponent = <{{pascalCase this.name}} />;
-      permissionCode = '{{this.permissions.viewRight}}';
-      break;
-  {{/each}}
-    default:
-      pageComponent = <AuthPage />;
-  }
+  setApiHost();
+  genesisRegisterComponents();
+  configureFoundationLogin({ router: history });
 
-  if (
-    location.pathname === '/auth' ||
-    location.pathname === '/'
-  ) {
-    return <LayoutWrapper layout={layout}>{pageComponent}</LayoutWrapper>;
-  } else {
-    return (
-      <AuthGuard>
-        <PermissionsGuard permissionCode={permissionCode}>
-          <LayoutWrapper layout={layout}>{pageComponent}</LayoutWrapper>
-        </PermissionsGuard>
-      </AuthGuard>
-    );
-  }
-};
+  useEffect(() => {
+    registerStylesTarget(document.body, 'main');
+    {{#if FDC3.channels.length~}}
+    onFDC3Ready(FDC3ReadyHandler);
+    {{/if}}
+    if (!isStoreConnected) {
+      rootElement.addEventListener('store-connected', handleStoreConnected);
+      dispatchCustomEvent('store-connected', rootElement);
+      dispatchCustomEvent('store-ready', true);
+      setIsStoreConnected(true);
+    }
 
-const App: React.FC = () => {
-  setApiHost();
+    return () => {
+      if (isStoreConnected) {
+        rootElement.removeEventListener('store-connected', handleStoreConnected);
+        dispatchCustomEvent('store-disconnected');
+      }
+    };
+  }, [isStoreConnected]);
 
   return (
     <AuthProvider>
-      <HistoryRouter history={history}>
-        <Routes>
-          <Route path="*" element={<LayoutWithLocation />} />
-        </Routes>
-      </HistoryRouter>
+      <RoutesProvider>
+        <HistoryRouter history={history as any}>
+          <Routes>
+            <Route path="*" element={<DynamicLayout />} />
+          </Routes>
+        </HistoryRouter>
+      </RoutesProvider>
     </AuthProvider>
   );
 };
 
-export default App;
+export default App;

package/client-tmp/react/src/components/{ErrorMessage.test.js → ErrorMessage/ErrorMessage.test.tsx}

@@ -1,35 +1,33 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import ErrorMessage from './ErrorMessage';
+import { default as ErrorMessage, ErrorMessageProps } from './ErrorMessage';
 
 describe('ErrorMessage Component', () => {
-  const message = 'Test Error Message';
+  const message: string = 'Test Error Message';
 
   test('renders the message as a div by default', () => {
     render(<ErrorMessage message={message} />);
-    const displayedMessage = screen.getByText(message);
+    const displayedMessage: HTMLElement = screen.getByText(message);
     expect(displayedMessage.tagName).toBe('DIV');
     expect(displayedMessage).toBeInTheDocument();
   });
 
   test('renders the message as an h1 element when elementType is "h1"', () => {
     render(<ErrorMessage message={message} elementType="h1" />);
-    const displayedMessage = screen.getByRole('heading', { level: 1 });
+    const displayedMessage: HTMLElement = screen.getByRole('heading', { level: 1 });
     expect(displayedMessage.tagName).toBe('H1');
     expect(displayedMessage).toBeInTheDocument();
   });
 
   test('renders the message as a p element when elementType is "p"', () => {
     render(<ErrorMessage message={message} elementType="p" />);
-    const displayedMessage = screen.getByText(message);
+    const displayedMessage: HTMLElement = screen.getByText(message);
     expect(displayedMessage.tagName).toBe('P');
     expect(displayedMessage).toBeInTheDocument();
   });
 
   test('applies the correct styles to the error message wrapper', () => {
     render(<ErrorMessage message={message} />);
-    const wrapper = screen.getByText(message).closest('section');
+    const wrapper: HTMLElement | null = screen.getByText(message).closest('section');
     expect(wrapper).toHaveStyle(`
       display: flex;
       flex-direction: column;
@@ -42,8 +40,8 @@ describe('ErrorMessage Component', () => {
 
   test('applies the correct styles to the error message itself', () => {
     render(<ErrorMessage message={message} />);
-    const displayedMessage = screen.getByText(message);
-    const messageWrapper = displayedMessage.parentElement;
+    const displayedMessage: HTMLElement = screen.getByText(message);
+    const messageWrapper: HTMLElement | null = displayedMessage.parentElement;
     
     expect(messageWrapper).toBeInTheDocument();
     expect(messageWrapper).toHaveStyle(`
@@ -64,17 +62,34 @@ describe('ErrorMessage Component', () => {
   });
 
   test('renders nothing if the message is an empty string', () => {
-    const { container } = render(<ErrorMessage message="" />);
+    const { container }: { container: HTMLElement } = render(<ErrorMessage message="" />);
     expect(container.firstChild).toBeNull();
   });
 
   test('renders the correct element type for various elementType props', () => {
-    const elementTypes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'];
-    elementTypes.forEach((elementType) => {
-      const { container } = render(<ErrorMessage message={message} elementType={elementType} />);
-      const displayedMessage = container.querySelector(elementType);
+    const elementTypes: ErrorMessageProps['elementType'][] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'];
+    elementTypes.forEach((elementType: ErrorMessageProps['elementType']) => {
+      const { container }: { container: HTMLElement } = render(<ErrorMessage message={message} elementType={elementType} />);
+      const displayedMessage: HTMLElement | null = container.querySelector(elementType as string);
       expect(displayedMessage).toBeInTheDocument();
-      expect(displayedMessage.tagName).toBe(elementType.toUpperCase());
+      expect(displayedMessage?.tagName).toBe((elementType as string).toUpperCase());
     });
   });
+
+  test('renders the message as a div element when elementType is unknown', () => {
+    render(<ErrorMessage message={message} />);
+    const displayedMessage: HTMLElement = screen.getByText(message);
+    expect(displayedMessage.tagName).toBe('DIV');
+    expect(displayedMessage).toBeInTheDocument();
+  });
+
+  test('renders nothing if the message is null', () => {
+    const { container }: { container: HTMLElement } = render(<ErrorMessage />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('renders nothing if the message is undefined', () => {
+    const { container }: { container: HTMLElement } = render(<ErrorMessage message={undefined} />);
+    expect(container.firstChild).toBeNull();
+  });
 });

package/client-tmp/react/src/components/ErrorMessage/{ErrorMessage.jsx → ErrorMessage.tsx}

@@ -3,7 +3,7 @@ import React from 'react';
 const styles = {
   errorMessageWrapper: {
     display: 'flex',
-    flexDirection: 'column',
+    flexDirection: 'column' as const,
     justifyContent: 'center',
     alignItems: 'center',
     height: '100%',
@@ -14,11 +14,11 @@ const styles = {
     backgroundColor: 'var(--neutral-layer-4)',
     borderColor: 'var(--error-color)',
     borderRadius: '7px',
-    borderStyle: 'solid',
+    borderStyle: 'solid' as const,
     borderWidth: '4px',
     padding: '5px',
     margin: '15px',
-    textAlign: 'center',
+    textAlign: 'center' as const,
     width: 'fit-content',
     alignSelf: 'center',
     height: 'auto',
@@ -26,7 +26,12 @@ const styles = {
   },
 };
 
-const ErrorMessage = ({ elementType = 'div', message = '' }) => {
+export interface ErrorMessageProps {
+  elementType?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+  message?: string;
+}
+
+const ErrorMessage: React.FC<ErrorMessageProps> = ({ elementType = 'div', message = '' }) => {
   const ElementType = elementType;
 
   return message && message !== '' && (

package/client-tmp/react/src/config.ts

@@ -1,32 +1,18 @@
 import { RouteLayouts } from './types/RouteLayouts';
+import { environment } from '@environment';
 
 export const routeLayouts: RouteLayouts = {
-  '/auth-mock': 'blank',
   '/auth': 'blank',
   '/': 'blank',
 };
 
-import type { MainMenu } from './types/menu';
-
 export const AUTH_PATH = 'auth';
 export const NOT_PERMITTED_PATH = 'not-permitted';
 
 export const API_DATA = {
-  URL: import.meta.env.VITE_API_HOST,
+  URL: environment.API_HOST,
   AUTH: {
     username: '', // provide login to a user in given environment
     password: '', // provide password to a user in given environment
   },
 };
-
-export const mainMenu: MainMenu = [
-  {{#each routes}}
-  {
-    index: {{@index}},
-    path: '{{kebabCase this.name}}',
-    title: '{{#if this.title}}{{this.title}}{{else}}{{this.name}}{{/if}}',
-    icon: '{{this.icon}}',
-    variant: 'solid'
-  }{{#unless @last}},{{/unless}}
-  {{/each}}
-];

package/client-tmp/react/src/custom-elements.d.ts

@@ -1,11 +1,23 @@
-declare namespace JSX {
-  interface IntrinsicElements {
-    // Wildcard for all webcomponents:
-    [elemName: string]: unknown;
-  }
-}
+import React, { useState, DOMAttributes }  from 'react';
 
-declare module '*.module.css' {
-  const classes: { [key: string]: string };
-  export default classes;
+type CustomElement<T = React.HTMLAttributes<HTMLElement>> = Partial<T & DOMAttributes<T> & { [key: string]: any }>;
+
+declare module "react/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements {
+      'rapid-design-system-provider': CustomElement;
+      'entity-management': CustomElement;
+      'foundation-form': CustomElement;
+      'rapid-grid-pro': CustomElement;
+      'grid-pro-genesis-datasource': CustomElement;
+      'grid-pro-column': CustomElement;
+      'rapid-g2plot-chart': CustomElement;
+      'chart-datasource': CustomElement;
+      'client-app-login': CustomElement;
+      'rapid-layout': CustomElement;
+      'rapid-layout-region': CustomElement;
+      'rapid-layout-item': CustomElement;
+      'foundation-header': CustomElement;
+    }
+  }
 }

package/client-tmp/react/src/environments/environment.prod.ts

@@ -0,0 +1,8 @@
+export const environment = {
+  production: true,
+  PORT: 4200,
+  ENABLE_SSO: {{enableSSO}},
+  HOST: 'localhost',
+  PROTOCOL: 'http',
+  BUILDER: 'webpack',
+};

package/client-tmp/react/src/environments/environment.ts

@@ -0,0 +1,9 @@
+export const environment = {
+  production: false,
+  API_HOST: '{{apiHost}}',
+  PORT: 4200,
+  ENABLE_SSO: {{enableSSO}},
+  HOST: 'localhost',
+  PROTOCOL: 'http',
+  BUILDER: 'webpack'
+};

package/client-tmp/react/src/guards/ProtectedGuard.tsx

@@ -0,0 +1,64 @@
+import { useState, useEffect, ReactNode } from 'react';
+import { RouteObject } from 'react-router';
+import isConnectedHelper from '@/helpers/isConnectedHelper';
+import isAuthenticatedHelper from '@/helpers/isAuthenticatedHelper';
+import hasPermissionHelper from '@/helpers/hasPermissionHelper';
+import { useRoutesContext } from '@/store/RoutesContext';
+import { NOT_PERMITTED_PATH, AUTH_PATH } from '@/config';
+
+enum PermissionState {
+  ALLOWED = 'allowed',
+  DENIED = 'denied',
+  UNKNOWN = 'unknown',
+}
+
+const redirectUrlByPermissionState: { [key in Partial<PermissionState>]?: string } = {
+  [PermissionState.DENIED]: NOT_PERMITTED_PATH,
+  [PermissionState.UNKNOWN]: AUTH_PATH,
+};
+
+type ExtendedRouteObject = RouteObject & {
+  data?: {
+    permissionCode?: string;
+  };
+  path: string;
+}
+
+const ProtectedGuard: React.FC<{ children: ReactNode }> = ({ children }: { children: ReactNode }) => {
+  const routes = useRoutesContext() as ExtendedRouteObject[];
+  const [isConnected, setIsConnected] = useState<boolean | null>(null);
+  const isAuthenticated: boolean | null = null;
+  const route = routes.find(({ path }) => path === location.pathname);
+  const hasPermission = route?.data?.permissionCode ? hasPermissionHelper(route.data?.permissionCode) : true;
+
+  useEffect(() => {
+    isConnectedHelper().then((connectedState: boolean): void => {
+      setIsConnected(connectedState);
+    });
+  }, []);
+  
+  useEffect((): void  => {
+    if (isConnected === null) {
+      return;
+    }
+
+    const isAuthenticated = isAuthenticatedHelper();
+
+
+    let permissionState;
+
+    if (!isConnected || !isAuthenticated) {
+      permissionState = PermissionState.UNKNOWN;
+    } else if (hasPermission === false) {
+      permissionState = PermissionState.DENIED;
+    } 
+    
+    if (permissionState) {
+      window.location.href = `/${redirectUrlByPermissionState[permissionState]}`;
+    }
+  }, [routes, isConnected, isAuthenticated, hasPermission]);
+
+  return children;
+};
+
+export default ProtectedGuard;

package/client-tmp/react/src/helpers/hasPermissionHelper.tsx

@@ -0,0 +1,10 @@
+import { getUser } from '@genesislcap/foundation-user';
+
+const hasPermissionHelper = (permissionCode: string | undefined): boolean => {
+  const user = getUser();
+
+  return !!(permissionCode && !user.hasPermission(permissionCode))
+
+};
+
+export default hasPermissionHelper;

package/client-tmp/react/src/helpers/isAuthenticatedHelper.tsx

@@ -0,0 +1,14 @@
+import { getUser } from '@genesislcap/foundation-user';
+
+const isAuthenticatedHelper = (): boolean => {
+  const user = getUser();
+
+  if (!user.isAuthenticated) {
+    user.trackPath();
+    return false;
+  }
+
+  return true;
+};
+
+export default isAuthenticatedHelper;