@graphcommerce/magento-cart-shipping-method 9.0.0-canary.67 → 9.0.0-canary.68

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 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

package/components/ShippingMethodForm/ShippingMethodForm.tsx

@@ -21,7 +21,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 +45,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,12 +66,11 @@ 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,
@@ -87,13 +85,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 +106,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 +138,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/package.json

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