@graphcommerce/magento-cart-shipping-method 8.1.0-canary.8 → 9.0.0-canary.100

package/Api/AvailableShippingMethods.graphql

@@ -1,4 +1,4 @@
-fragment AvailableShippingMethods on Cart @injectable @inject(into: ["ShippingAddress"]) {
+fragment AvailableShippingMethods on Cart @inject(into: ["ShippingAddress"]) {
   shipping_addresses {
     available_shipping_methods {
       ...AvailableShippingMethod

package/Api/ShippingMethodSelected.graphql

@@ -1,4 +1,4 @@
-fragment ShippingMethodSelected on Cart @injectable {
+fragment ShippingMethodSelected on Cart {
   id
   shipping_addresses {
     selected_shipping_method {

package/CHANGELOG.md

@@ -1,5 +1,201 @@
 # Change Log
 
+## 9.0.0-canary.100
+
+## 9.0.0-canary.99
+
+## 9.0.0-canary.98
+
+## 9.0.0-canary.97
+
+## 9.0.0-canary.96
+
+## 9.0.0-canary.95
+
+## 9.0.0-canary.94
+
+## 9.0.0-canary.93
+
+## 9.0.0-canary.92
+
+## 9.0.0-canary.91
+
+## 9.0.0-canary.90
+
+## 9.0.0-canary.89
+
+## 9.0.0-canary.88
+
+## 9.0.0-canary.87
+
+## 9.0.0-canary.86
+
+## 9.0.0-canary.85
+
+## 9.0.0-canary.84
+
+## 9.0.0-canary.83
+
+## 9.0.0-canary.82
+
+## 9.0.0-canary.81
+
+## 9.0.0-canary.80
+
+### Minor Changes
+
+- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`1d6512d`](https://github.com/graphcommerce-org/graphcommerce/commit/1d6512d4118cfb46602aa1f2432c3566fdb3261d) - Rename experimental_useV2 prop to deprecated_useV1 in useFromGql and enable it by default ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 9.0.0-canary.79
+
+## 9.0.0-canary.78
+
+## 9.0.0-canary.77
+
+## 9.0.0-canary.76
+
+## 9.0.0-canary.75
+
+## 9.0.0-canary.74
+
+## 9.0.0-canary.73
+
+## 9.0.0-canary.72
+
+## 9.0.0-canary.71
+
+## 9.0.0-canary.70
+
+## 9.0.0-canary.69
+
+## 9.0.0-canary.68
+
+### Patch Changes
+
+- [#2340](https://github.com/graphcommerce-org/graphcommerce/pull/2340) [`18691c7`](https://github.com/graphcommerce-org/graphcommerce/commit/18691c71e6940e8baa8f93c3b798be4d6e5a8a9a) - Select the only available shipping method as the current cart shipping method when there is only one shipping method available. ([@LaurensFranken](https://github.com/LaurensFranken))
+
+## 9.0.0-canary.67
+
+## 9.0.0-canary.66
+
+## 9.0.0-canary.65
+
+## 9.0.0-canary.64
+
+## 9.0.0-canary.63
+
+## 9.0.0-canary.62
+
+## 9.0.0-canary.61
+
+## 9.0.0-canary.60
+
+## 9.0.0-canary.59
+
+## 9.0.0-canary.58
+
+## 9.0.0-canary.57
+
+## 9.0.0-canary.56
+
+## 9.0.0-canary.55
+
+## 9.0.0-canary.54
+
+## 8.1.0-canary.53
+
+## 8.1.0-canary.52
+
+## 8.1.0-canary.51
+
+## 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
+
+## 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
+
+## 8.1.0-canary.37
+
+## 8.1.0-canary.36
+
+## 8.1.0-canary.35
+
+## 8.1.0-canary.34
+
+## 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
+
+## 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
+
+### Patch Changes
+
+- [#2264](https://github.com/graphcommerce-org/graphcommerce/pull/2264) [`e5291a4`](https://github.com/graphcommerce-org/graphcommerce/commit/e5291a426c57635f69fb9ec44f4abe150f04c9ed) - prevent rendering 'null' when method_title is not provided ([@carlocarels90](https://github.com/carlocarels90))
+
+## 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
 
 ## 8.1.0-canary.7
@@ -16,8 +212,7 @@
 
 ### Patch Changes
 
-- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`530076e`](https://github.com/graphcommerce-org/graphcommerce/commit/530076e3664703cb8b577b7fcf1998a420819f60) - Moved all usages of useFormPersist to the <FormPersist/> component to prevent rerenders.
-  ([@FrankHarland](https://github.com/FrankHarland))
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`530076e`](https://github.com/graphcommerce-org/graphcommerce/commit/530076e3664703cb8b577b7fcf1998a420819f60) - Moved all usages of useFormPersist to the <FormPersist/> component to prevent rerenders. ([@FrankHarland](https://github.com/FrankHarland))
 
 ## 8.0.6-canary.1
 
@@ -95,11 +290,9 @@
 
 ### Patch Changes
 
-- [#2093](https://github.com/graphcommerce-org/graphcommerce/pull/2093) [`112b041`](https://github.com/graphcommerce-org/graphcommerce/commit/112b041f01a33fbd521ce3eb3955844f96b29917) - Created a new experimental mutation abort feature inside `useFormGql`. This will allow redundant mutations to be canceled. This is enabled when the `experimental_useV2` prop on the `useFormGql` hook is used.
-  ([@mikekeehnen](https://github.com/mikekeehnen))
+- [#2093](https://github.com/graphcommerce-org/graphcommerce/pull/2093) [`112b041`](https://github.com/graphcommerce-org/graphcommerce/commit/112b041f01a33fbd521ce3eb3955844f96b29917) - Created a new experimental mutation abort feature inside `useFormGql`. This will allow redundant mutations to be canceled. This is enabled when the `experimental_useV2` prop on the `useFormGql` hook is used. ([@mikekeehnen](https://github.com/mikekeehnen))
 
-- [#2115](https://github.com/graphcommerce-org/graphcommerce/pull/2115) [`105a1af`](https://github.com/graphcommerce-org/graphcommerce/commit/105a1af8b820de8873e430ae398f1922d39a9110) - Disabled ripple animations on all ActionCard ‘Select’ and ‘Change’ so the rendering is more subtle during checkout.
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2115](https://github.com/graphcommerce-org/graphcommerce/pull/2115) [`105a1af`](https://github.com/graphcommerce-org/graphcommerce/commit/105a1af8b820de8873e430ae398f1922d39a9110) - Disabled ripple animations on all ActionCard ‘Select’ and ‘Change’ so the rendering is more subtle during checkout. ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
 ## 8.0.0-canary.100
 
@@ -1431,31 +1624,31 @@
   All occurences of `<Trans>` and `t` need to be replaced:
 
   ```tsx
-  import { Trans, t } from "@lingui/macro";
+  import { Trans, t } from '@lingui/macro'
 
   function MyComponent() {
-    const foo = "bar";
+    const foo = 'bar'
     return (
       <div aria-label={t`Account ${foo}`}>
         <Trans>My Translation {foo}</Trans>
       </div>
-    );
+    )
   }
   ```
 
   Needs to be replaced with:
 
   ```tsx
-  import { Trans } from "@lingui/react";
-  import { i18n } from "@lingui/core";
+  import { Trans } from '@lingui/react'
+  import { i18n } from '@lingui/core'
 
   function MyComponent() {
-    const foo = "bar";
+    const foo = 'bar'
     return (
       <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
-        <Trans key="My Translation {foo}" values={{ foo }}></Trans>
+        <Trans key='My Translation {foo}' values={{ foo }}></Trans>
       </div>
-    );
+    )
   }
   ```
 

package/components/ShippingMethodForm/ShippingMethodActionCard.tsx

@@ -1,6 +1,7 @@
+import { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
 import { useDisplayInclTax } from '@graphcommerce/magento-cart/hooks'
 import { Money } from '@graphcommerce/magento-store'
-import { ActionCard, ActionCardItemRenderProps } from '@graphcommerce/next-ui'
+import { ActionCard } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button, Chip } from '@mui/material'
 import { AvailableShippingMethodFragment } from '../../AvailableShippingMethod/AvailableShippingMethod.gql'
@@ -26,7 +27,7 @@ export function ShippingMethodActionCard(props: ShippingMethodActionCardProps) {
   const isFree = amount && amount.value === 0
 
   const title =
-    carrier_title === 'Free Shipping' ? carrier_title : `${carrier_title} ${method_title}`
+    carrier_title === 'Free Shipping' ? carrier_title : `${carrier_title} ${method_title || ''}`
 
   return (
     <ActionCard

package/components/ShippingMethodForm/ShippingMethodForm.tsx

@@ -1,15 +1,14 @@
+import {
+  ActionCardItemBase,
+  ActionCardItemRenderProps,
+  ActionCardListForm,
+} from '@graphcommerce/ecommerce-ui'
 import {
   ApolloCartErrorAlert,
   useCartQuery,
   useFormGqlMutationCart,
 } from '@graphcommerce/magento-cart'
-import {
-  Form,
-  FormHeader,
-  ActionCardItemBase,
-  ActionCardItemRenderProps,
-  ActionCardListForm,
-} from '@graphcommerce/next-ui'
+import { Form, FormHeader } from '@graphcommerce/next-ui'
 import {
   FormAutoSubmit,
   FormProvider,
@@ -21,7 +20,7 @@ import {
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 import { SxProps, Theme } from '@mui/material'
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { GetShippingMethodsDocument } from './GetShippingMethods.gql'
 import { ShippingMethodActionCard } from './ShippingMethodActionCard'
 import {
@@ -45,10 +44,9 @@ function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
 export function ShippingMethodForm(props: ShippingMethodFormProps) {
   const { step, sx, children, onBeforeSubmit = (vars) => vars, ...options } = props
   const { data: cartQuery } = useCartQuery(GetShippingMethodsDocument)
-  const availableMethods = (
-    cartQuery?.cart?.shipping_addresses?.[0]?.available_shipping_methods ?? []
-  ).filter(notEmpty)
-  const selectedMethod = cartQuery?.cart?.shipping_addresses?.[0]?.selected_shipping_method
+
+  const shippingAddress = cartQuery?.cart?.shipping_addresses?.[0]
+  const availableMethods = (shippingAddress?.available_shipping_methods ?? []).filter(notEmpty)
 
   const items = useMemo(
     () =>
@@ -67,19 +65,18 @@ export function ShippingMethodForm(props: ShippingMethodFormProps) {
     [availableMethods],
   )
 
-  // The default: When there is only a single shipping method, select that one.
-  let carrierMethod: string | undefined = items.length === 1 ? items[0]?.value : undefined
-
   // Override with the currently selected method if there is one.
-  if (selectedMethod?.method_code)
-    carrierMethod = `${selectedMethod.carrier_code}-${selectedMethod.method_code}`
+  const selectedMethod = cartQuery?.cart?.shipping_addresses?.[0]?.selected_shipping_method
+  const carrierMethod = selectedMethod?.method_code
+    ? `${selectedMethod.carrier_code}-${selectedMethod.method_code}`
+    : undefined
 
   const form = useFormGqlMutationCart<
     ShippingMethodFormMutation,
     ShippingMethodFormMutationVariables & { carrierMethod?: string }
   >(ShippingMethodFormDocument, {
+    skipUnchanged: true,
     defaultValues: { carrierMethod },
-    experimental_useV2: true,
     onBeforeSubmit: (variables) => {
       const [carrier, method] = (variables.carrierMethod ?? '').split('-')
       return onBeforeSubmit({ ...variables, carrier, method })
@@ -87,13 +84,14 @@ export function ShippingMethodForm(props: ShippingMethodFormProps) {
     ...options,
   })
 
-  const { handleSubmit, control, error } = form
+  const { handleSubmit, control, error, setValue } = form
   const submit = handleSubmit(() => {})
 
   useFormCompose({ form, step, submit, key: 'ShippingMethodForm' })
 
-  if (items.length === 0) {
-    items.push({
+  const renderItems = [...items]
+  if (renderItems.length === 0) {
+    renderItems.push({
       disabled: true,
       value: '',
       available: false,
@@ -107,6 +105,18 @@ export function ShippingMethodForm(props: ShippingMethodFormProps) {
     })
   }
 
+  const firstCarrierMethod = items.length === 1 ? items[0].value : undefined
+  useEffect(() => {
+    //  If there is a shipping address AND there is only one shipping method
+    if (shippingAddress && firstCarrierMethod) {
+      // AND the current carrierMethod is not the same (or not set) as the single shipping method
+      if (carrierMethod !== firstCarrierMethod) {
+        // THEN set the shipping method to the only one available.
+        setValue('carrierMethod', firstCarrierMethod, { shouldValidate: true })
+      }
+    }
+  }, [shippingAddress, firstCarrierMethod, carrierMethod, setValue])
+
   return (
     <FormProvider {...form}>
       <FormAutoSubmit
@@ -127,7 +137,7 @@ export function ShippingMethodForm(props: ShippingMethodFormProps) {
           size='large'
           color='secondary'
           rules={{ required: i18n._(/* i18n */ 'Please select a shipping method') }}
-          items={items}
+          items={renderItems}
           render={
             ShippingMethodActionCard as React.FC<ActionCardItemRenderProps<ActionCardItemBase>>
           }

package/index.ts

@@ -1,3 +1,4 @@
 export * from './Api/AvailableShippingMethods.gql'
 export * from './Api/ShippingMethodSelected.gql'
 export * from './components/ShippingMethodForm/ShippingMethodForm'
+export * from './components/ShippingMethodForm/ShippingMethodForm.gql'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart-shipping-method",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.8",
+  "version": "9.0.0-canary.100",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,17 +12,18 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.8",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.8",
-    "@graphcommerce/graphql": "^8.1.0-canary.8",
-    "@graphcommerce/image": "^8.1.0-canary.8",
-    "@graphcommerce/magento-cart": "^8.1.0-canary.8",
-    "@graphcommerce/magento-cart-shipping-address": "^8.1.0-canary.8",
-    "@graphcommerce/magento-store": "^8.1.0-canary.8",
-    "@graphcommerce/next-ui": "^8.1.0-canary.8",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.8",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.8",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.8",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.100",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.100",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.100",
+    "@graphcommerce/graphql": "^9.0.0-canary.100",
+    "@graphcommerce/image": "^9.0.0-canary.100",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.100",
+    "@graphcommerce/magento-cart-shipping-address": "^9.0.0-canary.100",
+    "@graphcommerce/magento-store": "^9.0.0-canary.100",
+    "@graphcommerce/next-ui": "^9.0.0-canary.100",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.100",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.100",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.100",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",