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

Konnectio Core Frontend Integration.

import { $ as e, At as t, D as n, Dt as r, E as i, Et as a, M as o, O as s, P as c, S as l, T as u, Y as d, _ as f, a as p, bt as m, c as h, dt as g, ft as _, gt as v, k as y, lt as b, o as x, p as S, q as C, r as w, s as T, t as E, u as D, x as O, y as ee } from "./mitt-Dp_pykgV.js";
import { t as k } from "./dist-CcS6KL-S.js";
import { E as A, M as te, S as j, _ as M, b as N, n as P, r as ne, t as re, v as F, y as ie } from "./SelectField-CfD2awPl.js";
import { t as ae } from "./_-13YE3WJt.js";
import { t as oe } from "./ErrorMessage-B6saHmHE.js";
import { n as I, t as L } from "./Field-BjtJJFJG.js";
import { t as R } from "./style-Bpqv9k-3.js";
import { i as se, n as ce, r as le, t as ue } from "./CheckoutWindow-Cx1MBwXg.js";
import { t as z } from "./giftCard-3Rb6QoQd.js";
import { t as B } from "./TermsOfService-C6R8tC_d.js";
//#region src/components/inputs/MediaSelector.vue?vue&type=script&setup=true&lang.ts
var V = { class: "media-selector" }, H = ["accept"], U = { class: "media-selector-wrapper" }, W = { class: "media-selector-tools" }, G = { key: 0 }, K = { key: 1 }, q = { key: 2 }, J = ["src"], Y = /* @__PURE__ */ c({
	__name: "MediaSelector",
	props: {
		modelValue: {},
		validation: { default: "image/*" },
		iconColor: { default: "#000" },
		label: {},
		required: {
			type: Boolean,
			default: !1
		}
	},
	emits: ["update:modelValue"],
	setup(e, { emit: t }) {
		let c = t, l = e, { t: f } = x(), { display: p } = te(), h = m(), _ = u(() => l.modelValue.base64 !== "");
		function v(e) {
			c("update:modelValue", e);
		}
		function b() {
			v({
				base64: "",
				name: "",
				type: ""
			}), h.value && (h.value.value = "");
		}
		function S() {
			h.value && h.value.click();
		}
		function C(e, t) {
			let [n, r] = [e.name, e.type], i = new FileReader();
			i.onload = function(e) {
				if (e.target) {
					let i = e.target.result;
					t({
						base64: i,
						name: n,
						type: r
					});
				} else p({
					message: f("imageUploadError"),
					type: "error"
				});
			}, i.readAsDataURL(e);
		}
		async function w() {
			let e;
			(e = h.value.files) instanceof FileList && C(e[0], v);
		}
		return (t, c) => (d(), n(M, {
			label: e.label,
			required: e.required,
			type: "media"
		}, {
			default: g(() => [i("div", V, [i("input", {
				ref_key: "fileInput",
				ref: h,
				type: "file",
				class: "hidden",
				accept: e.validation,
				single: "",
				onChange: c[0] ||= (e) => w()
			}, null, 40, H), i("div", U, [i("ul", W, [
				_.value ? s("", !0) : (d(), y("li", G, [o(F, {
					label: a(f)("uploadFile"),
					type: "button",
					icon: "upload",
					"icon-color": e.iconColor,
					onClickEvent: c[1] ||= (e) => S()
				}, null, 8, ["label", "icon-color"])])),
				_.value ? (d(), y("li", K, [o(F, {
					label: a(f)("replaceFile"),
					type: "button",
					icon: "repeat-alt",
					"icon-color": e.iconColor,
					onClickEvent: c[2] ||= (e) => S()
				}, null, 8, ["label", "icon-color"])])) : s("", !0),
				_.value ? (d(), y("li", q, [o(F, {
					label: a(f)("removeFile"),
					type: "button",
					icon: "trash-alt",
					"icon-color": e.iconColor,
					onClickEvent: c[3] ||= (e) => b()
				}, null, 8, ["label", "icon-color"])])) : s("", !0)
			]), i("div", { class: r(["media-selector-previewer", { opened: _.value }]) }, [e.modelValue ? (d(), y("img", {
				key: 0,
				src: e.modelValue.base64
			}, null, 8, J)) : s("", !0)], 2)])])]),
			_: 1
		}, 8, ["label", "required"]));
	}
});
//#endregion
//#region src/components/inputs/MediaSelector.vue?vue&type=i18n&index=0&lang.yaml
function X(e) {
	let t = e;
	t.__i18n = t.__i18n || [], t.__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!"
					}
				}
			}
		}
	});
}
//#endregion
//#region src/components/inputs/MediaSelector.vue
typeof X == "function" && X(Y);
//#endregion
//#region src/components/skeletons/GiftCardSkeleton.vue?vue&type=script&setup=true&lang.ts
var de = { class: "gift-card-skeleton" }, fe = { class: "gift-card-skeleton-form" }, pe = /* @__PURE__ */ j(/* @__PURE__ */ c({
	__name: "GiftCardSkeleton",
	setup(e) {
		return (e, t) => (d(), y("div", de, [i("div", fe, [
			o(L),
			o(L),
			o(L),
			o(L),
			o(L, { "is-text-area": "" }),
			o(I, { height: "44px" })
		])]));
	}
}), [["__scopeId", "data-v-ba3efaa1"]]), me = { class: "konnectio-accept-terms" }, he = /* @__PURE__ */ j(/* @__PURE__ */ c({
	__name: "_",
	props: {
		content: {},
		buttonLabel: {}
	},
	setup(e) {
		let { t: n } = x(), r = m(!1);
		return (s, c) => (d(), y("div", me, [o(a(p), {
			keypath: "general.termsAndConditionsNotice",
			tag: "span",
			scope: "global"
		}, {
			button: g(() => [i("i", null, "\"" + t(e.buttonLabel) + "\"", 1)]),
			terms: g(() => [i("a", {
				class: "konnectio-accept-terms-link",
				target: "_blank",
				onClick: c[0] ||= ee((e) => r.value = !0, ["prevent"])
			}, [i("span", null, t(a(n)("general.termsAndConditions")), 1)])]),
			_: 1
		}), o(B, {
			modelValue: r.value,
			"onUpdate:modelValue": c[1] ||= (e) => r.value = e,
			description: e.content
		}, null, 8, ["modelValue", "description"])]));
	}
}), [["__scopeId", "data-v-689c045a"]]), ge = /* @__PURE__ */ c({
	__name: "GiftCard",
	setup(e) {
		let { t } = x(), r = z();
		return (e, i) => (d(), n(he, {
			content: a(r).termsOfService,
			"button-label": a(t)("giftCard.orderGiftCard")
		}, null, 8, ["content", "button-label"]));
	}
}), _e = ["data-layout"], ve = { id: "konnectio-gift-card-wrapper" }, ye = { id: "konnectio-gift-card-title" }, be = { id: "konnectio-gift-card-content" }, xe = { id: "konnectio-gift-card-payment" }, Se = ["innerHTML"], Ce = { key: 0 }, we = {
	key: 0,
	id: "konnectio-select-place-type"
}, Te = { class: /* @__PURE__ */ r(["konnectio-label", "required"]) }, Ee = { id: "konnectio-select-place-type-input" }, De = ["innerHTML"], Z = {
	key: 0,
	id: "konnectio-gift-card-order"
}, Oe = { class: "konnectio-panel" }, ke = {
	key: 1,
	id: "konnectio-gift-card-remarks"
}, Ae = {
	key: 2,
	id: "konnectio-gift-card-order-minimal"
}, je = { id: "konnectio-gift-card-recaptcha" }, Q = /* @__PURE__ */ j(/* @__PURE__ */ c({
	name: "GiftCardLayout",
	__name: "GiftCard",
	props: {
		accessToken: {},
		layout: { default: "minimal" },
		placeType: {},
		styling: {}
	},
	setup(r) {
		let c = r, p = u(() => ({
			panelMaxWidth: "800px",
			...c.styling
		})), { t: m } = x(), { name: h, email: S, phone: w, value: T, remark: E, showValue: ee, quantity: k, media: te, placeId: j, placeType: M, showFormPage: I, showPaymentPage: L, showConfirmationPage: R, places: B, hasFilledForm: V, hasForcedPlaceType: H, isWaitingForResponse: U } = D(z()), { initialize: W, orderGiftCard: G, fetchMetadata: K } = z(), { isRecaptchaEnabled: q, currency: J, hasError: Y } = D(A());
		return b(M, () => {
			j.value = void 0;
		}), C(() => {
			W(c.placeType ? parseInt(c.placeType) : void 0);
		}), (c, u) => (d(), n(N, { styling: p.value }, {
			default: g(() => [(d(), n(l, null, {
				default: g(() => [o(ae, {
					"access-token": r.accessToken,
					"data-layout": r.layout,
					callback: a(K)
				}, {
					default: g(() => [a(Y) ? (d(), n(oe, {
						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."
					})) : (d(), y("div", {
						key: 0,
						id: "konnectio-gift-card-module",
						"data-layout": r.layout
					}, [i("div", ve, [
						i("h2", ye, [i("span", null, t(a(m)("giftCard.title")), 1)]),
						i("div", be, [
							_(i("div", xe, [o(ue)], 512), [[f, a(L)]]),
							_(i("div", null, [i("p", {
								id: "konnectio-gift-card-description",
								innerHTML: a(m)("giftCard.description")
							}, null, 8, Se), i("form", null, [
								a(H) ? s("", !0) : (d(), y("div", Ce, [a(B) ? (d(), y("div", we, [i("label", Te, [i("span", null, t(a(m)("giftCard.selectType")), 1)]), i("div", Ee, [i("ul", null, [(d(!0), y(O, null, e(a(B), (e, t) => (d(), y("li", { key: t }, [o(le, {
									modelValue: a(M),
									"onUpdate:modelValue": u[0] ||= (e) => v(M) ? M.value = e : null,
									type: "radio",
									name: "placeType",
									val: t,
									label: e.label
								}, null, 8, [
									"modelValue",
									"val",
									"label"
								])]))), 128))]), a(B)[a(M)] && a(B)[a(M)].data.length > 1 ? (d(), n(re, {
									key: 0,
									modelValue: a(j),
									"onUpdate:modelValue": u[1] ||= (e) => v(j) ? j.value = e : null,
									placeholder: a(m)("giftCard.selectPlacePlaceholder"),
									options: a(B)[a(M)].data,
									labelKey: "name",
									valueKey: "id",
									required: ""
								}, null, 8, [
									"modelValue",
									"placeholder",
									"options"
								])) : s("", !0)])])) : (d(), n(ie, { key: 1 }))])),
								o(P, {
									modelValue: a(h),
									"onUpdate:modelValue": u[2] ||= (e) => v(h) ? h.value = e : null,
									type: "text",
									name: "name",
									autocomplete: "name",
									label: a(m)("giftCard.name"),
									icon: "user-alt",
									placeholder: a(m)("giftCard.namePlaceholder"),
									required: ""
								}, null, 8, [
									"modelValue",
									"label",
									"placeholder"
								]),
								o(P, {
									modelValue: a(S),
									"onUpdate:modelValue": u[3] ||= (e) => v(S) ? S.value = e : null,
									type: "email",
									name: "email",
									autocomplete: "email",
									label: a(m)("giftCard.email"),
									icon: "at",
									placeholder: a(m)("giftCard.emailPlaceholder"),
									required: ""
								}, null, 8, [
									"modelValue",
									"label",
									"placeholder"
								]),
								o(se, {
									modelValue: a(w),
									"onUpdate:modelValue": u[4] ||= (e) => v(w) ? w.value = e : null,
									icon: "phone-office",
									label: a(m)("giftCard.phone"),
									placeholder: a(m)("giftCard.phonePlaceholder"),
									required: ""
								}, null, 8, [
									"modelValue",
									"label",
									"placeholder"
								]),
								o(P, {
									modelValue: a(T),
									"onUpdate:modelValue": u[5] ||= (e) => v(T) ? T.value = e : null,
									type: "number",
									name: "value",
									label: a(m)("giftCard.value"),
									icon: "money-bill",
									placeholder: a(m)("giftCard.valuePlaceholder"),
									suffix: a(J),
									required: ""
								}, null, 8, [
									"modelValue",
									"label",
									"placeholder",
									"suffix"
								]),
								s("", !0),
								s("", !0),
								o(ne, {
									modelValue: a(k),
									"onUpdate:modelValue": u[8] ||= (e) => v(k) ? k.value = e : null,
									label: a(m)("giftCard.quantity"),
									icon: "gift-card",
									required: ""
								}, null, 8, ["modelValue", "label"])
							])], 512), [[f, a(I)]]),
							_(i("div", null, [i("div", { innerHTML: a(m)("giftCard.thankYou") }, null, 8, De)], 512), [[f, a(R)]])
						]),
						r.layout !== "minimal" && a(I) ? (d(), y("div", Z, [i("div", Oe, [o(F, {
							label: a(m)("giftCard.orderGiftCard"),
							"full-width": !0,
							disabled: !a(V),
							"is-loading": a(U),
							"onUpdate:isLoading": u[9] ||= (e) => v(U) ? U.value = e : null,
							onClickEvent: a(G)
						}, null, 8, [
							"label",
							"disabled",
							"is-loading",
							"onClickEvent"
						])])])) : s("", !0),
						a(I) ? (d(), y("div", ke, [o(P, {
							modelValue: a(E),
							"onUpdate:modelValue": u[10] ||= (e) => v(E) ? E.value = e : null,
							type: "textarea",
							name: "remark",
							label: a(m)("giftCard.remark"),
							icon: "info-circle",
							placeholder: a(m)("giftCard.remarkPlaceholder")
						}, null, 8, [
							"modelValue",
							"label",
							"placeholder"
						])])) : s("", !0),
						a(I) ? (d(), y("div", Ae, [
							o(F, {
								label: a(m)("giftCard.orderGiftCard"),
								"full-width": !0,
								disabled: !a(V),
								"data-test": "orderGiftCard",
								"is-loading": a(U),
								"onUpdate:isLoading": u[11] ||= (e) => v(U) ? U.value = e : null,
								onClickEvent: a(G)
							}, null, 8, [
								"label",
								"disabled",
								"is-loading",
								"onClickEvent"
							]),
							i("div", null, [u[12] ||= i("div", { class: "konnectio-divider" }, null, -1), o(ge)]),
							_(i("div", je, [o(ce)], 512), [[f, a(q)]])
						])) : s("", !0)
					])], 8, _e))]),
					_: 1
				}, 8, [
					"access-token",
					"data-layout",
					"callback"
				])]),
				fallback: g(() => [o(pe)]),
				_: 1
			}))]),
			_: 1
		}, 8, ["styling"]));
	}
}), [["__scopeId", "data-v-06fd20aa"]]), Me = h(), Ne = E(), $ = class extends HTMLElement {
	vueApp;
	constructor() {
		super();
	}
	disconnectedCallback() {
		this.vueApp.unmount();
	}
	connectedCallback() {
		let e = T(Q, this.attributes);
		this.vueApp = S(Q, e), this.vueApp.provide("emitter", Ne), this.vueApp.use(k), this.vueApp.use(Me), this.vueApp.use(w), this.vueApp.use(R);
		let t = document.createElement("div");
		this.vueApp.mount(t), this.appendChild(t.children[0]);
	}
};
window.customElements.define("konnectio-gift-card", $);
//#endregion
export { $ as default };