@konnectio/core
Version:
Konnectio Core Frontend Integration.
455 lines (454 loc) • 18.3 kB
JavaScript
import { d as U, u as M, r as O, c as Y, a as _, b as s, w as C, e as l, h as p, i as f, f as t, g as e, n as J, t as A, j as ae, C as oe, s as z, D as ne, o as ie, S as se, E as T, G, F as de, v as re, z as b, k as ue, _ as ce, l as pe, m as me, p as fe } from "./mitt-CvmiLPAX.js";
import { G as ve } from "./style-CmiPhqCb.js";
import { u as B } from "./giftCard-Cd_UzFiq.js";
import { a as be, e as P, x as he, _ as R, f as ke, d as ge, L as ye, T as S, i as _e, C as Ce } from "./SelectField.vue_vue_type_style_index_0_lang-C60Scz2U.js";
import { _ as Ve } from "./_.vue_vue_type_style_index_0_lang-CgwYyRP7.js";
import { C as $e, a as we, P as Fe, _ as xe } from "./CheckoutWindow-nL6eFQsJ.js";
import { E as Ee } from "./Field.vue_vue_type_style_index_0_scoped_6ef33e68_lang-CRft4dYF.js";
import { F as E } from "./Field-C2VGW-Eu.js";
import { E as Pe } from "./ErrorMessage-CgdJmMED.js";
import { S as Ue } from "./TermsOfService-CdeIcy6q.js";
import { f as Te } from "./index-DNcHdiEm.js";
const Ge = { class: "media-selector" }, Se = ["accept"], Ae = { class: "media-selector-wrapper" }, Me = { class: "media-selector-tools" }, Le = { key: 0 }, qe = { key: 1 }, Be = { key: 2 }, Re = ["src"], Ie = /* @__PURE__ */ U({
__name: "MediaSelector",
props: {
modelValue: {},
validation: { default: "image/*" },
iconColor: { default: "#000" },
label: {},
required: { type: Boolean, default: !1 }
},
emits: ["update:modelValue"],
setup(a, { emit: r }) {
const m = r, o = a, { t: c } = M(), { display: h } = be(), v = O(), k = Y(() => o.modelValue.base64 !== "");
function V(d) {
m("update:modelValue", d);
}
function I() {
V({
base64: "",
name: "",
type: ""
}), v.value && (v.value.value = "");
}
function $() {
v.value && v.value.click();
}
function D(d, u) {
const [y, L] = [d.name, d.type], g = new FileReader();
g.onload = function(x) {
if (x.target) {
const q = x.target.result;
u({ base64: q, name: y, type: L });
} else
h({
message: c("imageUploadError"),
type: "error"
});
}, g.readAsDataURL(d);
}
async function w() {
let d;
(d = v.value.files) instanceof FileList && D(d[0], V);
}
return (d, u) => (s(), _(he, {
label: a.label,
required: a.required,
type: "media"
}, {
default: C(() => [
l("div", Ge, [
l("input", {
ref_key: "fileInput",
ref: v,
type: "file",
class: "hidden",
accept: a.validation,
single: "",
onChange: u[0] || (u[0] = (y) => w())
}, null, 40, Se),
l("div", Ae, [
l("ul", Me, [
k.value ? f("", !0) : (s(), p("li", Le, [
t(P, {
label: e(c)("uploadFile"),
type: "button",
icon: "upload",
"icon-color": a.iconColor,
onClickEvent: u[1] || (u[1] = (y) => $())
}, null, 8, ["label", "icon-color"])
])),
k.value ? (s(), p("li", qe, [
t(P, {
label: e(c)("replaceFile"),
type: "button",
icon: "repeat-alt",
"icon-color": a.iconColor,
onClickEvent: u[2] || (u[2] = (y) => $())
}, null, 8, ["label", "icon-color"])
])) : f("", !0),
k.value ? (s(), p("li", Be, [
t(P, {
label: e(c)("removeFile"),
type: "button",
icon: "trash-alt",
"icon-color": a.iconColor,
onClickEvent: u[3] || (u[3] = (y) => I())
}, null, 8, ["label", "icon-color"])
])) : f("", !0)
]),
l("div", {
class: J([
"media-selector-previewer",
{ opened: k.value }
])
}, [
a.modelValue ? (s(), p("img", {
key: 0,
src: a.modelValue.base64
}, null, 8, Re)) : f("", !0)
], 2)
])
])
]),
_: 1
}, 8, ["label", "required"]));
}
});
function W(a) {
const r = a;
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(Ie);
const De = { class: "gift-card-skeleton" }, He = { class: "gift-card-skeleton-form" }, Ne = /* @__PURE__ */ U({
__name: "GiftCardSkeleton",
setup(a) {
return (r, m) => (s(), p("div", De, [
l("div", He, [
t(E),
t(E),
t(E),
t(E),
t(E, { "is-text-area": "" }),
t(Ee, { height: "44px" })
])
]));
}
}), je = /* @__PURE__ */ R(Ne, [["__scopeId", "data-v-ba3efaa1"]]), ze = { class: "konnectio-accept-terms" }, We = /* @__PURE__ */ U({
__name: "_",
props: {
content: {},
buttonLabel: {}
},
setup(a) {
const { t: r } = M(), m = O(!1);
return (o, c) => (s(), p("div", ze, [
t(e(oe), {
keypath: "general.termsAndConditionsNotice",
tag: "span",
scope: "global"
}, {
button: C(() => [
l("i", null, '"' + A(a.buttonLabel) + '"', 1)
]),
terms: C(() => [
l("a", {
class: "konnectio-accept-terms-link",
target: "_blank",
onClick: c[0] || (c[0] = ae((h) => m.value = !0, ["prevent"]))
}, [
l("span", null, A(e(r)("general.termsAndConditions")), 1)
])
]),
_: 1
}),
t(Ue, {
modelValue: m.value,
"onUpdate:modelValue": c[1] || (c[1] = (h) => m.value = h),
description: a.content
}, null, 8, ["modelValue", "description"])
]));
}
}), Ke = /* @__PURE__ */ R(We, [["__scopeId", "data-v-689c045a"]]), Oe = /* @__PURE__ */ U({
__name: "GiftCard",
setup(a) {
const { t: r } = M(), m = B();
return (o, c) => (s(), _(Ke, {
content: e(m).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 }, tl = {
key: 0,
id: "konnectio-select-place-type"
}, al = {
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" }, dl = {
key: 1,
id: "konnectio-gift-card-remarks"
}, rl = {
key: 2,
id: "konnectio-gift-card-order-minimal"
}, ul = { id: "konnectio-gift-card-recaptcha" }, cl = /* @__PURE__ */ U({
name: "GiftCardLayout",
__name: "GiftCard",
props: {
accessToken: {},
layout: { default: "minimal" },
placeType: {},
styling: {}
},
setup(a) {
const r = a, m = Y(() => ({
panelMaxWidth: "800px",
...r.styling
})), { t: o } = M(), {
name: c,
email: h,
phone: v,
value: k,
remark: V,
showValue: I,
quantity: $,
media: D,
placeId: w,
placeType: d,
showFormPage: u,
showPaymentPage: y,
showConfirmationPage: L,
places: g,
hasFilledForm: x,
hasForcedPlaceType: q,
isWaitingForResponse: F
} = z(B()), { initialize: Q, orderGiftCard: H, fetchMetadata: X } = B(), { isRecaptchaEnabled: Z, currency: ee, hasError: le } = z(ke());
return ne(d, () => {
w.value = void 0;
}), ie(() => {
const N = r.placeType ? parseInt(r.placeType) : void 0;
Q(N);
}), (N, n) => (s(), _(Ce, { styling: m.value }, {
default: C(() => [
(s(), _(se, null, {
default: C(() => [
t(Ve, {
"access-token": a.accessToken,
"data-layout": a.layout,
callback: e(X)
}, {
default: C(() => [
e(le) ? (s(), _(Pe, {
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(), p("div", {
key: 0,
id: "konnectio-gift-card-module",
"data-layout": a.layout
}, [
l("div", Je, [
l("h2", Qe, [
l("span", null, A(e(o)("giftCard.title")), 1)
]),
l("div", Xe, [
T(l("div", Ze, [
t($e)
], 512), [
[G, e(y)]
]),
T(l("div", null, [
l("p", {
id: "konnectio-gift-card-description",
innerHTML: e(o)("giftCard.description")
}, null, 8, el),
l("form", null, [
e(q) ? f("", !0) : (s(), p("div", ll, [
e(g) ? (s(), p("div", tl, [
l("label", al, [
l("span", null, A(e(o)("giftCard.selectType")), 1)
]),
l("div", ol, [
l("ul", null, [
(s(!0), p(de, null, re(e(g), (i, j) => (s(), p("li", { key: j }, [
t(we, {
modelValue: e(d),
"onUpdate:modelValue": n[0] || (n[0] = (te) => b(d) ? d.value = te : null),
type: "radio",
name: "placeType",
val: j,
label: i.label
}, null, 8, ["modelValue", "val", "label"])
]))), 128))
]),
e(g)[e(d)] && e(g)[e(d)].data.length > 1 ? (s(), _(ge, {
key: 0,
modelValue: e(w),
"onUpdate:modelValue": n[1] || (n[1] = (i) => b(w) ? w.value = i : null),
placeholder: e(o)("giftCard.selectPlacePlaceholder"),
options: e(g)[e(d)].data,
labelKey: "name",
valueKey: "id",
required: ""
}, null, 8, ["modelValue", "placeholder", "options"])) : f("", !0)
])
])) : (s(), _(ye, { key: 1 }))
])),
t(S, {
modelValue: e(c),
"onUpdate:modelValue": n[2] || (n[2] = (i) => b(c) ? c.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(S, {
modelValue: e(h),
"onUpdate:modelValue": n[3] || (n[3] = (i) => b(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(v),
"onUpdate:modelValue": n[4] || (n[4] = (i) => b(v) ? v.value = i : null),
icon: "phone-office",
label: e(o)("giftCard.phone"),
placeholder: e(o)("giftCard.phonePlaceholder"),
required: ""
}, null, 8, ["modelValue", "label", "placeholder"]),
t(S, {
modelValue: e(k),
"onUpdate:modelValue": n[5] || (n[5] = (i) => b(k) ? k.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"]),
f("", !0),
f("", !0),
t(_e, {
modelValue: e($),
"onUpdate:modelValue": n[8] || (n[8] = (i) => b($) ? $.value = i : null),
label: e(o)("giftCard.quantity"),
icon: "gift-card",
required: ""
}, null, 8, ["modelValue", "label"])
])
], 512), [
[G, e(u)]
]),
T(l("div", null, [
l("div", {
innerHTML: e(o)("giftCard.thankYou")
}, null, 8, nl)
], 512), [
[G, e(L)]
])
]),
a.layout !== "minimal" && e(u) ? (s(), p("div", il, [
l("div", sl, [
t(P, {
label: e(o)("giftCard.orderGiftCard"),
"full-width": !0,
disabled: !e(x),
"is-loading": e(F),
"onUpdate:isLoading": n[9] || (n[9] = (i) => b(F) ? F.value = i : null),
onClickEvent: e(H)
}, null, 8, ["label", "disabled", "is-loading", "onClickEvent"])
])
])) : f("", !0),
e(u) ? (s(), p("div", dl, [
t(S, {
modelValue: e(V),
"onUpdate:modelValue": n[10] || (n[10] = (i) => b(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"])
])) : f("", !0),
e(u) ? (s(), p("div", rl, [
t(P, {
label: e(o)("giftCard.orderGiftCard"),
"full-width": !0,
disabled: !e(x),
"data-test": "orderGiftCard",
"is-loading": e(F),
"onUpdate:isLoading": n[11] || (n[11] = (i) => b(F) ? F.value = i : null),
onClickEvent: e(H)
}, null, 8, ["label", "disabled", "is-loading", "onClickEvent"]),
l("div", null, [
n[12] || (n[12] = l("div", { class: "konnectio-divider" }, null, -1)),
t(Oe)
]),
T(l("div", ul, [
t(xe)
], 512), [
[G, e(Z)]
])
])) : f("", !0)
])
], 8, Ye))
]),
_: 1
}, 8, ["access-token", "data-layout", "callback"])
]),
fallback: C(() => [
t(je)
]),
_: 1
}))
]),
_: 1
}, 8, ["styling"]));
}
}), K = /* @__PURE__ */ R(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(Te), this.vueApp.use(pl), this.vueApp.use(fe), this.vueApp.use(ve);
const m = document.createElement("div");
this.vueApp.mount(m), this.appendChild(m.children[0]);
}
}
window.customElements.define("konnectio-gift-card", vl);
export {
vl as default
};
//# sourceMappingURL=gift-card.js.map