@gomusdev/web-components 3.2.0 → 3.3.1

package/dist-js/gomus-webcomponents.js

@@ -2057,6 +2057,11 @@ function autofocus(dom, value) {
     });
   }
 }
+function remove_textarea_child(dom) {
+  if (hydrating && /* @__PURE__ */ get_first_child(dom) !== null) {
+    clear_text_content(dom);
+  }
+}
 let listening_to_form_reset = false;
 function add_form_reset_listener() {
   if (!listening_to_form_reset) {
@@ -12450,6 +12455,7 @@ const TICKET_AND_QUOTAS_ENDPOINT = "/api/v4/tickets/list_and_quotas";
 const TICKETS_ENDPOINT = "/api/v4/tickets";
 const SIGN_IN_ENDPOINT = "/api/v4/auth/sign_in";
 const SIGN_UP_ENDPOINT = "/api/v4/auth";
+const WITHDRAWAL_ENDPOINT = "/api/v4/orders/withdrawals";
 const CustomerLevels = {
   // NORMAL: 0,
   // WIDGET: 5,
@@ -12601,6 +12607,16 @@ class Shop {
     if (!asGuest) requiredFields.push("password", "password_confirmation");
     return this.apiPost(SIGN_UP_ENDPOINT, { body: params, requiredFields });
   }
+  withdrawal(params) {
+    const body = { ...params, order_id: String(params.order_id) };
+    if (!body.note) delete body.note;
+    return this.apiPost(WITHDRAWAL_ENDPOINT, {
+      body,
+      requiredFields: ["order_id", "first_name", "last_name", "email"],
+      // Success is 201 with an empty body; skip JSON parsing (see apiCall).
+      parseAs: "text"
+    });
+  }
   getDates(query) {
     return this.fetchAndCache("/api/v4/dates", `dates-${JSON.stringify(query)}`, "dates", { query, cache: 60 });
   }
@@ -12756,7 +12772,7 @@ class Shop {
   }
   async apiCall(path, options) {
     this.#ensureApi();
-    const { body, params = {}, requiredFields } = options;
+    const { body, params = {}, requiredFields, parseAs } = options;
     const validationErrors = validateApiPostBody(body, requiredFields);
     if (Object.keys(validationErrors).length > 0) {
       return { error: { errors: validationErrors } };
@@ -12764,7 +12780,12 @@ class Shop {
     const httpMethod = this.client[options.method];
     const ret = await httpMethod(path, {
       body,
-      params: assign(this.#defaultApiParams, { params }).params
+      params: assign(this.#defaultApiParams, { params }).params,
+      // `parseAs` lets callers opt out of openapi-fetch's default JSON parsing.
+      // Endpoints that answer 2xx with an empty body (e.g. withdrawal's
+      // `head :created`) must use 'text', otherwise coreFetch's unconditional
+      // response.json() throws on the empty body. undefined => default 'json'.
+      parseAs
     });
     return ret;
   }
@@ -16253,6 +16274,42 @@ var allFields = {
     autocomplete: "off",
     validator: _instanceof(File)
   },
+  withdrawalFirstName: {
+    key: "withdrawalFirstName",
+    apiKey: "first_name",
+    type: "text",
+    label: "user.registration.form.name",
+    placeholder: "",
+    description: "",
+    autocomplete: "given-name"
+  },
+  withdrawalLastName: {
+    key: "withdrawalLastName",
+    apiKey: "last_name",
+    type: "text",
+    label: "user.registration.form.surname",
+    placeholder: "",
+    description: "",
+    autocomplete: "family-name"
+  },
+  orderNumber: {
+    key: "orderNumber",
+    apiKey: "order_id",
+    type: "text",
+    label: "withdrawal.form.orderNumber",
+    placeholder: "",
+    description: "",
+    autocomplete: "off"
+  },
+  withdrawalNote: {
+    key: "withdrawalNote",
+    apiKey: "note",
+    type: "textarea",
+    label: "withdrawal.form.note",
+    placeholder: "",
+    description: "",
+    autocomplete: "off"
+  },
   paymentMode: {
     key: "paymentMode",
     apiKey: "payment_mode_id",
@@ -17151,7 +17208,7 @@ var root_6$2 = /* @__PURE__ */ from_html(`<span class="go-cart-item-price-discou
 var root_7$3 = /* @__PURE__ */ from_html(`<span> </span>`);
 var root_9$4 = /* @__PURE__ */ from_html(`<option> </option>`);
 var root_8$3 = /* @__PURE__ */ from_html(`<select class="go-cart-item-select"></select>`);
-var root_10$1 = /* @__PURE__ */ from_html(`<li class="go-cart-item-remove"><button class="go-cart-remove">⨉</button></li>`);
+var root_10$2 = /* @__PURE__ */ from_html(`<li class="go-cart-item-remove"><button class="go-cart-remove">⨉</button></li>`);
 var root_1$m = /* @__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);
@@ -17328,7 +17385,7 @@ function Item$1($$anchor, $$props) {
       var node_5 = sibling(li_2, 2);
       {
         var consequent_4 = ($$anchor3) => {
-          var li_3 = root_10$1();
+          var li_3 = root_10$2();
           var button = child(li_3);
           button.__click = del;
           reset(li_3);
@@ -31332,7 +31389,7 @@ function Date_picker_trigger($$anchor, $$props) {
 create_custom_element(Date_picker_trigger, { ref: {}, onkeydown: {} }, [], [], { mode: "open" });
 var root_4$4 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_9$2 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
-var root_11$3 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root_11$2 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_8$2 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_1$b = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
 function DatePicker_1($$anchor, $$props) {
@@ -31508,7 +31565,7 @@ function DatePicker_1($$anchor, $$props) {
                       component(node_15, () => Calendar_grid, ($$anchor8, DatePicker_Grid) => {
                         DatePicker_Grid($$anchor8, {
                           children: ($$anchor9, $$slotProps3) => {
-                            var fragment_11 = root_11$3();
+                            var fragment_11 = root_11$2();
                             var node_16 = first_child(fragment_11);
                             component(node_16, () => Calendar_grid_head, ($$anchor10, DatePicker_GridHead) => {
                               DatePicker_GridHead($$anchor10, {
@@ -31638,19 +31695,20 @@ create_custom_element(
 var root_2$6 = /* @__PURE__ */ from_html(`<span class="go-field-star" aria-hidden="true">*</span>`);
 var root_1$a = /* @__PURE__ */ from_html(` <!>`, 1);
 var root_3$6 = /* @__PURE__ */ from_html(`<label><!></label> <input/>`, 1);
-var root_5 = /* @__PURE__ */ from_html(`<figure role="status" aria-live="polite"><img class="go-file-preview"/> <figcaption class="go-file-preview-caption"> </figcaption></figure>`);
-var root_4$3 = /* @__PURE__ */ from_html(`<label><!></label> <input/> <!>`, 1);
-var root_6$1 = /* @__PURE__ */ from_html(`<label><input/> <span class="go-checkbox-label"><!></span></label>`);
-var root_9$1 = /* @__PURE__ */ from_html(`<img src="" alt=""/> <option> </option>`, 1);
-var root_8$1 = /* @__PURE__ */ from_html(`<option disabled hidden="" selected> </option> <!>`, 1);
+var root_4$3 = /* @__PURE__ */ from_html(`<label><!></label> <textarea></textarea>`, 1);
+var root_6$1 = /* @__PURE__ */ from_html(`<figure role="status" aria-live="polite"><img class="go-file-preview"/> <figcaption class="go-file-preview-caption"> </figcaption></figure>`);
+var root_5 = /* @__PURE__ */ from_html(`<label><!></label> <input/> <!>`, 1);
+var root_7$2 = /* @__PURE__ */ from_html(`<label><input/> <span class="go-checkbox-label"><!></span></label>`);
+var root_10$1 = /* @__PURE__ */ from_html(`<img src="" alt=""/> <option> </option>`, 1);
+var root_9$1 = /* @__PURE__ */ from_html(`<option disabled hidden="" selected> </option> <!>`, 1);
 var select_content = /* @__PURE__ */ from_html(`<!>`, 1);
-var root_7$2 = /* @__PURE__ */ from_html(`<label><!></label> <select><!></select>`, 1);
-var root_14 = /* @__PURE__ */ from_html(`<img style="width: 60px" aria-hidden="true"/>`);
-var root_13 = /* @__PURE__ */ from_html(`<span class="go-payment-mode-icons"></span>`);
-var root_12$1 = /* @__PURE__ */ from_html(`<label><input type="radio"/> <!></label>`);
-var root_11$2 = /* @__PURE__ */ from_html(`<fieldset role="radiogroup"><legend><!></legend> <!></fieldset>`);
-var root_17 = /* @__PURE__ */ from_html(`<label> <input/></label>`);
-var root_15 = /* @__PURE__ */ from_html(`<fieldset><legend><!></legend> <!></fieldset>`);
+var root_8$1 = /* @__PURE__ */ from_html(`<label><!></label> <select><!></select>`, 1);
+var root_15 = /* @__PURE__ */ from_html(`<img style="width: 60px" aria-hidden="true"/>`);
+var root_14 = /* @__PURE__ */ from_html(`<span class="go-payment-mode-icons"></span>`);
+var root_13 = /* @__PURE__ */ from_html(`<label><input type="radio"/> <!></label>`);
+var root_12$1 = /* @__PURE__ */ from_html(`<fieldset role="radiogroup"><legend><!></legend> <!></fieldset>`);
+var root_18 = /* @__PURE__ */ from_html(`<label> <input/></label>`);
+var root_16 = /* @__PURE__ */ from_html(`<fieldset><legend><!></legend> <!></fieldset>`);
 function InputAndLabel($$anchor, $$props) {
   push($$props, true);
   const labelText = ($$anchor2) => {
@@ -31700,13 +31758,35 @@ function InputAndLabel($$anchor, $$props) {
     bind_value(input_1, () => field().value, ($$value) => field(field().value = $$value, true));
     append($$anchor2, fragment_1);
   };
-  const file = ($$anchor2) => {
+  const textarea = ($$anchor2) => {
     var fragment_2 = root_4$3();
     var label_2 = first_child(fragment_2);
     var node_2 = child(label_2);
     labelText(node_2);
     reset(label_2);
-    var input_2 = sibling(label_2, 2);
+    var textarea_1 = sibling(label_2, 2);
+    remove_textarea_child(textarea_1);
+    attribute_effect(textarea_1, () => ({
+      ...get$2(fieldAttributes),
+      ...restProps,
+      class: inputClass(),
+      placeholder: field().placeholder,
+      name: field().key
+    }));
+    template_effect(() => {
+      set_class(label_2, 1, clsx(labelClass()));
+      set_attribute(label_2, "for", get$2(inputId));
+    });
+    bind_value(textarea_1, () => field().value, ($$value) => field(field().value = $$value, true));
+    append($$anchor2, fragment_2);
+  };
+  const file = ($$anchor2) => {
+    var fragment_3 = root_5();
+    var label_3 = first_child(fragment_3);
+    var node_3 = child(label_3);
+    labelText(node_3);
+    reset(label_3);
+    var input_2 = sibling(label_3, 2);
     var event_handler = (e) => {
       const files = e.currentTarget.files;
       field(field().value = files && files[0] ? files[0] : null, true);
@@ -31730,10 +31810,10 @@ function InputAndLabel($$anchor, $$props) {
       void 0,
       true
     );
-    var node_3 = sibling(input_2, 2);
+    var node_4 = sibling(input_2, 2);
     {
       var consequent_1 = ($$anchor3) => {
-        var figure = root_5();
+        var figure = root_6$1();
         var img = child(figure);
         var figcaption = sibling(img, 2);
         var text_1 = child(figcaption, true);
@@ -31752,19 +31832,19 @@ function InputAndLabel($$anchor, $$props) {
         );
         append($$anchor3, figure);
       };
-      if_block(node_3, ($$render) => {
+      if_block(node_4, ($$render) => {
         if (get$2(filePreviewUrl) && field().value instanceof File) $$render(consequent_1);
       });
     }
     template_effect(() => {
-      set_class(label_2, 1, clsx(labelClass()));
-      set_attribute(label_2, "for", get$2(inputId));
+      set_class(label_3, 1, clsx(labelClass()));
+      set_attribute(label_3, "for", get$2(inputId));
     });
-    append($$anchor2, fragment_2);
+    append($$anchor2, fragment_3);
   };
   const checkbox = ($$anchor2) => {
-    var label_3 = root_6$1();
-    var input_3 = child(label_3);
+    var label_4 = root_7$2();
+    var input_3 = child(label_4);
     attribute_effect(
       input_3,
       () => ({
@@ -31781,13 +31861,13 @@ function InputAndLabel($$anchor, $$props) {
       true
     );
     var span_1 = sibling(input_3, 2);
-    var node_4 = child(span_1);
-    labelText(node_4);
+    var node_5 = child(span_1);
+    labelText(node_5);
     reset(span_1);
-    reset(label_3);
+    reset(label_4);
     template_effect(() => {
-      set_class(label_3, 1, clsx(labelClass()));
-      set_attribute(label_3, "for", get$2(inputId));
+      set_class(label_4, 1, clsx(labelClass()));
+      set_attribute(label_4, "for", get$2(inputId));
     });
     bind_checked(
       input_3,
@@ -31798,15 +31878,15 @@ function InputAndLabel($$anchor, $$props) {
         field(field().value = value, true);
       }
     );
-    append($$anchor2, label_3);
+    append($$anchor2, label_4);
   };
   const select = ($$anchor2) => {
-    var fragment_3 = root_7$2();
-    var label_4 = first_child(fragment_3);
-    var node_5 = child(label_4);
-    labelText(node_5);
-    reset(label_4);
-    var select_1 = sibling(label_4, 2);
+    var fragment_4 = root_8$1();
+    var label_5 = first_child(fragment_4);
+    var node_6 = child(label_5);
+    labelText(node_6);
+    reset(label_5);
+    var select_1 = sibling(label_5, 2);
     attribute_effect(select_1, () => ({
       ...get$2(fieldAttributes),
       ...restProps,
@@ -31815,19 +31895,19 @@ function InputAndLabel($$anchor, $$props) {
     }));
     customizable_select(select_1, () => {
       var anchor = child(select_1);
-      var fragment_4 = select_content();
-      var node_6 = first_child(fragment_4);
+      var fragment_5 = select_content();
+      var node_7 = first_child(fragment_5);
       {
         var consequent_2 = ($$anchor3) => {
-          var fragment_5 = root_8$1();
-          var option_1 = first_child(fragment_5);
+          var fragment_6 = root_9$1();
+          var option_1 = first_child(fragment_6);
           var text_2 = child(option_1, true);
           reset(option_1);
           option_1.value = option_1.__value = "";
-          var node_7 = sibling(option_1, 2);
-          each(node_7, 17, () => field().options(), (option2) => option2.value, ($$anchor4, option2) => {
-            var fragment_6 = root_9$1();
-            var option_2 = sibling(first_child(fragment_6), 2);
+          var node_8 = sibling(option_1, 2);
+          each(node_8, 17, () => field().options(), (option2) => option2.value, ($$anchor4, option2) => {
+            var fragment_7 = root_10$1();
+            var option_2 = sibling(first_child(fragment_7), 2);
             var text_3 = child(option_2, true);
             reset(option_2);
             var option_2_value = {};
@@ -31837,23 +31917,23 @@ function InputAndLabel($$anchor, $$props) {
                 option_2.value = (option_2.__value = get$2(option2).value) ?? "";
               }
             });
-            append($$anchor4, fragment_6);
+            append($$anchor4, fragment_7);
           });
           template_effect(($0) => set_text(text_2, $0), [() => shop.t("common.choose")]);
-          append($$anchor3, fragment_5);
+          append($$anchor3, fragment_6);
         };
-        if_block(node_6, ($$render) => {
+        if_block(node_7, ($$render) => {
           if (field().options) $$render(consequent_2);
         });
       }
-      append(anchor, fragment_4);
+      append(anchor, fragment_5);
     });
     template_effect(() => {
-      set_class(label_4, 1, clsx(labelClass()));
-      set_attribute(label_4, "for", get$2(inputId));
+      set_class(label_5, 1, clsx(labelClass()));
+      set_attribute(label_5, "for", get$2(inputId));
     });
     bind_select_value(select_1, () => field().value, ($$value) => field(field().value = $$value, true));
-    append($$anchor2, fragment_3);
+    append($$anchor2, fragment_4);
   };
   const date2 = ($$anchor2) => {
     DatePicker_1($$anchor2, {
@@ -31876,26 +31956,26 @@ function InputAndLabel($$anchor, $$props) {
   };
   const paymentMode = ($$anchor2) => {
     const modes = /* @__PURE__ */ user_derived(() => shop.payment_modes ? Object.values(shop.payment_modes) : []);
-    var fieldset = root_11$2();
+    var fieldset = root_12$1();
     var legend = child(fieldset);
-    var node_8 = child(legend);
-    labelText(node_8);
+    var node_9 = child(legend);
+    labelText(node_9);
     reset(legend);
-    var node_9 = sibling(legend, 2);
-    each(node_9, 17, () => get$2(modes), (mode) => mode.id, ($$anchor3, mode) => {
-      var label_5 = root_12$1();
-      var input_4 = child(label_5);
+    var node_10 = sibling(legend, 2);
+    each(node_10, 17, () => get$2(modes), (mode) => mode.id, ($$anchor3, mode) => {
+      var label_6 = root_13();
+      var input_4 = child(label_6);
       remove_input_defaults(input_4);
       input_4.__change = () => {
         field(field().value = String(get$2(mode).id), true);
       };
-      var node_10 = sibling(input_4, 2);
+      var node_11 = sibling(input_4, 2);
       {
         var consequent_3 = ($$anchor4) => {
-          var span_2 = root_13();
+          var span_2 = root_14();
           each(span_2, 20, () => get$2(mode).icons, (icon) => icon, ($$anchor5, icon) => {
             const url = /* @__PURE__ */ user_derived(() => CDN_PATH + icon + ".svg");
-            var img_1 = root_14();
+            var img_1 = root_15();
             template_effect(() => {
               set_class(img_1, 1, clsx(icon));
               set_attribute(img_1, "src", get$2(url));
@@ -31906,11 +31986,11 @@ function InputAndLabel($$anchor, $$props) {
           reset(span_2);
           append($$anchor4, span_2);
         };
-        if_block(node_10, ($$render) => {
+        if_block(node_11, ($$render) => {
           if (get$2(mode).icons.length > 0) $$render(consequent_3);
         });
       }
-      reset(label_5);
+      reset(label_6);
       template_effect(
         ($0, $1, $2) => {
           set_attribute(input_4, "name", field().key);
@@ -31925,7 +32005,7 @@ function InputAndLabel($$anchor, $$props) {
           () => shop.t(`cart.paymentMode.ariaLabel.${get$2(mode).name.toLowerCase()}`)
         ]
       );
-      append($$anchor3, label_5);
+      append($$anchor3, label_6);
     });
     reset(fieldset);
     template_effect(() => {
@@ -31935,19 +32015,19 @@ function InputAndLabel($$anchor, $$props) {
     append($$anchor2, fieldset);
   };
   const radio = ($$anchor2) => {
-    var fieldset_1 = root_15();
+    var fieldset_1 = root_16();
     var legend_1 = child(fieldset_1);
-    var node_11 = child(legend_1);
-    labelText(node_11);
+    var node_12 = child(legend_1);
+    labelText(node_12);
     reset(legend_1);
-    var node_12 = sibling(legend_1, 2);
+    var node_13 = sibling(legend_1, 2);
     {
       var consequent_4 = ($$anchor3) => {
-        var fragment_8 = comment();
-        var node_13 = first_child(fragment_8);
-        each(node_13, 17, () => field().options, index$1, ($$anchor4, option2) => {
-          var label_6 = root_17();
-          var text_4 = child(label_6);
+        var fragment_9 = comment();
+        var node_14 = first_child(fragment_9);
+        each(node_14, 17, () => field().options, index$1, ($$anchor4, option2) => {
+          var label_7 = root_18();
+          var text_4 = child(label_7);
           var input_5 = sibling(text_4);
           attribute_effect(
             input_5,
@@ -31963,18 +32043,18 @@ function InputAndLabel($$anchor, $$props) {
             void 0,
             true
           );
-          reset(label_6);
+          reset(label_7);
           template_effect(() => {
-            set_class(label_6, 1, clsx(labelClass()));
-            set_attribute(label_6, "for", get$2(inputId) + get$2(option2));
+            set_class(label_7, 1, clsx(labelClass()));
+            set_attribute(label_7, "for", get$2(inputId) + get$2(option2));
             set_text(text_4, `${get$2(option2) ?? ""} `);
           });
           bind_value(input_5, () => field().value, ($$value) => field(field().value = $$value, true));
-          append($$anchor4, label_6);
+          append($$anchor4, label_7);
         });
-        append($$anchor3, fragment_8);
+        append($$anchor3, fragment_9);
       };
-      if_block(node_12, ($$render) => {
+      if_block(node_13, ($$render) => {
         if (field().options) $$render(consequent_4);
       });
     }
@@ -32008,7 +32088,7 @@ function InputAndLabel($$anchor, $$props) {
     radio,
     date: date2,
     file,
-    textarea: null,
+    textarea,
     paymentMode
   };
   const snippet$1 = /* @__PURE__ */ user_derived(() => map[field().type]);
@@ -32079,20 +32159,20 @@ function InputAndLabel($$anchor, $$props) {
       flushSync();
     }
   };
-  var fragment_9 = comment();
-  var node_14 = first_child(fragment_9);
+  var fragment_10 = comment();
+  var node_15 = first_child(fragment_10);
   {
     var consequent_5 = ($$anchor2) => {
-      var fragment_10 = comment();
-      var node_15 = first_child(fragment_10);
-      snippet(node_15, () => get$2(snippet$1));
-      append($$anchor2, fragment_10);
+      var fragment_11 = comment();
+      var node_16 = first_child(fragment_11);
+      snippet(node_16, () => get$2(snippet$1));
+      append($$anchor2, fragment_11);
     };
-    if_block(node_14, ($$render) => {
+    if_block(node_15, ($$render) => {
       if (get$2(snippet$1)) $$render(consequent_5);
     });
   }
-  append($$anchor, fragment_9);
+  append($$anchor, fragment_10);
   return pop($$exports);
 }
 delegate(["change"]);
@@ -37702,6 +37782,51 @@ function AddToCartButton($$anchor, $$props) {
 }
 delegate(["click"]);
 customElements.define("go-add-to-cart-button", create_custom_element(AddToCartButton, {}, [], ["details"]));
+function Withdrawal($$anchor, $$props) {
+  push($$props, true);
+  let custom2 = prop($$props, "custom", 7, false);
+  Forms.defineForm({
+    id: "withdrawal",
+    submitLabel: "withdrawal.actions.submit",
+    fields: [
+      { key: "withdrawalFirstName", required: true },
+      { key: "withdrawalLastName", required: true },
+      { key: "email", required: true },
+      { key: "orderNumber", required: true },
+      { key: "withdrawalNote", required: false }
+    ]
+  });
+  async function onSubmit(event2) {
+    const form = event2.target;
+    const details = form.details;
+    const result = await shop.withdrawal(details.formData);
+    if (result.response?.ok) {
+      $$props.$$host.dispatchEvent(new Event("go-success", { bubbles: true, composed: true }));
+    } else {
+      details.apiErrors = result.error?.errors ?? [shop.t("withdrawal.form.errors.requestFailed")];
+    }
+  }
+  wrapInElement($$props.$$host, "go-form", { "form-id": "withdrawal", custom: custom2() });
+  $$props.$$host.addEventListener("submit", onSubmit);
+  var $$exports = {
+    get custom() {
+      return custom2();
+    },
+    set custom($$value = false) {
+      custom2($$value);
+      flushSync();
+    }
+  };
+  return pop($$exports);
+}
+customElements.define("go-withdrawal-form", create_custom_element(
+  Withdrawal,
+  {
+    custom: { attribute: "custom", reflect: true, type: "Boolean" }
+  },
+  [],
+  []
+));
 async function initGo(window2) {
   const stub = window2.go;
   let q = stub && stub._queue || [];