diff --git a/packages/commerce/src/index.tsx b/packages/commerce/src/index.tsx index ce7cc3b3d..b0cc20bb9 100644 --- a/packages/commerce/src/index.tsx +++ b/packages/commerce/src/index.tsx @@ -25,7 +25,7 @@ const Commerce = createContext | {}>({}) export type Provider = CommerceConfig & { fetcher: Fetcher - brand: Brand.Config + brand?: Brand.Config cart?: { useCart?: SWRHook useAddItem?: MutationHook @@ -74,7 +74,8 @@ export type CommerceConfig = { export type CommerceContextValue

= { providerRef: MutableRefObject

fetcherRef: MutableRefObject -} & CommerceConfig +} & CommerceConfig & + Brand.Config export type CommerceProps

= { children?: ReactNode @@ -98,9 +99,9 @@ export function CoreCommerceProvider

({ const fetcherRef = useRef(provider.fetcher) // If the parent re-renders this provider will re-render every // consumer unless we memoize the config - const { locale, cartCookie } = providerRef.current + const { locale, cartCookie, brand = {} } = providerRef.current const cfg = useMemo( - () => ({ providerRef, fetcherRef, locale, cartCookie }), + () => ({ providerRef, fetcherRef, locale, cartCookie, brand }), [locale, cartCookie] ) diff --git a/packages/commerce/src/types/brand.ts b/packages/commerce/src/types/brand.ts index c5e196ee0..e0eafbec8 100644 --- a/packages/commerce/src/types/brand.ts +++ b/packages/commerce/src/types/brand.ts @@ -1,5 +1,5 @@ import type { VFC } from 'react' export type Config = { - Logo: VFC + Logo?: VFC } diff --git a/site/components/auth/ForgotPassword.tsx b/site/components/auth/ForgotPassword.tsx index dbac371c7..bc4613a86 100644 --- a/site/components/auth/ForgotPassword.tsx +++ b/site/components/auth/ForgotPassword.tsx @@ -1,11 +1,15 @@ import { FC, useEffect, useState, useCallback } from 'react' import { validate } from 'email-validator' import { useUI } from '@components/ui/context' -import { Logo, Button, Input } from '@components/ui' +import { AcmeLogo, Button, Input } from '@components/ui' +import { useCommerce } from '@framework' interface Props {} const ForgotPassword: FC = () => { + // @ts-ignore + const { brand = {} } = useCommerce() + const { Logo = AcmeLogo } = brand // Form State const [email, setEmail] = useState('') const [loading, setLoading] = useState(false) diff --git a/site/components/auth/LoginView.tsx b/site/components/auth/LoginView.tsx index 3c8faef7c..3898d27aa 100644 --- a/site/components/auth/LoginView.tsx +++ b/site/components/auth/LoginView.tsx @@ -1,10 +1,14 @@ import { FC, useEffect, useState, useCallback } from 'react' -import { Logo, Button, Input } from '@components/ui' +import { AcmeLogo, Button, Input } from '@components/ui' import useLogin from '@framework/auth/use-login' import { useUI } from '@components/ui/context' import { validate } from 'email-validator' +import { useCommerce } from '@framework' const LoginView: React.FC = () => { + // @ts-ignore + const { brand = {} } = useCommerce() + const { Logo = AcmeLogo } = brand // Form State const [email, setEmail] = useState('') const [password, setPassword] = useState('') diff --git a/site/components/auth/SignUpView.tsx b/site/components/auth/SignUpView.tsx index a85a3bc27..02c8924c7 100644 --- a/site/components/auth/SignUpView.tsx +++ b/site/components/auth/SignUpView.tsx @@ -2,12 +2,15 @@ import { FC, useEffect, useState, useCallback } from 'react' import { validate } from 'email-validator' import { Info } from '@components/icons' import { useUI } from '@components/ui/context' -import { Logo, Button, Input } from '@components/ui' +import { AcmeLogo, Button, Input } from '@components/ui' import useSignup from '@framework/auth/use-signup' interface Props {} const SignUpView: FC = () => { + // @ts-ignore + const { brand = {} } = useCommerce() + const { Logo = AcmeLogo } = brand // Form State const [email, setEmail] = useState('') const [password, setPassword] = useState('') diff --git a/site/components/common/Footer/Footer.tsx b/site/components/common/Footer/Footer.tsx index 18e9b4027..204ba8d6f 100644 --- a/site/components/common/Footer/Footer.tsx +++ b/site/components/common/Footer/Footer.tsx @@ -5,9 +5,10 @@ import { useRouter } from 'next/router' import type { Page } from '@commerce/types/page' import getSlug from '@lib/get-slug' import { Github, Vercel } from '@components/icons' -import { Logo, Container } from '@components/ui' +import { AcmeLogo, Container } from '@components/ui' import { I18nWidget } from '@components/common' import s from './Footer.module.css' +import { useCommerce } from '@framework' interface Props { className?: string @@ -25,6 +26,9 @@ const links = [ const Footer: FC = ({ className, pages }) => { const { sitePages } = usePages(pages) const rootClassName = cn(s.root, className) + // @ts-ignore + const { brand = {} } = useCommerce() + const { Logo = AcmeLogo } = brand return (