Merge pull request #220 from mercurjs/fix/mm2-1492

fix/mm2-1492

Author: kamilkieres09

src/components/sections/CartShippingMethodsSection/CartShippingMethodRow.tsx

@@ -2,22 +2,20 @@
 
 import { Button } from "@/components/atoms"
 import { BinIcon } from "@/icons"
-import { removeShippingMethod } from "@/lib/data/cart"
+
 import { convertToLocale } from "@/lib/helpers/money"
 import { HttpTypes } from "@medusajs/types"
 import { Text } from "@medusajs/ui"
 
 export const CartShippingMethodRow = ({
   method,
   currency_code,
+  onRemoveShippingMethod,
 }: {
   method: HttpTypes.StoreCartShippingMethod
   currency_code: string
+  onRemoveShippingMethod: (methodId: string) => void
 }) => {
-  const handleRemoveShippingMethod = async () => {
-    await removeShippingMethod(method.id)
-  }
-
   return (
     <div className="mb-4 border rounded-md p-4 flex items-center justify-between">
       <div>
@@ -35,7 +33,7 @@ export const CartShippingMethodRow = ({
         variant="tonal"
         size="small"
         className="p-2"
-        onClick={handleRemoveShippingMethod}
+        onClick={() => onRemoveShippingMethod(method.id)}
       >
         <BinIcon size={16} />
       </Button>

src/components/sections/CartShippingMethodsSection/CartShippingMethodsSection.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import ErrorMessage from "@/components/molecules/ErrorMessage/ErrorMessage"
-import { setShippingMethod } from "@/lib/data/cart"
+import { removeShippingMethod, setShippingMethod } from "@/lib/data/cart"
 import { calculatePriceForShippingOption } from "@/lib/data/fulfillment"
 import { convertToLocale } from "@/lib/helpers/money"
 import { CheckCircleSolid, ChevronUpDown, Loader } from "@medusajs/icons"
@@ -58,6 +58,8 @@ const CartShippingMethodsSection: React.FC<ShippingProps> = ({
   availableShippingMethods,
 }) => {
   const [isLoadingPrices, setIsLoadingPrices] = useState(false)
+  const [isRemovingShippingMethod, setIsRemovingShippingMethod] =
+    useState(false)
   const [calculatedPricesMap, setCalculatedPricesMap] = useState<
     Record<string, number>
   >({})
@@ -149,6 +151,12 @@ const CartShippingMethodsSection: React.FC<ShippingProps> = ({
     }
   }
 
+  const handleRemoveShippingMethod = async (methodId: string) => {
+    setIsRemovingShippingMethod(true)
+    await removeShippingMethod(methodId)
+    setIsRemovingShippingMethod(false)
+  }
+
   useEffect(() => {
     setError(null)
   }, [isOpen])
@@ -315,13 +323,14 @@ const CartShippingMethodsSection: React.FC<ShippingProps> = ({
                     </div>
                   )
                 })}
-                {cart && (cart.shipping_methods?.length ?? 0) > 0 && (
+                {!!cart?.shipping_methods?.length && (
                   <div className="flex flex-col">
                     {cart.shipping_methods?.map((method) => (
                       <CartShippingMethodRow
                         key={method.id}
                         method={method}
                         currency_code={cart.currency_code}
+                        onRemoveShippingMethod={handleRemoveShippingMethod}
                       />
                     ))}
                   </div>
@@ -337,7 +346,7 @@ const CartShippingMethodsSection: React.FC<ShippingProps> = ({
             <Button
               onClick={handleSubmit}
               variant="tonal"
-              disabled={!cart.shipping_methods?.[0]}
+              disabled={!cart.shipping_methods?.[0] || isRemovingShippingMethod}
               loading={isLoadingPrices}
             >
               Continue to payment