@licklist/design 0.78.5-dev.8 → 0.78.5-dev.80

package/src/PageNotFound/PageNotFound.scss

@@ -0,0 +1,8 @@
+
+.page-not-found-container {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+    background: var(--surfaces-main-background-secondary, #FFFFFF);
+
+}

package/src/PageNotFound/PageNotFound.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { PageNotFound } from './PageNotFound'
+export default {
+    title: 'Maintenance/Page Not Found',
+    component: PageNotFound,
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as Meta
+
+type Story = StoryObj<typeof PageNotFound>
+
+export const Desktop: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'desktop' },
+  },
+}
+
+export const Mobile: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+  },
+}

package/src/PageNotFound/PageNotFound.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+//import { SkeletonSidebar } from "../Maintenance/SkeletonSidebar";
+import { MaintenancePage } from "../Maintenance/MaintenancePage";
+
+export type AppContext = 'dashboard' | 'app' | 'admin' | 'iframe'
+
+interface PageNotFoundProps {
+  app?: AppContext;
+  buttonLabel?: string;
+  onButtonClick?: () => void;
+}
+
+export const PageNotFound: React.FC<PageNotFoundProps> = ({ app, buttonLabel, onButtonClick }) => {
+  const defaultLabels: Record<AppContext, string> = {
+    dashboard: 'Back to Dashboard',
+    app: 'Back to App',
+    admin: 'Back to Admin',
+    iframe: 'Back',
+  }
+
+  const resolvedLabel = buttonLabel ?? (app ? defaultLabels[app] : 'Back')
+  const handleClick = onButtonClick ?? (() => (window.location.href = "/"))
+
+  return (
+    <div>
+      <div className="page-not-found-container">
+{/* We are not using the sidebar for now. It will be enabled when we have the sidebar ready.
+        <SkeletonSidebar />
+*/}
+        <MaintenancePage
+          svg={<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+            <path d="M18 50H22V48H40V44H44V48H48V52H22V54H18V52H15.9863C14.8893 51.9997 14.0001 51.0894 14 50.0166V44H18V50ZM22 44H18V40H22V44ZM49.999 44H46V38H49.999V44ZM18 40H14V30H18V40ZM54 38H50V34H54V38ZM46 34H42V30H46V34ZM14 30H10V26H14V30ZM49.999 22V30H46V24H38V22H40V18H38V16H36V12H40L49.999 22ZM22 14H26V12H32V16H26V18H22V16H16V20H18V26H14V20H12V16H14V13.9834C14.0001 12.888 14.8951 12 15.9971 12H22V14ZM38 22H34V18H38V22Z" fill="var(--fills-main-fill-secondary, #626A90)" />
+          </svg>}
+          title="Page not found."
+          subheading="It looks like that page doesn’t exist."
+          body="Typing in the URL again or retrace your steps. If you continue to experience problems contact your account manager."
+          buttonLabel={resolvedLabel}
+          onButtonClick={handleClick}
+        />
+      </div>
+    </div>
+  )
+}

package/src/PageNotFound/index.ts

@@ -0,0 +1 @@
+export { PageNotFound } from './PageNotFound'

package/src/UnderMaintenance/UnderMaintenance.scss

@@ -0,0 +1,6 @@
+.under-maintenance-container {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+    background: var(--surfaces-main-background-secondary, #FFFFFF);
+}

package/src/UnderMaintenance/UnderMaintenance.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { UnderMaintenance } from './UnderMaintenance'
+export default {
+    title: 'Maintenance/Under Maintenance',
+    component: UnderMaintenance,
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as Meta
+
+type Story = StoryObj<typeof UnderMaintenance>
+
+export const Desktop: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'desktop' },
+  },
+}
+
+export const Mobile: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+  },
+}

package/src/UnderMaintenance/UnderMaintenance.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import './UnderMaintenance.scss'
+import { SkeletonSidebar } from "../Maintenance/SkeletonSidebar";
+import { MaintenancePage } from "../Maintenance/MaintenancePage";
+export const UnderMaintenance: React.FC = () => {
+    return (
+        <div>
+            <div className="under-maintenance-container" style={{ display: 'flex', height: '100vh', width: '100vw', background: 'var(--surfaces-main-background-secondary, #FFFFFF)' }}>
+                <SkeletonSidebar />
+                <MaintenancePage
+                    svg={<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+                        <path d="M32 12C43.0456 12 52 20.9543 52 32C52 43.0456 43.0456 52 32 52C20.9543 52 12 43.0456 12 32C12 20.9543 20.9543 12 32 12ZM32 16C23.1634 16 16 23.1634 16 32C16 40.8366 23.1634 48 32 48C40.8366 48 48 40.8366 48 32C48 23.1634 40.8366 16 32 16ZM32 32C37.5228 32 42 36.4772 42 42H38C38 38.6863 35.3137 36 32 36C28.6863 36 26 38.6863 26 42H22C22 36.4772 26.4772 32 32 32ZM27 24C28.6569 24 30 25.3431 30 27C30 28.6569 28.6569 30 27 30C25.3431 30 24 28.6569 24 27C24 25.3431 25.3431 24 27 24ZM37 24C38.6569 24 40 25.3431 40 27C40 28.6569 38.6569 30 37 30C35.3431 30 34 28.6569 34 27C34 25.3431 35.3431 24 37 24Z" fill="#626A90" />
+                    </svg>}
+                    title="Oops, we didn’t want you to see us like this."
+                    subheading="We are undergoing maintenance at the moment and will be back online shortly. Sorry for any inconvenience."
+                />
+            </div>
+
+        </div>
+    )
+
+}

