@fleetbase/fleetops-engine 0.6.71 → 0.6.72

package/addon/components/tracking-page/map.js

@@ -0,0 +1,328 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { next } from '@ember/runloop';
+import { icon } from '@fortawesome/fontawesome-svg-core';
+import { faStore, faCheck } from '@fortawesome/free-solid-svg-icons';
+import { decodePolyline } from '../../utils/tracking-live-source';
+
+/**
+ * Marker colours, as the console's order maps use them.
+ */
+const PICKUP_COLOR = '#22C55E';
+const DROPOFF_COLOR = '#EF4444';
+const DONE_COLOR = '#6B7280';
+
+function escapeHtml(value) {
+    return String(value ?? '').replace(/[&<>"']/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char]);
+}
+
+/**
+ * The live map on the tracking page: where the order is collected, the customer's stops,
+ * numbered as the stop cards are, and the vehicle while it is on its way to them. Each
+ * marker carries a label, so the map reads without a legend.
+ *
+ * The road line is the tracker's: from the vehicle once it reports, from the first
+ * pickup before that, sent only when every stop on it is the customer's. Without one, a
+ * dashed line joins the points already on the map in trip order, which gives away
+ * nothing the markers don't.
+ */
+export default class TrackingPageMapComponent extends Component {
+    @service intl;
+
+    @tracked expanded = false;
+
+    map = null;
+    element = null;
+
+    get data() {
+        return this.args.data ?? {};
+    }
+
+    get vehicle() {
+        const location = this.data.location;
+
+        return location ? [location.latitude, location.longitude] : null;
+    }
+
+    get vehicleLabel() {
+        return this.data.driver?.name || this.intl.t('tracking-page.page.map-driver');
+    }
+
+    get hasSeveralStops() {
+        return (this.data.stops ?? []).length > 1;
+    }
+
+    get stops() {
+        const stops = [];
+        let number = 0;
+        for (const stop of this.data.stops ?? []) {
+            number += 1;
+            if (stop.place?.latitude && stop.place?.longitude) {
+                const selected = this.hasSeveralStops && stop.id === this.args.selectedStopId;
+                const dimmed = this.hasSeveralStops && !!this.args.selectedStopId && !selected;
+                stops.push({
+                    ...stop,
+                    number,
+                    location: [stop.place.latitude, stop.place.longitude],
+                    label: stop.place.name || this.intl.t('tracking-page.page.your-stop', { number }),
+                    icon: this.stopIcon(stop.marker ?? String(number), stop.complete, selected, dimmed),
+                });
+            }
+        }
+
+        return stops;
+    }
+
+    get pickups() {
+        return (this.data.map?.pickups ?? []).map((pickup) => ({
+            ...pickup,
+            location: [pickup.latitude, pickup.longitude],
+            label: pickup.name || this.intl.t('tracking-page.page.map-pickup'),
+            title: pickup.name ? this.intl.t('tracking-page.page.map-pickup-named', { name: pickup.name }) : this.intl.t('tracking-page.page.map-pickup'),
+            icon: this.pickupIcon(pickup),
+        }));
+    }
+
+    get route() {
+        return decodePolyline(this.data.map?.polyline);
+    }
+
+    get hasRoute() {
+        return this.route.length > 1;
+    }
+
+    /**
+     * The vehicle, or the first store still to visit, then the pickups and stops still to
+     * come.
+     */
+    get plannedRoute() {
+        const points = this.vehicle ? [this.vehicle] : [];
+        for (const pickup of this.pickups) {
+            if (!pickup.complete) {
+                points.push(pickup.location);
+            }
+        }
+
+        for (const stop of this.stops) {
+            if (!stop.complete) {
+                points.push(stop.location);
+            }
+        }
+
+        return points;
+    }
+
+    get hasPlannedRoute() {
+        return !this.hasRoute && this.plannedRoute.length > 1;
+    }
+
+    get points() {
+        const points = [...this.pickups.map((pickup) => pickup.location), ...this.stops.map((stop) => stop.location)];
+        if (this.vehicle) {
+            points.push(this.vehicle);
+        }
+
+        return points;
+    }
+
+    get center() {
+        return this.vehicle ?? this.points[0] ?? [0, 0];
+    }
+
+    get vehicleIcon() {
+        return L.divIcon({
+            className: this.args.stale ? 'tp-map-marker tp-map-vehicle tp-map-vehicle-stale' : 'tp-map-marker tp-map-vehicle',
+            html: '<span class="tp-map-vehicle-dot"></span>',
+            iconSize: [28, 28],
+            iconAnchor: [14, 14],
+            tooltipAnchor: [0, -16],
+        });
+    }
+
+    /**
+     * A round marker with a label, as the console's order maps draw them.
+     */
+    markerIcon(content, color, classes = []) {
+        return L.divIcon({
+            className: ['tp-map-marker', 'tp-map-point', ...classes].join(' '),
+            html: `<span class="tp-map-point-dot" style="background:${color}">${content}</span>`,
+            iconSize: [30, 30],
+            iconAnchor: [15, 15],
+            tooltipAnchor: [0, -17],
+        });
+    }
+
+    /**
+     * P, or the waypoint's number; a storefront store shows its logo, or a store.
+     */
+    pickupIcon(pickup) {
+        if (pickup.complete) {
+            return this.markerIcon(icon(faCheck).html[0], DONE_COLOR, ['tp-map-point-complete']);
+        }
+
+        if (pickup.store?.logo_url) {
+            return this.markerIcon(`<img src="${escapeHtml(pickup.store.logo_url)}" alt="" />`, PICKUP_COLOR, ['tp-map-point-logo']);
+        }
+
+        return this.markerIcon(pickup.store ? icon(faStore).html[0] : escapeHtml(pickup.marker ?? 'P'), PICKUP_COLOR);
+    }
+
+    stopIcon(marker, complete, selected, dimmed) {
+        const classes = [];
+        if (complete) {
+            classes.push('tp-map-point-complete');
+        }
+
+        if (selected) {
+            classes.push('tp-map-point-selected');
+        }
+
+        if (dimmed) {
+            classes.push('tp-map-point-dimmed');
+        }
+
+        const color = complete ? DONE_COLOR : marker === 'D' ? DROPOFF_COLOR : 'var(--tp-accent)';
+
+        return this.markerIcon(complete ? icon(faCheck).html[0] : escapeHtml(marker), color, classes);
+    }
+
+    /* ── Labels ────────────────────────────────────────────────────── */
+
+    /**
+     * Labels sit above their markers. One that would overlap a label already placed, in
+     * the order the map gives them priority (the vehicle, the customer's stops, then the
+     * pickups), moves below its marker instead.
+     */
+    @action placeLabels() {
+        if (!this.element) {
+            return;
+        }
+
+        const labels = ['.tp-map-label-vehicle', '.tp-map-label-stop', '.tp-map-label-pickup'].flatMap((selector) => [...this.element.querySelectorAll(selector)]);
+        const placed = [];
+        const overlaps = (box) => placed.some((other) => box.left < other.right + 4 && box.right > other.left - 4 && box.top < other.bottom + 2 && box.bottom > other.top - 2);
+        for (const label of labels) {
+            label.classList.remove('tp-map-label-below');
+            label.style.top = '';
+            let box = label.getBoundingClientRect();
+            if (overlaps(box)) {
+                // From above the marker (its centre less 23px) to below it (its centre
+                // plus 21px): the label's height and the marker's 30px, with the gaps.
+                label.classList.add('tp-map-label-below');
+                label.style.top = `${Math.round(box.height + 44)}px`;
+                box = label.getBoundingClientRect();
+            }
+
+            placed.push(box);
+        }
+    }
+
+    scheduleLabels() {
+        next(() => {
+            if (!this.isDestroyed) {
+                this.placeLabels();
+            }
+        });
+    }
+
+    /* ── Full screen ───────────────────────────────────────────────── */
+
+    get fullscreenLabel() {
+        return this.intl.t(this.expanded ? 'tracking-page.page.map-exit-fullscreen' : 'tracking-page.page.map-fullscreen');
+    }
+
+    @action register(element) {
+        this.element = element;
+        document.addEventListener('fullscreenchange', this.onFullscreenChange);
+        document.addEventListener('keydown', this.onKeydown);
+    }
+
+    willDestroy() {
+        super.willDestroy(...arguments);
+        this.map?.off('zoomend moveend', this.placeLabels);
+        document.removeEventListener('fullscreenchange', this.onFullscreenChange);
+        document.removeEventListener('keydown', this.onKeydown);
+    }
+
+    /**
+     * The browser's full screen where it has one; otherwise the map covers the window.
+     */
+    @action toggleFullscreen() {
+        if (document.fullscreenElement === this.element) {
+            document.exitFullscreen?.();
+            return;
+        }
+
+        if (this.expanded) {
+            this.setExpanded(false);
+            return;
+        }
+
+        const request = this.element?.requestFullscreen?.();
+        if (request) {
+            request.catch(() => this.setExpanded(true));
+        } else {
+            this.setExpanded(true);
+        }
+    }
+
+    @action onFullscreenChange() {
+        this.setExpanded(!!this.element && document.fullscreenElement === this.element);
+    }
+
+    @action onKeydown(event) {
+        if (event.key === 'Escape' && this.expanded && !document.fullscreenElement) {
+            this.setExpanded(false);
+        }
+    }
+
+    setExpanded(expanded) {
+        this.expanded = expanded;
+        next(() => {
+            if (this.map && !this.isDestroyed) {
+                this.map.invalidateSize();
+                this.fitRoute();
+            }
+        });
+    }
+
+    /* ── Map ───────────────────────────────────────────────────────── */
+
+    @action setup({ target }) {
+        this.map = target;
+        this.map.on('zoomend moveend', this.placeLabels);
+        this.fitRoute();
+        this.scheduleLabels();
+    }
+
+    @action fitRoute() {
+        if (!this.map || this.points.length === 0) {
+            return;
+        }
+
+        if (this.points.length === 1) {
+            this.map.setView(this.points[0], 14);
+            return;
+        }
+
+        this.map.fitBounds(L.latLngBounds(this.points), { padding: [48, 48], maxZoom: 15 });
+    }
+
+    @action recenter() {
+        if (this.map && this.vehicle) {
+            this.map.setView(this.vehicle, 15, { animate: !this.args.reducedMotion });
+        }
+    }
+
+    /**
+     * Bring the stop the customer picked into view.
+     */
+    @action focusStop() {
+        const stop = this.stops.find((candidate) => candidate.id === this.args.selectedStopId);
+        if (this.map && stop) {
+            this.map.panTo(stop.location, { animate: !this.args.reducedMotion });
+        }
+    }
+}

package/addon/components/tracking-page/order-list.hbs

@@ -0,0 +1,35 @@
+<section class="tp-wide tp-stack" aria-labelledby="tp-orders-title">
+    <div class="tp-stack-xs">
+        <span class="tp-chip"><FaIcon @icon="user" /> {{t "tracking-page.page.chip-account"}}</span>
+        <h1 id="tp-orders-title" class="tp-h1">{{t "tracking-page.page.your-orders"}}</h1>
+    </div>
+    {{#if @isLoading}}
+        <div class="tp-stack-sm" aria-busy="true">
+            <div class="tp-skeleton tp-skeleton-row"></div>
+            <div class="tp-skeleton tp-skeleton-row"></div>
+            <div class="tp-skeleton tp-skeleton-row"></div>
+        </div>
+    {{else if @orders.length}}
+        <ul class="tp-list">
+            {{#each @orders as |order|}}
+                <li>
+                    <button type="button" class="tp-list-row" {{on "click" (fn @onOpen order)}}>
+                        <span class="tp-icon-badge tp-icon-badge-soft" aria-hidden="true"><FaIcon @icon="box" /></span>
+                        <span class="tp-stack-xs tp-grow">
+                            <span class="tp-strong">{{or order.title order.tracking_number}}</span>
+                            <span class="tp-small tp-accent-text">{{t (concat "tracking-page.page.stage-" order.stage)}}</span>
+                            <span class="tp-mono tp-small tp-muted">{{order.tracking_number}}</span>
+                        </span>
+                        <FaIcon @icon="chevron-right" class="tp-muted" />
+                    </button>
+                </li>
+            {{/each}}
+        </ul>
+    {{else}}
+        <div class="tp-empty">
+            <FaIcon @icon="box" />
+            <div class="tp-strong">{{t "tracking-page.page.no-orders"}}</div>
+            <div class="tp-small tp-muted">{{t "tracking-page.page.no-orders-help"}}</div>
+        </div>
+    {{/if}}
+</section>

package/addon/components/tracking-page/public-view.hbs

@@ -0,0 +1,60 @@
+<div class="tp-narrow tp-stack">
+    <span class="tp-chip"><FaIcon @icon="lock" /> {{t "tracking-page.page.chip-limited"}}</span>
+
+    <section class="tp-card tp-stack" aria-labelledby="tp-public-status">
+        {{#if @data.stage}}
+            <div class="tp-stack-xs">
+                <div class="tp-eyebrow">{{t "tracking-page.page.status"}}</div>
+                <h1 id="tp-public-status" class="tp-h1">{{t (concat "tracking-page.page.stage-" @data.stage)}}</h1>
+                {{#if @data.last_update_on}}
+                    <div class="tp-muted">{{t "tracking-page.page.last-update" date=@data.last_update_on}}</div>
+                {{/if}}
+            </div>
+            <div class="tp-coarse" aria-hidden="true">
+                <span class="tp-coarse-bar tp-coarse-done"></span>
+                <span class="tp-coarse-bar {{if (or (eq @data.stage 'in_transit') (eq @data.stage 'dispatched') (eq @data.stage 'delivered')) 'tp-coarse-done'}}"></span>
+                <span class="tp-coarse-bar {{if (eq @data.stage 'delivered') 'tp-coarse-done'}}"></span>
+            </div>
+        {{else}}
+            <h1 id="tp-public-status" class="tp-h1">{{t "tracking-page.page.verify-to-see"}}</h1>
+        {{/if}}
+        <div class="tp-row-between tp-top-border">
+            <div class="tp-stack-xs">
+                <span class="tp-small tp-muted">{{t "tracking-page.page.tracking-number"}}</span>
+                <span class="tp-mono tp-strong">{{@data.tracking_number}}</span>
+            </div>
+            <ClickToCopy class="tp-button tp-button-small" @value={{@data.tracking_number}}>{{t "tracking-page.page.copy"}}</ClickToCopy>
+        </div>
+    </section>
+
+    <section class="tp-card tp-card-accent tp-stack" aria-labelledby="tp-verify-title">
+        <span class="tp-icon-badge" aria-hidden="true"><FaIcon @icon="shield-halved" /></span>
+        <div class="tp-stack-xs">
+            <h2 id="tp-verify-title" class="tp-h2">{{t "tracking-page.page.verify-title"}}</h2>
+            <p class="tp-muted">{{t "tracking-page.page.verify-help"}}</p>
+        </div>
+        <div class="tp-row-wrap">
+            <button type="button" class="tp-button tp-button-primary tp-grow" {{on "click" @onVerify}}>{{t "tracking-page.page.verify-button"}}</button>
+            {{#if @data.sign_in}}
+                <a class="tp-button tp-button-secondary tp-grow" href={{@signInUrl}}>{{t "tracking-page.page.sign-in-account"}}</a>
+            {{/if}}
+        </div>
+    </section>
+
+    <div class="tp-locked-grid">
+        {{#each (array "map" "arrival" "details") as |section|}}
+            <div class="tp-locked">
+                <div class="tp-locked-blur" aria-hidden="true">
+                    <div class="tp-skeleton tp-skeleton-title"></div>
+                    <div class="tp-skeleton tp-skeleton-line"></div>
+                    <div class="tp-skeleton tp-skeleton-line"></div>
+                </div>
+                <div class="tp-locked-overlay">
+                    <FaIcon @icon="lock" />
+                    <span class="tp-strong">{{t (concat "tracking-page.page.locked-" section)}}</span>
+                    <button type="button" class="tp-chip tp-chip-button" {{on "click" @onVerify}}>{{t "tracking-page.page.verify-unlock"}}</button>
+                </div>
+            </div>
+        {{/each}}
+    </div>
+</div>

package/addon/components/tracking-page/settings-preview.hbs

@@ -0,0 +1,21 @@
+<div class="tp-preview" style={{this.style}} aria-hidden="true">
+    <div class="tp-preview-header">
+        <span class="tp-preview-monogram">{{this.monogram}}</span>
+        <span class="tp-preview-name">{{@displayName}}</span>
+    </div>
+    <div class="tp-preview-body">
+        <span class="tp-preview-chip">{{t "tracking-page.settings.preview-chip"}}</span>
+        <div class="tp-preview-headline">{{t "tracking-page.settings.preview-headline"}}</div>
+        <div class="tp-preview-sub">{{t "tracking-page.settings.preview-sub"}}</div>
+        <div class="tp-preview-steps">
+            <span class="tp-preview-step tp-preview-step-done"></span>
+            <span class="tp-preview-step tp-preview-step-done"></span>
+            <span class="tp-preview-step tp-preview-step-done"></span>
+            <span class="tp-preview-step"></span>
+        </div>
+        <span class="tp-preview-button">{{t "tracking-page.settings.preview-button"}}</span>
+    </div>
+    {{#if @poweredBy}}
+        <div class="tp-preview-footer">{{t "tracking-page.settings.preview-powered-by"}}</div>
+    {{/if}}
+</div>

package/addon/components/tracking-page/settings-preview.js

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+
+/**
+ * A small phone-sized preview of the customer tracking page, themed from the settings being edited.
+ */
+export default class TrackingPageSettingsPreviewComponent extends Component {
+    get style() {
+        return htmlSafe(this.args.themeStyle ?? '');
+    }
+
+    get monogram() {
+        const words = (this.args.displayName ?? '').split(/\s+/);
+        let monogram = '';
+        for (const word of words) {
+            if (word && monogram.length < 2) {
+                monogram += word[0].toUpperCase();
+            }
+        }
+
+        return monogram;
+    }
+}

package/addon/components/tracking-page/verify-panel.hbs

@@ -0,0 +1,109 @@
+<div class="tp-stack">
+    <span class="tp-icon-badge {{if (eq @step 'success') 'tp-icon-badge-solid'}} {{if (eq @step 'locked') 'tp-icon-badge-warn'}}" aria-hidden="true">
+        {{#if (eq @step "success")}}
+            <FaIcon @icon="check" />
+        {{else if (eq @step "locked")}}
+            <FaIcon @icon="lock" />
+        {{else if (eq @step "none")}}
+            <FaIcon @icon="phone" />
+        {{else}}
+            <FaIcon @icon="shield-halved" />
+        {{/if}}
+    </span>
+
+    {{#if (or (eq @step "choose") (eq @step "sending"))}}
+        <div class="tp-stack-xs">
+            <h1 class="tp-h1">{{t "tracking-page.page.verify-title-short"}}</h1>
+            <p class="tp-muted">{{t "tracking-page.page.verify-choose-help"}}</p>
+        </div>
+        <fieldset class="tp-stack-sm">
+            <legend class="tp-label">{{t "tracking-page.page.send-by"}}</legend>
+            {{#each @channels as |channel|}}
+                <label class="tp-option {{if (eq channel.type @selectedChannel) 'tp-option-selected'}}">
+                    <input type="radio" name="tp-channel" value={{channel.type}} checked={{eq channel.type @selectedChannel}} disabled={{eq @step "sending"}} {{on "change" (fn @onPick channel.type)}} />
+                    <span class="tp-stack-xs">
+                        <span class="tp-strong">{{t (concat "tracking-page.page.channel-" channel.type)}}</span>
+                        <span class="tp-mono tp-muted">{{channel.masked}}</span>
+                    </span>
+                </label>
+            {{/each}}
+        </fieldset>
+        {{#if (eq @message "failed")}}
+            <p class="tp-notice" role="alert">{{t "tracking-page.page.send-failed"}}</p>
+        {{/if}}
+        <button type="button" class="tp-button tp-button-primary" disabled={{eq @step "sending"}} {{on "click" @onSend}}>
+            {{#if (eq @step "sending")}}{{t "tracking-page.page.sending"}}{{else}}{{t "tracking-page.page.send-code"}}{{/if}}
+        </button>
+        <p class="tp-small tp-muted">{{t "tracking-page.page.masked-note"}}</p>
+    {{else if (eq @step "none")}}
+        <div class="tp-stack-xs">
+            <h1 class="tp-h1">{{t "tracking-page.page.no-contact-title"}}</h1>
+            <p class="tp-muted">{{t "tracking-page.page.no-contact-help" name=@company.name}}</p>
+        </div>
+        {{#if @company.support_phone}}
+            <a class="tp-button tp-button-primary" href="tel:{{@company.support_phone}}">{{t "tracking-page.page.call" phone=@company.support_phone}}</a>
+        {{/if}}
+        {{#if @company.support_email}}
+            <a class="tp-button tp-button-secondary" href="mailto:{{@company.support_email}}">{{@company.support_email}}</a>
+        {{/if}}
+    {{else if (eq @step "renew")}}
+        <div class="tp-stack-xs">
+            <h1 class="tp-h1">{{t "tracking-page.page.renew-title"}}</h1>
+            <p class="tp-notice">{{t (concat "tracking-page.page.renew-" (or @message "expired"))}}</p>
+        </div>
+        <button type="button" class="tp-button tp-button-primary" {{on "click" @onSend}}>{{t "tracking-page.page.send-new-code"}}</button>
+    {{else}}
+        <div class="tp-stack-xs">
+            <h1 class="tp-h1">
+                {{#if (eq @step "success")}}{{t "tracking-page.page.verified-title"}}{{else if (eq @step "locked")}}{{t "tracking-page.page.locked-title"}}{{else}}{{t "tracking-page.page.enter-code"}}{{/if}}
+            </h1>
+            <p class="tp-muted">{{t (concat "tracking-page.page.code-sent-" @selectedChannel) masked=@masked}}</p>
+        </div>
+        <div class="tp-otp">
+            <label for="tp-otp-input" class="tp-sr-only">{{t "tracking-page.page.code-label"}}</label>
+            <input
+                id="tp-otp-input"
+                class="tp-otp-input"
+                value={{@code}}
+                inputmode="numeric"
+                autocomplete="one-time-code"
+                pattern="[0-9]*"
+                maxlength="6"
+                disabled={{or (eq @step "locked") (eq @step "success")}}
+                aria-invalid={{if (eq @step "wrong") "true" "false"}}
+                aria-describedby="tp-otp-message"
+                {{on "input" @onCode}}
+            />
+            <div class="tp-otp-boxes" aria-hidden="true">
+                {{#each @boxes as |box|}}
+                    <span class="tp-otp-box {{if box.active 'tp-otp-box-active'}} {{if (eq @step 'wrong') 'tp-otp-box-wrong'}} {{if (eq @step 'success') 'tp-otp-box-success'}} {{if (eq @step 'locked') 'tp-otp-box-locked'}}">{{box.digit}}</span>
+                {{/each}}
+            </div>
+        </div>
+        <div id="tp-otp-message" aria-live="assertive">
+            {{#if (eq @step "sent")}}
+                <p class="tp-small tp-muted">{{t "tracking-page.page.code-expires"}}</p>
+            {{else if (eq @step "wrong")}}
+                <p class="tp-warn-text tp-strong">{{t "tracking-page.page.code-wrong" count=@attemptsLeft}}</p>
+            {{else if (eq @step "locked")}}
+                <p class="tp-notice tp-notice-warn">{{t "tracking-page.page.code-locked" time=@lockText}}</p>
+            {{else if (eq @step "success")}}
+                <p class="tp-accent-text tp-strong">{{t "tracking-page.page.code-success"}}</p>
+            {{/if}}
+        </div>
+        {{#if (or (eq @step "sent") (eq @step "wrong"))}}
+            <div class="tp-row-wrap">
+                {{#if @cooldown}}
+                    <span class="tp-muted tp-touch">{{t "tracking-page.page.resend-in" time=@cooldownText}}</span>
+                {{else}}
+                    <button type="button" class="tp-link-button" {{on "click" @onResend}}>{{t "tracking-page.page.resend"}}</button>
+                {{/if}}
+                {{#if @otherChannel}}
+                    <button type="button" class="tp-link-button" {{on "click" @onSwitch}}>{{t (concat "tracking-page.page.switch-to-" @otherChannel.type)}}</button>
+                {{/if}}
+            </div>
+        {{/if}}
+    {{/if}}
+
+    <p class="tp-small tp-muted">{{t "tracking-page.page.stay-verified" hours=(or @sessionHours 24)}}</p>
+</div>