From 9479e9bc5b12f4e79da31fdf07d88d0e794a9f45 Mon Sep 17 00:00:00 2001
From: Guillaume Bibeau-Laviolette <g.bibeaulaviolette@gmail.com>
Date: Mon, 13 Jun 2022 14:37:34 -0400
Subject: [PATCH] allow users to add their own theme config and logo

---
 README.md                                | 19 +++++++++++++++
 site/components/auth/ForgotPassword.tsx  |  6 +----
 site/components/auth/LoginView.tsx       |  5 +---
 site/components/auth/SignUpView.tsx      |  5 +---
 site/components/common/Footer/Footer.tsx |  5 +---
 site/components/common/Navbar/Navbar.tsx |  5 +---
 site/components/ui/Logo/Logo.tsx         | 30 ++++++++++++++++++++++--
 site/components/ui/context.tsx           | 15 ++++++++++++
 site/components/ui/index.ts              |  2 +-
 site/config/theme.json                   |  9 +++++++
 10 files changed, 77 insertions(+), 24 deletions(-)
 create mode 100644 site/config/theme.json

diff --git a/README.md b/README.md
index 4a6030c1b..d33205970 100644
--- a/README.md
+++ b/README.md
@@ -98,6 +98,25 @@ For example: Turning `cart` off will disable Cart capabilities.
 - Turn `wishlist` on by setting `wishlist` to `true`.
 - Run the app and the wishlist functionality should be back on.
 
+#### Customizing the theme
+
+You can customize the theme by providing some configuration in `theme.json`
+
+- open `theme.json`
+- You'll see a config file like this:
+
+```json
+{
+  "features": {
+    "logo": false // => switch to true to enable logo
+  },
+  "theme": {
+    "logoSrc": "replace with the path in `public` your logo ex: /assets/logo.svg",
+    "logoAlt": "Replace with your logo alt text"
+  }
+}
+```
+
 ### How to create a new provider
 
 Follow our docs for [Adding a new Commerce Provider](packages/commerce/new-provider.md).
diff --git a/site/components/auth/ForgotPassword.tsx b/site/components/auth/ForgotPassword.tsx
index bc4613a86..dbac371c7 100644
--- a/site/components/auth/ForgotPassword.tsx
+++ b/site/components/auth/ForgotPassword.tsx
@@ -1,15 +1,11 @@
 import { FC, useEffect, useState, useCallback } from 'react'
 import { validate } from 'email-validator'
 import { useUI } from '@components/ui/context'