package/src/UnderMaintenance/index.ts

@@ -0,0 +1 @@
+export { UnderMaintenance } from './UnderMaintenance'

package/src/affiliate/card/AffiliateCard.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import { AffiliateCard, AffiliateCardProps } from './AffiliateCard'
 
 export default {

package/src/affiliate/form/AffiliateForm.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import { AffiliateForm, AffiliateFormProps } from './AffiliateForm'
 
 export default {

package/src/assets/Trend-Down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27 23V16H25V19.4375L15.7686 8.35938C15.5453 8.0916 15.1984 7.95968 14.8535 8.01074C14.5086 8.06191 14.215 8.2892 14.0791 8.61035L9.30176 19.9014L5.33203 13.9453L3.66797 15.0547L8.66797 22.5547L8.75098 22.6631C8.96072 22.9001 9.2733 23.0253 9.59375 22.9951C9.95991 22.9606 10.2776 22.7284 10.4209 22.3896L15.2812 10.9014L23.6973 21H19V23H27Z" fill="currentColor"/>
+</svg>

package/src/assets/Trend-Up.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27 9.99982V16.9998H25V13.5623L15.7686 24.6404C15.5453 24.9082 15.1984 25.0401 14.8535 24.9891C14.5086 24.9379 14.215 24.7106 14.0791 24.3895L9.06934 12.5486L4.58789 15.8084L3.41211 14.1912L8.91211 10.1912L9.00781 10.1297C9.23732 9.99988 9.51055 9.9646 9.76758 10.0359C10.0615 10.1176 10.302 10.3293 10.4209 10.6102L15.2812 22.0984L23.6973 11.9998H19V9.99982H27Z" fill="currentColor"/>
+</svg>

package/src/auth/AccessDenied/AccessDenied.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import { AccessDenied } from './AccessDenied'
 
 export default {

package/src/auth/Auth.stories.tsx

@@ -1,5 +1,7 @@
 import { useEffect } from 'react'
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
+import { createBrowserHistory } from 'history'
+import history from '@licklist/plugins/dist/services/History/History'
 import UserProvider from '@licklist/plugins/dist/context/user/providers/UserProvider'
 import InviteProvider from '@licklist/plugins/dist/context/user/providers/InviteProvider'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
@@ -10,16 +12,48 @@ export default {
   title: 'Auth',
 } as Meta
 
+// Initialize history synchronously before the component renders
+if (history && !history.location) {
+  try {
+    const browserHistory = createBrowserHistory()
+    Object.assign(history, {
+      location: browserHistory.location,
+      action: browserHistory.action,
+      length: browserHistory.length,
+      push: browserHistory.push,
+      replace: browserHistory.replace,
+      go: browserHistory.go,
+      goBack: browserHistory.goBack,
+      goForward: browserHistory.goForward,
+      block: browserHistory.block,
+      listen: browserHistory.listen,
+    })
+  } catch (e) {
+    // Fallback: set a basic location
+    Object.defineProperty(history, 'location', {
+      value: {
+        pathname: '/',
+        search: '',
+        hash: '',
+        state: null,
+        key: 'default',
+      },
+      writable: true,
+    })
+  }
+}
+
 export const RouterComponent: Story<RouterProps> = (args) => (
   <Router {...args} />
 )
+RouterComponent.parameters = {
+  excludeRouter: true,
+}
 export const AuthorizerComponent: Story<AuthorizerProps> = (args) => (
   <>
     <UserProvider>
       <InviteProvider>
-        <Router>
-          <AuthorizerWrapper {...args} />
-        </Router>
+        <AuthorizerWrapper {...args} />
       </InviteProvider>
     </UserProvider>
   </>

package/src/auth/Authorizer.tsx

@@ -1,23 +1,31 @@
-import { ReactNode, useEffect, useState, useCallback } from 'react'
-import { matchPath, useLocation } from 'react-router-dom'
+import { ReactNode, useEffect, useState, useCallback, useContext, useRef } from 'react'
+import { matchPath, useLocation, useNavigate } from 'react-router-dom'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
 import { ROUTES, MATCH_ROUTE_PATTERNS } from '@licklist/core/dist/Config'
 import useAuthApi from '@licklist/plugins/dist/hooks/Api/useAuthApi'
 import useAuth from '@licklist/plugins/dist/context/user/hooks/useAuth'
 import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
+import StorageContext from '@licklist/plugins/dist/context/app/StorageContext'
+import JsonService from '@licklist/plugins/dist/services/Json/JsonService'
+import { IAuth } from '@licklist/plugins/dist/types/context/user/IAuth'
 import { BlockLoader } from '../static/loader/BlockLoader'
 
 export interface AuthorizerProps {
   children?: ReactNode | ReactNode[]
 }
 
+const AUTH_CONTEXT_KEY = 'auth'
+
 function Authorizer(props: AuthorizerProps) {
   const { children } = props
   const auth = useAuth()
   const user = useUser()
   const { useProfile } = useAuthApi()
+  const storage = useContext(StorageContext)
+  const isLoggingOut = useRef(false)
 
   const { pathname } = useLocation()
+  const navigate = useNavigate()
 
   // This will re-fetch user's profile
   const profile = useProfile()
@@ -40,6 +48,24 @@ function Authorizer(props: AuthorizerProps) {
     [],
   )
 
+  // Check auth on every route change - if storage was cleared, logout immediately
+  useEffect(() => {
+    if (isLoggingOut.current) return
+
+    const storedAuth = storage.get(AUTH_CONTEXT_KEY)
+    const parsedAuth = storedAuth ? JsonService.decode<IAuth>(storedAuth) : null
+
+    // If we have auth in memory but not in storage, session was cleared
+    if (auth.secrets !== null && !parsedAuth) {
+      isLoggingOut.current = true
+      auth.setSecrets(null)
+      user.setProfile(null)
+
+      const route = RouteService.getCurrentRoute()
+      navigate([ROUTES.LOGIN_PAGE, `returnUrl=${escape(route)}`].join('?'), { replace: true })
+    }
+  }, [pathname, auth.secrets, storage, navigate, auth, user])
+
   useEffect(() => {
     if (profile.isLoading || profile.isFetching) {
       return
@@ -54,37 +80,41 @@ function Authorizer(props: AuthorizerProps) {
       return
     }
 
-    if (
-      [
-        ROUTES.LOGIN_PAGE,
-        ROUTES.REGISTER_PAGE,
-        ROUTES.PRIVACY_PAGE,
-        ROUTES.TERMS_PAGE,
-        ROUTES.PRIVACY_FACTS_PAGE,
-        ROUTES.CHANGE_PASSWORD,
-        ROUTES.FORGOT_PASSWORD,
-        ROUTES.SSO_LOGIN,
-        ...matchedPathPatternUrls(),
-      ].includes(pathname)
-    ) {
-      setIsValidated(() => true)
+    const publicRoutes = [
+      ROUTES.LOGIN_PAGE,
+      ROUTES.REGISTER_PAGE,
+      ROUTES.PRIVACY_PAGE,
+      ROUTES.TERMS_PAGE,
+      ROUTES.PRIVACY_FACTS_PAGE,
+      ROUTES.CHANGE_PASSWORD,
+      ROUTES.FORGOT_PASSWORD,
+      ROUTES.SSO_LOGIN,
+      ROUTES.MAINTENANCE_PAGE,
+      ...matchedPathPatternUrls(),
+    ]
+
+    // If we're on a public route (e.g. /login), mark as validated and never redirect
+    if (publicRoutes.includes(pathname)) {
+      setIsValidated(true)
       return
     }
 
     const route = RouteService.getCurrentRoute()
 
-    RouteService.cleanRedirect(
+    navigate(
       [ROUTES.LOGIN_PAGE, `returnUrl=${escape(route)}`].join('?'),
+      { replace: true },
     )
   }, [
     auth.secrets,
     user.profile,
     profile.data,
-    matchedPathPatternUrls,
     profile.isError,
     profile.isLoading,
     profile.isFetching,
     pathname,
+    matchedPathPatternUrls,
+    navigate,
   ])
 
   if (profile.isFetching || profile.isLoading || !isValidated)

package/src/auth/ChangePassword/ChangePassword.stories.tsx

@@ -1,5 +1,4 @@
-import { Meta, Story } from '@storybook/react'
-import { Router } from '../Router'
+import { Meta, Story } from '@storybook/react-vite'
 import { ChangePasswordComponent } from './ChangePasswordComponent'
 import {
   ChangePasswordFormComponent,
@@ -16,10 +15,4 @@ export const ChangePassword: Story<{}> = (args) => (
 
 export const ChangePasswordForm: Story<ChangePasswordFormComponentProps> = (
   args,
-) => (
-  <>
-    <Router>
-      <ChangePasswordFormComponent {...args} />
-    </Router>
-  </>
-)
+) => <ChangePasswordFormComponent {...args} />

package/src/auth/ChangePassword/ChangePasswordComponent.tsx

@@ -1,3 +1,4 @@
+import { showAlert } from '@licklist/plugins/dist/context/app/AlertContext'
 import { useContext, useEffect, useState } from 'react'
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
@@ -6,7 +7,6 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import { ApiServiceError } from '@licklist/core/dist/Api/ApiService'
 import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
 import useUserApi from '@licklist/plugins/dist/hooks/Api/useUserApi'
-import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
 import { UserChangePasswordRequest } from '@licklist/plugins/dist/types/Request/UserChangePasswordRequest'
 import { ROUTES } from '@licklist/core/dist/Config'
 import { ChangePasswordFormComponent } from './ChangePasswordFormComponent'
@@ -16,7 +16,6 @@ import { LoaderIndicator } from '../../static/loader/LoaderIndicator'
 function ChangePasswordComponent() {
   const { t } = useTranslation(['Notification', 'User', 'App'])
   const request = useContext(RequestContext)
-  const notification = useNotification()
   const { search } = useLocation()
   const email = new URLSearchParams(search).get('email')
   const token = new URLSearchParams(search).get('token')
@@ -27,7 +26,7 @@ function ChangePasswordComponent() {
   const userApiService = useUserApi(request)
 
   const handleError = (error: ApiServiceError<{ message: string }>) => {
-    notification.danger({
+    showAlert({ type: 'error',
       title: t('App:error'),
       message: error.response?.data?.message,
     })
@@ -45,7 +44,7 @@ function ChangePasswordComponent() {
       return
     }
 
-    notification.success({
+    showAlert({ type: 'success',
       title: 'Success',
       message: t('Notification:passwordChangedSuccessfully'),
     })

package/src/auth/Layout/AuthNavComponent.tsx

@@ -7,15 +7,11 @@ function AuthNavComponent() {
 
   return (
     <>
-      {/* TODO fix issue react router types
-        @ts-expect-error */}
       <Link to='/login'>
         <StyledButton size='sm' className='rounded-pill mr-2'>
           {t('login')}
         </StyledButton>
       </Link>
-      {/* TODO fix issue react router types
-        @ts-expect-error */}
       <Link to='/register'>
         <StyledButton
           size='sm'

package/src/auth/Layout/Layout.stories.tsx

@@ -1,5 +1,5 @@
 import { IUser } from '@licklist/plugins/dist/types/context/user/IUser'
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import { AuthNavComponent } from './AuthNavComponent'
 import { UserNavComponent, UserNavComponentProps } from './UserNavComponent'
 import { UserNavDropDown as UserNavDropDownComponent } from './UserNavDropDown'

package/src/auth/Layout/UserNavDropDown.tsx

@@ -11,7 +11,7 @@ function UserNavDropDown() {
   const onLogoutHandler = () => {
     user.logout()
 
-    navigate('/')
+    navigate('/login')
   }
 
   return (

package/src/auth/Login/Login.stories.tsx

@@ -1,6 +1,4 @@
-import { Meta, Story } from '@storybook/react'
-import { boolean } from '@storybook/addon-knobs'
-import { Router } from '../Router'
+import { Meta, StoryObj } from '@storybook/react-vite'
 import { LoginComponent } from './LoginComponent'
 import {
   LoginFormComponent,
@@ -9,25 +7,26 @@ import {
 
 export default {
   title: 'Auth/Login',
-} as Meta
+  component: LoginComponent,
+  argTypes: {
+    hideSignUpLink: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    showSocialLinks: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+  },
+} as Meta<typeof LoginComponent>
 
-export const Login: Story<{}> = (args) => {
-  const hideSignUpLink = boolean('hideSignUpLink', false)
-  const showSocialLinks = boolean('showSocialLinks', false)
-
-  return (
-    <LoginComponent
-      {...args}
-      hideSignUpLink={hideSignUpLink}
-      showSocialLinks={showSocialLinks}
-    />
-  )
+export const Login: StoryObj<typeof LoginComponent> = {
+  args: {
+    hideSignUpLink: false,
+    showSocialLinks: false,
+  },
 }
 
-export const LoginForm: Story<LoginFormComponentProps> = (args) => (
-  <>
-    <Router>
-      <LoginFormComponent {...args} />
-    </Router>
-  </>
-)
+export const LoginForm: StoryObj<LoginFormComponentProps> = {
+  render: (args) => <LoginFormComponent {...args} />,
+}