@salla.sa/twilight-components
Version:
Salla Web Component
204 lines (203 loc) • 8.72 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { h, Host } from "@stencil/core";
export class SallaCookiesBar {
constructor() {
/**
* Whether the cookies bar is visible.
*/
this.isVisible = true;
/**
* Whether the viewport is mobile width (updates on resize).
*/
this.isMobile = false;
this.mobileBreakpoint = 768;
this.mobileQueryHandler = (e) => (this.isMobile = e.matches);
this.openRequestedHandler = () => this.open();
this.selectedConsent = 'rejected';
}
async componentWillLoad() {
await Salla.onReady();
await Salla.lang.onLoaded();
this.loadTranslations();
this.selectedConsent = this.getStoredConsentChoice();
Salla.event.on('salla-cookies-bar::open', this.openRequestedHandler);
this.unregisterAfterFetchMenuItemsHook = Salla.hooks.registerHook('salla-menu', 'afterFetchMenuItems', (menuComponent) => this.appendCookiesSettingsLink(menuComponent));
if (Salla.storage.get('cookies-consent')) {
this.isVisible = false;
}
}
loadTranslations() {
this.messageLabel = Salla.lang.get('common.cookies.message');
this.linkLabel = Salla.lang.get('common.cookies.link');
this.acceptLabel = Salla.lang.get('common.cookies.accept');
this.rejectLabel = Salla.lang.get('common.cookies.reject');
}
componentDidLoad() {
this.mobileQuery = window.matchMedia(`(max-width: ${this.mobileBreakpoint - 1}px)`);
this.isMobile = this.mobileQuery.matches;
this.mobileQuery.addEventListener('change', this.mobileQueryHandler);
}
disconnectedCallback() {
this.mobileQuery?.removeEventListener('change', this.mobileQueryHandler);
Salla.event.off('salla-cookies-bar::open', this.openRequestedHandler);
this.unregisterAfterFetchMenuItemsHook?.();
this.unregisterAfterFetchMenuItemsHook = undefined;
}
/**
* Accept cookies consent.
*/
async accept() {
this.selectedConsent = 'accepted';
this.isVisible = false;
//We will call event first because we need to compare between old and new data inside session
Salla.event.emit('salla-cookies-bar::accepted');
Salla.storage.set('cookies-consent', 'accepted');
return this.host;
}
/**
* Reject cookies consent.
*/
async reject() {
this.selectedConsent = 'rejected';
this.isVisible = false;
//We will call event first because we need to compare between old and new data inside session
Salla.event.emit('salla-cookies-bar::rejected');
Salla.storage.set('cookies-consent', 'rejected');
return this.host;
}
/**
* Show cookies settings bar to allow updating consent.
*/
async open() {
this.selectedConsent = this.getStoredConsentChoice();
this.isVisible = true;
return this.host;
}
getStoredConsentChoice() {
const stored = Salla.storage.get('cookies-consent');
return stored === 'accepted' || stored === 'rejected' ? stored : 'rejected';
}
isRtl() {
return Salla.config.get('theme.is_rtl', true);
}
appendCookiesSettingsLink(menuComponent) {
const websiteCookiesEnabled = Salla.config.get('store.features')?.includes('website-cookies');
if (!websiteCookiesEnabled || !menuComponent?.withCookiePreferences || menuComponent?.source !== 'footer')
return;
const settingsHref = '#cookies-settings';
const hasSettingsLink = menuComponent?.menus.some((m) => m?.url === settingsHref);
if (hasSettingsLink)
return;
// IMPORTANT: avoid mutating @State arrays in-place (Stencil reactivity).
// Always create a new array reference.
menuComponent.menus = [...menuComponent.menus, {
id: 'cookies-settings',
order: null,
title: Salla.lang.get('common.cookies.settings'),
url: settingsHref,
target: '_self',
is_by_form_builder: false,
children: [],
image: null,
callback: () => Salla.event.emit('salla-cookies-bar::open'),
}];
}
render() {
if (!this.isVisible) {
return h(Host, null);
}
return (h(Host, null, h("div", { dir: this.isRtl() ? 'rtl' : 'ltr', class: "s-cookies-bar fixed bottom-0 inset-x-0 z-50 bg-white p-4" }, h("div", { class: "s-cookies-bar-content flex flex-col justify-center gap-6 max-w-screen-xl mx-auto px-4" }, h("p", { class: "s-cookies-bar-message text-sm font-medium leading-relaxed text-gray-500 m-0" }, this.messageLabel, Salla.config.get('policy_url') && (h("a", { href: Salla.config.get('policy_url'), target: "_blank", class: "s-cookies-bar-link text-primary ms-1" }, this.linkLabel))), h("div", { class: "s-cookies-bar-actions flex flex-row gap-2 shrink-0" }, h("salla-button", { class: `s-cookies-bar-btn--accept ${this.selectedConsent === 'rejected' ? 's-cookies-bar-btn--active' : ''}`, color: "primary", fill: this.selectedConsent === 'rejected' ? 'solid' : 'outline', type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.accept() }, this.acceptLabel), h("salla-button", { class: `s-cookies-bar-btn--reject ${this.selectedConsent === 'accepted' ? 's-cookies-bar-btn--active' : ''}`, color: this.selectedConsent === 'accepted' ? 'primary' : undefined, fill: this.selectedConsent === 'accepted' ? 'solid' : 'outline', type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.reject() }, this.rejectLabel))))));
}
static get is() { return "salla-cookies-bar"; }
static get originalStyleUrls() {
return {
"$": ["salla-cookies-bar.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-cookies-bar.css"]
};
}
static get states() {
return {
"isVisible": {},
"isMobile": {},
"messageLabel": {},
"linkLabel": {},
"acceptLabel": {},
"rejectLabel": {},
"selectedConsent": {}
};
}
static get methods() {
return {
"accept": {
"complexType": {
"signature": "() => Promise<HTMLElement>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
}
},
"return": "Promise<HTMLElement>"
},
"docs": {
"text": "Accept cookies consent.",
"tags": []
}
},
"reject": {
"complexType": {
"signature": "() => Promise<HTMLElement>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
}
},
"return": "Promise<HTMLElement>"
},
"docs": {
"text": "Reject cookies consent.",
"tags": []
}
},
"open": {
"complexType": {
"signature": "() => Promise<HTMLElement>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
}
},
"return": "Promise<HTMLElement>"
},
"docs": {
"text": "Show cookies settings bar to allow updating consent.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
}