@graphcommerce/magento-customer 3.0.1

package/hooks/CustomerToken.gql.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const CustomerTokenDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CustomerToken"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"customerToken"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"token"}},{"kind":"Field","name":{"kind":"Name","value":"valid"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}}]}}]}}]} as unknown as DocumentNode<CustomerTokenQuery, CustomerTokenQueryVariables>;
+export type CustomerTokenQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type CustomerTokenQuery = { customerToken?: Types.Maybe<{ __typename: 'CustomerToken', token?: Types.Maybe<string>, valid?: Types.Maybe<boolean>, createdAt?: Types.Maybe<string> }> };

package/hooks/CustomerToken.graphql

@@ -0,0 +1,8 @@
+query CustomerToken {
+  customerToken @client {
+    __typename
+    token
+    valid
+    createdAt
+  }
+}

package/hooks/CustomerToken.graphqls

@@ -0,0 +1,8 @@
+extend type Query {
+  customerToken: CustomerToken
+}
+
+extend type CustomerToken {
+  createdAt: String
+  valid: Boolean
+}

package/hooks/IsEmailAvailable.gql.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const IsEmailAvailableDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"IsEmailAvailable"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"email"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"isEmailAvailable"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"email"},"value":{"kind":"Variable","name":{"kind":"Name","value":"email"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"is_email_available"}}]}}]}}]} as unknown as DocumentNode<IsEmailAvailableQuery, IsEmailAvailableQueryVariables>;
+export type IsEmailAvailableQueryVariables = Types.Exact<{
+  email: Types.Scalars['String'];
+}>;
+
+
+export type IsEmailAvailableQuery = { isEmailAvailable?: Types.Maybe<{ is_email_available?: Types.Maybe<boolean> }> };

package/hooks/IsEmailAvailable.graphql

@@ -0,0 +1,5 @@
+query IsEmailAvailable($email: String!) {
+  isEmailAvailable(email: $email) {
+    is_email_available
+  }
+}

package/hooks/index.ts

@@ -0,0 +1,7 @@
+export { default as useFormIsEmailAvailable } from './useFormIsEmailAvailable'
+export * from './useExtractCustomerErrors'
+
+export * from './Customer.gql'
+export * from './CustomerToken.gql'
+export * from './CustomerInfo.gql'
+export * from './IsEmailAvailable.gql'

package/hooks/useExtractCustomerErrors.tsx

@@ -0,0 +1,42 @@
+import { ApolloError, useApolloClient } from '@apollo/client'
+import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
+import { useEffect } from 'react'
+import { CustomerTokenDocument } from './CustomerToken.gql'
+
+export type UseExtractErrors = { error?: ApolloError }
+export function useExtractCustomerErrors({ error }: UseExtractErrors) {
+  const client = useApolloClient()
+
+  const [newError, unauthorized] = graphqlErrorByCategory({
+    category: 'graphql-authorization',
+    error,
+    extract: false,
+    mask: 'You need to login to continue',
+  })
+
+  useEffect(() => {
+    if (!unauthorized) return
+
+    const { customerToken } =
+      client.cache.readQuery({
+        query: CustomerTokenDocument,
+      }) ?? {}
+
+    if (customerToken) {
+      // Write arbitrary old token to document
+      client.cache.writeQuery({
+        query: CustomerTokenDocument,
+        data: {
+          customerToken: {
+            ...customerToken,
+            createdAt: new Date('2000').toUTCString(),
+            valid: false,
+          },
+        },
+        broadcast: true,
+      })
+    }
+  }, [client.cache, unauthorized])
+
+  return { error: newError, unauthorized }
+}

package/hooks/useFormIsEmailAvailable.tsx

@@ -0,0 +1,69 @@
+import { useQuery } from '@apollo/client'
+import { useFormAutoSubmit, useFormGqlQuery, useFormPersist } from '@graphcommerce/react-hook-form'
+import { useEffect, useState } from 'react'
+import { CustomerDocument } from './Customer.gql'
+import { CustomerTokenDocument } from './CustomerToken.gql'
+import { IsEmailAvailableDocument } from './IsEmailAvailable.gql'
+
+type useFormIsEmailAvailableProps = {
+  email?: string | null
+  onSubmitted?: (data: { email: string }) => void
+}
+
+export default function useFormIsEmailAvailable(props: useFormIsEmailAvailableProps) {
+  const { email, onSubmitted } = props
+  const { data: token } = useQuery(CustomerTokenDocument)
+  const customerQuery = useQuery(CustomerDocument, {
+    ssr: false,
+    skip: typeof token === 'undefined',
+  })
+
+  const form = useFormGqlQuery(IsEmailAvailableDocument, {
+    mode: 'onChange',
+    defaultValues: { email: email ?? '' },
+  })
+  const { formState, data, handleSubmit } = form
+
+  const submit = handleSubmit(onSubmitted || (() => {}))
+  const autoSubmitting = useFormAutoSubmit({ form, submit })
+
+  const hasAccount = data?.isEmailAvailable?.is_email_available === false
+  const { isDirty, isSubmitSuccessful, isSubmitted, isSubmitting, isValid } = formState
+
+  const isLoggedIn = token?.customerToken && token?.customerToken.valid
+
+  const [mode, setMode] = useState<'email' | 'signin' | 'signup' | 'signedin' | 'session-expired'>(
+    token?.customerToken && token?.customerToken.valid ? 'signedin' : 'email',
+  )
+
+  useFormPersist({ form, name: 'IsEmailAvailable' })
+
+  useEffect(() => {
+    if (isLoggedIn) {
+      setMode('signedin')
+      return
+    }
+    if (isSubmitting) return
+    if (!isValid) {
+      setMode('email')
+      return
+    }
+    if (!isDirty && isSubmitted && isSubmitSuccessful && isValid)
+      setMode(hasAccount ? 'signin' : 'signup')
+
+    if (customerQuery.data?.customer && token && token.customerToken && !token.customerToken.valid)
+      setMode(isSubmitSuccessful ? 'signin' : 'session-expired')
+  }, [
+    customerQuery.data?.customer,
+    hasAccount,
+    isDirty,
+    isLoggedIn,
+    isSubmitSuccessful,
+    isSubmitted,
+    isSubmitting,
+    isValid,
+    token,
+  ])
+
+  return { mode, form, token, submit, autoSubmitting, hasAccount }
+}

