fix: shipping method

src/modules/checkout/components/shipping/index.tsx

@@ -1,17 +1,16 @@
 "use client"
 
 import { RadioGroup } from "@headlessui/react"
+import { setShippingMethod } from "@lib/data/cart"
+import { convertToLocale } from "@lib/util/money"
 import { CheckCircleSolid } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
 import { Button, Heading, Text, clx } from "@medusajs/ui"
-
+import ErrorMessage from "@modules/checkout/components/error-message"
 import Divider from "@modules/common/components/divider"
 import Radio from "@modules/common/components/radio"
-import ErrorMessage from "@modules/checkout/components/error-message"
-import { useRouter, useSearchParams, usePathname } from "next/navigation"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
-import { setShippingMethod } from "@lib/data/cart"
-import { convertToLocale } from "@lib/util/money"
-import { HttpTypes } from "@medusajs/types"
 
 type ShippingProps = {
   cart: HttpTypes.StoreCart
@@ -24,6 +23,9 @@ const Shipping: React.FC<ShippingProps> = ({
 }) => {
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [shippingMethodId, setShippingMethodId] = useState<string | null>(
+    cart.shipping_methods?.at(-1)?.shipping_option_id || null
+  )
 
   const searchParams = useSearchParams()
   const router = useRouter()
@@ -44,10 +46,18 @@ const Shipping: React.FC<ShippingProps> = ({
     router.push(pathname + "?step=payment", { scroll: false })
   }
 
-  const set = async (id: string) => {
+  const handleSetShippingMethod = async (id: string) => {
+    setError(null)
+    let currentId: string | null = null
     setIsLoading(true)
+    setShippingMethodId((prev) => {
+      currentId = prev
+      return id
+    })
+
     await setShippingMethod({ cartId: cart.id, shippingMethodId: id })
       .catch((err) => {
+        setShippingMethodId(currentId)
         setError(err.message)
       })
       .finally(() => {
@@ -95,9 +105,14 @@ const Shipping: React.FC<ShippingProps> = ({
       {isOpen ? (
         <div data-testid="delivery-options-container">
           <div className="pb-8">
-            <RadioGroup value={selectedShippingMethod?.id} onChange={set}>
+            {/* @ts-ignore */}
+            <RadioGroup
+              value={shippingMethodId}
+              onChange={handleSetShippingMethod}
+            >
               {availableShippingMethods?.map((option) => {
                 return (
+                  // @ts-ignore
                   <RadioGroup.Option
                     key={option.id}
                     value={option.id}
@@ -106,14 +121,12 @@ const Shipping: React.FC<ShippingProps> = ({
                       "flex items-center justify-between text-small-regular cursor-pointer py-4 border rounded-rounded px-8 mb-2 hover:shadow-borders-interactive-with-active",
                       {
                         "border-ui-border-interactive":
-                          option.id === selectedShippingMethod?.id,
+                          option.id === shippingMethodId,
                       }
                     )}
                   >
                     <div className="flex items-center gap-x-4">
-                      <Radio
-                        checked={option.id === selectedShippingMethod?.id}
-                      />
+                      <Radio checked={option.id === shippingMethodId} />
                       <span className="text-base-regular">{option.name}</span>
                     </div>
                     <span className="justify-self-end text-ui-fg-base">