@graphcommerce/magento-newsletter 6.2.0-canary.9 → 6.2.0-canary.91

package/CHANGELOG.md

@@ -1,5 +1,177 @@
 # Change Log
 
+## 6.2.0-canary.91
+
+## 6.2.0-canary.90
+
+## 6.2.0-canary.89
+
+## 6.2.0-canary.88
+
+## 6.2.0-canary.87
+
+## 6.2.0-canary.86
+
+## 6.2.0-canary.85
+
+## 6.2.0-canary.84
+
+## 6.2.0-canary.83
+
+## 6.2.0-canary.82
+
+### Patch Changes
+
+- [#2021](https://github.com/graphcommerce-org/graphcommerce/pull/2021) [`06ab7d24d`](https://github.com/graphcommerce-org/graphcommerce/commit/06ab7d24dcf345c6acd39471df544a726a166ece) - Prevent email address overlap with toggle button on narrow columns ([@carlocarels90](https://github.com/carlocarels90))
+
+## 6.2.0-canary.81
+
+## 6.2.0-canary.80
+
+## 6.2.0-canary.79
+
+## 6.2.0-canary.78
+
+## 6.2.0-canary.77
+
+## 6.2.0-canary.76
+
+## 6.2.0-canary.75
+
+## 6.2.0-canary.74
+
+## 6.2.0-canary.73
+
+## 6.2.0-canary.72
+
+## 6.2.0-canary.71
+
+## 6.2.0-canary.70
+
+## 6.2.0-canary.69
+
+## 6.2.0-canary.68
+
+## 6.2.0-canary.67
+
+## 6.2.0-canary.66
+
+## 6.2.0-canary.65
+
+## 6.2.0-canary.64
+
+## 6.2.0-canary.63
+
+## 6.2.0-canary.62
+
+## 6.2.0-canary.61
+
+## 6.2.0-canary.60
+
+## 6.2.0-canary.59
+
+## 6.2.0-canary.58
+
+## 6.2.0-canary.57
+
+## 6.2.0-canary.56
+
+## 6.2.0-canary.55
+
+## 6.2.0-canary.54
+
+## 6.2.0-canary.53
+
+## 6.2.0-canary.52
+
+## 6.2.0-canary.51
+
+## 6.2.0-canary.50
+
+## 6.2.0-canary.49
+
+### Patch Changes
+
+- [#1959](https://github.com/graphcommerce-org/graphcommerce/pull/1959) [`f164217af`](https://github.com/graphcommerce-org/graphcommerce/commit/f164217af6847cff8555e19e7fc25f03528144e5) - Moved the GuestNewsletter component to inside the magento-newsletter package ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 6.2.0-canary.48
+
+## 6.2.0-canary.47
+
+## 6.2.0-canary.46
+
+## 6.2.0-canary.45
+
+## 6.2.0-canary.44
+
+## 6.2.0-canary.43
+
+## 6.2.0-canary.42
+
+## 6.2.0-canary.41
+
+## 6.2.0-canary.40
+
+## 6.2.0-canary.39
+
+## 6.2.0-canary.38
+
+## 6.2.0-canary.37
+
+## 6.2.0-canary.36
+
+## 6.2.0-canary.35
+
+## 6.2.0-canary.34
+
+## 6.2.0-canary.33
+
+## 6.2.0-canary.32
+
+## 6.2.0-canary.31
+
+## 6.2.0-canary.30
+
+## 6.2.0-canary.29
+
+## 6.2.0-canary.28
+
+## 6.2.0-canary.27
+
+## 6.2.0-canary.26
+
+## 6.2.0-canary.25
+
+## 6.2.0-canary.24
+
+## 6.2.0-canary.23
+
+## 6.2.0-canary.22
+
+## 6.2.0-canary.21
+
+## 6.2.0-canary.20
+
+## 6.2.0-canary.19
+
+## 6.2.0-canary.18
+
+## 6.2.0-canary.17
+
+## 6.2.0-canary.16
+
+## 6.2.0-canary.15
+
+## 6.2.0-canary.14
+
+## 6.2.0-canary.13
+
+## 6.2.0-canary.12
+
+## 6.2.0-canary.11
+
+## 6.2.0-canary.10
+
 ## 6.2.0-canary.9
 
 ## 6.2.0-canary.8

package/components/CheckoutNewsletter/CheckoutNewsletter.tsx

@@ -2,7 +2,7 @@ import { CheckboxElement, useFormCompose } from '@graphcommerce/ecommerce-ui'
 import { DocumentNode } from '@graphcommerce/graphql'
 import { useCartQuery } from '@graphcommerce/magento-cart'
 import { useCustomerQuery, useCustomerSession } from '@graphcommerce/magento-customer'
-import { useFormGql, useFormGqlMutation, useFormPersist } from '@graphcommerce/react-hook-form'
+import { useFormGqlMutation, useFormPersist } from '@graphcommerce/react-hook-form'
 import { Box, SxProps, Theme } from '@mui/material'
 import { GetCustomerNewsletterToggleDocument } from '../CustomerNewsletterToggle/GetCustomerNewsLetterToggle.gql'
 import { GetCartEmailDocument } from '../SignupNewsletter/GetCartEmail.gql'

package/components/CustomerNewsletterToggle/CustomerNewsletterToggle.tsx

@@ -6,6 +6,7 @@ import {
   FormControl,
   FormControlLabel,
   FormHelperText,
+  // eslint-disable-next-line @typescript-eslint/no-restricted-imports
   Switch,
   SwitchProps,
   SxProps,

package/components/GuestNewsletter/GuestNewsletter.tsx

@@ -0,0 +1,69 @@
+import {
+  ApolloErrorSnackbar,
+  TextFieldElement,
+  useFormGqlMutation,
+} from '@graphcommerce/ecommerce-ui'
+import { Form, MessageSnackbar, Button } from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
+import { SxProps, Theme } from '@mui/material'
+import { GuestNewsletterToggleDocument } from '../GuestNewsletterToggle/GuestNewsletterToggle.gql'
+
+type GuestNewsletterProps = {
+  sx?: SxProps<Theme>
+}
+
+export function GuestNewsletter(props: GuestNewsletterProps) {
+  const { sx = [] } = props
+  const form = useFormGqlMutation(GuestNewsletterToggleDocument, {}, { errorPolicy: 'all' })
+
+  const { handleSubmit, formState, error, control } = form
+  const submit = handleSubmit(() => {})
+
+  const submittedWithoutErrors = formState.isSubmitSuccessful && !error
+
+  return (
+    <Form
+      noValidate
+      onSubmit={submit}
+      sx={[(theme) => ({ gap: theme.spacings.xs }), ...(Array.isArray(sx) ? sx : [sx])]}
+    >
+      <TextFieldElement
+        required
+        variant='outlined'
+        type='email'
+        label={i18n._(/* i18n */ 'Email address')}
+        control={control}
+        name='email'
+        size='medium'
+        inputProps={{ autoComplete: 'email' }}
+        disabled={submittedWithoutErrors}
+      />
+
+      <Button
+        loading={formState.isSubmitting}
+        variant='pill'
+        color='primary'
+        type='submit'
+        size='large'
+        disabled={submittedWithoutErrors}
+      >
+        {submittedWithoutErrors ? <Trans id='Subscribed' /> : <Trans id='Subscribe' />}
+      </Button>
+
+      <MessageSnackbar
+        open={submittedWithoutErrors}
+        variant='pill'
+        action={
+          <Button size='medium' variant='pill' color='secondary' fullWidth>
+            <Trans id='Ok' />
+          </Button>
+        }
+      >
+        <Trans id='You have been successfully subscribed to our newsletter.' />
+      </MessageSnackbar>
+
+      <ApolloErrorSnackbar error={error} />
+    </Form>
+  )
+}

package/components/GuestNewsletterToggle/GuestNewsletterToggle.tsx

@@ -6,6 +6,7 @@ import {
   FormControl,
   FormControlLabel,
   FormHelperText,
+  // eslint-disable-next-line @typescript-eslint/no-restricted-imports
   Switch,
   SwitchProps,
   SxProps,

package/components/SignupNewsletter/SignupNewsletter.tsx

@@ -41,7 +41,6 @@ export function SignupNewsletter(props: SignupNewsletterProps) {
           justifyItems: 'start',
           [theme.breakpoints.up('sm')]: {
             gridTemplateAreas: `"a b c"`,
-            gridTemplateColumns: '2fr 1fr',
           },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),

package/components/index.ts

@@ -1,3 +1,4 @@
 export * from './CustomerNewsletterToggle/CustomerNewsletterToggle'
 export * from './SignupNewsletter/SignupNewsletter'
 export * from './CheckoutNewsletter/CheckoutNewsletter'
+export * from './GuestNewsletter/GuestNewsletter'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-newsletter",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.2.0-canary.9",
+  "version": "6.2.0-canary.91",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,22 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.9",
-    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.9",
-    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.9"
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.91",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.91",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.91"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "6.2.0-canary.9",
-    "@graphcommerce/magento-cart": "6.2.0-canary.9",
-    "@graphcommerce/magento-customer": "6.2.0-canary.9",
-    "@graphcommerce/next-ui": "6.2.0-canary.9",
-    "@graphcommerce/react-hook-form": "6.2.0-canary.9"
+    "@graphcommerce/ecommerce-ui": "6.2.0-canary.91",
+    "@graphcommerce/graphql": "6.2.0-canary.91",
+    "@graphcommerce/magento-cart": "6.2.0-canary.91",
+    "@graphcommerce/magento-customer": "6.2.0-canary.91",
+    "@graphcommerce/next-ui": "6.2.0-canary.91",
+    "@graphcommerce/react-hook-form": "6.2.0-canary.91"
   },
   "peerDependencies": {
-    "@lingui/react": "^3.13.2",
-    "@lingui/core": "^3.13.2",
+    "@lingui/react": "^4.2.1",
+    "@lingui/core": "^4.2.1",
+    "@lingui/macro": "^4.2.1",
     "@mui/material": "^5.10.16",
     "framer-motion": "^10.0.0",
     "next": "^13.2.0",