From e9fbe7de26c562e32c1bbbba7414168075625605 Mon Sep 17 00:00:00 2001
From: jordanarldt <jordan.arldt@bigcommerce.com>
Date: Thu, 26 Dec 2024 15:28:48 -0600
Subject: [PATCH] fix(storefront): STRF-12475 Use utils.api.cart.postFormData
 when updating variants in cart

---
 CHANGELOG.md            |  1 +
 assets/js/theme/cart.js | 12 ++++++++++++
 package-lock.json       |  7 ++++---
 package.json            |  2 +-
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0c48274a43..116411483d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Bump other GH actions to fix warnings related to old versions [#2495](https://github.com/bigcommerce/cornerstone/pull/2495)
 - Add a section to display the payment promotion widget in the drop-down of the cart preview [#2523](https://github.com/bigcommerce/cornerstone/pull/2523)
 - Add support Node 20 [#2519](https://github.com/bigcommerce/cornerstone/pull/2519)
+- Use fetch when updating variants in cart ([#2521](https://github.com/bigcommerce/cornerstone/pull/2521))
 
 ## 6.15.0 (10-18-2024)
 - Cornerstone changes to support inc/ex tax price lists on PDP [#2486](https://github.com/bigcommerce/cornerstone/pull/2486)
diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js
index b3cae98796..08a6415ce7 100644
--- a/assets/js/theme/cart.js
+++ b/assets/js/theme/cart.js
@@ -151,6 +151,18 @@ export default class Cart extends PageManager {
                 this.$modal.one(ModalEvents.opened, optionChangeHandler);
             }
 
+            const modalForm = this.$modal.find('form');
+            const refreshContent = () => this.refreshContent();
+            async function onSubmit(event) {
+                event.preventDefault();
+                utils.api.cart.postFormData(new FormData(this), () => {
+                    modal.close();
+                    refreshContent();
+                });
+            }
+
+            modalForm.on('submit', onSubmit);
+
             this.productDetails = new CartItemDetails(this.$modal, context);
 
             this.bindGiftWrappingForm();
diff --git a/package-lock.json b/package-lock.json
index 6b3a0d05b3..26f5fa19c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "6.15.0",
       "license": "MIT",
       "dependencies": {
-        "@bigcommerce/stencil-utils": "6.18.0",
+        "@bigcommerce/stencil-utils": "6.19.0",
         "core-js": "^3.9.0",
         "creditcards": "^4.2.0",
         "easyzoom": "^2.5.3",
@@ -1711,8 +1711,9 @@
       }
     },
     "node_modules/@bigcommerce/stencil-utils": {
-      "version": "6.18.0",
-      "license": "BSD-4-Clause",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-utils/-/stencil-utils-6.19.0.tgz",
+      "integrity": "sha512-Z9tWyHc76f8mi/Nnfae2NHSP8e6jC7KVU8cNrXSuWWfNhB2hoWd+GJqG9E3Uu+CKNwKCHeg7qpMuF8gsVn4xNw==",
       "dependencies": {
         "eventemitter3": "^4.0.4",
         "uuid": "^9.0.0",
diff --git a/package.json b/package.json
index 117d244f29..c6e9008473 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "author": "BigCommerce",
   "license": "MIT",
   "dependencies": {
-    "@bigcommerce/stencil-utils": "6.18.0",
+    "@bigcommerce/stencil-utils": "6.19.0",
     "core-js": "^3.9.0",
     "creditcards": "^4.2.0",
     "easyzoom": "^2.5.3",