@classly/classly-business-webcomponents
Advanced tools
Comparing version 0.0.124 to 0.0.125
| import { r as registerInstance, h, e as Host, g as getAssetPath } from './index-d078694e.js'; | ||
| import { E as ENV, W, G as GRAPHQL_URI, L } from './urql-core-7b793e7a.js'; | ||
| import { C as CLASS_LIST_QUERY } from './class-queries-93e7a89c.js'; | ||
| import { C as CLASS_LIST_QUERY } from './class-queries-b850e9d8.js'; | ||
| import { L as LayoutType } from './layout-00f7e3fc.js'; | ||
| import { d as dayjs_min } from './dayjs-19a8d4eb.js'; | ||
| import { L as LoaderSize } from './loading-utils-9cda7f40.js'; | ||
| import { c as capitalize } from './course-utils-e1f7e2f0.js'; | ||
| import { c as capitalize } from './course-utils-41bfdfa0.js'; | ||
| import { B as ButtonType, a as ButtonVariant, b as ButtonSize, I as IconPosition } from './button-utils-dd8f0e6b.js'; | ||
| import { T as TagColor } from './tag-utils-2347efe9.js'; | ||
| import { b as buildImgixUrl } from './utils-7b7fa3fe.js'; | ||
@@ -65,4 +66,9 @@ const classListCss = "h1{font-size:var(--cl-text-4xl);font-weight:700;letter-spacing:-0.01rem;line-height:120%}h2{font-size:var(--cl-text-3xl);font-weight:600;letter-spacing:-0.01rem;line-height:120%}h3{font-size:var(--cl-text-3xl);font-weight:600;line-height:120%}h4{font-size:var(--cl-text-2xl);font-weight:600;line-height:120%}h1,h2,h3,h4,h5,h6{font-family:var(--cl-font-family);color:var(--cl-blue-1000);font-variant:normal;margin:0}h5{font-size:var(--cl-text-base);font-weight:500;line-height:150%}h6{font-size:var(--cl-text-sm);line-height:150%;font-weight:500}p{font-family:var(--font-family);font-size:var(--cl-text-base);font-weight:400;line-height:var(--cl-lh-base);color:var(--cl-blueGrey-900);overflow:hidden;margin:0;display:block;display:-webkit-box;height:var(--cl-text-base) * 5 * 54;font-size:var(--cl-text-base);-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}span{font-family:var(--cl-font-family);font-size:var(--cl-text-sm);color:var(--cl-blueGrey-700);font-weight:400;line-height:180%}:host{display:block;font-family:var(--cl-font-family);box-sizing:border-box;font-size:var(--cl-text-base);letter-spacing:normal;max-width:800px;margin:0 auto}.class-list-header{display:grid;justify-content:space-between;grid-template-columns:max-content max-content;margin-bottom:var(--cl-paddingS);text-align:center;justify-content:center}.loader-wrapper{display:flex;align-items:center;justify-content:center;height:50ch}.classes-list{display:grid;row-gap:var(--cl-spacing-xl)}.window-info{border-top:1px solid var(--cl-lightBorder-light);padding-top:var(--cl-paddingXS)}.window-info em{font-style:normal;font-weight:500}.window-info p{font-size:var(--cl-text-sm);color:var(--cl-blueGrey-700)}.class-photos{display:flex;grid-row:1}.session-list-wrapper{overflow-x:auto}.class-photos::-webkit-scrollbar{display:none}.classes-list-item{display:grid;background-color:white;gap:var(--cl-spacing-lg);padding:var(--cl-spacing-base) var(--cl-spacing-base) var(--cl-spacing-2xs);border-radius:var(--cl-borderRadius-xxlarge);border:1px solid var(--cl-lightBorder);box-shadow:var(--cl-shadowLow)}.class-list-item-image{width:100%;object-fit:cover;background-size:cover;background-position:center;overflow:hidden;border-radius:var(--cl-borderRadius-xlarge);aspect-ratio:16 / 9;border:1px solid var(--cl-blueGrey-200);filter:contrast(120%)}.classes-list-item .class-list-item-info{display:grid;gap:var(--cl-paddingXXS);width:100%}.classes-list-item .class-recurrence-rules{display:flex;align-items:center;flex-wrap:wrap;gap:var(--cl-spacing-2xs);margin-top:var(--cl-spacing-sm)}.classes-list-item .rule-tag{border:1px solid hsl(212, 33%, 89%);border-radius:6px;padding:var(--cl-spacing-5xs) var(--cl-spacing-4xs);background-color:hsl(0, 0%, 99.2%);justify-self:flex-start;align-self:flex-start}.classes-list-item .rule-tag-text{font-weight:500;font-size:var(--cl-text-sm);color:var(--cl-blueGrey-800);line-height:1}.classes-list-item .rule-time{font-weight:500;font-size:14px;color:hsl(209, 45%, 30%);line-height:2em}.classes-list-item .section{display:grid;align-items:center;justify-content:space-between;margin-top:var(--cl-paddingXXS)}.class-header{display:grid;gap:var(--cl-spacing-base);grid-template-columns:1fr}.classes-list-item .info-section{display:flex;align-items:center;margin-top:var(--cl-spacing-4xs)}.classes-list-item .class-ctas{display:flex;align-items:flex-start}.classes-list-item .info-section .cost{font-weight:500;font-size:var(--cl-text-2xl);line-height:normal;color:var(--cl-blueGrey-900)}.classes-list-item .info-section .person{color:var(--cl-blueGrey-600);font-size:var(--cl-text-sm);line-height:normal}.classes-list-item .section .highlight-content{font-weight:600;font-size:var(--cl-text-base);color:var(--cl-blueGrey-900)}.classes-list-item .section .content{color:var(--cl-blueGrey-600);font-size:15px}.classes-list .divider{height:1px;width:100%;background-color:var(--cl-lightBorder-light)}.read-more{cursor:pointer;font-weight:400;color:var(--cl-blueGrey-600)}.class-meet-item{display:grid;justify-self:flex-start;gap:var(--cl-paddingXXS);border:1px solid var(--cl-lightBorder);border-radius:var(--cl-borderRadius-large);padding:var(--cl-spacing-xs) var(--cl-spacing-xs) var(--cl-paddingS);grid-template-columns:max-content max-content;align-items:baseline;background-color:white}.class-meet-item .meet-info{display:grid;gap:var(--cl-paddingXXS)}.class-meet-item .meet-label{font-size:0.9em;color:var(--cl-blue-600);line-height:1.6}.class-meet-item .meet-session{line-height:0;color:var(--cl-blueGrey-600)}.instructors{display:grid;gap:var(--cl-spacing-lg);border-bottom:1px solid var(--cl-lightBorder-light);grid-template-columns:repeat(\n auto-fit,\n minmax(min(200px, 100%), max-content)\n );margin:var(--cl-spacing-xs) 0}.instructors .instructor{display:grid;gap:var(--cl-paddingXS);grid-template-columns:max-content 1fr}.instructor img{width:var(--cl-spacing-xl);height:var(--cl-spacing-xl);border-radius:50%;-webkit-box-shadow:inset 0px 0px 11px -5px rgb(0 0 0 / 30%);-moz-box-shadow:inset 0px 0px 11px -5px rgba(0, 0, 0, 0.3);box-shadow:inset 0px 0px 11px -5px rgb(0 0 0 / 30%);object-fit:cover;background-size:cover;background-position:center}.instructor svg{width:var(--cl-spacing-xl);height:var(--cl-spacing-xl);color:var(--cl-blueGrey-300)}.column{display:grid;width:100%}.empty-state{display:grid;align-items:center;justify-items:center;justify-content:center;padding:var(--cl-paddingS) var(--cl-paddingS);gap:var(--cl-spacing-xs)}.empty-state img{width:100%;height:280px}.class-description{display:flex;flex-direction:column;align-items:flex-start}.classly-branding{display:grid;gap:var(--cl-spacing-2xs);grid-template-columns:max-content max-content;align-items:center;justify-content:center;margin-top:var(--cl-spacing-lg);padding-bottom:var(--cl-spacing-lg);margin-right:var(--cl-spacing-base);text-decoration:none}.classly-branding span{font-weight:500;color:var(--cl-blueGrey-900);font-size:var(--cl-text-xs)}.classly-branding img{width:68px}@media (min-width: 768px){.classes-list{row-gap:var(--cl-spacing-2xl)}.class-photos{grid-row:auto}.class-header{gap:var(--cl-spacing-base);grid-template-columns:1fr max-content}.classes-list-item{padding:var(--cl-spacing-lg) var(--cl-spacing-lg) var(--cl-spacing-base);border-radius:var(--cl-borderRadius-xxlarge)}.class-list-item-image{width:170px;height:130px}.class-meet-item{cursor:pointer}}"; | ||
| primaryClassPhoto(photos) { | ||
| var _a, _b; | ||
| return (_b = (_a = photos[0]) === null || _a === void 0 ? void 0 : _a.uri) !== null && _b !== void 0 ? _b : this.defaultClassPhoto; | ||
| if (photos.length) { | ||
| const sortedPhotos = photos.sort((lhs, rhs) => lhs.order - rhs.order); | ||
| return buildImgixUrl(sortedPhotos[0].storageKey, this.env); | ||
| } | ||
| else { | ||
| return "https://classly-staging.s3.amazonaws.com/course_photos/2a76d52e-ff11-4b48-9cee-f2d2b56f1801.png"; | ||
| } | ||
| } | ||
@@ -76,3 +82,11 @@ classOccurrenceRuleFormattedLabels(rules) { | ||
| // Order days | ||
| const dayOrder = { "monday": 1, "tuesday": 2, "wednesday": 3, "thursday": 4, "friday": 5, "saturday": 6, "sunday": 7 }; | ||
| const dayOrder = { | ||
| monday: 1, | ||
| tuesday: 2, | ||
| wednesday: 3, | ||
| thursday: 4, | ||
| friday: 5, | ||
| saturday: 6, | ||
| sunday: 7, | ||
| }; | ||
| const orderedDays = Array.from(daySet).sort((firstDay, secondDay) => { | ||
@@ -89,6 +103,8 @@ return dayOrder[firstDay] - dayOrder[secondDay]; | ||
| aClass.dropInCost !== "" && | ||
| !!aClass.dropInCost && (h("div", { class: "" }, h("span", { class: "cost" }, aClass.dropInCost), h("span", { class: "person" }, " / person"))), aClass.isFree && (h("div", null, h("span", { class: "cost" }, "Free")))), h("div", { class: `class-recurrence-rules ${this.layout}` }, this.classOccurrenceRuleFormattedLabels(aClass.classOccurrenceRules) | ||
| .map((labelString) => { | ||
| !!aClass.dropInCost && (h("div", { class: "" }, h("span", { class: "cost" }, aClass.dropInCost), h("span", { class: "person" }, " / person"))), aClass.isFree && (h("div", null, h("span", { class: "cost" }, "Free")))), h("div", { class: `class-recurrence-rules ${this.layout}` }, this.classOccurrenceRuleFormattedLabels(aClass.classOccurrenceRules).map((labelString) => { | ||
| return (h("tag-label", { bordered: true, color: TagColor.White, label: labelString })); | ||
| }))), h("div", { class: "class-photos" }, h("img", { class: "class-list-item-image", src: this.primaryClassPhoto(aClass.photos) }))), h("p", { id: `class-description-${aClass.id}` }, aClass.description), h("div", { class: "class-ctas" }, h("main-button", { label: "View class", type: ButtonType.Link, variant: ButtonVariant.Secondary, size: ButtonSize.SM, href: this.classURLForEnv(aClass), openInNewTab: true, iconPosition: IconPosition.Left }, h("svg", { slot: "icon", width: "11", height: "11", style: { "margin-right": "6px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" })))), h("div", { class: "divider" }), h("div", { class: "session-list-wrapper" }, h("upcoming-class-occurrences", { orgHandle: this.organization.handle, timeZone: this.organization.timeZone, classId: aClass.id, classSlug: aClass.slug, env: this.env })), aClass.windowInfo && aClass.windowInfo.nextStartsAt && h("div", { class: "window-info" }, h("p", null, "The next ", h("em", null, aClass.windowInfo.sizeInWeeks, " weeks"), " of classes will open for registration on ", h("em", null, dayjs_min(aClass.windowInfo.nextStartsAt).tz(this.organization.timeZone).subtract(aClass.windowInfo.offsetInDays, "day").format("ddd, MMM D [at] h:mmA")))))))), h("a", { href: "https://classly.com", target: "_blank", class: "classly-branding" }, h("span", null, "Powered by"), h("img", { src: getAssetPath(`./assets/classly-logo-horizontal-light.svg`) })))); | ||
| }))), h("div", { class: "class-photos" }, h("img", { class: "class-list-item-image", src: this.primaryClassPhoto(aClass.photos) }))), h("p", { id: `class-description-${aClass.id}` }, aClass.description), h("div", { class: "class-ctas" }, h("main-button", { label: "View class", type: ButtonType.Link, variant: ButtonVariant.Secondary, size: ButtonSize.SM, href: this.classURLForEnv(aClass), openInNewTab: true, iconPosition: IconPosition.Left }, h("svg", { slot: "icon", width: "11", height: "11", style: { "margin-right": "6px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" })))), h("div", { class: "divider" }), h("div", { class: "session-list-wrapper" }, h("upcoming-class-occurrences", { orgHandle: this.organization.handle, timeZone: this.organization.timeZone, classId: aClass.id, classSlug: aClass.slug, env: this.env })), aClass.windowInfo && aClass.windowInfo.nextStartsAt && (h("div", { class: "window-info" }, h("p", null, "The next ", h("em", null, aClass.windowInfo.sizeInWeeks, " weeks"), " of classes will open for registration on", " ", h("em", null, dayjs_min(aClass.windowInfo.nextStartsAt) | ||
| .tz(this.organization.timeZone) | ||
| .subtract(aClass.windowInfo.offsetInDays, "day") | ||
| .format("ddd, MMM D [at] h:mmA"))))))))), h("a", { href: "https://classly.com", target: "_blank", class: "classly-branding" }, h("span", null, "Powered by"), h("img", { src: getAssetPath(`./assets/classly-logo-horizontal-light.svg`) })))); | ||
| } | ||
@@ -95,0 +111,0 @@ static get assetsDirs() { return ["assets"]; } |
@@ -10,18 +10,18 @@ import { r as registerInstance, h, e as Host, g as getAssetPath } from './index-d078694e.js'; | ||
| organization(id: $orgId) { | ||
| id | ||
| handle | ||
| timeZone | ||
| id | ||
| handle | ||
| timeZone | ||
| } | ||
| offerings(orgId: $orgId) { | ||
| id | ||
| name | ||
| description | ||
| photo { | ||
| fileId | ||
| url | ||
| order | ||
| } | ||
| isCostEnabled | ||
| fixedDuration | ||
| cost | ||
| id | ||
| name | ||
| description | ||
| photo { | ||
| fileId | ||
| url | ||
| order | ||
| } | ||
| isCostEnabled | ||
| fixedDuration | ||
| cost | ||
| } | ||
@@ -31,3 +31,3 @@ } | ||
| const openStudioOfferingsCss = "h1{font-size:var(--cl-text-4xl);font-weight:700;letter-spacing:-0.01rem;line-height:120%}h2{font-size:var(--cl-text-3xl);font-weight:600;letter-spacing:-0.01rem;line-height:120%}h3{font-size:var(--cl-text-3xl);font-weight:600;line-height:120%}h4{font-size:var(--cl-text-2xl);font-weight:600;line-height:120%}h1,h2,h3,h4,h5,h6{font-family:var(--cl-font-family);color:var(--cl-blue-1000);font-variant:normal;margin:0}h5{font-size:var(--cl-text-base);font-weight:500;line-height:150%}h6{font-size:var(--cl-text-sm);line-height:150%;font-weight:500}p{font-family:var(--font-family);font-size:var(--cl-text-base);font-weight:400;line-height:var(--cl-lh-base);color:var(--cl-blueGrey-900);overflow:hidden;margin:0;display:block;display:-webkit-box;height:var(--cl-text-base) * 5 * 54;font-size:var(--cl-text-base);-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}span{font-family:var(--cl-font-family);font-size:var(--cl-text-sm);color:var(--cl-blueGrey-700);font-weight:400;line-height:180%}:host{display:block}h4{word-break:break-all}.header{display:flex;justify-content:center}.loader-wrapper{display:flex;align-items:center;justify-content:center;height:50ch}.offering-list{gap:var(--cl-spacing-base);display:grid;align-items:flex-start;justify-content:center;grid-template-columns:1fr}.offering-item{text-decoration:none;border:1px solid var(--cl-lightBorder);border-radius:var(--cl-borderRadius-large);display:grid;grid-template-columns:1fr;background-color:white;overflow:hidden;gap:var(--cl-spacing-base);cursor:pointer;padding:var(--cl-spacing-base);box-shadow:var(--cl-shadowMedium);-webkit-box-shadow:var(--cl-shadowMedium);-moz-box-shadow:var(--cl-shadowMedium)}.offering-item-top{display:grid;grid-template-columns:max-content 1fr;flex-direction:column;gap:var(--cl-spacing-base);align-items:center}.offering-item-bottom p{color:#6B7280;font-size:14px;font-family:var(--cl-font-family);line-height:18px}.offering-photo{border-radius:var(--cl-borderRadius-medium);object-fit:cover;background-size:cover;background-repeat:no-repeat;width:56px;height:56px}.empty-state{display:grid;align-items:center;justify-items:center;justify-content:center;padding:var(--cl-paddingS) var(--cl-paddingS);gap:var(--cl-paddingXS)}.empty-state img{width:100%;height:280px}.offering-info{display:grid;grid-template-columns:1fr;gap:var(--cl-spacing-3xs)}.offering-info .header{display:grid;grid-template-columns:1fr max-content;align-items:center}.offering-info .name{font-size:16px;font-weight:500;line-height:18px;color:#111827}.book-cta{color:#27AA83;font-weight:600;font-size:14px;text-decoration:none;font-family:var(--cl-font-family)}.offering-item-description p{font-size:14px;color:#6B7280;font-family:var(--cl-font-family)}.offering-info .book-cta{display:none}.offering-info .details{color:var(--cl-blueGrey-700);color:#6B7280;line-height:130%}@media (min-width: 768px){.offering-list{grid-template-columns:repeat(auto-fit, 500px);row-gap:var(--cl-paddingM);column-gap:var(--cl-paddingM);gap:var(--cl-spacing-xl)}.book-cta{font-size:16px}.offering-photo{width:64px;height:64px}.offering-info .book-cta{display:block}.offering-item-footer{display:none}.offering-item{padding:var(--cl-spacing-lg);gap:var(--cl-spacing-lg)}.offering-item-top{gap:var(--cl-spacing-lg)}.offering-item:hover{box-shadow:var(--cl-shadowHigh);-webkit-box-shadow:var(--cl-shadowHigh);-moz-box-shadow:var(--cl-shadowHigh);border-color:var(--cl-blueGrey-200)}}"; | ||
| const openStudioOfferingsCss = "h1{font-size:var(--cl-text-4xl);font-weight:700;letter-spacing:-0.01rem;line-height:120%}h2{font-size:var(--cl-text-3xl);font-weight:600;letter-spacing:-0.01rem;line-height:120%}h3{font-size:var(--cl-text-3xl);font-weight:600;line-height:120%}h4{font-size:var(--cl-text-2xl);font-weight:600;line-height:120%}h1,h2,h3,h4,h5,h6{font-family:var(--cl-font-family);color:var(--cl-blue-1000);font-variant:normal;margin:0}h5{font-size:var(--cl-text-base);font-weight:500;line-height:150%}h6{font-size:var(--cl-text-sm);line-height:150%;font-weight:500}p{font-family:var(--font-family);font-size:var(--cl-text-base);font-weight:400;line-height:var(--cl-lh-base);color:var(--cl-blueGrey-900);overflow:hidden;margin:0;display:block;display:-webkit-box;height:var(--cl-text-base) * 5 * 54;font-size:var(--cl-text-base);-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}span{font-family:var(--cl-font-family);font-size:var(--cl-text-sm);color:var(--cl-blueGrey-700);font-weight:400;line-height:180%}:host{display:block}h4{word-break:break-all}.header{display:flex;justify-content:center}.loader-wrapper{display:flex;align-items:center;justify-content:center;height:50ch}.offering-list{gap:var(--cl-spacing-base);display:grid;align-items:flex-start;justify-content:center;grid-template-columns:1fr}.offering-item{text-decoration:none;border:1px solid var(--cl-lightBorder);border-radius:var(--cl-borderRadius-large);display:grid;grid-template-columns:1fr;background-color:white;overflow:hidden;gap:var(--cl-spacing-base);cursor:pointer;padding:var(--cl-spacing-base);box-shadow:var(--cl-shadowMedium);-webkit-box-shadow:var(--cl-shadowMedium);-moz-box-shadow:var(--cl-shadowMedium)}.offering-item-top{display:grid;grid-template-columns:max-content 1fr;flex-direction:column;gap:var(--cl-spacing-base);align-items:center}.offering-item-bottom p{color:#6b7280;font-size:14px;font-family:var(--cl-font-family);line-height:18px}.offering-photo{border-radius:var(--cl-borderRadius-medium);object-fit:cover;background-size:cover;background-repeat:no-repeat;width:56px;height:56px}.empty-state{display:grid;align-items:center;justify-items:center;justify-content:center;padding:var(--cl-paddingS) var(--cl-paddingS);gap:var(--cl-paddingXS)}.empty-state img{width:100%;height:280px}.offering-info{display:grid;grid-template-columns:1fr;gap:var(--cl-spacing-3xs)}.offering-info .header{display:grid;grid-template-columns:1fr max-content;align-items:center}.offering-info .name{font-size:16px;font-weight:500;line-height:18px;color:#111827}.book-cta{color:#27aa83;font-weight:600;font-size:14px;text-decoration:none;font-family:var(--cl-font-family)}.offering-item-description p{font-size:14px;color:#6b7280;font-family:var(--cl-font-family)}.offering-info .book-cta{display:none}.offering-info .details{color:var(--cl-blueGrey-700);color:#6b7280;line-height:130%}@media (min-width: 768px){.offering-list{grid-template-columns:repeat(auto-fit, 500px);row-gap:var(--cl-paddingM);column-gap:var(--cl-paddingM);gap:var(--cl-spacing-xl)}.book-cta{font-size:16px}.offering-photo{width:64px;height:64px}.offering-info .book-cta{display:block}.offering-item-footer{display:none}.offering-item{padding:var(--cl-spacing-lg);gap:var(--cl-spacing-lg)}.offering-item-top{gap:var(--cl-spacing-lg)}.offering-item:hover{box-shadow:var(--cl-shadowHigh);-webkit-box-shadow:var(--cl-shadowHigh);-moz-box-shadow:var(--cl-shadowHigh);border-color:var(--cl-blueGrey-200)}}"; | ||
@@ -61,3 +61,2 @@ const OpenStudioOfferings = class { | ||
| .then((result) => { | ||
| console.log(result); | ||
| this.organization = result.data.organization; | ||
@@ -68,3 +67,2 @@ this.offerings = result.data.offerings; | ||
| .catch((error) => { | ||
| console.log("Error", error); | ||
| this.organization = null; | ||
@@ -80,3 +78,3 @@ this.loading = false; | ||
| var _a, _b; | ||
| return (_b = (_a = offering.photo) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : "https://classly-staging.s3.amazonaws.com/course_photos/2a76d52e-ff11-4b48-9cee-f2d2b56f1801.png"; | ||
| return ((_b = (_a = offering.photo) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : "https://classly-staging.s3.amazonaws.com/course_photos/2a76d52e-ff11-4b48-9cee-f2d2b56f1801.png"); | ||
| } | ||
@@ -102,3 +100,3 @@ formattedDuration(totalMinutes) { | ||
| render() { | ||
| return (h(Host, null, this.loading && (h("div", { class: "loader-wrapper" }, h("loading-indicator", { size: LoaderSize.LG }))), !this.loading && this.offerings.length <= 0 && (h("div", { class: "empty-state" }, h("img", { src: getAssetPath(`./assets/empty-class-schedule.svg`) }), h("h4", null, "There aren\u2019t any offerings yet."), h("span", null, "Check back later for updates"))), h("div", { class: "offering-list" }, this.offerings.map(offering => h("a", { class: "offering-item", href: this.buildOfferingUrl(offering), target: "_blank" }, h("div", { class: "offering-item-top" }, h("img", { class: "offering-photo", src: this.offeringPhoto(offering) }), h("div", { class: "offering-info" }, h("div", { class: "header" }, h("h4", { class: "name" }, offering.name), h("div", { class: "book-cta" }, "Book now")), h("span", { class: "details" }, this.formattedDuration(offering.fixedDuration)))), h("div", { class: "offering-item-description" }, h("p", { class: "text-medium font-regular text-secondary" }, offering.description)), h("div", { class: "offering-item-footer" }, h("div", { class: "book-cta" }, "Book now"))))))); | ||
| return (h(Host, null, this.loading && (h("div", { class: "loader-wrapper" }, h("loading-indicator", { size: LoaderSize.LG }))), !this.loading && this.offerings.length <= 0 && (h("div", { class: "empty-state" }, h("img", { src: getAssetPath(`./assets/empty-class-schedule.svg`) }), h("h4", null, "There aren\u2019t any offerings yet."), h("span", null, "Check back later for updates"))), h("div", { class: "offering-list" }, this.offerings.map((offering) => (h("a", { class: "offering-item", href: this.buildOfferingUrl(offering), target: "_blank" }, h("div", { class: "offering-item-top" }, h("img", { class: "offering-photo", src: this.offeringPhoto(offering) }), h("div", { class: "offering-info" }, h("div", { class: "header" }, h("h4", { class: "name" }, offering.name), h("div", { class: "book-cta" }, "Book now")), h("span", { class: "details" }, this.formattedDuration(offering.fixedDuration)))), h("div", { class: "offering-item-description" }, h("p", { class: "text-medium font-regular text-secondary" }, offering.description)), h("div", { class: "offering-item-footer" }, h("div", { class: "book-cta" }, "Book now")))))))); | ||
| } | ||
@@ -105,0 +103,0 @@ static get assetsDirs() { return ["assets"]; } |
@@ -57,4 +57,4 @@ import { r as registerInstance, h, e as Host } from './index-d078694e.js'; | ||
| border: this.bordered ? configForColor(this.color).border : "", | ||
| 'text-transform': this.capitalized ? "capitalize" : "none", | ||
| color: configForColor(this.color).textColor | ||
| "text-transform": this.capitalized ? "capitalize" : "none", | ||
| color: configForColor(this.color).textColor, | ||
| } }, h("slot", { name: "left-accessory" }), h("span", { class: "tag-label" }, this.label), h("slot", { name: "right-accessory" })))); | ||
@@ -61,0 +61,0 @@ } |
| import { r as registerInstance, h, e as Host } from './index-d078694e.js'; | ||
| import { E as ENV, W, G as GRAPHQL_URI, L } from './urql-core-7b793e7a.js'; | ||
| import { U as UPCOMING_CLASS_OCCURRENCES_QUERY } from './class-queries-93e7a89c.js'; | ||
| import { U as UPCOMING_CLASS_OCCURRENCES_QUERY } from './class-queries-b850e9d8.js'; | ||
| import { L as LayoutType } from './layout-00f7e3fc.js'; | ||
@@ -9,3 +9,3 @@ import { d as dayjs_min } from './dayjs-19a8d4eb.js'; | ||
| const upcomingOccurrencesCss = "h1{font-size:var(--cl-text-4xl);font-weight:700;letter-spacing:-0.01rem;line-height:120%}h2{font-size:var(--cl-text-3xl);font-weight:600;letter-spacing:-0.01rem;line-height:120%}h3{font-size:var(--cl-text-3xl);font-weight:600;line-height:120%}h4{font-size:var(--cl-text-2xl);font-weight:600;line-height:120%}h1,h2,h3,h4,h5,h6{font-family:var(--cl-font-family);color:var(--cl-blue-1000);font-variant:normal;margin:0}h5{font-size:var(--cl-text-base);font-weight:500;line-height:150%}h6{font-size:var(--cl-text-sm);line-height:150%;font-weight:500}p{font-family:var(--font-family);font-size:var(--cl-text-base);font-weight:400;line-height:var(--cl-lh-base);color:var(--cl-blueGrey-900);overflow:hidden;margin:0;display:block;display:-webkit-box;height:var(--cl-text-base) * 5 * 54;font-size:var(--cl-text-base);-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}span{font-family:var(--cl-font-family);font-size:var(--cl-text-sm);color:var(--cl-blueGrey-700);font-weight:400;line-height:180%}.class-sessions-list{scroll-snap-type:x mandatory;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 auto;display:grid;align-items:center;padding:var(--cl-spacing-xs) 0;gap:var(--cl-spacing-lg);grid-template-columns:repeat(\n auto-fit,\n minmax(min(150px, 100%), 1fr)\n )}.empty-wrapper{padding:var(--cl-spacing-xs) 0}.menu-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--cl-spacing-4xs)}.session-item{scroll-snap-align:center;scroll-snap-stop:always;display:grid;padding:var(--cl-spacing-sm);border-radius:var(--cl-borderRadius-xlarge);border:1px solid var(--cl-lightBorder);cursor:pointer;gap:var(--cl-spacing-3xs);text-decoration:none;box-shadow:var(--cl-shadowLow);-webkit-box-shadow:var(--cl-shadowLow);-moz-box-shadow:var(--cl-shadowLow);user-select:none;-webkit-user-select:none;-moz-user-select:none}.session-item:hover{box-shadow:var(--cl-shadowHigh);-webkit-box-shadow:var(--cl-shadowHigh);-moz-box-shadow:var(--cl-shadowHigh);border-color:var(--cl-blueGrey-200)}.session-item .session-header{display:grid;grid-template-columns:max-content 1fr;gap:var(--cl-spacing-xs)}.session-item .calendar-block{display:flex;align-items:center;flex-direction:column;font-size:var(--cl-text-4xl);color:var(--cl-blueGrey-1000);line-height:100%;font-weight:500}.session-date{display:flex;flex-direction:column}.session-date span{color:var(--cl-blueGrey-500);font-size:var(--cl-text-xs);font-weight:400;line-height:150%}.session-time{color:var(--cl-blueGrey-700);font-size:var(--cl-text-xs);font-weight:500;line-height:180%}.loader-wrapper{display:flex;align-items:center;justify-content:center}@media (min-width: 768px){.session-item{scroll-snap-align:start !important}.class-sessions-list{grid-template-columns:repeat(\n auto-fit,\n minmax(min(150px, 100%), max-content)\n )}}"; | ||
| const upcomingOccurrencesCss = "h1{font-size:var(--cl-text-4xl);font-weight:700;letter-spacing:-0.01rem;line-height:120%}h2{font-size:var(--cl-text-3xl);font-weight:600;letter-spacing:-0.01rem;line-height:120%}h3{font-size:var(--cl-text-3xl);font-weight:600;line-height:120%}h4{font-size:var(--cl-text-2xl);font-weight:600;line-height:120%}h1,h2,h3,h4,h5,h6{font-family:var(--cl-font-family);color:var(--cl-blue-1000);font-variant:normal;margin:0}h5{font-size:var(--cl-text-base);font-weight:500;line-height:150%}h6{font-size:var(--cl-text-sm);line-height:150%;font-weight:500}p{font-family:var(--font-family);font-size:var(--cl-text-base);font-weight:400;line-height:var(--cl-lh-base);color:var(--cl-blueGrey-900);overflow:hidden;margin:0;display:block;display:-webkit-box;height:var(--cl-text-base) * 5 * 54;font-size:var(--cl-text-base);-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}span{font-family:var(--cl-font-family);font-size:var(--cl-text-sm);color:var(--cl-blueGrey-700);font-weight:400;line-height:180%}.class-sessions-list{scroll-snap-type:x mandatory;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 auto;display:grid;align-items:center;padding:var(--cl-spacing-xs) 0;gap:var(--cl-spacing-lg);grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr))}.empty-wrapper{padding:var(--cl-spacing-xs) 0}.menu-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--cl-spacing-4xs)}.session-item{scroll-snap-align:center;scroll-snap-stop:always;display:grid;padding:var(--cl-spacing-sm);border-radius:var(--cl-borderRadius-xlarge);border:1px solid var(--cl-lightBorder);cursor:pointer;gap:var(--cl-spacing-3xs);text-decoration:none;box-shadow:var(--cl-shadowLow);-webkit-box-shadow:var(--cl-shadowLow);-moz-box-shadow:var(--cl-shadowLow);user-select:none;-webkit-user-select:none;-moz-user-select:none}.session-item:hover{box-shadow:var(--cl-shadowHigh);-webkit-box-shadow:var(--cl-shadowHigh);-moz-box-shadow:var(--cl-shadowHigh);border-color:var(--cl-blueGrey-200)}.session-item .session-header{display:grid;grid-template-columns:max-content 1fr;gap:var(--cl-spacing-xs)}.session-item .calendar-block{display:flex;align-items:center;flex-direction:column;font-size:var(--cl-text-4xl);color:var(--cl-blueGrey-1000);line-height:100%;font-weight:500}.session-date{display:flex;flex-direction:column}.session-date span{color:var(--cl-blueGrey-500);font-size:var(--cl-text-xs);font-weight:400;line-height:150%}.session-time{color:var(--cl-blueGrey-700);font-size:var(--cl-text-xs);font-weight:500;line-height:180%}.loader-wrapper{display:flex;align-items:center;justify-content:center}@media (min-width: 768px){.session-item{scroll-snap-align:start !important}.class-sessions-list{grid-template-columns:repeat(\n auto-fit,\n minmax(min(150px, 100%), max-content)\n )}}"; | ||
@@ -47,6 +47,9 @@ const ClassList = class { | ||
| ctaLabelForOccurrence(occurrence) { | ||
| if (occurrence.isUnlimitedRoster || (occurrence.rosterCapacityFilled + occurrence.rosterCapacityReserved) < occurrence.maxRosterCapacity) { | ||
| if (occurrence.isUnlimitedRoster || | ||
| occurrence.rosterCapacityFilled + occurrence.rosterCapacityReserved < | ||
| occurrence.maxRosterCapacity) { | ||
| return "Register"; | ||
| } | ||
| else if (occurrence.isUnlimitedWaitlist || occurrence.rosterWaiterCount < occurrence.maxWaitlistCapacity) { | ||
| else if (occurrence.isUnlimitedWaitlist || | ||
| occurrence.rosterWaiterCount < occurrence.maxWaitlistCapacity) { | ||
| return "Join Waitlist"; | ||
@@ -59,4 +62,7 @@ } | ||
| ctaLabelOpacityForOccurrence(occurrence) { | ||
| const roster_enabled = occurrence.isUnlimitedRoster || (occurrence.rosterCapacityFilled + occurrence.rosterCapacityReserved) < occurrence.maxRosterCapacity; | ||
| const waitlist_enabled = occurrence.isUnlimitedWaitlist || occurrence.rosterWaiterCount < occurrence.maxWaitlistCapacity; | ||
| const roster_enabled = occurrence.isUnlimitedRoster || | ||
| occurrence.rosterCapacityFilled + occurrence.rosterCapacityReserved < | ||
| occurrence.maxRosterCapacity; | ||
| const waitlist_enabled = occurrence.isUnlimitedWaitlist || | ||
| occurrence.rosterWaiterCount < occurrence.maxWaitlistCapacity; | ||
| if (roster_enabled || waitlist_enabled) { | ||
@@ -87,3 +93,3 @@ return "1"; | ||
| render() { | ||
| return (h(Host, null, h("div", { class: "menu-row" }, h("h6", { class: "cl-text-lg" }, "Upcoming sessions")), this.loading && (h("div", { class: "loader-wrapper" }, h("loading-indicator", { size: LoaderSize.MD }))), !this.loading && this.occurrences.length <= 0 && (h("div", { class: "empty-wrapper" }, h("empty-view", { emptyTitle: "There aren\u2019t any upcoming class sessions.", emptySubtitle: "Check back later for updates" }))), !this.loading && this.occurrences.length > 0 && h("div", { class: "class-sessions-list" }, this.occurrences | ||
| return (h(Host, null, h("div", { class: "menu-row" }, h("h6", { class: "cl-text-lg" }, "Upcoming sessions")), this.loading && (h("div", { class: "loader-wrapper" }, h("loading-indicator", { size: LoaderSize.MD }))), !this.loading && this.occurrences.length <= 0 && (h("div", { class: "empty-wrapper" }, h("empty-view", { emptyTitle: "There aren\u2019t any upcoming class sessions.", emptySubtitle: "Check back later for updates" }))), !this.loading && this.occurrences.length > 0 && (h("div", { class: "class-sessions-list" }, this.occurrences | ||
| .sort((a, b) => { | ||
@@ -96,4 +102,16 @@ const startA = dayjs_min.utc(a.startsAt); | ||
| .map((occurrence) => { | ||
| return (h("a", { class: "session-item", target: "_blank", href: this.classURLForEnv(occurrence) }, h("div", { class: "session-header" }, h("span", { class: "calendar-block" }, dayjs_min(occurrence.startsAt).tz(this.timeZone).format("DD")), h("div", { class: "session-date" }, h("span", null, dayjs_min(occurrence.startsAt).tz(this.timeZone).format("dddd")), h("span", null, dayjs_min(occurrence.startsAt).tz(this.timeZone).format("MMM YYYY")))), h("span", { class: "session-time" }, dayjs_min(occurrence.startsAt).tz(this.timeZone).format("h:mma"), " - ", dayjs_min(occurrence.endsAt).tz(this.timeZone).format("h:mma")), h("main-button", { label: this.ctaLabelForOccurrence(occurrence), type: ButtonType.Link, variant: ButtonVariant.Secondary, size: ButtonSize.SM, openInNewTab: true, style: { opacity: this.ctaLabelOpacityForOccurrence(occurrence) }, fullWidth: true }))); | ||
| })))); | ||
| return (h("a", { class: "session-item", target: "_blank", href: this.classURLForEnv(occurrence) }, h("div", { class: "session-header" }, h("span", { class: "calendar-block" }, dayjs_min(occurrence.startsAt) | ||
| .tz(this.timeZone) | ||
| .format("DD")), h("div", { class: "session-date" }, h("span", null, dayjs_min(occurrence.startsAt) | ||
| .tz(this.timeZone) | ||
| .format("dddd")), h("span", null, dayjs_min(occurrence.startsAt) | ||
| .tz(this.timeZone) | ||
| .format("MMM YYYY")))), h("span", { class: "session-time" }, dayjs_min(occurrence.startsAt) | ||
| .tz(this.timeZone) | ||
| .format("h:mma"), " ", "-", " ", dayjs_min(occurrence.endsAt) | ||
| .tz(this.timeZone) | ||
| .format("h:mma")), h("main-button", { label: this.ctaLabelForOccurrence(occurrence), type: ButtonType.Link, variant: ButtonVariant.Secondary, size: ButtonSize.SM, openInNewTab: true, style: { | ||
| opacity: this.ctaLabelOpacityForOccurrence(occurrence), | ||
| }, fullWidth: true }))); | ||
| }))))); | ||
| } | ||
@@ -100,0 +118,0 @@ static get assetsDirs() { return ["assets"]; } |
| import { r as registerInstance, h, e as Host, g as getAssetPath } from './index-d078694e.js'; | ||
| import { g as gql, E as ENV, W, G as GRAPHQL_URI, L } from './urql-core-7b793e7a.js'; | ||
| import { d as dayjs_min } from './dayjs-19a8d4eb.js'; | ||
| import { c as capitalize, a as courseStatusDescription, b as courseStatus, t as tagForStatus } from './course-utils-e1f7e2f0.js'; | ||
| import { c as capitalize, a as courseStatusDescription, b as courseStatus, t as tagForStatus } from './course-utils-41bfdfa0.js'; | ||
| import { L as LayoutType } from './layout-00f7e3fc.js'; | ||
| import { L as LoaderSize } from './loading-utils-9cda7f40.js'; | ||
| import { b as buildImgixUrl } from './utils-7b7fa3fe.js'; | ||
| import './tag-utils-2347efe9.js'; | ||
@@ -48,2 +49,3 @@ | ||
| url | ||
| storageKey | ||
| } | ||
@@ -73,3 +75,2 @@ slug | ||
| }); | ||
| this.defaultCoursePhoto = "https://classly-development.s3.us-west-2.amazonaws.com/placeholder-classes.png"; | ||
| } | ||
@@ -104,3 +105,11 @@ validateOrganization(newValue) { | ||
| courseReccurrenceRuleSortComparator(first, second) { | ||
| const dayOrder = { "monday": 1, "tuesday": 2, "wednesday": 3, "thursday": 4, "friday": 5, "saturday": 6, "sunday": 7 }; | ||
| const dayOrder = { | ||
| monday: 1, | ||
| tuesday: 2, | ||
| wednesday: 3, | ||
| thursday: 4, | ||
| friday: 5, | ||
| saturday: 6, | ||
| sunday: 7, | ||
| }; | ||
| if (first.days[0] === second.days[0]) { | ||
@@ -120,6 +129,12 @@ return dayjs_min(first.startTime).isBefore(dayjs_min(second.startTime)) ? -1 : 1; | ||
| const firstRule = sortedRules[0]; | ||
| const allEqualStartTimes = sortedRules.map(rule => rule.startTime).every(date => date === firstRule.startTime); | ||
| const allEqualEndTimes = sortedRules.map(rule => rule.endTime).every(date => date === firstRule.endTime); | ||
| const allEqualStartTimes = sortedRules | ||
| .map((rule) => rule.startTime) | ||
| .every((date) => date === firstRule.startTime); | ||
| const allEqualEndTimes = sortedRules | ||
| .map((rule) => rule.endTime) | ||
| .every((date) => date === firstRule.endTime); | ||
| if (allEqualStartTimes && allEqualEndTimes) { | ||
| const dayName = sortedRules.map(rule => rule.days.map(d => capitalize(d.slice(0, 3))).join(", ")).join(", "); | ||
| const dayName = sortedRules | ||
| .map((rule) => rule.days.map((d) => capitalize(d.slice(0, 3))).join(", ")) | ||
| .join(", "); | ||
| const startTime = dayjs_min(sortedRules[0].startTime, "hh:mm"); | ||
@@ -132,4 +147,7 @@ const endTime = dayjs_min(sortedRules[0].endTime, "hh:mm"); | ||
| } | ||
| return sortedRules.map(rule => { | ||
| const dayName = rule.days.map(capitalize).map(d => d.concat("s")).join(", "); | ||
| return sortedRules.map((rule) => { | ||
| const dayName = rule.days | ||
| .map(capitalize) | ||
| .map((d) => d.concat("s")) | ||
| .join(", "); | ||
| const startTime = dayjs_min(rule.startTime, "hh:mm"); | ||
@@ -143,3 +161,3 @@ const endTime = dayjs_min(rule.endTime, "hh:mm"); | ||
| else { | ||
| return course.courseRecurrenceRules.map(rule => { | ||
| return course.courseRecurrenceRules.map((rule) => { | ||
| const dayName = rule.days.map(capitalize).join(", "); | ||
@@ -159,11 +177,19 @@ const startTime = dayjs_min(rule.startTime, "hh:mm"); | ||
| else { | ||
| return `${dayjs_min(course.startDate).tz(this.timeZone).format("MMM DD, YYYY")} - | ||
| return `${dayjs_min(course.startDate) | ||
| .tz(this.timeZone) | ||
| .format("MMM DD, YYYY")} - | ||
| ${dayjs_min(course.endDate).tz(this.timeZone).format("MMM DD, YYYY")}`; | ||
| } | ||
| } | ||
| getFirstPhotoURI(course) { | ||
| if (course.photos.length) { | ||
| const sortedPhotos = course.photos.sort((lhs, rhs) => lhs.order - rhs.order); | ||
| return buildImgixUrl(sortedPhotos[0].storageKey, this.env); | ||
| } | ||
| else { | ||
| return "https://classly-development.s3.us-west-2.amazonaws.com/placeholder-classes.png"; | ||
| } | ||
| } | ||
| render() { | ||
| return (h(Host, null, this.showHeader && (h("div", { class: `upcoming-courses-header ${this.layout}` }, h("h3", null, "Upcoming Courses"))), this.loading && (h("div", { class: "loader-wrapper" }, h("loading-indicator", { size: LoaderSize.LG }))), !this.loading && this.courses.length <= 0 && (h("div", { class: "empty-state" }, h("img", { src: getAssetPath(`./assets/empty-class-schedule.svg`) }), h("h4", null, "There aren\u2019t any upcoming courses."), h("span", null, "Check back later for updates"))), h("div", { class: `courses-list ${this.layout}` }, this.courses.map((course) => (h("a", { href: course.url, class: "courses-list-item", target: "_blank", key: course.id }, h("img", { class: "upcoming-courses-item-image", src: course.photos.length | ||
| ? course.photos[0].url | ||
| : this.defaultCoursePhoto }), h("div", { class: "upcoming-courses-item-info" }, h("tag-label", { label: courseStatusDescription(courseStatus(course), course, this.timeZone), color: tagForStatus(courseStatus(course)), bordered: false }, h("svg", { slot: "left-accessory", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: "0.43em", viewBox: "0 0 512 512" }, h("path", { class: "fa-primary", d: "" }), h("path", { opacity: 0.35, class: "fa-secondary", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" }))), h("h4", null, course.name), h("div", { class: "info-section" }, h("span", { class: "course-start" }, this.formatDuration(course))), h("div", { class: "course-recurrence-rules" }, this.formatRulesToDateLabels(course) | ||
| .map(dateLabel => h("span", { class: "date-label" }, dateLabel))), h("div", { class: "info-section" }, course.cost !== "$0.00" && | ||
| return (h(Host, null, this.showHeader && (h("div", { class: `upcoming-courses-header ${this.layout}` }, h("h3", null, "Upcoming Courses"))), this.loading && (h("div", { class: "loader-wrapper" }, h("loading-indicator", { size: LoaderSize.LG }))), !this.loading && this.courses.length <= 0 && (h("div", { class: "empty-state" }, h("img", { src: getAssetPath(`./assets/empty-class-schedule.svg`) }), h("h4", null, "There aren\u2019t any upcoming courses."), h("span", null, "Check back later for updates"))), h("div", { class: `courses-list ${this.layout}` }, this.courses.map((course) => (h("a", { href: course.url, class: "courses-list-item", target: "_blank", key: course.id }, h("img", { class: "upcoming-courses-item-image", src: this.getFirstPhotoURI(course) }), h("div", { class: "upcoming-courses-item-info" }, h("tag-label", { label: courseStatusDescription(courseStatus(course), course, this.timeZone), color: tagForStatus(courseStatus(course)), bordered: false }, h("svg", { slot: "left-accessory", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: "0.43em", viewBox: "0 0 512 512" }, h("path", { class: "fa-primary", d: "" }), h("path", { opacity: 0.35, class: "fa-secondary", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" }))), h("h4", null, course.name), h("div", { class: "info-section" }, h("span", { class: "course-start" }, this.formatDuration(course))), h("div", { class: "course-recurrence-rules" }, this.formatRulesToDateLabels(course).map((dateLabel) => (h("span", { class: "date-label" }, dateLabel)))), h("div", { class: "info-section" }, course.cost !== "$0.00" && | ||
| course.cost !== "" && | ||
@@ -170,0 +196,0 @@ !!course.cost && (h("div", { class: "pricing" }, h("span", { class: "cost" }, course.cost), h("span", { class: "person" }, " per person"))))))))), h("a", { href: "https://classly.com", target: "_blank", class: "classly-branding" }, h("span", null, "Powered by"), h("img", { src: getAssetPath(`./assets/classly-logo-horizontal-light.svg`) })))); |
@@ -6,38 +6,40 @@ import { r as registerInstance, h, e as Host, g as getAssetPath } from './index-d078694e.js'; | ||
| import { L as LoaderSize } from './loading-utils-9cda7f40.js'; | ||
| import { b as buildImgixUrl } from './utils-7b7fa3fe.js'; | ||
| const EVENT_LIST_QUERY = gql ` | ||
| query Events($orgId: ID!, $from: DateTime!) { | ||
| organization(id: $orgId) { | ||
| id | ||
| handle | ||
| timeZone | ||
| } | ||
| events(orgId: $orgId, from: $from) { | ||
| id | ||
| cancellationPolicy | ||
| cost | ||
| description | ||
| endsAt | ||
| faq | ||
| location { | ||
| address | ||
| lat | ||
| lng | ||
| notes | ||
| } | ||
| photos { | ||
| fileId | ||
| caption | ||
| order | ||
| uri | ||
| } | ||
| slug | ||
| startsAt | ||
| title | ||
| whatToBring | ||
| } | ||
| query Events($orgId: ID!, $from: DateTime!) { | ||
| organization(id: $orgId) { | ||
| id | ||
| handle | ||
| timeZone | ||
| } | ||
| events(orgId: $orgId, from: $from) { | ||
| id | ||
| cancellationPolicy | ||
| cost | ||
| description | ||
| endsAt | ||
| faq | ||
| location { | ||
| address | ||
| lat | ||
| lng | ||
| notes | ||
| } | ||
| photos { | ||
| fileId | ||
| caption | ||
| order | ||
| uri | ||
| storageKey | ||
| } | ||
| slug | ||
| startsAt | ||
| title | ||
| whatToBring | ||
| } | ||
| } | ||
| `; | ||
| const upcomingEventsCss = "h1{font-size:var(--cl-text-4xl);font-weight:700;letter-spacing:-0.01rem;line-height:120%}h2{font-size:var(--cl-text-3xl);font-weight:600;letter-spacing:-0.01rem;line-height:120%}h3{font-size:var(--cl-text-3xl);font-weight:600;line-height:120%}h4{font-size:var(--cl-text-2xl);font-weight:600;line-height:120%}h1,h2,h3,h4,h5,h6{font-family:var(--cl-font-family);color:var(--cl-blue-1000);font-variant:normal;margin:0}h5{font-size:var(--cl-text-base);font-weight:500;line-height:150%}h6{font-size:var(--cl-text-sm);line-height:150%;font-weight:500}p{font-family:var(--font-family);font-size:var(--cl-text-base);font-weight:400;line-height:var(--cl-lh-base);color:var(--cl-blueGrey-900);overflow:hidden;margin:0;display:block;display:-webkit-box;height:var(--cl-text-base) * 5 * 54;font-size:var(--cl-text-base);-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}span{font-family:var(--cl-font-family);font-size:var(--cl-text-sm);color:var(--cl-blueGrey-700);font-weight:400;line-height:180%}:host{display:block}.upcoming-events-header{display:flex;justify-content:center}.loader-wrapper{display:flex;align-items:center;justify-content:center;height:50ch}.event-list{gap:var(--cl-spacing-xl);display:grid;grid-template-columns:repeat(auto-fit, 300px);margin-top:var(--cl-spacing-lg);align-items:flex-start;justify-content:center;grid-template-columns:repeat(auto-fit, 350px)}.event-item{text-decoration:none;border:1px solid var(--cl-lightBorder);border-radius:var(--cl-borderRadius-xlarge);display:grid;background-color:white;overflow:hidden;box-shadow:var(--cl-shadowMedium);-webkit-box-shadow:var(--cl-shadowMedium);-moz-box-shadow:var(--cl-shadowMedium)}.event-info{display:grid;gap:var(--cl-spacing-3xs);padding:var(--cl-spacing-lg);align-items:flex-start;justify-items:start}.event-info em{font-style:normal;font-weight:600}.event-photo{width:100%;height:160px;border-radius:12px 12px 0 0;object-fit:cover;background-size:cover;background-repeat:no-repeat}.event-date{color:var(--cl-red-700)}.classly-branding{display:grid;gap:var(--cl-spacing-2xs);grid-template-columns:max-content max-content;align-items:center;justify-content:center;margin-top:var(--cl-spacing-lg);padding:var(--cl-spacing-lg) 0;margin-right:var(--cl-spacing-base);text-decoration:none}.classly-branding span{font-weight:500;color:var(--cl-blueGrey-900);font-size:var(--cl-text-xs)}.classly-branding img{width:68px}@media (min-width: 768px){.event-list{grid-template-columns:repeat(auto-fill, 300px);row-gap:var(--cl-paddingM);column-gap:var(--cl-paddingM)}.event-item{cursor:pointer}.event-item:hover{box-shadow:var(--cl-shadowHigh);-webkit-box-shadow:var(--cl-shadowHigh);-moz-box-shadow:var(--cl-shadowHigh);border-color:var(--cl-blueGrey-200)}}"; | ||
| const upcomingEventsCss = "h1{font-size:var(--cl-text-4xl);font-weight:700;letter-spacing:-0.01rem;line-height:120%}h2{font-size:var(--cl-text-3xl);font-weight:600;letter-spacing:-0.01rem;line-height:120%}h3{font-size:var(--cl-text-3xl);font-weight:600;line-height:120%}h4{font-size:var(--cl-text-2xl);font-weight:600;line-height:120%}h1,h2,h3,h4,h5,h6{font-family:var(--cl-font-family);color:var(--cl-blue-1000);font-variant:normal;margin:0}h5{font-size:var(--cl-text-base);font-weight:500;line-height:150%}h6{font-size:var(--cl-text-sm);line-height:150%;font-weight:500}p{font-family:var(--font-family);font-size:var(--cl-text-base);font-weight:400;line-height:var(--cl-lh-base);color:var(--cl-blueGrey-900);overflow:hidden;margin:0;display:block;display:-webkit-box;height:var(--cl-text-base) * 5 * 54;font-size:var(--cl-text-base);-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}span{font-family:var(--cl-font-family);font-size:var(--cl-text-sm);color:var(--cl-blueGrey-700);font-weight:400;line-height:180%}:host{display:block}.upcoming-events-header{display:flex;justify-content:center}.loader-wrapper{display:flex;align-items:center;justify-content:center;height:50ch}.event-list{gap:var(--cl-spacing-xl);display:grid;grid-template-columns:repeat(auto-fit, 300px);margin-top:var(--cl-spacing-lg);align-items:flex-start;justify-content:center;grid-template-columns:repeat(auto-fit, 350px)}.event-item{text-decoration:none;border:1px solid var(--cl-lightBorder);border-radius:var(--cl-borderRadius-xlarge);display:grid;background-color:white;overflow:hidden;box-shadow:var(--cl-shadowMedium);-webkit-box-shadow:var(--cl-shadowMedium);-moz-box-shadow:var(--cl-shadowMedium)}.event-info{display:grid;gap:var(--cl-spacing-3xs);padding:var(--cl-spacing-lg);align-items:flex-start;justify-items:start}.event-info em{font-style:normal;font-weight:600}.event-photo{width:100%;height:160px;border-radius:12px 12px 0 0;object-fit:cover;background-size:cover;background-repeat:no-repeat}.event-date{color:var(--cl-red-700)}.classly-branding{display:grid;gap:var(--cl-spacing-2xs);grid-template-columns:max-content max-content;align-items:center;justify-content:center;margin-top:var(--cl-spacing-lg);padding:var(--cl-spacing-lg) 0;margin-right:var(--cl-spacing-base);text-decoration:none}.classly-branding span{font-weight:500;color:var(--cl-blueGrey-900);font-size:var(--cl-text-xs)}.classly-branding img{width:68px}.empty-state{display:grid;align-items:center;justify-items:center;justify-content:center;padding:var(--cl-paddingS) var(--cl-paddingS);gap:var(--cl-paddingXS)}.empty-state img{width:100%;height:280px}@media (min-width: 768px){.event-list{grid-template-columns:repeat(auto-fill, 300px);row-gap:var(--cl-paddingM);column-gap:var(--cl-paddingM)}.event-item{cursor:pointer}.event-item:hover{box-shadow:var(--cl-shadowHigh);-webkit-box-shadow:var(--cl-shadowHigh);-moz-box-shadow:var(--cl-shadowHigh);border-color:var(--cl-blueGrey-200)}}"; | ||
@@ -56,3 +58,2 @@ const UpcomingEvents = class { | ||
| }); | ||
| this.defaultEventPhoto = "https://classly-staging.s3.amazonaws.com/course_photos/2a76d52e-ff11-4b48-9cee-f2d2b56f1801.png"; | ||
| } | ||
@@ -69,3 +70,6 @@ validateOrganization(newValue) { | ||
| this.client | ||
| .query(EVENT_LIST_QUERY, { orgId: this.organizationId, from: dayjs_min().utc().format() }) | ||
| .query(EVENT_LIST_QUERY, { | ||
| orgId: this.organizationId, | ||
| from: dayjs_min().utc().format(), | ||
| }) | ||
| .toPromise() | ||
@@ -78,3 +82,2 @@ .then((result) => { | ||
| .catch((error) => { | ||
| console.log("Error", error); | ||
| this.loading = false; | ||
@@ -86,4 +89,9 @@ this.organization = null; | ||
| getFirstPhotoURI(event) { | ||
| const sortedPhotos = event.photos.sort((lhs, rhs) => lhs.order - rhs.order); | ||
| return sortedPhotos[0].uri; | ||
| if (event.photos.length) { | ||
| const sortedPhotos = event.photos.sort((lhs, rhs) => lhs.order - rhs.order); | ||
| return buildImgixUrl(sortedPhotos[0].storageKey, this.env); | ||
| } | ||
| else { | ||
| return "https://classly-staging.s3.amazonaws.com/course_photos/2a76d52e-ff11-4b48-9cee-f2d2b56f1801.png"; | ||
| } | ||
| } | ||
@@ -94,5 +102,8 @@ buildEventUrl(event) { | ||
| render() { | ||
| return (h(Host, null, this.headerTitle && (h("div", { class: "upcoming-events-header" }, h("h3", null, this.headerTitle))), this.loading && (h("div", { class: "loader-wrapper" }, h("loading-indicator", { size: LoaderSize.LG }))), !this.loading && this.events.length <= 0 && (h("div", { class: "empty-state" }, h("img", { src: getAssetPath(`./assets/empty-class-schedule.svg`) }), h("h4", null, "There aren\u2019t any upcoming events."), h("span", null, "Check back later for updates"))), h("div", { class: "event-list" }, this.events.map(event => h("a", { class: "event-item", href: this.buildEventUrl(event), target: "_blank" }, h("img", { class: "event-photo", src: event.photos.length | ||
| ? this.getFirstPhotoURI(event) | ||
| : this.defaultEventPhoto }), h("div", { class: "event-info" }, h("h4", null, event.title), h("h6", { class: "event-date font-semibold text-small" }, dayjs_min(event.startsAt).tz(this.organization.timeZone).format("ddd, MMM DD, h:mm A")), h("h6", { class: "text-medium font-regular text-secondary" }, h("em", { class: "font-medium text-primary" }, event.cost), " / person"), h("span", { class: "text-medium font-regular text-secondary" }, event.location.address))))), h("a", { href: "https://classly.com", target: "_blank", class: "classly-branding" }, h("span", null, "Powered by"), h("img", { src: getAssetPath(`./assets/classly-logo-horizontal-light.svg`) })))); | ||
| return (h(Host, null, this.headerTitle && (h("div", { class: "upcoming-events-header" }, h("h3", null, this.headerTitle))), this.loading && (h("div", { class: "loader-wrapper" }, h("loading-indicator", { size: LoaderSize.LG }))), !this.loading && this.events.length <= 0 && (h("div", { class: "empty-state" }, h("img", { src: getAssetPath(`./assets/empty-class-schedule.svg`) }), h("h4", null, "There aren\u2019t any upcoming events."), h("span", null, "Check back later for updates"))), h("div", { class: "event-list" }, this.events.map((event) => { | ||
| var _a; | ||
| return (h("a", { class: "event-item", href: this.buildEventUrl(event), target: "_blank" }, h("img", { class: "event-photo", src: this.getFirstPhotoURI(event) }), h("div", { class: "event-info" }, h("h4", null, event.title), h("h6", { class: "event-date font-semibold text-small" }, dayjs_min(event.startsAt) | ||
| .tz(this.organization.timeZone) | ||
| .format("ddd, MMM DD, h:mm A")), h("h6", { class: "text-medium font-regular text-secondary" }, h("em", { class: "font-medium text-primary" }, event.cost), " / person"), h("span", { class: "text-medium font-regular text-secondary" }, (_a = event.location) === null || _a === void 0 ? void 0 : _a.address)))); | ||
| })), h("a", { href: "https://classly.com", target: "_blank", class: "classly-branding" }, h("span", null, "Powered by"), h("img", { src: getAssetPath(`./assets/classly-logo-horizontal-light.svg`) })))); | ||
| } | ||
@@ -99,0 +110,0 @@ static get assetsDirs() { return ["assets"]; } |
@@ -44,16 +44,17 @@ export type ClassOccurrenceRule = { | ||
| export type Photo = { | ||
| file_id: string; | ||
| caption?: string; | ||
| uri: string; | ||
| order?: string; | ||
| } | ||
| file_id: string; | ||
| caption?: string; | ||
| uri: string; | ||
| order?: number; | ||
| storageKey: string; | ||
| }; | ||
| export type WindowInfo = { | ||
| currentEndsAt: string; | ||
| currentStartsAt: string; | ||
| isScheduleGenerationEnabled: boolean; | ||
| nextStartsAt: string; | ||
| offsetInDays: number; | ||
| sizeInWeeks: number; | ||
| } | ||
| currentEndsAt: string; | ||
| currentStartsAt: string; | ||
| isScheduleGenerationEnabled: boolean; | ||
| nextStartsAt: string; | ||
| offsetInDays: number; | ||
| sizeInWeeks: number; | ||
| }; | ||
@@ -60,0 +61,0 @@ export type ClassOccurrence = { |
@@ -16,4 +16,5 @@ import { TagColor } from "../tag-label/tag-utils"; | ||
| caption?: string; | ||
| order?: string; | ||
| order?: number; | ||
| url: string; | ||
| storageKey: string; | ||
| }; | ||
@@ -20,0 +21,0 @@ export declare type Course = { |
@@ -17,7 +17,7 @@ import { Course, CourseRecurrenceRule } from "./course-utils"; | ||
| componentWillLoad(): void; | ||
| defaultCoursePhoto: string; | ||
| courseReccurrenceRuleSortComparator(first: CourseRecurrenceRule, second: CourseRecurrenceRule): number; | ||
| formatRulesToDateLabels(course: Course): string[]; | ||
| formatDuration(course: Course): string; | ||
| getFirstPhotoURI(course: Course): string; | ||
| render(): any; | ||
| } |
@@ -16,5 +16,4 @@ import { ENV } from "../../utils/graphql-client"; | ||
| getFirstPhotoURI(event: Event): string; | ||
| defaultEventPhoto: string; | ||
| buildEventUrl(event: Event): string; | ||
| render(): any; | ||
| } |
@@ -23,2 +23,3 @@ export declare type Event = { | ||
| fileId: string; | ||
| storageKey: string; | ||
| }; |
@@ -0,7 +1,11 @@ | ||
| import { ENV } from "./graphql-client"; | ||
| export declare function format(first: string, middle: string, last: string): string; | ||
| export declare function unique(value: any, index: any, self: any): boolean; | ||
| export declare enum Environment { | ||
| Development = "development", | ||
| Staging = "staging", | ||
| Production = "production" | ||
| } | ||
| export declare type ImageOptions = { | ||
| fit?: "crop" | "fill" | "fill&fill=blur"; | ||
| height?: number; | ||
| width?: number; | ||
| quality?: number; | ||
| scale?: number; | ||
| }; | ||
| export declare function buildImgixUrl(storageKey: string, env: ENV, opts?: ImageOptions): string; |
| { | ||
| "name": "@classly/classly-business-webcomponents", | ||
| "author": "Eliel A. Gordon <eliel@classly.com>", | ||
| "version": "0.0.124", | ||
| "version": "0.0.125", | ||
| "description": "Classly website widgets", | ||
@@ -25,3 +25,4 @@ "main": "dist/index.cjs.js", | ||
| "test.watch": "stencil test --spec --e2e --watchAll", | ||
| "generate": "stencil generate" | ||
| "generate": "stencil generate", | ||
| "format": "npx prettier . --write" | ||
| }, | ||
@@ -28,0 +29,0 @@ "dependencies": { |
@@ -8,2 +8,3 @@  | ||
| ## Building locally | ||
| 1. Run `npm run start-dev`. Make sure you follow install instructions below. | ||
@@ -10,0 +11,0 @@ |
Sorry, the diff of this file is not supported yet
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.31%
724456
- Number of package files
- increased by1.19%
85
- Lines of code
- increased by0.79%
13965
- Number of lines in readme file
- increased by1.03%
98
No dependency changes