@getspot/spot-widget 0.0.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.
Files changed (8) hide show
  1. package/README.md +93 -0
  2. package/dist/react/react-spot-widget.es.js +253 -0
  3. package/dist/react/react-spot-widget.umd.js +20 -0
  4. package/dist/vanilla/spot-widget.es.js +238 -0
  5. package/dist/vanilla/spot-widget.umd.js +20 -0
  6. package/dist/vue/vue-spot-widget.es.js +271 -0
  7. package/dist/vue/vue-spot-widget.umd.js +20 -0
  8. package/package.json +44 -0
package/README.md ADDED
@@ -0,0 +1,93 @@
1
+ # spot-widget
2
+
3
+
4
+
5
+ ## Getting started
6
+
7
+ To make it easy for you to get started with GitLab, here's a list of recommended next steps.
8
+
9
+ Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
10
+
11
+ ## Add your files
12
+
13
+ - [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
14
+ - [ ] [Add files using the command line](https://docs.gitlab.com/topics/git/add_files/#add-files-to-a-git-repository) or push an existing Git repository with the following command:
15
+
16
+ ```
17
+ cd existing_repo
18
+ git remote add origin https://gitlab.com/getspot/spot-widget.git
19
+ git branch -M main
20
+ git push -uf origin main
21
+ ```
22
+
23
+ ## Integrate with your tools
24
+
25
+ - [ ] [Set up project integrations](https://gitlab.com/getspot/spot-widget/-/settings/integrations)
26
+
27
+ ## Collaborate with your team
28
+
29
+ - [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
30
+ - [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
31
+ - [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
32
+ - [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
33
+ - [ ] [Set auto-merge](https://docs.gitlab.com/user/project/merge_requests/auto_merge/)
34
+
35
+ ## Test and Deploy
36
+
37
+ Use the built-in continuous integration in GitLab.
38
+
39
+ - [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/)
40
+ - [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing (SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
41
+ - [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
42
+ - [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
43
+ - [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
44
+
45
+ ***
46
+
47
+ # Editing this README
48
+
49
+ When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thanks to [makeareadme.com](https://www.makeareadme.com/) for this template.
50
+
51
+ ## Suggestions for a good README
52
+
53
+ Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
54
+
55
+ ## Name
56
+ Choose a self-explaining name for your project.
57
+
58
+ ## Description
59
+ Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
60
+
61
+ ## Badges
62
+ On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
63
+
64
+ ## Visuals
65
+ Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
66
+
67
+ ## Installation
68
+ Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
69
+
70
+ ## Usage
71
+ Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
72
+
73
+ ## Support
74
+ Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
75
+
76
+ ## Roadmap
77
+ If you have ideas for releases in the future, it is a good idea to list them in the README.
78
+
79
+ ## Contributing
80
+ State if you are open to contributions and what your requirements are for accepting them.
81
+
82
+ For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
83
+
84
+ You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
85
+
86
+ ## Authors and acknowledgment
87
+ Show your appreciation to those who have contributed to the project.
88
+
89
+ ## License
90
+ For open source projects, say how it is licensed.
91
+
92
+ ## Project status
93
+ If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
package/dist/react/react-spot-widget.es.js ADDED
@@ -0,0 +1,253 @@
1
+ import m, { useRef as h, useEffect as u } from "react";
2
+ async function g(i, t, e) {
3
+ try {
4
+ const o = await fetch(i, {
5
+ method: "POST",
6
+ headers: {
7
+ "Content-Type": "application/json",
8
+ "X-Spot-Partner-Id": t
9
+ },
10
+ body: JSON.stringify(e)
11
+ });
12
+ console.log("res: ", o);
13
+ const n = await o.json();
14
+ return console.log("body: ", n), o.ok ? n : { status: "ERROR", responseBody: n };
15
+ } catch (o) {
16
+ throw console.log("what"), console.error("Failed to fetch quote:", { payload: e, error: o }), new Error(
17
+ o instanceof Error ? o.message : "Unknown error occurred while fetching quote"
18
+ );
19
+ }
20
+ }
21
+ function r(i, { text: t, className: e, parent: o, innerHTML: n } = {}) {
22
+ const s = document.createElement(i);
23
+ return e && (s.className = e), t != null && (s.textContent = t), n != null && (s.innerHTML = n), o && o.appendChild(s), s;
24
+ }
25
+ function _(i, { name: t, description: e }) {
26
+ r("div", {
27
+ className: "spot-header__title",
28
+ text: t,
29
+ parent: i
30
+ }), r("div", {
31
+ className: "spot-header__description",
32
+ text: e,
33
+ parent: i
34
+ });
35
+ }
36
+ function b(i, t = []) {
37
+ const e = r("ul", {
38
+ className: "spot-benefits__list",
39
+ parent: i
40
+ });
41
+ t.forEach((o) => {
42
+ const n = r("li", { parent: e });
43
+ n.innerHTML = `
44
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
45
+ <path d="M11.6666 3.5L5.24998 9.91667L2.33331 7"
46
+ stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
47
+ </svg>`, r("span", { text: o, parent: n });
48
+ });
49
+ }
50
+ function v(i, t = []) {
51
+ const e = r("div", {
52
+ className: "spot-table__container",
53
+ parent: i
54
+ }), o = r("table", {
55
+ className: "spot-refund__table spot-table--dynamic",
56
+ parent: e
57
+ }), n = r("thead", { parent: o }), s = r("tr", { parent: n });
58
+ r("th", { text: "When you cancel", parent: s }), r("th", { text: "You will receive", parent: s });
59
+ const a = r("tbody", { parent: o });
60
+ t.forEach(({ text: l, percent: p, amount: c }) => {
61
+ const d = r("tr", { parent: a });
62
+ r("td", { text: l, parent: d });
63
+ const f = p === "Not eligible for refund" ? "Not eligible for a refund" : `$${c} refund`;
64
+ r("td", { text: f, parent: d });
65
+ });
66
+ }
67
+ function y(i, t, e) {
68
+ const o = r("div", {
69
+ className: "spot-selection__options",
70
+ parent: i
71
+ }), n = r("label", {
72
+ className: `spot-selection__option ${e ? "selected" : ""}`,
73
+ parent: o
74
+ }), s = r("input", { parent: n });
75
+ s.type = "radio", s.name = "selection", s.value = "yes", e && (s.checked = !0), r("strong", {
76
+ text: `Yes, protect my booking for $${t}`,
77
+ parent: n
78
+ }), r("span", {
79
+ className: "spot-selection__recommended-tag",
80
+ text: "Recommended",
81
+ parent: n
82
+ });
83
+ const a = r("label", {
84
+ className: "spot-selection__option",
85
+ parent: o
86
+ }), l = r("input", { parent: a });
87
+ return l.type = "radio", l.name = "selection", l.value = "no", r("span", { text: "No, do not protect my booking", parent: a }), o;
88
+ }
89
+ function C(i, t) {
90
+ const e = r("div", {
91
+ className: "spot-footer__container",
92
+ parent: i
93
+ }), o = r("div", {
94
+ className: "spot-footer__terms",
95
+ parent: e
96
+ });
97
+ r("span", {
98
+ innerHTML: t.communication.legalDisclaimer,
99
+ parent: o
100
+ }), r("br", { parent: o }), r("a", {
101
+ href: t.communication.termsAndConditionsUrl,
102
+ className: "spot-footer__terms-link",
103
+ text: "Refund Guarantee Terms and Conditions",
104
+ parent: o
105
+ });
106
+ const n = r("p", {
107
+ className: "spot-footer__powered-by",
108
+ parent: e
109
+ });
110
+ return n.innerHTML = `
111
+ <svg width="145" height="28" viewBox="0 0 145 28" fill="none" xmlns="http://www.w3.org/2000/svg">
112
+ <rect width="145" height="28"/>
113
+ <rect x="-655" y="-270" width="819" height="325" rx="10"/>
114
+ <path d="M0 10C0 4.47715 4.47715 0 10 0H134.161C139.684 0 144.161 4.47715 144.161 10V18C144.161 23.5228 139.684 28 134.161 28H10C4.47716 28 0 23.5228 0 18V10Z" fill="#F3FD00"/>
115
+ <path d="M11.98 19V9.2H14.878C16.754 9.2 18.154 10.474 18.154 12.364C18.154 14.254 16.754 15.528 14.878 15.528H13.828V19H11.98ZM13.828 13.806H14.878C15.746 13.806 16.236 13.176 16.236 12.364C16.236 11.552 15.746 10.936 14.878 10.936H13.828V13.806ZM22.0258 19.196C20.0938 19.196 18.2178 17.894 18.2178 15.43C18.2178 12.952 20.0938 11.65 22.0258 11.65C23.9438 11.65 25.8198 12.952 25.8198 15.43C25.8198 17.894 23.9438 19.196 22.0258 19.196ZM20.0518 15.43C20.0518 16.774 20.8778 17.544 22.0258 17.544C23.1598 17.544 23.9858 16.774 23.9858 15.43C23.9858 14.072 23.1598 13.302 22.0258 13.302C20.8778 13.302 20.0518 14.072 20.0518 15.43ZM27.7226 19L25.2446 11.846H27.0926L28.7026 16.732L29.9486 11.846H31.7266L33.0146 16.746L34.5966 11.846H36.4026L33.9946 19H32.1186L30.8446 14.198L29.6266 19H27.7226ZM39.531 19.196C37.683 19.196 35.849 17.894 35.849 15.43C35.849 12.952 37.641 11.65 39.461 11.65C41.253 11.65 43.073 12.924 43.073 15.416V15.962H37.599C37.795 17.096 38.607 17.614 39.531 17.614C40.161 17.614 40.609 17.418 40.889 17.054H42.933C42.317 18.496 40.889 19.196 39.531 19.196ZM37.627 14.702H41.211C41.043 13.526 40.217 13.092 39.461 13.092C38.607 13.092 37.851 13.624 37.627 14.702ZM44.0159 19V11.846H45.7799V12.798C46.3539 12.028 47.2219 11.65 48.0759 11.65V13.47C46.5919 13.19 45.7799 13.834 45.7799 15.024V19H44.0159ZM51.967 19.196C50.119 19.196 48.285 17.894 48.285 15.43C48.285 12.952 50.077 11.65 51.897 11.65C53.689 11.65 55.509 12.924 55.509 15.416V15.962H50.035C50.231 17.096 51.043 17.614 51.967 17.614C52.597 17.614 53.045 17.418 53.325 17.054H55.369C54.753 18.496 53.325 19.196 51.967 19.196ZM50.063 14.702H53.647C53.479 13.526 52.653 13.092 51.897 13.092C51.043 13.092 50.287 13.624 50.063 14.702ZM59.4762 19.196C57.7542 19.196 56.1022 17.894 56.1022 15.43C56.1022 12.952 57.7542 11.65 59.4762 11.65C60.4842 11.65 61.3102 12.014 61.8562 12.714V9.2H63.6202V19H61.8562V18.146C61.3102 18.832 60.4842 19.196 59.4762 19.196ZM57.9362 15.43C57.9362 16.774 58.7622 17.544 59.8962 17.544C61.0442 17.544 61.8562 16.774 61.8562 15.43C61.8562 14.072 61.0442 13.302 59.8962 13.302C58.7622 13.302 57.9362 14.072 57.9362 15.43ZM72.526 19.196C71.518 19.196 70.692 18.832 70.146 18.146V19H68.382V9.2H70.146V12.714C70.692 12.014 71.518 11.65 72.526 11.65C74.248 11.65 75.9 12.952 75.9 15.43C75.9 17.894 74.248 19.196 72.526 19.196ZM70.146 15.43C70.146 16.774 70.958 17.544 72.106 17.544C73.254 17.544 74.066 16.774 74.066 15.43C74.066 14.072 73.254 13.302 72.106 13.302C70.958 13.302 70.146 14.072 70.146 15.43ZM76.9259 21.66L78.2699 18.342L75.4559 11.846H77.3879L79.2079 16.158L80.9299 11.846H82.7639L78.7599 21.66H76.9259Z" fill="#111820"/>
116
+ <path d="M87 15.5385C87 11.3751 90.3751 8 94.5385 8H124.867C129.03 8 132.405 11.3751 132.405 15.5385C132.405 19.7018 129.03 23.0769 124.867 23.0769H94.5385C90.3751 23.0769 87 19.7018 87 15.5385Z" fill="#F3FD00"/>
117
+ <g clip-path="url(#clip0_295_2094)">
118
+ <path d="M117.826 19.7575C116.253 19.7575 115.064 18.7369 115.064 17.2054V13.1218H113.674V11.2615H115.064V9.21918H117.172V11.2615H119.164V13.1218H117.172V17.2054C117.172 17.6501 117.373 17.8972 117.825 17.8972H119.164V19.7586H117.825M113.846 15.5591C113.846 18.4577 111.603 19.9892 109.309 19.9892C107.016 19.9892 104.757 18.4577 104.757 15.5591C104.757 12.6606 107 11.1126 109.309 11.1126C111.619 11.1126 113.846 12.6441 113.846 15.5591ZM111.653 15.5591C111.653 13.9615 110.665 13.0556 109.31 13.0556C107.956 13.0556 106.951 13.9615 106.951 15.5591C106.951 17.1568 107.939 18.0461 109.31 18.0461C110.682 18.0461 111.653 17.1403 111.653 15.5591ZM104.339 15.5591C104.339 18.4577 102.364 19.9892 100.305 19.9892C99.0996 19.9892 98.1127 19.561 97.46 18.7545V22.8877H95.3516V11.2605H97.46V12.3638C98.1127 11.5407 99.1006 11.1126 100.305 11.1126C102.364 11.1126 104.339 12.6441 104.339 15.5591ZM102.147 15.5591C102.147 13.9615 101.175 13.0556 99.8038 13.0556C98.4322 13.0556 97.461 13.9615 97.461 15.5591C97.461 17.1568 98.4322 18.0461 99.8038 18.0461C101.175 18.0461 102.147 17.1403 102.147 15.5591ZM91.0833 19.9892C93.0078 19.9892 94.8155 18.5404 94.8155 16.465C94.8155 12.0184 89.5099 13.6823 89.5099 11.3101C89.5099 10.6183 90.0123 10.1075 90.8153 10.1075C91.6183 10.1075 92.1039 10.5025 92.3214 11.2605H94.681C94.2637 9.05373 92.7744 8 90.8163 8C88.9749 8 87.2176 9.28433 87.2176 11.3597C87.2176 15.7732 92.5232 14.0773 92.5232 16.5146C92.5232 17.2395 91.9872 17.8817 91.0833 17.8817C90.1794 17.8817 89.5603 17.3874 89.3596 16.5643H87C87.3847 18.7379 88.8908 19.9892 91.0843 19.9892M126.313 19.9892C129.678 19.9892 132.406 17.3057 132.406 13.9946C132.406 10.6834 129.678 8 126.312 8C122.947 8 120.219 10.6834 120.219 13.9946C120.219 17.3057 122.947 19.9892 126.312 19.9892" fill="#111820"/>
119
+ </g>
120
+ <defs>
121
+ <clipPath id="clip0_295_2094">
122
+ <rect width="45.405" height="14.8867" fill="white" transform="translate(87 8)"/>
123
+ </clipPath>
124
+ </defs>
125
+ </svg>`, e;
126
+ }
127
+ const w = ":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}";
128
+ function k(i) {
129
+ const t = document.createElement("style");
130
+ t.textContent = i, document.head.appendChild(t);
131
+ }
132
+ k(w);
133
+ class E {
134
+ constructor(t = {}) {
135
+ this.options = {
136
+ location: "body",
137
+ showTable: !0,
138
+ optInSelected: !1,
139
+ apiConfig: { endpoint: "", partnerId: "" },
140
+ quoteRequestData: {},
141
+ callbacks: {},
142
+ ...t
143
+ }, this._onResize = this._updateLayout.bind(this), this.root = document.querySelector(this.options.location), this.currentSelection = this.options.optInSelected ? "yes" : null, this._init();
144
+ }
145
+ async _init() {
146
+ try {
147
+ const t = await g(
148
+ this.options.apiConfig.endpoint,
149
+ this.options.apiConfig.partnerId,
150
+ this.options.quoteRequestData
151
+ );
152
+ if (t.status !== "QUOTE_AVAILABLE") {
153
+ t.status === "NO_MATCHING_QUOTE" && this._emit("noMatchingQuote");
154
+ return;
155
+ }
156
+ this.quote = t.data, this._renderWidget(), this.options.optInSelected && this.options.callbacks.onOptIn && this.options.callbacks.onOptIn({
157
+ status: "QUOTE_ACCEPTED",
158
+ spotPrice: this.quote.spotPrice,
159
+ quoteId: this.quote.id
160
+ }), this.options.callbacks.onQuoteRetrieved && this.options.callbacks.onQuoteRetrieved(this.quote);
161
+ } catch (t) {
162
+ this._emit("error", t);
163
+ }
164
+ }
165
+ _renderWidget() {
166
+ this.container = document.createElement("div"), this.container.className = "spot-refund-guarantee", this.root.appendChild(this.container), Object.entries(this.options.theme || {}).forEach(
167
+ ([o, n]) => this.container.style.setProperty(o, n)
168
+ ), _(this.container, this.quote.communication);
169
+ const t = document.createElement("div");
170
+ t.className = "spot-content__wrapper", this.container.appendChild(t), b(t, this.quote.communication.bulletPoints), this.options.showTable && v(t, this.quote.payoutSchedule);
171
+ const e = y(
172
+ t,
173
+ this.quote.spotPrice,
174
+ this.options.optInSelected
175
+ );
176
+ t.appendChild(e), C(this.container, this.quote), window.addEventListener("resize", this._onResize), this._updateLayout(), this._setupOptionListeners(e);
177
+ }
178
+ _updateLayout() {
179
+ const t = window.matchMedia("(min-width: 768px)").matches;
180
+ this.container.querySelector(".spot-content__wrapper").classList.toggle("desktop-layout", t && this.options.showTable);
181
+ }
182
+ _setupOptionListeners(t) {
183
+ const e = t.querySelectorAll('input[type="radio"]'), o = t.querySelectorAll(".spot-selection__option");
184
+ e.forEach((n) => {
185
+ n.addEventListener("change", (s) => {
186
+ var l;
187
+ const a = s.target.value;
188
+ this.hideSelectionError(), this.currentSelection = a, o.forEach((p) => p.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({
189
+ status: "QUOTE_ACCEPTED",
190
+ spotPrice: this.quote.spotPrice,
191
+ quoteId: this.quote.id
192
+ }), a === "no" && this.options.callbacks.onOptOut && this.options.callbacks.onOptOut({
193
+ status: "QUOTE_DECLINED",
194
+ quoteId: this.quote.id
195
+ });
196
+ });
197
+ });
198
+ }
199
+ showSelectionError() {
200
+ var t;
201
+ if (!this.errorEl) {
202
+ this.errorEl = document.createElement("div"), this.errorEl.className = "spot-selection__error", this.errorEl.textContent = "Please make a selection";
203
+ const e = (t = this.container) == null ? void 0 : t.querySelector(
204
+ ".spot-selection__options"
205
+ );
206
+ e && e.insertAdjacentElement("afterend", this.errorEl);
207
+ }
208
+ this.errorEl.style.display = "block";
209
+ }
210
+ hideSelectionError() {
211
+ this.errorEl && (this.errorEl.style.display = "none");
212
+ }
213
+ validateSelection() {
214
+ if (!this.container) return !1;
215
+ const t = !!this.container.querySelector(
216
+ 'input[name="selection"]:checked'
217
+ );
218
+ return t ? this.hideSelectionError() : this.showSelectionError(), t;
219
+ }
220
+ getSelection() {
221
+ var t, e;
222
+ return {
223
+ selection: this.currentSelection,
224
+ quoteId: (t = this.quote) == null ? void 0 : t.id,
225
+ spotPrice: (e = this.quote) == null ? void 0 : e.spotPrice,
226
+ status: this.currentSelection === "yes" ? "QUOTE_ACCEPTED" : "QUOTE_DECLINED"
227
+ };
228
+ }
229
+ _emit(t, e) {
230
+ const o = this.options.callbacks[t];
231
+ o && o(e);
232
+ }
233
+ destroy() {
234
+ window.removeEventListener("resize", this._onResize), this.container && this.container.parentNode && this.container.parentNode.removeChild(this.container);
235
+ }
236
+ }
237
+ const H = ({ options: i }) => {
238
+ const t = h(null);
239
+ return u(() => {
240
+ if (t.current) {
241
+ const e = new E({
242
+ location: t.current,
243
+ ...i
244
+ });
245
+ return () => {
246
+ e.destroy();
247
+ };
248
+ }
249
+ }, [i]), /* @__PURE__ */ m.createElement("div", { ref: t });
250
+ };
251
+ export {
252
+ H as default
253
+ };
package/dist/react/react-spot-widget.umd.js ADDED
@@ -0,0 +1,20 @@
1
+ (function(a,d){typeof exports=="object"&&typeof module<"u"?module.exports=d(require("react")):typeof define=="function"&&define.amd?define(["react"],d):(a=typeof globalThis<"u"?globalThis:a||self,a.ReactSpotWidget=d(a.React))})(this,function(a){"use strict";async function d(i,t,e){try{const o=await fetch(i,{method:"POST",headers:{"Content-Type":"application/json","X-Spot-Partner-Id":t},body:JSON.stringify(e)});console.log("res: ",o);const n=await o.json();return console.log("body: ",n),o.ok?n:{status:"ERROR",responseBody:n}}catch(o){throw console.log("what"),console.error("Failed to fetch quote:",{payload:e,error:o}),new Error(o instanceof Error?o.message:"Unknown error occurred while fetching quote")}}function r(i,{text:t,className:e,parent:o,innerHTML:n}={}){const s=document.createElement(i);return e&&(s.className=e),t!=null&&(s.textContent=t),n!=null&&(s.innerHTML=n),o&&o.appendChild(s),s}function m(i,{name:t,description:e}){r("div",{className:"spot-header__title",text:t,parent:i}),r("div",{className:"spot-header__description",text:e,parent:i})}function h(i,t=[]){const e=r("ul",{className:"spot-benefits__list",parent:i});t.forEach(o=>{const n=r("li",{parent:e});n.innerHTML=`
2
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
3
+ <path d="M11.6666 3.5L5.24998 9.91667L2.33331 7"
4
+ stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
5
+ </svg>`,r("span",{text:o,parent:n})})}function u(i,t=[]){const e=r("div",{className:"spot-table__container",parent:i}),o=r("table",{className:"spot-refund__table spot-table--dynamic",parent:e}),n=r("thead",{parent:o}),s=r("tr",{parent:n});r("th",{text:"When you cancel",parent:s}),r("th",{text:"You will receive",parent:s});const l=r("tbody",{parent:o});t.forEach(({text:p,percent:c,amount:C})=>{const f=r("tr",{parent:l});r("td",{text:p,parent:f});const w=c==="Not eligible for refund"?"Not eligible for a refund":`$${C} refund`;r("td",{text:w,parent:f})})}function g(i,t,e){const o=r("div",{className:"spot-selection__options",parent:i}),n=r("label",{className:`spot-selection__option ${e?"selected":""}`,parent:o}),s=r("input",{parent:n});s.type="radio",s.name="selection",s.value="yes",e&&(s.checked=!0),r("strong",{text:`Yes, protect my booking for $${t}`,parent:n}),r("span",{className:"spot-selection__recommended-tag",text:"Recommended",parent:n});const l=r("label",{className:"spot-selection__option",parent:o}),p=r("input",{parent:l});return p.type="radio",p.name="selection",p.value="no",r("span",{text:"No, do not protect my booking",parent:l}),o}function _(i,t){const e=r("div",{className:"spot-footer__container",parent:i}),o=r("div",{className:"spot-footer__terms",parent:e});r("span",{innerHTML:t.communication.legalDisclaimer,parent:o}),r("br",{parent:o}),r("a",{href:t.communication.termsAndConditionsUrl,className:"spot-footer__terms-link",text:"Refund Guarantee Terms and Conditions",parent:o});const n=r("p",{className:"spot-footer__powered-by",parent:e});return n.innerHTML=`
6
+ <svg width="145" height="28" viewBox="0 0 145 28" fill="none" xmlns="http://www.w3.org/2000/svg">
7
+ <rect width="145" height="28"/>
8
+ <rect x="-655" y="-270" width="819" height="325" rx="10"/>
9
+ <path d="M0 10C0 4.47715 4.47715 0 10 0H134.161C139.684 0 144.161 4.47715 144.161 10V18C144.161 23.5228 139.684 28 134.161 28H10C4.47716 28 0 23.5228 0 18V10Z" fill="#F3FD00"/>
10
+ <path d="M11.98 19V9.2H14.878C16.754 9.2 18.154 10.474 18.154 12.364C18.154 14.254 16.754 15.528 14.878 15.528H13.828V19H11.98ZM13.828 13.806H14.878C15.746 13.806 16.236 13.176 16.236 12.364C16.236 11.552 15.746 10.936 14.878 10.936H13.828V13.806ZM22.0258 19.196C20.0938 19.196 18.2178 17.894 18.2178 15.43C18.2178 12.952 20.0938 11.65 22.0258 11.65C23.9438 11.65 25.8198 12.952 25.8198 15.43C25.8198 17.894 23.9438 19.196 22.0258 19.196ZM20.0518 15.43C20.0518 16.774 20.8778 17.544 22.0258 17.544C23.1598 17.544 23.9858 16.774 23.9858 15.43C23.9858 14.072 23.1598 13.302 22.0258 13.302C20.8778 13.302 20.0518 14.072 20.0518 15.43ZM27.7226 19L25.2446 11.846H27.0926L28.7026 16.732L29.9486 11.846H31.7266L33.0146 16.746L34.5966 11.846H36.4026L33.9946 19H32.1186L30.8446 14.198L29.6266 19H27.7226ZM39.531 19.196C37.683 19.196 35.849 17.894 35.849 15.43C35.849 12.952 37.641 11.65 39.461 11.65C41.253 11.65 43.073 12.924 43.073 15.416V15.962H37.599C37.795 17.096 38.607 17.614 39.531 17.614C40.161 17.614 40.609 17.418 40.889 17.054H42.933C42.317 18.496 40.889 19.196 39.531 19.196ZM37.627 14.702H41.211C41.043 13.526 40.217 13.092 39.461 13.092C38.607 13.092 37.851 13.624 37.627 14.702ZM44.0159 19V11.846H45.7799V12.798C46.3539 12.028 47.2219 11.65 48.0759 11.65V13.47C46.5919 13.19 45.7799 13.834 45.7799 15.024V19H44.0159ZM51.967 19.196C50.119 19.196 48.285 17.894 48.285 15.43C48.285 12.952 50.077 11.65 51.897 11.65C53.689 11.65 55.509 12.924 55.509 15.416V15.962H50.035C50.231 17.096 51.043 17.614 51.967 17.614C52.597 17.614 53.045 17.418 53.325 17.054H55.369C54.753 18.496 53.325 19.196 51.967 19.196ZM50.063 14.702H53.647C53.479 13.526 52.653 13.092 51.897 13.092C51.043 13.092 50.287 13.624 50.063 14.702ZM59.4762 19.196C57.7542 19.196 56.1022 17.894 56.1022 15.43C56.1022 12.952 57.7542 11.65 59.4762 11.65C60.4842 11.65 61.3102 12.014 61.8562 12.714V9.2H63.6202V19H61.8562V18.146C61.3102 18.832 60.4842 19.196 59.4762 19.196ZM57.9362 15.43C57.9362 16.774 58.7622 17.544 59.8962 17.544C61.0442 17.544 61.8562 16.774 61.8562 15.43C61.8562 14.072 61.0442 13.302 59.8962 13.302C58.7622 13.302 57.9362 14.072 57.9362 15.43ZM72.526 19.196C71.518 19.196 70.692 18.832 70.146 18.146V19H68.382V9.2H70.146V12.714C70.692 12.014 71.518 11.65 72.526 11.65C74.248 11.65 75.9 12.952 75.9 15.43C75.9 17.894 74.248 19.196 72.526 19.196ZM70.146 15.43C70.146 16.774 70.958 17.544 72.106 17.544C73.254 17.544 74.066 16.774 74.066 15.43C74.066 14.072 73.254 13.302 72.106 13.302C70.958 13.302 70.146 14.072 70.146 15.43ZM76.9259 21.66L78.2699 18.342L75.4559 11.846H77.3879L79.2079 16.158L80.9299 11.846H82.7639L78.7599 21.66H76.9259Z" fill="#111820"/>
11
+ <path d="M87 15.5385C87 11.3751 90.3751 8 94.5385 8H124.867C129.03 8 132.405 11.3751 132.405 15.5385C132.405 19.7018 129.03 23.0769 124.867 23.0769H94.5385C90.3751 23.0769 87 19.7018 87 15.5385Z" fill="#F3FD00"/>
12
+ <g clip-path="url(#clip0_295_2094)">
13
+ <path d="M117.826 19.7575C116.253 19.7575 115.064 18.7369 115.064 17.2054V13.1218H113.674V11.2615H115.064V9.21918H117.172V11.2615H119.164V13.1218H117.172V17.2054C117.172 17.6501 117.373 17.8972 117.825 17.8972H119.164V19.7586H117.825M113.846 15.5591C113.846 18.4577 111.603 19.9892 109.309 19.9892C107.016 19.9892 104.757 18.4577 104.757 15.5591C104.757 12.6606 107 11.1126 109.309 11.1126C111.619 11.1126 113.846 12.6441 113.846 15.5591ZM111.653 15.5591C111.653 13.9615 110.665 13.0556 109.31 13.0556C107.956 13.0556 106.951 13.9615 106.951 15.5591C106.951 17.1568 107.939 18.0461 109.31 18.0461C110.682 18.0461 111.653 17.1403 111.653 15.5591ZM104.339 15.5591C104.339 18.4577 102.364 19.9892 100.305 19.9892C99.0996 19.9892 98.1127 19.561 97.46 18.7545V22.8877H95.3516V11.2605H97.46V12.3638C98.1127 11.5407 99.1006 11.1126 100.305 11.1126C102.364 11.1126 104.339 12.6441 104.339 15.5591ZM102.147 15.5591C102.147 13.9615 101.175 13.0556 99.8038 13.0556C98.4322 13.0556 97.461 13.9615 97.461 15.5591C97.461 17.1568 98.4322 18.0461 99.8038 18.0461C101.175 18.0461 102.147 17.1403 102.147 15.5591ZM91.0833 19.9892C93.0078 19.9892 94.8155 18.5404 94.8155 16.465C94.8155 12.0184 89.5099 13.6823 89.5099 11.3101C89.5099 10.6183 90.0123 10.1075 90.8153 10.1075C91.6183 10.1075 92.1039 10.5025 92.3214 11.2605H94.681C94.2637 9.05373 92.7744 8 90.8163 8C88.9749 8 87.2176 9.28433 87.2176 11.3597C87.2176 15.7732 92.5232 14.0773 92.5232 16.5146C92.5232 17.2395 91.9872 17.8817 91.0833 17.8817C90.1794 17.8817 89.5603 17.3874 89.3596 16.5643H87C87.3847 18.7379 88.8908 19.9892 91.0843 19.9892M126.313 19.9892C129.678 19.9892 132.406 17.3057 132.406 13.9946C132.406 10.6834 129.678 8 126.312 8C122.947 8 120.219 10.6834 120.219 13.9946C120.219 17.3057 122.947 19.9892 126.312 19.9892" fill="#111820"/>
14
+ </g>
15
+ <defs>
16
+ <clipPath id="clip0_295_2094">
17
+ <rect width="45.405" height="14.8867" fill="white" transform="translate(87 8)"/>
18
+ </clipPath>
19
+ </defs>
20
+ </svg>`,e}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 v(i){const t=document.createElement("style");t.textContent=i,document.head.appendChild(t)}v(b);class y{constructor(t={}){this.options={location:"body",showTable:!0,optInSelected:!1,apiConfig:{endpoint:"",partnerId:""},quoteRequestData:{},callbacks:{},...t},this._onResize=this._updateLayout.bind(this),this.root=document.querySelector(this.options.location),this.currentSelection=this.options.optInSelected?"yes":null,this._init()}async _init(){try{const t=await d(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(([o,n])=>this.container.style.setProperty(o,n)),m(this.container,this.quote.communication);const t=document.createElement("div");t.className="spot-content__wrapper",this.container.appendChild(t),h(t,this.quote.communication.bulletPoints),this.options.showTable&&u(t,this.quote.payoutSchedule);const e=g(t,this.quote.spotPrice,this.options.optInSelected);t.appendChild(e),_(this.container,this.quote),window.addEventListener("resize",this._onResize),this._updateLayout(),this._setupOptionListeners(e)}_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 e=t.querySelectorAll('input[type="radio"]'),o=t.querySelectorAll(".spot-selection__option");e.forEach(n=>{n.addEventListener("change",s=>{var p;const l=s.target.value;this.hideSelectionError(),this.currentSelection=l,o.forEach(c=>c.classList.remove("selected")),(p=s.target.closest(".spot-selection__option"))==null||p.classList.add("selected"),l==="yes"&&this.options.callbacks.onOptIn&&this.options.callbacks.onOptIn({status:"QUOTE_ACCEPTED",spotPrice:this.quote.spotPrice,quoteId:this.quote.id}),l==="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 e=(t=this.container)==null?void 0:t.querySelector(".spot-selection__options");e&&e.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,e;return{selection:this.currentSelection,quoteId:(t=this.quote)==null?void 0:t.id,spotPrice:(e=this.quote)==null?void 0:e.spotPrice,status:this.currentSelection==="yes"?"QUOTE_ACCEPTED":"QUOTE_DECLINED"}}_emit(t,e){const o=this.options.callbacks[t];o&&o(e)}destroy(){window.removeEventListener("resize",this._onResize),this.container&&this.container.parentNode&&this.container.parentNode.removeChild(this.container)}}return({options:i})=>{const t=a.useRef(null);return a.useEffect(()=>{if(t.current){const e=new y({location:t.current,...i});return()=>{e.destroy()}}},[i]),a.createElement("div",{ref:t})}});
package/dist/vanilla/spot-widget.es.js ADDED
@@ -0,0 +1,238 @@
1
+ async function m(n, t, e) {
2
+ try {
3
+ const o = await fetch(n, {
4
+ method: "POST",
5
+ headers: {
6
+ "Content-Type": "application/json",
7
+ "X-Spot-Partner-Id": t
8
+ },
9
+ body: JSON.stringify(e)
10
+ });
11
+ console.log("res: ", o);
12
+ const i = await o.json();
13
+ return console.log("body: ", i), o.ok ? i : { status: "ERROR", responseBody: i };
14
+ } catch (o) {
15
+ throw console.log("what"), console.error("Failed to fetch quote:", { payload: e, error: o }), new Error(
16
+ o instanceof Error ? o.message : "Unknown error occurred while fetching quote"
17
+ );
18
+ }
19
+ }
20
+ function r(n, { text: t, className: e, parent: o, innerHTML: i } = {}) {
21
+ const s = document.createElement(n);
22
+ return e && (s.className = e), t != null && (s.textContent = t), i != null && (s.innerHTML = i), o && o.appendChild(s), s;
23
+ }
24
+ function h(n, { name: t, description: e }) {
25
+ r("div", {
26
+ className: "spot-header__title",
27
+ text: t,
28
+ parent: n
29
+ }), r("div", {
30
+ className: "spot-header__description",
31
+ text: e,
32
+ parent: n
33
+ });
34
+ }
35
+ function u(n, t = []) {
36
+ const e = r("ul", {
37
+ className: "spot-benefits__list",
38
+ parent: n
39
+ });
40
+ t.forEach((o) => {
41
+ const i = r("li", { parent: e });
42
+ i.innerHTML = `
43
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
44
+ <path d="M11.6666 3.5L5.24998 9.91667L2.33331 7"
45
+ stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
46
+ </svg>`, r("span", { text: o, parent: i });
47
+ });
48
+ }
49
+ function g(n, t = []) {
50
+ const e = r("div", {
51
+ className: "spot-table__container",
52
+ parent: n
53
+ }), o = r("table", {
54
+ className: "spot-refund__table spot-table--dynamic",
55
+ parent: e
56
+ }), i = r("thead", { parent: o }), s = r("tr", { parent: i });
57
+ r("th", { text: "When you cancel", parent: s }), r("th", { text: "You will receive", parent: s });
58
+ const a = r("tbody", { parent: o });
59
+ t.forEach(({ text: l, percent: p, amount: c }) => {
60
+ const d = r("tr", { parent: a });
61
+ r("td", { text: l, parent: d });
62
+ const f = p === "Not eligible for refund" ? "Not eligible for a refund" : `$${c} refund`;
63
+ r("td", { text: f, parent: d });
64
+ });
65
+ }
66
+ function _(n, t, e) {
67
+ const o = r("div", {
68
+ className: "spot-selection__options",
69
+ parent: n
70
+ }), i = r("label", {
71
+ className: `spot-selection__option ${e ? "selected" : ""}`,
72
+ parent: o
73
+ }), s = r("input", { parent: i });
74
+ s.type = "radio", s.name = "selection", s.value = "yes", e && (s.checked = !0), r("strong", {
75
+ text: `Yes, protect my booking for $${t}`,
76
+ parent: i
77
+ }), r("span", {
78
+ className: "spot-selection__recommended-tag",
79
+ text: "Recommended",
80
+ parent: i
81
+ });
82
+ const a = r("label", {
83
+ className: "spot-selection__option",
84
+ parent: o
85
+ }), l = r("input", { parent: a });
86
+ return l.type = "radio", l.name = "selection", l.value = "no", r("span", { text: "No, do not protect my booking", parent: a }), o;
87
+ }
88
+ function b(n, t) {
89
+ const e = r("div", {
90
+ className: "spot-footer__container",
91
+ parent: n
92
+ }), o = r("div", {
93
+ className: "spot-footer__terms",
94
+ parent: e
95
+ });
96
+ r("span", {
97
+ innerHTML: t.communication.legalDisclaimer,
98
+ parent: o
99
+ }), r("br", { parent: o }), r("a", {
100
+ href: t.communication.termsAndConditionsUrl,
101
+ className: "spot-footer__terms-link",
102
+ text: "Refund Guarantee Terms and Conditions",
103
+ parent: o
104
+ });
105
+ const i = r("p", {
106
+ className: "spot-footer__powered-by",
107
+ parent: e
108
+ });
109
+ return i.innerHTML = `
110
+ <svg width="145" height="28" viewBox="0 0 145 28" fill="none" xmlns="http://www.w3.org/2000/svg">
111
+ <rect width="145" height="28"/>
112
+ <rect x="-655" y="-270" width="819" height="325" rx="10"/>
113
+ <path d="M0 10C0 4.47715 4.47715 0 10 0H134.161C139.684 0 144.161 4.47715 144.161 10V18C144.161 23.5228 139.684 28 134.161 28H10C4.47716 28 0 23.5228 0 18V10Z" fill="#F3FD00"/>
114
+ <path d="M11.98 19V9.2H14.878C16.754 9.2 18.154 10.474 18.154 12.364C18.154 14.254 16.754 15.528 14.878 15.528H13.828V19H11.98ZM13.828 13.806H14.878C15.746 13.806 16.236 13.176 16.236 12.364C16.236 11.552 15.746 10.936 14.878 10.936H13.828V13.806ZM22.0258 19.196C20.0938 19.196 18.2178 17.894 18.2178 15.43C18.2178 12.952 20.0938 11.65 22.0258 11.65C23.9438 11.65 25.8198 12.952 25.8198 15.43C25.8198 17.894 23.9438 19.196 22.0258 19.196ZM20.0518 15.43C20.0518 16.774 20.8778 17.544 22.0258 17.544C23.1598 17.544 23.9858 16.774 23.9858 15.43C23.9858 14.072 23.1598 13.302 22.0258 13.302C20.8778 13.302 20.0518 14.072 20.0518 15.43ZM27.7226 19L25.2446 11.846H27.0926L28.7026 16.732L29.9486 11.846H31.7266L33.0146 16.746L34.5966 11.846H36.4026L33.9946 19H32.1186L30.8446 14.198L29.6266 19H27.7226ZM39.531 19.196C37.683 19.196 35.849 17.894 35.849 15.43C35.849 12.952 37.641 11.65 39.461 11.65C41.253 11.65 43.073 12.924 43.073 15.416V15.962H37.599C37.795 17.096 38.607 17.614 39.531 17.614C40.161 17.614 40.609 17.418 40.889 17.054H42.933C42.317 18.496 40.889 19.196 39.531 19.196ZM37.627 14.702H41.211C41.043 13.526 40.217 13.092 39.461 13.092C38.607 13.092 37.851 13.624 37.627 14.702ZM44.0159 19V11.846H45.7799V12.798C46.3539 12.028 47.2219 11.65 48.0759 11.65V13.47C46.5919 13.19 45.7799 13.834 45.7799 15.024V19H44.0159ZM51.967 19.196C50.119 19.196 48.285 17.894 48.285 15.43C48.285 12.952 50.077 11.65 51.897 11.65C53.689 11.65 55.509 12.924 55.509 15.416V15.962H50.035C50.231 17.096 51.043 17.614 51.967 17.614C52.597 17.614 53.045 17.418 53.325 17.054H55.369C54.753 18.496 53.325 19.196 51.967 19.196ZM50.063 14.702H53.647C53.479 13.526 52.653 13.092 51.897 13.092C51.043 13.092 50.287 13.624 50.063 14.702ZM59.4762 19.196C57.7542 19.196 56.1022 17.894 56.1022 15.43C56.1022 12.952 57.7542 11.65 59.4762 11.65C60.4842 11.65 61.3102 12.014 61.8562 12.714V9.2H63.6202V19H61.8562V18.146C61.3102 18.832 60.4842 19.196 59.4762 19.196ZM57.9362 15.43C57.9362 16.774 58.7622 17.544 59.8962 17.544C61.0442 17.544 61.8562 16.774 61.8562 15.43C61.8562 14.072 61.0442 13.302 59.8962 13.302C58.7622 13.302 57.9362 14.072 57.9362 15.43ZM72.526 19.196C71.518 19.196 70.692 18.832 70.146 18.146V19H68.382V9.2H70.146V12.714C70.692 12.014 71.518 11.65 72.526 11.65C74.248 11.65 75.9 12.952 75.9 15.43C75.9 17.894 74.248 19.196 72.526 19.196ZM70.146 15.43C70.146 16.774 70.958 17.544 72.106 17.544C73.254 17.544 74.066 16.774 74.066 15.43C74.066 14.072 73.254 13.302 72.106 13.302C70.958 13.302 70.146 14.072 70.146 15.43ZM76.9259 21.66L78.2699 18.342L75.4559 11.846H77.3879L79.2079 16.158L80.9299 11.846H82.7639L78.7599 21.66H76.9259Z" fill="#111820"/>
115
+ <path d="M87 15.5385C87 11.3751 90.3751 8 94.5385 8H124.867C129.03 8 132.405 11.3751 132.405 15.5385C132.405 19.7018 129.03 23.0769 124.867 23.0769H94.5385C90.3751 23.0769 87 19.7018 87 15.5385Z" fill="#F3FD00"/>
116
+ <g clip-path="url(#clip0_295_2094)">
117
+ <path d="M117.826 19.7575C116.253 19.7575 115.064 18.7369 115.064 17.2054V13.1218H113.674V11.2615H115.064V9.21918H117.172V11.2615H119.164V13.1218H117.172V17.2054C117.172 17.6501 117.373 17.8972 117.825 17.8972H119.164V19.7586H117.825M113.846 15.5591C113.846 18.4577 111.603 19.9892 109.309 19.9892C107.016 19.9892 104.757 18.4577 104.757 15.5591C104.757 12.6606 107 11.1126 109.309 11.1126C111.619 11.1126 113.846 12.6441 113.846 15.5591ZM111.653 15.5591C111.653 13.9615 110.665 13.0556 109.31 13.0556C107.956 13.0556 106.951 13.9615 106.951 15.5591C106.951 17.1568 107.939 18.0461 109.31 18.0461C110.682 18.0461 111.653 17.1403 111.653 15.5591ZM104.339 15.5591C104.339 18.4577 102.364 19.9892 100.305 19.9892C99.0996 19.9892 98.1127 19.561 97.46 18.7545V22.8877H95.3516V11.2605H97.46V12.3638C98.1127 11.5407 99.1006 11.1126 100.305 11.1126C102.364 11.1126 104.339 12.6441 104.339 15.5591ZM102.147 15.5591C102.147 13.9615 101.175 13.0556 99.8038 13.0556C98.4322 13.0556 97.461 13.9615 97.461 15.5591C97.461 17.1568 98.4322 18.0461 99.8038 18.0461C101.175 18.0461 102.147 17.1403 102.147 15.5591ZM91.0833 19.9892C93.0078 19.9892 94.8155 18.5404 94.8155 16.465C94.8155 12.0184 89.5099 13.6823 89.5099 11.3101C89.5099 10.6183 90.0123 10.1075 90.8153 10.1075C91.6183 10.1075 92.1039 10.5025 92.3214 11.2605H94.681C94.2637 9.05373 92.7744 8 90.8163 8C88.9749 8 87.2176 9.28433 87.2176 11.3597C87.2176 15.7732 92.5232 14.0773 92.5232 16.5146C92.5232 17.2395 91.9872 17.8817 91.0833 17.8817C90.1794 17.8817 89.5603 17.3874 89.3596 16.5643H87C87.3847 18.7379 88.8908 19.9892 91.0843 19.9892M126.313 19.9892C129.678 19.9892 132.406 17.3057 132.406 13.9946C132.406 10.6834 129.678 8 126.312 8C122.947 8 120.219 10.6834 120.219 13.9946C120.219 17.3057 122.947 19.9892 126.312 19.9892" fill="#111820"/>
118
+ </g>
119
+ <defs>
120
+ <clipPath id="clip0_295_2094">
121
+ <rect width="45.405" height="14.8867" fill="white" transform="translate(87 8)"/>
122
+ </clipPath>
123
+ </defs>
124
+ </svg>`, e;
125
+ }
126
+ const v = ":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}";
127
+ function C(n) {
128
+ const t = document.createElement("style");
129
+ t.textContent = n, document.head.appendChild(t);
130
+ }
131
+ C(v);
132
+ class y {
133
+ constructor(t = {}) {
134
+ this.options = {
135
+ location: "body",
136
+ showTable: !0,
137
+ optInSelected: !1,
138
+ apiConfig: { endpoint: "", partnerId: "" },
139
+ quoteRequestData: {},
140
+ callbacks: {},
141
+ ...t
142
+ }, this._onResize = this._updateLayout.bind(this), this.root = document.querySelector(this.options.location), this.currentSelection = this.options.optInSelected ? "yes" : null, this._init();
143
+ }
144
+ async _init() {
145
+ try {
146
+ const t = await m(
147
+ this.options.apiConfig.endpoint,
148
+ this.options.apiConfig.partnerId,
149
+ this.options.quoteRequestData
150
+ );
151
+ if (t.status !== "QUOTE_AVAILABLE") {
152
+ t.status === "NO_MATCHING_QUOTE" && this._emit("noMatchingQuote");
153
+ return;
154
+ }
155
+ this.quote = t.data, this._renderWidget(), this.options.optInSelected && this.options.callbacks.onOptIn && this.options.callbacks.onOptIn({
156
+ status: "QUOTE_ACCEPTED",
157
+ spotPrice: this.quote.spotPrice,
158
+ quoteId: this.quote.id
159
+ }), this.options.callbacks.onQuoteRetrieved && this.options.callbacks.onQuoteRetrieved(this.quote);
160
+ } catch (t) {
161
+ this._emit("error", t);
162
+ }
163
+ }
164
+ _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
+ ([o, i]) => this.container.style.setProperty(o, i)
167
+ ), h(this.container, this.quote.communication);
168
+ const t = document.createElement("div");
169
+ 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 e = _(
171
+ t,
172
+ this.quote.spotPrice,
173
+ this.options.optInSelected
174
+ );
175
+ t.appendChild(e), b(this.container, this.quote), window.addEventListener("resize", this._onResize), this._updateLayout(), this._setupOptionListeners(e);
176
+ }
177
+ _updateLayout() {
178
+ const t = window.matchMedia("(min-width: 768px)").matches;
179
+ this.container.querySelector(".spot-content__wrapper").classList.toggle("desktop-layout", t && this.options.showTable);
180
+ }
181
+ _setupOptionListeners(t) {
182
+ const e = t.querySelectorAll('input[type="radio"]'), o = t.querySelectorAll(".spot-selection__option");
183
+ e.forEach((i) => {
184
+ i.addEventListener("change", (s) => {
185
+ var l;
186
+ const a = s.target.value;
187
+ this.hideSelectionError(), this.currentSelection = a, o.forEach((p) => p.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({
188
+ status: "QUOTE_ACCEPTED",
189
+ spotPrice: this.quote.spotPrice,
190
+ quoteId: this.quote.id
191
+ }), a === "no" && this.options.callbacks.onOptOut && this.options.callbacks.onOptOut({
192
+ status: "QUOTE_DECLINED",
193
+ quoteId: this.quote.id
194
+ });
195
+ });
196
+ });
197
+ }
198
+ showSelectionError() {
199
+ var t;
200
+ if (!this.errorEl) {
201
+ this.errorEl = document.createElement("div"), this.errorEl.className = "spot-selection__error", this.errorEl.textContent = "Please make a selection";
202
+ const e = (t = this.container) == null ? void 0 : t.querySelector(
203
+ ".spot-selection__options"
204
+ );
205
+ e && e.insertAdjacentElement("afterend", this.errorEl);
206
+ }
207
+ this.errorEl.style.display = "block";
208
+ }
209
+ hideSelectionError() {
210
+ this.errorEl && (this.errorEl.style.display = "none");
211
+ }
212
+ validateSelection() {
213
+ if (!this.container) return !1;
214
+ const t = !!this.container.querySelector(
215
+ 'input[name="selection"]:checked'
216
+ );
217
+ return t ? this.hideSelectionError() : this.showSelectionError(), t;
218
+ }
219
+ getSelection() {
220
+ var t, e;
221
+ return {
222
+ selection: this.currentSelection,
223
+ quoteId: (t = this.quote) == null ? void 0 : t.id,
224
+ spotPrice: (e = this.quote) == null ? void 0 : e.spotPrice,
225
+ status: this.currentSelection === "yes" ? "QUOTE_ACCEPTED" : "QUOTE_DECLINED"
226
+ };
227
+ }
228
+ _emit(t, e) {
229
+ const o = this.options.callbacks[t];
230
+ o && o(e);
231
+ }
232
+ destroy() {
233
+ window.removeEventListener("resize", this._onResize), this.container && this.container.parentNode && this.container.parentNode.removeChild(this.container);
234
+ }
235
+ }
236
+ export {
237
+ y as default
238
+ };
package/dist/vanilla/spot-widget.umd.js ADDED
@@ -0,0 +1,20 @@
1
+ (function(p,e){typeof exports=="object"&&typeof module<"u"?module.exports=e():typeof define=="function"&&define.amd?define(e):(p=typeof globalThis<"u"?globalThis:p||self,p.SpotWidget=e())})(this,function(){"use strict";async function p(n,t,o){try{const r=await fetch(n,{method:"POST",headers:{"Content-Type":"application/json","X-Spot-Partner-Id":t},body:JSON.stringify(o)});console.log("res: ",r);const i=await r.json();return console.log("body: ",i),r.ok?i:{status:"ERROR",responseBody:i}}catch(r){throw console.log("what"),console.error("Failed to fetch quote:",{payload:o,error:r}),new Error(r instanceof Error?r.message:"Unknown error occurred while fetching quote")}}function e(n,{text:t,className:o,parent:r,innerHTML:i}={}){const s=document.createElement(n);return o&&(s.className=o),t!=null&&(s.textContent=t),i!=null&&(s.innerHTML=i),r&&r.appendChild(s),s}function f(n,{name:t,description:o}){e("div",{className:"spot-header__title",text:t,parent:n}),e("div",{className:"spot-header__description",text:o,parent:n})}function m(n,t=[]){const o=e("ul",{className:"spot-benefits__list",parent:n});t.forEach(r=>{const i=e("li",{parent:o});i.innerHTML=`
2
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
3
+ <path d="M11.6666 3.5L5.24998 9.91667L2.33331 7"
4
+ stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
5
+ </svg>`,e("span",{text:r,parent:i})})}function h(n,t=[]){const o=e("div",{className:"spot-table__container",parent:n}),r=e("table",{className:"spot-refund__table spot-table--dynamic",parent:o}),i=e("thead",{parent:r}),s=e("tr",{parent:i});e("th",{text:"When you cancel",parent:s}),e("th",{text:"You will receive",parent:s});const a=e("tbody",{parent:r});t.forEach(({text:l,percent:d,amount:y})=>{const c=e("tr",{parent:a});e("td",{text:l,parent:c});const C=d==="Not eligible for refund"?"Not eligible for a refund":`$${y} refund`;e("td",{text:C,parent:c})})}function u(n,t,o){const r=e("div",{className:"spot-selection__options",parent:n}),i=e("label",{className:`spot-selection__option ${o?"selected":""}`,parent:r}),s=e("input",{parent:i});s.type="radio",s.name="selection",s.value="yes",o&&(s.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}),l=e("input",{parent:a});return l.type="radio",l.name="selection",l.value="no",e("span",{text:"No, do not protect my booking",parent:a}),r}function g(n,t){const o=e("div",{className:"spot-footer__container",parent:n}),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
+ <svg width="145" height="28" viewBox="0 0 145 28" fill="none" xmlns="http://www.w3.org/2000/svg">
7
+ <rect width="145" height="28"/>
8
+ <rect x="-655" y="-270" width="819" height="325" rx="10"/>
9
+ <path d="M0 10C0 4.47715 4.47715 0 10 0H134.161C139.684 0 144.161 4.47715 144.161 10V18C144.161 23.5228 139.684 28 134.161 28H10C4.47716 28 0 23.5228 0 18V10Z" fill="#F3FD00"/>
10
+ <path d="M11.98 19V9.2H14.878C16.754 9.2 18.154 10.474 18.154 12.364C18.154 14.254 16.754 15.528 14.878 15.528H13.828V19H11.98ZM13.828 13.806H14.878C15.746 13.806 16.236 13.176 16.236 12.364C16.236 11.552 15.746 10.936 14.878 10.936H13.828V13.806ZM22.0258 19.196C20.0938 19.196 18.2178 17.894 18.2178 15.43C18.2178 12.952 20.0938 11.65 22.0258 11.65C23.9438 11.65 25.8198 12.952 25.8198 15.43C25.8198 17.894 23.9438 19.196 22.0258 19.196ZM20.0518 15.43C20.0518 16.774 20.8778 17.544 22.0258 17.544C23.1598 17.544 23.9858 16.774 23.9858 15.43C23.9858 14.072 23.1598 13.302 22.0258 13.302C20.8778 13.302 20.0518 14.072 20.0518 15.43ZM27.7226 19L25.2446 11.846H27.0926L28.7026 16.732L29.9486 11.846H31.7266L33.0146 16.746L34.5966 11.846H36.4026L33.9946 19H32.1186L30.8446 14.198L29.6266 19H27.7226ZM39.531 19.196C37.683 19.196 35.849 17.894 35.849 15.43C35.849 12.952 37.641 11.65 39.461 11.65C41.253 11.65 43.073 12.924 43.073 15.416V15.962H37.599C37.795 17.096 38.607 17.614 39.531 17.614C40.161 17.614 40.609 17.418 40.889 17.054H42.933C42.317 18.496 40.889 19.196 39.531 19.196ZM37.627 14.702H41.211C41.043 13.526 40.217 13.092 39.461 13.092C38.607 13.092 37.851 13.624 37.627 14.702ZM44.0159 19V11.846H45.7799V12.798C46.3539 12.028 47.2219 11.65 48.0759 11.65V13.47C46.5919 13.19 45.7799 13.834 45.7799 15.024V19H44.0159ZM51.967 19.196C50.119 19.196 48.285 17.894 48.285 15.43C48.285 12.952 50.077 11.65 51.897 11.65C53.689 11.65 55.509 12.924 55.509 15.416V15.962H50.035C50.231 17.096 51.043 17.614 51.967 17.614C52.597 17.614 53.045 17.418 53.325 17.054H55.369C54.753 18.496 53.325 19.196 51.967 19.196ZM50.063 14.702H53.647C53.479 13.526 52.653 13.092 51.897 13.092C51.043 13.092 50.287 13.624 50.063 14.702ZM59.4762 19.196C57.7542 19.196 56.1022 17.894 56.1022 15.43C56.1022 12.952 57.7542 11.65 59.4762 11.65C60.4842 11.65 61.3102 12.014 61.8562 12.714V9.2H63.6202V19H61.8562V18.146C61.3102 18.832 60.4842 19.196 59.4762 19.196ZM57.9362 15.43C57.9362 16.774 58.7622 17.544 59.8962 17.544C61.0442 17.544 61.8562 16.774 61.8562 15.43C61.8562 14.072 61.0442 13.302 59.8962 13.302C58.7622 13.302 57.9362 14.072 57.9362 15.43ZM72.526 19.196C71.518 19.196 70.692 18.832 70.146 18.146V19H68.382V9.2H70.146V12.714C70.692 12.014 71.518 11.65 72.526 11.65C74.248 11.65 75.9 12.952 75.9 15.43C75.9 17.894 74.248 19.196 72.526 19.196ZM70.146 15.43C70.146 16.774 70.958 17.544 72.106 17.544C73.254 17.544 74.066 16.774 74.066 15.43C74.066 14.072 73.254 13.302 72.106 13.302C70.958 13.302 70.146 14.072 70.146 15.43ZM76.9259 21.66L78.2699 18.342L75.4559 11.846H77.3879L79.2079 16.158L80.9299 11.846H82.7639L78.7599 21.66H76.9259Z" fill="#111820"/>
11
+ <path d="M87 15.5385C87 11.3751 90.3751 8 94.5385 8H124.867C129.03 8 132.405 11.3751 132.405 15.5385C132.405 19.7018 129.03 23.0769 124.867 23.0769H94.5385C90.3751 23.0769 87 19.7018 87 15.5385Z" fill="#F3FD00"/>
12
+ <g clip-path="url(#clip0_295_2094)">
13
+ <path d="M117.826 19.7575C116.253 19.7575 115.064 18.7369 115.064 17.2054V13.1218H113.674V11.2615H115.064V9.21918H117.172V11.2615H119.164V13.1218H117.172V17.2054C117.172 17.6501 117.373 17.8972 117.825 17.8972H119.164V19.7586H117.825M113.846 15.5591C113.846 18.4577 111.603 19.9892 109.309 19.9892C107.016 19.9892 104.757 18.4577 104.757 15.5591C104.757 12.6606 107 11.1126 109.309 11.1126C111.619 11.1126 113.846 12.6441 113.846 15.5591ZM111.653 15.5591C111.653 13.9615 110.665 13.0556 109.31 13.0556C107.956 13.0556 106.951 13.9615 106.951 15.5591C106.951 17.1568 107.939 18.0461 109.31 18.0461C110.682 18.0461 111.653 17.1403 111.653 15.5591ZM104.339 15.5591C104.339 18.4577 102.364 19.9892 100.305 19.9892C99.0996 19.9892 98.1127 19.561 97.46 18.7545V22.8877H95.3516V11.2605H97.46V12.3638C98.1127 11.5407 99.1006 11.1126 100.305 11.1126C102.364 11.1126 104.339 12.6441 104.339 15.5591ZM102.147 15.5591C102.147 13.9615 101.175 13.0556 99.8038 13.0556C98.4322 13.0556 97.461 13.9615 97.461 15.5591C97.461 17.1568 98.4322 18.0461 99.8038 18.0461C101.175 18.0461 102.147 17.1403 102.147 15.5591ZM91.0833 19.9892C93.0078 19.9892 94.8155 18.5404 94.8155 16.465C94.8155 12.0184 89.5099 13.6823 89.5099 11.3101C89.5099 10.6183 90.0123 10.1075 90.8153 10.1075C91.6183 10.1075 92.1039 10.5025 92.3214 11.2605H94.681C94.2637 9.05373 92.7744 8 90.8163 8C88.9749 8 87.2176 9.28433 87.2176 11.3597C87.2176 15.7732 92.5232 14.0773 92.5232 16.5146C92.5232 17.2395 91.9872 17.8817 91.0833 17.8817C90.1794 17.8817 89.5603 17.3874 89.3596 16.5643H87C87.3847 18.7379 88.8908 19.9892 91.0843 19.9892M126.313 19.9892C129.678 19.9892 132.406 17.3057 132.406 13.9946C132.406 10.6834 129.678 8 126.312 8C122.947 8 120.219 10.6834 120.219 13.9946C120.219 17.3057 122.947 19.9892 126.312 19.9892" fill="#111820"/>
14
+ </g>
15
+ <defs>
16
+ <clipPath id="clip0_295_2094">
17
+ <rect width="45.405" height="14.8867" fill="white" transform="translate(87 8)"/>
18
+ </clipPath>
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=document.querySelector(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});
package/dist/vue/vue-spot-widget.es.js ADDED
@@ -0,0 +1,271 @@
1
+ import { createElementBlock as m, openBlock as h } from "vue";
2
+ async function u(n, t, e) {
3
+ try {
4
+ const o = await fetch(n, {
5
+ method: "POST",
6
+ headers: {
7
+ "Content-Type": "application/json",
8
+ "X-Spot-Partner-Id": t
9
+ },
10
+ body: JSON.stringify(e)
11
+ });
12
+ console.log("res: ", o);
13
+ const i = await o.json();
14
+ return console.log("body: ", i), o.ok ? i : { status: "ERROR", responseBody: i };
15
+ } catch (o) {
16
+ throw console.log("what"), console.error("Failed to fetch quote:", { payload: e, error: o }), new Error(
17
+ o instanceof Error ? o.message : "Unknown error occurred while fetching quote"
18
+ );
19
+ }
20
+ }
21
+ function r(n, { text: t, className: e, parent: o, innerHTML: i } = {}) {
22
+ const s = document.createElement(n);
23
+ return e && (s.className = e), t != null && (s.textContent = t), i != null && (s.innerHTML = i), o && o.appendChild(s), s;
24
+ }
25
+ function g(n, { name: t, description: e }) {
26
+ r("div", {
27
+ className: "spot-header__title",
28
+ text: t,
29
+ parent: n
30
+ }), r("div", {
31
+ className: "spot-header__description",
32
+ text: e,
33
+ parent: n
34
+ });
35
+ }
36
+ function _(n, t = []) {
37
+ const e = r("ul", {
38
+ className: "spot-benefits__list",
39
+ parent: n
40
+ });
41
+ t.forEach((o) => {
42
+ const i = r("li", { parent: e });
43
+ i.innerHTML = `
44
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
45
+ <path d="M11.6666 3.5L5.24998 9.91667L2.33331 7"
46
+ stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
47
+ </svg>`, r("span", { text: o, parent: i });
48
+ });
49
+ }
50
+ function b(n, t = []) {
51
+ const e = r("div", {
52
+ className: "spot-table__container",
53
+ parent: n
54
+ }), o = r("table", {
55
+ className: "spot-refund__table spot-table--dynamic",
56
+ parent: e
57
+ }), i = r("thead", { parent: o }), s = r("tr", { parent: i });
58
+ r("th", { text: "When you cancel", parent: s }), r("th", { text: "You will receive", parent: s });
59
+ const a = r("tbody", { parent: o });
60
+ t.forEach(({ text: l, percent: p, amount: c }) => {
61
+ const d = r("tr", { parent: a });
62
+ r("td", { text: l, parent: d });
63
+ const f = p === "Not eligible for refund" ? "Not eligible for a refund" : `$${c} refund`;
64
+ r("td", { text: f, parent: d });
65
+ });
66
+ }
67
+ function v(n, t, e) {
68
+ const o = r("div", {
69
+ className: "spot-selection__options",
70
+ parent: n
71
+ }), i = r("label", {
72
+ className: `spot-selection__option ${e ? "selected" : ""}`,
73
+ parent: o
74
+ }), s = r("input", { parent: i });
75
+ s.type = "radio", s.name = "selection", s.value = "yes", e && (s.checked = !0), r("strong", {
76
+ text: `Yes, protect my booking for $${t}`,
77
+ parent: i
78
+ }), r("span", {
79
+ className: "spot-selection__recommended-tag",
80
+ text: "Recommended",
81
+ parent: i
82
+ });
83
+ const a = r("label", {
84
+ className: "spot-selection__option",
85
+ parent: o
86
+ }), l = r("input", { parent: a });
87
+ return l.type = "radio", l.name = "selection", l.value = "no", r("span", { text: "No, do not protect my booking", parent: a }), o;
88
+ }
89
+ function y(n, t) {
90
+ const e = r("div", {
91
+ className: "spot-footer__container",
92
+ parent: n
93
+ }), o = r("div", {
94
+ className: "spot-footer__terms",
95
+ parent: e
96
+ });
97
+ r("span", {
98
+ innerHTML: t.communication.legalDisclaimer,
99
+ parent: o
100
+ }), r("br", { parent: o }), r("a", {
101
+ href: t.communication.termsAndConditionsUrl,
102
+ className: "spot-footer__terms-link",
103
+ text: "Refund Guarantee Terms and Conditions",
104
+ parent: o
105
+ });
106
+ const i = r("p", {
107
+ className: "spot-footer__powered-by",
108
+ parent: e
109
+ });
110
+ return i.innerHTML = `
111
+ <svg width="145" height="28" viewBox="0 0 145 28" fill="none" xmlns="http://www.w3.org/2000/svg">
112
+ <rect width="145" height="28"/>
113
+ <rect x="-655" y="-270" width="819" height="325" rx="10"/>
114
+ <path d="M0 10C0 4.47715 4.47715 0 10 0H134.161C139.684 0 144.161 4.47715 144.161 10V18C144.161 23.5228 139.684 28 134.161 28H10C4.47716 28 0 23.5228 0 18V10Z" fill="#F3FD00"/>
115
+ <path d="M11.98 19V9.2H14.878C16.754 9.2 18.154 10.474 18.154 12.364C18.154 14.254 16.754 15.528 14.878 15.528H13.828V19H11.98ZM13.828 13.806H14.878C15.746 13.806 16.236 13.176 16.236 12.364C16.236 11.552 15.746 10.936 14.878 10.936H13.828V13.806ZM22.0258 19.196C20.0938 19.196 18.2178 17.894 18.2178 15.43C18.2178 12.952 20.0938 11.65 22.0258 11.65C23.9438 11.65 25.8198 12.952 25.8198 15.43C25.8198 17.894 23.9438 19.196 22.0258 19.196ZM20.0518 15.43C20.0518 16.774 20.8778 17.544 22.0258 17.544C23.1598 17.544 23.9858 16.774 23.9858 15.43C23.9858 14.072 23.1598 13.302 22.0258 13.302C20.8778 13.302 20.0518 14.072 20.0518 15.43ZM27.7226 19L25.2446 11.846H27.0926L28.7026 16.732L29.9486 11.846H31.7266L33.0146 16.746L34.5966 11.846H36.4026L33.9946 19H32.1186L30.8446 14.198L29.6266 19H27.7226ZM39.531 19.196C37.683 19.196 35.849 17.894 35.849 15.43C35.849 12.952 37.641 11.65 39.461 11.65C41.253 11.65 43.073 12.924 43.073 15.416V15.962H37.599C37.795 17.096 38.607 17.614 39.531 17.614C40.161 17.614 40.609 17.418 40.889 17.054H42.933C42.317 18.496 40.889 19.196 39.531 19.196ZM37.627 14.702H41.211C41.043 13.526 40.217 13.092 39.461 13.092C38.607 13.092 37.851 13.624 37.627 14.702ZM44.0159 19V11.846H45.7799V12.798C46.3539 12.028 47.2219 11.65 48.0759 11.65V13.47C46.5919 13.19 45.7799 13.834 45.7799 15.024V19H44.0159ZM51.967 19.196C50.119 19.196 48.285 17.894 48.285 15.43C48.285 12.952 50.077 11.65 51.897 11.65C53.689 11.65 55.509 12.924 55.509 15.416V15.962H50.035C50.231 17.096 51.043 17.614 51.967 17.614C52.597 17.614 53.045 17.418 53.325 17.054H55.369C54.753 18.496 53.325 19.196 51.967 19.196ZM50.063 14.702H53.647C53.479 13.526 52.653 13.092 51.897 13.092C51.043 13.092 50.287 13.624 50.063 14.702ZM59.4762 19.196C57.7542 19.196 56.1022 17.894 56.1022 15.43C56.1022 12.952 57.7542 11.65 59.4762 11.65C60.4842 11.65 61.3102 12.014 61.8562 12.714V9.2H63.6202V19H61.8562V18.146C61.3102 18.832 60.4842 19.196 59.4762 19.196ZM57.9362 15.43C57.9362 16.774 58.7622 17.544 59.8962 17.544C61.0442 17.544 61.8562 16.774 61.8562 15.43C61.8562 14.072 61.0442 13.302 59.8962 13.302C58.7622 13.302 57.9362 14.072 57.9362 15.43ZM72.526 19.196C71.518 19.196 70.692 18.832 70.146 18.146V19H68.382V9.2H70.146V12.714C70.692 12.014 71.518 11.65 72.526 11.65C74.248 11.65 75.9 12.952 75.9 15.43C75.9 17.894 74.248 19.196 72.526 19.196ZM70.146 15.43C70.146 16.774 70.958 17.544 72.106 17.544C73.254 17.544 74.066 16.774 74.066 15.43C74.066 14.072 73.254 13.302 72.106 13.302C70.958 13.302 70.146 14.072 70.146 15.43ZM76.9259 21.66L78.2699 18.342L75.4559 11.846H77.3879L79.2079 16.158L80.9299 11.846H82.7639L78.7599 21.66H76.9259Z" fill="#111820"/>
116
+ <path d="M87 15.5385C87 11.3751 90.3751 8 94.5385 8H124.867C129.03 8 132.405 11.3751 132.405 15.5385C132.405 19.7018 129.03 23.0769 124.867 23.0769H94.5385C90.3751 23.0769 87 19.7018 87 15.5385Z" fill="#F3FD00"/>
117
+ <g clip-path="url(#clip0_295_2094)">
118
+ <path d="M117.826 19.7575C116.253 19.7575 115.064 18.7369 115.064 17.2054V13.1218H113.674V11.2615H115.064V9.21918H117.172V11.2615H119.164V13.1218H117.172V17.2054C117.172 17.6501 117.373 17.8972 117.825 17.8972H119.164V19.7586H117.825M113.846 15.5591C113.846 18.4577 111.603 19.9892 109.309 19.9892C107.016 19.9892 104.757 18.4577 104.757 15.5591C104.757 12.6606 107 11.1126 109.309 11.1126C111.619 11.1126 113.846 12.6441 113.846 15.5591ZM111.653 15.5591C111.653 13.9615 110.665 13.0556 109.31 13.0556C107.956 13.0556 106.951 13.9615 106.951 15.5591C106.951 17.1568 107.939 18.0461 109.31 18.0461C110.682 18.0461 111.653 17.1403 111.653 15.5591ZM104.339 15.5591C104.339 18.4577 102.364 19.9892 100.305 19.9892C99.0996 19.9892 98.1127 19.561 97.46 18.7545V22.8877H95.3516V11.2605H97.46V12.3638C98.1127 11.5407 99.1006 11.1126 100.305 11.1126C102.364 11.1126 104.339 12.6441 104.339 15.5591ZM102.147 15.5591C102.147 13.9615 101.175 13.0556 99.8038 13.0556C98.4322 13.0556 97.461 13.9615 97.461 15.5591C97.461 17.1568 98.4322 18.0461 99.8038 18.0461C101.175 18.0461 102.147 17.1403 102.147 15.5591ZM91.0833 19.9892C93.0078 19.9892 94.8155 18.5404 94.8155 16.465C94.8155 12.0184 89.5099 13.6823 89.5099 11.3101C89.5099 10.6183 90.0123 10.1075 90.8153 10.1075C91.6183 10.1075 92.1039 10.5025 92.3214 11.2605H94.681C94.2637 9.05373 92.7744 8 90.8163 8C88.9749 8 87.2176 9.28433 87.2176 11.3597C87.2176 15.7732 92.5232 14.0773 92.5232 16.5146C92.5232 17.2395 91.9872 17.8817 91.0833 17.8817C90.1794 17.8817 89.5603 17.3874 89.3596 16.5643H87C87.3847 18.7379 88.8908 19.9892 91.0843 19.9892M126.313 19.9892C129.678 19.9892 132.406 17.3057 132.406 13.9946C132.406 10.6834 129.678 8 126.312 8C122.947 8 120.219 10.6834 120.219 13.9946C120.219 17.3057 122.947 19.9892 126.312 19.9892" fill="#111820"/>
119
+ </g>
120
+ <defs>
121
+ <clipPath id="clip0_295_2094">
122
+ <rect width="45.405" height="14.8867" fill="white" transform="translate(87 8)"/>
123
+ </clipPath>
124
+ </defs>
125
+ </svg>`, e;
126
+ }
127
+ 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-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}";
128
+ function w(n) {
129
+ const t = document.createElement("style");
130
+ t.textContent = n, document.head.appendChild(t);
131
+ }
132
+ w(C);
133
+ class k {
134
+ constructor(t = {}) {
135
+ this.options = {
136
+ location: "body",
137
+ showTable: !0,
138
+ optInSelected: !1,
139
+ apiConfig: { endpoint: "", partnerId: "" },
140
+ quoteRequestData: {},
141
+ callbacks: {},
142
+ ...t
143
+ }, this._onResize = this._updateLayout.bind(this), this.root = document.querySelector(this.options.location), this.currentSelection = this.options.optInSelected ? "yes" : null, this._init();
144
+ }
145
+ async _init() {
146
+ try {
147
+ const t = await u(
148
+ this.options.apiConfig.endpoint,
149
+ this.options.apiConfig.partnerId,
150
+ this.options.quoteRequestData
151
+ );
152
+ if (t.status !== "QUOTE_AVAILABLE") {
153
+ t.status === "NO_MATCHING_QUOTE" && this._emit("noMatchingQuote");
154
+ return;
155
+ }
156
+ this.quote = t.data, this._renderWidget(), this.options.optInSelected && this.options.callbacks.onOptIn && this.options.callbacks.onOptIn({
157
+ status: "QUOTE_ACCEPTED",
158
+ spotPrice: this.quote.spotPrice,
159
+ quoteId: this.quote.id
160
+ }), this.options.callbacks.onQuoteRetrieved && this.options.callbacks.onQuoteRetrieved(this.quote);
161
+ } catch (t) {
162
+ this._emit("error", t);
163
+ }
164
+ }
165
+ _renderWidget() {
166
+ this.container = document.createElement("div"), this.container.className = "spot-refund-guarantee", this.root.appendChild(this.container), Object.entries(this.options.theme || {}).forEach(
167
+ ([o, i]) => this.container.style.setProperty(o, i)
168
+ ), g(this.container, this.quote.communication);
169
+ const t = document.createElement("div");
170
+ t.className = "spot-content__wrapper", this.container.appendChild(t), _(t, this.quote.communication.bulletPoints), this.options.showTable && b(t, this.quote.payoutSchedule);
171
+ const e = v(
172
+ t,
173
+ this.quote.spotPrice,
174
+ this.options.optInSelected
175
+ );
176
+ t.appendChild(e), y(this.container, this.quote), window.addEventListener("resize", this._onResize), this._updateLayout(), this._setupOptionListeners(e);
177
+ }
178
+ _updateLayout() {
179
+ const t = window.matchMedia("(min-width: 768px)").matches;
180
+ this.container.querySelector(".spot-content__wrapper").classList.toggle("desktop-layout", t && this.options.showTable);
181
+ }
182
+ _setupOptionListeners(t) {
183
+ const e = t.querySelectorAll('input[type="radio"]'), o = t.querySelectorAll(".spot-selection__option");
184
+ e.forEach((i) => {
185
+ i.addEventListener("change", (s) => {
186
+ var l;
187
+ const a = s.target.value;
188
+ this.hideSelectionError(), this.currentSelection = a, o.forEach((p) => p.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({
189
+ status: "QUOTE_ACCEPTED",
190
+ spotPrice: this.quote.spotPrice,
191
+ quoteId: this.quote.id
192
+ }), a === "no" && this.options.callbacks.onOptOut && this.options.callbacks.onOptOut({
193
+ status: "QUOTE_DECLINED",
194
+ quoteId: this.quote.id
195
+ });
196
+ });
197
+ });
198
+ }
199
+ showSelectionError() {
200
+ var t;
201
+ if (!this.errorEl) {
202
+ this.errorEl = document.createElement("div"), this.errorEl.className = "spot-selection__error", this.errorEl.textContent = "Please make a selection";
203
+ const e = (t = this.container) == null ? void 0 : t.querySelector(
204
+ ".spot-selection__options"
205
+ );
206
+ e && e.insertAdjacentElement("afterend", this.errorEl);
207
+ }
208
+ this.errorEl.style.display = "block";
209
+ }
210
+ hideSelectionError() {
211
+ this.errorEl && (this.errorEl.style.display = "none");
212
+ }
213
+ validateSelection() {
214
+ if (!this.container) return !1;
215
+ const t = !!this.container.querySelector(
216
+ 'input[name="selection"]:checked'
217
+ );
218
+ return t ? this.hideSelectionError() : this.showSelectionError(), t;
219
+ }
220
+ getSelection() {
221
+ var t, e;
222
+ return {
223
+ selection: this.currentSelection,
224
+ quoteId: (t = this.quote) == null ? void 0 : t.id,
225
+ spotPrice: (e = this.quote) == null ? void 0 : e.spotPrice,
226
+ status: this.currentSelection === "yes" ? "QUOTE_ACCEPTED" : "QUOTE_DECLINED"
227
+ };
228
+ }
229
+ _emit(t, e) {
230
+ const o = this.options.callbacks[t];
231
+ o && o(e);
232
+ }
233
+ destroy() {
234
+ window.removeEventListener("resize", this._onResize), this.container && this.container.parentNode && this.container.parentNode.removeChild(this.container);
235
+ }
236
+ }
237
+ const x = (n, t) => {
238
+ const e = n.__vccOpts || n;
239
+ for (const [o, i] of t)
240
+ e[o] = i;
241
+ return e;
242
+ }, E = {
243
+ name: "VueSpotWidget",
244
+ props: {
245
+ options: {
246
+ type: Object,
247
+ default: () => ({})
248
+ }
249
+ },
250
+ mounted() {
251
+ try {
252
+ this.widget = new k({
253
+ ...this.options,
254
+ location: this.$refs.container
255
+ });
256
+ } catch (n) {
257
+ this.$emit("error", n);
258
+ }
259
+ },
260
+ beforeUnmount() {
261
+ var n, t;
262
+ (t = (n = this.widget) == null ? void 0 : n.destroy) == null || t.call(n);
263
+ }
264
+ }, H = { ref: "container" };
265
+ function z(n, t, e, o, i, s) {
266
+ return h(), m("div", H, null, 512);
267
+ }
268
+ const M = /* @__PURE__ */ x(E, [["render", z]]);
269
+ export {
270
+ M as default
271
+ };
package/dist/vue/vue-spot-widget.umd.js ADDED
@@ -0,0 +1,20 @@
1
+ (function(p,d){typeof exports=="object"&&typeof module<"u"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(p=typeof globalThis<"u"?globalThis:p||self,p.VueSpotWidget=d(p.Vue))})(this,function(p){"use strict";async function d(n,t,e){try{const o=await fetch(n,{method:"POST",headers:{"Content-Type":"application/json","X-Spot-Partner-Id":t},body:JSON.stringify(e)});console.log("res: ",o);const i=await o.json();return console.log("body: ",i),o.ok?i:{status:"ERROR",responseBody:i}}catch(o){throw console.log("what"),console.error("Failed to fetch quote:",{payload:e,error:o}),new Error(o instanceof Error?o.message:"Unknown error occurred while fetching quote")}}function r(n,{text:t,className:e,parent:o,innerHTML:i}={}){const s=document.createElement(n);return e&&(s.className=e),t!=null&&(s.textContent=t),i!=null&&(s.innerHTML=i),o&&o.appendChild(s),s}function m(n,{name:t,description:e}){r("div",{className:"spot-header__title",text:t,parent:n}),r("div",{className:"spot-header__description",text:e,parent:n})}function h(n,t=[]){const e=r("ul",{className:"spot-benefits__list",parent:n});t.forEach(o=>{const i=r("li",{parent:e});i.innerHTML=`
2
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
3
+ <path d="M11.6666 3.5L5.24998 9.91667L2.33331 7"
4
+ stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
5
+ </svg>`,r("span",{text:o,parent:i})})}function u(n,t=[]){const e=r("div",{className:"spot-table__container",parent:n}),o=r("table",{className:"spot-refund__table spot-table--dynamic",parent:e}),i=r("thead",{parent:o}),s=r("tr",{parent:i});r("th",{text:"When you cancel",parent:s}),r("th",{text:"You will receive",parent:s});const a=r("tbody",{parent:o});t.forEach(({text:l,percent:c,amount:E})=>{const f=r("tr",{parent:a});r("td",{text:l,parent:f});const H=c==="Not eligible for refund"?"Not eligible for a refund":`$${E} refund`;r("td",{text:H,parent:f})})}function g(n,t,e){const o=r("div",{className:"spot-selection__options",parent:n}),i=r("label",{className:`spot-selection__option ${e?"selected":""}`,parent:o}),s=r("input",{parent:i});s.type="radio",s.name="selection",s.value="yes",e&&(s.checked=!0),r("strong",{text:`Yes, protect my booking for $${t}`,parent:i}),r("span",{className:"spot-selection__recommended-tag",text:"Recommended",parent:i});const a=r("label",{className:"spot-selection__option",parent:o}),l=r("input",{parent:a});return l.type="radio",l.name="selection",l.value="no",r("span",{text:"No, do not protect my booking",parent:a}),o}function _(n,t){const e=r("div",{className:"spot-footer__container",parent:n}),o=r("div",{className:"spot-footer__terms",parent:e});r("span",{innerHTML:t.communication.legalDisclaimer,parent:o}),r("br",{parent:o}),r("a",{href:t.communication.termsAndConditionsUrl,className:"spot-footer__terms-link",text:"Refund Guarantee Terms and Conditions",parent:o});const i=r("p",{className:"spot-footer__powered-by",parent:e});return i.innerHTML=`
6
+ <svg width="145" height="28" viewBox="0 0 145 28" fill="none" xmlns="http://www.w3.org/2000/svg">
7
+ <rect width="145" height="28"/>
8
+ <rect x="-655" y="-270" width="819" height="325" rx="10"/>
9
+ <path d="M0 10C0 4.47715 4.47715 0 10 0H134.161C139.684 0 144.161 4.47715 144.161 10V18C144.161 23.5228 139.684 28 134.161 28H10C4.47716 28 0 23.5228 0 18V10Z" fill="#F3FD00"/>
10
+ <path d="M11.98 19V9.2H14.878C16.754 9.2 18.154 10.474 18.154 12.364C18.154 14.254 16.754 15.528 14.878 15.528H13.828V19H11.98ZM13.828 13.806H14.878C15.746 13.806 16.236 13.176 16.236 12.364C16.236 11.552 15.746 10.936 14.878 10.936H13.828V13.806ZM22.0258 19.196C20.0938 19.196 18.2178 17.894 18.2178 15.43C18.2178 12.952 20.0938 11.65 22.0258 11.65C23.9438 11.65 25.8198 12.952 25.8198 15.43C25.8198 17.894 23.9438 19.196 22.0258 19.196ZM20.0518 15.43C20.0518 16.774 20.8778 17.544 22.0258 17.544C23.1598 17.544 23.9858 16.774 23.9858 15.43C23.9858 14.072 23.1598 13.302 22.0258 13.302C20.8778 13.302 20.0518 14.072 20.0518 15.43ZM27.7226 19L25.2446 11.846H27.0926L28.7026 16.732L29.9486 11.846H31.7266L33.0146 16.746L34.5966 11.846H36.4026L33.9946 19H32.1186L30.8446 14.198L29.6266 19H27.7226ZM39.531 19.196C37.683 19.196 35.849 17.894 35.849 15.43C35.849 12.952 37.641 11.65 39.461 11.65C41.253 11.65 43.073 12.924 43.073 15.416V15.962H37.599C37.795 17.096 38.607 17.614 39.531 17.614C40.161 17.614 40.609 17.418 40.889 17.054H42.933C42.317 18.496 40.889 19.196 39.531 19.196ZM37.627 14.702H41.211C41.043 13.526 40.217 13.092 39.461 13.092C38.607 13.092 37.851 13.624 37.627 14.702ZM44.0159 19V11.846H45.7799V12.798C46.3539 12.028 47.2219 11.65 48.0759 11.65V13.47C46.5919 13.19 45.7799 13.834 45.7799 15.024V19H44.0159ZM51.967 19.196C50.119 19.196 48.285 17.894 48.285 15.43C48.285 12.952 50.077 11.65 51.897 11.65C53.689 11.65 55.509 12.924 55.509 15.416V15.962H50.035C50.231 17.096 51.043 17.614 51.967 17.614C52.597 17.614 53.045 17.418 53.325 17.054H55.369C54.753 18.496 53.325 19.196 51.967 19.196ZM50.063 14.702H53.647C53.479 13.526 52.653 13.092 51.897 13.092C51.043 13.092 50.287 13.624 50.063 14.702ZM59.4762 19.196C57.7542 19.196 56.1022 17.894 56.1022 15.43C56.1022 12.952 57.7542 11.65 59.4762 11.65C60.4842 11.65 61.3102 12.014 61.8562 12.714V9.2H63.6202V19H61.8562V18.146C61.3102 18.832 60.4842 19.196 59.4762 19.196ZM57.9362 15.43C57.9362 16.774 58.7622 17.544 59.8962 17.544C61.0442 17.544 61.8562 16.774 61.8562 15.43C61.8562 14.072 61.0442 13.302 59.8962 13.302C58.7622 13.302 57.9362 14.072 57.9362 15.43ZM72.526 19.196C71.518 19.196 70.692 18.832 70.146 18.146V19H68.382V9.2H70.146V12.714C70.692 12.014 71.518 11.65 72.526 11.65C74.248 11.65 75.9 12.952 75.9 15.43C75.9 17.894 74.248 19.196 72.526 19.196ZM70.146 15.43C70.146 16.774 70.958 17.544 72.106 17.544C73.254 17.544 74.066 16.774 74.066 15.43C74.066 14.072 73.254 13.302 72.106 13.302C70.958 13.302 70.146 14.072 70.146 15.43ZM76.9259 21.66L78.2699 18.342L75.4559 11.846H77.3879L79.2079 16.158L80.9299 11.846H82.7639L78.7599 21.66H76.9259Z" fill="#111820"/>
11
+ <path d="M87 15.5385C87 11.3751 90.3751 8 94.5385 8H124.867C129.03 8 132.405 11.3751 132.405 15.5385C132.405 19.7018 129.03 23.0769 124.867 23.0769H94.5385C90.3751 23.0769 87 19.7018 87 15.5385Z" fill="#F3FD00"/>
12
+ <g clip-path="url(#clip0_295_2094)">
13
+ <path d="M117.826 19.7575C116.253 19.7575 115.064 18.7369 115.064 17.2054V13.1218H113.674V11.2615H115.064V9.21918H117.172V11.2615H119.164V13.1218H117.172V17.2054C117.172 17.6501 117.373 17.8972 117.825 17.8972H119.164V19.7586H117.825M113.846 15.5591C113.846 18.4577 111.603 19.9892 109.309 19.9892C107.016 19.9892 104.757 18.4577 104.757 15.5591C104.757 12.6606 107 11.1126 109.309 11.1126C111.619 11.1126 113.846 12.6441 113.846 15.5591ZM111.653 15.5591C111.653 13.9615 110.665 13.0556 109.31 13.0556C107.956 13.0556 106.951 13.9615 106.951 15.5591C106.951 17.1568 107.939 18.0461 109.31 18.0461C110.682 18.0461 111.653 17.1403 111.653 15.5591ZM104.339 15.5591C104.339 18.4577 102.364 19.9892 100.305 19.9892C99.0996 19.9892 98.1127 19.561 97.46 18.7545V22.8877H95.3516V11.2605H97.46V12.3638C98.1127 11.5407 99.1006 11.1126 100.305 11.1126C102.364 11.1126 104.339 12.6441 104.339 15.5591ZM102.147 15.5591C102.147 13.9615 101.175 13.0556 99.8038 13.0556C98.4322 13.0556 97.461 13.9615 97.461 15.5591C97.461 17.1568 98.4322 18.0461 99.8038 18.0461C101.175 18.0461 102.147 17.1403 102.147 15.5591ZM91.0833 19.9892C93.0078 19.9892 94.8155 18.5404 94.8155 16.465C94.8155 12.0184 89.5099 13.6823 89.5099 11.3101C89.5099 10.6183 90.0123 10.1075 90.8153 10.1075C91.6183 10.1075 92.1039 10.5025 92.3214 11.2605H94.681C94.2637 9.05373 92.7744 8 90.8163 8C88.9749 8 87.2176 9.28433 87.2176 11.3597C87.2176 15.7732 92.5232 14.0773 92.5232 16.5146C92.5232 17.2395 91.9872 17.8817 91.0833 17.8817C90.1794 17.8817 89.5603 17.3874 89.3596 16.5643H87C87.3847 18.7379 88.8908 19.9892 91.0843 19.9892M126.313 19.9892C129.678 19.9892 132.406 17.3057 132.406 13.9946C132.406 10.6834 129.678 8 126.312 8C122.947 8 120.219 10.6834 120.219 13.9946C120.219 17.3057 122.947 19.9892 126.312 19.9892" fill="#111820"/>
14
+ </g>
15
+ <defs>
16
+ <clipPath id="clip0_295_2094">
17
+ <rect width="45.405" height="14.8867" fill="white" transform="translate(87 8)"/>
18
+ </clipPath>
19
+ </defs>
20
+ </svg>`,e}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 v(n){const t=document.createElement("style");t.textContent=n,document.head.appendChild(t)}v(b);class y{constructor(t={}){this.options={location:"body",showTable:!0,optInSelected:!1,apiConfig:{endpoint:"",partnerId:""},quoteRequestData:{},callbacks:{},...t},this._onResize=this._updateLayout.bind(this),this.root=document.querySelector(this.options.location),this.currentSelection=this.options.optInSelected?"yes":null,this._init()}async _init(){try{const t=await d(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(([o,i])=>this.container.style.setProperty(o,i)),m(this.container,this.quote.communication);const t=document.createElement("div");t.className="spot-content__wrapper",this.container.appendChild(t),h(t,this.quote.communication.bulletPoints),this.options.showTable&&u(t,this.quote.payoutSchedule);const e=g(t,this.quote.spotPrice,this.options.optInSelected);t.appendChild(e),_(this.container,this.quote),window.addEventListener("resize",this._onResize),this._updateLayout(),this._setupOptionListeners(e)}_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 e=t.querySelectorAll('input[type="radio"]'),o=t.querySelectorAll(".spot-selection__option");e.forEach(i=>{i.addEventListener("change",s=>{var l;const a=s.target.value;this.hideSelectionError(),this.currentSelection=a,o.forEach(c=>c.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 e=(t=this.container)==null?void 0:t.querySelector(".spot-selection__options");e&&e.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,e;return{selection:this.currentSelection,quoteId:(t=this.quote)==null?void 0:t.id,spotPrice:(e=this.quote)==null?void 0:e.spotPrice,status:this.currentSelection==="yes"?"QUOTE_ACCEPTED":"QUOTE_DECLINED"}}_emit(t,e){const o=this.options.callbacks[t];o&&o(e)}destroy(){window.removeEventListener("resize",this._onResize),this.container&&this.container.parentNode&&this.container.parentNode.removeChild(this.container)}}const C=(n,t)=>{const e=n.__vccOpts||n;for(const[o,i]of t)e[o]=i;return e},w={name:"VueSpotWidget",props:{options:{type:Object,default:()=>({})}},mounted(){try{this.widget=new y({...this.options,location:this.$refs.container})}catch(n){this.$emit("error",n)}},beforeUnmount(){var n,t;(t=(n=this.widget)==null?void 0:n.destroy)==null||t.call(n)}},k={ref:"container"};function x(n,t,e,o,i,s){return p.openBlock(),p.createElementBlock("div",k,null,512)}return C(w,[["render",x]])});
package/package.json ADDED
@@ -0,0 +1,44 @@
1
+ {
2
+ "name": "@getspot/spot-widget",
3
+ "version": "0.0.1",
4
+ "description": "Spot UI Widget",
5
+ "main": "dist/vanilla/spot-widget.umd.js",
6
+ "module": "dist/vanilla/spot-widget.es.js",
7
+ "exports": {
8
+ ".": {
9
+ "import": "./dist/vanilla/spot-widget.es.js",
10
+ "require": "./dist/vanilla/spot-widget.umd.js"
11
+ },
12
+ "./vue": {
13
+ "import": "./dist/vue/vue-spot-widget.es.js",
14
+ "require": "./dist/vue/vue-spot-widget.umd.js"
15
+ },
16
+ "./react": {
17
+ "import": "./dist/react/react-spot-widget.es.js",
18
+ "require": "./dist/react/react-spot-widget.umd.js"
19
+ }
20
+ },
21
+ "files": [
22
+ "dist"
23
+ ],
24
+ "scripts": {
25
+ "build:vanilla": "cross-env BUILD_TARGET=vanilla vite build",
26
+ "build:vue": "cross-env BUILD_TARGET=vue vite build",
27
+ "build:react": "cross-env BUILD_TARGET=react vite build",
28
+ "build": "npm run build:vanilla && npm run build:vue && npm run build:react",
29
+ "prepublishOnly": "npm run build"
30
+ },
31
+ "keywords": [],
32
+ "author": "",
33
+ "license": "ISC",
34
+ "devDependencies": {
35
+ "@vitejs/plugin-vue": "^5.2.3",
36
+ "cross-env": "^7.0.3",
37
+ "vite": "^6.3.2"
38
+ },
39
+ "peerDependencies": {
40
+ "react": "^18.3.1",
41
+ "react-dom": "^18.3.1",
42
+ "vue": "^3.0.0"
43
+ }
44
+ }