@graphcommerce/magento-cart-email 2.104.1

package/Api/GuestEmailChanged.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type GuestEmailChangedFragment = { id: string };

package/Api/GuestEmailChanged.graphql

@@ -0,0 +1,3 @@
+fragment GuestEmailChanged on Cart @injectable {
+  id
+}

package/CHANGELOG.md

@@ -0,0 +1,113 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.104.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-email@2.104.0...@graphcommerce/magento-cart-email@2.104.1) (2021-09-27)
+
+**Note:** Version bump only for package @graphcommerce/magento-cart-email
+
+
+
+
+
+# 2.104.0 (2021-09-27)
+
+
+### Bug Fixes
+
+* adjust imports to correct ones ([c6e3092](https://github.com/ho-nl/m2-pwa/commit/c6e3092569d1c49fe138b3810704da8e04acbbe2))
+* email field not filled in checkout ([910caca](https://github.com/ho-nl/m2-pwa/commit/910cacaa49fc5fef2ee4066df828c5a6dd4a2700))
+* ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
+* implement next-ui barrel imports ([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
+* make sure ComposedForm actually submits correctly ([c6499d9](https://github.com/ho-nl/m2-pwa/commit/c6499d9d36f874cd65b310cbf7f63f5a88fa86cd))
+* make sure the session token gets deactivated when trying to merge carts when it cant ([2a9416b](https://github.com/ho-nl/m2-pwa/commit/2a9416b5c9efcd28a27f4183922ab419f62ea767))
+* ref couldn't be forwarded for ShippingAddressForm ([1f90f1a](https://github.com/ho-nl/m2-pwa/commit/1f90f1a30437d656fcf841026ad13bb2b45d831b))
+* rename NextButton to Button, change imports ([976adb0](https://github.com/ho-nl/m2-pwa/commit/976adb0bf906310d1efce888dcc9be1e28ce0f1b))
+
+
+### Features
+
+* add barrel file for magento-customer ([02fb7f0](https://github.com/ho-nl/m2-pwa/commit/02fb7f004de968ee968b00e364b2b370f4f7d4f1))
+* **cart:** merge customer and guest carts when logging in ([25ebc0f](https://github.com/ho-nl/m2-pwa/commit/25ebc0f4e825f8512e2c3f1e01bf23a2d019b0d3))
+* **cart:** when a cart is not active anymore show a clear cart button ([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
+* **graphql:** introduced new graphql package that holds all generated files ([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
+* **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
+* **inline-account:** re-added the component ([c508d34](https://github.com/ho-nl/m2-pwa/commit/c508d341ca34daa26a6db13ead72f7f4bdc72160))
+* next.js 11 ([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
+* **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+* renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
+* submit composed form sequentially ([890d839](https://github.com/ho-nl/m2-pwa/commit/890d8393d635c3777aa17cfa8d4dafc13c2e6cdc))
+* upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+* useFormMutationCart and simpler imports ([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
+
+
+### Reverts
+
+* Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [2.103.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-email@2.102.19...@graphcommerce/magento-cart-email@2.103.0) (2021-09-24)
+
+### Features
+
+- **inline-account:** re-added the component
+  ([c508d34](https://github.com/ho-nl/m2-pwa/commit/c508d341ca34daa26a6db13ead72f7f4bdc72160))
+
+## [2.102.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-email@2.102.7...@graphcommerce/magento-cart-email@2.102.8) (2021-08-18)
+
+### Bug Fixes
+
+- make sure the session token gets deactivated when trying to merge carts when
+  it cant
+  ([2a9416b](https://github.com/ho-nl/m2-pwa/commit/2a9416b5c9efcd28a27f4183922ab419f62ea767))
+
+## [2.102.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-email@2.102.4...@graphcommerce/magento-cart-email@2.102.5) (2021-08-13)
+
+### Bug Fixes
+
+- ref couldn't be forwarded for ShippingAddressForm
+  ([1f90f1a](https://github.com/ho-nl/m2-pwa/commit/1f90f1a30437d656fcf841026ad13bb2b45d831b))
+
+# [2.102.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-email@2.101.10...@graphcommerce/magento-cart-email@2.102.0) (2021-08-12)
+
+### Features
+
+- upgraded to nextjs 11
+  ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+
+## [2.101.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-email@2.101.8...@graphcommerce/magento-cart-email@2.101.9) (2021-08-09)
+
+### Reverts
+
+- Revert "chore: upgrade @apollo/client"
+  ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+# [2.101.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-email@2.100.19...@graphcommerce/magento-cart-email@2.101.0) (2021-07-26)
+
+### Features
+
+- **playwright:** added new playwright package to enable browser testing
+  ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+
+## [2.100.17](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-email@2.100.16...@graphcommerce/magento-cart-email@2.100.17) (2021-07-23)
+
+### Bug Fixes
+
+- adjust imports to correct ones
+  ([c6e3092](https://github.com/ho-nl/m2-pwa/commit/c6e3092569d1c49fe138b3810704da8e04acbbe2))
+
+## [2.100.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-email@2.100.10...@graphcommerce/magento-cart-email@2.100.11) (2021-07-20)
+
+### Bug Fixes
+
+- ignore md files from triggering version updates
+  ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))

package/EmailForm/CartEmail.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 CartEmailDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CartEmail"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]}}]} as unknown as DocumentNode<CartEmailQuery, CartEmailQueryVariables>;
+export type CartEmailQueryVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+}>;
+
+
+export type CartEmailQuery = { cart?: Types.Maybe<{ id: string, email?: Types.Maybe<string> }> };

package/EmailForm/CartEmail.graphql

@@ -0,0 +1,5 @@
+query CartEmail($cartId: String!) {
+  cart(cart_id: $cartId) {
+    ...EmailForm
+  }
+}

package/EmailForm/EmailForm.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type EmailFormFragment = { id: string, email?: Types.Maybe<string> };

package/EmailForm/EmailForm.graphql

@@ -0,0 +1,4 @@
+fragment EmailForm on Cart {
+  id
+  email
+}

package/EmailForm/EmailForm.tsx

@@ -0,0 +1,138 @@
+import { useMutation } from '@apollo/client'
+import { CircularProgress, makeStyles, TextField } from '@material-ui/core'
+import { Alert } from '@material-ui/lab'
+import {
+  ApolloCartErrorAlert,
+  useCartQuery,
+  useMergeCustomerCart,
+} from '@graphcommerce/magento-cart'
+import {
+  SignInFormInline,
+  SignUpFormInline,
+  useFormIsEmailAvailable,
+} from '@graphcommerce/magento-customer'
+import { AnimatedRow, Button, FormDiv, FormRow } from '@graphcommerce/next-ui'
+import { emailPattern, useFormCompose, UseFormComposeOptions } from '@graphcommerce/react-hook-form'
+import { AnimatePresence } from 'framer-motion'
+import React, { useEffect, useState } from 'react'
+import EmailHelperList from '../EmailHelperList'
+import { CartEmailDocument } from './CartEmail.gql'
+import { SetGuestEmailOnCartDocument } from './SetGuestEmailOnCart.gql'
+
+const useStyles = makeStyles(
+  () => ({
+    helperList: {
+      marginBottom: 0,
+    },
+  }),
+  { name: 'EmailForm' },
+)
+
+export type EmailFormProps = Pick<UseFormComposeOptions, 'step'>
+
+export default function EmailForm(props: EmailFormProps) {
+  const { step } = props
+  const classes = useStyles()
+  const [expand, setExpand] = useState(false)
+
+  useMergeCustomerCart()
+
+  const [setGuestEmailOnCart] = useMutation(SetGuestEmailOnCartDocument)
+  const { data: cartData } = useCartQuery(CartEmailDocument)
+  const { mode, form, submit } = useFormIsEmailAvailable({ email: cartData?.cart?.email })
+
+  const { formState, muiRegister, required, watch, error, getValues } = form
+
+  useFormCompose({ form, step, submit, key: 'EmailForm' })
+
+  useEffect(() => {
+    if (!cartData?.cart?.id) return
+
+    // Customer isn't logged in, but we do have a valid email
+    if (mode === 'signin' || mode === 'signup') {
+      const [email] = getValues(['email'])
+
+      if (cartData.cart.email === email) return
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      setGuestEmailOnCart({ variables: { email, cartId: cartData.cart.id } })
+    }
+  }, [mode, getValues, cartData?.cart?.id, setGuestEmailOnCart, cartData?.cart?.email])
+
+  let endAdornment: React.ReactNode = null
+
+  if (mode === 'signin') {
+    endAdornment = (
+      <Button color='secondary' style={{ whiteSpace: 'nowrap' }} onClick={() => setExpand(!expand)}>
+        {expand ? 'Close' : 'Sign In'}
+      </Button>
+    )
+  }
+  if (mode === 'signup') {
+    endAdornment = (
+      <Button color='secondary' style={{ whiteSpace: 'nowrap' }} onClick={() => setExpand(!expand)}>
+        {expand ? 'Close' : 'Sign Up'}
+      </Button>
+    )
+  }
+  if (formState.isSubmitting) endAdornment = <CircularProgress />
+
+  return (
+    <FormDiv contained>
+      <AnimatePresence initial={false}>
+        <AnimatedRow key='emailform'>
+          <form noValidate onSubmit={submit}>
+            <FormRow>
+              <TextField
+                variant='outlined'
+                type='email'
+                error={formState.isSubmitted && !!formState.errors.email}
+                helperText={formState.isSubmitted && formState.errors.email?.message}
+                label='Email'
+                required={required.email}
+                {...muiRegister('email', {
+                  required: required.email,
+                  pattern: { value: emailPattern, message: '' },
+                })}
+                InputProps={{
+                  autoComplete: 'email',
+                  endAdornment,
+                  readOnly: mode === 'signedin' || mode === 'session-expired',
+                }}
+              />
+            </FormRow>
+            <ApolloCartErrorAlert error={error} />
+          </form>
+        </AnimatedRow>
+
+        {((mode === 'signin' && expand) || mode === 'session-expired') && (
+          <AnimatedRow key='signin-form-inline'>
+            <SignInFormInline email={watch('email')} />
+          </AnimatedRow>
+        )}
+
+        {mode === 'signup' && expand && (
+          <AnimatedRow key='inline-signup'>
+            <SignUpFormInline
+              helperList={
+                <EmailHelperList key='signup-helper-list' classes={{ root: classes.helperList }} />
+              }
+              key='signup-form-inline'
+              email={watch('email')}
+            />
+          </AnimatedRow>
+        )}
+
+        {mode === 'session-expired' && (
+          <FormRow>
+            <Alert severity='error'>You must sign in to continue</Alert>
+          </FormRow>
+        )}
+        {mode !== 'session-expired' && ((mode !== 'signup' && expand) || !expand) && (
+          <AnimatedRow key='email-helperlist'>
+            <EmailHelperList />
+          </AnimatedRow>
+        )}
+      </AnimatePresence>
+    </FormDiv>
+  )
+}

package/EmailForm/SetGuestEmailOnCart.gql.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const SetGuestEmailOnCartDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SetGuestEmailOnCart"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"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":"setGuestEmailOnCart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"email"},"value":{"kind":"Variable","name":{"kind":"Name","value":"email"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]}}]}}]} as unknown as DocumentNode<SetGuestEmailOnCartMutation, SetGuestEmailOnCartMutationVariables>;
+export type SetGuestEmailOnCartMutationVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+  email: Types.Scalars['String'];
+}>;
+
+
+export type SetGuestEmailOnCartMutation = { setGuestEmailOnCart?: Types.Maybe<{ cart: { __typename: 'Cart', id: string, email?: Types.Maybe<string> } }> };

package/EmailForm/SetGuestEmailOnCart.graphql

@@ -0,0 +1,10 @@
+mutation SetGuestEmailOnCart($cartId: String!, $email: String!) {
+  setGuestEmailOnCart(input: { cart_id: $cartId, email: $email }) {
+    cart {
+      __typename
+      id
+      email
+      ...GuestEmailChanged
+    }
+  }
+}

package/EmailHelperList/index.tsx

@@ -0,0 +1,32 @@
+import { useQuery } from '@apollo/client'
+import { makeStyles, Theme } from '@material-ui/core'
+import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
+import { UseStyles } from '@graphcommerce/next-ui'
+import clsx from 'clsx'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      ...theme.typography.body2,
+      paddingLeft: theme.spacings.xs,
+    },
+  }),
+  { name: 'EmailHelperList' },
+)
+
+type HelperListProps = UseStyles<typeof useStyles>
+
+export default function EmailHelperList(props: HelperListProps) {
+  const { data: tokenData } = useQuery(CustomerTokenDocument)
+  const classes = useStyles(props)
+
+  if (!tokenData?.customerToken) return <></>
+
+  return (
+    <ul className={clsx(classes.root)}>
+      <li>E-mail address of existing customers will be recognized, sign in is optional.</li>
+      <li>Fill in password fields to create an account.</li>
+      <li>Leave passwords fields empty to order as guest.</li>
+    </ul>
+  )
+}

package/index.ts

@@ -0,0 +1,3 @@
+export * from './Api/GuestEmailChanged.gql'
+export * from './EmailForm/EmailForm'
+export { default as EmailForm } from './EmailForm/EmailForm'

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@graphcommerce/magento-cart-email",
+  "version": "2.104.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-customer": "^3.0.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"
+  }
+}