@graphcommerce/magento-customer 10.0.1-canary.0 → 10.0.1-canary.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 10.0.1-canary.1
+
+### Patch Changes
+
+- [#2571](https://github.com/graphcommerce-org/graphcommerce/pull/2571) [`78a2a8a`](https://github.com/graphcommerce-org/graphcommerce/commit/78a2a8a919346e1f9bccddf7e52682f4adb9a4e0) - Solve issue where the @client fields could not be resolved correctly. ([@paales](https://github.com/paales))
+
+- [#2571](https://github.com/graphcommerce-org/graphcommerce/pull/2571) [`0146abe`](https://github.com/graphcommerce-org/graphcommerce/commit/0146abe0d8362a09b48af42db12f8a0e7670ff8d) - Created a new GuestOrCustomerMask to show information based on their loggedIn state respecting the masking of private content. ([@paales](https://github.com/paales))
+
 ## 10.0.1-canary.0
 
 ### Patch Changes

package/components/GuestOrCustomerMask/GuestOrCustomerMask.tsx

@@ -0,0 +1,44 @@
+import { usePrivateQueryMask } from '@graphcommerce/graphql'
+import { cssFlag, cssNotFlag } from '@graphcommerce/next-ui'
+import { Box } from '@mui/material'
+import { useCustomerSession } from '../../hooks/useCustomerSession'
+
+export type CustomerGuestMaskProps = {
+  /** Allowed to pass null */
+  loggedOut: React.ReactNode
+  /** Allowed to pass null */
+  loggedIn: React.ReactNode
+  /** Allowed to pass null */
+  skeleton: React.ReactNode
+}
+
+export function GuestOrCustomerMask(props: CustomerGuestMaskProps) {
+  const { loggedOut: loggedOutContent, loggedIn: loggedInContent, skeleton } = props
+  const { mask } = usePrivateQueryMask()
+  const { loggedIn } = useCustomerSession()
+
+  return (
+    <>
+      {mask && loggedOutContent && (
+        <Box
+          sx={{
+            display: 'contents',
+            '&:empty': { display: 'none' },
+            [cssFlag('private-query')]: { display: 'none' },
+          }}
+        >
+          {loggedOutContent}
+        </Box>
+      )}
+      <Box
+        sx={{
+          display: 'contents',
+          '&:empty': { display: 'none' },
+          [cssNotFlag('private-query')]: { display: 'none' },
+        }}
+      >
+        {mask ? skeleton : loggedIn ? loggedInContent : loggedOutContent}
+      </Box>
+    </>
+  )
+}

package/components/index.ts

@@ -28,6 +28,7 @@ export * from './DeleteCustomerAddressForm/DeleteCustomerAddressForm'
 export * from './EditAddressForm/EditAddressForm'
 export * from './ForgotPasswordForm/ForgotPassword.gql'
 export * from './ForgotPasswordForm/ForgotPasswordForm'
+export * from './GuestOrCustomerMask/GuestOrCustomerMask'
 export * from './GuestOrderOverview/GuestOrderOverviewForm'
 export * from './Invoice'
 export * from './NameFields/NameFields'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.1-canary.0",
+  "version": "10.0.1-canary.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -21,20 +21,20 @@
     "./plugins/magentoCustomerPrivateQueryContext": "./plugins/magentoCustomerPrivateQueryContext.ts"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.1-canary.0",
-    "@graphcommerce/eslint-config-pwa": "^10.0.1-canary.0",
-    "@graphcommerce/framer-next-pages": "^10.0.1-canary.0",
-    "@graphcommerce/framer-utils": "^10.0.1-canary.0",
-    "@graphcommerce/graphql": "^10.0.1-canary.0",
-    "@graphcommerce/graphql-mesh": "^10.0.1-canary.0",
-    "@graphcommerce/image": "^10.0.1-canary.0",
-    "@graphcommerce/magento-graphql": "^10.0.1-canary.0",
-    "@graphcommerce/magento-store": "^10.0.1-canary.0",
-    "@graphcommerce/next-config": "^10.0.1-canary.0",
-    "@graphcommerce/next-ui": "^10.0.1-canary.0",
-    "@graphcommerce/prettier-config-pwa": "^10.0.1-canary.0",
-    "@graphcommerce/react-hook-form": "^10.0.1-canary.0",
-    "@graphcommerce/typescript-config-pwa": "^10.0.1-canary.0",
+    "@graphcommerce/ecommerce-ui": "^10.0.1-canary.1",
+    "@graphcommerce/eslint-config-pwa": "^10.0.1-canary.1",
+    "@graphcommerce/framer-next-pages": "^10.0.1-canary.1",
+    "@graphcommerce/framer-utils": "^10.0.1-canary.1",
+    "@graphcommerce/graphql": "^10.0.1-canary.1",
+    "@graphcommerce/graphql-mesh": "^10.0.1-canary.1",
+    "@graphcommerce/image": "^10.0.1-canary.1",
+    "@graphcommerce/magento-graphql": "^10.0.1-canary.1",
+    "@graphcommerce/magento-store": "^10.0.1-canary.1",
+    "@graphcommerce/next-config": "^10.0.1-canary.1",
+    "@graphcommerce/next-ui": "^10.0.1-canary.1",
+    "@graphcommerce/prettier-config-pwa": "^10.0.1-canary.1",
+    "@graphcommerce/react-hook-form": "^10.0.1-canary.1",
+    "@graphcommerce/typescript-config-pwa": "^10.0.1-canary.1",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",

package/typePolicies.ts

@@ -37,6 +37,12 @@ const generateCustomerToken: FieldPolicy<Mutation['generateCustomerToken']> = {
 }
 
 export const customerTypePolicies: StrictTypedTypePolicies = {
+  Query: {
+    fields: {
+      // https://github.com/apollographql/apollo-client/issues/12930
+      customerToken: { merge: (existing, incoming) => incoming ?? existing },
+    },
+  },
   Mutation: { fields: { generateCustomerToken } },
 }