@getspot/spot-widget 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +6 -0
- package/dist/index.es.js +95 -91
- package/dist/index.umd.js +3 -3
- package/package.json +1 -1
- package/src/api.js +7 -12
- package/src/index.js +15 -11
- package/src/styles.css +0 -15
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @getspot/spot-widget@0.1.
|
|
2
|
+
> @getspot/spot-widget@0.1.1 build /builds/getspot/spot-widget/packages/core
|
|
3
3
|
> vite build
|
|
4
4
|
|
|
5
5
|
[33mThe CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.[39m
|
|
@@ -8,6 +8,6 @@ transforming...
|
|
|
8
8
|
[32m✓[39m 4 modules transformed.
|
|
9
9
|
rendering chunks...
|
|
10
10
|
computing gzip size...
|
|
11
|
-
[2mdist/[22m[36mindex.umd.js [39m[1m[2m19.
|
|
12
|
-
[2mdist/[22m[36mindex.es.js [39m[1m[
|
|
13
|
-
[32m✓ built in
|
|
11
|
+
[2mdist/[22m[36mindex.umd.js [39m[1m[2m19.31 kB[22m[1m[22m[2m │ gzip: 6.19 kB[22m
|
|
12
|
+
[2mdist/[22m[36mindex.es.js [39m[1m[2m20.80 kB[22m[1m[22m[2m │ gzip: 6.36 kB[22m
|
|
13
|
+
[32m✓ built in 132ms[39m
|
package/CHANGELOG.md
CHANGED
package/dist/index.es.js
CHANGED
|
@@ -1,110 +1,110 @@
|
|
|
1
|
-
async function
|
|
1
|
+
async function f(s, t, o) {
|
|
2
2
|
try {
|
|
3
|
-
const
|
|
3
|
+
const r = await fetch(s, {
|
|
4
4
|
method: "POST",
|
|
5
5
|
headers: {
|
|
6
6
|
"Content-Type": "application/json",
|
|
7
7
|
"X-Spot-Partner-Id": t
|
|
8
8
|
},
|
|
9
|
-
body: JSON.stringify(
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
);
|
|
9
|
+
body: JSON.stringify(o)
|
|
10
|
+
}), i = await r.json();
|
|
11
|
+
if (!r.ok) {
|
|
12
|
+
const n = new Error((i == null ? void 0 : i.message) || "Failed to fetch quote");
|
|
13
|
+
throw n.status = r.status, n.responseBody = i, n;
|
|
14
|
+
}
|
|
15
|
+
return i;
|
|
16
|
+
} catch (r) {
|
|
17
|
+
throw r instanceof Error ? r : new Error("Unknown error occurred while fetching quote");
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
-
function
|
|
21
|
-
const
|
|
22
|
-
return
|
|
20
|
+
function e(s, { text: t, className: o, parent: r, innerHTML: i } = {}) {
|
|
21
|
+
const n = document.createElement(s);
|
|
22
|
+
return o && (n.className = o), t != null && (n.textContent = t), i != null && (n.innerHTML = i), r && r.appendChild(n), n;
|
|
23
23
|
}
|
|
24
|
-
function h(
|
|
25
|
-
|
|
24
|
+
function h(s, { name: t, description: o }) {
|
|
25
|
+
e("div", {
|
|
26
26
|
className: "spot-header__title",
|
|
27
27
|
text: t,
|
|
28
|
-
parent:
|
|
29
|
-
}),
|
|
28
|
+
parent: s
|
|
29
|
+
}), e("div", {
|
|
30
30
|
className: "spot-header__description",
|
|
31
|
-
text:
|
|
32
|
-
parent:
|
|
31
|
+
text: o,
|
|
32
|
+
parent: s
|
|
33
33
|
});
|
|
34
34
|
}
|
|
35
|
-
function u(
|
|
36
|
-
const
|
|
35
|
+
function u(s, t = []) {
|
|
36
|
+
const o = e("ul", {
|
|
37
37
|
className: "spot-benefits__list",
|
|
38
|
-
parent:
|
|
38
|
+
parent: s
|
|
39
39
|
});
|
|
40
|
-
t.forEach((
|
|
41
|
-
const i =
|
|
40
|
+
t.forEach((r) => {
|
|
41
|
+
const i = e("li", { parent: o });
|
|
42
42
|
i.innerHTML = `
|
|
43
43
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
|
44
44
|
<path d="M11.6666 3.5L5.24998 9.91667L2.33331 7"
|
|
45
45
|
stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
46
|
-
</svg>`,
|
|
46
|
+
</svg>`, e("span", { text: r, parent: i });
|
|
47
47
|
});
|
|
48
48
|
}
|
|
49
|
-
function g(
|
|
50
|
-
const
|
|
49
|
+
function g(s, t = []) {
|
|
50
|
+
const o = e("div", {
|
|
51
51
|
className: "spot-table__container",
|
|
52
|
-
parent:
|
|
53
|
-
}),
|
|
52
|
+
parent: s
|
|
53
|
+
}), r = e("table", {
|
|
54
54
|
className: "spot-refund__table spot-table--dynamic",
|
|
55
|
-
parent:
|
|
56
|
-
}), i =
|
|
57
|
-
|
|
58
|
-
const a =
|
|
55
|
+
parent: o
|
|
56
|
+
}), i = e("thead", { parent: r }), n = e("tr", { parent: i });
|
|
57
|
+
e("th", { text: "When you cancel", parent: n }), e("th", { text: "You will receive", parent: n });
|
|
58
|
+
const a = e("tbody", { parent: r });
|
|
59
59
|
t.forEach(({ text: l, percent: p, amount: c }) => {
|
|
60
|
-
const d =
|
|
61
|
-
|
|
62
|
-
const
|
|
63
|
-
|
|
60
|
+
const d = e("tr", { parent: a });
|
|
61
|
+
e("td", { text: l, parent: d });
|
|
62
|
+
const m = p === "Not eligible for refund" ? "Not eligible for a refund" : `$${c} refund`;
|
|
63
|
+
e("td", { text: m, parent: d });
|
|
64
64
|
});
|
|
65
65
|
}
|
|
66
|
-
function _(
|
|
67
|
-
const
|
|
66
|
+
function _(s, t, o) {
|
|
67
|
+
const r = e("div", {
|
|
68
68
|
className: "spot-selection__options",
|
|
69
|
-
parent:
|
|
70
|
-
}), i =
|
|
71
|
-
className: `spot-selection__option ${
|
|
72
|
-
parent:
|
|
73
|
-
}),
|
|
74
|
-
|
|
69
|
+
parent: s
|
|
70
|
+
}), i = e("label", {
|
|
71
|
+
className: `spot-selection__option ${o ? "selected" : ""}`,
|
|
72
|
+
parent: r
|
|
73
|
+
}), n = e("input", { parent: i });
|
|
74
|
+
n.type = "radio", n.name = "selection", n.value = "yes", o && (n.checked = !0), e("strong", {
|
|
75
75
|
text: `Yes, protect my booking for $${t}`,
|
|
76
76
|
parent: i
|
|
77
|
-
}),
|
|
77
|
+
}), e("span", {
|
|
78
78
|
className: "spot-selection__recommended-tag",
|
|
79
79
|
text: "Recommended",
|
|
80
80
|
parent: i
|
|
81
81
|
});
|
|
82
|
-
const a =
|
|
82
|
+
const a = e("label", {
|
|
83
83
|
className: "spot-selection__option",
|
|
84
|
-
parent:
|
|
85
|
-
}), l =
|
|
86
|
-
return l.type = "radio", l.name = "selection", l.value = "no",
|
|
84
|
+
parent: r
|
|
85
|
+
}), l = e("input", { parent: a });
|
|
86
|
+
return l.type = "radio", l.name = "selection", l.value = "no", e("span", { text: "No, do not protect my booking", parent: a }), r;
|
|
87
87
|
}
|
|
88
|
-
function b(
|
|
89
|
-
const
|
|
88
|
+
function b(s, t) {
|
|
89
|
+
const o = e("div", {
|
|
90
90
|
className: "spot-footer__container",
|
|
91
|
-
parent:
|
|
92
|
-
}),
|
|
91
|
+
parent: s
|
|
92
|
+
}), r = e("div", {
|
|
93
93
|
className: "spot-footer__terms",
|
|
94
|
-
parent:
|
|
94
|
+
parent: o
|
|
95
95
|
});
|
|
96
|
-
|
|
96
|
+
e("span", {
|
|
97
97
|
innerHTML: t.communication.legalDisclaimer,
|
|
98
|
-
parent:
|
|
99
|
-
}),
|
|
98
|
+
parent: r
|
|
99
|
+
}), e("br", { parent: r }), e("a", {
|
|
100
100
|
href: t.communication.termsAndConditionsUrl,
|
|
101
101
|
className: "spot-footer__terms-link",
|
|
102
102
|
text: "Refund Guarantee Terms and Conditions",
|
|
103
|
-
parent:
|
|
103
|
+
parent: r
|
|
104
104
|
});
|
|
105
|
-
const i =
|
|
105
|
+
const i = e("p", {
|
|
106
106
|
className: "spot-footer__powered-by",
|
|
107
|
-
parent:
|
|
107
|
+
parent: o
|
|
108
108
|
});
|
|
109
109
|
return i.innerHTML = `
|
|
110
110
|
<svg width="145" height="28" viewBox="0 0 145 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -121,15 +121,15 @@ function b(n, t) {
|
|
|
121
121
|
<rect width="45.405" height="14.8867" fill="white" transform="translate(87 8)"/>
|
|
122
122
|
</clipPath>
|
|
123
123
|
</defs>
|
|
124
|
-
</svg>`,
|
|
124
|
+
</svg>`, o;
|
|
125
125
|
}
|
|
126
|
-
const
|
|
127
|
-
function
|
|
126
|
+
const C = ":root{--spot-font-family: Arial;--spot-padding: 1.25rem;--spot-background-color: #ffffff;--spot-font-color: #000000;--spot-border-radius: .5rem;--spot-title-font-size: 1.25rem;--spot-title-font-weight: 700;--spot-title-padding: 0 0 1.25rem 0;--spot-description-font-size: .875rem;--spot-description-font-weight: 400;--spot-description-padding: 0 0 .5rem 0;--spot-bullets-font-size: .875rem;--spot-bullets-font-weight: 400;--spot-bullets-padding: .3125rem;--spot-table-border-radius: .625rem;--spot-table-header-font-size: .875rem;--spot-table-header-font-weight: 700;--spot-table-header-padding: 0 .5rem .625rem;--spot-table-cell-font-size: .815rem;--spot-table-cell-font-weight: 400;--spot-table-cell-padding: 0 .625rem;--spot-radio-border: #000000;--spot-radio-border-radius: .625rem;--spot-radio-checked-background: #000000;--spot-radio-text-font-size: .875rem;--spot-radio-text-font-weight: 400;--spot-radio-text-padding: .625rem;--spot-radio-selection-background: #f4f4f4;--spot-radio-selection-border-radius: .625rem;--spot-radio-selection-padding: .625rem;--spot-recommended-tag-background: #000000;--spot-recommended-tag-font-color: #ffffff;--spot-recommended-tag-font-size: .875rem;--spot-recommended-tag-font-weight: 700;--spot-recommended-tag-padding: .25rem .5rem;--spot-recommended-tag-border-radius: .5rem;--spot-selection-error-font-color: #ff0000;--spot-selection-error-font-size: .875rem;--spot-selection-error-padding: .5rem;--spot-terms-font-size: .75rem;--spot-terms-font-weight: 400;--spot-terms-font-color: #636569;--spot-terms-padding: 0;--spot-terms-link-text-decoration: underline;--spot-terms-link-font-size: .75rem;--spot-terms-link-font-weight: 400;--spot-terms-link-font-color: #636569;--spot-terms-link-padding: 0}.spot-refund-guarantee{font-family:var(--spot-font-family);padding:var(--spot-padding);background-color:var(--spot-background-color);color:var(--spot-font-color);border:.0625rem solid #e0e0e0;border-radius:var(--spot-border-radius);max-width:51rem;margin:1rem}.spot-refund-guarantee *{color:inherit}.spot-header__title{font-size:var(--spot-title-font-size);font-weight:var(--spot-title-font-weight);padding:var(--spot-title-padding);color:var(--spot-title-font-color);font-family:var(--spot-title-font-family);line-height:120%;letter-spacing:-.03125rem}.spot-header__description{font-size:var(--spot-description-font-size);font-weight:var(--spot-description-font-weight);color:var(--spot-description-font-color);font-family:var(--spot-description-font-family);padding:var(--spot-description-padding);line-height:125%;letter-spacing:-.025rem}.spot-content__wrapper{display:flex;flex-direction:column}@media (min-width: 48rem){.spot-content__wrapper.desktop-layout{display:grid;grid-template-columns:1fr 20.3125rem;align-items:start;gap:1rem}.desktop-layout .spot-benefits__list{grid-row:1}.desktop-layout .spot-selection__options{grid-row:2}.desktop-layout .spot-table__container{grid-row:1 / span 2}}@media (max-width: 52.438rem){.spot-selection__recommended-tag{display:inline-block;margin-left:0}}@media (max-width: 47.938rem){.spot-selection__recommended-tag{margin-top:0rem}}@media (max-width: 32.125rem){.spot-selection__recommended-tag{margin-top:.5rem}}@media (max-width: 47.9375rem){.spot-table__container{display:flex;justify-content:center}.spot-selection__recommended-tag{display:inline-block;margin-left:0}.spot-footer__container{flex-direction:column;margin-top:.5rem}.spot-refund__table{width:100%;table-layout:auto}.spot-refund__table th{padding:0rem}}.spot-benefits__list{list-style-type:none;line-height:125%;gap:.5625rem;font-size:var(--spot-bullets-font-size);font-weight:var(--spot-bullets-font-weight);color:var(--spot-bullets-font-color);font-family:var(--spot-bullets-font-family);padding:var(--spot-bullets-padding);margin-block-start:0rem;margin-block-end:0rem}.spot-benefits__list li{margin-bottom:.5rem;display:flex;align-items:flex-start;gap:.5rem}.spot-benefits__list li svg{flex-shrink:0;position:relative;top:.125rem}.spot-table__container{width:100%}.spot-refund__table{max-width:22rem;border-radius:var(--spot-table-border-radius);overflow:hidden;border:.09375rem solid #636569;table-layout:fixed;margin-bottom:1.5rem;margin-top:.25rem;padding:.625rem}.spot-refund__table--dynamic{height:auto!important;min-height:7.5rem}.spot-refund__table td,.spot-refund__table th{padding:.375rem .625rem;text-align:left}.spot-refund__table th{text-align:left;font-size:var(--spot-table-header-font-size);font-weight:var(--spot-table-header-font-weight);color:var(--spot-table-header-font-color);font-family:var(--spot-table-header-font-family);padding:var(--spot-table-header-padding)}.spot-refund__table td{text-align:left;font-size:var(--spot-table-cell-font-size);font-weight:var(--spot-table-cell-font-weight);color:var(--spot-table-cell-font-color);font-family:var(--spot-table-cell-font-family);padding:var(--spot-table-cell-padding)}input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:.75rem;height:.75rem;border:.0625rem solid var(--spot-radio-border);border-radius:var(--spot-radio-border-radius);margin-right:.5rem;position:relative;vertical-align:middle;top:-.0625rem;cursor:pointer}input[type=radio]:checked{background:var(--spot-radio-checked-background);box-shadow:inset 0 0 0 .0625rem #fff}.spot-selection__options{display:flex;flex-direction:column;gap:.5rem}.spot-selection__option{display:block;position:relative;transition:background .2s;cursor:pointer;font-size:var(--spot-radio-text-font-size);font-weight:var(--spot-radio-text-font-weight);color:var(--spot-radio-text-font-color);font-family:var(--spot-radio-text-font-family);padding:var(--spot-radio-text-padding);margin-right:.5rem;gap:.5rem;flex:1 0 0;align-self:stretch}.spot-selection__option.selected{background:var(--spot-radio-selection-background);border-radius:var(--spot-radio-selection-border-radius);padding:var(--spot-radio-selection-padding)}.spot-selection__recommended-tag{background:var(--spot-recommended-tag-background);color:var(--spot-recommended-tag-font-color);font-size:var(--spot-recommended-tag-font-size);font-weight:var(--spot-recommended-tag-font-weight);padding:var(--spot-recommended-tag-padding);border-radius:var(--spot-recommended-tag-border-radius);margin-left:1.5rem;white-space:nowrap}.spot-selection__error{color:var(--spot-selection-error-font-color);font-size:var(--spot-selection-error-font-size);padding:var(--spot-selection-error-padding);display:none}.spot-footer__terms{margin-top:.625rem;margin-right:.25rem;font-size:var(--spot-terms-font-size);font-weight:var(--spot-terms-font-weight);color:var(--spot-terms-font-color);font-family:var(--spot-terms-font-family);padding:var(--spot-terms-padding)}.spot-footer__terms-link{text-decoration:var(--spot-terms-link-text-decoration);font-size:var(--spot-terms-link-font-size);font-weight:var(--spot-terms-link-font-weight);color:var(--spot-terms-link-font-color);font-family:var(--spot-terms-link-font-family);padding:var(--spot-terms-link-padding)}.spot-footer__container{display:flex;justify-content:space-between;align-items:center}.spot-footer__powered-by{margin-top:1.5rem}";
|
|
127
|
+
function v(s) {
|
|
128
128
|
const t = document.createElement("style");
|
|
129
|
-
t.textContent =
|
|
129
|
+
t.textContent = s, document.head.appendChild(t);
|
|
130
130
|
}
|
|
131
|
-
|
|
132
|
-
class
|
|
131
|
+
v(C);
|
|
132
|
+
class y {
|
|
133
133
|
constructor(t = {}) {
|
|
134
134
|
this.options = {
|
|
135
135
|
location: "body",
|
|
@@ -143,13 +143,16 @@ class C {
|
|
|
143
143
|
}
|
|
144
144
|
async _init() {
|
|
145
145
|
try {
|
|
146
|
-
const t = await
|
|
146
|
+
const t = await f(
|
|
147
147
|
this.options.apiConfig.endpoint,
|
|
148
148
|
this.options.apiConfig.partnerId,
|
|
149
149
|
this.options.quoteRequestData
|
|
150
150
|
);
|
|
151
151
|
if (t.status !== "QUOTE_AVAILABLE") {
|
|
152
|
-
t.status === "NO_MATCHING_QUOTE" && this.
|
|
152
|
+
t.status === "NO_MATCHING_QUOTE" && this.options.callbacks.noMatchingQuote({
|
|
153
|
+
status: "NO_MATCHING_QUOTE",
|
|
154
|
+
data: this.options.quoteRequestData
|
|
155
|
+
});
|
|
153
156
|
return;
|
|
154
157
|
}
|
|
155
158
|
this.quote = t.data, this._renderWidget(), this.options.optInSelected && this.options.callbacks.onOptIn && this.options.callbacks.onOptIn({
|
|
@@ -158,33 +161,38 @@ class C {
|
|
|
158
161
|
quoteId: this.quote.id
|
|
159
162
|
}), this.options.callbacks.onQuoteRetrieved && this.options.callbacks.onQuoteRetrieved(this.quote);
|
|
160
163
|
} catch (t) {
|
|
161
|
-
this.
|
|
164
|
+
this.options.callbacks.onError({
|
|
165
|
+
message: t.message,
|
|
166
|
+
status: t.status,
|
|
167
|
+
responseBody: t.responseBody
|
|
168
|
+
});
|
|
162
169
|
}
|
|
163
170
|
}
|
|
164
171
|
_renderWidget() {
|
|
165
|
-
this.container = document.createElement("div"), this.container.className = "spot-refund-guarantee", this.root.appendChild(this.container), Object.entries(this.options.theme || {}).forEach(
|
|
166
|
-
|
|
167
|
-
|
|
172
|
+
this.container = document.createElement("div"), this.container.className = "spot-refund-guarantee", this.root.appendChild(this.container), Object.entries(this.options.theme || {}).forEach(([r, i]) => {
|
|
173
|
+
const n = `--${r}`;
|
|
174
|
+
this.container.style.setProperty(n, i);
|
|
175
|
+
}), h(this.container, this.quote.communication);
|
|
168
176
|
const t = document.createElement("div");
|
|
169
177
|
t.className = "spot-content__wrapper", this.container.appendChild(t), u(t, this.quote.communication.bulletPoints), this.options.showTable && g(t, this.quote.payoutSchedule);
|
|
170
|
-
const
|
|
178
|
+
const o = _(
|
|
171
179
|
t,
|
|
172
180
|
this.quote.spotPrice,
|
|
173
181
|
this.options.optInSelected
|
|
174
182
|
);
|
|
175
|
-
t.appendChild(
|
|
183
|
+
t.appendChild(o), b(this.container, this.quote), window.addEventListener("resize", this._onResize), this._updateLayout(), this._setupOptionListeners(o);
|
|
176
184
|
}
|
|
177
185
|
_updateLayout() {
|
|
178
186
|
const t = window.matchMedia("(min-width: 768px)").matches;
|
|
179
187
|
this.container.querySelector(".spot-content__wrapper").classList.toggle("desktop-layout", t && this.options.showTable);
|
|
180
188
|
}
|
|
181
189
|
_setupOptionListeners(t) {
|
|
182
|
-
const
|
|
183
|
-
|
|
184
|
-
i.addEventListener("change", (
|
|
190
|
+
const o = t.querySelectorAll('input[type="radio"]'), r = t.querySelectorAll(".spot-selection__option");
|
|
191
|
+
o.forEach((i) => {
|
|
192
|
+
i.addEventListener("change", (n) => {
|
|
185
193
|
var l;
|
|
186
|
-
const a =
|
|
187
|
-
this.hideSelectionError(), this.currentSelection = a,
|
|
194
|
+
const a = n.target.value;
|
|
195
|
+
this.hideSelectionError(), this.currentSelection = a, r.forEach((p) => p.classList.remove("selected")), (l = n.target.closest(".spot-selection__option")) == null || l.classList.add("selected"), a === "yes" && this.options.callbacks.onOptIn && this.options.callbacks.onOptIn({
|
|
188
196
|
status: "QUOTE_ACCEPTED",
|
|
189
197
|
spotPrice: this.quote.spotPrice,
|
|
190
198
|
quoteId: this.quote.id
|
|
@@ -199,10 +207,10 @@ class C {
|
|
|
199
207
|
var t;
|
|
200
208
|
if (!this.errorEl) {
|
|
201
209
|
this.errorEl = document.createElement("div"), this.errorEl.className = "spot-selection__error", this.errorEl.textContent = "Please make a selection";
|
|
202
|
-
const
|
|
210
|
+
const o = (t = this.container) == null ? void 0 : t.querySelector(
|
|
203
211
|
".spot-selection__options"
|
|
204
212
|
);
|
|
205
|
-
|
|
213
|
+
o && o.insertAdjacentElement("afterend", this.errorEl);
|
|
206
214
|
}
|
|
207
215
|
this.errorEl.style.display = "block";
|
|
208
216
|
}
|
|
@@ -217,22 +225,18 @@ class C {
|
|
|
217
225
|
return t ? this.hideSelectionError() : this.showSelectionError(), t;
|
|
218
226
|
}
|
|
219
227
|
getSelection() {
|
|
220
|
-
var t,
|
|
221
|
-
return {
|
|
228
|
+
var t, o;
|
|
229
|
+
return this.currentSelection == null ? null : {
|
|
222
230
|
selection: this.currentSelection,
|
|
223
231
|
quoteId: (t = this.quote) == null ? void 0 : t.id,
|
|
224
|
-
spotPrice: (
|
|
232
|
+
spotPrice: (o = this.quote) == null ? void 0 : o.spotPrice,
|
|
225
233
|
status: this.currentSelection === "yes" ? "QUOTE_ACCEPTED" : "QUOTE_DECLINED"
|
|
226
234
|
};
|
|
227
235
|
}
|
|
228
|
-
_emit(t, e) {
|
|
229
|
-
const o = this.options.callbacks[t];
|
|
230
|
-
o && o(e);
|
|
231
|
-
}
|
|
232
236
|
destroy() {
|
|
233
237
|
window.removeEventListener("resize", this._onResize), this.container && this.container.parentNode && this.container.parentNode.removeChild(this.container);
|
|
234
238
|
}
|
|
235
239
|
}
|
|
236
240
|
export {
|
|
237
|
-
|
|
241
|
+
y as default
|
|
238
242
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(l,e){typeof exports=="object"&&typeof module<"u"?module.exports=e():typeof define=="function"&&define.amd?define(e):(l=typeof globalThis<"u"?globalThis:l||self,l.SpotWidget=e())})(this,function(){"use strict";async function l(s,t,o){try{const r=await fetch(s,{method:"POST",headers:{"Content-Type":"application/json","X-Spot-Partner-Id":t},body:JSON.stringify(o)}),i=await r.json();if(!r.ok){const n=new Error((i==null?void 0:i.message)||"Failed to fetch quote");throw n.status=r.status,n.responseBody=i,n}return i}catch(r){throw r instanceof Error?r:new Error("Unknown error occurred while fetching quote")}}function e(s,{text:t,className:o,parent:r,innerHTML:i}={}){const n=document.createElement(s);return o&&(n.className=o),t!=null&&(n.textContent=t),i!=null&&(n.innerHTML=i),r&&r.appendChild(n),n}function m(s,{name:t,description:o}){e("div",{className:"spot-header__title",text:t,parent:s}),e("div",{className:"spot-header__description",text:o,parent:s})}function f(s,t=[]){const o=e("ul",{className:"spot-benefits__list",parent:s});t.forEach(r=>{const i=e("li",{parent:o});i.innerHTML=`
|
|
2
2
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
|
3
3
|
<path d="M11.6666 3.5L5.24998 9.91667L2.33331 7"
|
|
4
4
|
stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
-
</svg>`,e("span",{text:r,parent:i})})}function h(
|
|
5
|
+
</svg>`,e("span",{text:r,parent:i})})}function h(s,t=[]){const o=e("div",{className:"spot-table__container",parent:s}),r=e("table",{className:"spot-refund__table spot-table--dynamic",parent:o}),i=e("thead",{parent:r}),n=e("tr",{parent:i});e("th",{text:"When you cancel",parent:n}),e("th",{text:"You will receive",parent:n});const a=e("tbody",{parent:r});t.forEach(({text:p,percent:d,amount:v})=>{const c=e("tr",{parent:a});e("td",{text:p,parent:c});const y=d==="Not eligible for refund"?"Not eligible for a refund":`$${v} refund`;e("td",{text:y,parent:c})})}function u(s,t,o){const r=e("div",{className:"spot-selection__options",parent:s}),i=e("label",{className:`spot-selection__option ${o?"selected":""}`,parent:r}),n=e("input",{parent:i});n.type="radio",n.name="selection",n.value="yes",o&&(n.checked=!0),e("strong",{text:`Yes, protect my booking for $${t}`,parent:i}),e("span",{className:"spot-selection__recommended-tag",text:"Recommended",parent:i});const a=e("label",{className:"spot-selection__option",parent:r}),p=e("input",{parent:a});return p.type="radio",p.name="selection",p.value="no",e("span",{text:"No, do not protect my booking",parent:a}),r}function g(s,t){const o=e("div",{className:"spot-footer__container",parent:s}),r=e("div",{className:"spot-footer__terms",parent:o});e("span",{innerHTML:t.communication.legalDisclaimer,parent:r}),e("br",{parent:r}),e("a",{href:t.communication.termsAndConditionsUrl,className:"spot-footer__terms-link",text:"Refund Guarantee Terms and Conditions",parent:r});const i=e("p",{className:"spot-footer__powered-by",parent:o});return i.innerHTML=`
|
|
6
6
|
<svg width="145" height="28" viewBox="0 0 145 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
7
7
|
<rect width="145" height="28"/>
|
|
8
8
|
<rect x="-655" y="-270" width="819" height="325" rx="10"/>
|
|
@@ -17,4 +17,4 @@
|
|
|
17
17
|
<rect width="45.405" height="14.8867" fill="white" transform="translate(87 8)"/>
|
|
18
18
|
</clipPath>
|
|
19
19
|
</defs>
|
|
20
|
-
</svg>`,o}const b=":root{--spot-font-family: Arial;--spot-padding: 1.25rem;--spot-background-color: #ffffff;--spot-font-color: #000000;--spot-border-radius: .5rem;--spot-title-font-size: 1.25rem;--spot-title-font-weight: 700;--spot-title-padding: 0 0 1.25rem 0;--spot-title-font-color: var(--spot-font-color);--spot-title-font-family: var(--spot-font-family);--spot-description-font-size: .875rem;--spot-description-font-weight: 400;--spot-description-padding: 0 0 .5rem 0;--spot-description-font-color: var(--spot-font-color);--spot-description-font-family: var(--spot-font-family);--spot-bullets-font-size: .875rem;--spot-bullets-font-weight: 400;--spot-bullets-font-color: var(--spot-font-color);--spot-bullets-font-family: var(--spot-font-family);--spot-bullets-padding: .3125rem;--spot-table-border-radius: .625rem;--spot-table-header-font-size: .875rem;--spot-table-header-font-weight: 700;--spot-table-header-font-color: var(--spot-font-color);--spot-table-header-font-family: var(--spot-font-family);--spot-table-header-padding: 0 .5rem .625rem;--spot-table-cell-font-size: .815rem;--spot-table-cell-font-weight: 400;--spot-table-cell-font-color: var(--spot-font-color);--spot-table-cell-font-family: var(--spot-font-family);--spot-table-cell-padding: 0 .625rem;--spot-radio-border: #000000;--spot-radio-border-radius: .625rem;--spot-radio-checked-background: #000000;--spot-radio-text-font-size: .875rem;--spot-radio-text-font-weight: 400;--spot-radio-text-font-color: var(--spot-font-color);--spot-radio-text-font-family: var(--spot-font-family);--spot-radio-text-padding: .625rem;--spot-radio-selection-background: #f4f4f4;--spot-radio-selection-border-radius: .625rem;--spot-radio-selection-padding: .625rem;--spot-recommended-tag-background: #000000;--spot-recommended-tag-font-color: #ffffff;--spot-recommended-tag-font-size: .875rem;--spot-recommended-tag-font-weight: 700;--spot-recommended-tag-padding: .25rem .5rem;--spot-recommended-tag-border-radius: .5rem;--spot-selection-error-font-color: #ff0000;--spot-selection-error-font-size: .875rem;--spot-selection-error-padding: .5rem;--spot-terms-font-size: .75rem;--spot-terms-font-weight: 400;--spot-terms-font-color: #636569;--spot-terms-font-family: var(--spot-font-family);--spot-terms-padding: 0;--spot-terms-link-text-decoration: underline;--spot-terms-link-font-size: .75rem;--spot-terms-link-font-weight: 400;--spot-terms-link-font-color: #636569;--spot-terms-link-font-family: var(--spot-font-family);--spot-terms-link-padding: 0}.spot-refund-guarantee{font-family:var(--spot-font-family);padding:var(--spot-padding);background-color:var(--spot-background-color);color:var(--spot-font-color);border:.0625rem solid #e0e0e0;border-radius:var(--spot-border-radius);max-width:51rem;margin:1rem}.spot-refund-guarantee *{font-family:inherit;color:inherit}.spot-header__title{font-size:var(--spot-title-font-size);font-weight:var(--spot-title-font-weight);padding:var(--spot-title-padding);color:var(--spot-title-font-color);font-family:var(--spot-title-font-family);line-height:120%;letter-spacing:-.03125rem}.spot-header__description{font-size:var(--spot-description-font-size);font-weight:var(--spot-description-font-weight);color:var(--spot-description-font-color);font-family:var(--spot-description-font-family);padding:var(--spot-description-padding);line-height:125%;letter-spacing:-.025rem}.spot-content__wrapper{display:flex;flex-direction:column}@media (min-width: 48rem){.spot-content__wrapper.desktop-layout{display:grid;grid-template-columns:1fr 20.3125rem;align-items:start;gap:1rem}.desktop-layout .spot-benefits__list{grid-row:1}.desktop-layout .spot-selection__options{grid-row:2}.desktop-layout .spot-table__container{grid-row:1 / span 2}}@media (max-width: 52.438rem){.spot-selection__recommended-tag{display:inline-block;margin-left:0}}@media (max-width: 47.938rem){.spot-selection__recommended-tag{margin-top:0rem}}@media (max-width: 32.125rem){.spot-selection__recommended-tag{margin-top:.5rem}}@media (max-width: 47.9375rem){.spot-table__container{display:flex;justify-content:center}.spot-selection__recommended-tag{display:inline-block;margin-left:0}.spot-footer__container{flex-direction:column;margin-top:.5rem}.spot-refund__table{width:100%;table-layout:auto}.spot-refund__table th{padding:0rem}}.spot-benefits__list{list-style-type:none;line-height:125%;gap:.5625rem;font-size:var(--spot-bullets-font-size);font-weight:var(--spot-bullets-font-weight);color:var(--spot-bullets-font-color);font-family:var(--spot-bullets-font-family);padding:var(--spot-bullets-padding);margin-block-start:0rem;margin-block-end:0rem}.spot-benefits__list li{margin-bottom:.5rem;display:flex;align-items:flex-start;gap:.5rem}.spot-benefits__list li svg{flex-shrink:0;position:relative;top:.125rem}.spot-table__container{width:100%}.spot-refund__table{max-width:22rem;border-radius:var(--spot-table-border-radius);overflow:hidden;border:.09375rem solid #636569;table-layout:fixed;margin-bottom:1.5rem;margin-top:.25rem;padding:.625rem}.spot-refund__table--dynamic{height:auto!important;min-height:7.5rem}.spot-refund__table td,.spot-refund__table th{padding:.375rem .625rem;text-align:left}.spot-refund__table th{text-align:left;font-size:var(--spot-table-header-font-size);font-weight:var(--spot-table-header-font-weight);color:var(--spot-table-header-font-color);font-family:var(--spot-table-header-font-family);padding:var(--spot-table-header-padding)}.spot-refund__table td{text-align:left;font-size:var(--spot-table-cell-font-size);font-weight:var(--spot-table-cell-font-weight);color:var(--spot-table-cell-font-color);font-family:var(--spot-table-cell-font-family);padding:var(--spot-table-cell-padding)}input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:.75rem;height:.75rem;border:.0625rem solid var(--spot-radio-border);border-radius:var(--spot-radio-border-radius);margin-right:.5rem;position:relative;vertical-align:middle;top:-.0625rem;cursor:pointer}input[type=radio]:checked{background:var(--spot-radio-checked-background);box-shadow:inset 0 0 0 .0625rem #fff}.spot-selection__options{display:flex;flex-direction:column;gap:.5rem}.spot-selection__option{display:block;position:relative;transition:background .2s;cursor:pointer;font-size:var(--spot-radio-text-font-size);font-weight:var(--spot-radio-text-font-weight);color:var(--spot-radio-text-font-color);font-family:var(--spot-radio-text-font-family);padding:var(--spot-radio-text-padding);margin-right:.5rem;gap:.5rem;flex:1 0 0;align-self:stretch}.spot-selection__option.selected{background:var(--spot-radio-selection-background);border-radius:var(--spot-radio-selection-border-radius);padding:var(--spot-radio-selection-padding)}.spot-selection__recommended-tag{background:var(--spot-recommended-tag-background);color:var(--spot-recommended-tag-font-color);font-size:var(--spot-recommended-tag-font-size);font-weight:var(--spot-recommended-tag-font-weight);padding:var(--spot-recommended-tag-padding);border-radius:var(--spot-recommended-tag-border-radius);margin-left:1.5rem;white-space:nowrap}.spot-selection__error{color:var(--spot-selection-error-font-color);font-size:var(--spot-selection-error-font-size);padding:var(--spot-selection-error-padding);display:none}.spot-footer__terms{margin-top:.625rem;margin-right:.25rem;font-size:var(--spot-terms-font-size);font-weight:var(--spot-terms-font-weight);color:var(--spot-terms-font-color);font-family:var(--spot-terms-font-family);padding:var(--spot-terms-padding)}.spot-footer__terms-link{text-decoration:var(--spot-terms-link-text-decoration);font-size:var(--spot-terms-link-font-size);font-weight:var(--spot-terms-link-font-weight);color:var(--spot-terms-link-font-color);font-family:var(--spot-terms-link-font-family);padding:var(--spot-terms-link-padding)}.spot-footer__container{display:flex;justify-content:space-between;align-items:center}.spot-footer__powered-by{margin-top:1.5rem}";function _(n){const t=document.createElement("style");t.textContent=n,document.head.appendChild(t)}_(b);class v{constructor(t={}){this.options={location:"body",showTable:!0,optInSelected:!1,apiConfig:{endpoint:"",partnerId:""},quoteRequestData:{},callbacks:{},...t},this._onResize=this._updateLayout.bind(this),this.root=typeof this.options.location=="string"?document.querySelector(this.options.location):this.options.location,this.currentSelection=this.options.optInSelected?"yes":null,this._init()}async _init(){try{const t=await p(this.options.apiConfig.endpoint,this.options.apiConfig.partnerId,this.options.quoteRequestData);if(t.status!=="QUOTE_AVAILABLE"){t.status==="NO_MATCHING_QUOTE"&&this._emit("noMatchingQuote");return}this.quote=t.data,this._renderWidget(),this.options.optInSelected&&this.options.callbacks.onOptIn&&this.options.callbacks.onOptIn({status:"QUOTE_ACCEPTED",spotPrice:this.quote.spotPrice,quoteId:this.quote.id}),this.options.callbacks.onQuoteRetrieved&&this.options.callbacks.onQuoteRetrieved(this.quote)}catch(t){this._emit("error",t)}}_renderWidget(){this.container=document.createElement("div"),this.container.className="spot-refund-guarantee",this.root.appendChild(this.container),Object.entries(this.options.theme||{}).forEach(([r,i])=>this.container.style.setProperty(r,i)),f(this.container,this.quote.communication);const t=document.createElement("div");t.className="spot-content__wrapper",this.container.appendChild(t),m(t,this.quote.communication.bulletPoints),this.options.showTable&&h(t,this.quote.payoutSchedule);const o=u(t,this.quote.spotPrice,this.options.optInSelected);t.appendChild(o),g(this.container,this.quote),window.addEventListener("resize",this._onResize),this._updateLayout(),this._setupOptionListeners(o)}_updateLayout(){const t=window.matchMedia("(min-width: 768px)").matches;this.container.querySelector(".spot-content__wrapper").classList.toggle("desktop-layout",t&&this.options.showTable)}_setupOptionListeners(t){const o=t.querySelectorAll('input[type="radio"]'),r=t.querySelectorAll(".spot-selection__option");o.forEach(i=>{i.addEventListener("change",s=>{var l;const a=s.target.value;this.hideSelectionError(),this.currentSelection=a,r.forEach(d=>d.classList.remove("selected")),(l=s.target.closest(".spot-selection__option"))==null||l.classList.add("selected"),a==="yes"&&this.options.callbacks.onOptIn&&this.options.callbacks.onOptIn({status:"QUOTE_ACCEPTED",spotPrice:this.quote.spotPrice,quoteId:this.quote.id}),a==="no"&&this.options.callbacks.onOptOut&&this.options.callbacks.onOptOut({status:"QUOTE_DECLINED",quoteId:this.quote.id})})})}showSelectionError(){var t;if(!this.errorEl){this.errorEl=document.createElement("div"),this.errorEl.className="spot-selection__error",this.errorEl.textContent="Please make a selection";const o=(t=this.container)==null?void 0:t.querySelector(".spot-selection__options");o&&o.insertAdjacentElement("afterend",this.errorEl)}this.errorEl.style.display="block"}hideSelectionError(){this.errorEl&&(this.errorEl.style.display="none")}validateSelection(){if(!this.container)return!1;const t=!!this.container.querySelector('input[name="selection"]:checked');return t?this.hideSelectionError():this.showSelectionError(),t}getSelection(){var t,o;return{selection:this.currentSelection,quoteId:(t=this.quote)==null?void 0:t.id,spotPrice:(o=this.quote)==null?void 0:o.spotPrice,status:this.currentSelection==="yes"?"QUOTE_ACCEPTED":"QUOTE_DECLINED"}}_emit(t,o){const r=this.options.callbacks[t];r&&r(o)}destroy(){window.removeEventListener("resize",this._onResize),this.container&&this.container.parentNode&&this.container.parentNode.removeChild(this.container)}}return v});
|
|
20
|
+
</svg>`,o}const _=":root{--spot-font-family: Arial;--spot-padding: 1.25rem;--spot-background-color: #ffffff;--spot-font-color: #000000;--spot-border-radius: .5rem;--spot-title-font-size: 1.25rem;--spot-title-font-weight: 700;--spot-title-padding: 0 0 1.25rem 0;--spot-description-font-size: .875rem;--spot-description-font-weight: 400;--spot-description-padding: 0 0 .5rem 0;--spot-bullets-font-size: .875rem;--spot-bullets-font-weight: 400;--spot-bullets-padding: .3125rem;--spot-table-border-radius: .625rem;--spot-table-header-font-size: .875rem;--spot-table-header-font-weight: 700;--spot-table-header-padding: 0 .5rem .625rem;--spot-table-cell-font-size: .815rem;--spot-table-cell-font-weight: 400;--spot-table-cell-padding: 0 .625rem;--spot-radio-border: #000000;--spot-radio-border-radius: .625rem;--spot-radio-checked-background: #000000;--spot-radio-text-font-size: .875rem;--spot-radio-text-font-weight: 400;--spot-radio-text-padding: .625rem;--spot-radio-selection-background: #f4f4f4;--spot-radio-selection-border-radius: .625rem;--spot-radio-selection-padding: .625rem;--spot-recommended-tag-background: #000000;--spot-recommended-tag-font-color: #ffffff;--spot-recommended-tag-font-size: .875rem;--spot-recommended-tag-font-weight: 700;--spot-recommended-tag-padding: .25rem .5rem;--spot-recommended-tag-border-radius: .5rem;--spot-selection-error-font-color: #ff0000;--spot-selection-error-font-size: .875rem;--spot-selection-error-padding: .5rem;--spot-terms-font-size: .75rem;--spot-terms-font-weight: 400;--spot-terms-font-color: #636569;--spot-terms-padding: 0;--spot-terms-link-text-decoration: underline;--spot-terms-link-font-size: .75rem;--spot-terms-link-font-weight: 400;--spot-terms-link-font-color: #636569;--spot-terms-link-padding: 0}.spot-refund-guarantee{font-family:var(--spot-font-family);padding:var(--spot-padding);background-color:var(--spot-background-color);color:var(--spot-font-color);border:.0625rem solid #e0e0e0;border-radius:var(--spot-border-radius);max-width:51rem;margin:1rem}.spot-refund-guarantee *{color:inherit}.spot-header__title{font-size:var(--spot-title-font-size);font-weight:var(--spot-title-font-weight);padding:var(--spot-title-padding);color:var(--spot-title-font-color);font-family:var(--spot-title-font-family);line-height:120%;letter-spacing:-.03125rem}.spot-header__description{font-size:var(--spot-description-font-size);font-weight:var(--spot-description-font-weight);color:var(--spot-description-font-color);font-family:var(--spot-description-font-family);padding:var(--spot-description-padding);line-height:125%;letter-spacing:-.025rem}.spot-content__wrapper{display:flex;flex-direction:column}@media (min-width: 48rem){.spot-content__wrapper.desktop-layout{display:grid;grid-template-columns:1fr 20.3125rem;align-items:start;gap:1rem}.desktop-layout .spot-benefits__list{grid-row:1}.desktop-layout .spot-selection__options{grid-row:2}.desktop-layout .spot-table__container{grid-row:1 / span 2}}@media (max-width: 52.438rem){.spot-selection__recommended-tag{display:inline-block;margin-left:0}}@media (max-width: 47.938rem){.spot-selection__recommended-tag{margin-top:0rem}}@media (max-width: 32.125rem){.spot-selection__recommended-tag{margin-top:.5rem}}@media (max-width: 47.9375rem){.spot-table__container{display:flex;justify-content:center}.spot-selection__recommended-tag{display:inline-block;margin-left:0}.spot-footer__container{flex-direction:column;margin-top:.5rem}.spot-refund__table{width:100%;table-layout:auto}.spot-refund__table th{padding:0rem}}.spot-benefits__list{list-style-type:none;line-height:125%;gap:.5625rem;font-size:var(--spot-bullets-font-size);font-weight:var(--spot-bullets-font-weight);color:var(--spot-bullets-font-color);font-family:var(--spot-bullets-font-family);padding:var(--spot-bullets-padding);margin-block-start:0rem;margin-block-end:0rem}.spot-benefits__list li{margin-bottom:.5rem;display:flex;align-items:flex-start;gap:.5rem}.spot-benefits__list li svg{flex-shrink:0;position:relative;top:.125rem}.spot-table__container{width:100%}.spot-refund__table{max-width:22rem;border-radius:var(--spot-table-border-radius);overflow:hidden;border:.09375rem solid #636569;table-layout:fixed;margin-bottom:1.5rem;margin-top:.25rem;padding:.625rem}.spot-refund__table--dynamic{height:auto!important;min-height:7.5rem}.spot-refund__table td,.spot-refund__table th{padding:.375rem .625rem;text-align:left}.spot-refund__table th{text-align:left;font-size:var(--spot-table-header-font-size);font-weight:var(--spot-table-header-font-weight);color:var(--spot-table-header-font-color);font-family:var(--spot-table-header-font-family);padding:var(--spot-table-header-padding)}.spot-refund__table td{text-align:left;font-size:var(--spot-table-cell-font-size);font-weight:var(--spot-table-cell-font-weight);color:var(--spot-table-cell-font-color);font-family:var(--spot-table-cell-font-family);padding:var(--spot-table-cell-padding)}input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:.75rem;height:.75rem;border:.0625rem solid var(--spot-radio-border);border-radius:var(--spot-radio-border-radius);margin-right:.5rem;position:relative;vertical-align:middle;top:-.0625rem;cursor:pointer}input[type=radio]:checked{background:var(--spot-radio-checked-background);box-shadow:inset 0 0 0 .0625rem #fff}.spot-selection__options{display:flex;flex-direction:column;gap:.5rem}.spot-selection__option{display:block;position:relative;transition:background .2s;cursor:pointer;font-size:var(--spot-radio-text-font-size);font-weight:var(--spot-radio-text-font-weight);color:var(--spot-radio-text-font-color);font-family:var(--spot-radio-text-font-family);padding:var(--spot-radio-text-padding);margin-right:.5rem;gap:.5rem;flex:1 0 0;align-self:stretch}.spot-selection__option.selected{background:var(--spot-radio-selection-background);border-radius:var(--spot-radio-selection-border-radius);padding:var(--spot-radio-selection-padding)}.spot-selection__recommended-tag{background:var(--spot-recommended-tag-background);color:var(--spot-recommended-tag-font-color);font-size:var(--spot-recommended-tag-font-size);font-weight:var(--spot-recommended-tag-font-weight);padding:var(--spot-recommended-tag-padding);border-radius:var(--spot-recommended-tag-border-radius);margin-left:1.5rem;white-space:nowrap}.spot-selection__error{color:var(--spot-selection-error-font-color);font-size:var(--spot-selection-error-font-size);padding:var(--spot-selection-error-padding);display:none}.spot-footer__terms{margin-top:.625rem;margin-right:.25rem;font-size:var(--spot-terms-font-size);font-weight:var(--spot-terms-font-weight);color:var(--spot-terms-font-color);font-family:var(--spot-terms-font-family);padding:var(--spot-terms-padding)}.spot-footer__terms-link{text-decoration:var(--spot-terms-link-text-decoration);font-size:var(--spot-terms-link-font-size);font-weight:var(--spot-terms-link-font-weight);color:var(--spot-terms-link-font-color);font-family:var(--spot-terms-link-font-family);padding:var(--spot-terms-link-padding)}.spot-footer__container{display:flex;justify-content:space-between;align-items:center}.spot-footer__powered-by{margin-top:1.5rem}";function b(s){const t=document.createElement("style");t.textContent=s,document.head.appendChild(t)}b(_);class C{constructor(t={}){this.options={location:"body",showTable:!0,optInSelected:!1,apiConfig:{endpoint:"",partnerId:""},quoteRequestData:{},callbacks:{},...t},this._onResize=this._updateLayout.bind(this),this.root=typeof this.options.location=="string"?document.querySelector(this.options.location):this.options.location,this.currentSelection=this.options.optInSelected?"yes":null,this._init()}async _init(){try{const t=await l(this.options.apiConfig.endpoint,this.options.apiConfig.partnerId,this.options.quoteRequestData);if(t.status!=="QUOTE_AVAILABLE"){t.status==="NO_MATCHING_QUOTE"&&this.options.callbacks.noMatchingQuote({status:"NO_MATCHING_QUOTE",data:this.options.quoteRequestData});return}this.quote=t.data,this._renderWidget(),this.options.optInSelected&&this.options.callbacks.onOptIn&&this.options.callbacks.onOptIn({status:"QUOTE_ACCEPTED",spotPrice:this.quote.spotPrice,quoteId:this.quote.id}),this.options.callbacks.onQuoteRetrieved&&this.options.callbacks.onQuoteRetrieved(this.quote)}catch(t){this.options.callbacks.onError({message:t.message,status:t.status,responseBody:t.responseBody})}}_renderWidget(){this.container=document.createElement("div"),this.container.className="spot-refund-guarantee",this.root.appendChild(this.container),Object.entries(this.options.theme||{}).forEach(([r,i])=>{const n=`--${r}`;this.container.style.setProperty(n,i)}),m(this.container,this.quote.communication);const t=document.createElement("div");t.className="spot-content__wrapper",this.container.appendChild(t),f(t,this.quote.communication.bulletPoints),this.options.showTable&&h(t,this.quote.payoutSchedule);const o=u(t,this.quote.spotPrice,this.options.optInSelected);t.appendChild(o),g(this.container,this.quote),window.addEventListener("resize",this._onResize),this._updateLayout(),this._setupOptionListeners(o)}_updateLayout(){const t=window.matchMedia("(min-width: 768px)").matches;this.container.querySelector(".spot-content__wrapper").classList.toggle("desktop-layout",t&&this.options.showTable)}_setupOptionListeners(t){const o=t.querySelectorAll('input[type="radio"]'),r=t.querySelectorAll(".spot-selection__option");o.forEach(i=>{i.addEventListener("change",n=>{var p;const a=n.target.value;this.hideSelectionError(),this.currentSelection=a,r.forEach(d=>d.classList.remove("selected")),(p=n.target.closest(".spot-selection__option"))==null||p.classList.add("selected"),a==="yes"&&this.options.callbacks.onOptIn&&this.options.callbacks.onOptIn({status:"QUOTE_ACCEPTED",spotPrice:this.quote.spotPrice,quoteId:this.quote.id}),a==="no"&&this.options.callbacks.onOptOut&&this.options.callbacks.onOptOut({status:"QUOTE_DECLINED",quoteId:this.quote.id})})})}showSelectionError(){var t;if(!this.errorEl){this.errorEl=document.createElement("div"),this.errorEl.className="spot-selection__error",this.errorEl.textContent="Please make a selection";const o=(t=this.container)==null?void 0:t.querySelector(".spot-selection__options");o&&o.insertAdjacentElement("afterend",this.errorEl)}this.errorEl.style.display="block"}hideSelectionError(){this.errorEl&&(this.errorEl.style.display="none")}validateSelection(){if(!this.container)return!1;const t=!!this.container.querySelector('input[name="selection"]:checked');return t?this.hideSelectionError():this.showSelectionError(),t}getSelection(){var t,o;return this.currentSelection==null?null:{selection:this.currentSelection,quoteId:(t=this.quote)==null?void 0:t.id,spotPrice:(o=this.quote)==null?void 0:o.spotPrice,status:this.currentSelection==="yes"?"QUOTE_ACCEPTED":"QUOTE_DECLINED"}}destroy(){window.removeEventListener("resize",this._onResize),this.container&&this.container.parentNode&&this.container.parentNode.removeChild(this.container)}}return C});
|
package/package.json
CHANGED
package/src/api.js
CHANGED
|
@@ -15,23 +15,18 @@ export async function fetchQuote(endpoint, partnerId, payload) {
|
|
|
15
15
|
},
|
|
16
16
|
body: JSON.stringify(payload),
|
|
17
17
|
});
|
|
18
|
-
console.log("res: ", res);
|
|
19
|
-
|
|
20
18
|
const body = await res.json();
|
|
21
|
-
console.log("body: ", body);
|
|
22
|
-
|
|
23
19
|
if (!res.ok) {
|
|
24
|
-
|
|
20
|
+
const error = new Error(body?.message || "Failed to fetch quote");
|
|
21
|
+
error.status = res.status;
|
|
22
|
+
error.responseBody = body;
|
|
23
|
+
throw error;
|
|
25
24
|
}
|
|
26
25
|
|
|
27
26
|
return body;
|
|
28
27
|
} catch (err) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
err instanceof Error
|
|
33
|
-
? err.message
|
|
34
|
-
: "Unknown error occurred while fetching quote"
|
|
35
|
-
);
|
|
28
|
+
throw err instanceof Error
|
|
29
|
+
? err
|
|
30
|
+
: new Error("Unknown error occurred while fetching quote");
|
|
36
31
|
}
|
|
37
32
|
}
|
package/src/index.js
CHANGED
|
@@ -49,7 +49,10 @@ class SpotWidget {
|
|
|
49
49
|
|
|
50
50
|
if (response.status !== "QUOTE_AVAILABLE") {
|
|
51
51
|
if (response.status === "NO_MATCHING_QUOTE") {
|
|
52
|
-
this.
|
|
52
|
+
this.options.callbacks.noMatchingQuote({
|
|
53
|
+
status: "NO_MATCHING_QUOTE",
|
|
54
|
+
data: this.options.quoteRequestData,
|
|
55
|
+
});
|
|
53
56
|
}
|
|
54
57
|
return;
|
|
55
58
|
}
|
|
@@ -69,7 +72,11 @@ class SpotWidget {
|
|
|
69
72
|
this.options.callbacks.onQuoteRetrieved(this.quote);
|
|
70
73
|
}
|
|
71
74
|
} catch (err) {
|
|
72
|
-
this.
|
|
75
|
+
this.options.callbacks.onError({
|
|
76
|
+
message: err.message,
|
|
77
|
+
status: err.status,
|
|
78
|
+
responseBody: err.responseBody,
|
|
79
|
+
});
|
|
73
80
|
}
|
|
74
81
|
}
|
|
75
82
|
|
|
@@ -80,9 +87,10 @@ class SpotWidget {
|
|
|
80
87
|
this.root.appendChild(this.container);
|
|
81
88
|
|
|
82
89
|
// apply theme
|
|
83
|
-
Object.entries(this.options.theme || {}).forEach(([k, v]) =>
|
|
84
|
-
|
|
85
|
-
|
|
90
|
+
Object.entries(this.options.theme || {}).forEach(([k, v]) => {
|
|
91
|
+
const cssVariable = `--${k}`;
|
|
92
|
+
this.container.style.setProperty(cssVariable, v);
|
|
93
|
+
});
|
|
86
94
|
|
|
87
95
|
renderHeader(this.container, this.quote.communication);
|
|
88
96
|
const cw = document.createElement("div");
|
|
@@ -182,6 +190,8 @@ class SpotWidget {
|
|
|
182
190
|
}
|
|
183
191
|
|
|
184
192
|
getSelection() {
|
|
193
|
+
if (this.currentSelection == null) return null;
|
|
194
|
+
|
|
185
195
|
return {
|
|
186
196
|
selection: this.currentSelection,
|
|
187
197
|
quoteId: this.quote?.id,
|
|
@@ -190,12 +200,6 @@ class SpotWidget {
|
|
|
190
200
|
this.currentSelection === "yes" ? "QUOTE_ACCEPTED" : "QUOTE_DECLINED",
|
|
191
201
|
};
|
|
192
202
|
}
|
|
193
|
-
_emit(event, data) {
|
|
194
|
-
const callback = this.options.callbacks[event];
|
|
195
|
-
if (callback) {
|
|
196
|
-
callback(data);
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
203
|
|
|
200
204
|
destroy() {
|
|
201
205
|
window.removeEventListener("resize", this._onResize);
|
package/src/styles.css
CHANGED
|
@@ -8,33 +8,23 @@
|
|
|
8
8
|
--spot-title-font-size: 1.25rem;
|
|
9
9
|
--spot-title-font-weight: 700;
|
|
10
10
|
--spot-title-padding: 0 0 1.25rem 0;
|
|
11
|
-
--spot-title-font-color: var(--spot-font-color);
|
|
12
|
-
--spot-title-font-family: var(--spot-font-family);
|
|
13
11
|
|
|
14
12
|
--spot-description-font-size: 0.875rem;
|
|
15
13
|
--spot-description-font-weight: 400;
|
|
16
14
|
--spot-description-padding: 0 0 0.5rem 0;
|
|
17
|
-
--spot-description-font-color: var(--spot-font-color);
|
|
18
|
-
--spot-description-font-family: var(--spot-font-family);
|
|
19
15
|
|
|
20
16
|
--spot-bullets-font-size: 0.875rem;
|
|
21
17
|
--spot-bullets-font-weight: 400;
|
|
22
|
-
--spot-bullets-font-color: var(--spot-font-color);
|
|
23
|
-
--spot-bullets-font-family: var(--spot-font-family);
|
|
24
18
|
--spot-bullets-padding: 0.3125rem;
|
|
25
19
|
|
|
26
20
|
--spot-table-border-radius: 0.625rem;
|
|
27
21
|
|
|
28
22
|
--spot-table-header-font-size: 0.875rem;
|
|
29
23
|
--spot-table-header-font-weight: 700;
|
|
30
|
-
--spot-table-header-font-color: var(--spot-font-color);
|
|
31
|
-
--spot-table-header-font-family: var(--spot-font-family);
|
|
32
24
|
--spot-table-header-padding: 0 0.5rem 0.625rem;
|
|
33
25
|
|
|
34
26
|
--spot-table-cell-font-size: 0.815rem;
|
|
35
27
|
--spot-table-cell-font-weight: 400;
|
|
36
|
-
--spot-table-cell-font-color: var(--spot-font-color);
|
|
37
|
-
--spot-table-cell-font-family: var(--spot-font-family);
|
|
38
28
|
--spot-table-cell-padding: 0 0.625rem;
|
|
39
29
|
|
|
40
30
|
--spot-radio-border: #000000;
|
|
@@ -43,8 +33,6 @@
|
|
|
43
33
|
|
|
44
34
|
--spot-radio-text-font-size: 0.875rem;
|
|
45
35
|
--spot-radio-text-font-weight: 400;
|
|
46
|
-
--spot-radio-text-font-color: var(--spot-font-color);
|
|
47
|
-
--spot-radio-text-font-family: var(--spot-font-family);
|
|
48
36
|
--spot-radio-text-padding: 0.625rem;
|
|
49
37
|
|
|
50
38
|
--spot-radio-selection-background: #f4f4f4;
|
|
@@ -65,14 +53,12 @@
|
|
|
65
53
|
--spot-terms-font-size: 0.75rem;
|
|
66
54
|
--spot-terms-font-weight: 400;
|
|
67
55
|
--spot-terms-font-color: #636569;
|
|
68
|
-
--spot-terms-font-family: var(--spot-font-family);
|
|
69
56
|
--spot-terms-padding: 0;
|
|
70
57
|
|
|
71
58
|
--spot-terms-link-text-decoration: underline;
|
|
72
59
|
--spot-terms-link-font-size: 0.75rem;
|
|
73
60
|
--spot-terms-link-font-weight: 400;
|
|
74
61
|
--spot-terms-link-font-color: #636569;
|
|
75
|
-
--spot-terms-link-font-family: var(--spot-font-family);
|
|
76
62
|
--spot-terms-link-padding: 0;
|
|
77
63
|
}
|
|
78
64
|
|
|
@@ -88,7 +74,6 @@
|
|
|
88
74
|
}
|
|
89
75
|
|
|
90
76
|
.spot-refund-guarantee * {
|
|
91
|
-
font-family: inherit;
|
|
92
77
|
color: inherit;
|
|
93
78
|
}
|
|
94
79
|
|