creating new trace for checkout page

vue/src/stores/cart.js

@@ -10,6 +10,20 @@ export const useCounterStore = defineStore({
     updatePrice(val = 1) {
       this.counter += val;
     },
+    getQuantities(){
+      let quantities = {}
+      for (let item in this.cart) {
+        quantities[this.cart[item].id] = this.cart[item].count
+      }
+      return quantities;
+    },
+    getTotalPrice(){
+      let total = 0;
+      for (let item in this.cart) {
+        total += this.cart[item].totalPrice
+      }
+      return total;
+    },
     updateCart(product) {
       let index = this.cart.findIndex( item => item.id === product.id);
       if (index === -1) {

vue/src/views/CheckoutView.vue

@@ -87,7 +87,22 @@ import { useCounterStore } from "../stores/cart";
       return this.store.getCartItems();
     },
     cartTotal() {
-      return this.store.cartTotal; // example if you have a cart total in the store
+      return this.store.getTotalPrice(); // example if you have a cart total in the store
+    },
+    cartQuantities(){
+      return this.store.getQuantities()
+    },
+    contactForm(){
+      return {
+        email,
+        firstName,
+        lastName,
+        address,
+        city,
+        country,
+        state,
+        zipCode
+      }
     }
   },
   methods: {
@@ -120,35 +135,37 @@ import { useCounterStore } from "../stores/cart";
     handleSubmit() {
       let success = null;
 
-      Sentry.startSpan({ name: "Checkout" }, async () => {
-        let cartJson = JSON.stringify({ cart: this.cartItems, form: {
-          email,
-          firstName,
-          lastName,
-          address,
-          city,
-          country,
-          state,
-          zipCode
-        }})
-        var requestOptions = {
-          method: "POST",
-          headers: {
-            "Content-Type": "text/plain",
-          },
-          body: cartJson,
-          redirect: "follow",
-        };
-
-        try {
-          success = await this.makeCheckoutRequest(requestOptions);
-        } catch (error) {
-          Sentry.captureException(error);
-          this.$router.push("/error");
-
-        }
-
-        return success;
+      Sentry.startNewTrace(() => {
+        Sentry.startSpan({ name: "Checkout" }, async (span) => {
+          const payload = {
+            cart: {
+              items: this.cartItems,
+              quantities: this.cartQuantities,
+              total: this.cartTotal,
+            },
+            form: this.contactForm,          
+          }
+          var requestOptions = {
+            method: "POST",
+            headers: {
+              "Content-Type": "text/plain",
+            },
+            body: JSON.stringify(payload),
+            redirect: "follow",
+          };
+
+          try {
+            success = await this.makeCheckoutRequest(requestOptions);
+          } catch (error) {
+            Sentry.withActiveSpan(span, async () => {
+              Sentry.captureException(error);
+            })
+            this.$router.push("/error");
+
+          }
+
+          return success;
+        })
       })
 
       if (!success) {