-import { AcmeLogo, Button, Input } from '@components/ui'
-import { useCommerce } from '@framework'
+import { Logo, Button, Input } from '@components/ui'
 
 interface Props {}
 
 const ForgotPassword: FC<Props> = () => {
-  // @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 3898d27aa..86c59d56d 100644
--- a/site/components/auth/LoginView.tsx
+++ b/site/components/auth/LoginView.tsx
@@ -1,14 +1,11 @@
 import { FC, useEffect, useState, useCallback } from 'react'
-import { AcmeLogo, Button, Input } from '@components/ui'
+import { Logo, 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 02c8924c7..dce0a1b78 100644
--- a/site/components/auth/SignUpView.tsx
+++ b/site/components/auth/SignUpView.tsx
@@ -2,15 +2,12 @@ import { FC, useEffect, useState, useCallback } from 'react'
 import { validate } from 'email-validator'
 import { Info } from '@components/icons'
 import { useUI } from '@components/ui/context'
-import { AcmeLogo, Button, Input } from '@components/ui'
+import { Button, Input, Logo } from '@components/ui'
 import useSignup from '@framework/auth/use-signup'
 
 interface Props {}
 
 const SignUpView: FC<Props> = () => {
-  // @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 204ba8d6f..15a70887e 100644
--- a/site/components/common/Footer/Footer.tsx
+++ b/site/components/common/Footer/Footer.tsx
@@ -5,7 +5,7 @@ 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 { AcmeLogo, Container } from '@components/ui'
+import { Logo, Container } from '@components/ui'
 import { I18nWidget } from '@components/common'
 import s from './Footer.module.css'
 import { useCommerce } from '@framework'
@@ -26,9 +26,6 @@ const links = [
 const Footer: FC<Props> = ({ className, pages }) => {
   const { sitePages } = usePages(pages)
   const rootClassName = cn(s.root, className)
-  // @ts-ignore
-  const { brand = {} } = useCommerce()
-  const { Logo = AcmeLogo } = brand
 
   return (
     <footer className={rootClassName}>
diff --git a/site/components/common/Navbar/Navbar.tsx b/site/components/common/Navbar/Navbar.tsx
index ee8f84b59..a828b03ec 100644
--- a/site/components/common/Navbar/Navbar.tsx
+++ b/site/components/common/Navbar/Navbar.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 import Link from 'next/link'
 import s from './Navbar.module.css'
 import NavbarRoot from './NavbarRoot'
-import { AcmeLogo, Container } from '@components/ui'
+import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
 import { useCommerce } from '@framework'
 
@@ -16,9 +16,6 @@ interface NavbarProps {
 }
 
 const Navbar: FC<NavbarProps> = ({ links }) => {
-  // @ts-ignore
-  const { brand = {} } = useCommerce()
-  const { Logo = AcmeLogo } = brand
   return (
     <NavbarRoot>
       <Container clean className="mx-auto max-w-8xl px-6">
diff --git a/site/components/ui/Logo/Logo.tsx b/site/components/ui/Logo/Logo.tsx
index 872bbac93..91a724a02 100644
--- a/site/components/ui/Logo/Logo.tsx
+++ b/site/components/ui/Logo/Logo.tsx
@@ -1,4 +1,8 @@
-const AcmeLogo = ({ className = '', ...props }) => (
+import { useCommerce } from '@framework'
+import Image from 'next/image'
+import { useUI } from '../context'
+
+const DefaultLogo = ({ className = '', ...props }) => (
   <svg
     width="32"
     height="32"
@@ -18,4 +22,26 @@ const AcmeLogo = ({ className = '', ...props }) => (
   </svg>
 )
 
-export default AcmeLogo
+const Logo = ({ className = '', ...props }) => {
+  const { theme } = useUI()
+  console.log(theme)
+  // @ts-ignore
+  const { brand = {} } = useCommerce()
+  const { Logo = DefaultLogo } = brand
+
+  if (theme.logoSrc && theme.logoAlt) {
+    return (
+      <Image
+        src={theme.logoSrc}
+        alt={theme.logoAlt}
+        {...props}
+        height={32}
+        width={32}
+      />
+    )
+  }
+
+  return <Logo />
+}
+
+export default Logo
diff --git a/site/components/ui/context.tsx b/site/components/ui/context.tsx
index ca2bfd7ed..7b3babec4 100644
--- a/site/components/ui/context.tsx
+++ b/site/components/ui/context.tsx
@@ -1,6 +1,8 @@
 import React, { FC, useCallback, useMemo } from 'react'
 import { ThemeProvider } from 'next-themes'
 
+import { features, theme } from 'config/theme.json'
+
 export interface State {
   displaySidebar: boolean
   displayDropdown: boolean
@@ -17,6 +19,9 @@ const initialState = {
   modalView: 'LOGIN_VIEW',
   sidebarView: 'CART_VIEW',
   userAvatar: '',
+  theme: {
+    ...(features.logo && { logoSrc: theme.logoSrc, logoAlt: theme.logoAlt }),
+  },
 }
 
 type Action =
@@ -198,6 +203,8 @@ export const UIProvider: FC = (props) => {
     [state]
   )
 
+  console.log(value)
+
   return <UIContext.Provider value={value} {...props} />
 }
 
@@ -209,6 +216,14 @@ export const useUI = () => {
   return context
 }
 
+export const useTheme = () => {
+  const context = React.useContext(UIContext)
+  if (context === undefined) {
+    throw new Error(`useTheme must be used within a UIProvider`)
+  }
+  return context.theme
+}
+
 export const ManagedUIContext: FC = ({ children }) => (
   <UIProvider>
     <ThemeProvider>{children}</ThemeProvider>
diff --git a/site/components/ui/index.ts b/site/components/ui/index.ts
index 8088621ff..e4b37affb 100644
--- a/site/components/ui/index.ts
+++ b/site/components/ui/index.ts
@@ -1,5 +1,5 @@
 export { default as Hero } from './Hero'
-export { default as AcmeLogo } from './Logo'
+export { default as Logo } from './Logo'
 export { default as Grid } from './Grid'
 export { default as Button } from './Button'
 export { default as Sidebar } from './Sidebar'
diff --git a/site/config/theme.json b/site/config/theme.json
new file mode 100644
index 000000000..ea8e2682a
--- /dev/null
+++ b/site/config/theme.json
@@ -0,0 +1,9 @@
+{
+  "features": {
+    "logo": false
+  },
+  "theme": {
+    "logoSrc": "replace with the path in `public` your logo ex: /assets/logo.svg",
+    "logoAlt": "Replace with your logo alt text"
+  }
+}