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