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 #skio-plan-picker-legend { 33 font-weight: 700; 34 color: #000; 35 margin-bottom: 1rem; 36 } 37 38 .sr-only { 39 position: absolute; 40 overflow: hidden; 41 clip: rect(0, 0, 0, 0); 42 width: 1px; 43 height: 1px; 44 margin: -1px; 45 padding: 0; 46 border: 0; 47 } 48 49 .group-container { 50 display: block; 51 position: relative; 52 transition: border-color 0.2s ease; 53 border: var(--skio-group-border-width, 1px) solid var(--skio-group-border-color, #ccc); 54 border-radius: var(--skio-group-border-radius, 0); 55 background-color: var(--skio-group-background-color, transparent); 56 color: var(--skio-group-text-color, #000); 57 } 58 59 .group-container--selected { 60 border-color: var(--skio-group-border-selected-color, #333); 61 background-color: var(--skio-group-background-selected-color, transparent); 62 color: var(--skio-group-text-selected-color, #000); 63 } 64 65 .group-container--last { 66 order: 1; 67 } 68 69 :host([layout='horizontal']) .group-container { 70 width: calc(50% - 0.5rem - calc(2 * var(--skio-group-border-width, 1px))); 71 } 72 73 .group-input { 74 position: absolute; 75 opacity: 0; 76 width: 0px; 77 height: 0px; 78 } 79 80 .group-input:focus-visible ~ .group-label { 81 outline: 2px #ccc solid; 82 outline-offset: 4px; 83 } 84 85 .group-label { 86 display: flex; 87 flex-direction: column; 88 padding: 10px; 89 cursor: pointer; 90 } 91 92 .group-topline { 93 display: flex; 94 align-items: center; 95 width: 100%; 96 97 gap: 8px; 98 } 99 100 .group-container--selected .group-topline { 101 font-weight: 700; 102 } 103 104 :host([layout='horizontal']) .group-topline { 105 flex-direction: column; 106 text-align: center; 107 } 108 109 .skio-radio__container { 110 display: flex; 111 color: #000; 112 } 113 114 .group-container--selected .skio-radio__container { 115 color: var(--skio-group-border-selected-color, #333); 116 } 117 118 .skio-radio { 119 transform-origin: center; 120 opacity: 0; 121 transform: scale(0); 122 transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); 123 } 124 125 .group-label:hover .skio-radio { 126 opacity: 0.75; 127 transform: scale(1); 128 } 129 130 .group-container--selected .group-label .skio-radio { 131 opacity: 1; 132 transform: scale(1); 133 } 134 135 .skio-price { 136 display: flex; 137 justify-content: flex-end; 138 flex-wrap: wrap; 139 align-items: center; 140 text-align: right; 141 gap: 4px; 142 143 line-height: 1; 144 145 margin-left: auto; 146 vertical-align: middle; 147 148 font-weight: 500; 149 } 150 151 .skio-price s { 152 font-size: 13px; 153 154 font-weight: 400; 155 opacity: 0.75; 156 } 157 158 :host([layout='horizontal']) .skio-price { 159 text-align: center; 160 margin-right: auto; 161 } 162 163 .group-content { 164 display: flex; 165 flex-direction: column; 166 opacity: 1; 167 width: auto; 168 max-height: 1000px; 169 transition: max-height 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); 170 } 171 172 .group-content.margin-left { 173 margin-left: 25px; 174 } 175 176 .group-content p { 177 margin: 0.5rem 0 0 0; 178 font-size: 13px; 179 color: #000; 180 } 181 182 :host([layout='horizontal']) .group-content { 183 width: 100%; 184 order: 2; 185 } 186 187 /* Hide frequency if not selected */ 188 .group-container:not(.group-container--selected) .group-content { 189 pointer-events: none; 190 opacity: 0; 191 max-height: 0; 192 visibility: hidden; 193 } 194 195 :host([layout='horizontal']) .group-container:not(.group-container--selected) + .group-content { 196 pointer-events: none; 197 opacity: 0; 198 max-height: 0; 199 visibility: hidden; 200 } 201 202 .group-title { 203 width: 100%; 204 max-width: 70%; 205 line-height: 1.5; 206 position: relative; 207 } 208 209 :host([layout='horizontal']) .group-title { 210 max-width: 100%; 211 } 212 213 .savings { 214 color: var(--skio-discount-text-color, #fff); 215 } 216 217 .savings.bubble { 218 padding: 0px 8px; 219 background-color: var(--skio-discount-color, #0fa573); 220 border: 1px var(--skio-discount-color, #0fa573) solid; 221 border-radius: 4px; 222 font-size: 12px; 223 color: var(--skio-discount-text-color, #fff); 224 white-space: nowrap; 225 } 226 227 .skio-tooltip { 228 position: relative; 229 display: inline-block; 230 cursor: pointer; 231 margin-left: 5px; 232 } 233 234 .skio-tooltip svg { 235 vertical-align: middle; 236 } 237 238 .skio-tooltip-text { 239 visibility: hidden; 240 opacity: 0; 241 position: absolute; 242 top: 100%; 243 left: 50%; 244 transform: translateX(-50%); 245 background-color: var(--skio-tooltip-background-color, #333); 246 color: var(--skio-tooltip-text-color, #fff); 247 padding: 5px 10px; 248 border-radius: 5px; 249 font-size: 12px; 250 white-space: normal; 251 width: 200px; 252 z-index: 1000; 253 transition: opacity 0.3s ease; 254 } 255 256 .skio-tooltip:hover .skio-tooltip-text, 257 .skio-tooltip:focus-within .skio-tooltip-text { 258 visibility: visible; 259 opacity: 1; 260 } 261 262 .selling-plan-dropdown { 263 appearance: none; 264 -webkit-appearance: none; 265 -moz-appearance: none; 266 display: flex; 267 align-items: center; 268 gap: 5px; 269 width: 100%; 270 margin-top: 5px; 271 padding: 8px 30px 8px 10px; 272 background-color: #f7f7f7; 273 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"); 274 background-repeat: no-repeat; 275 background-position: right 10px top 50%; 276 background-size: 16px; 277 border: 1px solid #ccc; 278 border-radius: 2px; 279 font-size: 14px; 280 color: var(--skio-group-text-selected-color, #000); 281 text-overflow: ellipsis; 282 white-space: nowrap;
283 outline:none !important; 284 font-family: inherit; 285 } 286 287 .selling-plan-dropdown-label { 288 color: #666666; 289 font-weight: 500; 290 } 291 292 .selling-plan-dropdown--one { 293 background-image: none; 294 pointer-events: none; 295 background: transparent; 296 } 297 298 .selling-plan-buttons { 299 display: grid; 300 grid-template-columns: repeat(auto-fill, minmax(var(--skio-button-plan-selector-width, 20px), 1fr)); 301 gap: 10px; 302 padding: 0.75rem 0; 303 border: 0; 304 font-size: 13px; 305 } 306 307 .selling-plan-buttons input[type='radio'] { 308 position: absolute; 309 opacity: 0; 310 width: 0; 311 height: 0; 312 } 313 314 .selling-plan-buttons label { 315 display: flex; 316 align-items: center; 317 justify-content: center; 318 cursor: pointer; 319 border: 1px solid #ccc; 320 text-align: center; 321 padding: 1rem 0.5rem; 322 } 323 324 .selling-plan-buttons input[type='radio']:checked + label { 325 border-color: #000; 326 } 327 328 .selling-plan-buttons input:focus-visible + label { 329 outline: 2px #ccc solid; 330 outline-offset: 4px; 331 } 332 333 .group-content-additional { 334 margin-top: 5px; 335 } 336 337 .skio-details { 338 --text-color: #333; 339 --text-color-secondary: #888; 340 341 user-select: none; 342 -webkit-user-select: none; 343 margin-bottom: 20px; 344 order: 3; 345 max-width: max-content; 346 } 347 348 .skio-details summary::-webkit-details-marker, 349 .skio-details summary::marker, 350 .skio-details slot { 351 color: rgba(0, 0, 0, 0) !important; 352 } 353 354 .skio-details summary { 355 margin-top: 15px; 356 } 357 358 .skio-details summary span { 359 font-size: 0.9em; 360 display: flex; 361 padding: 0.5em 0; 362 cursor: pointer; 363 align-items: center; 364 gap: 10px; 365 text-decoration: underline; 366 367 margin-top: -40px; 368 color: #000; 369 } 370 371 @keyframes fadeInDown { 372 0% { 373 opacity: 0; 374 transform: translateY(-15px); 375 } 376 100% { 377 opacity: 1; 378 transform: translateY(0px); 379 } 380 } 381 .skio-details[open] > .skio-details--content { 382 animation-name: fadeInDown; 383 animation-duration: 0.3s; 384 } 385 386 .skio-details--content { 387 position: absolute; 388 z-index: 1020; 389 padding: 1em; 390 width: fit-content; 391 border-radius: 5px; 392 background: white; 393 box-shadow: 0 0 5px rgb(23 24 24 / 5%), 0 1px 2px rgb(0 0 0 / 7%); 394 } 395 396 .skio-details ul { 397 margin: 0; 398 padding: 0; 399 } 400 401 .skio-details ul li { 402 display: flex; 403 align-items: flex-start; 404 gap: 0.75em; 405 406 margin-bottom: 1em; 407 } 408 409 .skio-details .skio-content { 410 display: flex; 411 flex-direction: column; 412 } 413 414 .skio-details .skio-content p { 415 font-size: 0.9em; 416 417 margin-top: 0; 418 margin-bottom: 0; 419 420 letter-spacing: 0; 421 line-height: 1.5; 422 423 color: var(--text-color); 424 } 425 426 .skio-details ul li small { 427 font-size: 0.7em; 428 color: var(--text-color-secondary); 429 } 430 431 .skio-details .skio-icon { 432 display: flex; 433 434 width: 2.25em; 435 height: 2.25em; 436 437 color: var(--text-color); 438 background: #f8f8f8; 439 border-radius: 100%; 440 441 flex-shrink: 0; 442 align-items: center; 443 justify-content: center; 444 } 445 446 .skio-details .skio-icon svg { 447 width: 1.25em; 448 height: 1.25em; 449 450 color: inherit; 451 } 452 453 .skio-details--footer { 454 display: flex; 455 align-items: center; 456 justify-content: space-between; 457 font-size: 0.9em; 458 } 459 460 .skio-details--footer a { 461 color: var(--text-color); 462 } 463 464 .skio-manage-link { 465 text-decoration: underline; 466 } 467 468 .powered-by-skio { 469 font-size: 0.8em; 470 471 display: flex; 472 text-decoration: none; 473 474 align-items: center; 475 gap: 3px; 476 } 477 478 .setupMode { 479 position: relative; 480 color: black; 481 padding: 1rem; 482 display: flex; 483 flex-direction: column; 484 gap: 10px; 485 margin-bottom: 1rem; 486 font-size: 14px; 487 border-style: solid; 488 border-width: 4px; 489 border-image: repeating-linear-gradient(-55deg, #000, #000 20px, #ffb101 20px, #ffb101 40px) 10; 490 } 491 492 .setupMode:after { 493 content: 'Setup Mode'; 494 position: absolute; 495 top: 0; 496 right: 0; 497 background-color: black; 498 color: white; 499 padding: 0.25rem 1rem; 500 font-size: 13px; 501 } 502 503 .setupMode .detection { 504 display: grid; 505 grid-template-columns: auto 1fr; 506 gap: 10px; 507 } 508 509 .setupMode .detection small { 510 grid-column: 1/-1; 511 } 512 `];constructor(){super(),this.debug=this.debug||window?.Shopify?.designMode,this.variantChanged=!1,this.rules=[],this.rule=null,this.quantity=1,this.showDetail
512sHover=!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` 513 <div class="skio-radio__container"> 514 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 515 <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1"></circle> 516 <circle class="skio-radio" cx="12" cy="12" r="7" fill="currentColor"></circle> 517 </svg> 518 </div> 519 `}sellingPlanDropdown(group){return html` 520 <select 521 class="selling-plan-dropdown ${this.getAvailableSellingPlans(group).length==1?"selling-plan-dropdown--one":""}" 522 @change=${e=>{this.selectSellingPlan(e.target.value)}} 523 > 524 ${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> `):""} 525 </select> 526 `}sellingPlanButtons(group){return html` 527 <fieldset class="selling-plan-buttons"> 528 <legend class="sr-only">Select subscription interval</legend> 529 ${group?this.getAvailableSellingPlans(group).map(selling_plan=>html` 530 <input 531 type="radio" 532 name="selling_plan_button" 533 value="${selling_plan.id}" 534 id="selling_plan_button-${selling_plan.id}" 535 @change="${e=>this.selectSellingPlan(selling_plan.id)}" 536 ?checked=${group.selected_selling_plan===selling_plan} 537 /> 538 539 <label for="selling_plan_button-${selling_plan.id}"> ${selling_plan.name} </label> 540 `):""} 541 </fieldset> 542 `}invalidIcon(){return html` 543 <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"> 544 <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" /> 545 </svg> 546 `}validIcon(){return html` 547 <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"> 548 <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" /> 549 </svg> 550 `}setupMode(){return html` 551 <div class="setupMode"> 552 Skio Plan Picker 553 <small>This will not appear on the live site.</small> 554 555 <small>Key: ${this.key}</small> 556 557 <div class="detection">${this.product?this.validIcon():this.invalidIcon()} Product</div> 558 559 <div class="detection">${this.selectedVariant?this.validIcon():this.invalidIcon()} Selected Variant</div> 560 561 <div class="detection">${this.form?this.validIcon():this.invalidIcon()} Form</div> 562 563 <div class="detection">${this.variantInput?this.validIcon():this.invalidIcon()} Variant Input</div> 564 565 <div class="detection"> 566 ${this.variantChanged?this.validIcon():this.invalidIcon()} Variant Change Detection 567 <small>Please attempt to change the selected variant.</small> 568 </div> 569 570 <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> 571 </div> 572 `}groupContent(group){return html` 573 <div class="group-content ${this.options?.layout=="horizontal"?"":this.options?.show_radio_selector&&this.options?.dropdownPosition=="inside"?"margin-left":""}"> 574 <span class="selling-plan-dropdown-label">${this.additionalFrequencyLabel()}</span> 575 ${this.options?.selector_type=="dropdown"?this.sellingPlanDropdown(group):""} 576 577 <!-- TODO: Make the label have the border instead of the group --> 578 ${this.options?.selector_type=="button"?this.sellingPlanButtons(group):""} ${group&&group.name==="Prepaid"?this.additionalPrepaidContentText():this.additionalContentText()} 579 </div> 580 `}
580showDetails(){return html` 581 <details class="skio-details" @mouseover=${e=>this.detailsMouseover()} @mouseleave=${e=>this.detailsMouseleave()}> 582 <summary> 583 <span> 584 <svg 585 xmlns="http://www.w3.org/2000/svg" 586 width="18" 587 height="18" 588 viewBox="0 0 24 24" 589 fill="none" 590 stroke="currentColor" 591 stroke-width="2" 592 stroke-linecap="round" 593 stroke-linejoin="round" 594 class="ai ai-ArrowRepeat" 595 > 596 <path d="M18 2l3 3-3 3" /> 597 <path d="M6 22l-3-3 3-3" /> 598 <path d="M21 5H10a7 7 0 0 0-7 7" /> 599 <path d="M3 19h11a7 7 0 0 0 7-7" /> 600 </svg> 601 602 How do subscriptions work? 603 </span> 604 </summary> 605 <div class="skio-details--content"> 606 <ul> 607 <li> 608 <div class="skio-icon"> 609 <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"> 610 <path 611 stroke-linecap="round" 612 stroke-linejoin="round" 613 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" 614 /> 615 </svg> 616 </div> 617 <div class="skio-content"> 618 <p>Get exclusive deals</p> 619 <small>Subscribe for unique discounts</small> 620 </div> 621 </li> 622 <li> 623 <div class="skio-icon"> 624 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> 625 <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" /> 626 </svg> 627 </div> 628 <div class="skio-content"> 629 <p>Edit your subscription anytime</p> 630 <small>Edit products, delivery schedule and more</small> 631 </div> 632 </li> 633 <li> 634 <div class="skio-icon"> 635 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> 636 <path 637 fill-rule="evenodd" 638 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" 639 clip-rule="evenodd" 640 /> 641 </svg> 642 </div> 643 644 <div class="skio-content"> 645 <p>No commitment</p> 646 <small>Easy to cancel if it's not for you</small> 647 </div> 648 </li> 649 </ul> 650 <div class="skio-details--footer"> 651 <a class="skio-manage-link" href="/a/account/login">Manage subscriptions</a> 652 653 <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"> 654 Powered by
655 <svg width="24" height="11" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg"> 656 <path 657 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" 658 fill="black" 659 /> 660 <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" /> 661 <path 662 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" 663 fill="black" 664 /> 665 <path 666 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
666Z" 667 fill="black" 668 /> 669 </svg> 670 </a> 671 </div> 672 </div> 673 </details> 674 `}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` 675 ${this.debug?this.setupMode():null} 676 677 <fieldset class="skio-plan-picker" role="radiogroup" aria-labelledby="skio-plan-picker-legend"> 678 <legend id="skio-plan-picker-legend" class="${this.options?.show_legend?"":"sr-only"}">${unsafeHTML(this.options?.legend_content)}</legend> 679 680 ${this.product.requires_selling_plan?"":html` 681 <div 682 class="group-container ${this.selectedSellingPlanGroup==null?"group-container--selected":""} ${this.options?.onetime_first?"":"group-container--last"}" 683 @click=${()=>this.selectSellingPlanGroup(null)} 684 > 685 <input 686 id="one-time-${this.key}" 687 class="group-input" 688 name="skio-group-${this.key}" 689 type="radio" 690 value="One time purchase" 691 ?checked=${!this.selectedSellingPlanGroup} 692 @change=${()=>this.selectSellingPlanGroup(null)} 693 /> 694 695 <label class="group-label" for="one-time-${this.key}"> 696 <div class="group-topline"> 697 ${this.options?.layout=="horizontal"?"":this.options?.show_radio_selector?this.radioTemplate():""} 698 699 <div class="group-title">${this.options?.onetime_title?this.options?.onetime_title:"One time purchase"}</div> 700 701 <div class="skio-price" aria-live="polite"> 702 ${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>`:""} 703 ${this.money(this.selectedVariant.price)} 704 </div> 705 </div> 706 </label> 707 </div> 708 `} 709 ${this.availableSellingPlanGroups?.length?this.availableSellingPlanGroups.map((group,index)=>html` 710 <div class="group-container ${this.selectedSellingPlanGroup==group?"group-container--selected":""}"> 711 <input 712 id="group-${index}-${this.key}" 713 class="group-input" 714 name="skio-group-${this.key}" 715 type="radio" 716 value="${group.id}" 717 @change=${()=>this.selectSellingPlanGroup(group)} 718 ?checked=${this.selectedSellingPlanGroup==group} 719 /> 720 721 <label class="group-label" for="group-${index}-${this.key}"> 722 <div class="group-topline"> 723 ${this.options?.layout=="horizontal"?"":this.options?.show_radio_selector?this.radioTemplate():""} 724 725 <div class="group-title"> 726 ${group.name!=="Prepaid"&&this.options?.subscription_title?this.options?.subscription_title:group.name=="Prepaid"&&this.options?.prepaid_title?this.options?.prepaid_title:group.name} 727 ${this.discountText(group.selected_selling_plan)?html` <span class="savings ${this.options?.discount_style}"> ${this.discountText(group.selected_selling_plan)} </span> `:html``} 728 ${this.tooltipContent?html`<span class="skio-tooltip" tabindex="0" aria-describedby="skio-tooltip-${this.key}-${index}"> 729 <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> 730 <span id="skio-tooltip-${this.key}-${index}" class="skio-tooltip-text" role="tooltip">${this.tooltipContent}</span> 731 </span>`:""} 732 </div> 733 734 <div class="skio-price" aria-live="polite"> 735 ${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>`:""} 736 ${this.price(group.selected_selling_plan)} 737 </div> 738 </div> 739 740 ${this.options?.layout=="vertical"&&this.options?.dropdownPosition=="inside"?this.groupContent(group):""} 741 </label> 742 </div> 743 ${this.selectedSellingPlanGroup==group&&(this.options?.layout=="horizontal"||this.options?.dropdownPosition=="underneath")?this.groupContent(group):""} 744 `):""}
745 ${this.options?.show_details==!0?this.showDetails():""} 746 </fieldset> 747 `}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};
747this.rules.forEach((rule,index)=>{rule.code&&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");
747!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.availableSellingPlanGroups.sort((a,b)=>a.name==="Prepaid"?1:b.name==="Prepaid"?-1:0),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}
747updateExternalPrice(){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` 748 <div class="group-content-additional"> 749 ${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)||""))} 750 </div> 751 `}additionalPrepaidContentText(){if(!(!this.options?.additional_prepaid_content||this.options?.additional_prepaid_content==""))return html` 752 <div class="group-content-additional"> 753 ${unsafeHTML(this.options?.additional_prepaid_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)||""))} 754 </div> 755 `}discountText(selling_plan){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.rule.discountAmount/100)):this.selectedVariant.price-this.discount(selling_plan).amount-this.selectedVariant.price*(this.rule.discountAmount/100):formatted?this.money(this.selectedVariant.price-this.discount(selling_plan).amount):this.selectedVariant.price-this.discount(selling_plan).amount}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); 756//# sourceMappingURL=/cdn/shop/t/136/assets/skio-plan-picker-component.js.map?v=14677572126968255851789496283
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.