@graphcommerce/magento-newsletter 1.1.47 → 2.0.2

package/CHANGELOG.md

@@ -1,65 +1,114 @@
 # Change Log
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## 2.0.2
+
+### Patch Changes
+
+- [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
+  [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2)
+  Thanks [@paales](https://github.com/paales)! - We've moved lots of internal packages from
+  `dependencies` to `peerDependencies`. The result of this is that there will be significantly less
+  duplicate packages in the node_modules folders.
+
+* [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
+  [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)
+  Thanks [@paales](https://github.com/paales)! - Upgraded to
+  [NextJS 12.1](https://nextjs.org/blog/next-12-1)! This is just for compatibility, but we'll be
+  implementing
+  [On-demand Incremental Static Regeneration](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta)
+  soon.
+
+  This will greatly reduce the requirement to rebuid stuff and we'll add a management UI on the
+  frontend to be able to revalidate pages manually.
+
+* Updated dependencies
+  [[`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7),
+  [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2),
+  [`e7c8e2756`](https://github.com/ho-nl/m2-pwa/commit/e7c8e2756d637cbcd2e793d62ef5721d35d9fa7b),
+  [`b08a8eb1d`](https://github.com/ho-nl/m2-pwa/commit/b08a8eb1d024b9d3e7712ef034029151670db275),
+  [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d),
+  [`5a4809b1a`](https://github.com/ho-nl/m2-pwa/commit/5a4809b1a705aa32f620f520085df48ee25f9949)]:
+  - @graphcommerce/magento-cart@4.1.1
+  - @graphcommerce/magento-customer@4.1.1
+  - @graphcommerce/next-ui@4.1.1
+  - @graphcommerce/react-hook-form@3.0.2
+  - @graphcommerce/graphql@3.0.2
+
+## 2.0.1
+
+### Patch Changes
+
+- [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
+  Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
+  so that the packages link to back to the website and repository
+- Updated dependencies
+  [[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
+  - @graphcommerce/graphql@3.0.1
+  - @graphcommerce/magento-cart@4.0.1
+  - @graphcommerce/magento-customer@4.0.1
+  - @graphcommerce/next-ui@4.0.1
+  - @graphcommerce/react-hook-form@3.0.1
+
+## 2.0.0
+
+### Major Changes
+
+- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
+  [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
+  Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
+
+### Patch Changes
+
+- Updated dependencies
+  [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
+  - @graphcommerce/graphql@3.0.0
+  - @graphcommerce/magento-cart@4.0.0
+  - @graphcommerce/magento-customer@4.0.0
+  - @graphcommerce/next-ui@4.0.0
+  - @graphcommerce/react-hook-form@3.0.0
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
 # [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)
 
-
 ### Features
 
-* added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
-
-
-
-
+- added tons of translations
+  ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
 
 ## [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)
 
-
 ### Bug Fixes
 
-* **signup-newsletter:** mobile layout ([fcc3935](https://github.com/ho-nl/m2-pwa/commit/fcc3935c5733d087012f736ac70fafa58bff78bc))
-
-
-
-
+- **signup-newsletter:** mobile layout
+  ([fcc3935](https://github.com/ho-nl/m2-pwa/commit/fcc3935c5733d087012f736ac70fafa58bff78bc))
 
 ## [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)
 
-
 ### Bug Fixes
 
-* darkMode ([c7573de](https://github.com/ho-nl/m2-pwa/commit/c7573de6bb80643b26931c35ac61735539e7fbf0))
-
-
-
-
+- darkMode
+  ([c7573de](https://github.com/ho-nl/m2-pwa/commit/c7573de6bb80643b26931c35ac61735539e7fbf0))
 
 ## [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)
 
 **Note:** Version bump only for package @graphcommerce/magento-newsletter
 
-
-
-
-
 # 0.2.0 (2021-09-27)
 
-
 ### Features
 
-* added magento-newsletter package ([9b48b1b](https://github.com/ho-nl/m2-pwa/commit/9b48b1b4dc29f9ea3271f4a6370abba15dd8999c))
-* guest newsletter toggle ([c747aed](https://github.com/ho-nl/m2-pwa/commit/c747aed081b2c5c134e2be1bc4c32de2a5e6e220))
-
-
-
-
+- added magento-newsletter package
+  ([9b48b1b](https://github.com/ho-nl/m2-pwa/commit/9b48b1b4dc29f9ea3271f4a6370abba15dd8999c))
+- guest newsletter toggle
+  ([c747aed](https://github.com/ho-nl/m2-pwa/commit/c747aed081b2c5c134e2be1bc4c32de2a5e6e220))
 
 # 0.1.0 (2021-09-24)
 
-
 ### Features
 
-* added magento-newsletter package ([9b48b1b](https://github.com/ho-nl/m2-pwa/commit/9b48b1b4dc29f9ea3271f4a6370abba15dd8999c))
-* guest newsletter toggle ([c747aed](https://github.com/ho-nl/m2-pwa/commit/c747aed081b2c5c134e2be1bc4c32de2a5e6e220))
+- added magento-newsletter package
+  ([9b48b1b](https://github.com/ho-nl/m2-pwa/commit/9b48b1b4dc29f9ea3271f4a6370abba15dd8999c))
+- guest newsletter toggle
+  ([c747aed](https://github.com/ho-nl/m2-pwa/commit/c747aed081b2c5c134e2be1bc4c32de2a5e6e220))

package/components/CustomerNewsletterToggle/index.tsx

@@ -1,29 +1,24 @@
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@graphcommerce/graphql'
 import { ApolloCustomerErrorAlert } from '@graphcommerce/magento-customer'
 import { Controller, useFormAutoSubmit, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import {
+  Box,
   FormControl,
   FormControlLabel,
   FormHelperText,
-  makeStyles,
   Switch,
   SwitchProps,
-} from '@material-ui/core'
+  SxProps,
+  Theme,
+} from '@mui/material'
 import React from 'react'
 import { GetCustomerNewsletterToggleDocument } from './GetCustomerNewsLetterToggle.gql'
 import { UpdateNewsletterSubscriptionDocument } from './UpdateNewsletterSubscription.gql'
 
-export type CustomerNewsletterToggleProps = SwitchProps
-
-const useStyles = makeStyles(() => ({
-  labelRoot: {
-    marginRight: 0,
-  },
-}))
+export type CustomerNewsletterToggleProps = SwitchProps & { sx?: SxProps<Theme> }
 
 export default function CustomerNewsletterToggle(props: CustomerNewsletterToggleProps) {
-  const { disabled, ...switchProps } = props
-  const classes = useStyles(props)
+  const { disabled, sx = [], ...switchProps } = props
 
   const { loading, data } = useQuery(GetCustomerNewsletterToggleDocument, { ssr: false })
   const form = useFormGqlMutation(UpdateNewsletterSubscriptionDocument, {
@@ -40,14 +35,14 @@ export default function CustomerNewsletterToggle(props: CustomerNewsletterToggle
   if (disabled || loading) return <Switch disabled color='primary' {...switchProps} />
 
   return (
-    <form noValidate>
+    <Box component='form' onSubmit={submit} noValidate sx={sx}>
       <Controller
         name='isSubscribed'
         control={control}
         render={({ field: { onChange, value, name: controlName, ref, onBlur } }) => (
           <FormControl error={!!formState.errors.isSubscribed}>
             <FormControlLabel
-              classes={{ root: classes.labelRoot }}
+              sx={{ marginRight: 0 }}
               label=''
               control={<Switch color='primary' {...switchProps} />}
               checked={value}
@@ -64,6 +59,6 @@ export default function CustomerNewsletterToggle(props: CustomerNewsletterToggle
       />
 
       <ApolloCustomerErrorAlert error={error} />
-    </form>
+    </Box>
   )
 }

package/components/GuestNewsletterToggle/index.tsx

@@ -6,10 +6,11 @@ import {
   FormControl,
   FormControlLabel,
   FormHelperText,
-  makeStyles,
   Switch,
   SwitchProps,
-} from '@material-ui/core'
+  SxProps,
+  Theme,
+} from '@mui/material'
 import React from 'react'
 import { GetCartEmailDocument } from '../SignupNewsletter/GetCartEmail.gql'
 import {
@@ -18,17 +19,10 @@ import {
   GuestNewsletterToggleMutationVariables,
 } from './GuestNewsletterToggle.gql'
 
-export type GuestNewsletterToggleProps = SwitchProps
-
-const useStyles = makeStyles(() => ({
-  labelRoot: {
-    marginRight: 0,
-  },
-}))
+export type GuestNewsletterToggleProps = SwitchProps & { sx?: SxProps<Theme> }
 
 export default function GuestNewsletterToggle(props: GuestNewsletterToggleProps) {
-  const { ...switchProps } = props
-  const classes = useStyles(props)
+  const { sx = [], ...switchProps } = props
 
   const email =
     useCartQuery(GetCartEmailDocument, { allowUrl: true }).data?.cart?.email ?? undefined
@@ -44,7 +38,7 @@ export default function GuestNewsletterToggle(props: GuestNewsletterToggleProps)
   if (formState.isSubmitted) return <Switch color='primary' {...switchProps} checked disabled />
 
   return (
-    <Form noValidate>
+    <Form noValidate sx={sx}>
       <input type='hidden' {...register('email')} value={email} />
       <Controller
         name='isSubscribed'
@@ -52,7 +46,7 @@ export default function GuestNewsletterToggle(props: GuestNewsletterToggleProps)
         render={({ field: { onChange, value, name: controlName, ref, onBlur } }) => (
           <FormControl error={!!formState.errors.isSubscribed}>
             <FormControlLabel
-              classes={{ root: classes.labelRoot }}
+              sx={{ marginRight: 0 }}
               label=''
               control={<Switch color='primary' {...switchProps} />}
               checked={value}

package/components/SignupNewsletter/index.tsx

@@ -1,79 +1,78 @@
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@graphcommerce/graphql'
 import { useCartQuery } from '@graphcommerce/magento-cart'
 import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
-import { UseStyles } from '@graphcommerce/next-ui'
+import { extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { makeStyles, Theme, Typography } from '@material-ui/core'
-import clsx from 'clsx'
-import React from 'react'
+import { Box, SxProps, Theme, Typography } from '@mui/material'
 import CustomerNewsletterToggle from '../CustomerNewsletterToggle'
 import GuestNewsletterToggle from '../GuestNewsletterToggle'
 import { GetCartEmailDocument } from './GetCartEmail.gql'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    signup: {
-      background: theme.palette.background.paper,
-      display: 'grid',
-      alignItems: 'center',
-      gridAutoFlow: 'column',
-      columnGap: theme.spacings.xxs,
-      padding: theme.spacings.sm,
-      ...theme.typography.body1,
-      marginTop: theme.spacings.sm,
-      borderRadius: 4,
-      gridTemplateColumns: '1fr',
-      gridTemplateAreas: `
-        "a"
-        "b"
-      `,
-      justifyItems: 'start',
-      [theme.breakpoints.up('sm')]: {
-        gridTemplateAreas: `"a b c"`,
-        gridTemplateColumns: '2fr 1fr',
-      },
-    },
-    background: {
-      background: theme.palette.background.image,
-    },
-    signupForm: {
-      display: 'flex',
-      gap: 8,
-      justifySelf: 'start',
-      alignItems: 'center',
-      [theme.breakpoints.up('sm')]: {
-        justifySelf: 'end',
-      },
-    },
-  }),
-  {
-    name: 'SignupNewsletter',
-  },
-)
+type SignupNewsletterProps = { sx?: SxProps<Theme> }
 
-type SignupNewsletterProps = {
-  //
-} & UseStyles<typeof useStyles>
+const name = 'SignupNewsletter' as const
+
+type OwnerState = { isCustomer: boolean }
+const parts = ['signup', 'text', 'signupForm'] as const
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
 export default function SignupNewsletter(props: SignupNewsletterProps) {
-  const classes = useStyles(props)
+  const { sx = [] } = props
   const { data: cartData } = useCartQuery(GetCartEmailDocument, { allowUrl: true })
   const { data: customerTokenData } = useQuery(CustomerTokenDocument)
   const isCustomer = Boolean(customerTokenData?.customerToken)
 
+  const classes = withState({ isCustomer })
+
   return (
-    <div className={clsx(classes.signup, !isCustomer && classes.background)}>
-      <Typography variant='subtitle1'>
+    <Box
+      className={classes.signup}
+      sx={[
+        (theme) => ({
+          background: theme.palette.background.paper,
+          display: 'grid',
+          alignItems: 'center',
+          gridAutoFlow: 'column',
+          columnGap: theme.spacings.xxs,
+          padding: theme.spacings.sm,
+          typgraphy: 'body1',
+          marginTop: theme.spacings.sm,
+          borderRadius: '4px',
+          gridTemplateColumns: '1fr',
+          gridTemplateAreas: `"a" "b"`,
+          justifyItems: 'start',
+          [theme.breakpoints.up('sm')]: {
+            gridTemplateAreas: `"a b c"`,
+            gridTemplateColumns: '2fr 1fr',
+          },
+
+          '&.isCustomer': {
+            background: theme.palette.background.image,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Typography variant='subtitle1' className={classes.text}>
         <Trans>Sign up for our newsletter and stay updated</Trans>
       </Typography>
-      <div className={classes.signupForm}>
+      <Box
+        className={classes.signupForm}
+        sx={(theme) => ({
+          display: 'flex',
+          gap: 8,
+          justifySelf: 'start',
+          alignItems: 'center',
+          [theme.breakpoints.up('sm')]: { justifySelf: 'end' },
+        })}
+      >
         {isCustomer ? (
           <CustomerNewsletterToggle color='primary' />
         ) : (
           <GuestNewsletterToggle color='primary' />
         )}
         {cartData?.cart?.email}
-      </div>
-    </div>
+      </Box>
+    </Box>
   )
 }

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@graphcommerce/magento-newsletter",
-  "version": "1.1.47",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "2.0.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
-  "browserslist": [
-    "extends @graphcommerce/browserslist-config-pwa"
-  ],
   "eslintConfig": {
     "extends": "@graphcommerce/eslint-config-pwa",
     "parserOptions": {
@@ -13,27 +12,24 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/browserslist-config-pwa": "^3.0.3",
-    "@graphcommerce/eslint-config-pwa": "^3.1.10",
-    "@graphcommerce/prettier-config-pwa": "^3.0.5",
-    "@graphcommerce/typescript-config-pwa": "^3.1.2",
-    "@playwright/test": "^1.17.1"
+    "@graphcommerce/eslint-config-pwa": "^4.0.2",
+    "@graphcommerce/prettier-config-pwa": "^4.0.1",
+    "@graphcommerce/typescript-config-pwa": "^4.0.1",
+    "@playwright/test": "^1.19.1"
   },
   "dependencies": {
-    "@apollo/client": "^3.5.6",
-    "@graphcommerce/graphql": "^2.105.13",
-    "@graphcommerce/magento-cart": "^3.10.3",
-    "@graphcommerce/magento-customer": "^3.6.44",
-    "@graphcommerce/next-ui": "^3.25.3",
-    "@graphcommerce/react-hook-form": "^2.104.7",
-    "@lingui/macro": "^3.13.0",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "clsx": "^1.1.1",
-    "framer-motion": "^5.5.5",
-    "next": "^12.0.7",
+    "@graphcommerce/graphql": "^3.0.2",
+    "@graphcommerce/magento-cart": "^4.1.1",
+    "@graphcommerce/magento-customer": "^4.1.1",
+    "@graphcommerce/next-ui": "^4.1.1",
+    "@graphcommerce/react-hook-form": "^3.0.2"
+  },
+  "peerDependencies": {
+    "@lingui/macro": "^3.13.2",
+    "@mui/material": "^5.4.1",
+    "framer-motion": "^6.2.4",
+    "next": "^12.0.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
-  },
-  "gitHead": "41e42c8cd6f565ab0cbba81a1954a0041dc46768"
+  }
 }