From 57131cfcc43695cc3e22f28912feb2a8439620a7 Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Fri, 1 Mar 2024 13:59:58 +0100 Subject: [PATCH 1/4] Created a cssFlags functionality to allow for conditional rendering based on stored flags in the localStorage --- .changeset/honest-dingos-think.md | 5 ++ examples/magento-graphcms/pages/_document.tsx | 3 +- .../components/SignOutForm/signOut.ts | 2 + .../magento-customer/hooks/useSignInForm.ts | 5 ++ packages/next-ui/index.ts | 1 + packages/next-ui/utils/cssFlags.tsx | 76 +++++++++++++++++++ 6 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 .changeset/honest-dingos-think.md create mode 100644 packages/next-ui/utils/cssFlags.tsx diff --git a/.changeset/honest-dingos-think.md b/.changeset/honest-dingos-think.md new file mode 100644 index 0000000000..1305342ffa --- /dev/null +++ b/.changeset/honest-dingos-think.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/next-ui': patch +--- + +Created a cssFlags functionality to allow for conditional rendering based on stored flags in the localStorage diff --git a/examples/magento-graphcms/pages/_document.tsx b/examples/magento-graphcms/pages/_document.tsx index 26a35dab3f..4dcb8893e7 100644 --- a/examples/magento-graphcms/pages/_document.tsx +++ b/examples/magento-graphcms/pages/_document.tsx @@ -1,7 +1,7 @@ import { normalizeLocale } from '@graphcommerce/lingui-next' import { withLingui } from '@graphcommerce/lingui-next/document/withLingui' import type { LinguiDocumentProps } from '@graphcommerce/lingui-next/document/withLingui' -import { EmotionCacheProps, withEmotionCache } from '@graphcommerce/next-ui' +import { EmotionCacheProps, getCssFlagsInitScript, withEmotionCache } from '@graphcommerce/next-ui' import NextDocument, { Html, Head, Main, NextScript } from 'next/document' class Document extends NextDocument { @@ -9,6 +9,7 @@ class Document extends NextDocument { return ( + {getCssFlagsInitScript()} {/* Inject MUI styles first to match with the prepend: true configuration. */} {this.props.emotionStyleTags} diff --git a/packages/magento-customer/components/SignOutForm/signOut.ts b/packages/magento-customer/components/SignOutForm/signOut.ts index 8557aaac17..27da5ca095 100644 --- a/packages/magento-customer/components/SignOutForm/signOut.ts +++ b/packages/magento-customer/components/SignOutForm/signOut.ts @@ -1,6 +1,8 @@ import { ApolloClient } from '@graphcommerce/graphql' +import { removeCssFlag } from '@graphcommerce/next-ui' export function signOut(client: ApolloClient) { + removeCssFlag('signed-in') client.cache.evict({ fieldName: 'currentCartId' }) client.cache.evict({ fieldName: 'cart' }) client.cache.evict({ fieldName: 'customerToken' }) diff --git a/packages/magento-customer/hooks/useSignInForm.ts b/packages/magento-customer/hooks/useSignInForm.ts index be0f09f54d..6eefd62347 100644 --- a/packages/magento-customer/hooks/useSignInForm.ts +++ b/packages/magento-customer/hooks/useSignInForm.ts @@ -1,4 +1,5 @@ import { useApolloClient } from '@graphcommerce/graphql' +import { setCssFlag } from '@graphcommerce/next-ui' import { UseFormGraphQlOptions, useFormGqlMutation } from '@graphcommerce/react-hook-form' import { SignInDocument, @@ -38,6 +39,10 @@ export function useSignInForm({ email, ...options }: UseSignInFormProps) { ? options.onBeforeSubmit({ ...values, email }) : { ...values, email } }, + onComplete: (...args) => { + setCssFlag('signed-in', true) + return options.onComplete?.(...args) + }, }, { errorPolicy: 'all' }, ) diff --git a/packages/next-ui/index.ts b/packages/next-ui/index.ts index 61b89c5c87..7276aaf306 100644 --- a/packages/next-ui/index.ts +++ b/packages/next-ui/index.ts @@ -59,3 +59,4 @@ export * from './UspList/UspListItem' export * from './hooks' export * from './icons' export * from './utils/cookie' +export * from './utils/cssFlags' diff --git a/packages/next-ui/utils/cssFlags.tsx b/packages/next-ui/utils/cssFlags.tsx new file mode 100644 index 0000000000..a91332c62f --- /dev/null +++ b/packages/next-ui/utils/cssFlags.tsx @@ -0,0 +1,76 @@ +export const FLAGS_STORAGE_KEY = 'gc-flags' +export const FLAG_PREFIX = 'data' + +export function getCssFlagsInitScript() { + return ( +