@salla.sa/twilight-components 2.14.401 → 2.14.403

package/dist/collection/assets/images/prize-image.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="77" fill="none" viewBox="0 0 57 57"><rect width="56.3" height="55.9" x=".4" y=".2" fill="#FFF5E5" rx="27.9"/><g clip-path="url(#a)"><path fill="#EE9D0D" d="M16.7 27.5h17.5v12.2a1 1 0 0 1-1 1H17.7a1 1 0 0 1-1-1V27.5Z"/><path fill="#C7830B" d="M34.2 27.8v6l-6.8-6.3H34l.3.3Z"/><path fill="#C7830B" d="M34.2 32.3v1.5l-1.6-1.5h1.6Z"/><path fill="#EA2B2D" d="m29.9 15.8-.3.1a2.4 2.4 0 0 0-1.4 1.5l-.2.8-.4.2a2.4 2.4 0 0 0-1.1 1.4l4.2 3.9L33 21l.2-2.9a2.4 2.4 0 0 0-3.3-2.4ZM41.1 26.3v.2a2.4 2.4 0 0 1-1.5 1.6l-.7.3-.2.3a2.4 2.4 0 0 1-1.3 1.3l-4.2-4 2.4-2.5 2.9-.3a2.4 2.4 0 0 1 2.6 3.1Z"/><path fill="#CB2527" d="M23.7 27.5h3.5v13.1h-3.5V27.5Z"/><path fill="#EA2B2D" d="M16.7 32.3h17.5v3.5H16.7v-3.5Z"/><path fill="#CB2527" d="M34.2 32.3v1.5l-1.6-1.5h1.6Z"/><path fill="#EE9D0D" d="M25.3 18.7 38.6 31a1 1 0 0 1 0 1.4l-2.3 2.4-14.7-13.7 2.3-2.5a1 1 0 0 1 1.4 0Z"/><path fill="#CB2527" d="m30.3 23.4 3.2 3-3 3.2-3.2-3 3-3.2ZM31.8 22.8a.4.4 0 0 1-.3-.1l-.3-.4A5.9 5.9 0 0 1 30 18a.4.4 0 0 1 .9 0 5 5 0 0 0 1 3.7l.3.3a.4.4 0 0 1-.4.7Z"/><path fill="#EA2B2D" d="M30.7 23.7c-1.9.7-3.8 1-5.7.9h-1.1l1.9 1.7-.6 1.9 1.8-.6c1.7-.5 3.2-1.4 4.6-2.5l.3-.2-1.2-1.2Z"/><path fill="#CB2527" d="M37.8 26.4c-1.1 0-2.3-.3-3.2-1l-.4-.2a.4.4 0 0 1 0-.8.4.4 0 0 1 .5 0l.3.3a5 5 0 0 0 3.7.7.4.4 0 1 1 .2 1 6 6 0 0 1-1 0Z"/><path fill="#EA2B2D" d="M33.2 26c-.5 2-.7 3.9-.5 5.8l.1 1.1-1.9-1.8-1.8.7.4-1.8c.4-1.7 1.2-3.3 2.2-4.8l.2-.3 1.3 1.2Z"/><path fill="#6699CE" d="M21.5 17.4a.9.9 0 1 0 0-1.7.9.9 0 0 0 0 1.7Z"/><path fill="#FAA6B2" d="M16.7 27.5a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z"/><path fill="#A6DEFF" d="M18.4 17.9a.4.4 0 0 1-.4-.3v-.1a1.4 1.4 0 0 0-1.3-1 .4.4 0 0 1-.2-.8h.2a2.3 2.3 0 0 1 2.1 1.5.4.4 0 0 1-.4.7ZM20.6 25.6h-.2v-.1a1 1 0 0 0-1.1 0 .4.4 0 0 1-.5-.8 1.8 1.8 0 0 1 2 0 .4.4 0 0 1-.2.9Z"/><path fill="#EEB436" d="m17.6 18.6 1.3 1.2 1.8-.4-.7 1.7.9 1.6-1.8-.2-1.2 1.3-.4-1.8-1.7-.7 1.6-.9.2-1.8ZM23 26.6l-.5 1.8 1.2 1.3-1.8.2-1 1.5-.6-1.7-1.8-.4 1.4-1.1-.2-1.9 1.6 1 1.6-.7Z"/><path fill="#F72D2F" d="m33.2 26-2.5-2.3L33 21a4 4 0 0 1 2.6 2.4l-2.4 2.6Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M15.8 15.7h25.4v25H15.8z"/></clipPath></defs></svg>

package/dist/collection/collection-manifest.json

@@ -9,6 +9,7 @@
     "components/salla-alert/salla-alert.js",
     "components/salla-app-install-alert/salla-app-install-alert.js",
     "components/salla-apps-icons/salla-apps-icons.js",
+    "components/salla-badge/salla-badge.js",
     "components/salla-booking-field/salla-booking-field.js",
     "components/salla-bottom-alert/salla-bottom-alert.js",
     "components/salla-breadcrumb/salla-breadcrumb.js",
@@ -30,6 +31,7 @@
     "components/salla-datetime-picker/salla-datetime-picker.js",
     "components/salla-delivery-promise/salla-delivery-promise.js",
     "components/salla-drawer/salla-drawer.js",
+    "components/salla-edit-order-button/salla-edit-order-button.js",
     "components/salla-file-upload/salla-file-upload.js",
     "components/salla-filters/salla-filters.js",
     "components/salla-filters-widget/salla-filters-widget.js",
@@ -44,7 +46,16 @@
     "components/salla-login-modal/salla-login-modal.js",
     "components/salla-loyalty/salla-loyalty-prize-item.js",
     "components/salla-loyalty/salla-loyalty.js",
+    "components/salla-loyalty-program/salla-loyalty-banner.js",
+    "components/salla-loyalty-program/salla-loyalty-hero.js",
+    "components/salla-loyalty-program/salla-loyalty-panel.js",
+    "components/salla-loyalty-program/salla-loyalty-point.js",
     "components/salla-loyalty-program/salla-loyalty-program.js",
+    "components/salla-loyalty-program/salla-loyalty-reward.js",
+    "components/salla-loyalty-program/salla-reward-action.js",
+    "components/salla-loyalty-program/salla-reward-card.js",
+    "components/salla-loyalty-program/salla-reward-details.js",
+    "components/salla-loyalty-program/salla-reward-exchange.js",
     "components/salla-maintenance-alert/salla-maintenance-alert.js",
     "components/salla-map/salla-map.js",
     "components/salla-menu/salla-menu.js",

package/dist/collection/components/salla-badge/salla-badge.js

@@ -0,0 +1,117 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h } from "@stencil/core";
+import { cva } from "class-variance-authority";
+const badge = cva('s-badge-base', {
+    variants: {
+        size: {
+            xs: 's-badge-xs',
+            sm: 's-badge-sm',
+            md: 's-badge-md',
+        },
+        bg: {
+            transparent: 's-badge-transparent',
+            light: 's-badge-light',
+            'primary-100': 's-badge-primary-100',
+        },
+        color: {
+            black: 's-badge-black',
+            'primary-900': 's-badge-color-primary-900',
+        },
+    },
+});
+export class SallaBadge {
+    constructor() {
+        /**
+         * The size of the badge
+         */
+        this.size = 'sm';
+        /**
+         * The text color of the badge
+         */
+        this.color = 'black';
+        /**
+         * The background color of the badge
+         */
+        this.bg = 'light';
+    }
+    render() {
+        return (h("div", { key: '9d81a7c592a57a533e2b8a48f015e2f9e796be51', class: badge({ size: this.size, bg: this.bg, color: this.color }) }, h("slot", { key: '999e75ec14a8346d84dbfc5122c448999d4fc481' })));
+    }
+    static get is() { return "salla-badge"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xs' | 'sm' | 'md'",
+                    "resolved": "\"md\" | \"sm\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'sm'"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "'black' | 'primary-900'",
+                    "resolved": "\"black\" | \"primary-900\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text color of the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'black'"
+            },
+            "bg": {
+                "type": "string",
+                "attribute": "bg",
+                "mutable": false,
+                "complexType": {
+                    "original": "'transparent' | 'light' | 'primary-100'",
+                    "resolved": "\"light\" | \"primary-100\" | \"transparent\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The background color of the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'light'"
+            }
+        };
+    }
+}

