@graphcommerce/magento-newsletter 1.1.46 → 2.0.1

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 +45 -30
  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 +17 -23
package/CHANGELOG.md CHANGED
@@ -1,65 +1,80 @@
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.
5
-
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)
3
+ ## 2.0.1
7
4
 
5
+ ### Patch Changes
8
6
 
9
- ### Features
7
+ - [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
8
+ Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
9
+ so that the packages link to back to the website and repository
10
+ - Updated dependencies
11
+ [[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
12
+ - @graphcommerce/graphql@3.0.1
13
+ - @graphcommerce/magento-cart@4.0.1
14
+ - @graphcommerce/magento-customer@4.0.1
15
+ - @graphcommerce/next-ui@4.0.1
16
+ - @graphcommerce/react-hook-form@3.0.1
10
17
 
11
- * added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
18
+ ## 2.0.0
12
19
 
20
+ ### Major Changes
13
21
 
22
+ - [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
23
+ [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
24
+ Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
14
25
 
26
+ ### Patch Changes
15
27
 
28
+ - Updated dependencies
29
+ [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
30
+ - @graphcommerce/graphql@3.0.0
31
+ - @graphcommerce/magento-cart@4.0.0
32
+ - @graphcommerce/magento-customer@4.0.0
33
+ - @graphcommerce/next-ui@4.0.0
34
+ - @graphcommerce/react-hook-form@3.0.0
16
35
 
17
- ## [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)
36
+ All notable changes to this project will be documented in this file. See
37
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
18
38
 
39
+ # [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)
19
40
 
20
- ### Bug Fixes
21
-
22
- * **signup-newsletter:** mobile layout ([fcc3935](https://github.com/ho-nl/m2-pwa/commit/fcc3935c5733d087012f736ac70fafa58bff78bc))
41
+ ### Features
23
42
 
43
+ - added tons of translations
44
+ ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
24
45
 
46
+ ## [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)
25
47
 
48
+ ### Bug Fixes
26
49
 
50
+ - **signup-newsletter:** mobile layout
51
+ ([fcc3935](https://github.com/ho-nl/m2-pwa/commit/fcc3935c5733d087012f736ac70fafa58bff78bc))
27
52
 
28
53
  ## [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
54
 
30
-
31
55
  ### Bug Fixes
32
56
 
33
- * darkMode ([c7573de](https://github.com/ho-nl/m2-pwa/commit/c7573de6bb80643b26931c35ac61735539e7fbf0))
34
-
35
-
36
-
37
-
57
+ - darkMode
58
+ ([c7573de](https://github.com/ho-nl/m2-pwa/commit/c7573de6bb80643b26931c35ac61735539e7fbf0))
38
59
 
39
60
  ## [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
61
 
41
62
  **Note:** Version bump only for package @graphcommerce/magento-newsletter
42
63
 
43
-
44
-
45
-
46
-
47
64
  # 0.2.0 (2021-09-27)
48
65
 
49
-
50
66
  ### Features
51
67
 
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
-
68
+ - added magento-newsletter package
69
+ ([9b48b1b](https://github.com/ho-nl/m2-pwa/commit/9b48b1b4dc29f9ea3271f4a6370abba15dd8999c))
70
+ - guest newsletter toggle
71
+ ([c747aed](https://github.com/ho-nl/m2-pwa/commit/c747aed081b2c5c134e2be1bc4c32de2a5e6e220))
58
72
 
59
73
  # 0.1.0 (2021-09-24)
60
74
 
61
-
62
75
  ### Features
63
76
 
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))
77
+ - added magento-newsletter package
78
+ ([9b48b1b](https://github.com/ho-nl/m2-pwa/commit/9b48b1b4dc29f9ea3271f4a6370abba15dd8999c))
79
+ - guest newsletter toggle
80
+ ([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,10 @@
1
1
  {
2
2
  "name": "@graphcommerce/magento-newsletter",
3
- "version": "1.1.46",
3
+ "homepage": "https://www.graphcommerce.org/",
4
+ "repository": "github:graphcommerce-org/graphcommerce",
5
+ "version": "2.0.1",
4
6
  "sideEffects": false,
5
7
  "prettier": "@graphcommerce/prettier-config-pwa",
6
- "browserslist": [
7
- "extends @graphcommerce/browserslist-config-pwa"
8
- ],
9
8
  "eslintConfig": {
10
9
  "extends": "@graphcommerce/eslint-config-pwa",
11
10
  "parserOptions": {
@@ -13,27 +12,22 @@
13
12
  }
14
13
  },
15
14
  "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"
15
+ "@graphcommerce/eslint-config-pwa": "^4.0.1",
16
+ "@graphcommerce/prettier-config-pwa": "^4.0.1",
17
+ "@graphcommerce/typescript-config-pwa": "^4.0.1",
18
+ "@playwright/test": "^1.18.1"
21
19
  },
22
20
  "dependencies": {
23
- "@apollo/client": "^3.5.6",
24
- "@graphcommerce/graphql": "^2.105.13",
25
- "@graphcommerce/magento-cart": "^3.10.2",
26
- "@graphcommerce/magento-customer": "^3.6.43",
27
- "@graphcommerce/next-ui": "^3.25.2",
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",
21
+ "@graphcommerce/graphql": "^3.0.1",
22
+ "@graphcommerce/magento-cart": "^4.0.1",
23
+ "@graphcommerce/magento-customer": "^4.0.1",
24
+ "@graphcommerce/next-ui": "^4.0.1",
25
+ "@graphcommerce/react-hook-form": "^3.0.1",
26
+ "@lingui/macro": "^3.13.2",
27
+ "@mui/material": "^5.4.1",
28
+ "framer-motion": "^6.2.4",
29
+ "next": "^12.0.10",
35
30
  "react": "^17.0.2",
36
31
  "react-dom": "^17.0.2"
37
- },
38
- "gitHead": "110ddb032ee3ce6e363b9f5f7d21af71fb51b527"
32
+ }
39
33
  }