Merged in main (pull request #35)

Sprint 3 Release

* feat: 🎸 install kendo treeview

* Merged feat/AOT-25-create-calendar-page into main
* Merge branch 'main' of bitbucket.org:aot_code/aot_frontend into feat/AOT-122-create-clients-page

* fix: 🐛 KendoUI spits error on TabStrip component

A known issue here: telerik/kendo-react#723.
Workaround was to disable animation as suggested by simonssspirit

* feat: 🎸 updated landing page

* fix: 🐛 street_1 missing

* fix: 🐛 error type needs to be explicit

* fix: 🐛 jest-fetch-mock to mock fetch()

* Merged in feat/AOT-79-landing-page-style-update (pull request #34)

Feat/AOT-79 landing page style update
* chore: 🤖 resolve conflicts from UAT

components/Buttons/LoginButton.tsx

@@ -13,7 +13,9 @@ function LoginButton({ className = '' }: withClass) {
                     'inline-block btn-navbar-login'
                 )
             }
-        />
+        >
+            asdasd
+        </LoginModalOpener>
     )
 }
 

components/Buttons/SignupButton.tsx

@@ -13,7 +13,9 @@ function SignupButton({ className = '' }: withClass) {
                     'inline-block btn-navbar-login'
                 )
             }
-        />
+        >
+            asdasd
+        </SignupModalOpener>
     )
 }
 

components/Modals/Login/index.test.tsx

@@ -4,10 +4,12 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import LoginModal from '.'
 
 describe('LoginModal', () => {
-    render(<SkyAuthProvider>
-        <LoginButton />
-        <LoginModal />
-    </SkyAuthProvider>)
+    render(
+        <SkyAuthProvider>
+            <LoginButton />
+            <LoginModal />
+        </SkyAuthProvider>
+    )
     it('should render a login button that would open modal', async () => {
         const btn = screen.getByText('Login')
         expect(btn).toBeDefined()
@@ -16,4 +18,4 @@ describe('LoginModal', () => {
         const items = await screen.findAllByText('Forgot Password?')
         expect(items).toHaveLength(1)
     })
-})
+})

components/Modals/ModalFactory.tsx

@@ -1,13 +1,18 @@
-import { Context } from 'react'
+import { Context, ReactNode } from 'react'
 import { XIcon } from '@heroicons/react/solid'
 import { action } from 'components/Buttons/ButtonFactory'
 import { createWrapper } from 'components/LogicalWrapperFactory'
 import { ModalHook } from './types'
