@salla.sa/twilight-components 2.14.539 → 2.14.540

package/dist/collection/components/salla-cookies-bar/salla-cookies-bar.js

@@ -2,12 +2,18 @@
  * Crafted with ❤ by Salla
  */
 import { h, Host } from "@stencil/core";
+import CancelIcon from "../../assets/svg/cancel.svg";
 export class SallaCookiesBar {
     constructor() {
         /**
          * Whether the cookies bar is visible.
          */
         this.isVisible = true;
+        /**
+         * Which step of the bar is shown: the initial consent message with
+         * accept/customize actions, or the per-category customization panel.
+         */
+        this.step = 'consent';
         /**
          * Whether the viewport is mobile width (updates on resize).
          */
@@ -15,24 +21,141 @@ export class SallaCookiesBar {
         this.mobileBreakpoint = 768;
         this.mobileQueryHandler = (e) => (this.isMobile = e.matches);
         this.openRequestedHandler = () => this.open();
-        this.selectedConsent = 'rejected';
+        this.authLoggedInHandler = () => this.syncConsentAfterLogin();
+        this.authLoggedOutHandler = () => this.clearLocalConsent();
+        /**
+         * Consent cookie names, matching the category keys the backend expects.
+         */
+        this.necessaryCookieKey = 'necessary_cookies';
+        this.performanceCookieKey = 'performance_cookies';
+        this.functionalCookieKey = 'functional_cookies';
+        this.advertisingCookieKey = 'advertising_cookies';
+        this.consentCookieDays = 365;
+        /**
+         * Known first-party cookie names (a trailing `*` matches by prefix) set by common
+         * third-party scripts, grouped by the category they belong to. Only first-party
+         * cookies (set on the store's own domain) can actually be read/removed from here —
+         * cookies scoped to a third-party domain (e.g. doubleclick.net) are invisible to us.
+         */
+        this.trackingCookiesByCategory = {
+            performance_cookies: [
+                // Google Analytics
+                '_ga',
+                '_ga_*',
+                '_gid',
+                '_gat',
+                '_gat_gtag_*',
+                // Hotjar
+                '_hjSessionUser_*',
+                '_hjSession_*',
+                '_hjIncludedInSessionSample_*',
+                '_hjAbsoluteSessionInProgress',
+                '_hjFirstSeen',
+                // Microsoft Clarity
+                '_clck',
+                '_clsk',
+                'MUID',
+                'MR',
+                'ANONCHK',
+                // Yandex Metrica
+                '_ym_uid',
+                '_ym_d',
+                '_ym_isad',
+            ],
+            advertising_cookies: [
+                // Google Ads / DoubleClick
+                '_gcl_au',
+                '_gcl_aw',
+                '_gcl_dc',
+                'IDE',
+                'test_cookie',
+                '1P_JAR',
+                'NID',
+                // Meta (Facebook) Pixel
+                '_fbp',
+                '_fbc',
+                'fr',
+                // TikTok Pixel
+                '_ttp',
+                // Snapchat Pixel
+                '_scid',
+                'sc_at',
+                // Twitter/X
+                'personalization_id',
+                'guest_id',
+                'muc_ads',
+                // Pinterest
+                '_pin_unauth',
+                '_pinterest_ct_ua',
+                // LinkedIn Insight Tag
+                'li_sugr',
+                'bcookie',
+                'lidc',
+                'UserMatchHistory',
+                'AnalyticsSyncHistory',
+            ],
+            functional_cookies: [
+                // Intercom
+                'intercom-id-*',
+                'intercom-session-*',
+                // Zendesk Chat
+                '__zlcmid',
+                // Crisp
+                'crisp-client%2Fsession%2F*',
+                // YouTube embeds
+                'YSC',
+                'VISITOR_INFO1_LIVE',
+                'PREF',
+            ],
+        };
+        this.performanceEnabled = false;
+        this.functionsEnabled = false;
+        this.adsEnabled = false;
     }
     async componentWillLoad() {
         await Salla.onReady();
         await Salla.lang.onLoaded();
         this.loadTranslations();
-        this.selectedConsent = this.getStoredConsentChoice();
         Salla.event.on('salla-cookies-bar::open', this.openRequestedHandler);
+        Salla.event.on('auth::logged.in', this.authLoggedInHandler);
+        Salla.event.on('auth::logged.out', this.authLoggedOutHandler);
         this.unregisterAfterFetchMenuItemsHook = Salla.hooks.registerHook('salla-menu', 'afterFetchMenuItems', (menuComponent) => this.appendCookiesSettingsLink(menuComponent));
+        this.hydrateToggleState();
         if (Salla.storage.get('cookies-consent')) {
             this.isVisible = false;
         }
+        // Keep tracking cookies enforced on every load/refresh, not just when the
+        // customer actively changes their choice in the bar.
+        this.enforceCurrentConsent();
+    }
+    isArabicLocale() {
+        const locale = Salla.lang.getLocale?.() ?? document.documentElement.lang ?? 'ar';
+        return locale.toLowerCase().startsWith('ar');
+    }
+    // TODO: remove the fallback defaults once the `common.cookies.*` keys below are added to the language files.
+    translate(key, arFallback, enFallback) {
+        const value = Salla.lang.get(key);
+        if (value && value !== key)
+            return value;
+        return this.isArabicLocale() ? arFallback : enFallback;
     }
     loadTranslations() {
+        this.titleLabel = this.translate('common.cookies.settings_title', 'تخصيص إعدادات ملفات تعريف الارتباط', 'Customize Cookie Preferences Settings');
+        this.saveLabel = this.translate('common.cookies.save', 'حفظ الخيارات', 'Save Options');
         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');
+        this.acceptLabel = this.translate('common.cookies.accept', 'قبول', 'Accept');
+        this.acceptAllLabel = this.translate('common.cookies.accept_all', 'قبول الكل', 'Accept All');
+        this.customizeLabel = this.translate('common.cookies.customize', 'تخصيص', 'Customize');
+        this.essentialTitleLabel = this.translate('common.cookies.categories.essential.title', 'ملفات تعريف الارتباط الضرورية', 'Essential Cookies');
+        this.essentialDescriptionLabel = this.translate('common.cookies.categories.essential.description', 'ضروريه لتشغيل الوظائف الأساسية للموقع الإلكتروني.', "Required for the website's basic functions.");
+        this.essentialBadgeLabel = this.translate('common.cookies.categories.essential.badge', 'إجباري', 'Required');
+        this.performanceTitleLabel = this.translate('common.cookies.categories.performance.title', 'ملفات تعريف الارتباط الخاصة بالأداء', 'Performance Cookies');
+        this.performanceDescriptionLabel = this.translate('common.cookies.categories.performance.description', 'تساعدنا في تحليل كيفية استخدامك للموقع وتحسين أدائه.', 'Help us analyze site usage and improve performance.');
+        this.functionsTitleLabel = this.translate('common.cookies.categories.functions.title', 'ملفات تعريف الارتباط الوظيفية', 'Functional Cookies');
+        this.functionsDescriptionLabel = this.translate('common.cookies.categories.functions.description', 'تُتيح لك تجربة مخصصة وتفعيل ميزات متقدمة داخل الموقع.', 'Enable enhanced functionality and personalization.');
+        this.adsTitleLabel = this.translate('common.cookies.categories.ads.title', 'ملفات تعريف الارتباط الإعلانية', 'Advertising Cookies');
+        this.adsDescriptionLabel = this.translate('common.cookies.categories.ads.description', 'تُستخدم لعرض محتوى تسويقي مخصص يناسب اهتماماتك.', 'Allow personalized content.');
     }
     componentDidLoad() {
         this.mobileQuery = window.matchMedia(`(max-width: ${this.mobileBreakpoint - 1}px)`);
@@ -42,57 +165,187 @@ export class SallaCookiesBar {
     disconnectedCallback() {
         this.mobileQuery?.removeEventListener('change', this.mobileQueryHandler);
         Salla.event.off('salla-cookies-bar::open', this.openRequestedHandler);
+        Salla.event.off('auth::logged.in', this.authLoggedInHandler);
+        Salla.event.off('auth::logged.out', this.authLoggedOutHandler);
         this.unregisterAfterFetchMenuItemsHook?.();
         this.unregisterAfterFetchMenuItemsHook = undefined;
     }
+    allCategoryKeys() {
+        return [
+            this.necessaryCookieKey,
+            this.performanceCookieKey,
+            this.functionalCookieKey,
+            this.advertisingCookieKey,
+        ];
+    }
+    writeLocalConsentCookies(points) {
+        for (const key of this.allCategoryKeys()) {
+            Salla.cookie.set(key, String(key === this.necessaryCookieKey || points.includes(key)), this.consentCookieDays);
+        }
+    }
     /**
-     * Accept cookies consent.
+     * Store the accepted categories as local cookies (works for guests too), then, for
+     * signed-in customers, replace their saved preference server-side.
+     * `points` is a full replace: any category left out is stored as declined.
      */
-    async accept() {
-        this.selectedConsent = 'accepted';
+    applyConsent(points) {
+        this.writeLocalConsentCookies(points);
+        this.sweepDisabledCategoryCookies(points);
+        if (!Salla.config.isGuest()) {
+            Salla.api.request('account/data-privacy', { points }, 'post').catch(() => { });
+        }
+    }
+    /**
+     * The currently known accepted categories, read from local cookies — there is no
+     * backend endpoint to read the customer's saved preference back, so the cookies
+     * written on save are the only source of truth we have. Returns `null` when no
+     * choice has been made yet — the bar itself is the source of truth in that case,
+     * not a sweep.
+     */
+    currentConsentPoints() {
+        if (!Salla.storage.get('cookies-consent'))
+            return null;
+        return this.allCategoryKeys().filter(key => key === this.necessaryCookieKey || Salla.cookie.get(key) === 'true');
+    }
+    enforceCurrentConsent() {
+        const points = this.currentConsentPoints();
+        if (points)
+            this.sweepDisabledCategoryCookies(points);
+    }
+    /**
+     * Reflect the currently known choice (server record, or local cookies for a guest)
+     * in the toggles, so reopening the settings panel shows what was actually saved
+     * instead of resetting to all-off.
+     */
+    hydrateToggleState() {
+        const points = this.currentConsentPoints();
+        if (!points)
+            return;
+        this.performanceEnabled = points.includes(this.performanceCookieKey);
+        this.functionsEnabled = points.includes(this.functionalCookieKey);
+        this.adsEnabled = points.includes(this.advertisingCookieKey);
+    }
+    /**
+     * Wipe the locally-stored choice on logout. Local cookies/storage are scoped to the
+     * browser, not the account — without this, whatever the previous customer chose would
+     * be misread as "the visitor's own prior choice" and pushed to the next account that
+     * logs in (or is created) on this same browser.
+     */
+    clearLocalConsent() {
+        for (const key of this.allCategoryKeys()) {
+            Salla.cookie.remove(key);
+        }
+        Salla.storage.remove('cookies-consent');
+        // Whoever continues on this browser next (guest or a different account) hasn't
+        // made a choice yet, so the bar should show again right away.
+        this.isVisible = true;
+    }
+    /**
+     * Runs when a guest signs in. There is no backend endpoint to check whether the
+     * account already has a saved preference, so if the visitor already made a choice
+     * as a guest (guest choices are never sent server-side), attribute that local
+     * choice to the account now — this is the only source of truth available.
+     */
+    syncConsentAfterLogin() {
+        const points = this.currentConsentPoints();
+        if (!points)
+            return;
+        Salla.api.request('account/data-privacy', { points }, 'post').catch(() => { });
+    }
+    cookieNameMatchesPattern(cookieName, pattern) {
+        return pattern.endsWith('*')
+            ? cookieName.startsWith(pattern.slice(0, -1))
+            : cookieName === pattern;
+    }
+    /**
+     * Remove known first-party tracking cookies for any category the customer just
+     * declined. Cookies scoped to a third-party domain (e.g. doubleclick.net) can't be
+     * reached from here — only cookies the tracking script set on the store's own domain.
+     */
+    sweepDisabledCategoryCookies(points) {
+        const disabledCategories = Object.keys(this.trackingCookiesByCategory).filter(category => !points.includes(category));
+        if (!disabledCategories.length)
+            return;
+        const patterns = disabledCategories.flatMap(category => this.trackingCookiesByCategory[category]);
+        const currentCookieNames = document.cookie
+            .split(';')
+            .map(cookie => cookie.split('=')[0].trim());
+        currentCookieNames
+            .filter(cookieName => patterns.some(pattern => this.cookieNameMatchesPattern(cookieName, pattern)))
+            .forEach(cookieName => Salla.cookie.remove(cookieName));
+    }
+    dismiss(eventName) {
         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');
+        Salla.event.emit(`salla-cookies-bar::${eventName}`);
+        Salla.storage.set('cookies-consent', eventName);
+    }
+    /**
+     * Persist the customized per-category toggle choices, then dismiss.
+     */
+    savePreferences() {
+        const points = [this.necessaryCookieKey];
+        if (this.performanceEnabled)
+            points.push(this.performanceCookieKey);
+        if (this.functionsEnabled)
+            points.push(this.functionalCookieKey);
+        if (this.adsEnabled)
+            points.push(this.advertisingCookieKey);
+        this.applyConsent(points);
+        this.dismiss('accepted');
+    }
+    /**
+     * Accept cookies consent.
+     */
+    async accept() {
+        this.applyConsent(this.allCategoryKeys());
+        this.dismiss('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');
+        this.applyConsent([this.necessaryCookieKey]);
+        this.dismiss('rejected');
         return this.host;
     }
     /**
-     * Show cookies settings bar to allow updating consent.
+     * Show cookies settings bar to allow updating consent. Always opens on the initial
+     * consent step, same as first load — the customer picks "customize" to reach the
+     * per-category panel.
      */
     async open() {
-        this.selectedConsent = this.getStoredConsentChoice();
+        this.hydrateToggleState();
+        this.step = 'consent';
         this.isVisible = true;
         return this.host;
     }
-    getStoredConsentChoice() {
-        const stored = Salla.storage.get('cookies-consent');
-        return stored === 'accepted' || stored === 'rejected' ? stored : 'rejected';
+    /**
+     * Move from the initial consent step to the per-category customization panel.
+     */
+    openPreferences() {
+        this.hydrateToggleState();
+        this.step = 'preferences';
     }
     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')
+        if (!websiteCookiesEnabled ||
+            !menuComponent?.withCookiePreferences ||
+            menuComponent?.source !== 'footer')
             return;
         const settingsHref = '#cookies-settings';
-        const hasSettingsLink = menuComponent?.menus.some((m) => m?.url === settingsHref);
+        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, {
+        menuComponent.menus = [
+            ...menuComponent.menus,
+            {
                 id: 'cookies-settings',
                 order: null,
                 title: Salla.lang.get('common.cookies.settings'),
@@ -102,13 +355,37 @@ export class SallaCookiesBar {
                 children: [],
                 image: null,
                 callback: () => Salla.event.emit('salla-cookies-bar::open'),
-            }];
+            },
+        ];
+    }
+    renderToggle(checked, disabled, label, onToggle) {
+        return (h("label", { class: { 's-toggle': true, 's-toggle--disabled': disabled } }, h("input", { class: "s-toggle-input", type: "checkbox", checked: checked, disabled: disabled, "aria-label": label, onChange: () => onToggle?.() }), h("div", { class: "s-toggle-switcher" })));
+    }
+    renderCategory(title, description, toggle, badge) {
+        return (h("div", { class: "s-cookies-bar-category" }, h("div", { class: "s-cookies-bar-category-content" }, h("div", { class: "s-cookies-bar-category-title-row" }, h("span", { class: "s-cookies-bar-category-title" }, title), badge && h("span", { class: "s-cookies-bar-badge" }, badge)), h("p", { class: "s-cookies-bar-category-description m-0" }, description)), toggle));
+    }
+    renderMessage() {
+        return (h("p", { class: "s-cookies-bar-message 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))));
+    }
+    /**
+     * Step 1: the initial bar — consent message plus accept/customize actions.
+     * Accepting here accepts every category outright; customizing moves on to
+     * the per-category panel without deciding anything yet.
+     */
+    renderConsentStep() {
+        return (h("div", { class: "s-cookies-bar-consent" }, this.renderMessage(), h("div", { class: "s-cookies-bar-consent-actions" }, h("salla-button", { class: "s-cookies-bar-btn--customize", color: "primary", fill: "outline", type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.openPreferences() }, this.customizeLabel), h("salla-button", { class: "s-cookies-bar-btn--accept", color: "primary", fill: "solid", type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.accept() }, this.acceptAllLabel))));
+    }
+    /**
+     * Step 2: the per-category customization panel.
+     */
+    renderPreferencesStep() {
+        return (h("div", null, h("div", { class: "s-cookies-bar-header" }, h("h3", { class: "s-cookies-bar-title m-0" }, this.titleLabel), h("button", { type: "button", class: "s-cookies-bar-close", "aria-label": this.titleLabel, onClick: () => this.reject() }, h("span", { innerHTML: CancelIcon }))), h("div", { class: "s-cookies-bar-categories" }, this.renderCategory(this.essentialTitleLabel, this.essentialDescriptionLabel, this.renderToggle(true, true, this.essentialTitleLabel), this.essentialBadgeLabel), this.renderCategory(this.performanceTitleLabel, this.performanceDescriptionLabel, this.renderToggle(this.performanceEnabled, false, this.performanceTitleLabel, () => (this.performanceEnabled = !this.performanceEnabled))), this.renderCategory(this.functionsTitleLabel, this.functionsDescriptionLabel, this.renderToggle(this.functionsEnabled, false, this.functionsTitleLabel, () => (this.functionsEnabled = !this.functionsEnabled))), this.renderCategory(this.adsTitleLabel, this.adsDescriptionLabel, this.renderToggle(this.adsEnabled, false, this.adsTitleLabel, () => (this.adsEnabled = !this.adsEnabled)))), h("div", { class: "s-cookies-bar-footer" }, this.renderMessage(), h("salla-button", { class: "s-cookies-bar-btn--save", color: "primary", fill: "solid", type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.savePreferences() }, this.saveLabel))));
     }
     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))))));
+        return (h(Host, null, h("div", { dir: this.isRtl() ? 'rtl' : 'ltr', class: "s-cookies-bar" }, this.step === 'consent' ? this.renderConsentStep() : this.renderPreferencesStep())));
     }
     static get is() { return "salla-cookies-bar"; }
     static get originalStyleUrls() {
@@ -124,19 +401,34 @@ export class SallaCookiesBar {
     static get states() {
         return {
             "isVisible": {},
+            "step": {},
             "isMobile": {},
+            "titleLabel": {},
+            "saveLabel": {},
             "messageLabel": {},
             "linkLabel": {},
             "acceptLabel": {},
-            "rejectLabel": {},
-            "selectedConsent": {}
+            "acceptAllLabel": {},
+            "customizeLabel": {},
+            "essentialTitleLabel": {},
+            "essentialDescriptionLabel": {},
+            "essentialBadgeLabel": {},
+            "performanceTitleLabel": {},
+            "performanceDescriptionLabel": {},
+            "performanceEnabled": {},
+            "functionsTitleLabel": {},
+            "functionsDescriptionLabel": {},
+            "functionsEnabled": {},
+            "adsTitleLabel": {},
+            "adsDescriptionLabel": {},
+            "adsEnabled": {}
         };
     }
     static get methods() {
         return {
             "accept": {
                 "complexType": {
-                    "signature": "() => Promise<HTMLElement>",
+                    "signature": "() => Promise<HTMLElement | undefined>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -157,7 +449,7 @@ export class SallaCookiesBar {
             },
             "reject": {
                 "complexType": {
-                    "signature": "() => Promise<HTMLElement>",
+                    "signature": "() => Promise<HTMLElement | undefined>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -178,7 +470,7 @@ export class SallaCookiesBar {
             },
             "open": {
                 "complexType": {
-                    "signature": "() => Promise<HTMLElement>",
+                    "signature": "() => Promise<HTMLElement | undefined>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -193,7 +485,7 @@ export class SallaCookiesBar {
                     "return": "Promise<HTMLElement>"
                 },
                 "docs": {
-                    "text": "Show cookies settings bar to allow updating consent.",
+                    "text": "Show cookies settings bar to allow updating consent. Always opens on the initial\nconsent step, same as first load \u2014 the customer picks \"customize\" to reach the\nper-category panel.",
                     "tags": []
                 }
             }