From a1a47c25dad0188de3897fa9b3680e776d8a851e Mon Sep 17 00:00:00 2001 From: goncy Date: Fri, 17 Sep 2021 15:40:48 -0300 Subject: [PATCH] Add provider logos --- components/common/Navbar/Navbar.module.css | 2 +- components/ui/Logo/Logo.tsx | 49 +++++++++++++--------- framework/bigcommerce/assets/logo.svg | 1 + framework/bigcommerce/provider.ts | 2 + framework/commerce/index.tsx | 8 ++-- framework/local/assets/logo.svg | 1 + framework/local/provider.ts | 3 ++ framework/saleor/assets/logo.svg | 1 + framework/saleor/provider.ts | 2 + framework/shopify/assets/logo.svg | 1 + framework/shopify/provider.ts | 2 + framework/swell/assets/logo.svg | 1 + framework/swell/provider.ts | 2 + framework/vendure/assets/logo.svg | 1 + framework/vendure/provider.ts | 3 ++ 15 files changed, 56 insertions(+), 23 deletions(-) create mode 100644 framework/bigcommerce/assets/logo.svg create mode 100644 framework/local/assets/logo.svg create mode 100644 framework/saleor/assets/logo.svg create mode 100644 framework/shopify/assets/logo.svg create mode 100644 framework/swell/assets/logo.svg create mode 100644 framework/vendure/assets/logo.svg diff --git a/components/common/Navbar/Navbar.module.css b/components/common/Navbar/Navbar.module.css index faa86d156..9f2478e66 100644 --- a/components/common/Navbar/Navbar.module.css +++ b/components/common/Navbar/Navbar.module.css @@ -26,7 +26,7 @@ } .logo { - @apply cursor-pointer rounded-full border transform duration-100 ease-in-out; + @apply cursor-pointer transform duration-100 ease-in-out flex; &:hover { @apply shadow-md; diff --git a/components/ui/Logo/Logo.tsx b/components/ui/Logo/Logo.tsx index f15bde40a..08d457e74 100644 --- a/components/ui/Logo/Logo.tsx +++ b/components/ui/Logo/Logo.tsx @@ -1,21 +1,32 @@ -const Logo = ({ className = '', ...props }) => ( - - - - -) +import Image from 'next/image' +import { useCommerce } from '@commerce' + +const Logo = ({ className = '', ...props }) => { + const { logo } = useCommerce() + + if (logo) { + return Logo + } + + return ( + + + + + ) +} export default Logo diff --git a/framework/bigcommerce/assets/logo.svg b/framework/bigcommerce/assets/logo.svg new file mode 100644 index 000000000..56270cd58 --- /dev/null +++ b/framework/bigcommerce/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/framework/bigcommerce/provider.ts b/framework/bigcommerce/provider.ts index 196855438..07e440b2a 100644 --- a/framework/bigcommerce/provider.ts +++ b/framework/bigcommerce/provider.ts @@ -15,8 +15,10 @@ import { handler as useLogout } from './auth/use-logout' import { handler as useSignup } from './auth/use-signup' import fetcher from './fetcher' +import logo from './assets/logo.svg' export const bigcommerceProvider = { + logo, locale: 'en-us', cartCookie: 'bc_cartId', fetcher, diff --git a/framework/commerce/index.tsx b/framework/commerce/index.tsx index dd740809f..7c63931cb 100644 --- a/framework/commerce/index.tsx +++ b/framework/commerce/index.tsx @@ -23,6 +23,7 @@ const Commerce = createContext | {}>({}) export type Provider = CommerceConfig & { fetcher: Fetcher + logo?: StaticImageData cart?: { useCart?: SWRHook useAddItem?: MutationHook @@ -50,6 +51,7 @@ export type Provider = CommerceConfig & { export type CommerceConfig = { locale: string cartCookie: string + logo?: StaticImageData } export type CommerceContextValue

= { @@ -79,10 +81,10 @@ 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, logo } = providerRef.current const cfg = useMemo( - () => ({ providerRef, fetcherRef, locale, cartCookie }), - [locale, cartCookie] + () => ({ providerRef, fetcherRef, locale, cartCookie, logo }), + [locale, cartCookie, logo] ) return {children} diff --git a/framework/local/assets/logo.svg b/framework/local/assets/logo.svg new file mode 100644 index 000000000..edebd4fb2 --- /dev/null +++ b/framework/local/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/framework/local/provider.ts b/framework/local/provider.ts index 53dc7f574..22b770b38 100644 --- a/framework/local/provider.ts +++ b/framework/local/provider.ts @@ -9,7 +9,10 @@ import { handler as useLogin } from './auth/use-login' import { handler as useLogout } from './auth/use-logout' import { handler as useSignup } from './auth/use-signup' +import logo from './assets/logo.svg' + export const localProvider = { + logo, locale: 'en-us', cartCookie: 'session', fetcher: fetcher, diff --git a/framework/saleor/assets/logo.svg b/framework/saleor/assets/logo.svg new file mode 100644 index 000000000..e79a4ab17 --- /dev/null +++ b/framework/saleor/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/framework/saleor/provider.ts b/framework/saleor/provider.ts index becf2998f..8fc9e8697 100644 --- a/framework/saleor/provider.ts +++ b/framework/saleor/provider.ts @@ -12,8 +12,10 @@ import { handler as useLogout } from './auth/use-logout' import { handler as useSignup } from './auth/use-signup' import fetcher from './fetcher' +import logo from './assets/logo.svg' export const saleorProvider = { + logo, locale: 'en-us', cartCookie: CHECKOUT_ID_COOKIE, fetcher, diff --git a/framework/shopify/assets/logo.svg b/framework/shopify/assets/logo.svg new file mode 100644 index 000000000..0ed0cb23e --- /dev/null +++ b/framework/shopify/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/framework/shopify/provider.ts b/framework/shopify/provider.ts index 00db5c1d3..104af8103 100644 --- a/framework/shopify/provider.ts +++ b/framework/shopify/provider.ts @@ -13,8 +13,10 @@ import { handler as useLogout } from './auth/use-logout' import { handler as useSignup } from './auth/use-signup' import fetcher from './fetcher' +import logo from './assets/logo.svg' export const shopifyProvider = { + logo, locale: 'en-us', cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE, fetcher, diff --git a/framework/swell/assets/logo.svg b/framework/swell/assets/logo.svg new file mode 100644 index 000000000..9c7712e8c --- /dev/null +++ b/framework/swell/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/framework/swell/provider.ts b/framework/swell/provider.ts index 062f1c32c..3bc2423d3 100644 --- a/framework/swell/provider.ts +++ b/framework/swell/provider.ts @@ -15,8 +15,10 @@ import { handler as useSignup } from './auth/use-signup' import fetcher from './fetcher' import swell from './swell' +import logo from './assets/logo.svg' export const swellProvider: Provider & { swell: any } = { + logo, locale: 'en-us', cartCookie: SWELL_CHECKOUT_ID_COOKIE, swell, diff --git a/framework/vendure/assets/logo.svg b/framework/vendure/assets/logo.svg new file mode 100644 index 000000000..2f69ce005 --- /dev/null +++ b/framework/vendure/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/framework/vendure/provider.ts b/framework/vendure/provider.ts index 73f7dd5b2..fe1f4aba4 100644 --- a/framework/vendure/provider.ts +++ b/framework/vendure/provider.ts @@ -7,9 +7,12 @@ import { handler as useSearch } from './product/use-search' import { handler as useLogin } from './auth/use-login' import { handler as useLogout } from './auth/use-logout' import { handler as useSignup } from './auth/use-signup' + import { fetcher } from './fetcher' +import logo from './assets/logo.svg' export const vendureProvider = { + logo, locale: 'en-us', cartCookie: 'session', fetcher,