From af19798e4797081110cb7acfaa354744a3d00560 Mon Sep 17 00:00:00 2001 From: Tiago Gimenes Date: Tue, 6 Jul 2021 11:26:38 -0300 Subject: [PATCH 1/2] export apis --- packages/gatsby-theme-store/src/index.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/gatsby-theme-store/src/index.ts b/packages/gatsby-theme-store/src/index.ts index 3e94798aff..0eae493138 100644 --- a/packages/gatsby-theme-store/src/index.ts +++ b/packages/gatsby-theme-store/src/index.ts @@ -95,3 +95,9 @@ export type { Props as ProductSEOProps } from './components/Seo/product/ProductS export { useProductPixel as useProductPixelEffect } from './sdk/product/useProductPixel' export type { Options as ProductPixelOptions } from './sdk/product/useProductPixel' +export { default as RenderExtensionLoader } from './sdk/RenderExtensionLoader' + +export { AUTH_PROVIDERS } from './components/Auth/Providers' +export { useProviders } from './sdk/auth/useProviders' +export { useOnLoginSuccessful } from './sdk/auth/useOnLoginSuccessful' +export type { ProvidersResponse } from './sdk/auth/Service/getProviders' From ca94fd95801101ed71ebe51393f3d93b4376410c Mon Sep 17 00:00:00 2001 From: Tiago Gimenes Date: Tue, 6 Jul 2021 15:46:23 -0300 Subject: [PATCH 2/2] remove pages --- .../gatsby-theme-store/src/pages/account.tsx | 105 ------------ .../gatsby-theme-store/src/pages/login.tsx | 153 ------------------ 2 files changed, 258 deletions(-) delete mode 100644 packages/gatsby-theme-store/src/pages/account.tsx delete mode 100644 packages/gatsby-theme-store/src/pages/login.tsx diff --git a/packages/gatsby-theme-store/src/pages/account.tsx b/packages/gatsby-theme-store/src/pages/account.tsx deleted file mode 100644 index 0513743c9d..0000000000 --- a/packages/gatsby-theme-store/src/pages/account.tsx +++ /dev/null @@ -1,105 +0,0 @@ -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 Layout from '../components/Layout' -import RenderExtensionLoader from '../sdk/RenderExtensionLoader' -import { useProfile } from '../sdk/session/useProfile' - -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: string) => { - 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.__RENDER_7_RUNTIME__) { - loader.render(MY_ACCOUNT_EXTENSION_NAME, myAccountDiv, undefined) - - return - } - - await loader.load() - - window.__RUNTIME__ = loader.render( - MY_ACCOUNT_EXTENSION_NAME, - myAccountDiv, - undefined - ) -} - -const Loading: FC = () => ( -
- -
-) - -const MyAccount: FC = () => { - 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 ( - <> -
- {loading && } - - ) -} - -const Page: FC = () => ( - <> - - - - - }> - - - - - -) - -export default Page diff --git a/packages/gatsby-theme-store/src/pages/login.tsx b/packages/gatsby-theme-store/src/pages/login.tsx deleted file mode 100644 index 4bed7586ec..0000000000 --- a/packages/gatsby-theme-store/src/pages/login.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import { useIntl } from '@vtex/gatsby-plugin-i18n' -import { Box, Center, Flex, Spinner, SuspenseSSR } from '@vtex/store-ui' -import { GatsbySeo } from 'gatsby-plugin-next-seo' -import React, { useEffect, useState } from 'react' -import type { FC } from 'react' -import type { PageProps } from 'gatsby' - -import { AUTH_PROVIDERS } from '../components/Auth/Providers' -import Layout from '../components/Layout' -import { useOnLoginSuccessful } from '../sdk/auth/useOnLoginSuccessful' -import { useProviders } from '../sdk/auth/useProviders' -import { useProfile } from '../sdk/session/useProfile' -import type { ProvidersResponse } from '../sdk/auth/Service/getProviders' - -type Props = PageProps -type DefaultProvidersComponents = typeof AUTH_PROVIDERS -type ProviderName = keyof typeof AUTH_PROVIDERS - -const filterProviders = ( - providersComponents: DefaultProvidersComponents, - storeProviders?: ProvidersResponse -) => { - if (!storeProviders) { - return [{ name: '', ...providersComponents.NoState }] - } - - const hasLogin = storeProviders.passwordAuthentication - const hasAccessCode = storeProviders.accessKeyAuthentication - const hasSingleProvider = storeProviders.oAuthProviders.length === 1 - - if (!hasLogin && !hasAccessCode && hasSingleProvider) { - return [ - { - name: storeProviders.oAuthProviders[0].providerName, - ...providersComponents.CustomProvider, - }, - ] - } - - const providers = [] - - if (hasLogin) { - providers.push({ - name: 'EmailAndPassword', - ...providersComponents.EmailAndPassword, - }) - } - - if (hasAccessCode) { - providers.push({ - name: 'EmailVerification', - ...providersComponents.EmailVerification, - }) - } - - storeProviders.oAuthProviders.forEach(({ providerName }) => { - const provider = providersComponents[providerName as ProviderName] - - if (provider) { - providers.push({ name: providerName, ...provider }) - } - }) - - return providers -} - -const Page: FC = () => { - const onLoginSuccessful = useOnLoginSuccessful() - const { formatMessage } = useIntl() - const { data: storeProviders } = useProviders() - const profile = useProfile({ stale: false }) - - const filteredProviders = filterProviders(AUTH_PROVIDERS, storeProviders) - - const [focusProvider, setFocusProvider] = useState(0) - - const { Component } = filteredProviders[focusProvider] - - const isAuthenticated = profile?.isAuthenticated?.value === 'true' - - useEffect(() => { - if (isAuthenticated) { - onLoginSuccessful('/account') - } - }, [isAuthenticated, onLoginSuccessful]) - - if (isAuthenticated) { - return ( -
- -
- ) - } - - return ( - - - - {formatMessage({ - id: 'login.page.title', - })} - - - {filteredProviders.map(({ Button: ButtonComponent }, i) => - i !== focusProvider ? ( - setFocusProvider(i)} - /> - ) : null - )} - - - - - - - } - > - - - - - ) -} - -// We split into two components to avoid re-rendering the when -// selecting Auth method -const PageWithLayout: FC = () => ( - <> - - - - - - - } - > - - - - -) - -export default PageWithLayout