npm - @getspot/spot-widget - Versions diffs - 1.1.0 → 1.1.1 - Mend

@getspot/spot-widget 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/.turbo/turbo-build.log CHANGED Viewed

@@ -1,13 +1,13 @@
-> @getspot/spot-widget@1.1.0 build /builds/getspot/spot-widget/packages/core
+> @getspot/spot-widget@1.1.1 build /builds/getspot/spot-widget/packages/core
 > vite build
 [33mThe CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.[39m
-[36mvite v5.4.19 [32mbuilding for production...[36m[39m
+[36mvite v5.4.18 [32mbuilding for production...[36m[39m
 transforming...
 [32m✓[39m 5 modules transformed.
 rendering chunks...
 computing gzip size...
-[2mdist/[22m[36mindex.umd.js  [39m[1m[2m24.52 kB[22m[1m[22m[2m │ gzip: 7.49 kB[22m
-[2mdist/[22m[36mindex.es.js  [39m[1m[2m27.03 kB[22m[1m[22m[2m │ gzip: 7.77 kB[22m
-[32m✓ built in 164ms[39m
+[2mdist/[22m[36mindex.umd.js  [39m[1m[2m24.49 kB[22m[1m[22m[2m │ gzip: 7.47 kB[22m
+[2mdist/[22m[36mindex.es.js  [39m[1m[2m27.00 kB[22m[1m[22m[2m │ gzip: 7.75 kB[22m
+[32m✓ built in 177ms[39m

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,11 @@
 # @getspot/spot-widget
+## 1.1.1
+### Patch Changes
+- 4f33f99: dynamic radio selection text
 ## 1.1.0
 ### Minor Changes

package/dist/index.es.js CHANGED Viewed

@@ -155,11 +155,11 @@ function k(i, e, t) {
     className: "spot-selection__options",
     parent: i
   }), n = s("label", {
-    className: `spot-selection__option ${t ? "selected" : ""}`,
+    className: `spot-selection__option ${e ? "selected" : ""}`,
     parent: o
   }), r = s("input", { parent: n });
-  r.type = "radio", r.name = "selection", r.value = "yes", t && (r.checked = !0), s("strong", {
-    text: `Yes, protect my booking for $${e}`,
+  r.type = "radio", r.name = "selection", r.value = "yes", e && (r.checked = !0), s("strong", {
+    text: t.yesOptionText,
     parent: n
   }), s("span", {
     className: "spot-selection__recommended-tag",
@@ -170,9 +170,9 @@ function k(i, e, t) {
     className: "spot-selection__option",
     parent: o
   }), p = s("input", { parent: a });
-  return p.type = "radio", p.name = "selection", p.value = "no", s("span", { text: "No, do not protect my booking", parent: a }), o;
+  return p.type = "radio", p.name = "selection", p.value = "no", s("span", { text: t.noOptionText, parent: a }), o;
 }
-function q(i, e) {
+function x(i, e) {
   var n;
   const t = (n = e.communication) == null ? void 0 : n.paymentTerms, o = s("div", {
     className: "spot-payment-terms",
@@ -188,7 +188,7 @@ function q(i, e) {
     parent: o
   }), o;
 }
-function x(i, e) {
+function q(i, e) {
   const t = s("div", {
     className: "spot-footer__container",
     parent: i
@@ -236,7 +236,7 @@ const _ = {
   sandbox: "https://api.sandbox.getspot.com/api/v1/quote",
   production: "https://api.getspot.com/api/v1/quote"
 };
-class M {
+class N {
   constructor(e = {}) {
     this.options = {
       location: "body",
@@ -286,13 +286,13 @@ class M {
     e.className = "spot-content__wrapper", this.container.appendChild(e), C(e, this.quote.communication.bulletPoints), this.options.showTable && E(e, this.quote.payoutSchedule);
     const t = k(
       e,
-      this.quote.spotPrice,
-      this.options.optInSelected
+      this.options.optInSelected,
+      this.quote.communication
     );
     e.appendChild(t), this.paymentTermsEl = s("div", {
       className: "spot-payment-terms__wrapper",
       parent: e
-    }), x(this.container, this.quote), window.addEventListener("resize", this._onResize), this._updateLayout(), this._setupOptionListeners(t);
+    }), q(this.container, this.quote), window.addEventListener("resize", this._onResize), this._updateLayout(), this._setupOptionListeners(t);
   }
   _updateLayout() {
     const e = window.matchMedia("(min-width: 768px)").matches;
@@ -304,7 +304,7 @@ class M {
       n.addEventListener("change", (r) => {
         var p, c, l;
         const a = r.target.value;
-        this.hideSelectionError(), this.currentSelection = a, o.forEach((d) => d.classList.remove("selected")), (p = r.target.closest(".spot-selection__option")) == null || p.classList.add("selected"), this.paymentTermsEl && (this.paymentTermsEl.innerHTML = ""), a === "yes" && (this.options.quoteRequestData.isPartialPayment && q(this.paymentTermsEl, this.quote), (c = this.options.callbacks) != null && c.onOptIn && this.options.callbacks.onOptIn({
+        this.hideSelectionError(), this.currentSelection = a, o.forEach((d) => d.classList.remove("selected")), (p = r.target.closest(".spot-selection__option")) == null || p.classList.add("selected"), this.paymentTermsEl && (this.paymentTermsEl.innerHTML = ""), a === "yes" && (this.options.quoteRequestData.isPartialPayment && x(this.paymentTermsEl, this.quote), (c = this.options.callbacks) != null && c.onOptIn && this.options.callbacks.onOptIn({
           status: "QUOTE_ACCEPTED",
           spotPrice: this.quote.spotPrice,
           quoteId: this.quote.id
@@ -382,5 +382,5 @@ class M {
   }
 }
 export {
-  M as default
+  N as default
 };

package/dist/index.umd.js CHANGED Viewed

@@ -2,7 +2,7 @@
             <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
               <path d="M11.6666 3.5L5.24998 9.91667L2.33331 7"
                 stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>`,s("span",{text:o,parent:n})})}function E(i,e=[]){const t=s("div",{className:"spot-table__container",parent:i}),o=s("table",{className:"spot-refund__table spot-table--dynamic",parent:t}),n=s("thead",{parent:o}),r=s("tr",{parent:n});s("th",{text:"When you cancel",parent:r}),s("th",{text:"You will receive",parent:r});const a=s("tbody",{parent:o});e.forEach(({text:p,percent:c,amount:l})=>{const d=s("tr",{parent:a});s("td",{text:p,parent:d});const h=c==="Not eligible for refund"?"Not eligible for a refund":`$${l} refund`;s("td",{text:h,parent:d})})}function k(i,e,t){const o=s("div",{className:"spot-selection__options",parent:i}),n=s("label",{className:`spot-selection__option ${t?"selected":""}`,parent:o}),r=s("input",{parent:n});r.type="radio",r.name="selection",r.value="yes",t&&(r.checked=!0),s("strong",{text:`Yes, protect my booking for $${e}`,parent:n}),s("span",{className:"spot-selection__recommended-tag",text:"Recommended",parent:n});const a=s("label",{className:"spot-selection__option",parent:o}),p=s("input",{parent:a});return p.type="radio",p.name="selection",p.value="no",s("span",{text:"No, do not protect my booking",parent:a}),o}function x(i,e){var n;const t=(n=e.communication)==null?void 0:n.paymentTerms,o=s("div",{className:"spot-payment-terms",parent:i});return s("div",{className:"spot-payment-terms__header",text:"PAYMENT TERMS",parent:o}),s("div",{className:"spot-payment-terms__body",text:t,parent:o}),o}function q(i,e){const t=s("div",{className:"spot-footer__container",parent:i}),o=s("div",{className:"spot-footer__terms",parent:t});s("span",{innerHTML:e.communication.legalDisclaimer,parent:o}),s("br",{parent:o}),s("a",{href:e.communication.termsAndConditionsUrl,className:"spot-footer__terms-link",text:"Refund Guarantee Terms and Conditions",parent:o});const n=s("p",{className:"spot-footer__powered-by",parent:t});return n.innerHTML=`
+            </svg>`,s("span",{text:o,parent:n})})}function E(i,e=[]){const t=s("div",{className:"spot-table__container",parent:i}),o=s("table",{className:"spot-refund__table spot-table--dynamic",parent:t}),n=s("thead",{parent:o}),r=s("tr",{parent:n});s("th",{text:"When you cancel",parent:r}),s("th",{text:"You will receive",parent:r});const a=s("tbody",{parent:o});e.forEach(({text:p,percent:c,amount:l})=>{const d=s("tr",{parent:a});s("td",{text:p,parent:d});const h=c==="Not eligible for refund"?"Not eligible for a refund":`$${l} refund`;s("td",{text:h,parent:d})})}function k(i,e,t){const o=s("div",{className:"spot-selection__options",parent:i}),n=s("label",{className:`spot-selection__option ${e?"selected":""}`,parent:o}),r=s("input",{parent:n});r.type="radio",r.name="selection",r.value="yes",e&&(r.checked=!0),s("strong",{text:t.yesOptionText,parent:n}),s("span",{className:"spot-selection__recommended-tag",text:"Recommended",parent:n});const a=s("label",{className:"spot-selection__option",parent:o}),p=s("input",{parent:a});return p.type="radio",p.name="selection",p.value="no",s("span",{text:t.noOptionText,parent:a}),o}function x(i,e){var n;const t=(n=e.communication)==null?void 0:n.paymentTerms,o=s("div",{className:"spot-payment-terms",parent:i});return s("div",{className:"spot-payment-terms__header",text:"PAYMENT TERMS",parent:o}),s("div",{className:"spot-payment-terms__body",text:t,parent:o}),o}function q(i,e){const t=s("div",{className:"spot-footer__container",parent:i}),o=s("div",{className:"spot-footer__terms",parent:t});s("span",{innerHTML:e.communication.legalDisclaimer,parent:o}),s("br",{parent:o}),s("a",{href:e.communication.termsAndConditionsUrl,className:"spot-footer__terms-link",text:"Refund Guarantee Terms and Conditions",parent:o});const n=s("p",{className:"spot-footer__powered-by",parent:t});return n.innerHTML=`
             <svg width="145" height="28" viewBox="0 0 145 28" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect width="145" height="28"/>
             <rect x="-655" y="-270" width="819" height="325" rx="10"/>
@@ -17,4 +17,4 @@
                 <rect width="45.405" height="14.8867" fill="white" transform="translate(87 8)"/>
               </clipPath>
             </defs>
-          </svg>`,t}const T=":root{--spot-font-family: Arial;--spot-padding: 1.25rem;--spot-background-color: #ffffff;--spot-font-color: #000000;--spot-border-radius: .5rem;--spot-title-font-size: 1.25rem;--spot-title-font-weight: 700;--spot-title-padding: 0 0 1.25rem 0;--spot-description-font-size: .875rem;--spot-description-font-weight: 400;--spot-description-padding: 0 0 .5rem 0;--spot-bullets-font-size: .875rem;--spot-bullets-font-weight: 400;--spot-bullets-padding: .3125rem;--spot-table-border-radius: .625rem;--spot-table-header-font-size: .875rem;--spot-table-header-font-weight: 700;--spot-table-header-padding: 0 .5rem .625rem;--spot-table-cell-font-size: .815rem;--spot-table-cell-font-weight: 400;--spot-table-cell-padding: 0 .625rem;--spot-radio-border: #000000;--spot-radio-border-radius: .625rem;--spot-radio-checked-background: #000000;--spot-radio-text-font-size: .875rem;--spot-radio-text-font-weight: 400;--spot-radio-text-padding: .625rem;--spot-radio-selection-background: #f4f4f4;--spot-radio-selection-border-radius: .625rem;--spot-radio-selection-padding: .625rem;--spot-recommended-tag-background: #000000;--spot-recommended-tag-font-color: #ffffff;--spot-recommended-tag-font-size: .875rem;--spot-recommended-tag-font-weight: 700;--spot-recommended-tag-padding: .25rem .5rem;--spot-recommended-tag-border-radius: .5rem;--spot-selection-error-font-color: #ff0000;--spot-selection-error-font-size: .875rem;--spot-selection-error-padding: .5rem;--spot-payment-terms-background: #f4f4f4;--spot-payment-terms-border-radius: .625rem;--spot-payment-terms-padding: 1rem;--spot-payment-terms-font-color: #636569;--spot-payment-terms-font-size: .75rem;--spot-payment-terms-header-font-weight: 700;--spot-payment-terms-header-font-size: .875rem;--spot-payment-terms-header-margin-bottom: .5rem;--spot-payment-terms-header-border-color: #c2c2c2;--spot-payment-terms-header-padding: 0 0 .5rem 0;--spot-terms-font-size: .75rem;--spot-terms-font-weight: 400;--spot-terms-font-color: #636569;--spot-terms-padding: 0;--spot-terms-link-text-decoration: underline;--spot-terms-link-font-size: .75rem;--spot-terms-link-font-weight: 400;--spot-terms-link-font-color: #636569;--spot-terms-link-padding: 0}.spot-refund-guarantee{font-family:var(--spot-font-family);padding:var(--spot-padding);background-color:var(--spot-background-color);color:var(--spot-font-color);border:.0625rem solid #e0e0e0;border-radius:var(--spot-border-radius);max-width:51rem;margin:1rem}.spot-refund-guarantee *{color:inherit}.spot-header__title{font-size:var(--spot-title-font-size);font-weight:var(--spot-title-font-weight);padding:var(--spot-title-padding);color:var(--spot-title-font-color);font-family:var(--spot-title-font-family);line-height:120%;letter-spacing:-.03125rem}.spot-header__description{font-size:var(--spot-description-font-size);font-weight:var(--spot-description-font-weight);color:var(--spot-description-font-color);font-family:var(--spot-description-font-family);padding:var(--spot-description-padding);line-height:125%;letter-spacing:-.025rem}.spot-content__wrapper{display:flex;flex-direction:column}@media (min-width: 48rem){.spot-content__wrapper.desktop-layout{display:grid;grid-template-columns:1fr 20.3125rem;align-items:start;gap:1rem}.desktop-layout .spot-benefits__list{grid-row:1}.desktop-layout .spot-selection__options{grid-row:2}.desktop-layout .spot-table__container{grid-row:1 / span 2}}@media (max-width: 52.438rem){.spot-selection__recommended-tag{display:inline-block;margin-left:0}}@media (max-width: 47.938rem){.spot-selection__recommended-tag{margin-top:0rem}}@media (max-width: 32.125rem){.spot-selection__recommended-tag{margin-top:.5rem}}@media (max-width: 47.9375rem){.spot-table__container{display:flex;justify-content:center}.spot-selection__recommended-tag{display:inline-block;margin-left:0}.spot-footer__container{flex-direction:column;margin-top:.5rem}.spot-refund__table{width:100%;table-layout:auto}.spot-refund__table th{padding:0rem}}.spot-benefits__list{list-style-type:none;line-height:125%;gap:.5625rem;font-size:var(--spot-bullets-font-size);font-weight:var(--spot-bullets-font-weight);color:var(--spot-bullets-font-color);font-family:var(--spot-bullets-font-family);padding:var(--spot-bullets-padding);margin-block-start:0rem;margin-block-end:0rem}.spot-benefits__list li{margin-bottom:.5rem;display:flex;align-items:flex-start;gap:.5rem}.spot-benefits__list li svg{flex-shrink:0;position:relative;top:.125rem}.spot-table__container{width:100%}.spot-refund__table{max-width:22rem;border-radius:var(--spot-table-border-radius);overflow:hidden;border:.09375rem solid #636569;table-layout:fixed;margin-bottom:1.5rem;margin-top:.25rem;padding:.625rem}.spot-refund__table--dynamic{height:auto!important;min-height:7.5rem}.spot-refund__table td,.spot-refund__table th{padding:.375rem .625rem;text-align:left}.spot-refund__table th{text-align:left;font-size:var(--spot-table-header-font-size);font-weight:var(--spot-table-header-font-weight);color:var(--spot-table-header-font-color);font-family:var(--spot-table-header-font-family);padding:var(--spot-table-header-padding)}.spot-refund__table td{text-align:left;font-size:var(--spot-table-cell-font-size);font-weight:var(--spot-table-cell-font-weight);color:var(--spot-table-cell-font-color);font-family:var(--spot-table-cell-font-family);padding:var(--spot-table-cell-padding)}input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:.75rem;height:.75rem;border:.0625rem solid var(--spot-radio-border);border-radius:var(--spot-radio-border-radius);margin-right:.5rem;position:relative;vertical-align:middle;top:-.0625rem;cursor:pointer}input[type=radio]:checked{background:var(--spot-radio-checked-background);box-shadow:inset 0 0 0 .0625rem #fff}.spot-selection__options{display:flex;flex-direction:column;gap:.5rem}.spot-selection__option{display:block;position:relative;transition:background .2s;cursor:pointer;font-size:var(--spot-radio-text-font-size);font-weight:var(--spot-radio-text-font-weight);color:var(--spot-radio-text-font-color);font-family:var(--spot-radio-text-font-family);padding:var(--spot-radio-text-padding);margin-right:.5rem;gap:.5rem;flex:1 0 0;align-self:stretch}.spot-selection__option.selected{background:var(--spot-radio-selection-background);border-radius:var(--spot-radio-selection-border-radius);padding:var(--spot-radio-selection-padding)}.spot-selection__recommended-tag{background:var(--spot-recommended-tag-background);color:var(--spot-recommended-tag-font-color);font-size:var(--spot-recommended-tag-font-size);font-weight:var(--spot-recommended-tag-font-weight);padding:var(--spot-recommended-tag-padding);border-radius:var(--spot-recommended-tag-border-radius);margin-left:1.5rem;white-space:nowrap}.spot-selection__error{color:var(--spot-selection-error-font-color);font-size:var(--spot-selection-error-font-size);padding:var(--spot-selection-error-padding);display:none}.spot-payment-terms__wrapper{margin-top:1rem}.spot-payment-terms__header{font-weight:var(--spot-payment-terms-header-font-weight);margin-bottom:.5rem;padding:var(--spot-payment-terms-header-padding);font-size:var(--spot-payment-terms-header-font-size);border-bottom:1px solid var(--spot-payment-terms-header-border-color)}.spot-payment-terms{background-color:var(--spot-payment-terms-background);border-radius:var(--spot-payment-terms-border-radius);padding:var(--spot-payment-terms-padding);margin-right:.5rem;color:var(--spot-payment-terms-font-color);font-size:var(--spot-payment-terms-font-size)}.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 H(i){const e=document.createElement("style");e.textContent=i,document.head.appendChild(e)}H(T);const b={sandbox:"https://api.sandbox.getspot.com/api/v1/quote",production:"https://api.getspot.com/api/v1/quote"};class N{constructor(e={}){this.options={location:"body",showTable:!0,optInSelected:!1,apiConfig:{environment:"production",partnerId:""},quoteRequestData:{},callbacks:{},...e},this._onResize=this._updateLayout.bind(this),this.root=typeof this.options.location=="string"?document.querySelector(this.options.location):this.options.location,this.currentSelection=this.options.optInSelected?"yes":null,this._init()}async _init(){var e,t,o,n,r;try{g(this.options);const{environment:a,partnerId:p}=this.options.apiConfig,l=this.options.apiConfig.customEndpoint||b[a],d=await u(l,p,this.options.quoteRequestData);if(d.status!=="QUOTE_AVAILABLE"){d.status==="NO_MATCHING_QUOTE"&&((e=this.options.callbacks)!=null&&e.noMatchingQuote)&&this.options.callbacks.noMatchingQuote({status:"NO_MATCHING_QUOTE",data:this.options.quoteRequestData});return}this.quote=d.data,this._renderWidget(),this.options.optInSelected&&((t=this.options.callbacks)!=null&&t.onOptIn)&&this.options.callbacks.onOptIn({status:"QUOTE_ACCEPTED",spotPrice:this.quote.spotPrice,quoteId:this.quote.id}),(o=this.options.callbacks)!=null&&o.onQuoteRetrieved&&this.options.callbacks.onQuoteRetrieved(this.quote)}catch(a){(n=this.options.callbacks)!=null&&n.onError&&((r=this.options.callbacks)==null||r.onError({message:a.message,status:a.status,responseBody:a.responseBody}))}}_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])=>{const r=`--${o}`;this.container.style.setProperty(r,n)}),w(this.container,this.quote.communication);const e=document.createElement("div");e.className="spot-content__wrapper",this.container.appendChild(e),C(e,this.quote.communication.bulletPoints),this.options.showTable&&E(e,this.quote.payoutSchedule);const t=k(e,this.quote.spotPrice,this.options.optInSelected);e.appendChild(t),this.paymentTermsEl=s("div",{className:"spot-payment-terms__wrapper",parent:e}),q(this.container,this.quote),window.addEventListener("resize",this._onResize),this._updateLayout(),this._setupOptionListeners(t)}_updateLayout(){const e=window.matchMedia("(min-width: 768px)").matches;this.container.querySelector(".spot-content__wrapper").classList.toggle("desktop-layout",e&&this.options.showTable)}_setupOptionListeners(e){const t=e.querySelectorAll('input[type="radio"]'),o=e.querySelectorAll(".spot-selection__option");t.forEach(n=>{n.addEventListener("change",r=>{var p,c,l;const a=r.target.value;this.hideSelectionError(),this.currentSelection=a,o.forEach(d=>d.classList.remove("selected")),(p=r.target.closest(".spot-selection__option"))==null||p.classList.add("selected"),this.paymentTermsEl&&(this.paymentTermsEl.innerHTML=""),a==="yes"&&(this.options.quoteRequestData.isPartialPayment&&x(this.paymentTermsEl,this.quote),(c=this.options.callbacks)!=null&&c.onOptIn&&this.options.callbacks.onOptIn({status:"QUOTE_ACCEPTED",spotPrice:this.quote.spotPrice,quoteId:this.quote.id})),a==="no"&&((l=this.options.callbacks)!=null&&l.onOptOut)&&this.options.callbacks.onOptOut({status:"QUOTE_DECLINED",quoteId:this.quote.id})})})}showSelectionError(){var e;if(!this.errorEl){this.errorEl=document.createElement("div"),this.errorEl.className="spot-selection__error",this.errorEl.textContent="Please make a selection";const t=(e=this.container)==null?void 0:e.querySelector(".spot-selection__options");t&&t.insertAdjacentElement("afterend",this.errorEl)}this.errorEl.style.display="block"}hideSelectionError(){this.errorEl&&(this.errorEl.style.display="none")}validateSelection(){if(!this.container)return!1;const e=!!this.container.querySelector('input[name="selection"]:checked');return e?this.hideSelectionError():this.showSelectionError(),e}async updateQuote(e){var t,o,n;try{const r={...this.options,quoteRequestData:{...this.options.quoteRequestData,...e}};g(r);const{environment:a,partnerId:p,endpoint:c}=this.options.apiConfig,l=c||b[a],d=await u(l,p,r.quoteRequestData);return d.status!=="QUOTE_AVAILABLE"?(d.status==="NO_MATCHING_QUOTE"&&((t=this.options.callbacks)!=null&&t.noMatchingQuote)&&this.options.callbacks.noMatchingQuote({status:"NO_MATCHING_QUOTE",data:r.quoteRequestData}),!1):(this.options.quoteRequestData=r.quoteRequestData,this.quote=d.data,this.currentSelection=null,this.destroy(),this._renderWidget(),(o=this.options.callbacks)!=null&&o.onQuoteRetrieved&&this.options.callbacks.onQuoteRetrieved(this.quote),!0)}catch(r){return(n=this.options.callbacks)==null||n.onError({message:r.message,status:r.status,responseBody:r.responseBody}),!1}}getSelection(){var e,t;return this.currentSelection==null?null:{selection:this.currentSelection,quoteId:(e=this.quote)==null?void 0:e.id,spotPrice:(t=this.quote)==null?void 0:t.spotPrice,status:this.currentSelection==="yes"?"QUOTE_ACCEPTED":"QUOTE_DECLINED"}}destroy(){window.removeEventListener("resize",this._onResize),this.container&&this.container.parentNode&&this.container.parentNode.removeChild(this.container)}}return N});
+          </svg>`,t}const T=":root{--spot-font-family: Arial;--spot-padding: 1.25rem;--spot-background-color: #ffffff;--spot-font-color: #000000;--spot-border-radius: .5rem;--spot-title-font-size: 1.25rem;--spot-title-font-weight: 700;--spot-title-padding: 0 0 1.25rem 0;--spot-description-font-size: .875rem;--spot-description-font-weight: 400;--spot-description-padding: 0 0 .5rem 0;--spot-bullets-font-size: .875rem;--spot-bullets-font-weight: 400;--spot-bullets-padding: .3125rem;--spot-table-border-radius: .625rem;--spot-table-header-font-size: .875rem;--spot-table-header-font-weight: 700;--spot-table-header-padding: 0 .5rem .625rem;--spot-table-cell-font-size: .815rem;--spot-table-cell-font-weight: 400;--spot-table-cell-padding: 0 .625rem;--spot-radio-border: #000000;--spot-radio-border-radius: .625rem;--spot-radio-checked-background: #000000;--spot-radio-text-font-size: .875rem;--spot-radio-text-font-weight: 400;--spot-radio-text-padding: .625rem;--spot-radio-selection-background: #f4f4f4;--spot-radio-selection-border-radius: .625rem;--spot-radio-selection-padding: .625rem;--spot-recommended-tag-background: #000000;--spot-recommended-tag-font-color: #ffffff;--spot-recommended-tag-font-size: .875rem;--spot-recommended-tag-font-weight: 700;--spot-recommended-tag-padding: .25rem .5rem;--spot-recommended-tag-border-radius: .5rem;--spot-selection-error-font-color: #ff0000;--spot-selection-error-font-size: .875rem;--spot-selection-error-padding: .5rem;--spot-payment-terms-background: #f4f4f4;--spot-payment-terms-border-radius: .625rem;--spot-payment-terms-padding: 1rem;--spot-payment-terms-font-color: #636569;--spot-payment-terms-font-size: .75rem;--spot-payment-terms-header-font-weight: 700;--spot-payment-terms-header-font-size: .875rem;--spot-payment-terms-header-margin-bottom: .5rem;--spot-payment-terms-header-border-color: #c2c2c2;--spot-payment-terms-header-padding: 0 0 .5rem 0;--spot-terms-font-size: .75rem;--spot-terms-font-weight: 400;--spot-terms-font-color: #636569;--spot-terms-padding: 0;--spot-terms-link-text-decoration: underline;--spot-terms-link-font-size: .75rem;--spot-terms-link-font-weight: 400;--spot-terms-link-font-color: #636569;--spot-terms-link-padding: 0}.spot-refund-guarantee{font-family:var(--spot-font-family);padding:var(--spot-padding);background-color:var(--spot-background-color);color:var(--spot-font-color);border:.0625rem solid #e0e0e0;border-radius:var(--spot-border-radius);max-width:51rem;margin:1rem}.spot-refund-guarantee *{color:inherit}.spot-header__title{font-size:var(--spot-title-font-size);font-weight:var(--spot-title-font-weight);padding:var(--spot-title-padding);color:var(--spot-title-font-color);font-family:var(--spot-title-font-family);line-height:120%;letter-spacing:-.03125rem}.spot-header__description{font-size:var(--spot-description-font-size);font-weight:var(--spot-description-font-weight);color:var(--spot-description-font-color);font-family:var(--spot-description-font-family);padding:var(--spot-description-padding);line-height:125%;letter-spacing:-.025rem}.spot-content__wrapper{display:flex;flex-direction:column}@media (min-width: 48rem){.spot-content__wrapper.desktop-layout{display:grid;grid-template-columns:1fr 20.3125rem;align-items:start;gap:1rem}.desktop-layout .spot-benefits__list{grid-row:1}.desktop-layout .spot-selection__options{grid-row:2}.desktop-layout .spot-table__container{grid-row:1 / span 2}}@media (max-width: 52.438rem){.spot-selection__recommended-tag{display:inline-block;margin-left:0}}@media (max-width: 47.938rem){.spot-selection__recommended-tag{margin-top:0rem}}@media (max-width: 32.125rem){.spot-selection__recommended-tag{margin-top:.5rem}}@media (max-width: 47.9375rem){.spot-table__container{display:flex;justify-content:center}.spot-selection__recommended-tag{display:inline-block;margin-left:0}.spot-footer__container{flex-direction:column;margin-top:.5rem}.spot-refund__table{width:100%;table-layout:auto}.spot-refund__table th{padding:0rem}}.spot-benefits__list{list-style-type:none;line-height:125%;gap:.5625rem;font-size:var(--spot-bullets-font-size);font-weight:var(--spot-bullets-font-weight);color:var(--spot-bullets-font-color);font-family:var(--spot-bullets-font-family);padding:var(--spot-bullets-padding);margin-block-start:0rem;margin-block-end:0rem}.spot-benefits__list li{margin-bottom:.5rem;display:flex;align-items:flex-start;gap:.5rem}.spot-benefits__list li svg{flex-shrink:0;position:relative;top:.125rem}.spot-table__container{width:100%}.spot-refund__table{max-width:22rem;border-radius:var(--spot-table-border-radius);overflow:hidden;border:.09375rem solid #636569;table-layout:fixed;margin-bottom:1.5rem;margin-top:.25rem;padding:.625rem}.spot-refund__table--dynamic{height:auto!important;min-height:7.5rem}.spot-refund__table td,.spot-refund__table th{padding:.375rem .625rem;text-align:left}.spot-refund__table th{text-align:left;font-size:var(--spot-table-header-font-size);font-weight:var(--spot-table-header-font-weight);color:var(--spot-table-header-font-color);font-family:var(--spot-table-header-font-family);padding:var(--spot-table-header-padding)}.spot-refund__table td{text-align:left;font-size:var(--spot-table-cell-font-size);font-weight:var(--spot-table-cell-font-weight);color:var(--spot-table-cell-font-color);font-family:var(--spot-table-cell-font-family);padding:var(--spot-table-cell-padding)}input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:.75rem;height:.75rem;border:.0625rem solid var(--spot-radio-border);border-radius:var(--spot-radio-border-radius);margin-right:.5rem;position:relative;vertical-align:middle;top:-.0625rem;cursor:pointer}input[type=radio]:checked{background:var(--spot-radio-checked-background);box-shadow:inset 0 0 0 .0625rem #fff}.spot-selection__options{display:flex;flex-direction:column;gap:.5rem}.spot-selection__option{display:block;position:relative;transition:background .2s;cursor:pointer;font-size:var(--spot-radio-text-font-size);font-weight:var(--spot-radio-text-font-weight);color:var(--spot-radio-text-font-color);font-family:var(--spot-radio-text-font-family);padding:var(--spot-radio-text-padding);margin-right:.5rem;gap:.5rem;flex:1 0 0;align-self:stretch}.spot-selection__option.selected{background:var(--spot-radio-selection-background);border-radius:var(--spot-radio-selection-border-radius);padding:var(--spot-radio-selection-padding)}.spot-selection__recommended-tag{background:var(--spot-recommended-tag-background);color:var(--spot-recommended-tag-font-color);font-size:var(--spot-recommended-tag-font-size);font-weight:var(--spot-recommended-tag-font-weight);padding:var(--spot-recommended-tag-padding);border-radius:var(--spot-recommended-tag-border-radius);margin-left:1.5rem;white-space:nowrap}.spot-selection__error{color:var(--spot-selection-error-font-color);font-size:var(--spot-selection-error-font-size);padding:var(--spot-selection-error-padding);display:none}.spot-payment-terms__wrapper{margin-top:1rem}.spot-payment-terms__header{font-weight:var(--spot-payment-terms-header-font-weight);margin-bottom:.5rem;padding:var(--spot-payment-terms-header-padding);font-size:var(--spot-payment-terms-header-font-size);border-bottom:1px solid var(--spot-payment-terms-header-border-color)}.spot-payment-terms{background-color:var(--spot-payment-terms-background);border-radius:var(--spot-payment-terms-border-radius);padding:var(--spot-payment-terms-padding);margin-right:.5rem;color:var(--spot-payment-terms-font-color);font-size:var(--spot-payment-terms-font-size)}.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 H(i){const e=document.createElement("style");e.textContent=i,document.head.appendChild(e)}H(T);const b={sandbox:"https://api.sandbox.getspot.com/api/v1/quote",production:"https://api.getspot.com/api/v1/quote"};class z{constructor(e={}){this.options={location:"body",showTable:!0,optInSelected:!1,apiConfig:{environment:"production",partnerId:""},quoteRequestData:{},callbacks:{},...e},this._onResize=this._updateLayout.bind(this),this.root=typeof this.options.location=="string"?document.querySelector(this.options.location):this.options.location,this.currentSelection=this.options.optInSelected?"yes":null,this._init()}async _init(){var e,t,o,n,r;try{g(this.options);const{environment:a,partnerId:p}=this.options.apiConfig,l=this.options.apiConfig.customEndpoint||b[a],d=await u(l,p,this.options.quoteRequestData);if(d.status!=="QUOTE_AVAILABLE"){d.status==="NO_MATCHING_QUOTE"&&((e=this.options.callbacks)!=null&&e.noMatchingQuote)&&this.options.callbacks.noMatchingQuote({status:"NO_MATCHING_QUOTE",data:this.options.quoteRequestData});return}this.quote=d.data,this._renderWidget(),this.options.optInSelected&&((t=this.options.callbacks)!=null&&t.onOptIn)&&this.options.callbacks.onOptIn({status:"QUOTE_ACCEPTED",spotPrice:this.quote.spotPrice,quoteId:this.quote.id}),(o=this.options.callbacks)!=null&&o.onQuoteRetrieved&&this.options.callbacks.onQuoteRetrieved(this.quote)}catch(a){(n=this.options.callbacks)!=null&&n.onError&&((r=this.options.callbacks)==null||r.onError({message:a.message,status:a.status,responseBody:a.responseBody}))}}_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])=>{const r=`--${o}`;this.container.style.setProperty(r,n)}),w(this.container,this.quote.communication);const e=document.createElement("div");e.className="spot-content__wrapper",this.container.appendChild(e),C(e,this.quote.communication.bulletPoints),this.options.showTable&&E(e,this.quote.payoutSchedule);const t=k(e,this.options.optInSelected,this.quote.communication);e.appendChild(t),this.paymentTermsEl=s("div",{className:"spot-payment-terms__wrapper",parent:e}),q(this.container,this.quote),window.addEventListener("resize",this._onResize),this._updateLayout(),this._setupOptionListeners(t)}_updateLayout(){const e=window.matchMedia("(min-width: 768px)").matches;this.container.querySelector(".spot-content__wrapper").classList.toggle("desktop-layout",e&&this.options.showTable)}_setupOptionListeners(e){const t=e.querySelectorAll('input[type="radio"]'),o=e.querySelectorAll(".spot-selection__option");t.forEach(n=>{n.addEventListener("change",r=>{var p,c,l;const a=r.target.value;this.hideSelectionError(),this.currentSelection=a,o.forEach(d=>d.classList.remove("selected")),(p=r.target.closest(".spot-selection__option"))==null||p.classList.add("selected"),this.paymentTermsEl&&(this.paymentTermsEl.innerHTML=""),a==="yes"&&(this.options.quoteRequestData.isPartialPayment&&x(this.paymentTermsEl,this.quote),(c=this.options.callbacks)!=null&&c.onOptIn&&this.options.callbacks.onOptIn({status:"QUOTE_ACCEPTED",spotPrice:this.quote.spotPrice,quoteId:this.quote.id})),a==="no"&&((l=this.options.callbacks)!=null&&l.onOptOut)&&this.options.callbacks.onOptOut({status:"QUOTE_DECLINED",quoteId:this.quote.id})})})}showSelectionError(){var e;if(!this.errorEl){this.errorEl=document.createElement("div"),this.errorEl.className="spot-selection__error",this.errorEl.textContent="Please make a selection";const t=(e=this.container)==null?void 0:e.querySelector(".spot-selection__options");t&&t.insertAdjacentElement("afterend",this.errorEl)}this.errorEl.style.display="block"}hideSelectionError(){this.errorEl&&(this.errorEl.style.display="none")}validateSelection(){if(!this.container)return!1;const e=!!this.container.querySelector('input[name="selection"]:checked');return e?this.hideSelectionError():this.showSelectionError(),e}async updateQuote(e){var t,o,n;try{const r={...this.options,quoteRequestData:{...this.options.quoteRequestData,...e}};g(r);const{environment:a,partnerId:p,endpoint:c}=this.options.apiConfig,l=c||b[a],d=await u(l,p,r.quoteRequestData);return d.status!=="QUOTE_AVAILABLE"?(d.status==="NO_MATCHING_QUOTE"&&((t=this.options.callbacks)!=null&&t.noMatchingQuote)&&this.options.callbacks.noMatchingQuote({status:"NO_MATCHING_QUOTE",data:r.quoteRequestData}),!1):(this.options.quoteRequestData=r.quoteRequestData,this.quote=d.data,this.currentSelection=null,this.destroy(),this._renderWidget(),(o=this.options.callbacks)!=null&&o.onQuoteRetrieved&&this.options.callbacks.onQuoteRetrieved(this.quote),!0)}catch(r){return(n=this.options.callbacks)==null||n.onError({message:r.message,status:r.status,responseBody:r.responseBody}),!1}}getSelection(){var e,t;return this.currentSelection==null?null:{selection:this.currentSelection,quoteId:(e=this.quote)==null?void 0:e.id,spotPrice:(t=this.quote)==null?void 0:t.spotPrice,status:this.currentSelection==="yes"?"QUOTE_ACCEPTED":"QUOTE_DECLINED"}}destroy(){window.removeEventListener("resize",this._onResize),this.container&&this.container.parentNode&&this.container.parentNode.removeChild(this.container)}}return z});

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@getspot/spot-widget",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "publishConfig": {
     "access": "public"
   },

package/src/index.js CHANGED Viewed

@@ -119,8 +119,8 @@ class SpotWidget {
     if (this.options.showTable) renderTable(cw, this.quote.payoutSchedule);
     const optsEl = renderOptions(
       cw,
-      this.quote.spotPrice,
-      this.options.optInSelected
+      this.options.optInSelected,
+      this.quote.communication
     );
     cw.appendChild(optsEl);
     this.paymentTermsEl = makeEl("div", {

package/src/ui.js CHANGED Viewed

@@ -67,7 +67,7 @@ export function renderTable(container, schedule = []) {
 }
 // radio buttons
-export function renderOptions(container, spotPrice, optInSelected) {
+export function renderOptions(container, optInSelected, communication) {
   const optionsWrapper = makeEl("div", {
     className: "spot-selection__options",
     parent: container,
@@ -85,7 +85,7 @@ export function renderOptions(container, spotPrice, optInSelected) {
   if (optInSelected) yesInput.checked = true;
   makeEl("strong", {
-    text: `Yes, protect my booking for $${spotPrice}`,
+    text: communication.yesOptionText,
     parent: yesOption,
   });
@@ -105,7 +105,7 @@ export function renderOptions(container, spotPrice, optInSelected) {
   noInput.name = "selection";
   noInput.value = "no";
-  makeEl("span", { text: "No, do not protect my booking", parent: noOption });
+  makeEl("span", { text: communication.noOptionText, parent: noOption });
   return optionsWrapper;
 }