@konnectio/core/dist/gift-card.js

Konnectio Core Frontend Integration.

import { d as G, u as q, r as O, c as Y, a as y, b as s, w as C, e as l, h as c, i as m, f as t, g as e, n as J, t as L, j as te, C as oe, s as z, D as ne, o as ie, S as se, E as S, G as A, F as re, v as de, z as v, k as ue, _ as ce, l as pe, m as me, p as fe } from "./mitt-CWSmi8M-.js";
import { G as ve } from "./style-DJF9fHLt.js";
import { u as I } from "./giftCard-C5SFtGL4.js";
import { a as be, e as T, x as he, _ as x, f as _e, d as ke, L as ge, T as M, i as ye, C as Ce } from "./SelectField.vue_vue_type_style_index_0_lang-Cev1TH7y.js";
import { _ as Ve } from "./_.vue_vue_type_style_index_0_lang-CW619CRS.js";
import { C as $e, a as we, P as Fe, _ as Ee } from "./CheckoutWindow-CF2-eaiR.js";
import { E as Pe } from "./Field.vue_vue_type_style_index_0_scoped_6ef33e68_lang-NEWgHGKm.js";
import { F as U } from "./Field-Dw5FVydD.js";
import { E as Ue } from "./ErrorMessage-rPcq7mbu.js";
import { S as Te } from "./TermsOfService-D_lDtdlp.js";
import { f as Ge } from "./index-Dp94FdK7.js";
const Se = { class: "media-selector" }, Ae = ["accept"], Me = { class: "media-selector-wrapper" }, Le = { class: "media-selector-tools" }, qe = { key: 0 }, Be = { key: 1 }, Re = { key: 2 }, Ie = ["src"], xe = /* @__PURE__ */ G({
  __name: "MediaSelector",
  props: {
    modelValue: {},
    validation: { default: "image/*" },
    iconColor: { default: "#000" },
    label: {},
    required: { type: Boolean, default: !1 }
  },
  emits: ["update:modelValue"],
  setup(b, { emit: r }) {
    const p = r, o = b, { t: u } = q(), { display: h } = be(), f = O(), _ = Y(() => o.modelValue.base64 !== "");
    function V(a) {
      p("update:modelValue", a);
    }
    function D() {
      V({
        base64: "",
        name: "",
        type: ""
      }), f.value && (f.value.value = "");
    }
    function $() {
      f.value && f.value.click();
    }
    function H(a, d) {
      const [g, B] = [a.name, a.type], k = new FileReader();
      k.onload = function(P) {
        if (P.target) {
          const R = P.target.result;
          d({ base64: R, name: g, type: B });
        } else
          h({
            message: u("imageUploadError"),
            type: "error"
          });
      }, k.readAsDataURL(a);
    }
    async function w() {
      let a;
      (a = f.value.files) instanceof FileList && H(a[0], V);
    }
    return (a, d) => (s(), y(he, {
      label: a.label,
      required: a.required,
      type: "media"
    }, {
      default: C(() => [
        l("div", Se, [
          l("input", {
            ref_key: "fileInput",
            ref: f,
            type: "file",
            class: "hidden",
            accept: a.validation,
            single: "",
            onChange: d[0] || (d[0] = (g) => w())
          }, null, 40, Ae),
          l("div", Me, [
            l("ul", Le, [
              _.value ? m("", !0) : (s(), c("li", qe, [
                t(T, {
                  label: e(u)("uploadFile"),
                  type: "button",
                  icon: "upload",
                  "icon-color": a.iconColor,
                  onClickEvent: d[1] || (d[1] = (g) => $())
                }, null, 8, ["label", "icon-color"])
              ])),
              _.value ? (s(), c("li", Be, [
                t(T, {
                  label: e(u)("replaceFile"),
                  type: "button",
                  icon: "repeat-alt",
                  "icon-color": a.iconColor,
                  onClickEvent: d[2] || (d[2] = (g) => $())
                }, null, 8, ["label", "icon-color"])
              ])) : m("", !0),
              _.value ? (s(), c("li", Re, [
                t(T, {
                  label: e(u)("removeFile"),
                  type: "button",
                  icon: "trash-alt",
                  "icon-color": a.iconColor,
                  onClickEvent: d[3] || (d[3] = (g) => D())
                }, null, 8, ["label", "icon-color"])
              ])) : m("", !0)
            ]),
            l("div", {
              class: J([
                "media-selector-previewer",
                { opened: _.value }
              ])
            }, [
              a.modelValue ? (s(), c("img", {
                key: 0,
                src: a.modelValue.base64
              }, null, 8, Ie)) : m("", !0)
            ], 2)
          ])
        ])
      ]),
      _: 1
    }, 8, ["label", "required"]));
  }
});
function W(b) {
  const r = b;
  r.__i18n = r.__i18n || [], r.__i18n.push({
    locale: "",
    resource: {
      da: {
        uploadFile: { t: 0, b: { t: 2, i: [{ t: 3 }], s: "Upload billede" } },
        removeFile: { t: 0, b: { t: 2, i: [{ t: 3 }], s: "Fjern billede" } },
        replaceFile: { t: 0, b: { t: 2, i: [{ t: 3 }], s: "Ersat billede" } },
        imageUploadError: { t: 0, b: { t: 2, i: [{ t: 3 }], s: "Der skete en fejl under billede upload!" } }
      },
      en: {
        uploadFile: { t: 0, b: { t: 2, i: [{ t: 3 }], s: "Upload image" } },
        removeFile: { t: 0, b: { t: 2, i: [{ t: 3 }], s: "Remove image" } },
        replaceFile: { t: 0, b: { t: 2, i: [{ t: 3 }], s: "Replace image" } },
        imageUploadError: { t: 0, b: { t: 2, i: [{ t: 3 }], s: "An error occurred under image upload!" } }
      }
    }
  });
}
typeof W == "function" && W(xe);
const De = { class: "gift-card-skeleton" }, He = { class: "gift-card-skeleton-form" }, Ne = /* @__PURE__ */ G({
  __name: "GiftCardSkeleton",
  setup(b) {
    return (r, p) => (s(), c("div", De, [
      l("div", He, [
        t(U),
        t(U),
        t(U),
        t(U),
        t(U, { "is-text-area": "" }),
        t(Pe, { height: "44px" })
      ])
    ]));
  }
}), je = /* @__PURE__ */ x(Ne, [["__scopeId", "data-v-ba3efaa1"]]), ze = { class: "konnectio-accept-terms" }, We = /* @__PURE__ */ G({
  __name: "_",
  props: {
    content: {},
    buttonLabel: {}
  },
  setup(b) {
    const { t: r } = q(), p = O(!1);
    return (o, u) => (s(), c("div", ze, [
      t(e(oe), {
        keypath: "general.termsAndConditionsNotice",
        tag: "span",
        scope: "global"
      }, {
        button: C(() => [
          l("i", null, '"' + L(o.buttonLabel) + '"', 1)
        ]),
        terms: C(() => [
          l("a", {
            class: "konnectio-accept-terms-link",
            target: "_blank",
            onClick: u[0] || (u[0] = te((h) => p.value = !0, ["prevent"]))
          }, [
            l("span", null, L(e(r)("general.termsAndConditions")), 1)
          ])
        ]),
        _: 1
      }),
      t(Te, {
        modelValue: p.value,
        "onUpdate:modelValue": u[1] || (u[1] = (h) => p.value = h),
        description: o.content
      }, null, 8, ["modelValue", "description"])
    ]));
  }
}), Ke = /* @__PURE__ */ x(We, [["__scopeId", "data-v-689c045a"]]), Oe = /* @__PURE__ */ G({
  __name: "GiftCard",
  setup(b) {
    const { t: r } = q(), p = I();
    return (o, u) => (s(), y(Ke, {
      content: e(p).termsOfService,
      "button-label": e(r)("giftCard.orderGiftCard")
    }, null, 8, ["content", "button-label"]));
  }
}), Ye = ["data-layout"], Je = { id: "konnectio-gift-card-wrapper" }, Qe = { id: "konnectio-gift-card-title" }, Xe = { id: "konnectio-gift-card-content" }, Ze = { id: "konnectio-gift-card-payment" }, el = ["innerHTML"], ll = { key: 0 }, al = {
  key: 0,
  id: "konnectio-select-place-type"
}, tl = {
  class: /* @__PURE__ */ J(["konnectio-label", "required"])
}, ol = { id: "konnectio-select-place-type-input" }, nl = ["innerHTML"], il = {
  key: 0,
  id: "konnectio-gift-card-order"
}, sl = { class: "konnectio-panel" }, rl = {
  key: 1,
  id: "konnectio-gift-card-remarks"
}, dl = {
  key: 2,
  id: "konnectio-gift-card-order-minimal"
}, ul = { id: "konnectio-gift-card-recaptcha" }, cl = /* @__PURE__ */ G({
  name: "GiftCardLayout",
  __name: "GiftCard",
  props: {
    accessToken: {},
    layout: { default: "minimal" },
    placeType: {},
    styling: {}
  },
  setup(b) {
    const r = b, p = Y(() => ({
      panelMaxWidth: "800px",
      ...r.styling
    })), { t: o } = q(), {
      name: u,
      email: h,
      phone: f,
      value: _,
      remark: V,
      showValue: D,
      quantity: $,
      media: H,
      placeId: w,
      placeType: a,
      showFormPage: d,
      showPaymentPage: g,
      showConfirmationPage: B,
      places: k,
      hasFilledForm: P,
      hasForcedPlaceType: R,
      isWaitingForResponse: F
    } = z(I()), { initialize: Q, orderGiftCard: N, fetchMetadata: X } = I(), { isRecaptchaEnabled: Z, currency: ee, hasError: le } = z(_e());
    return ne(a, () => {
      w.value = void 0;
    }), ie(() => {
      const E = r.placeType ? parseInt(r.placeType) : void 0;
      Q(E);
    }), (E, n) => (s(), y(Ce, { styling: p.value }, {
      default: C(() => [
        (s(), y(se, null, {
          default: C(() => [
            t(Ve, {
              "access-token": E.accessToken,
              "data-layout": E.layout,
              callback: e(X)
            }, {
              default: C(() => [
                e(le) ? (s(), y(Ue, {
                  key: 1,
                  title: "Unable to render Gift card module",
                  description: "Gift card functionality hasn't been setup for this account. Please contact Octopus PMS for support."
                })) : (s(), c("div", {
                  key: 0,
                  id: "konnectio-gift-card-module",
                  "data-layout": E.layout
                }, [
                  l("div", Je, [
                    l("h2", Qe, [
                      l("span", null, L(e(o)("giftCard.title")), 1)
                    ]),
                    l("div", Xe, [
                      S(l("div", Ze, [
                        t($e)
                      ], 512), [
                        [A, e(g)]
                      ]),
                      S(l("div", null, [
                        l("p", {
                          id: "konnectio-gift-card-description",
                          innerHTML: e(o)("giftCard.description")
                        }, null, 8, el),
                        l("form", null, [
                          e(R) ? m("", !0) : (s(), c("div", ll, [
                            e(k) ? (s(), c("div", al, [
                              l("label", tl, [
                                l("span", null, L(e(o)("giftCard.selectType")), 1)
                              ]),
                              l("div", ol, [
                                l("ul", null, [
                                  (s(!0), c(re, null, de(e(k), (i, j) => (s(), c("li", { key: j }, [
                                    t(we, {
                                      modelValue: e(a),
                                      "onUpdate:modelValue": n[0] || (n[0] = (ae) => v(a) ? a.value = ae : null),
                                      type: "radio",
                                      name: "placeType",
                                      val: j,
                                      label: i.label
                                    }, null, 8, ["modelValue", "val", "label"])
                                  ]))), 128))
                                ]),
                                e(k)[e(a)] && e(k)[e(a)].data.length > 1 ? (s(), y(ke, {
                                  key: 0,
                                  modelValue: e(w),
                                  "onUpdate:modelValue": n[1] || (n[1] = (i) => v(w) ? w.value = i : null),
                                  placeholder: e(o)("giftCard.selectPlacePlaceholder"),
                                  options: e(k)[e(a)].data,
                                  labelKey: "name",
                                  valueKey: "id",
                                  required: ""
                                }, null, 8, ["modelValue", "placeholder", "options"])) : m("", !0)
                              ])
                            ])) : (s(), y(ge, { key: 1 }))
                          ])),
                          t(M, {
                            modelValue: e(u),
                            "onUpdate:modelValue": n[2] || (n[2] = (i) => v(u) ? u.value = i : null),
                            type: "text",
                            name: "name",
                            autocomplete: "name",
                            label: e(o)("giftCard.name"),
                            icon: "user-alt",
                            placeholder: e(o)("giftCard.namePlaceholder"),
                            required: ""
                          }, null, 8, ["modelValue", "label", "placeholder"]),
                          t(M, {
                            modelValue: e(h),
                            "onUpdate:modelValue": n[3] || (n[3] = (i) => v(h) ? h.value = i : null),
                            type: "email",
                            name: "email",
                            autocomplete: "email",
                            label: e(o)("giftCard.email"),
                            icon: "at",
                            placeholder: e(o)("giftCard.emailPlaceholder"),
                            required: ""
                          }, null, 8, ["modelValue", "label", "placeholder"]),
                          t(Fe, {
                            modelValue: e(f),
                            "onUpdate:modelValue": n[4] || (n[4] = (i) => v(f) ? f.value = i : null),
                            icon: "phone-office",
                            label: e(o)("giftCard.phone"),
                            placeholder: e(o)("giftCard.phonePlaceholder"),
                            required: ""
                          }, null, 8, ["modelValue", "label", "placeholder"]),
                          t(M, {
                            modelValue: e(_),
                            "onUpdate:modelValue": n[5] || (n[5] = (i) => v(_) ? _.value = i : null),
                            type: "number",
                            name: "value",
                            label: e(o)("giftCard.value"),
                            icon: "money-bill",
                            placeholder: e(o)("giftCard.valuePlaceholder"),
                            suffix: e(ee),
                            required: ""
                          }, null, 8, ["modelValue", "label", "placeholder", "suffix"]),
                          m("", !0),
                          m("", !0),
                          t(ye, {
                            modelValue: e($),
                            "onUpdate:modelValue": n[8] || (n[8] = (i) => v($) ? $.value = i : null),
                            label: e(o)("giftCard.quantity"),
                            icon: "gift-card",
                            required: ""
                          }, null, 8, ["modelValue", "label"])
                        ])
                      ], 512), [
                        [A, e(d)]
                      ]),
                      S(l("div", null, [
                        l("div", {
                          innerHTML: e(o)("giftCard.thankYou")
                        }, null, 8, nl)
                      ], 512), [
                        [A, e(B)]
                      ])
                    ]),
                    E.layout !== "minimal" && e(d) ? (s(), c("div", il, [
                      l("div", sl, [
                        t(T, {
                          label: e(o)("giftCard.orderGiftCard"),
                          "full-width": !0,
                          disabled: !e(P),
                          "is-loading": e(F),
                          "onUpdate:isLoading": n[9] || (n[9] = (i) => v(F) ? F.value = i : null),
                          onClickEvent: e(N)
                        }, null, 8, ["label", "disabled", "is-loading", "onClickEvent"])
                      ])
                    ])) : m("", !0),
                    e(d) ? (s(), c("div", rl, [
                      t(M, {
                        modelValue: e(V),
                        "onUpdate:modelValue": n[10] || (n[10] = (i) => v(V) ? V.value = i : null),
                        type: "textarea",
                        name: "remark",
                        label: e(o)("giftCard.remark"),
                        icon: "info-circle",
                        placeholder: e(o)("giftCard.remarkPlaceholder")
                      }, null, 8, ["modelValue", "label", "placeholder"])
                    ])) : m("", !0),
                    e(d) ? (s(), c("div", dl, [
                      t(T, {
                        label: e(o)("giftCard.orderGiftCard"),
                        "full-width": !0,
                        disabled: !e(P),
                        "data-test": "orderGiftCard",
                        "is-loading": e(F),
                        "onUpdate:isLoading": n[11] || (n[11] = (i) => v(F) ? F.value = i : null),
                        onClickEvent: e(N)
                      }, null, 8, ["label", "disabled", "is-loading", "onClickEvent"]),
                      l("div", null, [
                        n[12] || (n[12] = l("div", { class: "konnectio-divider" }, null, -1)),
                        t(Oe)
                      ]),
                      S(l("div", ul, [
                        t(Ee)
                      ], 512), [
                        [A, e(Z)]
                      ])
                    ])) : m("", !0)
                  ])
                ], 8, Ye))
              ]),
              _: 1
            }, 8, ["access-token", "data-layout", "callback"])
          ]),
          fallback: C(() => [
            t(je)
          ]),
          _: 1
        }))
      ]),
      _: 1
    }, 8, ["styling"]));
  }
}), K = /* @__PURE__ */ x(cl, [["__scopeId", "data-v-06fd20aa"]]), pl = ue(), ml = ce, fl = ml();
class vl extends HTMLElement {
  vueApp;
  constructor() {
    super();
  }
  disconnectedCallback() {
    this.vueApp.unmount();
  }
  connectedCallback() {
    const r = pe(K, this.attributes);
    this.vueApp = me(K, r), this.vueApp.provide("emitter", fl), this.vueApp.use(Ge), this.vueApp.use(pl), this.vueApp.use(fe), this.vueApp.use(ve);
    const p = document.createElement("div");
    this.vueApp.mount(p), this.appendChild(p.children[0]);
  }
}
window.customElements.define("konnectio-gift-card", vl);
export {
  vl as default
};
//# sourceMappingURL=gift-card.js.map