package/index.ts

@@ -0,0 +1,4 @@
+export * from './components'
+export * from './hooks'
+
+export * from './typePolicies'

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@graphcommerce/magento-customer",
+  "version": "3.0.1",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "browserslist": [
+    "extends @graphcommerce/browserslist-config-pwa"
+  ],
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/browserslist-config-pwa": "^3.0.1",
+    "@graphcommerce/eslint-config-pwa": "^3.0.1",
+    "@graphcommerce/prettier-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@playwright/test": "^1.14.1"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.3.21",
+    "@graphcommerce/graphql": "^2.103.1",
+    "@graphcommerce/image": "^2.104.1",
+    "@graphcommerce/magento-cart": "^3.0.1",
+    "@graphcommerce/magento-graphql": "^2.103.1",
+    "@graphcommerce/magento-product": "^3.0.1",
+    "@graphcommerce/magento-store": "^3.0.1",
+    "@graphcommerce/next-ui": "^3.0.1",
+    "@graphcommerce/react-hook-form": "^2.102.1",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/lab": "^4.0.0-alpha.60",
+    "clsx": "^1.1.1",
+    "framer-motion": "^4.1.17",
+    "next": "^11.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["**/node_modules", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}

package/typePolicies.ts

@@ -0,0 +1,91 @@
+import { FieldPolicy, FieldReadFunction } from '@apollo/client'
+import {
+  CustomerToken,
+  MigrateCache,
+  Mutation,
+  Query,
+  TypedTypePolicies,
+} from '@graphcommerce/graphql'
+import { CustomerTokenDocument } from './hooks/CustomerToken.gql'
+import { IsEmailAvailableDocument } from './hooks/IsEmailAvailable.gql'
+
+const revokeCustomerToken: FieldPolicy<Mutation['revokeCustomerToken']> = {
+  merge(_existing, incoming, options) {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    options.cache.reset()
+    return incoming
+  },
+}
+
+const TOKEN_EXPIRATION_MS = 60 * 60 * 1000
+
+const valid: FieldPolicy<CustomerToken['valid']> = {
+  read(existing, options) {
+    if (existing === undefined) return existing
+
+    const ref = options.toReference({ __ref: 'CustomerToken' })
+    const createdAt = options.readField<string>('createdAt', ref)
+
+    if (!createdAt) return existing
+
+    return new Date().getTime() - new Date(createdAt).getTime() < TOKEN_EXPIRATION_MS
+  },
+}
+
+const generateCustomerToken: FieldPolicy<Mutation['generateCustomerToken']> = {
+  keyArgs: () => '',
+  merge(_existing, incoming, options) {
+    if (!options.isReference(incoming)) return incoming
+
+    const write = () => {
+      options.cache.writeQuery({
+        query: CustomerTokenDocument,
+        broadcast: true,
+        data: {
+          customerToken: {
+            __typename: 'CustomerToken',
+            token: options.readField('token', incoming) as string,
+            createdAt: new Date().toUTCString(),
+            valid: true,
+          },
+        },
+      })
+    }
+    write()
+
+    // Broadcasts the query after the token expiration so UI gets updated
+    setTimeout(write, TOKEN_EXPIRATION_MS)
+    return incoming
+  },
+}
+
+const createCustomer: FieldPolicy<Mutation['createCustomer']> = {
+  merge(_existing, incoming, options) {
+    if (incoming?.customer.email) {
+      options.cache.writeQuery({
+        query: IsEmailAvailableDocument,
+        variables: { email: incoming?.customer.email },
+        data: { isEmailAvailable: { is_email_available: false } },
+        broadcast: true,
+      })
+    }
+
+    return incoming
+  },
+}
+
+// const customer: FieldReadFunction<Query['customer']> = (incoming, options) => {
+//   if (!options.canRead(incoming)) return null
+//   return incoming
+// }
+
+export const customerTypePolicies: TypedTypePolicies = {
+  // Query: { fields: { customer } },
+  Mutation: { fields: { generateCustomerToken, revokeCustomerToken, createCustomer } },
+  CustomerToken: { fields: { valid } },
+}
+
+export const migrateCustomer: MigrateCache = (oldCache, newCache) => {
+  const token = oldCache.readQuery({ query: CustomerTokenDocument })
+  newCache.writeQuery({ query: CustomerTokenDocument, data: token, broadcast: true })
+}