@salla.sa/twilight-components 2.14.538 → 2.14.540

package/dist/types/components/salla-cookies-bar/salla-cookies-bar.d.ts

@@ -1,9 +1,14 @@
 export declare class SallaCookiesBar {
-    host: HTMLElement;
+    host: HTMLElement | undefined;
     /**
      * Whether the cookies bar is visible.
      */
     isVisible: boolean;
+    /**
+     * Which step of the bar is shown: the initial consent message with
+     * accept/customize actions, or the per-category customization panel.
+     */
+    step: 'consent' | 'preferences';
     /**
      * Whether the viewport is mobile width (updates on resize).
      */
@@ -12,33 +17,133 @@ export declare class SallaCookiesBar {
     private mobileBreakpoint;
     private mobileQueryHandler;
     private readonly openRequestedHandler;
+    private readonly authLoggedInHandler;
+    private readonly authLoggedOutHandler;
     private unregisterAfterFetchMenuItemsHook?;
     /**
-     * The label for component
+     * Consent cookie names, matching the category keys the backend expects.
+     */
+    private readonly necessaryCookieKey;
+    private readonly performanceCookieKey;
+    private readonly functionalCookieKey;
+    private readonly advertisingCookieKey;
+    private readonly consentCookieDays;
+    /**
+     * 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.
      */
-    messageLabel: string;
-    linkLabel: string;
-    acceptLabel: string;
-    rejectLabel: string;
-    selectedConsent: 'accepted' | 'rejected';
+    private readonly trackingCookiesByCategory;
+    /**
+     * The labels for component, loaded from the language files.
+     */
+    titleLabel: string | undefined;
+    saveLabel: string | undefined;
+    messageLabel: string | undefined;
+    linkLabel: string | undefined;
+    acceptLabel: string | undefined;
+    acceptAllLabel: string | undefined;
+    customizeLabel: string | undefined;
+    essentialTitleLabel: string | undefined;
+    essentialDescriptionLabel: string | undefined;
+    essentialBadgeLabel: string | undefined;
+    performanceTitleLabel: string | undefined;
+    performanceDescriptionLabel: string | undefined;
+    performanceEnabled: boolean;
+    functionsTitleLabel: string | undefined;
+    functionsDescriptionLabel: string | undefined;
+    functionsEnabled: boolean;
+    adsTitleLabel: string | undefined;
+    adsDescriptionLabel: string | undefined;
+    adsEnabled: boolean;
     componentWillLoad(): Promise<void>;
+    private isArabicLocale;
+    private translate;
     private loadTranslations;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    private allCategoryKeys;
+    private writeLocalConsentCookies;
+    /**
+     * 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.
+     */
+    private applyConsent;
+    /**
+     * 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.
+     */
+    private currentConsentPoints;
+    private enforceCurrentConsent;
+    /**
+     * 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.
+     */
+    private hydrateToggleState;
+    /**
+     * 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.
+     */
+    private clearLocalConsent;
+    /**
+     * 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.
+     */
+    private syncConsentAfterLogin;
+    private cookieNameMatchesPattern;
+    /**
+     * 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.
+     */
+    private sweepDisabledCategoryCookies;
+    private dismiss;
+    /**
+     * Persist the customized per-category toggle choices, then dismiss.
+     */
+    private savePreferences;
     /**
      * Accept cookies consent.
      */
-    accept(): Promise<HTMLElement>;
+    accept(): Promise<HTMLElement | undefined>;
     /**
      * Reject cookies consent.
      */
-    reject(): Promise<HTMLElement>;
+    reject(): Promise<HTMLElement | undefined>;
     /**
-     * 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.
      */
-    open(): Promise<HTMLElement>;
-    private getStoredConsentChoice;
+    open(): Promise<HTMLElement | undefined>;
+    /**
+     * Move from the initial consent step to the per-category customization panel.
+     */
+    private openPreferences;
     private isRtl;
     private appendCookiesSettingsLink;
+    private renderToggle;
+    private renderCategory;
+    private renderMessage;
+    /**
+     * 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.
+     */
+    private renderConsentStep;
+    /**
+     * Step 2: the per-category customization panel.
+     */
+    private renderPreferencesStep;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -577,15 +577,15 @@ export namespace Components {
         /**
           * Accept cookies consent.
          */
-        "accept": () => Promise<HTMLElement>;
+        "accept": () => Promise<HTMLElement | undefined>;
         /**
-          * 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.
          */
-        "open": () => Promise<HTMLElement>;
+        "open": () => Promise<HTMLElement | undefined>;
         /**
           * Reject cookies consent.
          */
-        "reject": () => Promise<HTMLElement>;
+        "reject": () => Promise<HTMLElement | undefined>;
     }
     interface SallaCountDown {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "2.14.538",
+  "version": "2.14.540",
   "license": "GPL-3.0",
   "author": "Salla Team <support@salla.dev> (https://salla.dev)",
   "bugs": {
@@ -39,7 +39,7 @@
     "start": "node src/plugins/watch-utilities.js & stencil build --dev --watch --serve --secure",
     "watch": "npm run start",
     "test": "stencil test --spec --coverage",
-    "test:ci": "SPEC_CI=true stencil test --spec",
+    "test:ci": "SPEC_CI=true stencil test --spec --maxWorkers=2",
     "test.spec": "stencil test --spec",
     "test.e2e": "stencil test --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
@@ -82,9 +82,9 @@
   },
   "dependencies": {
     "@googlemaps/markerclusterer": "2.6.2",
-    "@salla.sa/applepay": "2.14.538",
-    "@salla.sa/twilight": "2.14.538",
-    "@salla.sa/twilight-tailwind-theme": "2.14.538",
+    "@salla.sa/applepay": "2.14.540",
+    "@salla.sa/twilight": "2.14.540",
+    "@salla.sa/twilight-tailwind-theme": "2.14.540",
     "@salla.sa/ui-address-autocomplete-widget": "1.2.1",
     "@salla.sa/ui-google-map-render": "1.2.1",
     "@types/node": "^20.4.8",
@@ -105,5 +105,5 @@
     "vanilla-lazyload": "^17.8.5",
     "vanilla-picker": "^2.12.2"
   },
-  "gitHead": "ecc669b4fab0447f825a89d050523ad6091fe813"
+  "gitHead": "8e995b7ea843750d5881fa383ddd9f33d1261658"
 }

package/dist/twilight/p-BWIa_6im.js

@@ -1,9 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import{d as e}from"./p-B8_UK_fg.js";function t(e,t){return t.forEach((function(t){t&&"string"!=typeof t&&!Array.isArray(t)&&Object.keys(t).forEach((function(n){if("default"!==n&&!(n in e)){var i=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,i.get?i:{enumerable:!0,get:function(){return t[n]}})}}))})),Object.freeze(e)}var n,i,E={exports:{}},r=n?E.exports:(n=1,E.exports=(i=function(e){var t=e.addFilter,n=e.utils,i=n.Type,E=n.isString,r=n.replaceInString,T=n.guesstimateMimeType,_=n.getExtensionFromFilename,u=n.getFilenameFromURL,o=function(e,t){return e.some((function(e){return/\*$/.test(e)?(n=e,(/^[^/]+/.exec(t)||[]).pop()===n.slice(0,-2)):e===t;var n}))},a=function(e,t,n){if(0===t.length)return!0;var i=function(e){var t="";if(E(e)){var n=u(e),i=_(n);i&&(t=T(i))}else t=e.type;return t}(e);return n?new Promise((function(E,r){n(e,i).then((function(e){o(t,e)?E():r()})).catch(r)})):o(t,i)};return t("SET_ATTRIBUTE_TO_OPTION_MAP",(function(e){return Object.assign(e,{accept:"acceptedFileTypes"})})),t("ALLOW_HOPPER_ITEM",(function(e,t){var n=t.query;return!n("GET_ALLOW_FILE_TYPE_VALIDATION")||a(e,n("GET_ACCEPTED_FILE_TYPES"))})),t("LOAD_FILE",(function(e,t){var n=t.query;return new Promise((function(t,i){if(n("GET_ALLOW_FILE_TYPE_VALIDATION")){var E=n("GET_ACCEPTED_FILE_TYPES"),T=n("GET_FILE_VALIDATE_TYPE_DETECT_TYPE"),_=a(e,E,T),u=function(){var e,t=E.map((e=n("GET_FILE_VALIDATE_TYPE_LABEL_EXPECTED_TYPES_MAP"),function(t){return null!==e[t]&&(e[t]||t)})).filter((function(e){return!1!==e})),T=t.filter((function(e,n){return t.indexOf(e)===n}));i({status:{main:n("GET_LABEL_FILE_TYPE_NOT_ALLOWED"),sub:r(n("GET_FILE_VALIDATE_TYPE_LABEL_EXPECTED_TYPES"),{allTypes:T.join(", "),allButLastType:T.slice(0,-1).join(", "),lastType:T[T.length-1]})}})};if("boolean"==typeof _)return _?t(e):u();_.then((function(){t(e)})).catch(u)}else t(e)}))})),{options:{allowFileTypeValidation:[!0,i.BOOLEAN],acceptedFileTypes:[[],i.ARRAY],labelFileTypeNotAllowed:["File is of invalid type",i.STRING],fileValidateTypeLabelExpectedTypes:["Expects {allButLastType} or {lastType}",i.STRING],fileValidateTypeLabelExpectedTypesMap:[{},i.OBJECT],fileValidateTypeDetectType:[null,i.FUNCTION]}}},"undefined"!=typeof window&&void 0!==window.document&&document.dispatchEvent(new CustomEvent("FilePond:pluginloaded",{detail:i})),i)),T=t({__proto__:null,default:e(r)},[r]);
-/*!
- * FilePondPluginFileValidateType 1.2.9
- * Licensed under MIT, https://opensource.org/licenses/MIT/
- * Please visit https://pqina.nl/filepond/ for details.
- */export{T as f}

package/dist/twilight/p-c22173bf.entry.js

@@ -1,4 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import{r as t,h as e,H as s,a as i}from"./p-B8_UK_fg.js";const a=class{constructor(e){t(this,e),this.isVisible=!0,this.isMobile=!1,this.mobileBreakpoint=768,this.mobileQueryHandler=t=>this.isMobile=t.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",(t=>this.appendCookiesSettingsLink(t))),Salla.storage.get("cookies-consent")&&(this.isVisible=!1)}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=void 0}async accept(){return this.selectedConsent="accepted",this.isVisible=!1,Salla.event.emit("salla-cookies-bar::accepted"),Salla.storage.set("cookies-consent","accepted"),this.host}async reject(){return this.selectedConsent="rejected",this.isVisible=!1,Salla.event.emit("salla-cookies-bar::rejected"),Salla.storage.set("cookies-consent","rejected"),this.host}async open(){return this.selectedConsent=this.getStoredConsentChoice(),this.isVisible=!0,this.host}getStoredConsentChoice(){const t=Salla.storage.get("cookies-consent");return"accepted"===t||"rejected"===t?t:"rejected"}isRtl(){return Salla.config.get("theme.is_rtl",!0)}appendCookiesSettingsLink(t){const e=Salla.config.get("store.features")?.includes("website-cookies");if(!e||!t?.withCookiePreferences||"footer"!==t?.source)return;const s="#cookies-settings",i=t?.menus.some((t=>t?.url===s));i||(t.menus=[...t.menus,{id:"cookies-settings",order:null,title:Salla.lang.get("common.cookies.settings"),url:s,target:"_self",is_by_form_builder:!1,children:[],image:null,callback:()=>Salla.event.emit("salla-cookies-bar::open")}])}render(){return this.isVisible?e(s,null,e("div",{dir:this.isRtl()?"rtl":"ltr",class:"s-cookies-bar fixed bottom-0 inset-x-0 z-50 bg-white p-4"},e("div",{class:"s-cookies-bar-content flex flex-col justify-center gap-6 max-w-screen-xl mx-auto px-4"},e("p",{class:"s-cookies-bar-message text-sm font-medium leading-relaxed text-gray-500 m-0"},this.messageLabel,Salla.config.get("policy_url")&&e("a",{href:Salla.config.get("policy_url"),target:"_blank",class:"s-cookies-bar-link text-primary ms-1"},this.linkLabel)),e("div",{class:"s-cookies-bar-actions flex flex-row gap-2 shrink-0"},e("salla-button",{class:"s-cookies-bar-btn--accept "+("rejected"===this.selectedConsent?"s-cookies-bar-btn--active":""),color:"primary",fill:"rejected"===this.selectedConsent?"solid":"outline",type:"button",size:this.isMobile?"small":"medium",onClick:()=>this.accept()},this.acceptLabel),e("salla-button",{class:"s-cookies-bar-btn--reject "+("accepted"===this.selectedConsent?"s-cookies-bar-btn--active":""),color:"accepted"===this.selectedConsent?"primary":void 0,fill:"accepted"===this.selectedConsent?"solid":"outline",type:"button",size:this.isMobile?"small":"medium",onClick:()=>this.reject()},this.rejectLabel))))):e(s,null)}get host(){return i(this)}};a.style="/*!twlt*/:host{display:block;overflow:visible}.s-cookies-bar{box-shadow:0 0 20px 4px rgba(0, 0, 0, 0.15)}.s-cookies-bar-btn--active{box-shadow:0 0 0 2px rgba(0, 0, 0, 0.08)}.visible{visibility:visible}.fixed{position:fixed}.inset-x-0{left:0px;right:0px}.bottom-0{bottom:0px}.z-50{z-index:50}.m-0{margin:0px}.mx-auto{margin-left:auto;margin-right:auto}.ms-1{margin-inline-start:0.25rem}.flex{display:flex}.max-w-screen-xl{max-width:1280px}.shrink-0{flex-shrink:0}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.gap-6{gap:1.5rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.leading-relaxed{line-height:1.625}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-primary{color:var(--color-primary)}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.outline{outline-style:solid}";export{a as salla_cookies_bar}