package/dist/collection/components/salla-booking-field/salla-booking-field.js

@@ -148,7 +148,7 @@ export class SallaBookingField {
         return (h("span", { class: "s-booking-field-reservations-time" }, h("i", { class: "s-booking-field-reservations-icon", innerHTML: TimeIcon }), h("span", null, reservation.from_timestamp, " - ", reservation.to_timestamp)));
     }
     render() {
-        return (h(Host, { key: '04c9e3dc3dc825bd6905221d858c260f7ca34748' }, h("div", { key: '07ec38cec1bd1798640dd7ea9592bb3b17d945c6', class: "s-booking-field-main" }, this.option.required || this.reservations.length > 0 ? h("div", { class: "s-booking-field-price" }, h("span", { innerHTML: salla.money(this.option.price) })) : '', h("salla-button", { key: '6b71889cfc0429d15c466a6f194df31549f09786', class: "s-booking-field-book-now", size: "small", loaderPosition: "center", fill: "outline", onClick: event => this.openBookingModal(event, false) }, h("span", { key: 'a16f8db6f52c7751ea605efcae04057ca0dc5b61', class: "s-booking-field-book-now-content" }, h("span", { key: '95f6086a599bcc620c87ece6c6ae9620dba15581', innerHTML: BookingTime }), this.reservations.length ? this.editLabel : this.bookNowLabel))), this.reservations.length > 0 && (h("div", { key: 'b3615100bbfff3d98d0ac99145aaf53449790c94', class: "s-booking-field-reservations" }, this.reservations.map((reservation, index) => (h("div", { key: index, class: "s-booking-field-reservations-item" }, this.renderReservationDate(reservation), this.renderReservationTime(reservation)))))), h("input", { key: '126f14f2e520b8696bc7450e209bad30b267878b', class: "s-hidden", name: this.option.name, required: this.option.required, value: JSON.stringify(this.reservations) === '[]' ? '' : JSON.stringify(this.reservations), ref: reservations => this.reservationsInput = reservations }), this.iframeReady && this.bookingModal()));
+        return (h(Host, { key: '9a65e86d8c731ea7538ae930d73c63a0fba342d6' }, h("div", { key: 'fbac1a9dfdf76f36405db4dff611fd9baa47870b', class: "s-booking-field-main" }, this.option.required || this.reservations.length > 0 ? h("div", { class: "s-booking-field-price" }, h("span", { innerHTML: salla.money(this.option.price) })) : '', h("salla-button", { key: '190495f3a42496aa9d14da129363e6ff83e788ac', class: "s-booking-field-book-now", size: "small", loaderPosition: "center", fill: "outline", onClick: event => this.openBookingModal(event, false) }, h("span", { key: '7db20f2888bc865d87545804a2f609f7d07e4dc2', class: "s-booking-field-book-now-content" }, h("span", { key: '05f6f331e311f79e5a61a7b6e197e24334bdb5d4', innerHTML: BookingTime }), this.reservations.length ? this.editLabel : this.bookNowLabel))), this.reservations.length > 0 && (h("div", { key: 'f54c13f40c3109f5d3249361ac299451151909cf', class: "s-booking-field-reservations" }, this.reservations.map((reservation, index) => (h("div", { key: index, class: "s-booking-field-reservations-item" }, this.renderReservationDate(reservation), this.renderReservationTime(reservation)))))), h("input", { key: '5d147e4832a2b14ed614152efefa35769e0c52ba', class: "s-hidden", name: this.option.name, required: this.option.required, value: JSON.stringify(this.reservations) === '[]' ? '' : JSON.stringify(this.reservations), ref: reservations => this.reservationsInput = reservations }), this.iframeReady && this.bookingModal()));
     }
     static get is() { return "salla-booking-field"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-bottom-alert/salla-bottom-alert.js

@@ -124,9 +124,9 @@ export class SallaBottomAlert {
     }
     render() {
         const hasTemplate = this.template && typeof this.template === 'object' && Object.keys(this.template).length > 0;
-        return (h(Host, { key: 'e5f273d72875760e30d99d419b247137583bc450', class: `s-bottom-alert-wrapper ${hasTemplate ? 's-bottom-alert-wrapper-with-template' : ''}` }, hasTemplate && (h("div", { key: '1db37d7c67aae449f41a9a3ed83489b2a0653cef', class: "s-bottom-alert-logo-section" }, h("img", { key: '18701cd3d807042b4d852f283d43a6855282f791', src: "https://cdn.salla.network/images/logo/logo-light.svg", alt: "Salla", class: "s-bottom-alert-logo" }), h("span", { key: '66bb3f9b3c00aee5c2694d5ddb142e753ae7fa1a', class: "s-bottom-alert-logo-text" }, this.readyStores))), h("div", { key: '01d47c9ec38370b83bdb3fdc29291f55e1b3aa42', class: "s-bottom-alert-content" }, h("div", { key: '5380873bf9d393c0fa18da196e1bfb675a8c9c9b', class: "flex items-center gap-2" }, h("div", { key: '882382de35a7c9a767e2eb90305c8a973d01ac21', class: "s-bottom-alert-icon" }, this.icon ? h("i", { class: this.icon }) : h("i", { innerHTML: infoIcon })), h("div", { key: 'dfbaa427fd4e8b755a479e0b5459422e44a95f59', class: "s-bottom-alert-message" }, this.message ? (this.message) : hasTemplate ? (h("span", { class: "flex flex-wrap items-center gap-1" }, this.defaultMessage, h("span", { class: {
+        return (h(Host, { key: 'fd021792f85aa7bb528909614dcb5c3b12d6d00a', class: `s-bottom-alert-wrapper ${hasTemplate ? 's-bottom-alert-wrapper-with-template' : ''}` }, hasTemplate && (h("div", { key: '7b7adc3efe5c3b50d468c280d8b5bedddb73bb4b', class: "s-bottom-alert-logo-section" }, h("img", { key: '1dbfdc8baefb71635772bdad548fb626bae7627b', src: "https://cdn.salla.network/images/logo/logo-light.svg", alt: "Salla", class: "s-bottom-alert-logo" }), h("span", { key: 'b4b372c13427f9753023ff642c38489d724e6820', class: "s-bottom-alert-logo-text" }, this.readyStores))), h("div", { key: '8cef155a60f7d3a5847da0b4ef090bb8fc8ae928', class: "s-bottom-alert-content" }, h("div", { key: '106ba8bcfcc56d3042d78bd102888b10bf70587d', class: "flex items-center gap-2" }, h("div", { key: '718695a0f5d376bcc056747074f006ceccf1f98b', class: "s-bottom-alert-icon" }, this.icon ? h("i", { class: this.icon }) : h("i", { innerHTML: infoIcon })), h("div", { key: '465bee0bb124482ec169925917fd15f3ce472fba', class: "s-bottom-alert-message" }, this.message ? (this.message) : hasTemplate ? (h("span", { class: "flex flex-wrap items-center gap-1" }, this.defaultMessage, h("span", { class: {
                 's-bottom-alert-message-highlight': true,
-            }, "aria-label": "Developer" }, this.salla), h("span", { innerHTML: salla.money(this.template.price) }))) : (this.defaultMessage))), this.type !== 'banner' && (h("div", { key: '327ef4b5ecdab7d994418c033a78c2531eb28de5', class: hasTemplate ? 's-bottom-alert-actions-group' : 's-bottom-alert-action' }, hasTemplate ? (this.loading ? (h("salla-loading", { size: "20" })) : (h("div", { class: "s-bottom-alert-actions-group-container" }, h("a", { class: "s-bottom-alert-action-link", onClick: () => this.handleAction() }, this.actionLabel || this.moreDetailsLabel), this.templateData?.link ? (h("button", { type: "button", class: "s-bottom-alert-action-purchase-button", onClick: () => window.open(this.templateData?.link, '_blank') }, this.buyTheTemplate)) : null))) : (h("salla-button", { href: this.actionUrl, size: "medium", onClick: () => this.handleAction(), width: "normal" }, this.actionLabel || this.defaultActionLabel)))), this.type === 'popup' && this.popup())));
+            }, "aria-label": "Developer" }, this.salla), h("span", { innerHTML: salla.money(this.template.price) }))) : (this.defaultMessage))), this.type !== 'banner' && (h("div", { key: 'd860b7fba86b1273a0d257c3ec082d44f01340cc', class: hasTemplate ? 's-bottom-alert-actions-group' : 's-bottom-alert-action' }, hasTemplate ? (this.loading ? (h("salla-loading", { size: "20" })) : (h("div", { class: "s-bottom-alert-actions-group-container" }, h("a", { class: "s-bottom-alert-action-link", onClick: () => this.handleAction() }, this.actionLabel || this.moreDetailsLabel), this.templateData?.link ? (h("button", { type: "button", class: "s-bottom-alert-action-purchase-button", onClick: () => window.open(this.templateData?.link, '_blank') }, this.buyTheTemplate)) : null))) : (h("salla-button", { href: this.actionUrl, size: "medium", onClick: () => this.handleAction(), width: "normal" }, this.actionLabel || this.defaultActionLabel)))), this.type === 'popup' && this.popup())));
     }
     static get is() { return "salla-bottom-alert"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-bullet-delivery/salla-bullet-delivery.js

@@ -224,6 +224,9 @@ export class SallaBulletDelivery {
      * Closes the bullet delivery modal
      */
     async close() {
+        if (this.shouldForceNonClosable() && !this.confirming) {
+            return;
+        }
         // If submit flow is waiting and user dismissed the modal, release the pending gate.
         if (this.cartSubmitConfirmationPending && !this.confirming) {
             this.resolvePendingCartSubmit();
@@ -321,6 +324,17 @@ export class SallaBulletDelivery {
             return !!intent.branch_id;
         return false;
     }
+    /**
+     * Authenticated users on the cart page must select/confirm an address before
+     * they can dismiss the modal.
+     */
+    shouldForceNonClosable() {
+        if (this.isGuestUser())
+            return false;
+        if (!Salla.url.is_page("cart"))
+            return false;
+        return !this.hasCompleteIntentForLoggedInUser();
+    }
     shouldPromptIncompleteIntentThisSession() {
         const storage = this.getShownStorage();
         return (this.hasIncompleteUserAddressIntent() &&
@@ -1498,7 +1512,7 @@ export class SallaBulletDelivery {
         const activeTabView = this.activeTab === "branch" && this.supportsPickup
             ? this.renderPickupTab()
             : this.renderDeliveryTab();
-        return (h("div", null, h("div", { class: "s-bullet-delivery-header" }, h("h2", { class: "s-bullet-delivery-title" }, Salla.lang.get("blocks.home.select_the_receiving_method")), h("p", { class: "s-bullet-delivery-subtitle" }, Salla.lang.get("pages.checkout.delivery_pickup_availability_hint"))), this.renderTabs(), this.showCartWillBeClearedBanner &&
+        return (h("div", null, h("div", { class: "s-bullet-delivery-header" }, h("h2", { class: "s-bullet-delivery-title" }, this.activeTab === 'address' ? Salla.lang.get('blocks.home.add_address_for_order_delivery') : Salla.lang.get('blocks.home.how_prefer_to_receive_order')), h("p", { class: "s-bullet-delivery-subtitle" }, this.activeTab === 'address' ? Salla.lang.get('blocks.home.products_available_for_delivery_shown_while_shopping') : Salla.lang.get('blocks.home.products_available_for_delivery_or_pickup_shown_while_shopping'))), this.renderTabs(), this.showCartWillBeClearedBanner &&
             this.renderAlert(Salla.lang.get("blocks.scope.empty_cart_warning")), this.allocationOutOfCoverageMessage &&
             this.renderAllocationOutOfCoverageAlert(), activeTabView, !isAddressEmptyState && this.renderFooter()));
     }
@@ -1623,9 +1637,9 @@ export class SallaBulletDelivery {
         }
     }
     render() {
-        return (h(Host, { key: '751566707c28202b5ccf4ecde28bfb09550ae886', class: "s-bullet-delivery" }, h("salla-modal", { key: '25a18755aa4aa85b55f08bb73829e30833ca5328', ref: (modal) => {
+        return (h(Host, { key: 'cf0925eb55a712125e446547e211224815a00efe', class: "s-bullet-delivery" }, h("salla-modal", { key: '5f9a14196b4f15cf6a6ed738253cb1e0f52d6dee', ref: (modal) => {
                 this.modal = modal;
-            }, isClosable: !this.isRequired, class: "s-bullet-delivery-modal", isLoading: this.loading, width: "sm" }, this.loading ? (this.renderSkeleton()) : (h("div", { class: "s-bullet-delivery-inner" }, this.viewMode === "main" && this.renderMainView(), this.viewMode === "add-address" && this.renderAddAddressForm())))));
+            }, isClosable: !this.isRequired && !this.shouldForceNonClosable(), class: "s-bullet-delivery-modal", isLoading: this.loading, width: "sm" }, this.loading ? (this.renderSkeleton()) : (h("div", { class: "s-bullet-delivery-inner" }, this.viewMode === "main" && this.renderMainView(), this.viewMode === "add-address" && this.renderAddAddressForm())))));
     }
     componentDidLoad() {
         // Mark component as ready

package/dist/collection/components/salla-cart-coupons/salla-cart-coupons.js

@@ -236,7 +236,7 @@ export class SallaCartCoupons {
             : `${salla.lang.get('pages.cart.expires_after')} ${coupon.remaining_days} ${salla.lang.get('pages.cart.day')}`)), coupon.minimum_amount && parseFloat(coupon.minimum_amount.amount) > 0 && (h("div", { class: "s-cart-coupons-minimum" }, salla.lang.get('pages.cart.minimum'), " ", h("span", { innerHTML: salla.money(coupon.minimum_amount.amount, coupon.minimum_amount.currency) })))), h("div", { class: "s-cart-coupons-action" }, isEligible ? salla.lang.get('pages.cart.save_coupon') : salla.lang.get('pages.cart.coupon_not_compatible'))))));
     }
     render() {
-        return (h(Host, { key: 'f3f3d943ab2c1a6488a1da02d2cc031dbc88b482' }, h("div", { key: 'abf88828017041b19a6c54ba2f99e6c246bd8d04', class: "s-cart-coupons-wrapper" }, h("div", { key: 'c2946579a7cca935722997229f50ede603acb8b2', class: "s-cart-coupons-input-section" }, h("label", { key: '50042d827c86daf853babd4e41ba3a920aceda9d', htmlFor: "coupon-input", class: "s-cart-coupons-coupon-label" }, salla.lang.get('pages.cart.have_coupon')), h("div", { key: '4b01047727bd3a83f6cfbac37221e7732076248f', class: "s-cart-coupons-coupon-input-container" }, h("input", { key: '555108f68b7a60c618d9a904905ef321cd274c7a', type: "text", id: "coupon-input", name: "coupon", class: `form-input ${this.couponError ? 's-coupon-input-error' : ''}`, placeholder: salla.lang.get('pages.cart.coupon_placeholder'), value: this.couponInputValue, disabled: !!this.currentCoupon || this.isApplying, ref: el => this.couponInputRef = el, "aria-label": salla.lang.get('pages.cart.apply_coupon') }), h("salla-button", { key: '0416bbaf029f7d8951ca6a419cdc676ae50ee792', ref: el => this.couponButtonRef = el, class: `s-cart-coupons-coupon-button ${this.currentCoupon ? 's-cart-coupons-coupon-button-remove' : 's-cart-coupons-coupon-button-apply'}`, color: this.currentCoupon ? 'danger' : 'primary', loading: this.isApplying, "loader-position": "center", onClick: () => this.handleCouponButtonClick() }, this.currentCoupon ? (h("i", { class: "sicon-cancel" })) : (h("span", null, salla.lang.get('pages.cart.save_coupon'))))), this.couponError && (h("span", { key: 'f7c77e8676cb07b4820b571dbd8ee25dca79a1b1', class: "s-cart-coupons-coupon-error" }, this.couponError))), this.availableCoupons && this.availableCoupons.length > 0 && (h("salla-slider", { key: 'daee9c6705de734d5f81ff86d92ad6952b5a7332', type: "carousel", showControls: false, class: "s-cart-coupons-slider" }, h("div", { key: '5d5ef30a6ff7f7c2b406cc5cec6622c2f028d17e', slot: "items" }, this.availableCoupons.map(coupon => this.renderCouponCard(coupon))))))));
+        return (h(Host, { key: '95e65153874488ea19570a11d82eca2a054dd12f' }, h("div", { key: '1bbcebf392b3cbe9a771d2fead982c6d467920a2', class: "s-cart-coupons-wrapper" }, h("div", { key: 'f43ff91fbe2661f7c533d1ded01910bf9cdd04bc', class: "s-cart-coupons-input-section" }, h("label", { key: '47b768adf09859842a329174ed670e0ed6eb38e5', htmlFor: "coupon-input", class: "s-cart-coupons-coupon-label" }, salla.lang.get('pages.cart.have_coupon')), h("div", { key: '0119d436bd813f0aed13b15178644f393f23c448', class: "s-cart-coupons-coupon-input-container" }, h("input", { key: '48daad1665830075e676843c96f99af147a7272c', type: "text", id: "coupon-input", name: "coupon", class: `form-input ${this.couponError ? 's-coupon-input-error' : ''}`, placeholder: salla.lang.get('pages.cart.coupon_placeholder'), value: this.couponInputValue, disabled: !!this.currentCoupon || this.isApplying, ref: el => this.couponInputRef = el, "aria-label": salla.lang.get('pages.cart.apply_coupon') }), h("salla-button", { key: '9e01ec3c8bd3a28b5dd00d028fd8d0b29a1f0f63', ref: el => this.couponButtonRef = el, class: `s-cart-coupons-coupon-button ${this.currentCoupon ? 's-cart-coupons-coupon-button-remove' : 's-cart-coupons-coupon-button-apply'}`, color: this.currentCoupon ? 'danger' : 'primary', loading: this.isApplying, "loader-position": "center", onClick: () => this.handleCouponButtonClick() }, this.currentCoupon ? (h("i", { class: "sicon-cancel" })) : (h("span", null, salla.lang.get('pages.cart.save_coupon'))))), this.couponError && (h("span", { key: '0b46e12e0ece78bb96180004a30154cf5229c930', class: "s-cart-coupons-coupon-error" }, this.couponError))), this.availableCoupons && this.availableCoupons.length > 0 && (h("salla-slider", { key: '6df6dc30d63f8e158ce65392ae682f03d09ee014', type: "carousel", showControls: false, class: "s-cart-coupons-slider" }, h("div", { key: 'adc4343bc2f217bdcf03a769b19363a363ca1ccb', slot: "items" }, this.availableCoupons.map(coupon => this.renderCouponCard(coupon))))))));
     }
     static get is() { return "salla-cart-coupons"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-cart-summary/salla-cart-summary.js

@@ -102,7 +102,7 @@ export class SallaCartSummary {
         return cartUrl;
     }
     render() {
-        return (h(Host, { key: '918f027fd28cd25d653b8419f97223daaf22d428' }, h("a", { key: 'b74a2724ada356a01b915044d56dfb0f9953338e', class: "s-cart-summary-wrapper", href: this.getCartLink() }, h("div", { key: 'b9332fe1b66b895c1e9950efaa548f04eb053d46', id: "s-cart-icon" }, h("slot", { key: '2b5c1cf8dea4ca23a54beeb83cfad44538ca3ab7', name: "icon" }, h("i", { key: 'f3145ed4a994762441d925280a3234d78c378bef', class: "s-cart-summary-icon", innerHTML: CartIcon }))), h("span", { key: '26a78adf9b279019504e995216ea5373b6866876', class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { key: '60ad091221ed5cd3e2ac0d27ebc53ec9917ccd64', class: "s-cart-summary-content" }, this.showCartLabel && h("span", { key: '66819086b9ed7f6f21be2cd5e8baf0bc88021e40', class: "s-cart-summary-label" }, this.cartLabel), h("b", { key: 'a07c85971e50add3cdd5b51942e642d4daf19d82', class: "s-cart-summary-total", innerHTML: salla.money(this.cartSummaryTotal) })))));
+        return (h(Host, { key: '4d80eb7d5ea545740fd4c631b98297164e4afded' }, h("a", { key: 'f32a160c33514e98a35067eb8dc07aa15b7ddb9b', class: "s-cart-summary-wrapper", href: this.getCartLink() }, h("div", { key: 'b8ab102d86c3448d03403bade826d42c2fcee681', id: "s-cart-icon" }, h("slot", { key: '2dae30fcc74ef4c6e74d25f745aea0893cdb87c9', name: "icon" }, h("i", { key: 'df69ad3f3e7affe12ce26d6e16aa2e9e4670f2fc', class: "s-cart-summary-icon", innerHTML: CartIcon }))), h("span", { key: '98927818c1f6b6e7138a8f818da96054c2d44b62', class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { key: '71a40df1d13608e4c9a988ee927ae5ebf1482635', class: "s-cart-summary-content" }, this.showCartLabel && h("span", { key: '9e8e2c66c3784ccebfc4bfba5ab2554a927b172c', class: "s-cart-summary-label" }, this.cartLabel), h("b", { key: 'bbc35cf2a4e793c3cf4d1a637740683569fd306d', class: "s-cart-summary-total", innerHTML: salla.money(this.cartSummaryTotal) })))));
     }
     static get is() { return "salla-cart-summary"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-color-picker/salla-color-picker.js

@@ -198,7 +198,7 @@ export class SallaColorPicker {
         });
     }
     render() {
-        return (h(Host, { key: '2f142fd64afd5571574a7e1c40de3be16ede62e6', class: "s-color-picker-main" }, h("slot", { key: '92acdf14b2f42ac52d0a632ba6840a5dcebfa4d4', name: "widget" }, h("div", { key: '7ba074040299a91802109d0e1d2e78604e39d3a8', class: "s-color-picker-widget" }, h("div", { key: 'a6272207f79fd28e33b66e415a3e05b969ace983', class: "s-color-picker-widget-canvas", ref: dv => (this.canvas = dv) }), h("span", { key: 'e6fed242bb84fae6221cdec525658b68f7514ce7', innerHTML: ArrowDown }))), h("input", { key: '9eb1673f44e663f939124da45fec79c401736203', class: "s-hidden", name: this.name, required: this.required, value: this.color, ref: color => (this.colorInput = color) })));
+        return (h(Host, { key: '673ad2953168ffcb211a32177caf0e3ab0ef4081', class: "s-color-picker-main" }, h("slot", { key: 'e28235c30c4f5a6dd89037b1554baadc9f2f8375', name: "widget" }, h("div", { key: '23e35c42e462e4787f04960bef97f4a870496779', class: "s-color-picker-widget" }, h("div", { key: 'f196109b149e326b48121a9a265bdb35fcb9128d', class: "s-color-picker-widget-canvas", ref: dv => (this.canvas = dv) }), h("span", { key: 'b30c1542e13e7bc43d6557d997cfa5dc7656203b', innerHTML: ArrowDown }))), h("input", { key: 'd8e26156ed9cfe589200e01afb5dadbcf38227ef', class: "s-hidden", name: this.name, required: this.required, value: this.color, ref: color => (this.colorInput = color) })));
     }
     componentDidLoad() {
         if (this.canvas)

package/dist/collection/components/salla-comment-form/salla-comment-form.js

@@ -38,7 +38,7 @@ export class SallaCommentForm {
             .finally(() => this.submitBtn.stop());
     }
     render() {
-        return (h(Host, { key: '0ec765c8dd7cf28d23c4305c234cec5efd3daae1' }, !!this.canComment ? h("form", { ref: frm => this.commentForm = frm }, h("div", { class: "s-comment-form-wrapper" }, this.showAvatar ?
+        return (h(Host, { key: '2203b9f365e0658a3bc40fb0274ba9ddc0d1e040' }, !!this.canComment ? h("form", { ref: frm => this.commentForm = frm }, h("div", { class: "s-comment-form-wrapper" }, this.showAvatar ?
             h("img", { class: "s-comment-form-avatar", src: salla.config.get('user.avatar'), alt: "user avatar" }) : '', h("div", { class: "s-comment-form-content" }, h("textarea", { cols: 30, rows: 5, minlength: "4", maxlength: "500", ref: field => this.commentField = field, placeholder: this.placeholder, class: "s-comment-form-input", required: true }), h("br", null), h("div", { class: "s-comment-form-action" }, h("salla-button", { ref: btn => this.submitBtn = btn, "loader-position": 'center', onClick: () => this.submit() }, this.submitText))))) : ''));
     }
     static get is() { return "salla-comment-form"; }

package/dist/collection/components/salla-comments/salla-comment-item.js

@@ -121,15 +121,15 @@ export class SallaCommentItem {
     }
     render() {
         let isAdmin = this.comment.type == 'admin';
-        return (h(Host, { key: '3f9d4b98cff2dd49259d3386b4996b905f92d7db', class: isAdmin ? 's-comments-item-admin' : 's-comments-item' }, h("div", { key: '1348f11b2e553be483f60c5c558d3e800f050700', class: { "s-comments-item-wrapper": !isAdmin, "s-comments-item-admin-wrapper": isAdmin }, id: `s-comments-item-${this.comment.id}` }, h("div", { key: '0587afd7ae1fc27b12fc4fd2c9ef4bf9e919d04a', class: "s-comments-item-inner s-comments-flex-1" }, isAdmin && h("span", { key: '40009b2b3b9af60481d0e40d5fb919076ab43b10', class: "s-comments-item-reply-icon", innerHTML: Reply }), h("div", { key: '8f0563811445046ecf5ce3abe6ee6d7d1ec4a235', class: "s-comments-item-avatar" }, h("img", { key: '5f82bb9d3a5c4c340f37b8e48af3edce42c133f8', "data-src": this.comment?.avatar, alt: this.comment?.name, src: this.comment?.avatar, class: "s-comments-item-avatar-img lazy" })), h("div", { key: '34581ee9fddaa2f79ee933efb65c2e354010f37a', class: "s-comments-flex-1" }, h("div", { key: 'e03fc074d5ac8ddf183e3b081001e73dd62a7116', class: "s-comments-item-user-wrapper" }, h("div", { key: '6ea5e07eb9fa35d7673019628e6fde4605b74e0c', class: "s-comments-item-user-info" }, h("h3", { key: '18d7cf8c8b8125138a544bd10027ae7503f2f3a6', class: this.comment.is_pinned ? "s-comments-item-user-info-name" : "s-comments-item-user-info-name-with-margin" }, this.comment?.name), this.comment.is_pinned ?
+        return (h(Host, { key: '05b9da17f0e07e1115c87c671998e8123b8b0bb4', class: isAdmin ? 's-comments-item-admin' : 's-comments-item' }, h("div", { key: '49552e9efab0aa751db6d7051318f626f9124e5a', class: { "s-comments-item-wrapper": !isAdmin, "s-comments-item-admin-wrapper": isAdmin }, id: `s-comments-item-${this.comment.id}` }, h("div", { key: 'e795f238ee0a562675843e6da0f495512abf550c', class: "s-comments-item-inner s-comments-flex-1" }, isAdmin && h("span", { key: '05270553da039c8cdf611d7a1a0ac1ff9d5d88f2', class: "s-comments-item-reply-icon", innerHTML: Reply }), h("div", { key: 'be2ca109e89c83691d3a0a7a9e03f6e1b94fb09e', class: "s-comments-item-avatar" }, h("img", { key: '402cff5a2003bf385ae8f9f7890555ef2886de87', "data-src": this.comment?.avatar, alt: this.comment?.name, src: this.comment?.avatar, class: "s-comments-item-avatar-img lazy" })), h("div", { key: 'af7992ad18ed3d756594cf678d01c1fdd2af6cca', class: "s-comments-flex-1" }, h("div", { key: 'b11dc77d96bf83c0dddd1edaa5fb57286b5b6f55', class: "s-comments-item-user-wrapper" }, h("div", { key: 'f899a929d3e67c7898d22cf7abc56891cdf0fa7c', class: "s-comments-item-user-info" }, h("h3", { key: '9968169cbd69eb6d1d7e0b0498db03a0431d2a16', class: this.comment.is_pinned ? "s-comments-item-user-info-name" : "s-comments-item-user-info-name-with-margin" }, this.comment?.name), this.comment.is_pinned ?
             h("div", { class: "s-comments-item-pinned-icon-with-margin" }, this.PinnedIcon())
             : null, (this.comment.has_order || !!this.comment.rating) && !this.comment.is_pending && !this.hideBought ?
             h("div", { class: "s-comments-flex" }, this.comment.has_order ?
                 [h("span", { class: "s-comments-item-has-order-check-icon", innerHTML: CheckIcon }), h("span", { class: "s-comments-item-has-order-check-text" }, this.has_bought_trans, " ", this.comment.rating ? ', ' : '')] : null, !!this.comment.rating ?
                 h("span", { class: "s-comments-item-rated-widget" }, this.rated_trans) : null)
-            : null), h("p", { key: '694c2079d3379966994af7040fe4542481a53e66', class: "s-comments-item-timestamp s-ltr" }, this.getDate(this.comment.created_at?.date), h("span", { key: '734ca2eb6bf846c661007a1b9c41f22c47923b27', class: "s-comments-item-time" }, " - ", this.getTime(this.comment.created_at?.date))), !!this.comment.rating || !!this.comment.stars ?
+            : null), h("p", { key: 'cafa0be66307c6b377f90033745b939da66344c8', class: "s-comments-item-timestamp s-ltr" }, this.getDate(this.comment.created_at?.date), h("span", { key: '608db7108242f10e4d649bb23d1382f49227aeb8', class: "s-comments-item-time" }, " - ", this.getTime(this.comment.created_at?.date))), !!this.comment.rating || !!this.comment.stars ?
             h("salla-rating-stars", { size: "mini", class: "s-comments-item-stars", value: this.comment.rating || this.comment.stars })
-            : null), h("div", { key: '45e32a0759536f8c9e8bc8b823d50c931bdd1e23', class: "s-comments-item-content" }, h("p", { key: '9edf2cdfd489f77214d7a1ecae8a99943dfd4ece', innerHTML: this.comment.content }), this.allowAttachImages && h("div", { key: 'bbba6c62c4d13289137c634f5413880dfa572ab4', class: "s-comments-item-images" }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "", onClick: () => this.modal.open() }))), h("salla-modal", { key: 'cd5c48b8cf3e1c9457a2fb60a42859cbd91aa996', ref: modal => this.modal = modal, width: "sm" }, h("salla-slider", { key: '304bc9417e6d7fd0e310127dce4e56a1c6ce00ea', id: `s-comments-item-${this.comment.id}-images`, class: "s-comments-item-images-slider", type: "thumbs", "auto-height": true, showControls: this.comment.images.length > 1 ? true : false, "show-thumbs-controls": "false" }, h("div", { key: '50401766737293c42fa7ba3b351b6db736fd92eb', slot: 'items' }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "" })))), h("div", { key: '6b9a50da0b67497dfae21b52044850329d8712b5', slot: "thumbs" }, this.comment.images.map((image, index) => (h("div", { class: "s-comments-item-images-slider-thumb" }, h("img", { key: index, src: image, alt: "" })))))))), this.allowLikes && !isAdmin && !!this.comment.id && salla.url.is_page('product.single') ? h("salla-button", { ref: el => this.likeBtn = el, class: `s-comments-item-like-btn ${this.likedComments.includes(this.comment.id) ? 'liked' : ''}`, loaderPosition: 'center', fill: 'outline', size: 'small', onClick: () => this.toggleLike() }, h("span", null, this.helpfulLabel, " ", this.likesCount > 0 ? `(${this.likesCount})` : ''), h("span", { innerHTML: ThumbsUp })) : '', this.comment.is_pending ?
+            : null), h("div", { key: '9b86497c3791f7e890b560207068de4ca38d6e60', class: "s-comments-item-content" }, h("p", { key: '82433f42c6b0ee29cdd42725ce1aba4dd62e67d8', innerHTML: this.comment.content }), this.allowAttachImages && h("div", { key: '9a1bd14eb18f637588f152b8842d4637b9a6e7c1', class: "s-comments-item-images" }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "", onClick: () => this.modal.open() }))), h("salla-modal", { key: 'be260096b68a1a58889bed09c68b3a2c75adefa6', ref: modal => this.modal = modal, width: "sm" }, h("salla-slider", { key: '8f78ee0ab370e4f99eb68fe1afa4491c4a6a0b80', id: `s-comments-item-${this.comment.id}-images`, class: "s-comments-item-images-slider", type: "thumbs", "auto-height": true, showControls: this.comment.images.length > 1 ? true : false, "show-thumbs-controls": "false" }, h("div", { key: 'eea6149852a409f2e25b8f9ec4375087e1c9beb8', slot: 'items' }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "" })))), h("div", { key: '9f693fcd5afc5e443e0ff590d6e7e386746e2a98', slot: "thumbs" }, this.comment.images.map((image, index) => (h("div", { class: "s-comments-item-images-slider-thumb" }, h("img", { key: index, src: image, alt: "" })))))))), this.allowLikes && !isAdmin && !!this.comment.id && salla.url.is_page('product.single') ? h("salla-button", { ref: el => this.likeBtn = el, class: `s-comments-item-like-btn ${this.likedComments.includes(this.comment.id) ? 'liked' : ''}`, loaderPosition: 'center', fill: 'outline', size: 'small', onClick: () => this.toggleLike() }, h("span", null, this.helpfulLabel, " ", this.likesCount > 0 ? `(${this.likesCount})` : ''), h("span", { innerHTML: ThumbsUp })) : '', this.comment.is_pending ?
             h("span", { class: "s-comments-item-pending-text" }, this.waiting_approval_trans) : null))), !!this.getReplies().length && !isAdmin ?
             this.getReplies().map((reply) => {
                 return h("div", null, h("salla-comment-item", { comment: reply }));

package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js

@@ -117,7 +117,7 @@ export class SallaConditionalFields {
         });
     }
     render() {
-        return (h(Host, { key: '92e48eb8f628ef8a2cde7e0480bbfe8fbb36f139' }, h("slot", { key: '439b9056ff00196e8e8b89ee8251afd4db7e2b64' })));
+        return (h(Host, { key: 'eb080f6f4321fbdfdb8a1aca7a8c7d877de54cca' }, h("slot", { key: 'b898259ac1a7fc5a89844f9228bd0f4a3f86d867' })));
     }
     static get is() { return "salla-conditional-fields"; }
     static get elementRef() { return "host"; }

package/dist/collection/components/salla-count-down/salla-count-down.js

@@ -228,7 +228,7 @@ export class SallaCountDown {
         return this.renderCountDown();
     }
     render() {
-        return (h(Host, { key: '5061e1fab03966fc62e46d4529c4ee07ed01df35', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
+        return (h(Host, { key: '16f2244e2e1b828cd80a186528726a089146acff', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
     }
     static get is() { return "salla-count-down"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-datetime-picker/salla-datetime-picker.js

@@ -204,7 +204,7 @@ export class SallaDatetimePicker {
         }
     }
     render() {
-        return h("div", { key: '184743feaf2af9f31cd3b5a864a86f1a561c12fd', class: "s-datetime-picker" }, h("input", { key: '1736e88363b379f872490641168f49090e976e03', type: "datetime", name: this.name, value: this.value, required: this.required, disabled: this.disabled, placeholder: this.placeholder, class: "s-datetime-picker-input", ref: (el) => this.dateInput = el }));
+        return h("div", { key: 'cc5f2ca3d3915e90dad91d56b8d18bbdf7be56ce', class: "s-datetime-picker" }, h("input", { key: '05789794f19e151956ceebbfd0419c268c552d5a', type: "datetime", name: this.name, value: this.value, required: this.required, disabled: this.disabled, placeholder: this.placeholder, class: "s-datetime-picker-input", ref: (el) => this.dateInput = el }));
     }
     async componentDidLoad() {
         // Load flatpickr before initializing

package/dist/collection/components/salla-edit-order-button/salla-edit-order-button.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/salla-edit-order-button/salla-edit-order-button.js

@@ -0,0 +1,99 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, Host } from "@stencil/core";
+export class SallaEditOrderButton {
+    constructor() {
+        this.order = null;
+        this.loading = true;
+    }
+    async componentWillLoad() {
+        await salla.onReady();
+        await this.loadOrder();
+    }
+    async onOrderIdChange() {
+        this.loading = true;
+        this.order = null;
+        await this.loadOrder();
+    }
+    get paymentUrl() {
+        return this.order?.customer_editing?.payment_url;
+    }
+    async loadOrder() {
+        const orderId = this.orderId || salla.config.get('page.id');
+        if (!orderId) {
+            this.loading = false;
+            return;
+        }
+        try {
+            const response = await salla.order.api.getDetails(orderId);
+            this.order = response?.data ?? response ?? null;
+        }
+        catch (error) {
+            salla.logger?.warn?.('[salla-edit-order-button] failed to fetch order details', error);
+            this.order = null;
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    renderEditButton() {
+        return (h("salla-count-down", { prefixText: salla.lang.getWithDefault('pages.orders.edit_within', 'يمكنك التعديل خلال'), buttonHref: this.order?.edit_url, buttonText: salla.lang.getWithDefault('pages.orders.edit_order', 'تعديل الطلب'), buttonIcon: "sicon-edit", date: this.order?.editable_until, horizontal: true, autoSegments: true, withButton: true, labeled: false, size: "sm", color: "primary" }));
+    }
+    render() {
+        if (this.loading || !this.order)
+            return null;
+        if (this.order?.is_editable) {
+            return h(Host, null, this.renderEditButton());
+        }
+        if (!this.paymentUrl)
+            return null;
+        return (h(Host, null, h("salla-button", { href: this.paymentUrl, color: "primary", size: "small" }, h("i", { class: "sicon-wallet" }), salla.lang.getWithDefault('pages.orders.pay_difference', 'دفع فارق المبلغ'))));
+    }
+    static get is() { return "salla-edit-order-button"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-edit-order-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-edit-order-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orderId": {
+                "type": "any",
+                "attribute": "order-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The order ID to fetch details for. Falls back to the current page order ID."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "order": {},
+            "loading": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "orderId",
+                "methodName": "onOrderIdChange"
+            }];
+    }
+}

package/dist/collection/components/salla-file-upload/salla-file-upload.js

@@ -307,11 +307,11 @@ export class SallaFileUpload {
         }
     }
     render() {
-        return (h(Host, { key: '978e89fe8713e6b3db913ed8fb3c5d09f6caf705', class: {
+        return (h(Host, { key: '9291bd55eba4dd8f7fdac0440821341b4b833ace', class: {
                 "s-file-upload": true,
                 "s-file-upload-profile-image": this.profileImage,
                 "s-file-upload-multiple": this.allowMultiple,
-            } }, h("input", { key: 'acf6197d43b79a80e7a69219afda29271a86d4eb', type: "file", name: this.name, value: this.value, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.maxFilesCount)) : '', h("input", { key: 'b8624b0fcaba14f14640acce0a28c12feb78701b', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.value, ref: input => this.hiddenInput = input })));
+            } }, h("input", { key: 'd203f426a3e4ac253ed6e6f96fd495620a87ee47', type: "file", name: this.name, value: this.value, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.maxFilesCount)) : '', h("input", { key: '865690093e0d86e01a801a50a0d32263ab6adc29', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.value, ref: input => this.hiddenInput = input })));
     }
     componentDidLoad() {
         let files = this.getFiles();

package/dist/collection/components/salla-filters/salla-filters.js

@@ -187,7 +187,7 @@ export class SallaFilters {
         this.applyFilters();
     }
     render() {
-        return h(Host, { key: 'f3c454fc20472dca6fe646c9121028a2c045808f' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
+        return h(Host, { key: 'b41c36d8512dcac97dbe3a75e5c1e0373673913d' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
                 this.handleOptionChange(event, option, value);
             } })), this.filters?.length ? h("div", { class: "s-filters-footer" }, h("salla-button", { color: 'gray', fill: 'outline', onClick: () => this.resetFilters() }, this.reset)) : '');
     }

package/dist/collection/components/salla-filters-widget/salla-filters-widget.js

@@ -163,12 +163,12 @@ export class SallaFiltersWidget {
         return h("span", { class: "s-filters-option-name" }, label);
     }
     render() {
-        return (h(Host, { key: 'e93cfb9f1f6daeb8a2121ccb36a3cf135a55e902', class: "s-filters-widget-container" }, h("h3", { key: 'd5ef45d78e0119e2ac997ded417e310c0a797c34', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: 'fe4df56fad0d290395d78588456fb7d00a20ed43' }, this.option.label), h("span", { key: 'c961f86b5e06437dfdd145e164da5fe326500032', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: '7cf1ed1b562bf16acc481f682965567d8bc1813c', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: '275427371f48fdfc8ef8b80b9d3e11fa247f7d7a', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '473c082ed9f7415beba445d36a121027eaadbbe1', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: 'e45654731cdd801345acc5b3311d9ddab3020035', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '5ae673157a4b579a000901b04db8e375a52565e7' }), this.option.type !== FilterOptionTypes.RANGE
+        return (h(Host, { key: '033902f6f4ac283b8b501a175b6fdec7c585d68a', class: "s-filters-widget-container" }, h("h3", { key: '3f50c5d20c5563d291979dea0db9f69c72750d3f', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '4e7f263fc35260f641fb9d0291b26c09f9743a36' }, this.option.label), h("span", { key: '6658e86d8a637ac537f285a210d3d8f0e9279f9f', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: '3a172b737bb88d2db6b43391cce2b02198fce61e', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: '91f8f4a00dfd05086ed8a385117dfc1d8eabea4c', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '87a25343561917b823b3b258aa9b8c8a1cb2a71a', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: '282b6b78bd7659134151aad4ec94c4cc2838c01c', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: 'fae3cf9b337d658bb6a9bee553cb487ecbd1be5f' }), this.option.type !== FilterOptionTypes.RANGE
             ? this.renderFilterOption(this.option)
             : h("salla-price-range", { onChanged: (event) => {
                     this.changed.emit(event.detail);
                 }, ref: price => this.priceRange = price, filtersData: this.filtersData, option: this.option })), this.withLoadMore && (!this.searchQuery || this.filteredCount > this.initialItemCount) &&
-            h("a", { key: '8ec08429d8fb31b338e6f9f9cf455b5ba2155cb8', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
+            h("a", { key: '005eedbbf498d86eb735231b754a8abf0aca77b5', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
     }
     static get is() { return "salla-filters-widget"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-gifting/salla-gifting.js

@@ -542,7 +542,7 @@ export class SallaGifting {
     }
     render() {
         return [
-            h("div", { key: 'ea8b7581fc816b2984ec7a8c9f0d5bfb30710577' }, h("salla-list-tile", { key: '44e4b948c467ecbec4934f894af3e88a01567338', class: this.generateClass() }, h("div", { key: 'c36ccc48ff4209d2aad05123981c8efad4de8642', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: 'd5cfd335582f2af620ef50ae92b431b3fdf84b71' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '9623168820eefb63c833dd14c68c1dc20afe1cd1', slot: "subtitle" }, h("div", { key: 'e2fda7dc68054c0f382f61d74a578589b565a544' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'e888e024772c0ef848e4a4113b218bb4e05d78db', slot: "action" }, h("salla-button", { key: 'd443bfd1f5925299a4e0510fae8fc175d390b55a', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '8df23b83891ee2abf644cde76675ca6bb796db79', name: "widget-btn-content" }, h("div", { key: '6b5153a1f1b9d5e127093c3fcc96e2a0fa4954f4', class: "s-gifting-widget-action-content" }, h("span", { key: '41a7f2e88c8046d7211abf5d7fc9d3f533c02292', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '45ea8eac19ca9cccf37cd34d8f84211e6172cd45' }, this.sectionBtnText)))))), h("salla-modal", { key: '5bd076c54c4d072886671653e536c649763785b1', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '378d12f388bd0627355af5b4e57929c00ae28044', slot: "loading" }, h("div", { key: '1b738d4b461a9ebe3a5184f4de727bb1b4b45890', class: "s-gifting-skeleton" }, h("div", { key: '660c901f477536e68d2a3bacd028438c9726b968', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '46f8e45a0a38c10784fc5f3505092e65ed2bba3a', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '09b3356d736e5eb46bb51df2e2fa539dc9d8c99f', class: "s-gifting-modal-title" }, h("div", { key: 'cc8cb7dece64c65d5891e32e49588316e9009f6c', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '41b30274a655babdd0c9e26e74dc3f0bdd4a2aea', height: '15px', width: '150px' })))), h("div", { key: 'b241162827a085279f646452a151d6483a37cc8e', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '5ac15a8e94b50ea03cd033375b08f9e4406a7e17', height: '10px', width: '150px' }), h("salla-skeleton", { key: '697e157e475df0cb71b79e3752019f522ed847a3', height: '230px' }), h("salla-skeleton", { key: '8a5e586c059b765f6425d7060a18e8d799be3c4f', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'e1ee17daef6904b8302b0f4437e99b221bd6b236', height: '30px' }), h("salla-skeleton", { key: '9dfbca00f18a37348eb83021ef4fec073685fe7d', height: '40px' })))), h("slot", { key: 'da2c687a186ed115acee04cc683eff3a6a73168f', name: "header" }), !!this.hasError ?
+            h("div", { key: 'f20cc2c84e987b34bb862f72a8f639894ed4150e' }, h("salla-list-tile", { key: 'c52aa5e975f9ed1707c3175fa66109f447749ee7', class: this.generateClass() }, h("div", { key: '2bf7065f32132dde95dacfdea44e34c08cc4e61c', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '7a9a70b6841a708c322f5bb729e940e4da823261' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'c346f2baa8e6a1adf9b0f89e9b50d236e65116cb', slot: "subtitle" }, h("div", { key: '26c908af9687b0c77554054212f5c8251dc45bf3' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'f91bf3811c383773425af74941a2067e2f62dbb7', slot: "action" }, h("salla-button", { key: '0639c4b9cc4d81f300f6b087e1c10815b1610c75', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '06567fa7406ae6502e8f3211ecab6161c4a7e397', name: "widget-btn-content" }, h("div", { key: 'f895900d17947b006f6aef4695b855eba4737ed2', class: "s-gifting-widget-action-content" }, h("span", { key: 'bd3170b8efa2a0c95f61718afd69e5473adae20a', innerHTML: GiftSharing }), " \u00A0", h("span", { key: 'cdc3d1df35ad0e7334bc289f9fff2d312d709724' }, this.sectionBtnText)))))), h("salla-modal", { key: 'a98b913100edfa92156baeee766f6141818ebd8b', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '6b438c581e600cbcfeb5260bae8371a1fbefa29c', slot: "loading" }, h("div", { key: 'ada9e9bb0355755eade9ff7846334cb5ae093e6f', class: "s-gifting-skeleton" }, h("div", { key: '11d2e41b6acb933f5b006cc9f0b0b46470892c6a', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '141be7d6aa83fed682f8ab6a3708597dbb4dba11', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '65eba6244b5507397c8e50ef40f695e7eebe0b96', class: "s-gifting-modal-title" }, h("div", { key: '0f2488d19d2de0a728377b9f475b70073f6f196a', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'b648340418099246c8b83b308f116412fdb6cbc9', height: '15px', width: '150px' })))), h("div", { key: '8255e53b49f572ef3c4485cf7e84540dac019f89', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '0b05db8e76a9a53032b1643d8c4e223b8b641e30', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'c585bf04433e46ce8e89d9bfc3402faf4cfbb21a', height: '230px' }), h("salla-skeleton", { key: '0c09063b73e3aecb6a1879cdc93b60a6bcb9b2cc', height: '10px', width: '150px' }), h("salla-skeleton", { key: '88f55e5ffded2f784002b44e49f3ab2d22a7c067', height: '30px' }), h("salla-skeleton", { key: '6e1edd3b031f051ec24149ec690d2e4f04f9c557', height: '40px' })))), h("slot", { key: 'bff6a067b10a31c39f22e18c6bdf5a60f56ef116', name: "header" }), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
                 :
                     [
@@ -562,7 +562,7 @@ export class SallaGifting {
                             h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverCityFieldLabel), h("select", { name: "city", "aria-label": salla.lang.get('blocks.buy_as_gift.select_city'), class: "s-form-control", onChange: (event) => this.handleReceiverCity(event), disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId) }, h("option", { value: "", selected: true }, this.loadingCities ? salla.lang.get('common.elements.loading') : this.selectCity), this.gift?.cities?.map((city) => (h("option", { value: city.id }, city.name)))), this.errors && this.errors['receiver.city_id'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.isPhysical() &&
                             h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo)), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, h("a", { href: "#!", innerHTML: LeftArrow, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: '20793a5a50c708c93be79df033e43a36e615d075', name: "footer" })))
+                    ], h("slot", { key: '4cad8b174ab427e6f75b77357efc20e54d791ba4', name: "footer" })))
         ];
     }
     static get is() { return "salla-gifting"; }

package/dist/collection/components/salla-hook/salla-hook.js

@@ -11,7 +11,7 @@ export class SallaHook {
         this.host.before(element);
     }
     render() {
-        return h(Host, { key: '618467f6911198a5cbf4270694544575e585af27' });
+        return h(Host, { key: '2aa8c92dee7e62785fa0f45d967912ae8d6f96c0' });
     }
     async componentDidLoad() {
         // Register this component for hooks system, already on it logic to run componentDidLoad trigger

package/dist/collection/components/salla-list-tile/salla-list-tile.js

@@ -26,7 +26,7 @@ export class SallaListTile {
         };
     }
     render() {
-        return (h(Host, { key: 'e1528afcea1eda05a5ce206e95791e7611d24dd0' }, h("a", { key: '749a73c76d68ad36f1a6609ada69778662d56566', class: this.generateClass(), href: this.href || "#", target: this.target, "aria-label": "List Tile Link" }, h("div", { key: '7bfd448f86790b2afe0b7a5b8a5460c3b2be66ee', class: "s-list-tile-item-icon" }, h("slot", { key: '383e28a8832483e8ecc61e4f48a3ff1fe5db1038', name: 'icon' })), h("div", { key: 'c42bf126a9ff4014a4e2d85ff12b41d1a88a0e03', class: "s-list-tile-item-content" }, h("div", { key: '18a4a9ebd39e3a710f70dc33554d24e3c2850e53', class: "s-list-tile-item-title" }, h("slot", { key: '7211d627511bf2448cf161f40cc82b1822dd1e7a', name: 'title' })), h("div", { key: '044a7d76e05841f484387c7ed299107f33c9bc21', class: "s-list-tile-item-subtitle" }, h("slot", { key: 'df131034f1c5434722543e25552caed142794d55', name: "subtitle" }))), h("div", { key: '37abe0abab720da11cd55660578ec256c062e763', class: "s-list-tile-item-action" }, h("slot", { key: 'fcac02da17981ef4c6fa3cea50c551e3010352d9', name: 'action' })))));
+        return (h(Host, { key: '1f5e8a06d1c1aa0df00b09eec0c0a1efbf590748' }, h("a", { key: 'f9b772a03f745b07e2456cd74c73ab695f3754ff', class: this.generateClass(), href: this.href || "#", target: this.target, "aria-label": "List Tile Link" }, h("div", { key: 'e90d46a29df8ea298489deba9b88bc6f84ebd5aa', class: "s-list-tile-item-icon" }, h("slot", { key: 'a5c40e495d05b5d45bae8ed133eca034f439368d', name: 'icon' })), h("div", { key: '2ded5a53f567c8eddb05d24a5f59875d3a7ac1ac', class: "s-list-tile-item-content" }, h("div", { key: '80e6962e698223c893b40a4a62d8ce67aa3ab27c', class: "s-list-tile-item-title" }, h("slot", { key: '87f95d3ae826904a55e0e4724340f55344371789', name: 'title' })), h("div", { key: '7fc838f33b9e65ca8c9f11bce4b506aad7d7ecb1', class: "s-list-tile-item-subtitle" }, h("slot", { key: 'f936a3770d59d3b56287927a447df9c8fa697310', name: "subtitle" }))), h("div", { key: 'e974fd4591921468f4a882370303709718ef6e64', class: "s-list-tile-item-action" }, h("slot", { key: '9d2adb70f0c75b18474f0f05c99000327e081ce8', name: 'action' })))));
     }
     static get is() { return "salla-list-tile"; }
     static get originalStyleUrls() {