@salla.sa/twilight-components 2.14.357 → 2.14.358

package/dist/components/salla-login-modal2.js

@@ -0,0 +1,363 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './salla-loading2.js';
+import { d as defineCustomElement$1 } from './salla-modal2.js';
+
+const sallaLoginModalCss = "iframe{-moz-transition:height 0.3s;-ms-transition:height 0.3s;-o-transition:height 0.3s;-webkit-transition:height 0.3s;transition:height 0.3s;width:100%}";
+
+const SallaLoginModal = /*@__PURE__*/ proxyCustomElement(class SallaLoginModal extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`
+         */
+        this.isMobileAllowed = true;
+        /**
+         * Does the merchant require registration with email & mobile
+         */
+        this.isEmailRequired = false;
+        /**
+         * Once the api verify success, it will be login the customer in web pages
+         */
+        this.supportWebAuth = true;
+        /**
+         * Reload after a successful login
+         */
+        this.withoutReload = false;
+        /**
+         * The source of opening login modal
+         */
+        this.source = '';
+        this.htmlElement = document.documentElement;
+        this.messages = [];
+        this.isClosable = true;
+        this.iframeLoaded = false;
+        this.scrolling = 'no';
+        this.direction = document.dir;
+        this.canRenderIframe = false;
+        salla.event.on('login::open', (data) => {
+            if (!this.isEmailAllowed && !this.isMobileAllowed) {
+                salla.logger.warn('Please enable atleast one login type to use this component.');
+                return;
+            }
+            this.source = data?.source ?? false;
+            this.withoutReload = data?.withoutReload ?? this.withoutReload;
+            this.open(data);
+            this.openModal();
+        });
+        salla.event.on('modal::close', (data) => {
+            if (this.iframe)
+                this.sendMessageToIframe({
+                    source: 'login',
+                    type: 'modal_closed',
+                    data,
+                });
+        });
+        salla.onReady(() => {
+            this.api = salla.config.get('store.api');
+            this.storeId = salla.config.get('store.id');
+        });
+    }
+    componentDidLoad() {
+        window.addEventListener('message', (event) => {
+            if (event.data.source != "login") {
+                return;
+            }
+            if (!this.inline && !this.canRenderIframe) {
+                return;
+            }
+            salla.log(`salla-account:: recived an event`, event.data);
+            let action = event.data?.type?.replace('iframe::', '');
+            let value = event.data.message;
+            //if we need skip some events
+            // if (action === 'dispatchEvent' && [].includes(value.event)) {
+            //     return;
+            // }
+            // if (action == "dispatchEvent") {
+            //   return this.host.dispatchEvent(new CustomEvent(value.name, {
+            //     cancelable: true,
+            //     bubbles: true,
+            //     detail: value.payload
+            //   }));
+            // }
+            if (action == 'ready') {
+                if (value.isPasskeyPage) {
+                    this.createPassKey.postMessage({ source: "login", type: "init_passkey_page", data: {
+                            token: salla.storage.get('token'),
+                            store_id: salla.config.get('store.id'),
+                            locale: salla.config.get('user.language_code'),
+                            redirect: salla.config.get('store.url')
+                        } }, salla.config.get('login.url'));
+                    return;
+                }
+                this.handleIframeReadyAction();
+                return;
+            }
+            if (action == 'height') {
+                return (this.iframe.height = value?.height + 'px');
+            }
+            //share the iframe storage, so login too
+            if (action == "storage") {
+                return this.handleIframeStorageAction(value);
+            }
+            // if (action == "success") {
+            //   this.isClosable = true;
+            //   confetti.startConfetti(1200, 50, 150);
+            // }
+            if (action == "scrolling") {
+                this.scrolling = value;
+                this.isClosable = false;
+                return;
+            }
+            if (action == "direction") {
+                return document.dir = this.direction = value ? "rtl" : "ltr";
+            }
+            if (action == 'notify') {
+                return salla.notify[value.type](value.message);
+            }
+            // temporary condition until we handle both cases separately
+            if (action == 'authenticated' || action == 'authenticated_web_auth') {
+                !value?.withoutClose && this.close();
+                return salla.auth.api.handlAfterAuthenticatedResponse(value, this.supportWebAuth)
+                    .then(() => !(value?.withoutReload || this.withoutReload) && setTimeout(() => window.location.reload(), 1000));
+            }
+            if (action == 'dispatchEvent' && value.event == 'auth::verified') {
+                salla.log('Ignored dispatchEvent `auth::verified` from iframe');
+                //we don't need to fire this event because it have listeners for it, and already it's fired/firing from `salla.auth.api.handlAfterAuthenticatedResponse` already we are handling it
+                return;
+            }
+            if (action == 'dispatchEvent') {
+                return salla.event.emit(value.event, ...value.payload);
+            }
+            if (action == 'reload') {
+                if (value?.withClose)
+                    this.modal.close();
+                return window.location.reload();
+            }
+            if (action === 'open_page') {
+                return window.location.href = value.url;
+            }
+            if (action === 'open_passkey_page') {
+                this.createPassKey = window.open(`${salla.config.get('login.url')}/create-passkey`);
+                return;
+            }
+            if (action === 'guest-checkout') {
+                return this.handleGuestCheckout();
+            }
+            if (action == "close") {
+                this.close();
+            }
+        });
+        this.observeDarkModeChanges();
+        setTimeout(() => Salla.event.emit('salla-login::ready'), 1);
+    }
+    /**
+     * Open login component
+     */
+    async open(_event = null) {
+        /**
+         * This is a workaround until we remove all the user objet from twig files
+         * When the user is already login, let's reload the page
+         */
+        if (!salla.config.isGuest()) {
+            if (!this.withoutReload) {
+                return location.reload();
+            }
+            // Fire an event if withoutReload is true
+            return;
+        }
+        return this.modal.open();
+    }
+    close() {
+        Salla.event.emit('salla-login::closing');
+        this.modal.close();
+        this.iframeLoaded = false;
+        this.canRenderIframe = false;
+        this.host.dispatchEvent(new CustomEvent('salla-login:closed', {
+            cancelable: true,
+            bubbles: true,
+            detail: null
+        }));
+        Salla.event.emit('salla-login::closed');
+    }
+    handleIframeReadyAction() {
+        this.sendInitMessage();
+        this.sendMessageToIframe({
+            source: 'login',
+            type: 'width',
+            data: document.body.clientWidth,
+        });
+    }
+    observeDarkModeChanges() {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.attributeName === 'class') {
+                    this.sendMessageToIframe({
+                        source: 'login',
+                        type: 'darkMode',
+                        data: { isDark: this.htmlElement.classList.contains('dark') ? true : false },
+                    });
+                }
+            });
+        });
+        // observing the HTML element for attribute changes
+        observer.observe(this.htmlElement, { attributes: true });
+    }
+    async handleIframeStorageAction(value) {
+        let token, cartUserId = salla.storage.get('cart.user_id');
+        let withCartReset = false;
+        Object.entries(value).filter(item => !Salla.storage.get(item[0]))
+            .forEach(([key, value]) => {
+            salla.log('Shared storage from accounts domain', key, value);
+            let cleanedValue = (typeof value === 'string') ? value?.replace(/^"|"$/g, '') : value;
+            salla.storage.set(key, cleanedValue);
+            if (key === 'token') {
+                token = cleanedValue;
+            }
+            if (key === 'user' && cartUserId && (cleanedValue.id !== cartUserId)) {
+                withCartReset = true;
+            }
+        });
+        if (token) {
+            this.modal.close();
+            Salla.auth.event.tokenFetched(token);
+            try {
+                await Salla.api.cart.assign();
+            }
+            catch (err) {
+                Salla.log('Error on assign after handle iframe', err);
+            }
+            withCartReset && Salla.cart.reset();
+            try {
+                !Salla.auth.api.isSessionless() && await Salla.auth.api.request('auth/jwt');
+                if (Salla.auth.api.canRedirect()) {
+                    setTimeout(() => window.location.reload(), 100);
+                }
+                else {
+                    // Match handlAfterAuthenticatedResponse order: loggedIn (fetches profile + emits) -> afterUserLogin
+                    // Note: auth::verified is omitted here since cart.assign() already handles cart sync above
+                    await Salla.auth.event.loggedIn({ data: { token } }).then(() => Salla.auth.api.afterUserLogin());
+                }
+            }
+            catch (err) {
+                this.modal.open();
+                Salla.log('Error on request auth/jwt after handle iframe', err);
+            }
+            return;
+        }
+        withCartReset && Salla.cart.reset();
+    }
+    sendMessageToIframe(message) {
+        if (!this.iframe)
+            return;
+        return this.iframe.contentWindow.postMessage(message, '*');
+    }
+    sendInitMessage() {
+        let headers = this.headers;
+        try {
+            headers = typeof headers === 'string' ? JSON.parse(headers) : headers;
+        }
+        catch (error) {
+            console.error('Failed to parse headers!', this.headers, error);
+            headers = undefined;
+        }
+        const storageObject = {
+            user: salla.storage.get('user'),
+            s_translations: salla.storage.get('s_translations'),
+            token: salla.storage.get('token'),
+        };
+        storageObject.user || (delete storageObject.user);
+        storageObject.s_translations || (delete storageObject.s_translations);
+        storageObject.token || (delete storageObject.token);
+        this.sendMessageToIframe({
+            source: "login",
+            type: "init",
+            data: {
+                id: this.storeId,
+                lang: salla.lang.locale,
+                isDark: this.htmlElement.classList.contains('dark') ? true : false,
+                apiUrl: this.api?.replace(/\/+$/, ''),
+                supportWebAuth: this.supportWebAuth,
+                withoutReload: this.withoutReload,
+                inline: this.inline,
+                settings: salla.config.all(),
+                headers: headers,
+                storage: storageObject,
+            }
+        });
+    }
+    async handleGuestCheckout() {
+        this.modal.close();
+        if (salla.config.isGuest()) {
+            await salla.api.cart.syncGuestCart();
+            return salla.cart.submit(true);
+        }
+    }
+    openModal() {
+        if (!this.canRenderIframe) {
+            this.canRenderIframe = true;
+        }
+        this.modal.open();
+    }
+    render() {
+        if (this.inline) {
+            return this.getLoginDom();
+        }
+        return (h("salla-modal", { class: "s-login-modal", ref: modal => this.modal = modal, width: "xs" }, this.getLoginDom()));
+    }
+    getLoginDom() {
+        if (!this.canRenderIframe) {
+            return;
+        }
+        return h(Fragment, null, h("iframe", { src: `${salla.config.get('login.url', 'https://accounts.salla.com')}?src=${this.source}`, title: "Salla Login", class: "hide-scroll", loading: 'lazy', ref: iframe => { this.iframe = iframe; }, allow: "publickey-credentials-get; publickey-credentials-create", scrolling: this.scrolling, frameborder: "0", width: "100%" }));
+    }
+    get host() { return this; }
+    static get style() { return sallaLoginModalCss; }
+}, [0, "salla-login-modal", {
+        "isEmailAllowed": [1028, "is-email-allowed"],
+        "isMobileAllowed": [1028, "is-mobile-allowed"],
+        "isEmailRequired": [1028, "is-email-required"],
+        "supportWebAuth": [516, "support-web-auth"],
+        "inline": [516],
+        "storeId": [1032, "store-id"],
+        "api": [1],
+        "headers": [1025],
+        "withoutReload": [1028, "without-reload"],
+        "source": [32],
+        "messages": [32],
+        "isClosable": [32],
+        "iframeLoaded": [32],
+        "scrolling": [32],
+        "direction": [32],
+        "canRenderIframe": [32],
+        "open": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-login-modal", "salla-loading", "salla-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-login-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaLoginModal);
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaLoginModal as S, defineCustomElement as d };

package/dist/components/salla-user-menu.js

@@ -9,6 +9,9 @@ import { W as WishListIcon } from './star.js';
 import { C as Cancel } from './cancel.js';
 import { R as Rate } from './star2.js';
 import { l as loyaltyProgramIcon } from './gift.js';
+import { d as defineCustomElement$4 } from './salla-loading2.js';
+import { d as defineCustomElement$3 } from './salla-login-modal2.js';
+import { d as defineCustomElement$2 } from './salla-modal2.js';
 
 var OrderIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -90,6 +93,10 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
          * To Make the dropdown menu relative to parent element or not
          */
         this.relativeDropdown = false;
+        /**
+         * To auto mount the login modal or not
+         */
+        this.autoMount = false;
         this.onClickOutside = () => {
             this.opened = false;
         };
@@ -103,56 +110,12 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
             loyalty_program: loyaltyProgramIcon,
             profile: UserCircle
         };
-        // salla.auth.event.onLoggedIn(() => {
-        //   this.is_loggedIn = true
-        // })
-        salla.lang.onLoaded(() => {
-            this.notifications = salla.lang.get('common.titles.notifications');
-            this.orders = salla.lang.get('common.titles.orders');
-            this.pending_orders = salla.lang.get('common.titles.pending_orders');
-            this.wishlist = salla.lang.get('common.titles.wishlist');
-            this.profile = salla.lang.get('common.titles.profile');
-            this.hello = salla.lang.get('pages.checkout.hello');
-            this.rating = salla.lang.get('common.titles.rating');
-            this.wallet = salla.lang.get('common.titles.wallet');
-            this.settings = salla.lang.get('common.titles.settings');
-            this.loyalty_program = salla.lang.get('pages.loyalty_program.loyalty_points');
-            this.logout = salla.lang.get('blocks.header.logout');
-        });
-        Salla.onReady(() => {
-            if (salla.config.isGuest()) {
-                return;
-            }
-            this.is_loggedIn = true;
-            /**
-             * Get Fresh Notifications In These Cases:
-             * - is notification page, if user already changed the status of his orders (to reset notification badge)
-             * - is pending orders page, if user already changed the status of his orders (to reset orders badge)
-             * - is profile page, in case user changed his name or avatar, we need to update it
-             * - half hour is passed from the last user data fetched
-             *
-             * //todo:: update the data in the storage in customer pages
-             * //todo:: cover two requests in customer pages
-             * //todo:: make sure to run this only after token is set
-             */
-            const shouldFetchProfile = !this.inline &&
-                (salla.url.is_page('customer.notifications') ||
-                    salla.url.is_page('customer.orders.index.pending') ||
-                    salla.url.is_page('customer.profile') ||
-                    (Date.now() - (salla.storage.get('user.fetched_at') || 0)) / 1000 / 60 > 30);
-            if (shouldFetchProfile) {
-                this.fetchFreshProfile();
-            }
-            else {
-                salla.event.on('profile::info.fetched', res => {
-                    this.updateProfileState(res);
-                });
-            }
-        });
     }
     async componentWillLoad() {
         await salla.onReady();
         await salla.lang.onLoaded();
+        this.loadTranslations();
+        this.initiate();
         Salla.event.on('api::token.injected', (token) => this.profileUrl = this.buildProfileUrl(token));
         this.sallaAccountEnabled = Salla.config.get('store.features')?.includes('salla-account');
         this.items = this.sallaAccountEnabled ? { ...this.items, settings: SettingstIcon } : this.items;
@@ -176,6 +139,56 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
         this.triggerSlot = trigger.innerHTML;
         trigger.innerHTML = this.replaceParams(trigger.innerHTML);
     }
+    loadTranslations() {
+        this.notifications = Salla.lang.get('common.titles.notifications');
+        this.orders = Salla.lang.get('common.titles.orders');
+        this.pending_orders = Salla.lang.get('common.titles.pending_orders');
+        this.wishlist = Salla.lang.get('common.titles.wishlist');
+        this.profile = Salla.lang.get('common.titles.profile');
+        this.hello = Salla.lang.get('pages.checkout.hello');
+        this.rating = Salla.lang.get('common.titles.rating');
+        this.wallet = Salla.lang.get('common.titles.wallet');
+        this.settings = Salla.lang.get('common.titles.settings');
+        this.loyalty_program = Salla.lang.get('pages.loyalty_program.loyalty_points');
+        this.logout = Salla.lang.get('blocks.header.logout');
+    }
+    initiate() {
+        if (Salla.config.isGuest()) {
+            return this.autoMountLoginModal();
+        }
+        this.is_loggedIn = true;
+        /**
+         * Get Fresh Notifications In These Cases:
+         * - is notification page, if user already changed the status of his orders (to reset notification badge)
+         * - is pending orders page, if user already changed the status of his orders (to reset orders badge)
+         * - is profile page, in case user changed his name or avatar, we need to update it
+         * - half hour is passed from the last user data fetched
+         *
+         * //todo:: update the data in the storage in customer pages
+         * //todo:: cover two requests in customer pages
+         * //todo:: make sure to run this only after token is set
+         */
+        const shouldFetchProfile = !this.inline &&
+            (salla.url.is_page('customer.notifications') ||
+                salla.url.is_page('customer.orders.index.pending') ||
+                salla.url.is_page('customer.profile') ||
+                (Date.now() - (salla.storage.get('user.fetched_at') || 0)) / 1000 / 60 > 30);
+        if (shouldFetchProfile) {
+            return this.fetchFreshProfile();
+        }
+        salla.event.on('profile::info.fetched', res => {
+            this.updateProfileState(res);
+        });
+    }
+    autoMountLoginModal() {
+        if (!this.autoMount) {
+            return;
+        }
+        if (document.querySelector('salla-login-modal')) {
+            return;
+        }
+        Salla.hooks.mount('body:end', document.createElement('salla-login-modal'));
+    }
     fetchFreshProfile() {
         //don't request fetchFreshProfile unless token is injected into the api
         if (!salla.api.token) {
@@ -274,6 +287,7 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
         "avatarOnly": [516, "avatar-only"],
         "showHeader": [516, "show-header"],
         "relativeDropdown": [516, "relative-dropdown"],
+        "autoMount": [516, "auto-mount"],
         "accountLoading": [32],
         "opened": [32],
         "notifications": [32],
@@ -301,13 +315,28 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-user-menu"];
+    const components = ["salla-user-menu", "salla-loading", "salla-login-modal", "salla-modal"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-user-menu":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SallaUserMenu$1);
             }
             break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-login-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 defineCustomElement$1();

package/dist/esm/{filepond-BInIwZYj.js → filepond-BbukY3G5.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-DhtEPVv1.js';
+import { d as getDefaultExportFromCjs } from './index-CTOqXLNX.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-poster-DRu2Mi6P.js → filepond-plugin-file-poster-DIB4KhNs.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-DhtEPVv1.js';
+import { d as getDefaultExportFromCjs } from './index-CTOqXLNX.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-size-DO5zxC4X.js → filepond-plugin-file-validate-size-C2La5co0.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-DhtEPVv1.js';
+import { d as getDefaultExportFromCjs } from './index-CTOqXLNX.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-type-BwxMZ28-.js → filepond-plugin-file-validate-type-s5WI8DP4.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-DhtEPVv1.js';
+import { d as getDefaultExportFromCjs } from './index-CTOqXLNX.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-edit-CwEZfbKE.js → filepond-plugin-image-edit-BdW45IS3.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-DhtEPVv1.js';
+import { d as getDefaultExportFromCjs } from './index-CTOqXLNX.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-exif-orientation-B2YJJ8ni.js → filepond-plugin-image-exif-orientation-C12lmnIq.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-DhtEPVv1.js';
+import { d as getDefaultExportFromCjs } from './index-CTOqXLNX.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-preview-BdiNpvoD.js → filepond-plugin-image-preview-DC2SjiV6.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-DhtEPVv1.js';
+import { d as getDefaultExportFromCjs } from './index-CTOqXLNX.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{index-BKsC0x_d.js → index-COH2oGKJ.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-DhtEPVv1.js';
+import { d as getDefaultExportFromCjs } from './index-CTOqXLNX.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {