@graphcommerce/magento-newsletter 1.1.45 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +31 -31
  2. package/components/CustomerNewsletterToggle/index.tsx +10 -15
  3. package/components/GuestNewsletterToggle/index.tsx +7 -13
  4. package/components/SignupNewsletter/index.tsx +53 -54
  5. package/package.json +15 -23
package/CHANGELOG.md CHANGED
@@ -1,65 +1,65 @@
1
1
  # Change Log
2
2
 
3
- All notable changes to this project will be documented in this file.
4
- See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
3
+ ## 2.0.0
5
4
 
6
- # [1.1.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-newsletter@1.0.19...@graphcommerce/magento-newsletter@1.1.0) (2021-11-12)
5
+ ### Major Changes
7
6
 
7
+ - [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
8
+ [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
9
+ Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
8
10
 
9
- ### Features
11
+ ### Patch Changes
10
12
 
11
- * added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
13
+ - Updated dependencies
14
+ [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
15
+ - @graphcommerce/graphql@3.0.0
16
+ - @graphcommerce/magento-cart@4.0.0
17
+ - @graphcommerce/magento-customer@4.0.0
18
+ - @graphcommerce/next-ui@4.0.0
19
+ - @graphcommerce/react-hook-form@3.0.0
12
20
 
21
+ All notable changes to this project will be documented in this file. See
22
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
13
23
 
24
+ # [1.1.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-newsletter@1.0.19...@graphcommerce/magento-newsletter@1.1.0) (2021-11-12)
14
25
 
26
+ ### Features
15
27
 
28
+ - added tons of translations
29
+ ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
16
30
 
17
31
  ## [1.0.17](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-newsletter@1.0.16...@graphcommerce/magento-newsletter@1.0.17) (2021-11-12)
18
32
 
19
-
20
33
  ### Bug Fixes
21
34
 
22
- * **signup-newsletter:** mobile layout ([fcc3935](https://github.com/ho-nl/m2-pwa/commit/fcc3935c5733d087012f736ac70fafa58bff78bc))
23
-
24
-
25
-
26
-
35
+ - **signup-newsletter:** mobile layout
36
+ ([fcc3935](https://github.com/ho-nl/m2-pwa/commit/fcc3935c5733d087012f736ac70fafa58bff78bc))
27
37
 
28
38
  ## [0.2.46](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-newsletter@0.2.45...@graphcommerce/magento-newsletter@0.2.46) (2021-11-02)
29
39
 
30
-
31
40
  ### Bug Fixes
32
41
 
33
- * darkMode ([c7573de](https://github.com/ho-nl/m2-pwa/commit/c7573de6bb80643b26931c35ac61735539e7fbf0))
34
-
35
-
36
-
37
-
42
+ - darkMode
43
+ ([c7573de](https://github.com/ho-nl/m2-pwa/commit/c7573de6bb80643b26931c35ac61735539e7fbf0))
38
44
 
39
45
  ## [0.2.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-newsletter@0.2.0...@graphcommerce/magento-newsletter@0.2.1) (2021-09-27)
40
46
 
41
47
  **Note:** Version bump only for package @graphcommerce/magento-newsletter
42
48
 
43
-
44
-
45
-
46
-
47
49
  # 0.2.0 (2021-09-27)
48
50
 
49
-
50
51
  ### Features
51
52
 
52
- * added magento-newsletter package ([9b48b1b](https://github.com/ho-nl/m2-pwa/commit/9b48b1b4dc29f9ea3271f4a6370abba15dd8999c))
53
- * guest newsletter toggle ([c747aed](https://github.com/ho-nl/m2-pwa/commit/c747aed081b2c5c134e2be1bc4c32de2a5e6e220))
54
-
55
-
56
-
57
-
53
+ - added magento-newsletter package
54
+ ([9b48b1b](https://github.com/ho-nl/m2-pwa/commit/9b48b1b4dc29f9ea3271f4a6370abba15dd8999c))
55
+ - guest newsletter toggle
56
+ ([c747aed](https://github.com/ho-nl/m2-pwa/commit/c747aed081b2c5c134e2be1bc4c32de2a5e6e220))
58
57
 
59
58
  # 0.1.0 (2021-09-24)
60
59
 
61
-
62
60
  ### Features
63
61
 
64
- * added magento-newsletter package ([9b48b1b](https://github.com/ho-nl/m2-pwa/commit/9b48b1b4dc29f9ea3271f4a6370abba15dd8999c))
65
- * guest newsletter toggle ([c747aed](https://github.com/ho-nl/m2-pwa/commit/c747aed081b2c5c134e2be1bc4c32de2a5e6e220))
62
+ - added magento-newsletter package
63
+ ([9b48b1b](https://github.com/ho-nl/m2-pwa/commit/9b48b1b4dc29f9ea3271f4a6370abba15dd8999c))
64
+ - guest newsletter toggle
65
+ ([c747aed](https://github.com/ho-nl/m2-pwa/commit/c747aed081b2c5c134e2be1bc4c32de2a5e6e220))
package/components/CustomerNewsletterToggle/index.tsx CHANGED
@@ -1,29 +1,24 @@
1
- import { useQuery } from '@apollo/client'
1
+ import { useQuery } from '@graphcommerce/graphql'
2
2
  import { ApolloCustomerErrorAlert } from '@graphcommerce/magento-customer'
3
3
  import { Controller, useFormAutoSubmit, useFormGqlMutation } from '@graphcommerce/react-hook-form'
4
4
  import {
5
+ Box,
5
6
  FormControl,
6
7
  FormControlLabel,
7
8
  FormHelperText,
8
- makeStyles,
9
9
  Switch,
10
10
  SwitchProps,
11
- } from '@material-ui/core'
11
+ SxProps,
12
+ Theme,
13
+ } from '@mui/material'
12
14
  import React from 'react'
13
15
  import { GetCustomerNewsletterToggleDocument } from './GetCustomerNewsLetterToggle.gql'
14
16
  import { UpdateNewsletterSubscriptionDocument } from './UpdateNewsletterSubscription.gql'
15
17
 
16
- export type CustomerNewsletterToggleProps = SwitchProps
17
-
18
- const useStyles = makeStyles(() => ({
19
- labelRoot: {
20
- marginRight: 0,
21
- },
22
- }))
18
+ export type CustomerNewsletterToggleProps = SwitchProps & { sx?: SxProps<Theme> }
23
19
 
24
20
  export default function CustomerNewsletterToggle(props: CustomerNewsletterToggleProps) {
25
- const { disabled, ...switchProps } = props
26
- const classes = useStyles(props)
21
+ const { disabled, sx = [], ...switchProps } = props
27
22
 
28
23
  const { loading, data } = useQuery(GetCustomerNewsletterToggleDocument, { ssr: false })
29
24
  const form = useFormGqlMutation(UpdateNewsletterSubscriptionDocument, {
@@ -40,14 +35,14 @@ export default function CustomerNewsletterToggle(props: CustomerNewsletterToggle
40
35
  if (disabled || loading) return <Switch disabled color='primary' {...switchProps} />
41
36
 
42
37
  return (
43
- <form noValidate>
38
+ <Box component='form' onSubmit={submit} noValidate sx={sx}>
44
39
  <Controller
45
40
  name='isSubscribed'
46
41
  control={control}
47
42
  render={({ field: { onChange, value, name: controlName, ref, onBlur } }) => (
48
43
  <FormControl error={!!formState.errors.isSubscribed}>
49
44
  <FormControlLabel
50
- classes={{ root: classes.labelRoot }}
45
+ sx={{ marginRight: 0 }}
51
46
  label=''
52
47
  control={<Switch color='primary' {...switchProps} />}
53
48
  checked={value}
@@ -64,6 +59,6 @@ export default function CustomerNewsletterToggle(props: CustomerNewsletterToggle
64
59
  />
65
60
 
66
61
  <ApolloCustomerErrorAlert error={error} />
67
- </form>
62
+ </Box>
68
63
  )
69
64
  }
package/components/GuestNewsletterToggle/index.tsx CHANGED
@@ -6,10 +6,11 @@ import {
6
6
  FormControl,
7
7
  FormControlLabel,
8
8
  FormHelperText,
9
- makeStyles,
10
9
  Switch,
11
10
  SwitchProps,
12
- } from '@material-ui/core'
11
+ SxProps,
12
+ Theme,
13
+ } from '@mui/material'
13
14
  import React from 'react'
14
15
  import { GetCartEmailDocument } from '../SignupNewsletter/GetCartEmail.gql'
15
16
  import {
@@ -18,17 +19,10 @@ import {
18
19
  GuestNewsletterToggleMutationVariables,
19
20
  } from './GuestNewsletterToggle.gql'
20
21
 
21
- export type GuestNewsletterToggleProps = SwitchProps
22
-
23
- const useStyles = makeStyles(() => ({
24
- labelRoot: {
25
- marginRight: 0,
26
- },
27
- }))
22
+ export type GuestNewsletterToggleProps = SwitchProps & { sx?: SxProps<Theme> }
28
23
 
29
24
  export default function GuestNewsletterToggle(props: GuestNewsletterToggleProps) {
30
- const { ...switchProps } = props
31
- const classes = useStyles(props)
25
+ const { sx = [], ...switchProps } = props
32
26
 
33
27
  const email =
34
28
  useCartQuery(GetCartEmailDocument, { allowUrl: true }).data?.cart?.email ?? undefined
@@ -44,7 +38,7 @@ export default function GuestNewsletterToggle(props: GuestNewsletterToggleProps)
44
38
  if (formState.isSubmitted) return <Switch color='primary' {...switchProps} checked disabled />
45
39
 
46
40
  return (
47
- <Form noValidate>
41
+ <Form noValidate sx={sx}>
48
42
  <input type='hidden' {...register('email')} value={email} />
49
43
  <Controller
50
44
  name='isSubscribed'
@@ -52,7 +46,7 @@ export default function GuestNewsletterToggle(props: GuestNewsletterToggleProps)
52
46
  render={({ field: { onChange, value, name: controlName, ref, onBlur } }) => (
53
47
  <FormControl error={!!formState.errors.isSubscribed}>
54
48
  <FormControlLabel
55
- classes={{ root: classes.labelRoot }}
49
+ sx={{ marginRight: 0 }}
56
50
  label=''
57
51
  control={<Switch color='primary' {...switchProps} />}
58
52
  checked={value}
package/components/SignupNewsletter/index.tsx CHANGED
@@ -1,79 +1,78 @@
1
- import { useQuery } from '@apollo/client'
1
+ import { useQuery } from '@graphcommerce/graphql'
2
2
  import { useCartQuery } from '@graphcommerce/magento-cart'
3
3
  import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
4
- import { UseStyles } from '@graphcommerce/next-ui'
4
+ import { extendableComponent } from '@graphcommerce/next-ui'
5
5
  import { Trans } from '@lingui/macro'
6
- import { makeStyles, Theme, Typography } from '@material-ui/core'
7
- import clsx from 'clsx'
8
- import React from 'react'
6
+ import { Box, SxProps, Theme, Typography } from '@mui/material'
9
7
  import CustomerNewsletterToggle from '../CustomerNewsletterToggle'
10
8
  import GuestNewsletterToggle from '../GuestNewsletterToggle'
11
9
  import { GetCartEmailDocument } from './GetCartEmail.gql'
12
10
 
13
- const useStyles = makeStyles(
14
- (theme: Theme) => ({
15
- signup: {
16
- background: theme.palette.background.paper,
17
- display: 'grid',
18
- alignItems: 'center',
19
- gridAutoFlow: 'column',
20
- columnGap: theme.spacings.xxs,
21
- padding: theme.spacings.sm,
22
- ...theme.typography.body1,
23
- marginTop: theme.spacings.sm,
24
- borderRadius: 4,
25
- gridTemplateColumns: '1fr',
26
- gridTemplateAreas: `
27
- "a"
28
- "b"
29
- `,
30
- justifyItems: 'start',
31
- [theme.breakpoints.up('sm')]: {
32
- gridTemplateAreas: `"a b c"`,
33
- gridTemplateColumns: '2fr 1fr',
34
- },
35
- },
36
- background: {
37
- background: theme.palette.background.image,
38
- },
39
- signupForm: {
40
- display: 'flex',
41
- gap: 8,
42
- justifySelf: 'start',
43
- alignItems: 'center',
44
- [theme.breakpoints.up('sm')]: {
45
- justifySelf: 'end',
46
- },
47
- },
48
- }),
49
- {
50
- name: 'SignupNewsletter',
51
- },
52
- )
11
+ type SignupNewsletterProps = { sx?: SxProps<Theme> }
53
12
 
54
- type SignupNewsletterProps = {
55
- //
56
- } & UseStyles<typeof useStyles>
13
+ const name = 'SignupNewsletter' as const
14
+
15
+ type OwnerState = { isCustomer: boolean }
16
+ const parts = ['signup', 'text', 'signupForm'] as const
17
+ const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
57
18
 
58
19
  export default function SignupNewsletter(props: SignupNewsletterProps) {
59
- const classes = useStyles(props)
20
+ const { sx = [] } = props
60
21
  const { data: cartData } = useCartQuery(GetCartEmailDocument, { allowUrl: true })
61
22
  const { data: customerTokenData } = useQuery(CustomerTokenDocument)
62
23
  const isCustomer = Boolean(customerTokenData?.customerToken)
63
24
 
25
+ const classes = withState({ isCustomer })
26
+
64
27
  return (
65
- <div className={clsx(classes.signup, !isCustomer && classes.background)}>
66
- <Typography variant='subtitle1'>
28
+ <Box
29
+ className={classes.signup}
30
+ sx={[
31
+ (theme) => ({
32
+ background: theme.palette.background.paper,
33
+ display: 'grid',
34
+ alignItems: 'center',
35
+ gridAutoFlow: 'column',
36
+ columnGap: theme.spacings.xxs,
37
+ padding: theme.spacings.sm,
38
+ typgraphy: 'body1',
39
+ marginTop: theme.spacings.sm,
40
+ borderRadius: '4px',
41
+ gridTemplateColumns: '1fr',
42
+ gridTemplateAreas: `"a" "b"`,
43
+ justifyItems: 'start',
44
+ [theme.breakpoints.up('sm')]: {
45
+ gridTemplateAreas: `"a b c"`,
46
+ gridTemplateColumns: '2fr 1fr',
47
+ },
48
+
49
+ '&.isCustomer': {
50
+ background: theme.palette.background.image,
51
+ },
52
+ }),
53
+ ...(Array.isArray(sx) ? sx : [sx]),
54
+ ]}
55
+ >
56
+ <Typography variant='subtitle1' className={classes.text}>
67
57
  <Trans>Sign up for our newsletter and stay updated</Trans>
68
58
  </Typography>
69
- <div className={classes.signupForm}>
59
+ <Box
60
+ className={classes.signupForm}
61
+ sx={(theme) => ({
62
+ display: 'flex',
63
+ gap: 8,
64
+ justifySelf: 'start',
65
+ alignItems: 'center',
66
+ [theme.breakpoints.up('sm')]: { justifySelf: 'end' },
67
+ })}
68
+ >
70
69
  {isCustomer ? (
71
70
  <CustomerNewsletterToggle color='primary' />
72
71
  ) : (
73
72
  <GuestNewsletterToggle color='primary' />
74
73
  )}
75
74
  {cartData?.cart?.email}
76
- </div>
77
- </div>
75
+ </Box>
76
+ </Box>
78
77
  )
79
78
  }
package/package.json CHANGED
@@ -1,11 +1,8 @@
1
1
  {
2
2
  "name": "@graphcommerce/magento-newsletter",
3
- "version": "1.1.45",
3
+ "version": "2.0.0",
4
4
  "sideEffects": false,
5
5
  "prettier": "@graphcommerce/prettier-config-pwa",
6
- "browserslist": [
7
- "extends @graphcommerce/browserslist-config-pwa"
8
- ],
9
6
  "eslintConfig": {
10
7
  "extends": "@graphcommerce/eslint-config-pwa",
11
8
  "parserOptions": {
@@ -13,27 +10,22 @@
13
10
  }
14
11
  },
15
12
  "devDependencies": {
16
- "@graphcommerce/browserslist-config-pwa": "^3.0.3",
17
- "@graphcommerce/eslint-config-pwa": "^3.1.10",
18
- "@graphcommerce/prettier-config-pwa": "^3.0.5",
19
- "@graphcommerce/typescript-config-pwa": "^3.1.2",
20
- "@playwright/test": "^1.17.1"
13
+ "@graphcommerce/eslint-config-pwa": "^4.0.0",
14
+ "@graphcommerce/prettier-config-pwa": "^4.0.0",
15
+ "@graphcommerce/typescript-config-pwa": "^4.0.0",
16
+ "@playwright/test": "^1.18.1"
21
17
  },
22
18
  "dependencies": {
23
- "@apollo/client": "^3.5.6",
24
- "@graphcommerce/graphql": "^2.105.13",
25
- "@graphcommerce/magento-cart": "^3.10.1",
26
- "@graphcommerce/magento-customer": "^3.6.42",
27
- "@graphcommerce/next-ui": "^3.25.1",
28
- "@graphcommerce/react-hook-form": "^2.104.7",
29
- "@lingui/macro": "^3.13.0",
30
- "@material-ui/core": "^4.12.3",
31
- "@material-ui/lab": "^4.0.0-alpha.60",
32
- "clsx": "^1.1.1",
33
- "framer-motion": "^5.5.5",
34
- "next": "^12.0.7",
19
+ "@graphcommerce/graphql": "^3.0.0",
20
+ "@graphcommerce/magento-cart": "^4.0.0",
21
+ "@graphcommerce/magento-customer": "^4.0.0",
22
+ "@graphcommerce/next-ui": "^4.0.0",
23
+ "@graphcommerce/react-hook-form": "^3.0.0",
24
+ "@lingui/macro": "^3.13.2",
25
+ "@mui/material": "^5.4.1",
26
+ "framer-motion": "^6.2.4",
27
+ "next": "^12.0.10",
35
28
  "react": "^17.0.2",
36
29
  "react-dom": "^17.0.2"
37
- },
38
- "gitHead": "4f7fd2440fa20b9ad619b1172bc12deaaf8b2456"
30
+ }
39
31
  }