@graphcommerce/magento-newsletter 2.1.7 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Change Log
 
+## 2.2.0
+
+### Minor Changes
+
+- [#1645](https://github.com/graphcommerce-org/graphcommerce/pull/1645) [`f0ddcb868`](https://github.com/graphcommerce-org/graphcommerce/commit/f0ddcb86815d0525842c79a168c08e99f5799c76) Thanks [@Jessevdpoel](https://github.com/Jessevdpoel)! - Added Subscribe to newsletter checkbox
+
+### Patch Changes
+
+- Updated dependencies [[`42e7fac75`](https://github.com/graphcommerce-org/graphcommerce/commit/42e7fac75712f9bda7a6b919ede14b3c75d07771)]:
+  - @graphcommerce/next-ui@4.26.0
+  - @graphcommerce/magento-cart@4.8.3
+  - @graphcommerce/magento-customer@4.11.3
+
+## 2.1.8
+
+### Patch Changes
+
+- Updated dependencies [[`dc6237644`](https://github.com/graphcommerce-org/graphcommerce/commit/dc6237644ac349debb728059e4c937cec25bf4fd), [`48273bccd`](https://github.com/graphcommerce-org/graphcommerce/commit/48273bccd2e471ce4bc024a600e693da791f1cde)]:
+  - @graphcommerce/next-ui@4.25.0
+  - @graphcommerce/magento-cart@4.8.2
+  - @graphcommerce/magento-customer@4.11.2
+
 ## 2.1.7
 
 ### Patch Changes

package/components/CheckoutNewsletter/CheckoutNewsletter.tsx

@@ -0,0 +1,57 @@
+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 } from '@graphcommerce/react-hook-form'
+import { Box, SxProps, Theme } from '@mui/material'
+import { GetCustomerNewsletterToggleDocument } from '../CustomerNewsletterToggle/GetCustomerNewsLetterToggle.gql'
+import { GetCartEmailDocument } from '../SignupNewsletter/GetCartEmail.gql'
+import { SubscribeCustomerDocument } from './SubscribeCustomer.gql'
+import {
+  SubscribeGuestDocument,
+  SubscribeGuestMutation,
+  SubscribeGuestMutationVariables,
+} from './SubscribeGuest.gql'
+
+type CheckoutNewsletterProps = {
+  step: number
+  checked?: boolean
+  label: string
+  sx?: SxProps<Theme>
+}
+
+export function SubscribeToNewsletter(props: CheckoutNewsletterProps) {
+  const { step, checked = false, label, sx } = props
+  const cartEmail = useCartQuery(GetCartEmailDocument).data?.cart?.email
+
+  const { loggedIn } = useCustomerSession()
+  const isCustomerSubscribed = useCustomerQuery(GetCustomerNewsletterToggleDocument).data?.customer
+    ?.is_subscribed
+
+  const form = useFormGqlMutation<
+    SubscribeGuestMutation,
+    SubscribeGuestMutationVariables & { subscribe: boolean }
+  >(
+    loggedIn ? (SubscribeCustomerDocument as DocumentNode) : SubscribeGuestDocument,
+    {
+      defaultValues: { subscribe: checked },
+      onBeforeSubmit: ({ subscribe }) =>
+        subscribe ? { subscribe, email: cartEmail ?? '' } : false,
+    },
+    { errorPolicy: 'all' },
+  )
+  const { control, handleSubmit } = form
+  const submit = handleSubmit(() => {})
+
+  useFormCompose({ form, step, submit, key: 'NewsletterSubscribeForm' })
+
+  if (isCustomerSubscribed) return null
+
+  return (
+    <Box sx={sx}>
+      <form onSubmit={submit} noValidate>
+        <CheckboxElement color='secondary' control={control} name='subscribe' label={label} />
+      </form>
+    </Box>
+  )
+}

package/components/CheckoutNewsletter/SubscribeCustomer.graphql

@@ -0,0 +1,7 @@
+mutation SubscribeCustomer {
+  updateCustomer(input: { is_subscribed: true }) {
+    customer {
+      is_subscribed
+    }
+  }
+}

package/components/CheckoutNewsletter/SubscribeGuest.graphql

@@ -0,0 +1,5 @@
+mutation SubscribeGuest($email: String!) {
+  subscribeEmailToNewsletter(email: $email) {
+    status
+  }
+}

package/components/index.ts

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-newsletter",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "2.1.7",
+  "version": "2.2.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,9 +19,9 @@
   },
   "dependencies": {
     "@graphcommerce/graphql": "3.4.8",
-    "@graphcommerce/magento-cart": "4.8.1",
-    "@graphcommerce/magento-customer": "4.11.1",
-    "@graphcommerce/next-ui": "4.24.0",
+    "@graphcommerce/magento-cart": "4.8.3",
+    "@graphcommerce/magento-customer": "4.11.3",
+    "@graphcommerce/next-ui": "4.26.0",
     "@graphcommerce/react-hook-form": "3.3.3"
   },
   "peerDependencies": {