@session-services/web-elements 0.1.22 → 0.1.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/session-services-ticketing.cjs.entry.js +51 -24
- package/dist/collection/components/session-services-ticketing/session-services-ticketing.css +101 -60
- package/dist/collection/components/session-services-ticketing/session-services-ticketing.js +46 -17
- package/dist/collection/components/session-services-ticketing/session-services-ticketing.test.js +72 -2
- package/dist/components/session-services-ticketing.js +51 -24
- package/dist/esm/session-services-ticketing.entry.js +51 -24
- package/dist/session-services-elements/{p-94173d1b.entry.js → p-f40762bb.entry.js} +1 -1
- package/dist/session-services-elements/session-services-elements.esm.js +1 -1
- package/dist/types/components/session-services-ticketing/session-services-ticketing.d.ts +2 -0
- package/package.json +4 -4
|
@@ -23613,21 +23613,20 @@ const sessionServicesTicketingCss = () => `:host{--background:transparent;--fore
|
|
|
23613
23613
|
in srgb,
|
|
23614
23614
|
oklch(0.21 0.006 285.885) 80%,
|
|
23615
23615
|
oklch(0.141 0.005 285.823)
|
|
23616
|
-
);--card-foreground:oklch(0.967 0.001 286.375);--popover:oklch(0.21 0.006 285.885);--popover-foreground:oklch(0.967 0.001 286.375);--primary:oklch(0.537 0.1554 255);--primary-foreground:oklch(0.985 0 0);--secondary:oklch(1 0 0 / 6%);--secondary-foreground:oklch(0.967 0.001 286.375);--muted:oklch(1 0 0 / 6%);--muted-foreground:oklch(0.705 0.015 286.067);--accent:oklch(1 0 0 / 6%);--accent-foreground:oklch(0.967 0.001 286.375);--destructive:oklch(0.637 0.237 25.331);--destructive-foreground:oklch(0.704 0.191 22.216);--border:oklch(1 0 0 / 12%);--input:oklch(1 0 0 / 12%);--ring:oklch(0.552 0.016 285.938);--success:oklch(0.696 0.17 162.48);--warning:oklch(0.769 0.188 70.08);--info:oklch(0.623 0.214 259.815);--info-foreground:oklch(0.707 0.165 254.624)}.tickets-wrapper{padding:0;width:100%}.tickets-heading{color:var(--internal-foreground);font-size:var(--internal-font-size-lg);font-weight:var(--internal-font-weight-semibold);margin:0 0 var(--internal-spacing-md)}.
|
|
23617
|
-
var(--internal-spacing-lg);font-size:var(--internal-font-size-base);font-weight:var(--internal-font-weight-bold);
|
|
23618
|
-
var(--internal-spacing-sm);background:var(--internal-card);color:var(--internal-foreground);border-radius:calc(var(--internal-radius) - 2px);font:inherit}.passcode-form input:disabled{opacity:0.6;cursor:not-allowed}.ticket-section{background:var(--internal-card);border-radius:var(--internal-radius);margin:0 0 var(--internal-spacing-lg) 0;overflow:hidden;width:100%;transition:all var(--internal-transition-base)}.tickets-wrapper>.ticket-section:last-child{margin-bottom:0}.ticket-section.section-sold-out{position:relative}.ticket-section.section-sold-out .section-header{padding-bottom:var(--internal-spacing-md)}.ticket-section.section-sold-out .section-name,.ticket-section.section-sold-out .section-time,.ticket-section.section-sold-out .section-venue{opacity:0.8}.ticket-section.section-sold-out .admissions-list{opacity:0.6;pointer-events:none;filter:grayscale(0.3)}.ticket-section.section-sold-out .admission-card{background:var(--internal-card)}.ticket-section.section-sold-out .quantity-controls,.ticket-section.section-sold-out .sold-out-controls{opacity:0.7}.section-header{padding:var(--internal-spacing-md) var(--internal-spacing-lg);border-bottom:1px solid var(--internal-border);background:var(--internal-card)}.section-name{color:var(--internal-foreground);font-size:var(--internal-font-size-lg);font-weight:var(--internal-font-weight-semibold);letter-spacing:-0.025em;margin:0 0 var(--internal-spacing-xs) 0;display:flex;align-items:center;gap:var(--internal-spacing-sm)}.section-time,.section-venue{color:var(--internal-muted-foreground);font-size:var(--internal-font-size-sm);display:flex;align-items:center;gap:var(--internal-spacing-xs)}.section-time,.admission-time{margin-bottom:var(--internal-spacing-xs)}.section-time svg,.section-venue svg,.admission-time svg,.admission-venue svg{width:calc(var(--internal-spacing-sm) + var(--internal-spacing-xs));height:calc(var(--internal-spacing-sm) + var(--internal-spacing-xs));flex-shrink:0;opacity:0.8}.admissions-list{padding:0}.admission-card{border-bottom:1px solid var(--internal-border);padding:var(--internal-spacing-md) var(--internal-spacing-lg);position:relative;transition:background-color var(--internal-transition-base);cursor:default}.admission-card:focus-visible{outline:2px solid var(--internal-ring);outline-offset:-2px;z-index:1}.admission-card.sold-out{background:var(--internal-card)}.admission-card.unavailable{opacity:0.72}.admission-card.sold-out .admission-price{opacity:0.5}.admission-card:last-child{border-bottom:none}.admission-content{display:flex;justify-content:space-between;align-items:center}.admission-details{flex:1}.admission-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--internal-spacing-md);margin-bottom:var(--internal-spacing-sm)}.admission-header-text{flex:1;min-width:0}.admission-title{color:var(--internal-foreground);font-size:var(--internal-font-size-lg);font-weight:var(--internal-font-weight-semibold);margin-bottom:0;display:flex;align-items:center;gap:var(--internal-spacing-sm)}.admission-subtitle{color:var(--internal-muted-foreground);font-size:var(--internal-font-size-sm);margin-top:var(--internal-spacing-xs);line-height:1.4}.more-info-badge{display:inline-flex;align-items:center;gap:calc(var(--internal-spacing-xs) * 1.5);padding:calc(var(--internal-spacing-xs) * 1.5) var(--internal-spacing-sm);background:oklch(from var(--internal-info) l c h / 0.08);color:var(--internal-info-foreground);border-radius:calc(var(--internal-radius) - 2px);font-size:var(--internal-font-size-xs);font-weight:var(--internal-font-weight-medium);cursor:pointer;transition:all var(--internal-transition-fast);white-space:nowrap;flex-shrink:0}.more-info-badge:hover{background:oklch(from var(--internal-info) l c h / 0.16)}.more-info-badge:focus-visible{outline:2px solid var(--internal-ring);outline-offset:2px}.more-info-badge svg{flex-shrink:0}.admission-time,.admission-venue{color:var(--internal-muted-foreground);font-size:var(--internal-font-size-sm);display:flex;align-items:center;gap:var(--internal-spacing-xs)}.admission-venue{margin-bottom:var(--internal-spacing-sm)}.solo-admission .admission-content{flex-direction:column;align-items:stretch}.solo-admission .admission-details{width:100%}.solo-admission .admission-price-info{margin-top:var(--internal-spacing-md);display:flex;justify-content:space-between;align-items:center;width:100%}.solo-admission .quantity-controls{margin-left:auto;flex-shrink:0}.
|
|
23616
|
+
);--card-foreground:oklch(0.967 0.001 286.375);--popover:oklch(0.21 0.006 285.885);--popover-foreground:oklch(0.967 0.001 286.375);--primary:oklch(0.537 0.1554 255);--primary-foreground:oklch(0.985 0 0);--secondary:oklch(1 0 0 / 6%);--secondary-foreground:oklch(0.967 0.001 286.375);--muted:oklch(1 0 0 / 6%);--muted-foreground:oklch(0.705 0.015 286.067);--accent:oklch(1 0 0 / 6%);--accent-foreground:oklch(0.967 0.001 286.375);--destructive:oklch(0.637 0.237 25.331);--destructive-foreground:oklch(0.704 0.191 22.216);--border:oklch(1 0 0 / 12%);--input:oklch(1 0 0 / 12%);--ring:oklch(0.552 0.016 285.938);--success:oklch(0.696 0.17 162.48);--warning:oklch(0.769 0.188 70.08);--info:oklch(0.623 0.214 259.815);--info-foreground:oklch(0.707 0.165 254.624)}.tickets-wrapper{padding:0;width:100%}.tickets-heading{color:var(--internal-foreground);font-size:var(--internal-font-size-lg);font-weight:var(--internal-font-weight-semibold);margin:0 0 var(--internal-spacing-md)}.ticket-section.loading-ticket-section{overflow:visible;background:transparent;border:0;box-shadow:none}.loading-ticket-section .admissions-list{display:flex;flex-direction:column;gap:var(--internal-spacing-sm)}.admission-card.loading-admission{min-height:5.25rem;padding:0;background:oklch(from var(--internal-foreground) l c h / 0.07);border:0;border-radius:var(--internal-radius);box-shadow:none;pointer-events:none;animation:loading-card 1.6s ease-out infinite}@keyframes loading-card{0%,100%{opacity:0.48}50%{opacity:0.74}}.passcode-form,.passcode-form input,.ticket-section,.more-info-badge,.quantity-controls,.sold-out-controls,.coupon-row,.coupon-apply,.coupon-remove{border:1px solid var(--internal-input);box-shadow:var(--internal-shadow-edge-light)}.external-ticket-button,.checkout-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--internal-primary);color:var(--internal-primary-foreground);border:1px solid oklch(from var(--internal-primary) calc(l - 0.08) c h);border-radius:calc(var(--internal-radius) - 2px);cursor:pointer;box-shadow:var(--internal-shadow-edge-light);transition:all var(--internal-transition-fast)}.external-ticket-button:hover,.checkout-btn:hover:not(:disabled){background:oklch(from var(--internal-primary) calc(l - 0.08) c h);transform:translateY(-1px)}.external-ticket-button:focus-visible{outline:2px solid var(--internal-ring);outline-offset:2px}.passcode-form{display:flex;flex-direction:column;gap:var(--internal-spacing-sm);padding:var(--internal-spacing-lg);margin-bottom:var(--internal-spacing-md);background:var(--internal-card);border-radius:var(--internal-radius)}.passcode-form h2{color:var(--internal-foreground);font-size:var(--internal-font-size-base);font-weight:var(--internal-font-weight-semibold);line-height:1.3}.passcode-form p{color:var(--internal-muted-foreground);font-size:var(--internal-font-size-sm);line-height:1.5}.door-alert,.empty-ticketing-state,.message-state{display:flex;flex-direction:column;gap:calc(var(--internal-spacing-xs) * 1.5);margin-bottom:var(--internal-spacing-md);padding:0;background:transparent;border:none;border-radius:0;box-shadow:none}.door-alert strong,.empty-ticketing-state strong,.message-state strong{color:var(--internal-foreground);font-size:var(--internal-font-size-base);font-weight:var(--internal-font-weight-semibold);line-height:1.3}.door-alert span,.empty-ticketing-state span,.message-state span{color:var(--internal-muted-foreground);font-size:var(--internal-font-size-sm);line-height:1.4}.external-ticket-button{flex-direction:column;gap:calc(var(--internal-spacing-xs) * 0.5);width:100%;padding:calc(var(--internal-spacing-sm) + var(--internal-spacing-xs))
|
|
23617
|
+
var(--internal-spacing-lg);text-decoration:none}.external-ticket-panel{display:flex;flex-direction:column;gap:var(--internal-spacing-md)}.external-ticket-warning{color:var(--internal-muted-foreground);font-size:var(--internal-font-size-sm);font-weight:var(--internal-font-weight-medium);line-height:1.35}.external-ticket-label{font-size:var(--internal-font-size-base);font-weight:var(--internal-font-weight-bold);line-height:1.2}.external-ticket-domain{font-size:var(--internal-font-size-xs);font-weight:var(--internal-font-weight-medium);line-height:1.2;opacity:0.82}.passcode-form input{width:100%;min-width:0;padding:calc(var(--internal-spacing-sm) + 0.125rem)
|
|
23618
|
+
var(--internal-spacing-sm);background:var(--internal-card);color:var(--internal-foreground);border-radius:calc(var(--internal-radius) - 2px);font:inherit}.passcode-form input:disabled{opacity:0.6;cursor:not-allowed}.ticket-section{background:var(--internal-card);border-radius:var(--internal-radius);margin:0 0 var(--internal-spacing-lg) 0;overflow:hidden;width:100%;transition:all var(--internal-transition-base)}.tickets-wrapper>.ticket-section:last-child{margin-bottom:0}.ticket-section.section-sold-out{position:relative}.ticket-section.section-sold-out .section-header{padding-bottom:var(--internal-spacing-md)}.ticket-section.section-sold-out .section-name,.ticket-section.section-sold-out .section-time,.ticket-section.section-sold-out .section-venue{opacity:0.8}.ticket-section.section-sold-out .admissions-list{opacity:0.6;pointer-events:none;filter:grayscale(0.3)}.ticket-section.section-sold-out .admission-card{background:var(--internal-card)}.ticket-section.section-sold-out .quantity-controls,.ticket-section.section-sold-out .sold-out-controls{opacity:0.7}.section-header{padding:var(--internal-spacing-md) var(--internal-spacing-lg);border-bottom:1px solid var(--internal-border);background:var(--internal-card)}.section-name{color:var(--internal-foreground);font-size:var(--internal-font-size-lg);font-weight:var(--internal-font-weight-semibold);letter-spacing:-0.025em;margin:0 0 var(--internal-spacing-xs) 0;display:flex;align-items:center;gap:var(--internal-spacing-sm)}.section-time,.section-venue{color:var(--internal-muted-foreground);font-size:var(--internal-font-size-sm);display:flex;align-items:center;gap:var(--internal-spacing-xs)}.section-time,.admission-time{margin-bottom:var(--internal-spacing-xs)}.section-time svg,.section-venue svg,.admission-time svg,.admission-venue svg{width:calc(var(--internal-spacing-sm) + var(--internal-spacing-xs));height:calc(var(--internal-spacing-sm) + var(--internal-spacing-xs));flex-shrink:0;opacity:0.8}.admissions-list{padding:0}.admission-card{border-bottom:1px solid var(--internal-border);padding:var(--internal-spacing-md) var(--internal-spacing-lg);position:relative;transition:background-color var(--internal-transition-base);cursor:default}.admission-card:focus-visible{outline:2px solid var(--internal-ring);outline-offset:-2px;z-index:1}.admission-card.sold-out{background:var(--internal-card)}.admission-card.unavailable{opacity:0.72}.admission-card.sold-out .admission-price{opacity:0.5}.admission-card:last-child{border-bottom:none}.admission-content{display:flex;justify-content:space-between;align-items:center}.admission-details{flex:1}.admission-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--internal-spacing-md);margin-bottom:var(--internal-spacing-sm)}.admission-header-text{flex:1;min-width:0}.admission-title{color:var(--internal-foreground);font-size:var(--internal-font-size-lg);font-weight:var(--internal-font-weight-semibold);margin-bottom:0;display:flex;align-items:center;gap:var(--internal-spacing-sm)}.admission-subtitle{color:var(--internal-muted-foreground);font-size:var(--internal-font-size-sm);margin-top:var(--internal-spacing-xs);line-height:1.4}.more-info-badge{display:inline-flex;align-items:center;gap:calc(var(--internal-spacing-xs) * 1.5);padding:calc(var(--internal-spacing-xs) * 1.5) var(--internal-spacing-sm);background:oklch(from var(--internal-info) l c h / 0.08);color:var(--internal-info-foreground);border-radius:calc(var(--internal-radius) - 2px);font-size:var(--internal-font-size-xs);font-weight:var(--internal-font-weight-medium);cursor:pointer;transition:all var(--internal-transition-fast);white-space:nowrap;flex-shrink:0}.more-info-badge:hover{background:oklch(from var(--internal-info) l c h / 0.16)}.more-info-badge:focus-visible{outline:2px solid var(--internal-ring);outline-offset:2px}.more-info-badge svg{flex-shrink:0}.admission-time,.admission-venue{color:var(--internal-muted-foreground);font-size:var(--internal-font-size-sm);display:flex;align-items:center;gap:var(--internal-spacing-xs)}.admission-venue{margin-bottom:var(--internal-spacing-sm)}.solo-admission .admission-content{flex-direction:column;align-items:stretch}.solo-admission .admission-details{width:100%}.solo-admission .admission-price-info{margin-top:var(--internal-spacing-md);display:flex;justify-content:space-between;align-items:center;width:100%}.solo-admission .quantity-controls{margin-left:auto;flex-shrink:0}.admission-price-info{display:flex;align-items:center;justify-content:space-between;gap:var(--internal-spacing-sm);margin-bottom:var(--internal-spacing-sm);width:100%}.admission-price-wrapper{display:flex;flex-direction:column;row-gap:calc(var(--internal-spacing-xs) * 0.5)}.admission-price{color:var(--internal-foreground);font-size:var(--internal-font-size-xl);font-weight:var(--internal-font-weight-bold);letter-spacing:-0.025em;line-height:1.1}.admission-price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--internal-spacing-sm)}.admission-price-original{color:var(--internal-muted-foreground);font-size:var(--internal-font-size-base);text-decoration:line-through}.admission-booking-fee{color:var(--internal-muted-foreground);font-size:var(--internal-font-size-xs);font-weight:var(--internal-font-weight-medium);line-height:1.2}.admission-savings,.admission-availability{font-size:var(--internal-font-size-xs);font-weight:var(--internal-font-weight-medium);line-height:1.2}.admission-savings{color:var(--internal-success)}.admission-availability{color:var(--internal-warning)}.admission-sale-label{display:block;margin-top:var(--internal-spacing-xs);color:var(--internal-muted-foreground);font-size:var(--internal-font-size-sm);font-weight:var(--internal-font-weight-medium);line-height:1.35}.admission-sale-label.success{color:var(--internal-success)}.quantity-controls{display:inline-flex;align-items:center;gap:0;background:var(--internal-secondary);border-radius:calc(var(--internal-radius) - 2px);overflow:hidden;transition:all var(--internal-transition-fast)}.quantity-controls:has(.quantity-value:focus-visible){box-shadow:0 0 0 2px var(--internal-ring)}.quantity-btn{width:calc(var(--internal-spacing-lg) * 1.5);height:calc(var(--internal-spacing-lg) * 1.5);border:none;background:transparent;color:var(--internal-muted-foreground);font-size:var(--internal-font-size-base);font-weight:var(--internal-font-weight-medium);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--internal-transition-fast);position:relative}.quantity-btn:focus-visible{outline:2px solid var(--internal-ring);outline-offset:-2px;z-index:1}.quantity-btn:hover:not(:disabled){background:var(--internal-accent);color:var(--internal-accent-foreground)}.quantity-btn:active:not(:disabled){transform:scale(0.95)}.quantity-btn:disabled{opacity:0.6;cursor:not-allowed;background:var(--internal-secondary);color:var(--internal-muted-foreground);border-color:var(--internal-border)}.quantity-btn.decrease{border-right:1px solid var(--internal-input)}.quantity-btn.increase{border-left:1px solid var(--internal-input)}.quantity-value{appearance:textfield;width:2.75rem;height:calc(var(--internal-spacing-lg) * 1.5);border:none;background:transparent;min-width:2.5rem;text-align:center;font-size:var(--internal-font-size-sm);font-weight:var(--internal-font-weight-semibold);color:var(--internal-foreground);padding:0 var(--internal-spacing-xs)}.quantity-value:focus-visible{outline:none}.quantity-value::-webkit-inner-spin-button,.quantity-value::-webkit-outer-spin-button{appearance:none;margin:0}.quantity-value:disabled{opacity:0.6;cursor:not-allowed}.sold-out-controls{display:inline-flex;align-items:center;justify-content:center;min-width:calc(var(--internal-spacing-lg) * 1.5 * 2 + 2.5rem);height:calc(var(--internal-spacing-lg) * 1.5);padding:0;background:transparent;border:none;box-shadow:none}.sold-out-controls,.sold-out-text{color:var(--internal-destructive);font-size:var(--internal-font-size-xs);font-weight:var(--internal-font-weight-medium);letter-spacing:0.025em;text-transform:uppercase}.sold-out-controls.success,.sold-out-controls.success .sold-out-text{color:var(--internal-success)}.checkout-actions{margin:var(--internal-spacing-lg) 0 0 0;width:100%}.coupon-panel{margin-bottom:var(--internal-spacing-md)}.coupon-row{position:relative;display:flex;align-items:center;width:100%;min-width:0;overflow:hidden;background:var(--internal-background);background-clip:padding-box;border-radius:var(--internal-radius);transition:border-color var(--internal-transition-fast)}.coupon-row:focus-within{border-color:var(--internal-ring)}.coupon-row:has(input[aria-invalid="true"]){border-color:var(--internal-destructive)}.coupon-row:has(input:disabled){opacity:0.64}.coupon-row input{width:100%;min-width:0;padding:calc(var(--internal-spacing-sm) - 1px)
|
|
23619
23619
|
calc(var(--internal-spacing-xl) * 2.75)
|
|
23620
23620
|
calc(var(--internal-spacing-sm) - 1px)
|
|
23621
23621
|
calc(var(--internal-spacing-md) - 1px);background:var(--internal-card);color:var(--internal-foreground);border:none;border-radius:inherit;font:inherit;font-size:var(--internal-font-size-sm);line-height:1.25rem;outline:none}.coupon-row input::placeholder{color:oklch(from var(--internal-muted-foreground) l c h / 0.64)}.coupon-row input:disabled{cursor:not-allowed}.coupon-apply,.coupon-remove{position:absolute;right:calc((var(--internal-spacing-xs) * 1.5) - 3px);top:50%;transform:translateY(-50%);padding:calc(var(--internal-spacing-xs) * 1.25) var(--internal-spacing-sm);background:var(--internal-secondary);color:var(--internal-foreground);border-radius:calc(var(--internal-radius) - 2px);font-size:var(--internal-font-size-xs);font-weight:var(--internal-font-weight-medium);cursor:pointer;transition:all var(--internal-transition-fast)}.coupon-apply:hover:not(:disabled),.coupon-remove:hover:not(:disabled){background:oklch(from var(--internal-accent) l c h / 0.8)}.coupon-apply:focus-visible,.coupon-remove:focus-visible{outline:2px solid var(--internal-ring);outline-offset:-1px}.coupon-apply:disabled,.coupon-remove:disabled{opacity:0.6;cursor:not-allowed}.checkout-btn{width:100%;padding:calc(var(--internal-spacing-sm) + var(--internal-spacing-xs))
|
|
23622
|
-
var(--internal-spacing-lg);font-size:var(--internal-font-size-base);font-weight:var(--internal-font-weight-bold);line-height:1.25;position:relative;overflow:hidden}.checkout-btn:focus-visible{outline:2px solid var(--internal-ring);outline-offset:2px}.checkout-btn:active:not(:disabled){transform:translateY(0)}.checkout-btn:disabled{opacity:0.5;cursor:not-allowed}.checkout-spinner-wrapper{display:inline-flex;align-items:center;justify-content:center;height:1.25em;vertical-align:middle}.checkout-spinner{width:1.125em;height:1.125em;animation:checkout-spinner 0.8s linear infinite}@keyframes checkout-spinner{to{transform:rotate(360deg)}}.sticky-checkout-bar{position:fixed;right:0;bottom:0;left:0;z-index:40;display:none;padding:var(--internal-spacing-md);background:var(--internal-card);border-top:1px solid var(--internal-border);box-shadow:var(--internal-shadow-lg)}.sticky-checkout-btn.selection-prompt{animation:selection-prompt-shake 400ms ease-in-out}@keyframes selection-prompt-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}.
|
|
23623
|
-
from var(--internal-destructive) calc(l + 0.4) calc(c * 0.2) h / 0.05
|
|
23624
|
-
);border:1px solid oklch(from var(--internal-destructive) l c h / 0.2);border-radius:var(--internal-radius);padding:var(--internal-spacing-lg);margin:var(--internal-spacing-lg);text-align:center}.error-banner strong{display:block;color:var(--internal-destructive);font-size:var(--internal-font-size-lg);margin-bottom:var(--internal-spacing-sm)}.error-banner p{color:var(--internal-muted-foreground);margin-bottom:var(--internal-spacing-md)}.retry-button{background:var(--internal-primary);color:var(--internal-primary-foreground);border:1px solid oklch(from var(--internal-primary) calc(l - 0.08) c h);padding:calc(var(--internal-spacing-sm) + var(--internal-spacing-xs))
|
|
23622
|
+
var(--internal-spacing-lg);font-size:var(--internal-font-size-base);font-weight:var(--internal-font-weight-bold);line-height:1.25;position:relative;overflow:hidden}.checkout-btn:focus-visible{outline:2px solid var(--internal-ring);outline-offset:2px}.checkout-btn:active:not(:disabled){transform:translateY(0)}.checkout-btn:disabled{opacity:0.5;cursor:not-allowed}.checkout-spinner-wrapper{display:inline-flex;align-items:center;justify-content:center;height:1.25em;vertical-align:middle}.checkout-spinner{width:1.125em;height:1.125em;animation:checkout-spinner 0.8s linear infinite}@keyframes checkout-spinner{to{transform:rotate(360deg)}}.sticky-checkout-bar{position:fixed;right:0;bottom:0;left:0;z-index:40;display:none;padding:var(--internal-spacing-md);background:var(--internal-card);border-top:1px solid var(--internal-border);box-shadow:var(--internal-shadow-lg)}.sticky-checkout-btn.selection-prompt{animation:selection-prompt-shake 400ms ease-in-out}@keyframes selection-prompt-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}.retry-button{align-self:flex-start;margin-top:var(--internal-spacing-xs);background:var(--internal-primary);color:var(--internal-primary-foreground);border:1px solid oklch(from var(--internal-primary) calc(l - 0.08) c h);padding:calc(var(--internal-spacing-sm) + var(--internal-spacing-xs))
|
|
23625
23623
|
var(--internal-spacing-lg);border-radius:calc(var(--internal-radius) - 2px);font-size:var(--internal-font-size-sm);font-weight:var(--internal-font-weight-medium);cursor:pointer;transition:all var(--internal-transition-fast);box-shadow:var(--internal-shadow-edge-light)}.retry-button:focus-visible{outline:2px solid var(--internal-ring);outline-offset:2px}.retry-button:hover{background:oklch(from var(--internal-primary) calc(l - 0.08) c h);transform:translateY(-1px)}.retry-button:active{transform:translateY(0)}.error-message{background:oklch(
|
|
23626
23624
|
from var(--internal-destructive) calc(l + 0.4) calc(c * 0.2) h / 0.05
|
|
23627
|
-
);border:1px solid oklch(from var(--internal-destructive) l c h / 0.2);color:var(--internal-destructive);padding:var(--internal-spacing-sm) var(--internal-spacing-md);border-radius:var(--internal-radius);margin-bottom:var(--internal-spacing-md);font-size:var(--internal-font-size-sm)}@media (min-width: 768px){.ticket-section{border-radius:var(--internal-radius);margin:0 0 var(--internal-spacing-md) 0}}@media (max-width: 767px){:host([data-sticky-checkout="true"]) .session-services-ticketing-container{padding-bottom:calc(var(--internal-spacing-xl) * 3)}.sticky-checkout-bar{display:block}}.modal-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:var(--internal-spacing-md);background:var(--internal-backdrop);backdrop-filter:blur(4px);animation:modal-backdrop-fade-in var(--internal-transition-base) ease-out}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}.modal-content{position:relative;width:100%;max-width:32rem;max-height:calc(100vh - var(--internal-spacing-xl) * 2);overflow-y:auto;background:var(--internal-popover);color:var(--internal-popover-foreground);border:1px solid var(--internal-border);border-radius:var(--internal-radius);padding:var(--internal-spacing-lg);box-shadow:var(--internal-shadow-xl);animation:modal-content-scale-in var(--internal-transition-base) ease-out}@keyframes modal-content-scale-in{from{opacity:0;transform:scale(0.98)}to{opacity:1;transform:scale(1)}}.modal-close-btn{position:absolute;top:var(--internal-spacing-sm);right:var(--internal-spacing-sm);display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:transparent;border:1px solid transparent;border-radius:calc(var(--internal-radius) - 4px);color:var(--internal-muted-foreground);cursor:pointer;opacity:0.72;transition:all var(--internal-transition-fast)}.modal-close-btn:hover{opacity:1;background:var(--internal-accent)}.modal-close-btn:focus-visible{outline:2px solid var(--internal-ring);outline-offset:1px;opacity:1}.modal-header{margin-bottom:var(--internal-spacing-md);padding-right:var(--internal-spacing-xl)}.modal-title{font-size:var(--internal-font-size-xl);font-weight:var(--internal-font-weight-semibold);color:var(--internal-foreground);margin:0;line-height:1.2}.modal-subtitle{color:var(--internal-muted-foreground);font-size:var(--internal-font-size-sm);margin-top:var(--internal-spacing-xs);line-height:1.4}.modal-description{color:var(--internal-foreground);font-size:var(--internal-font-size-base);line-height:1.6;white-space:pre-wrap;margin:0}`;
|
|
23625
|
+
);border:1px solid oklch(from var(--internal-destructive) l c h / 0.2);color:var(--internal-destructive);padding:var(--internal-spacing-sm) var(--internal-spacing-md);border-radius:var(--internal-radius);margin-bottom:var(--internal-spacing-md);font-size:var(--internal-font-size-sm)}@media (min-width: 768px){.ticket-section{border-radius:var(--internal-radius);margin:0 0 var(--internal-spacing-md) 0}}@media (max-width: 767px){:host([data-sticky-checkout="true"]) .session-services-ticketing-container{padding-bottom:calc(var(--internal-spacing-xl) * 3)}:host([data-sticky-checkout="true"]) .checkout-actions>.checkout-btn,:host([data-sticky-checkout="true"]) .inline-external-ticket-button{display:none}.sticky-checkout-bar{display:block}}.modal-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:var(--internal-spacing-md);background:var(--internal-backdrop);backdrop-filter:blur(4px);animation:modal-backdrop-fade-in var(--internal-transition-base) ease-out}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}.modal-content{position:relative;width:100%;max-width:32rem;max-height:calc(100vh - var(--internal-spacing-xl) * 2);overflow-y:auto;background:var(--internal-popover);color:var(--internal-popover-foreground);border:1px solid var(--internal-border);border-radius:var(--internal-radius);padding:var(--internal-spacing-lg);box-shadow:var(--internal-shadow-xl);animation:modal-content-scale-in var(--internal-transition-base) ease-out}@keyframes modal-content-scale-in{from{opacity:0;transform:scale(0.98)}to{opacity:1;transform:scale(1)}}.modal-close-btn{position:absolute;top:var(--internal-spacing-sm);right:var(--internal-spacing-sm);display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:transparent;border:1px solid transparent;border-radius:calc(var(--internal-radius) - 4px);color:var(--internal-muted-foreground);cursor:pointer;opacity:0.72;transition:all var(--internal-transition-fast)}.modal-close-btn:hover{opacity:1;background:var(--internal-accent)}.modal-close-btn:focus-visible{outline:2px solid var(--internal-ring);outline-offset:1px;opacity:1}.modal-header{margin-bottom:var(--internal-spacing-md);padding-right:var(--internal-spacing-xl)}.modal-title{font-size:var(--internal-font-size-xl);font-weight:var(--internal-font-weight-semibold);color:var(--internal-foreground);margin:0;line-height:1.2}.modal-subtitle{color:var(--internal-muted-foreground);font-size:var(--internal-font-size-sm);margin-top:var(--internal-spacing-xs);line-height:1.4}.modal-description{color:var(--internal-foreground);font-size:var(--internal-font-size-base);line-height:1.6;white-space:pre-wrap;margin:0}`;
|
|
23628
23626
|
|
|
23629
23627
|
const quoteTotal = (quote) => quote.price?.total ?? 0;
|
|
23630
23628
|
const QUOTE_DEBOUNCE_MS = 150;
|
|
23629
|
+
const STICKY_CHECKOUT_SCROLL_OFFSET_PX = 100;
|
|
23631
23630
|
function objectValue(value, key) {
|
|
23632
23631
|
if (!value || typeof value !== "object")
|
|
23633
23632
|
return undefined;
|
|
@@ -23663,6 +23662,16 @@ function eventVenueName(event) {
|
|
|
23663
23662
|
function optionalId(id) {
|
|
23664
23663
|
return id || undefined;
|
|
23665
23664
|
}
|
|
23665
|
+
function urlDomain(url) {
|
|
23666
|
+
if (!url)
|
|
23667
|
+
return "external site";
|
|
23668
|
+
try {
|
|
23669
|
+
return new URL(url).hostname.replace(/^www\./, "");
|
|
23670
|
+
}
|
|
23671
|
+
catch {
|
|
23672
|
+
return "external site";
|
|
23673
|
+
}
|
|
23674
|
+
}
|
|
23666
23675
|
function admissionAriaLabel(admission, section, status) {
|
|
23667
23676
|
if (section)
|
|
23668
23677
|
return `${admission.name} in ${section.name} - ${status}`;
|
|
@@ -24444,14 +24453,21 @@ const SessionsTicketing = class {
|
|
|
24444
24453
|
handleStickyCheckoutClick(state) {
|
|
24445
24454
|
if (state.isDoorOnly || !hasQuoteItems(this.quote)) {
|
|
24446
24455
|
this.promptTicketSelection();
|
|
24447
|
-
this.
|
|
24448
|
-
behavior: "smooth",
|
|
24449
|
-
block: "start",
|
|
24450
|
-
});
|
|
24456
|
+
this.scrollToTicketSelector();
|
|
24451
24457
|
return;
|
|
24452
24458
|
}
|
|
24453
24459
|
this.initiateCheckout().catch(() => undefined);
|
|
24454
24460
|
}
|
|
24461
|
+
scrollToTicketSelector() {
|
|
24462
|
+
const target = this.host.shadowRoot?.querySelector(".tickets-wrapper") ??
|
|
24463
|
+
this.host;
|
|
24464
|
+
window.scrollTo({
|
|
24465
|
+
behavior: "smooth",
|
|
24466
|
+
top: Math.max(target.getBoundingClientRect().top +
|
|
24467
|
+
window.scrollY -
|
|
24468
|
+
STICKY_CHECKOUT_SCROLL_OFFSET_PX, 0),
|
|
24469
|
+
});
|
|
24470
|
+
}
|
|
24455
24471
|
getCartProducts() {
|
|
24456
24472
|
if (!this.quote)
|
|
24457
24473
|
return [];
|
|
@@ -24660,29 +24676,29 @@ const SessionsTicketing = class {
|
|
|
24660
24676
|
}
|
|
24661
24677
|
return (index.h(index.h.Fragment, null, this.renderEventTimeAndLocation(event), this.renderPriceAndControls(admission, sectionId, state, mode)));
|
|
24662
24678
|
}
|
|
24663
|
-
renderSectionHeader(section, admissions
|
|
24664
|
-
return (index.h("div", { class: "section-header" }, index.h("h2", { class: "section-name" }, section.name
|
|
24679
|
+
renderSectionHeader(section, admissions) {
|
|
24680
|
+
return (index.h("div", { class: "section-header" }, index.h("h2", { class: "section-name" }, section.name), this.renderAdmissionTime(admissions[0], "section-time"), this.renderSectionLocation(section)));
|
|
24665
24681
|
}
|
|
24666
24682
|
renderSectionWithAdmissions(section, admissions, event, mode) {
|
|
24667
24683
|
const soldOut = isSectionSoldOut({
|
|
24668
24684
|
admissions,
|
|
24669
24685
|
section,
|
|
24670
24686
|
});
|
|
24671
|
-
return (index.h("div", { class: `ticket-section ${soldOut ? "section-sold-out" : ""}`, key: section.id }, this.renderSectionHeader(section, admissions
|
|
24687
|
+
return (index.h("div", { class: `ticket-section ${soldOut ? "section-sold-out" : ""}`, key: section.id }, this.renderSectionHeader(section, admissions), index.h("div", { class: "admissions-list" }, admissions.map((admission) => this.renderAdmission(admission, event, section, soldOut, mode)))));
|
|
24672
24688
|
}
|
|
24673
24689
|
renderLoadingState() {
|
|
24674
|
-
return (index.h(index.Host, { "data-theme": this.currentTheme }, index.h("div", { class: "loading-
|
|
24690
|
+
return (index.h(index.Host, { "data-theme": this.currentTheme }, index.h("div", { class: "session-services-ticketing-container" }, index.h("div", { class: "tickets-wrapper" }, index.h("h2", { class: "tickets-heading" }, "Get Tickets"), index.h("div", { class: "ticket-section loading-ticket-section" }, index.h("div", { class: "admissions-list" }, [0, 1, 2].map((item) => (index.h("div", { "aria-hidden": "true", class: "admission-card loading-admission", key: item })))))))));
|
|
24675
24691
|
}
|
|
24676
24692
|
renderErrorState() {
|
|
24677
24693
|
if (this.passcodeDenied)
|
|
24678
24694
|
return this.renderPasscodeState();
|
|
24679
|
-
return (index.h(index.Host, { "data-theme": this.currentTheme }, index.h("div", { class: "session-services-ticketing-container" }, index.h("div", { class: "
|
|
24695
|
+
return (index.h(index.Host, { "data-theme": this.currentTheme }, index.h("div", { class: "session-services-ticketing-container" }, index.h("div", { class: "message-state" }, index.h("strong", null, "Tickets Couldn\u2019t Load"), index.h("span", null, "We couldn\u2019t load ticket details. Try again in a moment."), index.h("button", { type: "button", class: "retry-button", onClick: () => this.loadEventData() }, "Try Again")))));
|
|
24680
24696
|
}
|
|
24681
24697
|
renderPasscodeState() {
|
|
24682
24698
|
return (index.h(index.Host, { "data-theme": this.currentTheme }, index.h("div", { class: "session-services-ticketing-container" }, index.h("form", { class: "passcode-form", onSubmit: (e) => this.submitPasscode(e) }, index.h("h2", null, "Enter passcode"), index.h("p", null, "Enter the event passcode to view tickets and event details."), index.h("input", { type: "text", name: "passcode", value: this.passcodeInput, onInput: this.handlePasscodeInput, autocomplete: "one-time-code", placeholder: "Passcode", "aria-label": "Passcode" }), this.passcodeDenied && this.activePasscode && (index.h("span", { class: "error-message" }, "Incorrect passcode")), index.h("button", { type: "submit", class: "checkout-btn", disabled: !this.passcodeInput.trim() }, "Unlock event")))));
|
|
24683
24699
|
}
|
|
24684
24700
|
renderNotFoundState() {
|
|
24685
|
-
return (index.h(index.Host, { "data-theme": this.currentTheme }, index.h("div", { class: "session-services-ticketing-container" }, index.h("div", { class: "
|
|
24701
|
+
return (index.h(index.Host, { "data-theme": this.currentTheme }, index.h("div", { class: "session-services-ticketing-container" }, index.h("div", { class: "message-state" }, index.h("strong", null, "Event not found"), index.h("span", null, "We couldn\u2019t find this event. The link may be incorrect or expired.")))));
|
|
24686
24702
|
}
|
|
24687
24703
|
renderCouponPanel() {
|
|
24688
24704
|
const hasInput = this.couponInput.trim().length > 0;
|
|
@@ -24764,6 +24780,14 @@ const SessionsTicketing = class {
|
|
|
24764
24780
|
return null;
|
|
24765
24781
|
return (index.h("div", { class: "sticky-checkout-bar" }, index.h("button", { type: "button", class: `checkout-btn sticky-checkout-btn ${this.selectionPrompt ? "selection-prompt" : ""}`, onClick: () => this.handleStickyCheckoutClick(state), disabled: this.isStickyCheckoutDisabled(state), "aria-label": this.quoteLoading ? "Updating" : undefined }, this.renderStickyCheckoutButtonContent(state))));
|
|
24766
24782
|
}
|
|
24783
|
+
renderStickyExternalTicketing(state) {
|
|
24784
|
+
if (!this.stickyCheckout)
|
|
24785
|
+
return null;
|
|
24786
|
+
if (!state.externalTicketUrl)
|
|
24787
|
+
return null;
|
|
24788
|
+
const domain = urlDomain(state.externalTicketUrl);
|
|
24789
|
+
return (index.h("div", { class: "sticky-checkout-bar" }, index.h("a", { class: "external-ticket-button sticky-checkout-btn", href: state.externalTicketUrl, target: "_blank", rel: "noreferrer" }, index.h("span", { class: "external-ticket-label" }, "Get tickets"), index.h("span", { class: "external-ticket-domain" }, "via ", domain))));
|
|
24790
|
+
}
|
|
24767
24791
|
renderModal() {
|
|
24768
24792
|
if (!this.openModalAdmissionId)
|
|
24769
24793
|
return null;
|
|
@@ -24790,7 +24814,7 @@ const SessionsTicketing = class {
|
|
|
24790
24814
|
if (mode !== "door")
|
|
24791
24815
|
return null;
|
|
24792
24816
|
const location = event.location?.name?.trim() || "the venue";
|
|
24793
|
-
return (index.h("div", { class: "door-alert" }, index.h("strong", null, "Tickets are available at ", location), index.h("span", null, "Online sales are closed.
|
|
24817
|
+
return (index.h("div", { class: "door-alert" }, index.h("strong", null, "Tickets are available at ", location), index.h("span", null, "Online sales are closed. Tickets are available at the venue when you arrive.")));
|
|
24794
24818
|
}
|
|
24795
24819
|
loadingView() {
|
|
24796
24820
|
return this.loading ? this.renderLoadingState() : undefined;
|
|
@@ -24810,7 +24834,7 @@ const SessionsTicketing = class {
|
|
|
24810
24834
|
return this.renderNotFoundState();
|
|
24811
24835
|
const state = getTicketingState(event);
|
|
24812
24836
|
if (state.showExternalTicketing) {
|
|
24813
|
-
return this.renderExternalTicketing(state.
|
|
24837
|
+
return (index.h(index.Host, { "data-theme": this.currentTheme, "data-sticky-checkout": this.stickyCheckout ? "true" : undefined }, index.h("div", { class: "session-services-ticketing-container" }, this.renderExternalTicketing(state)), this.renderStickyExternalTicketing(state)));
|
|
24814
24838
|
}
|
|
24815
24839
|
return (index.h(index.Host, { "data-theme": this.currentTheme, "data-sticky-checkout": this.stickyCheckout ? "true" : undefined }, index.h("div", { class: "session-services-ticketing-container" }, state.showTicketing
|
|
24816
24840
|
? this.renderTicketSections(event)
|
|
@@ -24818,13 +24842,16 @@ const SessionsTicketing = class {
|
|
|
24818
24842
|
state.showTicketing &&
|
|
24819
24843
|
this.renderCheckoutActions()), this.renderStickyCheckout(state), this.renderModal()));
|
|
24820
24844
|
}
|
|
24821
|
-
renderExternalTicketing(
|
|
24822
|
-
|
|
24845
|
+
renderExternalTicketing(state) {
|
|
24846
|
+
const domain = urlDomain(state.externalTicketUrl);
|
|
24847
|
+
if (!state.externalTicketUrl)
|
|
24848
|
+
return null;
|
|
24849
|
+
return (index.h("div", { class: "tickets-wrapper" }, index.h("h2", { class: "tickets-heading" }, state.ticketHeading), index.h("div", { class: "external-ticket-panel" }, index.h("p", { class: "external-ticket-warning" }, "This event sells through an external ticketing site. Checkout, tickets, and support are handled there."), index.h("a", { class: "external-ticket-button inline-external-ticket-button", href: state.externalTicketUrl, target: "_blank", rel: "noreferrer" }, index.h("span", { class: "external-ticket-label" }, "Get tickets"), index.h("span", { class: "external-ticket-domain" }, "via ", domain)))));
|
|
24823
24850
|
}
|
|
24824
24851
|
renderUnavailableState(state) {
|
|
24825
|
-
return (index.h("div", { class: "empty-ticketing-state" }, index.h("strong", null,
|
|
24826
|
-
? "
|
|
24827
|
-
: "Tickets are not
|
|
24852
|
+
return (index.h("div", { class: "empty-ticketing-state" }, index.h("strong", null, "Tickets Unavailable"), index.h("span", null, state.isEnded
|
|
24853
|
+
? "This event has ended, so tickets are no longer available."
|
|
24854
|
+
: "Tickets are not available for this event right now.")));
|
|
24828
24855
|
}
|
|
24829
24856
|
render() {
|
|
24830
24857
|
return this.pendingView() ?? this.renderReadyState();
|
package/dist/collection/components/session-services-ticketing/session-services-ticketing.css
CHANGED
|
@@ -251,8 +251,40 @@ textarea {
|
|
|
251
251
|
margin: 0 0 var(--internal-spacing-md);
|
|
252
252
|
}
|
|
253
253
|
|
|
254
|
-
.
|
|
255
|
-
|
|
254
|
+
.ticket-section.loading-ticket-section {
|
|
255
|
+
overflow: visible;
|
|
256
|
+
background: transparent;
|
|
257
|
+
border: 0;
|
|
258
|
+
box-shadow: none;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.loading-ticket-section .admissions-list {
|
|
262
|
+
display: flex;
|
|
263
|
+
flex-direction: column;
|
|
264
|
+
gap: var(--internal-spacing-sm);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.admission-card.loading-admission {
|
|
268
|
+
min-height: 5.25rem;
|
|
269
|
+
padding: 0;
|
|
270
|
+
background: oklch(from var(--internal-foreground) l c h / 0.07);
|
|
271
|
+
border: 0;
|
|
272
|
+
border-radius: var(--internal-radius);
|
|
273
|
+
box-shadow: none;
|
|
274
|
+
pointer-events: none;
|
|
275
|
+
animation: loading-card 1.6s ease-out infinite;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
@keyframes loading-card {
|
|
279
|
+
0%,
|
|
280
|
+
100% {
|
|
281
|
+
opacity: 0.48;
|
|
282
|
+
}
|
|
283
|
+
50% {
|
|
284
|
+
opacity: 0.74;
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
256
288
|
.passcode-form,
|
|
257
289
|
.passcode-form input,
|
|
258
290
|
.ticket-section,
|
|
@@ -286,8 +318,11 @@ textarea {
|
|
|
286
318
|
transform: translateY(-1px);
|
|
287
319
|
}
|
|
288
320
|
|
|
289
|
-
.
|
|
290
|
-
|
|
321
|
+
.external-ticket-button:focus-visible {
|
|
322
|
+
outline: 2px solid var(--internal-ring);
|
|
323
|
+
outline-offset: 2px;
|
|
324
|
+
}
|
|
325
|
+
|
|
291
326
|
.passcode-form {
|
|
292
327
|
display: flex;
|
|
293
328
|
flex-direction: column;
|
|
@@ -298,14 +333,36 @@ textarea {
|
|
|
298
333
|
border-radius: var(--internal-radius);
|
|
299
334
|
}
|
|
300
335
|
|
|
301
|
-
.
|
|
302
|
-
|
|
303
|
-
|
|
336
|
+
.passcode-form h2 {
|
|
337
|
+
color: var(--internal-foreground);
|
|
338
|
+
font-size: var(--internal-font-size-base);
|
|
339
|
+
font-weight: var(--internal-font-weight-semibold);
|
|
340
|
+
line-height: 1.3;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.passcode-form p {
|
|
344
|
+
color: var(--internal-muted-foreground);
|
|
345
|
+
font-size: var(--internal-font-size-sm);
|
|
346
|
+
line-height: 1.5;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.door-alert,
|
|
350
|
+
.empty-ticketing-state,
|
|
351
|
+
.message-state {
|
|
352
|
+
display: flex;
|
|
353
|
+
flex-direction: column;
|
|
354
|
+
gap: calc(var(--internal-spacing-xs) * 1.5);
|
|
355
|
+
margin-bottom: var(--internal-spacing-md);
|
|
356
|
+
padding: 0;
|
|
357
|
+
background: transparent;
|
|
358
|
+
border: none;
|
|
359
|
+
border-radius: 0;
|
|
360
|
+
box-shadow: none;
|
|
304
361
|
}
|
|
305
362
|
|
|
306
363
|
.door-alert strong,
|
|
307
364
|
.empty-ticketing-state strong,
|
|
308
|
-
.
|
|
365
|
+
.message-state strong {
|
|
309
366
|
color: var(--internal-foreground);
|
|
310
367
|
font-size: var(--internal-font-size-base);
|
|
311
368
|
font-weight: var(--internal-font-weight-semibold);
|
|
@@ -314,19 +371,45 @@ textarea {
|
|
|
314
371
|
|
|
315
372
|
.door-alert span,
|
|
316
373
|
.empty-ticketing-state span,
|
|
317
|
-
.
|
|
374
|
+
.message-state span {
|
|
318
375
|
color: var(--internal-muted-foreground);
|
|
319
376
|
font-size: var(--internal-font-size-sm);
|
|
320
|
-
line-height: 1.
|
|
377
|
+
line-height: 1.4;
|
|
321
378
|
}
|
|
322
379
|
|
|
323
380
|
.external-ticket-button {
|
|
381
|
+
flex-direction: column;
|
|
382
|
+
gap: calc(var(--internal-spacing-xs) * 0.5);
|
|
324
383
|
width: 100%;
|
|
325
384
|
padding: calc(var(--internal-spacing-sm) + var(--internal-spacing-xs))
|
|
326
385
|
var(--internal-spacing-lg);
|
|
386
|
+
text-decoration: none;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.external-ticket-panel {
|
|
390
|
+
display: flex;
|
|
391
|
+
flex-direction: column;
|
|
392
|
+
gap: var(--internal-spacing-md);
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.external-ticket-warning {
|
|
396
|
+
color: var(--internal-muted-foreground);
|
|
397
|
+
font-size: var(--internal-font-size-sm);
|
|
398
|
+
font-weight: var(--internal-font-weight-medium);
|
|
399
|
+
line-height: 1.35;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.external-ticket-label {
|
|
327
403
|
font-size: var(--internal-font-size-base);
|
|
328
404
|
font-weight: var(--internal-font-weight-bold);
|
|
329
|
-
|
|
405
|
+
line-height: 1.2;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.external-ticket-domain {
|
|
409
|
+
font-size: var(--internal-font-size-xs);
|
|
410
|
+
font-weight: var(--internal-font-weight-medium);
|
|
411
|
+
line-height: 1.2;
|
|
412
|
+
opacity: 0.82;
|
|
330
413
|
}
|
|
331
414
|
|
|
332
415
|
.passcode-form input {
|
|
@@ -569,22 +652,6 @@ textarea {
|
|
|
569
652
|
flex-shrink: 0;
|
|
570
653
|
}
|
|
571
654
|
|
|
572
|
-
.sold-out-badge {
|
|
573
|
-
display: inline-flex;
|
|
574
|
-
align-items: center;
|
|
575
|
-
justify-content: center;
|
|
576
|
-
padding: 0;
|
|
577
|
-
background: transparent;
|
|
578
|
-
color: var(--internal-destructive);
|
|
579
|
-
border: none;
|
|
580
|
-
font-size: var(--internal-font-size-sm);
|
|
581
|
-
font-weight: var(--internal-font-weight-medium);
|
|
582
|
-
text-transform: uppercase;
|
|
583
|
-
letter-spacing: 0.05em;
|
|
584
|
-
margin-left: auto;
|
|
585
|
-
opacity: 0.7;
|
|
586
|
-
}
|
|
587
|
-
|
|
588
655
|
.admission-price-info {
|
|
589
656
|
display: flex;
|
|
590
657
|
align-items: center;
|
|
@@ -941,40 +1008,9 @@ textarea {
|
|
|
941
1008
|
}
|
|
942
1009
|
}
|
|
943
1010
|
|
|
944
|
-
/* Loading & Error States */
|
|
945
|
-
.loading-state {
|
|
946
|
-
display: flex;
|
|
947
|
-
justify-content: center;
|
|
948
|
-
align-items: center;
|
|
949
|
-
padding: var(--internal-spacing-xl);
|
|
950
|
-
text-align: center;
|
|
951
|
-
min-height: 200px;
|
|
952
|
-
}
|
|
953
|
-
|
|
954
|
-
.error-banner {
|
|
955
|
-
background: oklch(
|
|
956
|
-
from var(--internal-destructive) calc(l + 0.4) calc(c * 0.2) h / 0.05
|
|
957
|
-
);
|
|
958
|
-
border: 1px solid oklch(from var(--internal-destructive) l c h / 0.2);
|
|
959
|
-
border-radius: var(--internal-radius);
|
|
960
|
-
padding: var(--internal-spacing-lg);
|
|
961
|
-
margin: var(--internal-spacing-lg);
|
|
962
|
-
text-align: center;
|
|
963
|
-
}
|
|
964
|
-
|
|
965
|
-
.error-banner strong {
|
|
966
|
-
display: block;
|
|
967
|
-
color: var(--internal-destructive);
|
|
968
|
-
font-size: var(--internal-font-size-lg);
|
|
969
|
-
margin-bottom: var(--internal-spacing-sm);
|
|
970
|
-
}
|
|
971
|
-
|
|
972
|
-
.error-banner p {
|
|
973
|
-
color: var(--internal-muted-foreground);
|
|
974
|
-
margin-bottom: var(--internal-spacing-md);
|
|
975
|
-
}
|
|
976
|
-
|
|
977
1011
|
.retry-button {
|
|
1012
|
+
align-self: flex-start;
|
|
1013
|
+
margin-top: var(--internal-spacing-xs);
|
|
978
1014
|
background: var(--internal-primary);
|
|
979
1015
|
color: var(--internal-primary-foreground);
|
|
980
1016
|
border: 1px solid oklch(from var(--internal-primary) calc(l - 0.08) c h);
|
|
@@ -1027,6 +1063,11 @@ textarea {
|
|
|
1027
1063
|
padding-bottom: calc(var(--internal-spacing-xl) * 3);
|
|
1028
1064
|
}
|
|
1029
1065
|
|
|
1066
|
+
:host([data-sticky-checkout="true"]) .checkout-actions > .checkout-btn,
|
|
1067
|
+
:host([data-sticky-checkout="true"]) .inline-external-ticket-button {
|
|
1068
|
+
display: none;
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1030
1071
|
.sticky-checkout-bar {
|
|
1031
1072
|
display: block;
|
|
1032
1073
|
}
|
|
@@ -9,6 +9,7 @@ h, } from "@stencil/core";
|
|
|
9
9
|
import { admissionPriceSavings, discountCouponFromSearch, getAdmissionDisplayState, getAdmissionPriceDisplay, getTicketingState, parseSelectionKey, previewQuoteItems, priceTotal, quoteItemsBySelection, selectionKey, topLevelTicketItems, visibleAdmissions, } from "./session-services-ticketing.logic";
|
|
10
10
|
const quoteTotal = (quote) => quote.price?.total ?? 0;
|
|
11
11
|
const QUOTE_DEBOUNCE_MS = 150;
|
|
12
|
+
const STICKY_CHECKOUT_SCROLL_OFFSET_PX = 100;
|
|
12
13
|
function objectValue(value, key) {
|
|
13
14
|
if (!value || typeof value !== "object")
|
|
14
15
|
return undefined;
|
|
@@ -44,6 +45,16 @@ function eventVenueName(event) {
|
|
|
44
45
|
function optionalId(id) {
|
|
45
46
|
return id || undefined;
|
|
46
47
|
}
|
|
48
|
+
function urlDomain(url) {
|
|
49
|
+
if (!url)
|
|
50
|
+
return "external site";
|
|
51
|
+
try {
|
|
52
|
+
return new URL(url).hostname.replace(/^www\./, "");
|
|
53
|
+
}
|
|
54
|
+
catch {
|
|
55
|
+
return "external site";
|
|
56
|
+
}
|
|
57
|
+
}
|
|
47
58
|
function admissionAriaLabel(admission, section, status) {
|
|
48
59
|
if (section)
|
|
49
60
|
return `${admission.name} in ${section.name} - ${status}`;
|
|
@@ -819,14 +830,21 @@ export class SessionsTicketing {
|
|
|
819
830
|
handleStickyCheckoutClick(state) {
|
|
820
831
|
if (state.isDoorOnly || !hasQuoteItems(this.quote)) {
|
|
821
832
|
this.promptTicketSelection();
|
|
822
|
-
this.
|
|
823
|
-
behavior: "smooth",
|
|
824
|
-
block: "start",
|
|
825
|
-
});
|
|
833
|
+
this.scrollToTicketSelector();
|
|
826
834
|
return;
|
|
827
835
|
}
|
|
828
836
|
this.initiateCheckout().catch(() => undefined);
|
|
829
837
|
}
|
|
838
|
+
scrollToTicketSelector() {
|
|
839
|
+
const target = this.host.shadowRoot?.querySelector(".tickets-wrapper") ??
|
|
840
|
+
this.host;
|
|
841
|
+
window.scrollTo({
|
|
842
|
+
behavior: "smooth",
|
|
843
|
+
top: Math.max(target.getBoundingClientRect().top +
|
|
844
|
+
window.scrollY -
|
|
845
|
+
STICKY_CHECKOUT_SCROLL_OFFSET_PX, 0),
|
|
846
|
+
});
|
|
847
|
+
}
|
|
830
848
|
getCartProducts() {
|
|
831
849
|
if (!this.quote)
|
|
832
850
|
return [];
|
|
@@ -1036,29 +1054,29 @@ export class SessionsTicketing {
|
|
|
1036
1054
|
}
|
|
1037
1055
|
return (h(h.Fragment, null, this.renderEventTimeAndLocation(event), this.renderPriceAndControls(admission, sectionId, state, mode)));
|
|
1038
1056
|
}
|
|
1039
|
-
renderSectionHeader(section, admissions
|
|
1040
|
-
return (h("div", { class: "section-header" }, h("h2", { class: "section-name" }, section.name
|
|
1057
|
+
renderSectionHeader(section, admissions) {
|
|
1058
|
+
return (h("div", { class: "section-header" }, h("h2", { class: "section-name" }, section.name), this.renderAdmissionTime(admissions[0], "section-time"), this.renderSectionLocation(section)));
|
|
1041
1059
|
}
|
|
1042
1060
|
renderSectionWithAdmissions(section, admissions, event, mode) {
|
|
1043
1061
|
const soldOut = isSectionSoldOut({
|
|
1044
1062
|
admissions,
|
|
1045
1063
|
section,
|
|
1046
1064
|
});
|
|
1047
|
-
return (h("div", { class: `ticket-section ${soldOut ? "section-sold-out" : ""}`, key: section.id }, this.renderSectionHeader(section, admissions
|
|
1065
|
+
return (h("div", { class: `ticket-section ${soldOut ? "section-sold-out" : ""}`, key: section.id }, this.renderSectionHeader(section, admissions), h("div", { class: "admissions-list" }, admissions.map((admission) => this.renderAdmission(admission, event, section, soldOut, mode)))));
|
|
1048
1066
|
}
|
|
1049
1067
|
renderLoadingState() {
|
|
1050
|
-
return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "loading-
|
|
1068
|
+
return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, h("div", { class: "tickets-wrapper" }, h("h2", { class: "tickets-heading" }, "Get Tickets"), h("div", { class: "ticket-section loading-ticket-section" }, h("div", { class: "admissions-list" }, [0, 1, 2].map((item) => (h("div", { "aria-hidden": "true", class: "admission-card loading-admission", key: item })))))))));
|
|
1051
1069
|
}
|
|
1052
1070
|
renderErrorState() {
|
|
1053
1071
|
if (this.passcodeDenied)
|
|
1054
1072
|
return this.renderPasscodeState();
|
|
1055
|
-
return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, h("div", { class: "
|
|
1073
|
+
return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, h("div", { class: "message-state" }, h("strong", null, "Tickets Couldn\u2019t Load"), h("span", null, "We couldn\u2019t load ticket details. Try again in a moment."), h("button", { type: "button", class: "retry-button", onClick: () => this.loadEventData() }, "Try Again")))));
|
|
1056
1074
|
}
|
|
1057
1075
|
renderPasscodeState() {
|
|
1058
1076
|
return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, h("form", { class: "passcode-form", onSubmit: (e) => this.submitPasscode(e) }, h("h2", null, "Enter passcode"), h("p", null, "Enter the event passcode to view tickets and event details."), h("input", { type: "text", name: "passcode", value: this.passcodeInput, onInput: this.handlePasscodeInput, autocomplete: "one-time-code", placeholder: "Passcode", "aria-label": "Passcode" }), this.passcodeDenied && this.activePasscode && (h("span", { class: "error-message" }, "Incorrect passcode")), h("button", { type: "submit", class: "checkout-btn", disabled: !this.passcodeInput.trim() }, "Unlock event")))));
|
|
1059
1077
|
}
|
|
1060
1078
|
renderNotFoundState() {
|
|
1061
|
-
return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, h("div", { class: "
|
|
1079
|
+
return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, h("div", { class: "message-state" }, h("strong", null, "Event not found"), h("span", null, "We couldn\u2019t find this event. The link may be incorrect or expired.")))));
|
|
1062
1080
|
}
|
|
1063
1081
|
renderCouponPanel() {
|
|
1064
1082
|
const hasInput = this.couponInput.trim().length > 0;
|
|
@@ -1140,6 +1158,14 @@ export class SessionsTicketing {
|
|
|
1140
1158
|
return null;
|
|
1141
1159
|
return (h("div", { class: "sticky-checkout-bar" }, h("button", { type: "button", class: `checkout-btn sticky-checkout-btn ${this.selectionPrompt ? "selection-prompt" : ""}`, onClick: () => this.handleStickyCheckoutClick(state), disabled: this.isStickyCheckoutDisabled(state), "aria-label": this.quoteLoading ? "Updating" : undefined }, this.renderStickyCheckoutButtonContent(state))));
|
|
1142
1160
|
}
|
|
1161
|
+
renderStickyExternalTicketing(state) {
|
|
1162
|
+
if (!this.stickyCheckout)
|
|
1163
|
+
return null;
|
|
1164
|
+
if (!state.externalTicketUrl)
|
|
1165
|
+
return null;
|
|
1166
|
+
const domain = urlDomain(state.externalTicketUrl);
|
|
1167
|
+
return (h("div", { class: "sticky-checkout-bar" }, h("a", { class: "external-ticket-button sticky-checkout-btn", href: state.externalTicketUrl, target: "_blank", rel: "noreferrer" }, h("span", { class: "external-ticket-label" }, "Get tickets"), h("span", { class: "external-ticket-domain" }, "via ", domain))));
|
|
1168
|
+
}
|
|
1143
1169
|
renderModal() {
|
|
1144
1170
|
if (!this.openModalAdmissionId)
|
|
1145
1171
|
return null;
|
|
@@ -1166,7 +1192,7 @@ export class SessionsTicketing {
|
|
|
1166
1192
|
if (mode !== "door")
|
|
1167
1193
|
return null;
|
|
1168
1194
|
const location = event.location?.name?.trim() || "the venue";
|
|
1169
|
-
return (h("div", { class: "door-alert" }, h("strong", null, "Tickets are available at ", location), h("span", null, "Online sales are closed.
|
|
1195
|
+
return (h("div", { class: "door-alert" }, h("strong", null, "Tickets are available at ", location), h("span", null, "Online sales are closed. Tickets are available at the venue when you arrive.")));
|
|
1170
1196
|
}
|
|
1171
1197
|
loadingView() {
|
|
1172
1198
|
return this.loading ? this.renderLoadingState() : undefined;
|
|
@@ -1186,7 +1212,7 @@ export class SessionsTicketing {
|
|
|
1186
1212
|
return this.renderNotFoundState();
|
|
1187
1213
|
const state = getTicketingState(event);
|
|
1188
1214
|
if (state.showExternalTicketing) {
|
|
1189
|
-
return this.renderExternalTicketing(state.
|
|
1215
|
+
return (h(Host, { "data-theme": this.currentTheme, "data-sticky-checkout": this.stickyCheckout ? "true" : undefined }, h("div", { class: "session-services-ticketing-container" }, this.renderExternalTicketing(state)), this.renderStickyExternalTicketing(state)));
|
|
1190
1216
|
}
|
|
1191
1217
|
return (h(Host, { "data-theme": this.currentTheme, "data-sticky-checkout": this.stickyCheckout ? "true" : undefined }, h("div", { class: "session-services-ticketing-container" }, state.showTicketing
|
|
1192
1218
|
? this.renderTicketSections(event)
|
|
@@ -1194,13 +1220,16 @@ export class SessionsTicketing {
|
|
|
1194
1220
|
state.showTicketing &&
|
|
1195
1221
|
this.renderCheckoutActions()), this.renderStickyCheckout(state), this.renderModal()));
|
|
1196
1222
|
}
|
|
1197
|
-
renderExternalTicketing(
|
|
1198
|
-
|
|
1223
|
+
renderExternalTicketing(state) {
|
|
1224
|
+
const domain = urlDomain(state.externalTicketUrl);
|
|
1225
|
+
if (!state.externalTicketUrl)
|
|
1226
|
+
return null;
|
|
1227
|
+
return (h("div", { class: "tickets-wrapper" }, h("h2", { class: "tickets-heading" }, state.ticketHeading), h("div", { class: "external-ticket-panel" }, h("p", { class: "external-ticket-warning" }, "This event sells through an external ticketing site. Checkout, tickets, and support are handled there."), h("a", { class: "external-ticket-button inline-external-ticket-button", href: state.externalTicketUrl, target: "_blank", rel: "noreferrer" }, h("span", { class: "external-ticket-label" }, "Get tickets"), h("span", { class: "external-ticket-domain" }, "via ", domain)))));
|
|
1199
1228
|
}
|
|
1200
1229
|
renderUnavailableState(state) {
|
|
1201
|
-
return (h("div", { class: "empty-ticketing-state" }, h("strong", null,
|
|
1202
|
-
? "
|
|
1203
|
-
: "Tickets are not
|
|
1230
|
+
return (h("div", { class: "empty-ticketing-state" }, h("strong", null, "Tickets Unavailable"), h("span", null, state.isEnded
|
|
1231
|
+
? "This event has ended, so tickets are no longer available."
|
|
1232
|
+
: "Tickets are not available for this event right now.")));
|
|
1204
1233
|
}
|
|
1205
1234
|
render() {
|
|
1206
1235
|
return this.pendingView() ?? this.renderReadyState();
|