1import{LitElement,html,css,unsafeHTML}from"https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js";export class SkioPlanPicker extends LitElement{static properties={key:{type:String},product:{type:Object},productHandle:{type:String},selectedVariant:{type:Object},options:{type:Object},moneyFormat:{type:String},quantity:{type:Number},rules:{type:Array},rule:{type:Object},cart:{type:Object},availableSellingPlanGroups:{state:!0},selectedSellingPlanGroup:{type:Object},selectedSellingPlan:{type:Object},tooltipContent:{type:String},disableUrl:{type:Boolean},debug:{type:Boolean}};static styles=[css` 2 :host { 3 width: 100%; 4 max-width: 440px; 5 } 6 7 .skio-plan-picker { 8 display: flex; 9 gap: 1rem; 10 padding: 0; 11 border: 0; 12 font-size: 15px; 13 color: black; 14 width: 100%; 15 margin-bottom: 1rem; 16 font-family: inherit; 17 } 18 19 :host([layout='hidden']) .skio-plan-picker { 20 display: none; 21 } 22 23 :host([layout='vertical']) .skio-plan-picker { 24 flex-direction: column; 25 } 26 27 :host([layout='horizontal']) .skio-plan-picker { 28 flex-direction: row; 29 flex-wrap: wrap; 30 } 31 32 .sr-only { 33 position: absolute; 34 overflow: hidden; 35 clip: rect(0, 0, 0, 0); 36 width: 1px; 37 height: 1px; 38 margin: -1px; 39 padding: 0; 40 border: 0; 41 } 42 43 .group-container { 44 display: block; 45 position: relative; 46 transition: border-color 0.2s ease; 47 border: var(--skio-group-border-width, 1px) solid var(--skio-group-border-color, #ccc); 48 border-radius: var(--skio-group-border-radius, 0); 49 background-color: var(--skio-group-background-color, transparent); 50 color: var(--skio-group-text-color, #000); 51 } 52 53 .group-container--selected { 54 border-color: var(--skio-group-border-selected-color, #333); 55 background-color: var(--skio-group-background-selected-color, transparent); 56 color: var(--skio-group-text-selected-color, #000); 57 } 58 59 .group-container--last { 60 order: 1; 61 } 62 63 :host([layout='horizontal']) .group-container { 64 width: calc(50% - 0.5rem - calc(2 * var(--skio-group-border-width, 1px))); 65 } 66 67 .group-input { 68 position: absolute; 69 opacity: 0; 70 width: 0px; 71 height: 0px; 72 } 73 74 .group-input:focus-visible ~ .group-label { 75 outline: 2px #ccc solid; 76 outline-offset: 4px; 77 } 78 79 .group-label { 80 display: flex; 81 flex-direction: column; 82 padding: 10px; 83 cursor: pointer; 84 } 85 86 .group-topline { 87 display: flex; 88 align-items: center; 89 width: 100%; 90 gap: 8px; 91 } 92 93 .group-container--selected .group-topline { 94 font-weight: 700; 95 } 96 97 :host([layout='horizontal']) .group-topline { 98 flex-direction: column; 99 text-align: center; 100 } 101 102 .skio-radio__container { 103 display: flex; 104 color: var(--skio-group-border-color, #333); 105 } 106 107 .group-container--selected .skio-radio__container { 108 color: var(--skio-group-border-selected-color, #333); 109 } 110 111 .skio-radio { 112 transform-origin: center; 113 opacity: 0; 114 transform: scale(0); 115 transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); 116 } 117 118 .group-label:hover .skio-radio { 119 opacity: 0.75; 120 transform: scale(1); 121 } 122 123 .group-container--selected .group-label .skio-radio { 124 opacity: 1; 125 transform: scale(1); 126 } 127 128 .skio-price { 129 display: flex; 130 justify-content: flex-end; 131 flex-wrap: wrap; 132 align-items: center; 133 text-align: right; 134 gap: 4px; 135 line-height: 1; 136 margin-left: auto; 137 vertical-align: middle; 138 font-weight: 500; 139 } 140 141 .skio-price s { 142 font-size: 13px; 143 font-weight: 400; 144 opacity: 0.75; 145 } 146 147 :host([layout='horizontal']) .skio-price { 148 text-align: center; 149 margin-right: auto; 150 } 151 152 .group-content { 153 display: flex; 154 flex-direction: column; 155 opacity: 1; 156 width: auto; 157 max-height: 1000px; 158 transition: 159 max-height 0.15s cubic-bezier(0.4, 0, 0.2, 1), 160 opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); 161 } 162 163 .group-content.margin-left { 164 margin-left: 25px; 165 } 166 167 .group-content p { 168 margin: 0.5rem 0 0 0; 169 font-size: 13px; 170 color: #000; 171 } 172 173 :host([layout='horizontal']) .group-content { 174 width: 100%; 175 order: 2; 176 } 177 178 /* Hide frequency if not selected */ 179 .group-container:not(.group-container--selected) .group-content { 180 pointer-events: none; 181 opacity: 0; 182 max-height: 0; 183 visibility: hidden; 184 } 185 186 :host([layout='horizontal']) .group-container:not(.group-container--selected) + .group-content { 187 pointer-events: none; 188 opacity: 0; 189 max-height: 0; 190 visibility: hidden; 191 } 192 193 .group-title { 194 width: 100%; 195 max-width: 70%; 196 line-height: 1.5; 197 position: relative; 198 } 199 200 :host([layout='horizontal']) .group-title { 201 max-width: 100%; 202 } 203 204 .savings { 205 color: var(--skio-discount-text-color, #fff); 206 } 207 208 .savings.bubble { 209 padding: 0px 8px; 210 background-color: var(--skio-discount-color, #0fa573); 211 border: 1px var(--skio-discount-color, #0fa573) solid; 212 border-radius: 4px; 213 font-size: 12px; 214 color: var(--skio-discount-text-color, #fff); 215 white-space: nowrap; 216 } 217 218 .skio-tooltip { 219 position: relative; 220 display: inline-block; 221 cursor: pointer; 222 margin-left: 5px; 223 } 224 225 .skio-tooltip svg { 226 vertical-align: middle; 227 } 228 229 .skio-tooltip-text { 230 visibility: hidden; 231 opacity: 0; 232 position: absolute; 233 top: 100%; 234 left: 50%; 235 transform: translateX(-50%); 236 background-color: var(--skio-tooltip-background-color, #333); 237 color: var(--skio-tooltip-text-color, #fff); 238 padding: 5px 10px; 239 border-radius: 5px; 240 font-size: 12px; 241 white-space: normal; 242 width: 200px; 243 z-index: 1000; 244 transition: opacity 0.3s ease; 245 } 246 247 .skio-tooltip:hover .skio-tooltip-text, 248 .skio-tooltip:focus-within .skio-tooltip-text { 249 visibility: visible; 250 opacity: 1; 251 } 252 253 .selling-plan-dropdown { 254 appearance: none; 255 -webkit-appearance: none; 256 -moz-appearance: none; 257 display: flex; 258 align-items: center; 259 gap: 5px; 260 width: 100%; 261 margin-top: 5px; 262 padding: 8px 30px 8px 10px; 263 background-color: #f7f7f7; 264 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E"); 265 background-repeat: no-repeat; 266 background-position: right 10px top 50%; 267 background-size: 16px; 268 border: 1px solid #ccc; 269 border-radius: 2px; 270 font-size: 14px; 271 color: var(--skio-group-text-selected-color, #000); 272 text-overflow: ellipsis; 273 white-space: nowrap; 274 outline: none !important; 275 font-family: inherit; 276 } 277 278 .selling-plan-dropdown-label { 279 color: #666666; 280 font-weight: 500; 281 } 282 283 .selling-plan-dropdown--one { 284 background-image: none; 285 pointer-events: none; 286 background: transparent; 287 } 288 289 .selling-plan-buttons { 290 display: grid; 291 grid-template-columns: repeat(auto-fill, minmax(var(--skio-button-plan-selector-width, 20px), 1fr)); 292 gap: 10px; 293 padding: 0.75rem 0; 294 border: 0; 295 font-size: 13px; 296 } 297 298 .selling-plan-buttons input[type='radio'] { 299 position: absolute; 300 opacity: 0; 301 width: 0; 302 height: 0; 303 } 304 305 .selling-plan-buttons label { 306 display: flex; 307 align-items: center; 308 justify-content: center; 309 cursor: pointer; 310 border: 1px solid #ccc; 311 text-align: center; 312 padding: 1rem 0.5rem; 313 } 314 315 .selling-plan-buttons input[type='radio']:checked + label { 316 border-color: #000; 317 } 318 319 .selling-plan-buttons input:focus-visible + label { 320 outline: 2px #ccc solid; 321 outline-offset: 4px; 322 } 323 324 .group-content-additional { 325 margin-top: 5px; 326 } 327 328 .skio-details { 329 --text-color: #333; 330 --text-color-secondary: #888; 331 user-select: none; 332 -webkit-user-select: none; 333 margin-bottom: 20px; 334 order: 3; 335 max-width: max-content; 336 } 337 338 .skio-details summary::-webkit-details-marker, 339 .skio-details summary::marker, 340 .skio-details slot { 341 color: rgba(0, 0, 0, 0) !important; 342 } 343 344 .skio-details summary { 345 margin-top: 15px; 346 } 347 348 .skio-details summary span { 349 font-size: 0.9em; 350 display: flex; 351 padding: 0.5em 0; 352 cursor: pointer; 353 align-items: center; 354 gap: 10px; 355 text-decoration: underline; 356 margin-top: -40px; 357 color: #000; 358 } 359 360 @keyframes fadeInDown { 361 0% { 362 opacity: 0; 363 transform: translateY(-15px); 364 } 365 100% { 366 opacity: 1; 367 transform: translateY(0px); 368 } 369 } 370 .skio-details[open] > .skio-details--content { 371 animation-name: fadeInDown; 372 animation-duration: 0.3s; 373 } 374 375 .skio-details--content { 376 position: absolute; 377 z-index: 1020; 378 padding: 1em; 379 width: fit-content; 380 border-radius: 5px; 381 background: white; 382 box-shadow: 383 0 0 5px rgb(23 24 24 / 5%), 384 0 1px 2px rgb(0 0 0 / 7%); 385 } 386 387 .skio-details ul { 388 margin: 0; 389 padding: 0; 390 } 391 392 .skio-details ul li { 393 display: flex; 394 align-items: flex-start; 395 gap: 0.75em; 396 397 margin-bottom: 1em; 398 } 399 400 .skio-details .skio-content { 401 display: flex; 402 flex-direction: column; 403 } 404 405 .skio-details .skio-content p { 406 font-size: 0.9em; 407 408 margin-top: 0; 409 margin-bottom: 0; 410 411 letter-spacing: 0; 412 line-height: 1.5; 413 414 color: var(--text-color); 415 } 416 417 .skio-details ul li small { 418 font-size: 0.7em; 419 color: var(--text-color-secondary); 420 } 421 422 .skio-details .skio-icon { 423 display: flex; 424 425 width: 2.25em; 426 height: 2.25em; 427 428 color: var(--text-color); 429 background: #f8f8f8; 430 border-radius: 100%; 431 432 flex-shrink: 0; 433 align-items: center; 434 justify-content: center; 435 } 436 437 .skio-details .skio-icon svg { 438 width: 1.25em; 439 height: 1.25em; 440 441 color: inherit; 442 } 443 444 .skio-details--footer { 445 display: flex; 446 align-items: center; 447 justify-content: space-between; 448 font-size: 0.9em; 449 } 450 451 .skio-details--footer a { 452 color: var(--text-color); 453 } 454 455 .skio-manage-link { 456 text-decoration: underline; 457 } 458 459 .powered-by-skio { 460 font-size: 0.8em; 461 462 display: flex; 463 text-decoration: none; 464 465 align-items: center; 466 gap: 3px; 467 } 468 469 .setupMode { 470 position: relative; 471 color: black; 472 padding: 1rem; 473 display: flex; 474 flex-direction: column; 475 gap: 10px; 476 margin-bottom: 1rem; 477 font-size: 14px; 478 border-style: solid; 479 border-width: 4px; 480 border-image: repeating-linear-gradient(-55deg, #000, #000 20px, #ffb101 20px, #ffb101 40px) 10; 481 } 482 483 .setupMode:after { 484 content: 'Setup Mode'; 485 position: absolute; 486 top: 0; 487 right: 0; 488 background-color: black; 489 color: white; 490 padding: 0.25rem 1rem; 491 font-size: 13px; 492 } 493 494 .setupMode .detection { 495 display: grid; 496 grid-template-columns: auto 1fr; 497 gap: 10px; 498 } 499 500 .setupMode .detection small { 501 grid-column: 1/-1; 502 } 503 `];constructor(){super(),this.debug=this.debug||window?.Shopify?.designMode,this.variantChanged=!1,this.rules=[],this.rule=null,this.quantity=1,this.showDetail
503sHover=!1}async connectedCallback(){super.connectedCallback(),this.log("Mounted"),this.productHandle&&(this.loading=!0,this.fetchProduct(this.productHandle)),this.bindFormEvents(),this.bindCartEvents(),this.rules=await this.fetchRules(),await this.getRule()}radioTemplate(){return html` 504 <div class="skio-radio__container"> 505 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 506 <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1"></circle> 507 <circle class="skio-radio" cx="12" cy="12" r="7" fill="currentColor"></circle> 508 </svg> 509 </div> 510 `}sellingPlanDropdown(group){return html` 511 <select 512 class="selling-plan-dropdown ${this.getAvailableSellingPlans(group).length==1?"selling-plan-dropdown--one":""}" 513 @change=${e=>{this.selectSellingPlan(e.target.value)}} 514 > 515 ${group?this.getAvailableSellingPlans(group).map(selling_plan=>html` <option ?selected=${group.selected_selling_plan.id===selling_plan.id} value=${selling_plan.id}>${selling_plan.name}</option> `):""} 516 </select> 517 `}sellingPlanButtons(group){return html` 518 <fieldset class="selling-plan-buttons"> 519 <legend class="sr-only">Select subscription interval</legend> 520 ${group?this.getAvailableSellingPlans(group).map(selling_plan=>html` 521 <input 522 type="radio" 523 name="selling_plan_button" 524 value="${selling_plan.id}" 525 id="selling_plan_button-${selling_plan.id}" 526 @change="${e=>this.selectSellingPlan(selling_plan.id)}" 527 ?checked=${group.selected_selling_plan===selling_plan} 528 /> 529 530 <label for="selling_plan_button-${selling_plan.id}"> ${selling_plan.name} </label> 531 `):""} 532 </fieldset> 533 `}invalidIcon(){return html` 534 <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#D22B2B" class="w-6 h-6"> 535 <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> 536 </svg> 537 `}validIcon(){return html` 538 <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#0BDA51" class="w-6 h-6"> 539 <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> 540 </svg> 541 `}setupMode(){return html` 542 <div class="setupMode"> 543 Skio Plan Picker 544 <small>This will not appear on the live site.</small> 545 546 <small>Key: ${this.key}</small> 547 548 <div class="detection">${this.product?this.validIcon():this.invalidIcon()} Product</div> 549 550 <div class="detection">${this.selectedVariant?this.validIcon():this.invalidIcon()} Selected Variant</div> 551 552 <div class="detection">${this.form?this.validIcon():this.invalidIcon()} Form</div> 553 554 <div class="detection">${this.variantInput?this.validIcon():this.invalidIcon()} Variant Input</div> 555 556 <div class="detection"> 557 ${this.variantChanged?this.validIcon():this.invalidIcon()} Variant Change Detection 558 <small>Please attempt to change the selected variant.</small> 559 </div> 560 561 <small>If any of these don't pass please troubleshoot using our <a target="_blank" rel="noreferrer" href="https://integrate.skio.com/troubleshooting">troubleshooting guide</a>.</small> 562 </div> 563 `}groupContent(group){return html` 564 <div class="group-content ${this.options?.layout=="horizontal"?"":this.options?.show_radio_selector&&this.options?.dropdownPosition=="inside"?"margin-left":""}"> 565 <span class="selling-plan-dropdown-label">${this.additionalFrequencyLabel()}</span> 566 ${this.options?.selector_type=="dropdown"?this.sellingPlanDropdown(group):""} 567 568 <!-- TODO: Make the label have the border instead of the group --> 569 ${this.options?.selector_type=="button"?this.sellingPlanButtons(group):""} ${this.additionalContentText()} 570 </div> 571 `}
571showDetails(){return html` 572 <details class="skio-details" @mouseover=${e=>this.detailsMouseover()} @mouseleave=${e=>this.detailsMouseleave()}> 573 <summary> 574 <span> 575 <svg 576 xmlns="http://www.w3.org/2000/svg" 577 width="18" 578 height="18" 579 viewBox="0 0 24 24" 580 fill="none" 581 stroke="currentColor" 582 stroke-width="2" 583 stroke-linecap="round" 584 stroke-linejoin="round" 585 class="ai ai-ArrowRepeat" 586 > 587 <path d="M18 2l3 3-3 3" /> 588 <path d="M6 22l-3-3 3-3" /> 589 <path d="M21 5H10a7 7 0 0 0-7 7" /> 590 <path d="M3 19h11a7 7 0 0 0 7-7" /> 591 </svg> 592 593 How do subscriptions work? 594 </span> 595 </summary> 596 <div class="skio-details--content"> 597 <ul> 598 <li> 599 <div class="skio-icon"> 600 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 601 <path 602 stroke-linecap="round" 603 stroke-linejoin="round" 604 d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" 605 /> 606 </svg> 607 </div> 608 <div class="skio-content"> 609 <p>Get exclusive deals</p> 610 <small>Subscribe for unique discounts</small> 611 </div> 612 </li> 613 <li> 614 <div class="skio-icon"> 615 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> 616 <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" /> 617 </svg> 618 </div> 619 <div class="skio-content"> 620 <p>Edit your subscription anytime</p> 621 <small>Edit products, delivery schedule and more</small> 622 </div> 623 </li> 624 <li> 625 <div class="skio-icon"> 626 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> 627 <path 628 fill-rule="evenodd" 629 d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" 630 clip-rule="evenodd" 631 /> 632 </svg> 633 </div> 634 635 <div class="skio-content"> 636 <p>No commitment</p> 637 <small>Easy to cancel if it's not for you</small> 638 </div> 639 </li> 640 </ul> 641 <div class="skio-details--footer"> 642 <a class="skio-manage-link" href="/a/account/login">Manage subscriptions</a> 643 644 <a style="letter-spacing: 0" class="powered-by-skio" href="https://skio.com/?utm_source=eonsincshop.myshopify.com&utm_medium=details_popover" target="_blank" rel="noopener"> 645 Powered by
646 <svg width="24" height="11" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg"> 647 <path 648 d="M4.28399 5.78801C4.12399 5.63601 3.93599 5.50801 3.71999 5.40401C3.50399 5.30001 3.27599 5.24801 3.03599 5.24801C2.85199 5.24801 2.67999 5.28401 2.51999 5.35601C2.36799 5.42801 2.29199 5.55201 2.29199 5.72801C2.29199 5.89601 2.37599 6.01601 2.54399 6.08801C2.71999 6.16001 2.99999 6.24001 3.38399 6.32801C3.60799 6.37601 3.83199 6.44401 4.05599 6.53201C4.28799 6.62001 4.49599 6.73601 4.67999 6.88001C4.86399 7.02401 5.01199 7.20001 5.12399 7.40801C5.23599 7.61601 5.29199 7.86401 5.29199 8.15201C5.29199 8.52801 5.21599 8.84801 5.06399 9.11201C4.91199 9.36801 4.71199 9.57601 4.46399 9.73601C4.22399 9.89601 3.95199 10.012 3.64799 10.084C3.34399 10.156 3.03999 10.192 2.73599 10.192C2.24799 10.192 1.76799 10.116 1.29599 9.96401C0.831989 9.80401 0.443989 9.57201 0.131989 9.26801L1.23599 8.10401C1.41199 8.29601 1.62799 8.45601 1.88399 8.58401C2.13999 8.71201 2.41199 8.77601 2.69999 8.77601C2.85999 8.77601 3.01599 8.74001 3.16799 8.66801C3.32799 8.58801 3.40799 8.45201 3.40799 8.26001C3.40799 8.07601 3.31199 7.94001 3.11999 7.85201C2.92799 7.76401 2.62799 7.67201 2.21999 7.57601C2.01199 7.52801 1.80399 7.46401 1.59599 7.38401C1.38799 7.30401 1.19999 7.19601 1.03199 7.06001C0.871989 6.92401 0.739989 6.75601 0.635989 6.55601C0.531989 6.35601 0.479989 6.11601 0.479989 5.83601C0.479989 5.47601 0.555989 5.17201 0.707989 4.92401C0.859989 4.66801 1.05599 4.46001 1.29599 4.30001C1.53599 4.14001 1.79999 4.02401 2.08799 3.95201C2.38399 3.87201 2.67599 3.83201 2.96399 3.83201C3.41199 3.83201 3.84799 3.90401 4.27199 4.04801C4.70399 4.18401 5.06799 4.39201 5.36399 4.67201L4.28399 5.78801Z" 649 fill="black" 650 /> 651 <path d="M12.8481 10H10.4121L8.45615 7.13201H8.42015V10H6.44015V0.928009H8.42015V6.44801H8.45615L10.3641 4.02401H12.7521L10.4481 6.72401L12.8481 10Z" fill="black" /> 652 <path 653 d="M15.7009 2.11601C15.7009 2.26801 15.6689 2.41201 15.6049 2.54801C15.5489 2.67601 15.4689 2.78801 15.3649 2.88401C15.2689 2.98001 15.1489 3.05601 15.0049 3.11201C14.8689 3.16801 14.7249 3.19601 14.5729 3.19601C14.2529 3.19601 13.9849 3.09201 13.7689 2.88401C13.5529 2.66801 13.4449 2.41201 13.4449 2.11601C13.4449 1.97201 13.4729 1.83601 13.5289 1.70801C13.5849 1.57201 13.6649 1.45601 13.7689 1.36001C13.8729 1.26401 13.9929 1.18801 14.1289 1.13201C14.2649 1.06801 14.4129 1.03601 14.5729 1.03601C14.7249 1.03601 14.8689 1.06401 15.0049 1.12001C15.1489 1.17601 15.2689 1.25201 15.3649 1.34801C15.4689 1.44401 15.5489 1.56001 15.6049 1.69601C15.6689 1.82401 15.7009 1.96401 15.7009 2.11601ZM13.5889 10V4.02401H15.5569V10H13.5889Z" 654 fill="black" 655 /> 656 <path 657 d="M23.4516 6.98801C23.4516 7.47601 23.3636 7.92001 23.1876 8.32001C23.0116 8.71201 22.7716 9.04801 22.4676 9.32801C22.1636 9.60001 21.8116 9.81201 21.4116 9.96401C21.0116 10.116 20.5836 10.192 20.1276 10.192C19.6796 10.192 19.2516 10.116 18.8436 9.96401C18.4436 9.81201 18.0916 9.60001 17.7876 9.32801C17.4916 9.04801 17.2556 8.71201 17.0796 8.32001C16.9036 7.92001 16.8156 7.47601 16.8156 6.98801C16.8156 6.50001 16.9036 6.06001 17.0796 5.66801C17.2556 5.27601 17.4916 4.94401 17.7876 4.67201C18.0916 4.40001 18.4436 4.19201 18.8436 4.04801C19.2516 3.90401 19.6796 3.83201 20.1276 3.83201C20.5836 3.83201 21.0116 3.90401 21.4116 4.04801C21.8116 4.19201 22.1636 4.40001 22.4676 4.67201C22.7716 4.94401 23.0116 5.27601 23.1876 5.66801C23.3636 6.06001 23.4516 6.50001 23.4516 6.98801ZM21.5556 6.98801C21.5556 6.79601 21.5236 6.60801 21.4596 6.42401C21.3956 6.24001 21.3036 6.08001 21.1836 5.94401C21.0636 5.80001 20.9156 5.68401 20.7396 5.59601C20.5636 5.50801 20.3596 5.46401 20.1276 5.46401C19.8956 5.46401 19.6916 5.50801 19.5156 5.59601C19.3396 5.68401 19.1916 5.80001 19.0716 5.94401C18.9596 6.08001 18.8716 6.24001 18.8076 6.42401C18.7516 6.60801 18.7236 6.79601 18.7236 6.98801C18.7236 7.18001 18.7516 7.36801 18.8076 7.55201C18.8716 7.73601 18.9636 7.90401 19.0836 8.05601C19.2036 8.20001 19.3516 8.31601 19.5276 8.40401C19.7036 8.49201 19.9076 8.53601 20.1396 8.53601C20.3716 8.53601 20.5756 8.49201 20.7516 8.40401C20.9276 8.31601 21.0756 8.20001 21.1956 8.05601C21.3156 7.90401 21.4036 7.73601 21.4596 7.55201C21.5236 7.36801 21.5556 7.18001 21.5556 6.98801
657Z" 658 fill="black" 659 /> 660 </svg> 661 </a> 662 </div> 663 </div> 664 </details> 665 `}render(){if(!this.viable()||this.options?.layout==="hidden")return this.debug?this.setupMode():"";if(this.selectedVariant.selling_plan_allocations.length===0&&!this.options?.show_without_subscription)return this.debug?this.setupMode():"";if(!(this.availableSellingPlanGroups?.length==0&&!this.options?.show_without_subscription))return html` 666 ${this.debug?this.setupMode():null} 667 668 <fieldset class="skio-plan-picker" role="radiogroup" aria-labelledby="skio-plan-picker-legend"> 669 <legend id="skio-plan-picker-legend" class="${this.options?.show_legend?"":"sr-only"}">${unsafeHTML(this.options?.legend_content)}</legend> 670 671 ${this.product.requires_selling_plan?"":html` 672 <div 673 class="group-container ${this.selectedSellingPlanGroup==null?"group-container--selected":""} ${this.options?.onetime_first?"":"group-container--last"}" 674 @click=${()=>this.selectSellingPlanGroup(null)} 675 > 676 <input 677 id="one-time-${this.key}" 678 class="group-input" 679 name="skio-group-${this.key}" 680 type="radio" 681 value="One time purchase" 682 ?checked=${!this.selectedSellingPlanGroup} 683 @change=${()=>this.selectSellingPlanGroup(null)} 684 /> 685 686 <label class="group-label" for="one-time-${this.key}"> 687 <div class="group-topline"> 688 ${this.options?.layout=="horizontal"?"":this.options?.show_radio_selector?this.radioTemplate():""} 689 690 <div class="group-title">${this.options?.onetime_title?this.options?.onetime_title:"One time purchase"}</div> 691 692 <div class="skio-price" aria-live="polite"> 693 ${this.options?.show_compare_price&&this.selectedVariant?.compare_at_price>this.selectedVariant.price?html`<s aria-hidden="true">${this.money(this.selectedVariant.compare_at_price)}</s>`:""} 694 ${this.money(this.selectedVariant.price)} ${this.options?.show_unit_price?this.unitPriceTemplate():""} 695 </div> 696 </div> 697 </label> 698 </div> 699 `} 700 ${this.availableSellingPlanGroups?.length?this.availableSellingPlanGroups.map((group,index)=>html` 701 <div class="group-container ${this.selectedSellingPlanGroup==group?"group-container--selected":""}"> 702 <input 703 id="group-${index}-${this.key}" 704 class="group-input" 705 name="skio-group-${this.key}" 706 type="radio" 707 value="${group.id}" 708 @change=${()=>this.selectSellingPlanGroup(group)} 709 ?checked=${this.selectedSellingPlanGroup==group} 710 /> 711 712 <label class="group-label" for="group-${index}-${this.key}"> 713 <div class="group-topline"> 714 ${this.options?.layout=="horizontal"?"":this.options?.show_radio_selector?this.radioTemplate():""} 715 716 <div class="group-title"> 717 ${group.name!=="Prepaid"&&this.options?.subscription_title?this.options?.subscription_title:group.name=="Prepaid"&&this.options?.prepaid_title?this.options?.prepaid_title:group.name} 718 ${this.discountText(group.selected_selling_plan)?html` <span class="savings ${this.options?.discount_style}"> ${this.discountText(group.selected_selling_plan)} </span> `:html``} 719 ${this.tooltipContent?html`<span class="skio-tooltip" tabindex="0" aria-describedby="skio-tooltip-${this.key}-${index}"> 720 <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zM7 4h2v2H7V4zm0 3h2v5H7V7z" /></svg> 721 <span id="skio-tooltip-${this.key}-${index}" class="skio-tooltip-text" role="tooltip">${this.tooltipContent}</span> 722 </span>`:""} 723 </div> 724 725 <div class="skio-price" aria-live="polite"> 726 ${this.options?.show_compare_price&&(this.selectedVariant?.compare_at_price>this.selectedVariant.price||this.selectedVariant.price>this.price(group.selected_selling_plan,!1))?html`<s aria-hidden="true">${this.money(this.selectedVariant.compare_at_price?this.selectedVariant.compare_at_price:this.selectedVariant.price)}</s>`:""} 727 ${this.price(group.selected_selling_plan)} ${this.options?.show_unit_price?this.unitPriceTemplate(group.selected_selling_plan):""} 728 </div> 729 </div> 730 731 ${this.options?.layout=="vertical"&&this.options?.dropdownPosition=="inside"?this.groupContent(group):""} 732 </label> 733 </div> 734 ${this.selectedSellingPlanGroup==group&&(this.options?.layout=="horizontal"||this.options?.dropdownPosition=="underneath")?this.groupContent(group):""} 735 `):""}
736 ${this.options?.show_details==!0?this.showDetails():""} 737 </fieldset> 738 `}async fetchRules(){if(sessionStorage.getItem("skio-discount-rules"))return JSON.parse(sessionStorage.getItem("skio-discount-rules"));{const rules=await fetch(`https://api.skio.com/storefront-http/get-rules-by-domain-or-hostname?domain=${window?.Shopify?.shop}`).then(response=>response.json()).then(response=>response.rules.filter(rule=>rule.type!=="surpriseDelight").sort((a,b)=>a.minQuantityToDiscount-b.minQuantityToDiscount));return sessionStorage.setItem("skio-discount-rules",JSON.stringify(rules)),rules}}eligibleItemCount(rule){const eligibleQuantity=rule?.productVariantIds.some(gid=>gid.includes(this.selectedVariant.id))?this.quantity:0;return this.cart?.items?Number(this.cart?.items.reduce((aggregate,item)=>rule?.productVariantIds.some(gid=>gid.includes(item.id)&&item.selling_plan_allocation&&gid.includes(this.selectedVariant.id))?aggregate+item.quantity:aggregate,0))+eligibleQuantity:eligibleQuantity}getRule(){let largestMinQuantity={value:-1,index:-1};
738this.rules.forEach((rule,index)=>{largestMinQuantity.value<rule.minQuantityToDiscount&&rule.minQuantityToDiscount<=this.eligibleItemCount(rule)&&(largestMinQuantity.value=rule.minQuantityToDiscount,largestMinQuantity.index=index)}),this.rule=largestMinQuantity.index>-1?this.rules[largestMinQuantity.index]:null}bindCartEvents(){document.addEventListener("CartUpdated",event=>{this.cart=event.detail})}bindFormEvents(){if(this.form=document.querySelector(`#${this.options?.form_id}`),this.form||(this.form=this.findProductForm()),!this.form){this.error("No valid product form found");return}this.debug&&(this.form.style.borderStyle="solid",this.form.style.borderWidth="4px",this.form.style.borderImage="repeating-linear-gradient(-55deg,#000,#000 20px,#ffb101 20px,#ffb101 40px)10"),this.form.getAttribute("id")||this.form.setAttribute("id",`skio-form-${this.product.id}`);const sellingPlanInput=this.querySelector('input[name="selling_plan"]');sellingPlanInput&&sellingPlanInput.setAttribute("form",this.form.getAttribute("id")),this.variantInput=this.form.querySelector('[name="id"]'),this.variantInput||(this.variantInput=document.querySelector(`[name="id"][form="${this.options?.form_id}"]`)),this.variantInput&&this.variantInput.addEventListener("change",e=>{this.selectedVariant=this.product.variants.find(variant=>variant.id==e.target.value),this.variantChanged=!0});const $quantityInput=this.form.querySelector('[name="quantity"]');$quantityInput&&(this.quantity=Number($quantityInput.value),$quantityInput.addEventListener("input",()=>{this.quantity=Number($quantityInput.value)}));let skio=this;document.addEventListener("variantChanged",function(e){let variantId=e.detail.variantId,variant=skio.product.variants.find(x=>x.id==variantId);variant?skio.selectedVariant=variant:skio.log("Unable to find variant with id: ",variantId),this.variantChanged=!0,skio.requestUpdate()})}findProductForm(){const formFromParent=this.findFormThroughParents();return formFromParent||this.getAllProductForms()[0]||null}findFormThroughParents(){let currentElement=this,depth=0;const maxDepth=5;for(;currentElement.parentElement&&depth<maxDepth;){const validForm=Array.from(currentElement.querySelectorAll("form")).find(form=>this.isValidProductForm(form));if(validForm)return validForm;currentElement=currentElement.parentElement,depth++}return null}getAllProductForms(){return Array.from(document.forms).filter(form=>{const hasVariantId=this.getVariantId(form);return this.isValidProductForm(form)&&hasVariantId})}isValidProductForm(form){const hasCartAction=form.getAttribute("action")?.includes("/cart/add"),hasSubmitButton=!!form.querySelector('button, [type="submit"]');return hasCartAction&&hasSubmitButton}getVariantId(form){const idFromFormData=new FormData(form).get("id");if(idFromFormData)return Number(idFromFormData);const idInput=form.querySelector('[name="id"]');return idInput?Number(idInput.value):null}detailsMouseover(){let details=this.renderRoot.querySelector(".skio-details"),summary=this.renderRoot.querySelector(".skio-details summary");
738!details.hasAttribute("open")&&this.showDetailsHover==!1&&(summary.click(),this.showDetailsHover=!0)}detailsMouseleave(){let details=this.renderRoot.querySelector(".skio-details"),summary=this.renderRoot.querySelector(".skio-details summary");details.hasAttribute("open")&&this.showDetailsHover==!0&&(summary.click(),this.showDetailsHover=!1)}updated(changed){if(this.viable()){if(changed.has("product")&&this.product&&(this.key=this.key?this.key:this.product.id),changed.has("selectedVariant")&&this.selectedVariant){const filteredSellingPlanGroups=this.product.selling_plan_groups.filter(selling_plan_group=>selling_plan_group.app_id==="SKIO"&&!selling_plan_group.name.toLowerCase().includes("hidden-")&&!selling_plan_group.name.toLowerCase().includes("dynamic box subscription"));if(this.availableSellingPlanGroups=filteredSellingPlanGroups.filter(selling_plan_group=>selling_plan_group.selling_plans.some(selling_plan=>this.selectedVariant.selling_plan_allocations.some(selling_plan_allocation=>selling_plan_allocation.selling_plan_id===selling_plan.id))),this.options?.combine_groups&&(this.availableSellingPlanGroups=[{name:this.options?.combined_group_name,selling_plans:this.availableSellingPlanGroups.flatMap(group=>group.selling_plans),id:"combined_group",app_id:"SKIO"}]),this.availableSellingPlanGroups?.length){const urlSelectedSellingPlanId=new URL(window.location.href).searchParams.get("selling_plan");if(this.availableSellingPlanGroups.forEach(group=>{const availableSellingPlans=this.getAvailableSellingPlans(group),urlSelectedSellingPlan=availableSellingPlans.find(plan=>plan.id==urlSelectedSellingPlanId),nameSelectedSellingPlan=availableSellingPlans.find(plan=>plan.name===this.selectedSellingPlan?.name),defaultSellingPlan=this.options?.default_subscription&&this.options.default_subscription.trim()!==""?availableSellingPlans.find(plan=>plan.name.toLowerCase().includes(this.options.default_subscription.toLowerCase())):null;group.selected_selling_plan=urlSelectedSellingPlan||nameSelectedSellingPlan||defaultSellingPlan||availableSellingPlans[0];const isAnyPlanSelected=urlSelectedSellingPlan||nameSelectedSellingPlan||defaultSellingPlan;group.selected=!!isAnyPlanSelected}),!this.variantChanged&&this.options?.start_onetime==!1||this.product.requires_selling_plan==!0||urlSelectedSellingPlanId||this.selectedSellingPlan){let selectedSellingPlanId=(this.availableSellingPlanGroups.find(group=>group.selected)||this.availableSellingPlanGroups[0]).selected_selling_plan.id;this.selectSellingPlan(selectedSellingPlanId)}else this.selectSellingPlanGroup(null)}else this.selectSellingPlanGroup(null)}if(changed.has("selectedSellingPlan")){const event=new CustomEvent("skio::update-selling-plan",{bubbles:!0,composed:!0,detail:{variant:this.selectedVariant,sellingPlan:this.selectedSellingPlan,key:this.key}});this.dispatchEvent(event),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.selectedSellingPlan?.id}}))}this.updateForm(),this.updateExternalPrice(),this.disableUrl||this.updateURLParams(),changed.has("quantity")&&this.getRule(),changed.has("cart")&&this.getRule(),this.updateExternalElements(),this.updateTooltipContent()}}updateExternalElements(){document.querySelectorAll(`[skio-price][skio-key="${this.key}"]`).forEach(el=>{el.innerHTML=this.price(this.selectedSellingPlan)}),document.querySelectorAll("[skio-subscription-content]").forEach(el=>{el.style.display=this.selectedSellingPlan?"block":"none"})}log(...args){args.unshift(`%c[skio plan picker][${this.key}]`,"color: #8770f2;"),console.log.apply(console,args)}error(...args){args.unshift(`%c [skio plan picker][${this.key}]`,"color: #ff0000"),console.error.apply(console,args)}appendOrdinalSuffix(num){const j=num%10,k=num%100;return j==1&&k!=11?num+"st":j==2&&k!=12?num+"nd":j==3&&k!=13?num+"rd":num+"th"}viable(){const errors=[];return this.querySelector("input[name=selling_plan]")||errors.push("Missing selling plan input"),this.product||errors.push("No product found. Please pass a product or productHandle to the skio-plan-picker component."),this.selectedVariant||errors.push("No variant found. Please pass a product or productHandle to the skio-plan-picker component."),this.form||errors.push('No form found. Please add a form_id to the plan picker through the Shopify customizer or ensure that the element is in a form that has an input with name="id".'),this.variantInput||errors.push('No variant input found. Please add a form_id to the plan picker through the Shopify customizer or ensure that the element is in a form that has an input with name="id"'),errors.length==0?!0:(this.error("Errors",errors),!1)}getAvailableSellingPlans(group){return group.selling_plans.filter(selling_plan=>this.selectedVariant.selling_plan_allocations.some(selling_plan_allocation=>selling_plan_allocation.selling_plan_id===selling_plan.id))}selectSellingPlanGroup(group){this.selectedSellingPlanGroup=group,this.selectedSellingPlan=group?.selected_selling_plan}selectSellingPlan(selling_plan_id){const selectedGroup=this.availableSellingPlanGroups.find(group=>group.selling_plans.some(plan=>plan.id==selling_plan_id)),selectedSellingPlan=selectedGroup.selling_plans.find(plan=>plan.id==selling_plan_id);selectedGroup.selected_selling_plan=selectedSellingPlan,this.selectedSellingPlanGroup=selectedGroup,this.selectedSellingPlan=selectedSellingPlan}
738updateExternalPrice(){document.querySelectorAll(this.options?.external_price_selector).forEach(el=>{this.selectedSellingPlan?el.innerHTML=this.price(this.selectedSellingPlan):el.innerHTML=this.money(this.selectedVariant.price)})}additionalFrequencyLabel(){if(!(!this.options?.additional_frequency_label||this.options?.additional_frequency_label==""))return unsafeHTML(this.options?.additional_frequency_label)}additionalContentText(){if(!(!this.options?.additional_subscription_content||this.options?.additional_subscription_content==""))return html` 739 <div class="group-content-additional"> 740 ${unsafeHTML(this.options?.additional_subscription_content.replaceAll("[discount]",this.options?.discount_format==="absolute"?this.money(this.discount(this.selectedSellingPlan).absolute):this.discount(this.selectedSellingPlan).percent+"%").replaceAll("[future_price_adjustments]",this.postCheckoutDiscountsText(this.selectedSellingPlan)||""))} 741 </div> 742 `}discountText(selling_plan){if(!this.options?.discount_text||this.options?.discount_text=="")return;const discount=this.discount(selling_plan);return Object.values(discount).some(value=>value===0||value===1/0||value.toString().includes("-"))?"":unsafeHTML(this.options?.discount_text.replaceAll("[discount]",this.options?.discount_format==="absolute"?this.money(discount.absolute):discount.percent+"%").replaceAll("[future_price_adjustments]",this.postCheckoutDiscountsText(selling_plan)||""))}discount(selling_plan){return selling_plan?this.getDiscountFromPriceAdjustment(selling_plan,selling_plan.price_adjustments[0]):{percent:0,amount:0}}postCheckoutPriceAdjustments(selling_plan){const{price_adjustments}=selling_plan;return price_adjustments.filter(({position})=>position!==1).map(price_adjustment=>this.getDiscountFromPriceAdjustment(selling_plan,price_adjustment))}postCheckoutDiscountsText(sellingPlan=this.selectedSellingPlan){if(!sellingPlan||!this.options?.future_price_adjustments_text||this.future_price_adjustments_text=="")return;const postCheckoutPriceAdjustments=this.postCheckoutPriceAdjustments(sellingPlan);if(postCheckoutPriceAdjustments.length)return postCheckoutPriceAdjustments.map((discount,index)=>this.options?.future_price_adjustments_text.replaceAll("[discount]",this.options?.discount_format==="absolute"?this.money(discount.absolute):discount.percent+"%").replaceAll("[order_count]",index+1).replaceAll("[order_count_ordinal]",this.appendOrdinalSuffix(index+1)))}getDiscountFromPriceAdjustment(selling_plan,price_adjustment){const discount={percent:0,amount:0,absolute:0};let multiplier=1;if(this.product.selling_plan_groups.find(group=>group.selling_plans.some(plan=>plan.id==selling_plan.id))?.name==="Prepaid"){const str=selling_plan.name,intervalDate=/\b\d+\s*(days|weeks|months|years)\b/gi,intervalDateMatches=str.match(intervalDate);if(intervalDateMatches?.length){const intervals=intervalDateMatches[0].match(/\d+/g);multiplier=intervals[0]/(intervals[1]||1),multiplier=multiplier>1?multiplier:1}}const price=this.selectedVariant.price,compareAtPrice=this.selectedVariant.compare_at_price&&this.selectedVariant.compare_at_price>price?this.selectedVariant.compare_at_price:price;switch(price_adjustment.value_type){case"percentage":discount.percent=price_adjustment.value,discount.absolute=Math.round(price*price_adjustment.value/100),discount.amount=Math.round(price*price_adjustment.value/100);break;case"fixed_amount":discount.percent=Math.round(price_adjustment.value*1/price*100),discount.absolute=price_adjustment.value,discount.amount=price_adjustment.value;break;case"price":discount.percent=Math.round((compareAtPrice*multiplier-price_adjustment.value)*1/(compareAtPrice*multiplier)*100),discount.absolute=compareAtPrice*multiplier-price_adjustment.value,discount.amount=price-price_adjustment.value;break}return discount}money(cents,formatString=this.moneyFormat){const placeholderRegex=/{{\s*(\w+)\s*}}/;function formatWithDelimiters(number,precision=2,thousands=",",decimal="."){if(isNaN(number)||number==null)return"0";const parts=(number/100).toFixed(precision).split("."),dollars=parts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1"+thousands),cents2=parts[1]?decimal+parts[1]:"";return dollars+cents2}return formatString.replace(placeholderRegex,(match,placeholder)=>{switch(placeholder){case"amount":return formatWithDelimiters(cents,2);case"amount_no_decimals":return formatWithDelimiters(cents,0);case"amount_with_comma_separator":return formatWithDelimiters(cents,2,".",",");case"amount_no_decimals_with_comma_separator":return formatWithDelimiters(cents,0,".",",");case"amount_with_apostrophe_separator":return formatWithDelimiters(cents,2,"'",".");case"amount_no_decimals_with_space_separator":return formatWithDelimiters(cents,0," ");case"amount_with_space_separator":return formatWithDelimiters(cents,2," ",",");case"amount_with_period_and_space_separator":return formatWithDelimiters(cents,2," ",".");default:return match}})}price(selling_plan,formatted=!0){return this.rule?formatted?this.money(this.selectedVariant.price-this.discount(selling_plan).amount-(this.selectedVariant.price-this.discount(selling_plan).amount)*(this.rule.discountAmount/100)):this.selectedVariant.price-this.discount(selling_plan).amount-(this.selectedVariant.price-this.discount(selling_plan).amount)*(this.rule.discountAmount/100):formatted?this.money(this.selectedVariant.price-this.discount(selling_plan).amount):this.selectedVariant.price-this.discount(selling_plan).amount}unitPriceTemplate(selling_plan=null){const unitPrice=this.selectedVariant?.unit_price,measurement=this.selectedVariant?.unit_price_measurement;if(!unitPrice||!measurement)return"";let displayPrice=unitPrice;if(selling_plan){const subscriptionPrice=this.price(selling_plan,!1);displayPrice=Math.round(unitPrice*subscriptionPrice/this.selectedVariant.price)}return html`<div class="skio-unit-price">${this.money(displayPrice)}/${measurement.reference_unit}</div>`}updateForm(){let $sellingPlan=this.querySelector("input[name=selling_plan]");$sellingPlan&&($sellingPlan.value=this.selectedSellingPlan?this.selectedSellingPlan.id:"",$sellingPlan.dispatchEvent(new Event("change")))}updateURLParams(){const url=new URL(window.location.href);this.selectedSellingPlan?(url.searchParams.set("selling_plan",this.selectedSellingPlan.id),window.history.replaceState({},"",url.href)):(url.searchParams.delete("selling_plan"),window.history.replaceState({},"",url.href))}addToCart(quantity){const items=[{id:this.selectedVariant.id,quantity,...this.selectedSellingPlan&&{selling_plan:this.selectedSellingPlan?.id}}];fetch("/cart/add.js",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({items})}).then(response=>response.json()).then(response=>{this.log("Added item to cart: ",response);const event=new CustomEvent("skio::added-to-cart",{bubbles:!0,composed:!0,detail:{response,key:this.key}});this.dispatchEvent(event)}).catch(error=>{this.error(`SKIO ${this.key} error adding item to cart: `,error)})}fetchProduct=handle=>fetch(`/products/${handle}.js`).then(response=>response.json()).then(product=>(this.product=product,this.selectedVariant=product.variants[0],product));replacePlaceholders(template,sellingPlan=this.selectedSellingPlan){if(!template)return"";const discount=this.discount(sellingPlan),discountText=this.options?.discount_format==="absolute"?this.money(discount.absolute):discount.percent+"%",futureDiscountsText=(this.postCheckoutDiscountsText(sellingPlan)||[]).join(", ");return template.replaceAll("[discount]",discountText).replaceAll("[future_price_adjustments]",futureDiscountsText)}updateTooltipContent(){const template=this.options?.tooltip_content||"";let plan=this.selectedSellingPlan;if(!plan&&this.availableSellingPlanGroups?.length){const firstGroup=this.availableSellingPlanGroups[0];plan=firstGroup.selected_selling_plan||firstGroup.selling_plans?.[0]||null}this.tooltipContent=this.replacePlaceholders(template,plan)}}customElements.get("skio-plan-picker")||customElements.define("skio-plan-picker",SkioPlanPicker),window&&(window.SkioPlanPicker=SkioPlanPicker); 743//# sourceMappingURL=/cdn/shop/t/199/assets/skio-plan-picker-component.js.map?v=169843437344903947261783958584
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.