import { localizedPath , useIntl } from '@vtex/gatsby-plugin-i18n' ; import { Center , Container , Spinner , SuspenseSSR } from '@vtex/store-ui' ; import { navigate } from 'gatsby' ; import { GatsbySeo } from 'gatsby-plugin-next-seo' ; import React , { useEffect , useState } from 'react' ; import type { FC } from 'react' ; import { useProfile , RenderExtensionLoader } from '@vtex/gatsby-theme-store' ; import Layout from 'src/components/common/Layout' ; const MY_ACCOUNT_PATH = '/account' ; const MY_ACCOUNT_DIV_NAME = 'my-account' ; const MY_ACCOUNT_EXTENSION_NAME = 'my-account-portal' ; const ONE_MIN_IN_MILLI = 60 * 100 ; const render = async ( locale ) => { const loader = new RenderExtensionLoader ( { account : process . env . GATSBY_STORE_ID , workspace : process . env . GATSBY_VTEX_IO_WORKSPACE , verbose : process . env . NODE_ENV !== 'production' , publicEndpoint : undefined , timeout : ONE_MIN_IN_MILLI , path : MY_ACCOUNT_PATH , locale , } ) ; const myAccountDiv = document . getElementById ( MY_ACCOUNT_DIV_NAME ) ; if ( ( window as any ) . __RENDER_7_RUNTIME__ ) { loader . render ( MY_ACCOUNT_EXTENSION_NAME , myAccountDiv , undefined ) ; return ; } await loader . load ( ) ; ( window as any ) . __RUNTIME__ = loader . render ( MY_ACCOUNT_EXTENSION_NAME , myAccountDiv , undefined ) ; } ; const Loading = ( ) => ( < Center height = "750px" > < Spinner /> < /Center>); const MyAccount = ( ) => { const profile = useProfile ( { stale : false } ) ; const isAuthenticated = profile ?. isAuthenticated ?. value === 'true' ; const [ loading , setLoading ] = useState ( true ) ; const { locale , defaultLocale } = useIntl ( ) ; useEffect ( ( ) => { const challengeAndRender = async ( ) => { try { if ( ! isAuthenticated ) { const path = localizedPath ( defaultLocale , locale , '/login' ) ; navigate ( path ) ; return ; } await render ( locale ) ; } catch ( err ) { console . error ( err ) ; } finally { setLoading ( false ) ; } } ; challengeAndRender ( ) ; } , [ defaultLocale , isAuthenticated , locale ] ) ; if ( ! isAuthenticated ) { return null ; } return ( < > < div id = { MY_ACCOUNT_DIV_NAME } / > { loading && < Loading />} < />); } ; const Page = ( ) => ( < > < GatsbySeo noindex nofollow /> < Layout > < Container > < SuspenseSSR fallback = { < Loading />}> < MyAccount / > < /SuspenseSSR> < /Container> < /Layout> < />); export default Page ;