@graphcommerce/magento-cart 8.1.0-canary.5 → 8.1.0-canary.50

package/Api/CartItemCountChanged.graphql

@@ -1,4 +1,4 @@
-fragment CartItemCountChanged on Cart @injectable {
+fragment CartItemCountChanged on Cart {
   __typename
   id
   total_quantity

package/CHANGELOG.md

@@ -1,5 +1,130 @@
 # Change Log
 
+## 8.1.0-canary.50
+
+## 8.1.0-canary.49
+
+## 8.1.0-canary.48
+
+## 8.1.0-canary.47
+
+## 8.1.0-canary.46
+
+## 8.1.0-canary.45
+
+### Patch Changes
+
+- [#2216](https://github.com/graphcommerce-org/graphcommerce/pull/2216) [`2faebf1`](https://github.com/graphcommerce-org/graphcommerce/commit/2faebf16fbda95390872ac0debe979fa570ed904) - When signing in make sure the cart isn't merged if the login is unsuccesful
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.44
+
+## 8.1.0-canary.43
+
+## 8.1.0-canary.42
+
+## 8.1.0-canary.41
+
+## 8.1.0-canary.40
+
+## 8.1.0-canary.39
+
+## 8.1.0-canary.38
+
+### Minor Changes
+
+- [#2305](https://github.com/graphcommerce-org/graphcommerce/pull/2305) [`77e8297`](https://github.com/graphcommerce-org/graphcommerce/commit/77e82976816994336c616208a651cb18ce9ea270) - Add company and vat fields to shipping and billing forms
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+### Patch Changes
+
+- [#2305](https://github.com/graphcommerce-org/graphcommerce/pull/2305) [`77e8297`](https://github.com/graphcommerce-org/graphcommerce/commit/77e82976816994336c616208a651cb18ce9ea270) - Fix bug with persist not applying saved changes by moving <FromPersist/> below the form components
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 8.1.0-canary.37
+
+## 8.1.0-canary.36
+
+## 8.1.0-canary.35
+
+### Patch Changes
+
+- [#2301](https://github.com/graphcommerce-org/graphcommerce/pull/2301) [`13d0649`](https://github.com/graphcommerce-org/graphcommerce/commit/13d06498d121f93b52c25930e50aa3b0bd12a818) - Created a new EmailElement component to make re-use easier
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 8.1.0-canary.34
+
+### Minor Changes
+
+- [#2303](https://github.com/graphcommerce-org/graphcommerce/pull/2303) [`f407e96`](https://github.com/graphcommerce-org/graphcommerce/commit/f407e961868683a257c8f7fe8ceb588fb825db9b) - Get shippingMethodPrices from selected shipping method if supported on the magento version
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 8.1.0-canary.33
+
+## 8.1.0-canary.32
+
+## 8.1.0-canary.31
+
+## 8.1.0-canary.30
+
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+## 8.1.0-canary.26
+
+## 8.1.0-canary.25
+
+### Patch Changes
+
+- [#2266](https://github.com/graphcommerce-org/graphcommerce/pull/2266) [`0d1fe7a`](https://github.com/graphcommerce-org/graphcommerce/commit/0d1fe7a26ed2d18510c8767795294654c478fb88) - Enable the use of one or more anchor links within the 'checkbox_text' field and customize their paths.
+  ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.1.0-canary.24
+
+## 8.1.0-canary.23
+
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
+## 8.1.0-canary.9
+
+## 8.1.0-canary.8
+
+### Patch Changes
+
+- [#2247](https://github.com/graphcommerce-org/graphcommerce/pull/2247) [`a56a7c6`](https://github.com/graphcommerce-org/graphcommerce/commit/a56a7c67cf27dfb91bf763a873beeec562ab3156) - Solve an issue where the cart would be sometimes undefined, but Partial was too eleborate
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.7
+
+## 8.1.0-canary.6
+
 ## 8.1.0-canary.5
 
 ## 8.0.6-canary.4

package/components/CartAddress/CartAddress.graphql

@@ -4,6 +4,7 @@ fragment CartAddress on CartAddressInterface {
   lastname
   city
   company
+  vat_id
   country {
     code
     label

package/components/CartAgreementsForm/CartAgreementsForm.tsx

@@ -8,7 +8,7 @@ import {
   UseFormComposeOptions,
 } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import { Box, Link, SxProps, Theme } from '@mui/material'
+import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
 import React from 'react'
 import { CartAgreementsDocument } from './CartAgreements.gql'
 
@@ -18,16 +18,27 @@ const componentName = 'CartAgreementsForm' as const
 const parts = ['form', 'formInner', 'formControlRoot', 'manualCheck'] as const
 const { classes } = extendableComponent(componentName, parts)
 
+/**
+ * Checks if a string contains an anchor tag (<a> ... </a>).
+ * @param {string} str - The string to check.
+ * @returns {boolean} - True if the string contains an anchor tag, otherwise false.
+ */
+const containsAnchorTag = (str: string): boolean => {
+  const anchorTagRegex = /<a\s+[^>]*>(.*?)<\/a>/i
+  return anchorTagRegex.test(str)
+}
+
 export function CartAgreementsForm(props: CartAgreementsFormProps) {
   const { step, sx = [] } = props
   const { data } = useQuery(CartAgreementsDocument)
 
   // sort conditions so checkboxes will be placed first
   const sortedAgreements = data?.checkoutAgreements
-    ? [...data.checkoutAgreements].sort((a, b) =>
-        // eslint-disable-next-line no-nested-ternary
-        a?.mode === 'MANUAL' ? -1 : b?.mode === 'MANUAL' ? 1 : 0,
-      )
+    ? [...data.checkoutAgreements]?.sort((a, b) => {
+        if (a?.mode === 'MANUAL') return -1
+        if (b?.mode === 'MANUAL') return 1
+        return 0
+      })
     : []
 
   const form = useForm()
@@ -48,7 +59,6 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
       className={classes.form}
       sx={[(theme) => ({ pt: theme.spacings.md }), ...(Array.isArray(sx) ? sx : [sx])]}
     >
-      <FormPersist form={form} name='PaymentAgreementsForm' />
       <form noValidate onSubmit={submit} name='cartAgreements'>
         <Box className={classes.formInner} sx={{ typography: 'body1', display: 'inline-block' }}>
           {data?.checkoutAgreements &&
@@ -56,6 +66,45 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
               if (!agreement) return null
               const href = `/checkout/terms/${agreement.name?.toLowerCase().replace(/\s+/g, '-')}`
               const agreementTextParts = agreement.checkbox_text.split(agreement.name)
+              // check if the agreement text contains an anchor tag
+              const containsLink = containsAnchorTag(agreement.checkbox_text)
+              let labelContent: React.ReactNode
+
+              if (containsLink) {
+                labelContent = (
+                  <Typography
+                    dangerouslySetInnerHTML={{ __html: agreement.checkbox_text }}
+                    sx={{
+                      '& a': {
+                        color: 'secondary.main',
+                        textDecoration: 'none',
+                        '&:hover, &:focus, &:active': {
+                          textDecoration: 'underline',
+                        },
+                      },
+                    }}
+                  />
+                )
+              } else if (
+                agreement.mode === 'MANUAL' &&
+                agreement.checkbox_text.includes(agreement.name)
+              ) {
+                labelContent = (
+                  <>
+                    {agreementTextParts[0]}
+                    <Link href={href} color='secondary' underline='hover'>
+                      {agreement.name}
+                    </Link>
+                    {agreementTextParts[1]}
+                  </>
+                )
+              } else {
+                labelContent = (
+                  <Link href={href} color='secondary' underline='hover'>
+                    {agreement.checkbox_text}
+                  </Link>
+                )
+              }
 
               return (
                 <React.Fragment key={agreement.agreement_id}>
@@ -72,27 +121,11 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
                       rules={{
                         required: i18n._(/* i18n */ 'You have to agree in order to proceed'),
                       }}
-                      label={
-                        agreement.checkbox_text.includes(agreement.name) ? (
-                          <>
-                            {agreementTextParts[0]}
-                            <Link href={href} color='secondary' underline='hover'>
-                              {agreement.name}
-                            </Link>
-                            {agreementTextParts[1]}
-                          </>
-                        ) : (
-                          <Link href={href} color='secondary' underline='hover'>
-                            {agreement.checkbox_text}
-                          </Link>
-                        )
-                      }
+                      label={labelContent}
                     />
                   ) : (
                     <Box className={classes.manualCheck} sx={{ padding: `9px 0` }}>
-                      <Link href={href} color='secondary' underline='hover'>
-                        {agreement.checkbox_text}
-                      </Link>
+                      {labelContent}
                     </Box>
                   )}
                 </React.Fragment>
@@ -100,6 +133,7 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
             })}
         </Box>
       </form>
+      <FormPersist form={form} name='PaymentAgreementsForm' />
     </FormDiv>
   )
 }

package/components/CartStartCheckout/CartStartCheckout.graphql

@@ -1,4 +1,4 @@
-fragment CartStartCheckout on Cart @injectable {
+fragment CartStartCheckout on Cart {
   prices {
     grand_total {
       ...Money

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -5,14 +5,15 @@ import { Box, Button, ButtonProps, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
-export type CartStartCheckoutProps = Partial<CartStartCheckoutFragment> & {
+export type CartStartCheckoutProps = {
   children?: React.ReactNode
   sx?: SxProps<Theme>
   buttonProps?: ButtonProps<'button'>
   disabled?: boolean
+  cart?: CartStartCheckoutFragment | null | undefined
   onStart?: (
     e: React.MouseEvent<HTMLButtonElement>,
-    cart: Partial<CartStartCheckoutFragment>,
+    cart: CartStartCheckoutFragment | null | undefined,
   ) => void
 }
 
@@ -32,11 +33,11 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
     buttonProps: { onClick, ...buttonProps } = {},
     disabled,
     sx = [],
-    ...cart
+    cart,
   } = props
 
-  const hasTotals = (cart.prices?.grand_total?.value ?? 0) > 0
-  const hasErrors = cart.items?.some((item) => (item?.errors?.length ?? 0) > 0)
+  const hasTotals = (cart?.prices?.grand_total?.value ?? 0) > 0
+  const hasErrors = cart?.items?.some((item) => (item?.errors?.length ?? 0) > 0)
 
   return (
     <Box
@@ -74,7 +75,7 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
         </Box>{' '}
         {hasTotals && (
           <span className={classes.checkoutMoney}>
-            <Money {...cart.prices?.grand_total} />
+            <Money {...cart?.prices?.grand_total} />
           </span>
         )}
       </Button>

package/components/CartStartCheckout/CartStartCheckoutLinkOrButton.tsx

@@ -4,13 +4,14 @@ import { SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { CartStartCheckoutFragment } from './CartStartCheckout.gql'
 
-export type CartStartCheckoutLinkOrButtonProps = Partial<CartStartCheckoutFragment> & {
+export type CartStartCheckoutLinkOrButtonProps = {
   children?: React.ReactNode
   sx?: SxProps<Theme>
   disabled?: boolean
+  cart?: CartStartCheckoutFragment | null | undefined
   onStart?: (
     e: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement>,
-    cart: Partial<CartStartCheckoutFragment>,
+    cart: CartStartCheckoutFragment | null | undefined,
   ) => void
   linkOrButtonProps?: LinkOrButtonProps
 }
@@ -21,11 +22,11 @@ export function CartStartCheckoutLinkOrButton(props: CartStartCheckoutLinkOrButt
     onStart,
     disabled,
     linkOrButtonProps: { onClick, button, ...linkOrButtonProps } = {},
-    ...cart
+    cart,
   } = props
 
-  const hasTotals = (cart.prices?.grand_total?.value ?? 0) > 0
-  const hasErrors = cart.items?.some((item) => (item?.errors?.length ?? 0) > 0)
+  const hasTotals = (cart?.prices?.grand_total?.value ?? 0) > 0
+  const hasErrors = cart?.items?.some((item) => (item?.errors?.length ?? 0) > 0)
 
   return (
     <LinkOrButton

package/components/CartTotals/CartTotals.graphql

@@ -1,6 +1,4 @@
-fragment CartTotals on Cart
-@injectable
-@inject(into: ["CartItemCountChanged", "PaymentMethodUpdated"]) {
+fragment CartTotals on Cart @inject(into: ["CartItemCountChanged", "PaymentMethodUpdated"]) {
   shipping_addresses {
     selected_shipping_method {
       carrier_code
@@ -10,8 +8,14 @@ fragment CartTotals on Cart
       amount {
         ...Money
       }
+      price_excl_tax {
+        ...Money
+      }
+      price_incl_tax {
+        ...Money
+      }
     }
-    # todo: https://github.com/magento/magento2/pull/31322
+    # todo: When 245 is not supported anymore, remove available_shipping_methods from fragment.
     available_shipping_methods {
       carrier_code
       method_code

package/components/CartTotals/CartTotals.tsx

@@ -42,12 +42,15 @@ export function CartTotals(props: CartTotalsProps) {
   const { shipping_addresses, prices } = data.cart
   const shippingMethod = shipping_addresses?.[0]?.selected_shipping_method
 
-  const shippingMethodPrices = shipping_addresses?.[0]?.available_shipping_methods?.find(
-    (avail) =>
-      (shippingMethod?.amount?.value ?? 0) > 0 &&
-      avail?.carrier_code === shippingMethod?.carrier_code &&
-      avail?.method_code === shippingMethod?.method_code,
-  )
+  const shippingMethodPrices =
+    import.meta.graphCommerce.magentoVersion >= 246
+      ? shippingMethod
+      : shipping_addresses?.[0]?.available_shipping_methods?.find(
+          (avail) =>
+            (shippingMethod?.amount?.value ?? 0) > 0 &&
+            avail?.carrier_code === shippingMethod?.carrier_code &&
+            avail?.method_code === shippingMethod?.method_code,
+        )
 
   return (
     <Box

package/components/InlineAccount/InlineAccount.tsx

@@ -1,4 +1,3 @@
-import { useQuery } from '@graphcommerce/graphql'
 import {
   SignUpFormInline,
   IsEmailAvailableDocument,
@@ -7,7 +6,6 @@ import {
 } from '@graphcommerce/magento-customer'
 import { Button, FormRow, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { Box, SxProps, TextField, Theme, Typography } from '@mui/material'
 import React, { useState } from 'react'
 import { useCartQuery } from '../../hooks/useCartQuery'
@@ -101,8 +99,7 @@ export function InlineAccount(props: InlineAccountProps) {
             <FormRow>
               <TextField
                 variant='outlined'
-                type='email'
-                label='Email'
+                label={<Trans id='Email address' />}
                 value={cart?.email}
                 InputProps={{
                   readOnly: true,

package/components/OrderSucces/OrderSuccesPage.graphql

@@ -1,4 +1,4 @@
-fragment OrderSuccesPage on Cart @injectable {
+fragment OrderSuccesPage on Cart {
   ...CartItems
   ...CartTotals
 }

package/hooks/useFormGqlMutationCart.ts

@@ -12,7 +12,7 @@ export function useFormGqlMutationCart<
   V extends { cartId: string; [index: string]: unknown },
 >(
   document: TypedDocumentNode<Q, V>,
-  options: UseFormGraphQlOptions<Q, V> = {},
+  options: UseFormGraphQlOptions<Q, V> & { submitWhileLocked?: boolean } = {},
   operationOptions?: MutationHookOptions<Q, V>,
 ): UseFormGqlMutationReturn<Q, V> {
   const cartId = useCartIdCreate()
@@ -26,7 +26,11 @@ export function useFormGqlMutationCart<
         const vars = { ...variables, cartId: await cartId() }
 
         const res = client.cache.readQuery({ query: CurrentCartIdDocument })
-        if (res?.currentCartId?.locked) return false
+        if (!options.submitWhileLocked && res?.currentCartId?.locked) {
+          console.log('Could not submit form, cart is locked', res.currentCartId.locked)
+          return false
+        }
+
         return options.onBeforeSubmit ? options.onBeforeSubmit(vars) : vars
       },
     },

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.5",
+  "version": "8.1.0-canary.50",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.5",
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.5",
-    "@graphcommerce/framer-next-pages": "^8.1.0-canary.5",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.5",
-    "@graphcommerce/framer-utils": "^8.1.0-canary.5",
-    "@graphcommerce/graphql": "^8.1.0-canary.5",
-    "@graphcommerce/image": "^8.1.0-canary.5",
-    "@graphcommerce/magento-customer": "^8.1.0-canary.5",
-    "@graphcommerce/magento-graphql": "^8.1.0-canary.5",
-    "@graphcommerce/magento-store": "^8.1.0-canary.5",
-    "@graphcommerce/next-ui": "^8.1.0-canary.5",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.5",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.5",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.5",
+    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.50",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.50",
+    "@graphcommerce/framer-next-pages": "^8.1.0-canary.50",
+    "@graphcommerce/framer-scroller": "^8.1.0-canary.50",
+    "@graphcommerce/framer-utils": "^8.1.0-canary.50",
+    "@graphcommerce/graphql": "^8.1.0-canary.50",
+    "@graphcommerce/image": "^8.1.0-canary.50",
+    "@graphcommerce/magento-customer": "^8.1.0-canary.50",
+    "@graphcommerce/magento-graphql": "^8.1.0-canary.50",
+    "@graphcommerce/magento-store": "^8.1.0-canary.50",
+    "@graphcommerce/next-ui": "^8.1.0-canary.50",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.50",
+    "@graphcommerce/react-hook-form": "^8.1.0-canary.50",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.50",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/MagentoCartGraphqlProvider.tsx

@@ -1,12 +1,14 @@
 import { GraphQLProviderProps } from '@graphcommerce/graphql'
-import type { PluginProps } from '@graphcommerce/next-config'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { cartErrorLink } from '../link/createCartErrorLink'
 import { cartTypePolicies, migrateCart } from '../typePolicies'
 
-export const component = 'GraphQLProvider'
-export const exported = '@graphcommerce/graphql'
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/graphql',
+}
 
-function MagentoCartGraphqlProvider(props: PluginProps<GraphQLProviderProps>) {
+export function GraphQLProvider(props: PluginProps<GraphQLProviderProps>) {
   const { Prev, links = [], policies = [], migrations = [], ...rest } = props
   return (
     <Prev
@@ -17,5 +19,3 @@ function MagentoCartGraphqlProvider(props: PluginProps<GraphQLProviderProps>) {
     />
   )
 }
-
-export const Plugin = MagentoCartGraphqlProvider

package/plugins/useSignInFormMergeCart.ts

@@ -16,6 +16,7 @@ const useSignInFormMergeCart: MethodPlugin<typeof useSignInForm> = (useSignInFor
     ...options,
     onComplete: async (data, variables) => {
       await options.onComplete?.(data, variables)
+      if (data.errors) return
 
       cartLock(client.cache, true)
 

package/typePolicies.ts

@@ -24,6 +24,7 @@ export const cartTypePolicies: StrictTypedTypePolicies = {
           return merged ? [merged] : []
         },
       },
+      items: { merge: (_, incoming) => incoming },
       prices: {
         merge: (existing: CartPrices[] | undefined, incoming: CartPrices[], options) =>
           options.mergeObjects(existing ?? {}, incoming),

package/hooks/CurrentCartId.graphqls

@@ -1,12 +0,0 @@
-extend type Query {
-  currentCartId: CurrentCartId
-}
-
-type CurrentCartId {
-  id: String
-  locked: Boolean
-}
-
-input RegisterCartIdInput {
-  cart_id: String!
-}