@gomusdev/web-components 1.51.1 → 1.53.0

package/dist-js/gomus-webcomponents.js

@@ -2043,6 +2043,9 @@ function clear_text_content(node) {
 function should_defer_append() {
   return false;
 }
+function create_comment(data = "") {
+  return document.createComment(data);
+}
 function autofocus(dom, value) {
   if (value) {
     const body = document.body;
@@ -4367,6 +4370,14 @@ function set_value(element, value) {
   }
   element.value = value ?? "";
 }
+function set_checked(element, checked) {
+  var attributes = get_attributes(element);
+  if (attributes.checked === (attributes.checked = // treat null and undefined the same for the initial value
+  checked ?? void 0)) {
+    return;
+  }
+  element.checked = checked;
+}
 function set_selected(element, selected) {
   if (selected) {
     if (!element.hasAttribute("selected")) {
@@ -4656,6 +4667,36 @@ function get_setters(element) {
   }
   return setters;
 }
+let supported = null;
+function is_supported() {
+  if (supported === null) {
+    var select = document.createElement("select");
+    select.innerHTML = "<option><span>t</span></option>";
+    supported = /** @type {Element} */
+    select.firstChild?.firstChild?.nodeType === 1;
+  }
+  return supported;
+}
+function customizable_select(element, rich_fn) {
+  var was_hydrating = hydrating;
+  if (!is_supported()) {
+    set_hydrating(false);
+    element.textContent = "";
+    element.append(create_comment(""));
+  }
+  try {
+    rich_fn();
+  } finally {
+    if (was_hydrating) {
+      if (hydrating) {
+        reset(element);
+      } else {
+        set_hydrating(true);
+        set_hydrate_node(element);
+      }
+    }
+  }
+}
 function bind_value(input, get2, set2 = get2) {
   var batches2 = /* @__PURE__ */ new WeakSet();
   listen_to_event_and_reset_event(input, "input", async (is_reset) => {
@@ -11188,10 +11229,17 @@ function createCartItem(product, options) {
       return this.type + "-" + this.product.id + this.subUId;
     },
     get subUId() {
+      const segments = [];
+      if (this.time) {
+        segments.push(`time: ${this.time}`);
+      }
       if (isUIScaledPricesTicket(this.product)) {
-        return ` (scale_price: ${this.product.scale_price_id})`;
+        segments.push(`scale_price: ${this.product.scale_price_id}`);
       }
-      return "";
+      if (this.display?.discounted) {
+        segments.push("discounted");
+      }
+      return segments.length > 0 ? ` (${segments.join(", ")})` : "";
     },
     toString() {
       return this.uuid + ":" + this.quantity;
@@ -11220,11 +11268,6 @@ function createCartItem(product, options) {
     }
   };
 }
-function updateLocalStorage(cart) {
-  const content = JSON.stringify({ items: cart.items || [], coupons: cart.coupons || [] });
-  localStorage.setItem("go-cart", content);
-  return content;
-}
 function generateCartItem(cartItem) {
   const type = cartItem.type;
   switch (type) {
@@ -11274,27 +11317,21 @@ function loadFromLocalStorage$1(cart) {
 }
 function syncCartToLocalStorage(cart) {
   loadFromLocalStorage$1(cart);
-  const storeCart = proxy(cart);
+  let lastWritten = JSON.stringify({ items: cart.items || [], coupons: cart.coupons || [] });
+  localStorage.setItem("go-cart", lastWritten);
   effect_root(() => {
     user_effect(() => {
-      updateLocalStorage(storeCart);
+      const content = JSON.stringify({ items: cart.items || [], coupons: cart.coupons || [] });
+      if (content === lastWritten) return;
+      lastWritten = content;
+      localStorage.setItem("go-cart", content);
     });
   });
-  let lastLS = "";
-  setInterval(
-    () => {
-      if (!localStorage) {
-        console.warn("(syncCartToLocalStorage) localStorage is not available");
-        return;
-      }
-      let newLS = localStorage.getItem("go-cart");
-      if (lastLS && lastLS !== newLS) {
-        loadFromLocalStorage$1(cart);
-      }
-      lastLS = newLS || "";
-    },
-    1e3
-  );
+  window.addEventListener("storage", (event2) => {
+    if (event2.key !== "go-cart") return;
+    lastWritten = localStorage.getItem("go-cart") ?? "";
+    loadFromLocalStorage$1(cart);
+  });
 }
 const inTheFuture = (time2) => {
   const now = /* @__PURE__ */ new Date();
@@ -11306,12 +11343,19 @@ let lastUuid = 0;
 function createCart(products, contingent = 20) {
   const items = proxy([]);
   const coupons = proxy([]);
+  let paymentModeId = /* @__PURE__ */ state(void 0);
   const cart = {
     items,
     coupons,
     contingent,
     // caps the total number of items in the cart
     uid: `cart-${lastUuid++}`,
+    get paymentModeId() {
+      return get$2(paymentModeId);
+    },
+    set paymentModeId(value) {
+      set(paymentModeId, value, true);
+    },
     get nonEmptyItems() {
       return this.items.filter((i) => i.quantity > 0);
     },
@@ -11333,7 +11377,7 @@ function createCart(products, contingent = 20) {
         shipping_address_id: null,
         comment: null,
         reference: null,
-        payment_mode_id: shop.settings?.defaultPaymentModeId,
+        payment_mode_id: this.paymentModeId ?? shop.settings?.defaultPaymentModeId,
         coupons: this.coupons,
         donations: [],
         affiliate: {},
@@ -12571,6 +12615,9 @@ class Shop {
   checkout(params) {
     return this.apiPost(`/api/v4/orders`, { body: params, requiredFields: ["items", "total"] });
   }
+  createCart(params) {
+    return this.apiPost(`/api/v4/cart`, { body: params, requiredFields: ["items"] });
+  }
   order(token) {
     return this.fetchAndCache("/api/v4/orders/{id}", `order-${token}`, "order", { path: { id: token } });
   }
@@ -16153,6 +16200,19 @@ var allFields = {
     placeholder: "",
     description: "",
     autocomplete: "off"
+  },
+  paymentMode: {
+    key: "paymentMode",
+    apiKey: "payment_mode_id",
+    type: "paymentMode",
+    label: "cart.paymentMode.label",
+    placeholder: "",
+    description: "",
+    autocomplete: "off",
+    options: () => {
+      const modes = shop.payment_modes ? Object.values(shop.payment_modes) : [];
+      return modes.map((m) => ({ value: String(m.id), label: m.name }));
+    }
   }
 };
 function createField(data, required) {
@@ -16431,6 +16491,9 @@ class FormDetails {
     const ret = Object.fromEntries(validFields.map((f) => [f.apiKey, coerce2(f.value)]));
     return ret;
   }
+  fieldValue(key) {
+    return this.fields.find((f) => f.key === key)?.value;
+  }
   get apiErrors() {
     return get$2(this.#apiErrors);
   }
@@ -16880,39 +16943,66 @@ function generateQuantityOptions(from, to, options = { floor: 0 }) {
 function option(value) {
   return { value, label: value.toString() };
 }
-var root_5$1 = /* @__PURE__ */ from_html(`<span> </span>`);
-var root_7$3 = /* @__PURE__ */ from_html(`<option> </option>`);
-var root_6$2 = /* @__PURE__ */ from_html(`<select></select>`);
-var root_8$2 = /* @__PURE__ */ from_html(`<li class="go-cart-item-remove" data-go-cart-item-remove=""><button>⨉</button></li>`);
-var root_1$i = /* @__PURE__ */ from_html(`<article><ul><li data-go-cart-item-title=""><!></li> <li class="go-cart-item-price" data-go-cart-item-price=""> </li> <li class="go-cart-item-count" data-go-cart-item-count=""><!></li> <!> <li class="go-cart-item-sum" data-go-cart-item-sum=""> </li></ul></article>`);
+var root_5$2 = /* @__PURE__ */ from_html(`<s class="go-cart-item-price-original"> </s> <span class="go-cart-item-price-discounted"> </span>`, 1);
+var root_6$3 = /* @__PURE__ */ from_html(`<span class="go-cart-item-price-discounted"> </span>`);
+var root_7$4 = /* @__PURE__ */ from_html(`<span> </span>`);
+var root_9$4 = /* @__PURE__ */ from_html(`<option> </option>`);
+var root_8$2 = /* @__PURE__ */ from_html(`<select class="go-cart-item-select"></select>`);
+var root_10$2 = /* @__PURE__ */ from_html(`<li class="go-cart-item-remove"><button>⨉</button></li>`);
+var root_1$i = /* @__PURE__ */ from_html(`<article class="go-cart-item-content"><ul><li class="go-cart-item-title-container"><!></li> <li class="go-cart-item-price"><!></li> <li class="go-cart-item-count"><!></li> <!> <li class="go-cart-item-sum"> </li></ul></article>`);
 function Item$1($$anchor, $$props) {
   push($$props, true);
-  let cartItem = prop($$props, "cartItem", 7), cart = prop($$props, "cart", 7), preview = prop($$props, "preview", 7);
+  let displayItem = prop($$props, "displayItem", 7), displayCart = prop($$props, "displayCart", 7), mainCart = prop($$props, "mainCart", 7), preview = prop($$props, "preview", 7);
   let capacity = /* @__PURE__ */ state(void 0);
+  const itemInMaincart = /* @__PURE__ */ user_derived(() => mainCart().items.find((item) => item.uuid === displayItem().display?.reference_uuid));
   const emptyCart = createCart();
   user_effect(() => {
-    cart().items.map((i) => i.quantity);
+    mainCart().items.map((i) => i.quantity);
     untrack(() => {
-      set(capacity, shop.capacityManager.capacity(cart(), cartItem(), emptyCart), true);
+      set(capacity, shop.capacityManager.capacity(displayCart(), displayItem(), emptyCart), true);
     });
   });
-  function update(ci, target) {
+  function update(target) {
     const el = target;
-    ci.quantity = parseInt(el.value);
+    if (!get$2(itemInMaincart)) {
+      console.error("(CartItem) Could not find main item for line", displayItem());
+      return;
+    }
+    const nextLineQuantity = parseInt(el.value, 10);
+    get$2(itemInMaincart).quantity = Math.max(0, get$2(itemInMaincart).quantity - displayItem().quantity + nextLineQuantity);
+  }
+  function del() {
+    if (!get$2(itemInMaincart)) {
+      console.error("(CartItem) Could not find main item for line", displayItem());
+      return;
+    }
+    const newQuantity = Math.max(0, get$2(itemInMaincart).quantity - displayItem().quantity);
+    if (newQuantity === 0) {
+      mainCart().deleteItem(get$2(itemInMaincart));
+    } else {
+      get$2(itemInMaincart).quantity = newQuantity;
+    }
   }
   var $$exports = {
-    get cartItem() {
-      return cartItem();
+    get displayItem() {
+      return displayItem();
     },
-    set cartItem($$value) {
-      cartItem($$value);
+    set displayItem($$value) {
+      displayItem($$value);
       flushSync();
     },
-    get cart() {
-      return cart();
+    get displayCart() {
+      return displayCart();
     },
-    set cart($$value) {
-      cart($$value);
+    set displayCart($$value) {
+      displayCart($$value);
+      flushSync();
+    },
+    get mainCart() {
+      return mainCart();
+    },
+    set mainCart($$value) {
+      mainCart($$value);
       flushSync();
     },
     get preview() {
@@ -16926,7 +17016,7 @@ function Item$1($$anchor, $$props) {
   var fragment = comment();
   var node = first_child(fragment);
   {
-    var consequent_4 = ($$anchor2) => {
+    var consequent_5 = ($$anchor2) => {
       var article = root_1$i();
       var ul = child(article);
       var li = child(ul);
@@ -16935,7 +17025,7 @@ function Item$1($$anchor, $$props) {
         var consequent = ($$anchor3) => {
           Ticket($$anchor3, {
             get cartItem() {
-              return cartItem();
+              return displayItem();
             }
           });
         };
@@ -16946,14 +17036,14 @@ function Item$1($$anchor, $$props) {
             var consequent_1 = ($$anchor4) => {
               Event$2($$anchor4, {
                 get cartItem() {
-                  return cartItem();
+                  return displayItem();
                 }
               });
             };
             if_block(
               node_2,
               ($$render) => {
-                if (cartItem().product.product_type === "Event") $$render(consequent_1);
+                if (displayItem().product.product_type === "Event") $$render(consequent_1);
               },
               true
             );
@@ -16961,35 +17051,68 @@ function Item$1($$anchor, $$props) {
           append($$anchor3, fragment_2);
         };
         if_block(node_1, ($$render) => {
-          if (cartItem().product.product_type === "Ticket") $$render(consequent);
+          if (displayItem().product.product_type === "Ticket") $$render(consequent);
           else $$render(alternate, false);
         });
       }
       reset(li);
       var li_1 = sibling(li, 2);
-      var text2 = child(li_1, true);
-      reset(li_1);
-      var li_2 = sibling(li_1, 2);
-      var node_3 = child(li_2);
+      var node_3 = child(li_1);
       {
         var consequent_2 = ($$anchor3) => {
-          var span = root_5$1();
+          var fragment_4 = root_5$2();
+          var s = first_child(fragment_4);
+          var text2 = child(s, true);
+          reset(s);
+          var span = sibling(s, 2);
           var text_1 = child(span, true);
           reset(span);
-          template_effect(() => set_text(text_1, cartItem().quantity));
-          append($$anchor3, span);
+          template_effect(
+            ($0, $1) => {
+              set_text(text2, $0);
+              set_text(text_1, $1);
+            },
+            [
+              () => formatCurrency(displayItem().display.originalPrice),
+              () => formatCurrency(displayItem().final_price_cents)
+            ]
+          );
+          append($$anchor3, fragment_4);
         };
         var alternate_1 = ($$anchor3) => {
-          var select = root_6$2();
-          select.__change = (e) => update(cartItem(), e.target);
+          var span_1 = root_6$3();
+          var text_2 = child(span_1, true);
+          reset(span_1);
+          template_effect(($0) => set_text(text_2, $0), [() => formatCurrency(displayItem().final_price_cents)]);
+          append($$anchor3, span_1);
+        };
+        if_block(node_3, ($$render) => {
+          if (displayItem().display?.discounted) $$render(consequent_2);
+          else $$render(alternate_1, false);
+        });
+      }
+      reset(li_1);
+      var li_2 = sibling(li_1, 2);
+      var node_4 = child(li_2);
+      {
+        var consequent_3 = ($$anchor3) => {
+          var span_2 = root_7$4();
+          var text_3 = child(span_2, true);
+          reset(span_2);
+          template_effect(() => set_text(text_3, displayItem().quantity));
+          append($$anchor3, span_2);
+        };
+        var alternate_2 = ($$anchor3) => {
+          var select = root_8$2();
+          select.__change = (e) => update(e.target);
           each(select, 21, () => generateQuantityOptions(get$2(capacity).min, get$2(capacity).max, { floor: 1 }), (q) => q.value, ($$anchor4, q) => {
-            var option2 = root_7$3();
-            var text_2 = child(option2, true);
+            var option2 = root_9$4();
+            var text_4 = child(option2, true);
             reset(option2);
             var option_value = {};
             template_effect(() => {
-              set_selected(option2, cartItem().quantity === get$2(q).value);
-              set_text(text_2, get$2(q).label);
+              set_selected(option2, displayItem().quantity === get$2(q).value);
+              set_text(text_4, get$2(q).label);
               if (option_value !== (option_value = get$2(q).value)) {
                 option2.value = (option2.__value = get$2(q).value) ?? "";
               }
@@ -16997,56 +17120,143 @@ function Item$1($$anchor, $$props) {
             append($$anchor4, option2);
           });
           reset(select);
+          template_effect(($0) => set_attribute(select, "aria-label", $0), [() => shop.t("cart.content.table.edit")]);
           append($$anchor3, select);
         };
-        if_block(node_3, ($$render) => {
-          if (preview()) $$render(consequent_2);
-          else $$render(alternate_1, false);
+        if_block(node_4, ($$render) => {
+          if (preview()) $$render(consequent_3);
+          else $$render(alternate_2, false);
         });
       }
       reset(li_2);
-      var node_4 = sibling(li_2, 2);
+      var node_5 = sibling(li_2, 2);
       {
-        var consequent_3 = ($$anchor3) => {
-          var li_3 = root_8$2();
+        var consequent_4 = ($$anchor3) => {
+          var li_3 = root_10$2();
           var button = child(li_3);
-          button.__click = () => cart().deleteItem(cartItem());
+          button.__click = del;
           reset(li_3);
           append($$anchor3, li_3);
         };
-        if_block(node_4, ($$render) => {
-          if (!preview()) $$render(consequent_3);
+        if_block(node_5, ($$render) => {
+          if (!preview()) $$render(consequent_4);
         });
       }
-      var li_4 = sibling(node_4, 2);
-      var text_3 = child(li_4, true);
+      var li_4 = sibling(node_5, 2);
+      var text_5 = child(li_4, true);
       reset(li_4);
       reset(ul);
       reset(article);
-      template_effect(() => {
-        set_attribute(article, "data-testid", cartItem().uuid);
-        set_text(text2, cartItem().final_price_formatted);
-        set_text(text_3, cartItem().total_price_formatted);
-      });
+      template_effect(($0) => set_text(text_5, $0), [() => formatCurrency(displayItem().total_price_cents)]);
       append($$anchor2, article);
     };
     if_block(node, ($$render) => {
-      if (get$2(capacity)) $$render(consequent_4);
+      if (get$2(capacity)) $$render(consequent_5);
     });
   }
   append($$anchor, fragment);
   return pop($$exports);
 }
 delegate(["change", "click"]);
-create_custom_element(Item$1, { cartItem: {}, cart: {}, preview: {} }, [], [], { mode: "open" });
-var root_2$p = /* @__PURE__ */ from_html(`<li class="go-cart-header-remove" data-go-cart-header-remove=""></li>`);
-var root_3$8 = /* @__PURE__ */ from_html(`<li class="go-cart-item" data-go-cart-item=""><!></li>`);
-var root_4$6 = /* @__PURE__ */ from_html(`<li class="go-cart-footer-remove" data-go-cart-footer-remove=""></li>`);
-var root_1$h = /* @__PURE__ */ from_html(`<ol data-testid="cart"><li class="go-cart-header" data-go-cart-header="" data-testid="cart-header"><ul><li class="go-cart-header-title" data-go-cart-header-title=""> </li> <li class="go-cart-header-price" data-go-cart-header-price=""> </li> <li class="go-cart-header-count" data-go-cart-header-count=""> </li> <!> <li class="go-cart-header-sum" data-go-cart-header-sum=""> </li></ul></li> <!> <li class="go-cart-footer" data-go-cart-footer="" data-testid="cart-footer"><ul><li class="go-cart-footer-title" data-go-cart-footer-title=""></li> <li class="go-cart-footer-price" data-go-cart-footer-price=""></li> <li class="go-cart-footer-count" data-go-cart-footer-count=""></li> <!> <li class="go-cart-footer-sum" data-go-cart-footer-sum="" data-go-cart-sum=""> </li></ul></li></ol>`);
+create_custom_element(Item$1, { displayItem: {}, displayCart: {}, mainCart: {}, preview: {} }, [], [], { mode: "open" });
+function getQuantity(value, fallback) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (value && typeof value === "object") {
+    const total = Object.values(value).reduce((sum2, num) => {
+      return typeof num === "number" && Number.isFinite(num) ? sum2 + num : sum2;
+    }, 0);
+    if (total > 0) return total;
+  }
+  return fallback;
+}
+function createDisplayCart(baseCart, apiItems) {
+  const displayCart = createCart();
+  const appliedCoupons = /* @__PURE__ */ new Set();
+  baseCart.coupons.forEach((coupon) => displayCart.addCoupon(coupon));
+  apiItems.forEach((apiItem) => {
+    const attrs = apiItem.attributes;
+    const itemInBaseCart = baseCart.items.find(
+      (i) => i.type.toLowerCase() === apiItem.type.toLowerCase() && i.product.id === attrs.id && (!attrs.time || i.time === attrs.time)
+    );
+    if (!itemInBaseCart) {
+      console.error("(go-cart) Ignoring unmatched cart line", { type: apiItem.type, attrs });
+      return [];
+    }
+    if (attrs.coupon) {
+      displayCart.addCoupon(attrs.coupon);
+      appliedCoupons.add(attrs.coupon);
+    }
+    displayCart.addItem(createDisplayCartItem(itemInBaseCart, attrs));
+  });
+  return { cart: displayCart, appliedCoupons };
+}
+function resolveApiQuantity(attrs) {
+  const source2 = "quantity" in attrs && attrs.quantity !== void 0 ? attrs.quantity : attrs.quantities;
+  return getQuantity(source2, 0);
+}
+function createDisplayCartItem(cartItem, attrs) {
+  const quantity = resolveApiQuantity(attrs);
+  const displayPrice = attrs.price_cents ?? cartItem.product.price_cents;
+  const originalPrice = cartItem.product.price_cents;
+  const discounted = displayPrice < originalPrice;
+  const product = { ...cartItem.product, price_cents: displayPrice };
+  return createCartItem(product, {
+    quantity,
+    time: cartItem.time,
+    display: {
+      discounted,
+      reference_uuid: cartItem.uuid,
+      originalPrice
+    }
+  });
+}
+var root_2$p = /* @__PURE__ */ from_html(`<li class="go-cart-header-remove"></li>`);
+var root_3$8 = /* @__PURE__ */ from_html(`<li class="go-cart-item"><!></li>`);
+var root_6$2 = /* @__PURE__ */ from_html(`<li class="go-cart-item-remove"><button>⨉</button></li>`);
+var root_5$1 = /* @__PURE__ */ from_html(`<li><article class="go-cart-item-content"><ul><li class="go-cart-item-title"> </li> <li class="go-cart-item-price"></li> <li class="go-cart-item-count"></li> <!> <li class="go-cart-item-sum"></li></ul></article></li>`);
+var root_7$3 = /* @__PURE__ */ from_html(`<li class="go-cart-footer-remove"></li>`);
+var root_1$h = /* @__PURE__ */ from_html(`<ol data-testid="cart"><li class="go-cart-header"><ul><li class="go-cart-header-title"> </li> <li class="go-cart-header-price"> </li> <li class="go-cart-header-count"> </li> <!> <li class="go-cart-header-sum"> </li></ul></li> <!> <!> <li class="go-cart-footer"><ul><li class="go-cart-footer-title"></li> <li class="go-cart-footer-price"></li> <li class="go-cart-footer-count"></li> <!> <li class="go-cart-footer-sum"> </li></ul></li></ol>`);
 function Cart($$anchor, $$props) {
   push($$props, true);
   const preview = prop($$props, "preview", 7, false);
   let cart = /* @__PURE__ */ user_derived(() => shop.cart);
+  let displayCart = /* @__PURE__ */ state(proxy(get$2(cart)));
+  let appliedCoupons = /* @__PURE__ */ state(proxy(/* @__PURE__ */ new Set()));
+  let requestId = 0;
+  const displayTotalCents = /* @__PURE__ */ user_derived(() => get$2(displayCart)?.totalPriceCents ?? 0);
+  user_effect(() => {
+    if (!get$2(cart)) {
+      return;
+    }
+    get$2(cart).items.map((i) => i.uuid + ":" + i.quantity + ":" + i.time);
+    get$2(cart).coupons.join("|");
+    const currentRequest = ++requestId;
+    if (get$2(cart).items.length === 0) {
+      set(displayCart, get$2(cart), true);
+      return;
+    }
+    (async () => {
+      try {
+        const { items, coupons } = get$2(cart).orderData();
+        const response = await shop.createCart({ items, coupons });
+        if (currentRequest !== requestId || !get$2(cart)) return;
+        if (!response || "error" in response) {
+          if (response && "error" in response) {
+            console.error("(go-cart) Unable to fetch discounted cart data", response.error);
+          }
+          set(displayCart, get$2(cart), true);
+          return;
+        }
+        const result = createDisplayCart(get$2(cart), response.data.items ?? []);
+        set(displayCart, result.cart, true);
+        set(appliedCoupons, result.appliedCoupons, true);
+      } catch (error) {
+        console.error("(go-cart) Unable to fetch discounted cart data", error);
+        if (currentRequest !== requestId || !get$2(cart)) return;
+        set(displayCart, get$2(cart), true);
+      }
+    })();
+  });
   var $$exports = {
     get preview() {
       return preview();
@@ -17059,7 +17269,7 @@ function Cart($$anchor, $$props) {
   var fragment = comment();
   var node = first_child(fragment);
   {
-    var consequent_2 = ($$anchor2) => {
+    var consequent_4 = ($$anchor2) => {
       var ol = root_1$h();
       var li = child(ol);
       var ul = child(li);
@@ -17088,14 +17298,17 @@ function Cart($$anchor, $$props) {
       reset(ul);
       reset(li);
       var node_2 = sibling(li, 2);
-      each(node_2, 17, () => get$2(cart).items, (cartItem) => cartItem.uuid, ($$anchor3, cartItem) => {
+      each(node_2, 17, () => get$2(displayCart).items, (item) => item.uuid, ($$anchor3, item) => {
         var li_6 = root_3$8();
         var node_3 = child(li_6);
         Item$1(node_3, {
-          get cartItem() {
-            return get$2(cartItem);
+          get displayItem() {
+            return get$2(item);
+          },
+          get displayCart() {
+            return get$2(displayCart);
           },
-          get cart() {
+          get mainCart() {
             return get$2(cart);
           },
           get preview() {
@@ -17105,48 +17318,99 @@ function Cart($$anchor, $$props) {
         reset(li_6);
         append($$anchor3, li_6);
       });
-      var li_7 = sibling(node_2, 2);
-      var ul_1 = child(li_7);
-      var node_4 = sibling(child(ul_1), 6);
+      var node_4 = sibling(node_2, 2);
       {
-        var consequent_1 = ($$anchor3) => {
-          var li_8 = root_4$6();
-          append($$anchor3, li_8);
+        var consequent_2 = ($$anchor3) => {
+          var fragment_1 = comment();
+          var node_5 = first_child(fragment_1);
+          each(node_5, 16, () => get$2(displayCart).coupons, (coupon) => coupon, ($$anchor4, coupon) => {
+            var li_7 = root_5$1();
+            let classes;
+            var article = child(li_7);
+            var ul_1 = child(article);
+            var li_8 = child(ul_1);
+            var text_4 = child(li_8, true);
+            reset(li_8);
+            var node_6 = sibling(li_8, 6);
+            {
+              var consequent_1 = ($$anchor5) => {
+                var li_9 = root_6$2();
+                var button = child(li_9);
+                button.__click = () => get$2(cart)?.removeCoupon(coupon);
+                reset(li_9);
+                append($$anchor5, li_9);
+              };
+              if_block(node_6, ($$render) => {
+                if (!preview()) $$render(consequent_1);
+              });
+            }
+            next(2);
+            reset(ul_1);
+            reset(article);
+            reset(li_7);
+            template_effect(
+              ($0) => {
+                classes = set_class(li_7, 1, "go-cart-item", null, classes, $0);
+                set_text(text_4, coupon);
+              },
+              [
+                () => ({
+                  "go-cart-coupon-inactive": !get$2(appliedCoupons).has(coupon)
+                })
+              ]
+            );
+            append($$anchor4, li_7);
+          });
+          append($$anchor3, fragment_1);
         };
         if_block(node_4, ($$render) => {
-          if (!preview()) $$render(consequent_1);
+          if (get$2(displayCart).coupons.length > 0) $$render(consequent_2);
         });
       }
-      var li_9 = sibling(node_4, 2);
-      var text_4 = child(li_9, true);
-      reset(li_9);
-      reset(ul_1);
-      reset(li_7);
+      var li_10 = sibling(node_4, 2);
+      var ul_2 = child(li_10);
+      var node_7 = sibling(child(ul_2), 6);
+      {
+        var consequent_3 = ($$anchor3) => {
+          var li_11 = root_7$3();
+          append($$anchor3, li_11);
+        };
+        if_block(node_7, ($$render) => {
+          if (!preview()) $$render(consequent_3);
+        });
+      }
+      var li_12 = sibling(node_7, 2);
+      var text_5 = child(li_12, true);
+      reset(li_12);
+      reset(ul_2);
+      reset(li_10);
       reset(ol);
       template_effect(
-        ($0, $1, $2, $3) => {
+        ($0, $1, $2, $3, $4) => {
           set_text(text2, $0);
           set_text(text_1, $1);
           set_text(text_2, $2);
           set_text(text_3, $3);
-          set_text(text_4, get$2(cart).totalFormatted);
+          set_text(text_5, $4);
         },
         [
           () => shop.t("cart.content.table.desc"),
           () => shop.t("cart.content.table.price"),
           () => shop.t("cart.content.table.quantity"),
-          () => shop.t("cart.content.table.total")
+          () => shop.t("cart.content.table.total"),
+          () => formatCurrency(get$2(displayTotalCents))
         ]
       );
       append($$anchor2, ol);
     };
     if_block(node, ($$render) => {
-      if (get$2(cart) && get$2(cart).items.length) $$render(consequent_2);
+      if (get$2(displayCart) && get$2(displayCart).items.length) $$render(consequent_4);
     });
   }
   append($$anchor, fragment);
   return pop($$exports);
 }
+delegate(["click"]);
 customElements.define("go-cart", create_custom_element(Cart, { preview: {} }, [], []));
 function CartEmpty($$anchor, $$props) {
   push($$props, true);
@@ -17176,7 +17440,8 @@ function CheckoutForm($$anchor, $$props) {
       { key: "lastName", required: true },
       { key: "email", required: true },
       { key: "confirmEmail", required: true },
-      { key: "acceptTerms", required: true }
+      { key: "acceptTerms", required: true },
+      { key: "paymentMode", required: true }
     ]
   });
   wrapInElement($$props.$$host, "go-form", { "form-id": "checkoutGuest", custom: custom2() });
@@ -17212,40 +17477,42 @@ function CheckoutForm($$anchor, $$props) {
 }
 customElements.define("go-checkout-form", create_custom_element(CheckoutForm, { custom: {} }, [], []));
 enable_legacy_mode_flag();
-async function redeem(form) {
-  if (!form) {
-    throw new Error("(go-coupon-redemption): form not found");
-  }
+const APPLY_ORDER_DISCOUNT = "TokenActions::ApplyOrderDiscount";
+async function redeem(token) {
   if (!shop.cart) {
     throw new Error("(go-coupon-redemption): cart not found");
   }
-  const result = await shop.asyncFetch(() => shop.getCouponSaleByBarcode(form.details.formData.id));
-  if (result?.is_valid && result.is_voucher_for) {
-    const tickets = await shop.asyncFetch(
-      () => shop.tickets({
-        // @ts-ignore - api supports filter even if schema doesn't yet.
-        "by_ticket_ids[]": [result.is_voucher_for]
-      })
-    );
-    const ticket = tickets.find((t) => t.id === result.is_voucher_for);
-    if (!ticket) {
-      form.details.apiErrors ??= [];
-      form.details.apiErrors = [shop.t("cart.coupon.form.errors.error")];
-      return;
-    }
-    const voucherTicket = { ...ticket, price_cents: 0 };
-    shop.cart.addItem(createCartItem(createUITicket(voucherTicket), { quantity: 1 }));
-    const token = form.details.formData.id;
+  const couponSale = await shop.asyncFetch(() => shop.getCouponSaleByBarcode(token));
+  if (!couponSale?.is_valid) {
+    return fail([shop.t("cart.coupon.form.errors.notValid")]);
+  }
+  if (couponSale.value_action === APPLY_ORDER_DISCOUNT) {
     shop.cart.addCoupon(token);
-    const tokenField = form.details.fields.find((f) => f.key === "token");
-    if (tokenField) {
-      tokenField.value = "";
-      form.dispatchEvent(new Event("go-success", { bubbles: true, composed: true }));
-    }
+    return { success: true };
+  } else if (couponSale.is_voucher_for) {
+    return applyVoucher(token, couponSale);
   } else {
-    form.details.apiErrors ??= [];
-    form.details.apiErrors = [shop.t("cart.coupon.form.errors.notValid")];
+    return fail([shop.t("cart.coupon.form.errors.notValid")]);
+  }
+}
+async function applyVoucher(token, couponSale) {
+  const tickets = await shop.asyncFetch(
+    () => shop.tickets({
+      // @ts-ignore - api supports filter even if schema doesn't yet.
+      "by_ticket_ids[]": [couponSale.is_voucher_for]
+    })
+  );
+  const ticket = tickets.find((t) => t.id === couponSale.is_voucher_for);
+  if (!ticket) {
+    return fail([shop.t("cart.coupon.form.errors.error")]);
   }
+  const voucherTicket = { ...ticket, price_cents: 0 };
+  shop.cart.addItem(createCartItem(createUITicket(voucherTicket), { quantity: 1 }));
+  shop.cart.addCoupon(token);
+  return { success: true };
+}
+function fail(errors2) {
+  return { success: false, errors: errors2 };
 }
 var root$a = /* @__PURE__ */ from_html(`<go-form></go-form>`, 2);
 function CouponRedemption($$anchor, $$props) {
@@ -17255,8 +17522,17 @@ function CouponRedemption($$anchor, $$props) {
     submitLabel: "cart.coupon.form.submit",
     fields: [{ key: "token", required: true }]
   });
-  async function redeem$1(e) {
-    await redeem(e.target);
+  async function redeem$1(event2) {
+    const form = event2.target;
+    const field = form.details.fields.find((f) => f.key === "token");
+    const token = form.details.fieldValue("token").trim();
+    const result = await redeem(token);
+    if (!result.success) {
+      form.details.apiErrors = result.errors;
+      return;
+    }
+    field.value = "";
+    form.dispatchEvent(new Event("go-success", { bubbles: true, composed: true }));
   }
   init();
   var go_form = root$a();
@@ -31157,11 +31433,16 @@ var root_2$6 = /* @__PURE__ */ from_html(`<span class="go-field-star" aria-hidde
 var root_1$a = /* @__PURE__ */ from_html(` <!>`, 1);
 var root_3$6 = /* @__PURE__ */ from_html(`<label><!></label> <input/>`, 1);
 var root_4$3 = /* @__PURE__ */ from_html(`<label><input/> <span class="go-checkbox-label"><!></span></label>`);
-var root_7$2 = /* @__PURE__ */ from_html(`<option> </option>`);
+var root_7$2 = /* @__PURE__ */ from_html(`<img src="" alt=""/> <option> </option>`, 1);
 var root_6$1 = /* @__PURE__ */ from_html(`<option disabled hidden="" selected> </option> <!>`, 1);
+var select_content = /* @__PURE__ */ from_html(`<!>`, 1);
 var root_5 = /* @__PURE__ */ from_html(`<label><!></label> <select><!></select>`, 1);
-var root_11$2 = /* @__PURE__ */ from_html(`<label> <input/></label>`);
-var root_9$1 = /* @__PURE__ */ from_html(`<fieldset><legend><!></legend> <!></fieldset>`);
+var root_12$1 = /* @__PURE__ */ from_html(`<img style="width: 60px" aria-hidden="true"/>`);
+var root_11$2 = /* @__PURE__ */ from_html(`<span class="go-payment-mode-icons"></span>`);
+var root_10$1 = /* @__PURE__ */ from_html(`<label><input type="radio"/> <!></label>`);
+var root_9$1 = /* @__PURE__ */ from_html(`<fieldset role="radiogroup"><legend><!></legend> <!></fieldset>`);
+var root_15 = /* @__PURE__ */ from_html(`<label> <input/></label>`);
+var root_13 = /* @__PURE__ */ from_html(`<fieldset><legend><!></legend> <!></fieldset>`);
 function InputAndLabel($$anchor, $$props) {
   push($$props, true);
   const labelText = ($$anchor2) => {
@@ -31262,36 +31543,41 @@ function InputAndLabel($$anchor, $$props) {
       name: field().key,
       class: inputClass()
     }));
-    var node_4 = child(select_1);
-    {
-      var consequent_1 = ($$anchor3) => {
-        var fragment_3 = root_6$1();
-        var option_1 = first_child(fragment_3);
-        var text_1 = child(option_1, true);
-        reset(option_1);
-        option_1.value = option_1.__value = "";
-        var node_5 = sibling(option_1, 2);
-        each(node_5, 17, () => field().options(), index$1, ($$anchor4, option2) => {
-          var option_2 = root_7$2();
-          var text_2 = child(option_2, true);
-          reset(option_2);
-          var option_2_value = {};
-          template_effect(() => {
-            set_text(text_2, get$2(option2).label);
-            if (option_2_value !== (option_2_value = get$2(option2).value)) {
-              option_2.value = (option_2.__value = get$2(option2).value) ?? "";
-            }
+    customizable_select(select_1, () => {
+      var anchor = child(select_1);
+      var fragment_3 = select_content();
+      var node_4 = first_child(fragment_3);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var fragment_4 = root_6$1();
+          var option_1 = first_child(fragment_4);
+          var text_1 = child(option_1, true);
+          reset(option_1);
+          option_1.value = option_1.__value = "";
+          var node_5 = sibling(option_1, 2);
+          each(node_5, 17, () => field().options(), (option2) => option2.value, ($$anchor4, option2) => {
+            var fragment_5 = root_7$2();
+            var option_2 = sibling(first_child(fragment_5), 2);
+            var text_2 = child(option_2, true);
+            reset(option_2);
+            var option_2_value = {};
+            template_effect(() => {
+              set_text(text_2, get$2(option2).label);
+              if (option_2_value !== (option_2_value = get$2(option2).value)) {
+                option_2.value = (option_2.__value = get$2(option2).value) ?? "";
+              }
+            });
+            append($$anchor4, fragment_5);
           });
-          append($$anchor4, option_2);
+          template_effect(($0) => set_text(text_1, $0), [() => shop.t("common.choose")]);
+          append($$anchor3, fragment_4);
+        };
+        if_block(node_4, ($$render) => {
+          if (field().options) $$render(consequent_1);
         });
-        template_effect(($0) => set_text(text_1, $0), [() => shop.t("common.choose")]);
-        append($$anchor3, fragment_3);
-      };
-      if_block(node_4, ($$render) => {
-        if (field().options) $$render(consequent_1);
-      });
-    }
-    reset(select_1);
+      }
+      append(anchor, fragment_3);
+    });
     template_effect(() => {
       set_class(label_3, 1, clsx(labelClass()));
       set_attribute(label_3, "for", get$2(inputId));
@@ -31318,23 +31604,83 @@ function InputAndLabel($$anchor, $$props) {
       }
     });
   };
-  const radio = ($$anchor2) => {
+  const paymentMode = ($$anchor2) => {
+    const modes = /* @__PURE__ */ user_derived(() => shop.payment_modes ? Object.values(shop.payment_modes) : []);
     var fieldset = root_9$1();
     var legend = child(fieldset);
     var node_6 = child(legend);
     labelText(node_6);
     reset(legend);
     var node_7 = sibling(legend, 2);
+    each(node_7, 17, () => get$2(modes), (mode) => mode.id, ($$anchor3, mode) => {
+      var label_4 = root_10$1();
+      var input_3 = child(label_4);
+      remove_input_defaults(input_3);
+      input_3.__change = () => {
+        field(field().value = String(get$2(mode).id), true);
+      };
+      var node_8 = sibling(input_3, 2);
+      {
+        var consequent_2 = ($$anchor4) => {
+          var span_2 = root_11$2();
+          each(span_2, 20, () => get$2(mode).icons, (icon) => icon, ($$anchor5, icon) => {
+            const url = /* @__PURE__ */ user_derived(() => CDN_PATH + icon + ".svg");
+            var img = root_12$1();
+            template_effect(() => {
+              set_class(img, 1, clsx(icon));
+              set_attribute(img, "src", get$2(url));
+              set_attribute(img, "alt", icon + " icon");
+            });
+            append($$anchor5, img);
+          });
+          reset(span_2);
+          append($$anchor4, span_2);
+        };
+        if_block(node_8, ($$render) => {
+          if (get$2(mode).icons.length > 0) $$render(consequent_2);
+        });
+      }
+      reset(label_4);
+      template_effect(
+        ($0, $1, $2) => {
+          set_attribute(input_3, "name", field().key);
+          set_value(input_3, $0);
+          set_checked(input_3, $1);
+          set_attribute(input_3, "hidden", get$2(modes).length === 1);
+          set_attribute(input_3, "aria-label", $2);
+        },
+        [
+          () => String(get$2(mode).id),
+          () => get$2(modes).length === 1 || String(get$2(mode).id) === String(field().value),
+          () => shop.t(`cart.paymentMode.ariaLabel.${get$2(mode).name.toLowerCase()}`)
+        ]
+      );
+      append($$anchor3, label_4);
+    });
+    reset(fieldset);
+    template_effect(() => {
+      set_attribute(fieldset, "aria-required", field().required);
+      set_attribute(fieldset, "aria-invalid", field().errors.length > 0);
+    });
+    append($$anchor2, fieldset);
+  };
+  const radio = ($$anchor2) => {
+    var fieldset_1 = root_13();
+    var legend_1 = child(fieldset_1);
+    var node_9 = child(legend_1);
+    labelText(node_9);
+    reset(legend_1);
+    var node_10 = sibling(legend_1, 2);
     {
-      var consequent_2 = ($$anchor3) => {
-        var fragment_5 = comment();
-        var node_8 = first_child(fragment_5);
-        each(node_8, 17, () => field().options, index$1, ($$anchor4, option2) => {
-          var label_4 = root_11$2();
-          var text_3 = child(label_4);
-          var input_3 = sibling(text_3);
+      var consequent_3 = ($$anchor3) => {
+        var fragment_7 = comment();
+        var node_11 = first_child(fragment_7);
+        each(node_11, 17, () => field().options, index$1, ($$anchor4, option2) => {
+          var label_5 = root_15();
+          var text_3 = child(label_5);
+          var input_4 = sibling(text_3);
           attribute_effect(
-            input_3,
+            input_4,
             () => ({
               ...get$2(fieldAttributes),
               ...restProps,
@@ -31347,23 +31693,23 @@ function InputAndLabel($$anchor, $$props) {
             void 0,
             true
           );
-          reset(label_4);
+          reset(label_5);
           template_effect(() => {
-            set_class(label_4, 1, clsx(labelClass()));
-            set_attribute(label_4, "for", get$2(inputId) + get$2(option2));
+            set_class(label_5, 1, clsx(labelClass()));
+            set_attribute(label_5, "for", get$2(inputId) + get$2(option2));
             set_text(text_3, `${get$2(option2) ?? ""} `);
           });
-          bind_value(input_3, () => field().value, ($$value) => field(field().value = $$value, true));
-          append($$anchor4, label_4);
+          bind_value(input_4, () => field().value, ($$value) => field(field().value = $$value, true));
+          append($$anchor4, label_5);
         });
-        append($$anchor3, fragment_5);
+        append($$anchor3, fragment_7);
       };
-      if_block(node_7, ($$render) => {
-        if (field().options) $$render(consequent_2);
+      if_block(node_10, ($$render) => {
+        if (field().options) $$render(consequent_3);
       });
     }
-    reset(fieldset);
-    append($$anchor2, fieldset);
+    reset(fieldset_1);
+    append($$anchor2, fieldset_1);
   };
   let field = prop($$props, "field", 15), describedByIds = prop($$props, "describedByIds", 7), labelClass = prop($$props, "labelClass", 7), inputClass = prop($$props, "inputClass", 7), host = prop($$props, "host", 7), restProps = /* @__PURE__ */ rest_props($$props, [
     "$$slots",
@@ -31391,7 +31737,8 @@ function InputAndLabel($$anchor, $$props) {
     select,
     radio,
     date: date2,
-    textarea: null
+    textarea: null,
+    paymentMode
   };
   const snippet$1 = /* @__PURE__ */ user_derived(() => map[field().type]);
   let inputId = /* @__PURE__ */ user_derived(() => $$props.id || `go-field-${Math.random().toString(36).substring(2, 9)}`);
@@ -31410,6 +31757,7 @@ function InputAndLabel($$anchor, $$props) {
     onblur
   }));
   let label = /* @__PURE__ */ user_derived(() => shop.t(field().label) || field().label);
+  const CDN_PATH = `https://cdn.shop.platform.gomus.de/`;
   var $$exports = {
     get field() {
       return field();
@@ -31447,22 +31795,23 @@ function InputAndLabel($$anchor, $$props) {
       flushSync();
     }
   };
-  var fragment_6 = comment();
-  var node_9 = first_child(fragment_6);
+  var fragment_8 = comment();
+  var node_12 = first_child(fragment_8);
   {
-    var consequent_3 = ($$anchor2) => {
-      var fragment_7 = comment();
-      var node_10 = first_child(fragment_7);
-      snippet(node_10, () => get$2(snippet$1));
-      append($$anchor2, fragment_7);
+    var consequent_4 = ($$anchor2) => {
+      var fragment_9 = comment();
+      var node_13 = first_child(fragment_9);
+      snippet(node_13, () => get$2(snippet$1));
+      append($$anchor2, fragment_9);
     };
-    if_block(node_9, ($$render) => {
-      if (get$2(snippet$1)) $$render(consequent_3);
+    if_block(node_12, ($$render) => {
+      if (get$2(snippet$1)) $$render(consequent_4);
     });
   }
-  append($$anchor, fragment_6);
+  append($$anchor, fragment_8);
   return pop($$exports);
 }
+delegate(["change"]);
 create_custom_element(
   InputAndLabel,
   {
@@ -33428,7 +33777,7 @@ function berlinNowISO() {
 }
 var root_1$3 = /* @__PURE__ */ from_html(`<span class="go-tickets-item-title-event-title"> </span> <span class="go-tickets-item-title-product-title"> </span>`, 1);
 var root_4 = /* @__PURE__ */ from_html(`<option> </option>`);
-var root_3$1 = /* @__PURE__ */ from_html(`<li><article><ul><li class="go-tickets-item-title"><!></li> <li class="go-tickets-item-description" data-go-tickets-description=""><!></li> <li class="go-tickets-item-price" data-go-tickets-price=""> </li> <li class="go-tickets-item-quality" data-go-tickets-quality=""><select></select></li></ul></article></li>`);
+var root_3$1 = /* @__PURE__ */ from_html(`<li><article><ul><li class="go-tickets-item-title"><!></li> <li class="go-tickets-item-description" data-go-tickets-description=""><!></li> <li class="go-tickets-item-price" data-go-tickets-price=""> </li> <li class="go-tickets-item-quality" data-go-tickets-quality=""><select class="go-tickets-item-select"></select></li></ul></article></li>`);
 function Item($$anchor, $$props) {
   push($$props, true);
   const scaled_title = ($$anchor2) => {
@@ -33525,14 +33874,18 @@ function Item($$anchor, $$props) {
       reset(ul);
       reset(article);
       reset(li);
-      template_effect(() => {
-        set_class(article, 1, clsx([
-          "go-tickets-item",
-          get$2(capacity).bookedOut && "is-booked-out"
-        ]));
-        set_attribute(article, "data-testid", item().uuid);
-        set_text(text_3, item().price_formatted);
-      });
+      template_effect(
+        ($0) => {
+          set_class(article, 1, clsx([
+            "go-tickets-item",
+            get$2(capacity).bookedOut && "is-booked-out"
+          ]));
+          set_attribute(article, "data-testid", item().uuid);
+          set_text(text_3, item().price_formatted);
+          set_attribute(select, "aria-label", $0);
+        },
+        [() => shop.t("cart.content.table.edit")]
+      );
       append($$anchor2, li);
     };
     if_block(node, ($$render) => {
@@ -34088,7 +34441,6 @@ function Calendar_1($$anchor, $$props) {
     }
   });
   $$props.$$host.addEventListener("go-date-select", (e) => {
-    console.log("calendar selected date", e.detail.selected);
     if (get$2(ticketSelectionDetails)) {
       get$2(ticketSelectionDetails).selectedDate = e.detail.selected;
       get$2(ticketSelectionDetails).selectedTimeslot = void 0;