+import { JSXProvider } from 'components/types'
+
+type Props = {
+    children: ReactNode
+}
 
 export function createModal<T extends object>(
     context: Context<T>,
     name: keyof T,
-    opener_label: string
+    opener_label: string | JSXProvider<Props>
 ) {
     return {
         Visible: createWrapper(

components/Modals/ModalWrapper.tsx

@@ -2,11 +2,9 @@ import { Wrapper } from 'components/types'
 
 export function ModalWrapper({ children }: Wrapper) {
     return (
-        <div className="fixed inset-0 backdrop-filter backdrop-blur-sm flex items-center justify-center z-50">
+        <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
             <div className="container m-auto py-4 sm:py-20">
-                <div className="shadow-xl overflow-hidden sm:rounded-md w-11/12 sm:w-2/3 lg:w-1/2 xl:w-1/3 m-auto relative">
-                    <div className="bg-white pb-10 pt-6">{children}</div>
-                </div>
+                <div className="pb-10 pt-6">{children}</div>
             </div>
         </div>
     )

components/Modals/types.ts

@@ -1,5 +1,12 @@
+import { CognitoErrorTypes } from 'services/CognitoErrorTypes'
+
 export interface ModalHook {
     is_open: boolean
     open(): void
     close(): void
 }
+
+export type SubmitError = {
+    name: CognitoErrorTypes
+    message: string
+}

components/Navbar/index.tsx

@@ -88,13 +88,8 @@ export default function Navbar({ current, nav_labels }: Props) {
                                             </div>
                                             <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                                                 <div className="flex-shrink-0 flex items-center">
-                                                    <div className="hidden lg:block h-6 w-auto">
-                                                        <img
-                                                            src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
-                                                            alt="Workflow"
-                                                            height="24"
-                                                            width="24"
-                                                        />
+                                                    <div className="hidden lg:block h-10 w-auto">
+                                                        <span className="logo-icon navbar-logo" />
                                                     </div>
                                                     <div className="block lg:hidden h-8 w-auto">
                                                         <img

components/types.ts

@@ -3,6 +3,7 @@ export type JSXProvider<Props> = (props: Props) => JSX.Element
 
 export interface Wrapper {
     children: string | JSX.Element | JSX.Element[]
+    actions?: JSX.Element | JSX.Element[]
 }
 
 export interface SVGProps {

context/AuthContext.tsx

@@ -1,13 +1,14 @@
+import { createContext, useContext, useState, ReactNode, useEffect } from 'react'
 import { AuthenticationResultType, InitiateAuthCommandOutput, SignUpCommandOutput } from '@aws-sdk/client-cognito-identity-provider'
 import { createWrapper } from 'components/LogicalWrapperFactory'
 import useModal from 'components/Modals/useModal'
-import { createContext, useContext, useState, ReactNode, useEffect } from 'react'
 import forgotPassword, { confirmForgotPassword } from 'services/forgot-password'
 import login from 'services/login'
 import logout from 'services/logout'
 import profile from 'services/profile'
 import signUp from 'services/UserPool'
 import { AuthContextType, SkyUser } from './types'
+import { FetchMethods, useFetch } from 'utils/fetch-helper'
 
 export const AuthContext = createContext<AuthContextType>({} as AuthContextType)
 
@@ -20,13 +21,26 @@ type Props= {
 }
 
 export const Authenticated = createWrapper(AuthContext, ctx => !!ctx.user?.uuid)
+export const Activated = createWrapper(AuthContext, ctx => !!ctx.user?.phone)
 export const NotAuthenticated = createWrapper(AuthContext, ctx => !ctx.user?.uuid)
 
 export function SkyAuthProvider({ children }: Props) {
     const [user, setUser] = useState<SkyUser>({} as unknown as SkyUser)
-    const [is_fetching, setFetching] = useState(true)
+    const [is_initialized, setInit] = useState(true)
+    const {
+        is_loading,
+        data,
+        status,
+        doFetch,
+     } = useFetch(
+        '/v1/tenants',
+        FetchMethods.POST,
+        true,
+        true,
+    )
     const LoginModal = useModal()
     const SignupModal = useModal()
+    const CreateClientModal = useModal()
 
     const value = {
         user,
@@ -45,7 +59,11 @@ export function SkyAuthProvider({ children }: Props) {
                 )}`
                 document.cookie = `refresh_token=${RefreshToken}; path=/`
                 document.cookie = `id_token=${IdToken}; path=/`
-                setFetching(true)
+                setInit(true)
+
+                const t = await doFetch({
+                    id: 'asd'
+                }, undefined)
             }
             return AuthenticationResult || false
         },
@@ -67,15 +85,13 @@ export function SkyAuthProvider({ children }: Props) {
             const {
                 UserSub,                
             }: SignUpCommandOutput = await signUp({ email, password, given_name, family_name })
-            console.log(UserSub)
 
             if (UserSub) {
-                setFetching(true)
-            } else {
-                console.log(UserSub)
+                setInit(true)
             }
             return UserSub || false
         },
+        CreateClientModal,
         LoginModal,
         SignupModal,
     }
@@ -93,19 +109,23 @@ export function SkyAuthProvider({ children }: Props) {
         }
 
 
-        if (is_fetching && !user?.uuid) {
-            getProfile()
+        if (is_initialized) {
+            if (!user?.uuid) {
+                getProfile()
+            }
         }
 
         if (user?.uuid) {
             LoginModal.close()
             SignupModal.close()
         }
 
-        setFetching(false)
-    }, [LoginModal, SignupModal, user, is_fetching])
+        setInit(false)
+    }, [LoginModal, SignupModal, CreateClientModal, user, is_initialized])
     return (
-        <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+        <AuthContext.Provider value={value}>
+            {children}
+        </AuthContext.Provider>
     )
 }
 

context/types.ts

@@ -12,16 +12,32 @@ export interface SkyUser {
     last_name: string
     uuid: string
     email?: string
+    city?: string
+    country?: string
+    date_of_birth?: string
+    gender?: string
+    phone?: string
+    state?: string
+    street_1?: string
+    street_2?: string
+    zip?: string
 }
 
 export type AuthContextType = {
     user?: SkyUser
     LoginModal: ModalHook
     SignupModal: ModalHook
+    CreateClientModal: ModalHook
     confirmForgotPassword(email: string, new_password: string, code: string): Promise<ConfirmForgotPasswordCommandOutput>
     forgotPassword(email: string): Promise<void>
     login(email: string, password: string): Promise<AuthenticationResultType | boolean>
     signup(email: string, password: string, first_name: string, last_name: string): Promise<string | boolean>
     logout(): Promise<void>
     profile(): Promise<UserModel | boolean>
 }
+
+declare global {
+    interface Window { Chargebee: any }
+}
+
+window.Chargebee = window.Chargebee || {}

jest.setup.ts

@@ -2,5 +2,7 @@ import { configure } from 'enzyme'
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
 const mockEnvConfig = {}
 
+require('jest-fetch-mock').enableMocks()
+
 jest.mock('next/config', () => () => ({ publicRuntimeConfig: mockEnvConfig }))
 configure({ adapter: new Adapter() })

next.config.js

@@ -5,17 +5,15 @@ module.exports = {
   images: {
     domains: ['images.unsplash.com', 'tailwindui.com']
   },
-  publicRuntimeConfig: {
-    COGNITO_CLIENT_ID: process.env.COGNITO_CLIENT_ID,
-    COGNITO_REGION: process.env.COGNITO_REGION,
-  },
+  publicRuntimeConfig: process.env,
   exportPathMap: async function (
     defaultPathMap,
     { dev, dir, outDir, distDir, buildId }
   ) {
     return {
       '/': { page: '/' },
       '/dashboard': { page: '/dashboard' },
+      '/dashboard/settings': { page: '/dashboard/settings' },
     }
   },
 }