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