@salla.sa/twilight-components 2.14.556 → 2.14.558

package/dist/collection/components/salla-orders/salla-orders.css

@@ -1,12 +1,69 @@
 /*!twlt*/:host {
   display: block;
 }
+
+.s-orders-banner {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  background-color: #E6F4EA;
+}
+
+.s-orders-banner-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: #1B7F5C;
+}
+.s-orders-banner-icon svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: currentColor;
+}
+
+.s-orders-banner-text {
+  flex: 1;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #1f2937;
+}
+
+.s-orders-action-cell.s-orders-action-cell {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.s-orders-leave-review-btn .s-button-text {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.s-orders-action-cell .s-orders-status-rated {
+  margin-inline-start: auto;
+}
 .relative {
   position: relative;
 }
 .table {
   display: table;
 }
+.outline {
+  outline-style: solid;
+}
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .s-button-btn {
   position: relative;
   display: inline-flex;
@@ -68,6 +125,7 @@
   width: 1rem;
 }
 @keyframes spin {
+
   to {
     content: var(--tw-content);
     transform: rotate(360deg);
@@ -106,6 +164,7 @@
   margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
 }
 @media (min-width: 768px) {
+
   .s-orders-container > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -120,6 +179,7 @@
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
 @media (min-width: 768px) {
+
   .s-orders-mobile-title {
     display: none;
   }
@@ -128,6 +188,7 @@
   display: none;
 }
 @media (min-width: 768px) {
+
   .s-orders-reference-id {
     display: inline-block;
   }
@@ -143,6 +204,7 @@
   align-items: center;
 }
 @media (min-width: 768px) {
+
   .s-orders-copy-to-clipboard-button {
     display: none;
   }
@@ -162,6 +224,7 @@
   margin-right: 0.25rem;
 }
 @media (min-width: 768px) {
+
   .s-orders-status-container {
     margin-left: 0px;
     margin-right: 0px;
@@ -200,6 +263,30 @@
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity, 1));
 }
+.s-orders-leave-review-btn {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 700;
+  color: var(--color-primary);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+.s-orders-leave-review-btn:hover {
+  opacity: 0.7;
+}
+.s-orders-leave-review-btn:where([dir="ltr"], [dir="ltr"] *) {
+  margin-left: 1rem;
+}
+.s-orders-leave-review-btn:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: 1rem;
+}
+.s-orders-review-star-icon {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
 .s-orders-no-content {
   display: flex;
   height: 100%;
@@ -233,17 +320,45 @@
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
+.s-orders-filters {
+  margin-bottom: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+.s-orders-list-wrapper {
+  position: relative;
+}
+.s-orders-list-loading {
+  position: absolute;
+  inset: 0px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+  --tw-bg-opacity: 0.1;
+}
 .s-orders-table {
   min-width: 100%;
   border-collapse: separate;
 }
 @media (min-width: 768px) {
+
   .s-orders-table {
     margin-bottom: -0.75rem;
     --tw-border-spacing-y: 1.25rem;
     border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
   }
 }
+.s-orders-table-fetching {
+  pointer-events: none;
+  opacity: 0.4;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
 .s-orders-table-head {
   margin-bottom: 1.25rem;
   display: none;
@@ -251,6 +366,7 @@
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 @media (min-width: 768px) {
+
   .s-orders-table-head {
     display: table-header-group;
   }
@@ -296,6 +412,7 @@
   transition-duration: 500ms;
 }
 @media (min-width: 768px) {
+
   .s-orders-table-tbody-tr {
     display: table-row;
     flex-direction: row;
@@ -316,17 +433,21 @@
   font-weight: 700;
 }
 @media (min-width: 768px) {
+
   .s-orders-table-tbody-tr-td {
     height: 5rem;
     width: auto;
   }
+
   .s-orders-table-tbody-tr-td:last-child {
     text-align: end;
   }
+
   .s-orders-table-tbody-tr-td:first-child:where([dir="ltr"], [dir="ltr"] *) {
     border-top-left-radius: 0.375rem;
     border-bottom-left-radius: 0.375rem;
   }
+
   .s-orders-table-tbody-tr-td:first-child:where([dir="rtl"], [dir="rtl"] *) {
     border-top-right-radius: 0.375rem;
     border-bottom-right-radius: 0.375rem;
@@ -346,6 +467,7 @@
   padding-bottom: 0.25rem;
 }
 @media (min-width: 768px) {
+
   .s-orders-table-tbody-tr-td-content {
     padding-left: 1.5rem;
     padding-right: 1.5rem;

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

@@ -3,6 +3,21 @@
  */
 import { h } from "@stencil/core";
 import Helper from "../../Helpers/Helper";
+const FEEDBACK_STATUS_WAITING = 'waiting';
+const LANG_DEFAULTS = {
+    'pages.orders.filter_all': { ar: 'الكل', en: 'All' },
+    'pages.orders.filter_awaiting_review': { ar: 'بانتظار تقييمك', en: 'Awaiting your review' },
+    'pages.orders.leave_review': { ar: 'أضف تقييمك', en: 'Add review' },
+    'pages.orders.no_unrated_orders': { ar: 'لا توجد طلبات غير مقيَّمة', en: 'No unrated orders' },
+    'pages.orders.review_banner': {
+        ar: 'لديك طلبات بانتظار تقييمك. شارك رأيك وساعدنا على تحسين تجربتك.',
+        en: 'You have orders awaiting your review. Share your feedback and help us improve your experience.',
+    },
+    'pages.orders.review_banner_with_points': {
+        ar: 'لديك طلبات بانتظار تقييمك. قيِّمها واحصل على ما يصل إلى {{points}} نقطة ولاء.',
+        en: 'You have orders awaiting your review. Rate them and earn up to {{points}} loyalty points.',
+    },
+};
 export class SallaOrder {
     constructor() {
         this.orderNumberText = salla.lang.get('pages.thank_you.order_id');
@@ -12,7 +27,16 @@ export class SallaOrder {
         this.noOrderText = salla.lang.get('pages.orders.non_orders');
         this.load_more_text_trans = salla.lang.get('common.elements.load_more');
         this.languageCode = salla.lang.locale;
+        this.filterAllText = salla.lang.getWithDefault('pages.orders.filter_all', 'الكل');
+        this.filterAwaitingReviewText = salla.lang.getWithDefault('pages.orders.filter_awaiting_review', 'بانتظار تقييمك');
+        this.leaveReviewText = salla.lang.getWithDefault('pages.orders.leave_review', 'شارك تقييمك');
+        this.noUnratedOrdersText = salla.lang.getWithDefault('pages.orders.no_unrated_orders', 'لا توجد طلبات غير مقيَّمة');
         this.orders = [];
+        this.activeFilter = 'all';
+        this.pendingReviewCount = 0;
+        this.emptyFilterResult = false;
+        this.isFetching = false;
+        this.reviewPoints = 0;
         salla.lang.onLoaded(() => {
             this.languageCode = salla.lang.locale;
             this.orderNumberText = salla.lang.get('pages.thank_you.order_id');
@@ -31,6 +55,67 @@ export class SallaOrder {
             this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
         }
     }
+    refreshReviewLabels() {
+        this.filterAllText = salla.lang.getWithDefault('pages.orders.filter_all', 'الكل');
+        this.filterAwaitingReviewText = salla.lang.getWithDefault('pages.orders.filter_awaiting_review', 'بانتظار تقييمك');
+        this.leaveReviewText = salla.lang.getWithDefault('pages.orders.leave_review', 'شارك تقييمك');
+        this.noUnratedOrdersText = salla.lang.getWithDefault('pages.orders.no_unrated_orders', 'لا توجد طلبات غير مقيَّمة');
+    }
+    setupLoyalty() {
+        // ? Flags
+        const can_rate_product = !!salla.config.get('store.settings.rating.can_rate_product');
+        const can_rate_shipping = !!salla.config.get('store.settings.rating.can_rate_shipping');
+        const can_rate_store = !!salla.config.get('store.settings.rating.can_rate_store');
+        const allow_media = !!salla.config.get('store.settings.rating.allow_attach_images') ||
+            !!salla.config.get('store.settings.rating.allow_attach_videos');
+        // ? Values
+        const rating_product_points = Number(salla.config.get('store.settings.rating.rating_product_points')) || 0;
+        const rating_product_with_image_points = Number(salla.config.get('store.settings.rating.rating_product_with_image_points')) || 0;
+        const rating_shipping_company_points = Number(salla.config.get('store.settings.rating.rating_shipping_company_points')) || 0;
+        const rating_store_points = Number(salla.config.get('store.settings.rating.rating_store_points')) || 0;
+        // ? Calculate All:
+        this.reviewPoints = 0;
+        if (can_rate_product) {
+            this.reviewPoints += rating_product_points;
+        }
+        if (can_rate_shipping) {
+            this.reviewPoints += rating_shipping_company_points;
+        }
+        if (can_rate_store) {
+            this.reviewPoints += rating_store_points;
+        }
+        if (allow_media) {
+            this.reviewPoints += rating_product_with_image_points;
+        }
+    }
+    formatNumber(value) {
+        return salla.helpers?.number ? salla.helpers.number(value) : String(value);
+    }
+    getBannerText() {
+        const showPoints = this.reviewPoints > 0;
+        const key = `pages.orders.review_banner${showPoints ? '_with_points' : ''}`;
+        const fallback = LANG_DEFAULTS[key]?.ar || '';
+        let text = salla.lang.getWithDefault(key, fallback);
+        if (showPoints) {
+            text = text.replace('{{points}}', this.formatNumber(this.reviewPoints));
+        }
+        return text;
+    }
+    isEligibleForReview(order) {
+        return !order.is_rated && order.can_rate !== false;
+    }
+    async openReviewModal(orderId) {
+        if (!this.ratingModal || !orderId)
+            return;
+        await this.ratingModal.setOrder(orderId);
+        await this.ratingModal.open();
+    }
+    switchFilter(filter) {
+        if (this.isFetching || this.activeFilter === filter)
+            return;
+        this.activeFilter = filter;
+        this.fetchOrders(filter);
+    }
     initiateInfiniteScroll() {
         if (!this.hasInfiniteScroll) {
             return;
@@ -58,7 +143,7 @@ export class SallaOrder {
             let items = this.host.querySelectorAll('.s-orders-table-tbody-tr:not(.animated)');
             Helper.animateItems(items);
         });
-        this.infiniteScroll?.on('error', (e) => {
+        this.infiniteScroll?.on('error', e => {
             salla.logger.error('Error loading more comments:', e);
         });
     }
@@ -69,31 +154,73 @@ export class SallaOrder {
     handleResponse(orderList) {
         return orderList.map(order => this.getSingleOrderItem(order));
     }
-    async loadInitialData() {
-        const url = new URL(window.location.href);
-        await salla.order.api.fetch({ ...this.params, types: [""], feedback_status: url.searchParams.get('feedback_status') }).then((resp) => {
+    /**
+     * Count of eligible, unrated orders. Kept in sync with the active tab's
+     * response when it's the "waiting" tab, otherwise fetched separately so the
+     * banner/tab count is accurate on the "All" tab too.
+     */
+    async loadPendingReviewCount() {
+        try {
+            const resp = await salla.order.api.fetch({
+                ...this.params,
+                types: [''],
+                feedback_status: FEEDBACK_STATUS_WAITING,
+                per_page: 1,
+            });
+            this.pendingReviewCount = resp.pagination?.count ?? 0;
+        }
+        catch (error) {
+            this.pendingReviewCount = 0;
+            salla.logger.error(error);
+        }
+    }
+    async fetchOrders(filter) {
+        if (this.isFetching)
+            return;
+        this.isFetching = true;
+        const feedbackStatus = filter === 'waiting' ? FEEDBACK_STATUS_WAITING : null;
+        try {
+            const resp = await salla.order.api.fetch({
+                ...this.params,
+                types: [''],
+                feedback_status: feedbackStatus,
+            });
             this.orders = resp.data;
             this.hasInfiniteScroll = !!resp.pagination?.links.next;
             this.pagination = resp.pagination;
-            this.total = resp.pagination?.total;
+            this.total = resp.pagination?.count;
             this.nextPage = resp.pagination?.links?.next || null;
+            if (filter === 'waiting') {
+                this.pendingReviewCount = resp.pagination?.count ?? 0;
+            }
             if (!this.orders.length) {
-                this.showPlaceholder = true;
-                return this.loading(false);
+                this.loading(false);
+                this.emptyFilterResult = filter === 'waiting';
+                this.showPlaceholder = filter !== 'waiting';
+                return;
             }
+            this.showPlaceholder = false;
+            this.emptyFilterResult = false;
             setTimeout(() => {
-                this.handleResponse(resp.data).forEach(data => {
-                    this.wrapper.append(data);
-                });
+                if (!this.wrapper)
+                    return;
+                this.wrapper.innerHTML = '';
+                this.handleResponse(resp.data).forEach(row => this.wrapper.append(row));
+                this.infiniteScroll?.destroy?.();
+                this.infiniteScroll = null;
                 this.initiateInfiniteScroll();
                 let items = this.wrapper.querySelectorAll('.s-orders-table-tbody-tr:not(.animated)');
                 Helper.animateItems(items);
             }, 100);
-        }).catch(error => {
+        }
+        catch (error) {
             this.showPlaceholder = true;
             this.loading(false);
             salla.logger.error(error);
-        });
+        }
+        finally {
+            this.isFetching = false;
+        }
     }
     getSingleOrderItem(order) {
         const tr = document.createElement('tr');
@@ -125,7 +252,7 @@ export class SallaOrder {
         sallaButton.setAttribute('color', 'dark');
         sallaButton.setAttribute('shape', 'link');
         sallaButton.dataset.content = order.reference_id.toString();
-        sallaButton.addEventListener('click', (event) => {
+        sallaButton.addEventListener('click', event => {
             Helper.copyToClipboard(event);
             Helper.toggleElementClassIf(sallaButton, 'copied', 'code-to-copy', () => true);
             setTimeout(() => {
@@ -152,6 +279,29 @@ export class SallaOrder {
         div1.appendChild(div2);
         td1.appendChild(div1);
         tr.appendChild(td1);
+        const tdStatus = document.createElement('td');
+        tdStatus.classList.add('s-orders-table-tbody-tr-td');
+        const divStatus = document.createElement('div');
+        divStatus.classList.add('s-orders-table-tbody-tr-td-content');
+        const spanStatusLabel = document.createElement('span');
+        spanStatusLabel.classList.add('s-orders-mobile-title');
+        spanStatusLabel.textContent = this.orderStatusText + ':';
+        const statusSpan = document.createElement('span');
+        statusSpan.classList.add('s-orders-status-container');
+        statusSpan.style.color = order.status.color;
+        const statusIcon = document.createElement('i');
+        statusIcon.classList.add(order.status.icon);
+        const statusName = document.createElement('span');
+        statusName.textContent = order.status.name;
+        statusSpan.appendChild(statusIcon);
+        statusSpan.appendChild(statusName);
+        divStatus.appendChild(spanStatusLabel);
+        divStatus.appendChild(statusSpan);
+        const anchorStatus = document.createElement('a');
+        anchorStatus.href = order.url;
+        divStatus.appendChild(anchorStatus);
+        tdStatus.appendChild(divStatus);
+        tr.appendChild(tdStatus);
         const td2 = document.createElement('td');
         td2.classList.add('s-orders-table-tbody-tr-td');
         const div3 = document.createElement('div');
@@ -184,44 +334,72 @@ export class SallaOrder {
         div5.appendChild(anchor3);
         td3.appendChild(div5);
         tr.appendChild(td3);
-        const td4 = document.createElement('td');
-        td4.classList.add('s-orders-table-tbody-tr-td');
-        const div7 = document.createElement('div');
-        div7.classList.add('s-orders-table-tbody-tr-td-content');
-        const span6 = document.createElement('span');
-        span6.classList.add('s-orders-mobile-title');
-        span6.textContent = this.orderStatusText + ':';
-        const statusSpan = document.createElement('span');
-        statusSpan.classList.add('s-orders-status-container');
-        statusSpan.style.color = order.status.color;
-        const statusIcon = document.createElement('i');
-        statusIcon.classList.add(order.status.icon);
-        const statusName = document.createElement('span');
-        statusName.textContent = order.status.name;
-        statusSpan.appendChild(statusIcon);
-        statusSpan.appendChild(statusName);
-        div7.appendChild(span6);
-        div7.appendChild(statusSpan);
-        const starIcon = document.createElement('i');
-        starIcon.classList.add('sicon-star2', 's-orders-status-rated', order.is_rated ? 's-orders-rated-text' : 's-orders-unrated-text');
-        div7.appendChild(starIcon);
-        const anchor4 = document.createElement('a');
-        anchor4.href = order.url;
-        div7.appendChild(anchor4);
-        td4.appendChild(div7);
-        tr.appendChild(td4);
+        const tdAction = document.createElement('td');
+        tdAction.classList.add('s-orders-table-tbody-tr-td');
+        const divAction = document.createElement('div');
+        divAction.classList.add('s-orders-table-tbody-tr-td-content', 's-orders-action-cell');
+        if (order.is_rated) {
+            const starIcon = document.createElement('i');
+            // starIcon.classList.add(
+            //   'sicon-star2',
+            //   'relative',
+            //   's-orders-status-rated',
+            //   's-orders-rated-text',
+            // );
+            divAction.appendChild(starIcon);
+        }
+        else if (this.isEligibleForReview(order)) {
+            const reviewBtn = document.createElement('salla-button');
+            reviewBtn.classList.add('relative', 's-orders-leave-review-btn');
+            reviewBtn.setAttribute('color', 'primary');
+            reviewBtn.setAttribute('fill', 'outline');
+            reviewBtn.setAttribute('size', 'small');
+            const reviewIcon = document.createElement('i');
+            reviewIcon.classList.add('sicon-star-o', 's-orders-review-star-icon');
+            const reviewLabel = document.createElement('span');
+            reviewLabel.textContent = this.leaveReviewText;
+            if (isRTL) {
+                reviewBtn.appendChild(reviewIcon);
+                reviewBtn.appendChild(reviewLabel);
+            }
+            else {
+                reviewBtn.appendChild(reviewLabel);
+                reviewBtn.appendChild(reviewIcon);
+            }
+            reviewBtn.addEventListener('click', event => {
+                event.preventDefault();
+                event.stopPropagation();
+                this.openReviewModal(order.id);
+            });
+            divAction.appendChild(reviewBtn);
+        }
+        tdAction.appendChild(divAction);
+        tr.appendChild(tdAction);
         return tr;
     }
+    renderFilters() {
+        return (h("div", { class: "s-orders-filters" }, h("salla-button", { size: "small", color: this.activeFilter === 'all' ? 'primary' : 'light', fill: "outline", onClick: () => this.switchFilter('all'), enableLoader: false }, this.filterAllText), h("salla-button", { size: "small", color: this.activeFilter === 'waiting' ? 'primary' : 'light', fill: "outline", onClick: () => this.switchFilter('waiting'), enableLoader: false }, this.filterAwaitingReviewText)));
+    }
+    renderBanner() {
+        if (!this.pendingReviewCount)
+            return null;
+        return (h("div", { class: "s-orders-banner" }, h("span", { class: "s-orders-banner-icon" }, h("svg", { width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M10 0C13.6819 0 16.6667 2.98477 16.6667 6.66664C16.6667 9.37047 15.057 11.6984 12.7437 12.7444C11.6978 15.0575 9.3701 16.6666 6.66668 16.6666C2.98477 16.6666 0 13.6819 0 9.99998C0 7.29656 1.60918 4.96894 3.92195 3.92276C4.96827 1.60964 7.29618 0 10 0ZM6.66668 5C3.90524 5 1.66667 7.23856 1.66667 9.99998C1.66667 12.7614 3.90524 15 6.66668 15C9.4281 15 11.6667 12.7614 11.6667 9.99998C11.6667 7.23856 9.4281 5 6.66668 5ZM7.50002 5.83333V6.66664H9.16668V8.33331H5.83333C5.60322 8.33331 5.41667 8.51989 5.41667 8.74998C5.41667 8.95456 5.56407 9.12464 5.75844 9.15998L5.83333 9.16664H7.50002C8.6506 9.16664 9.58335 10.0994 9.58335 11.25C9.58335 12.4006 8.6506 13.3333 7.50002 13.3333V14.1666H5.83333V13.3333H4.16667V11.6666H7.50002C7.7301 11.6666 7.91668 11.4801 7.91668 11.25C7.91668 11.0455 7.76927 10.8753 7.57493 10.8401L7.50002 10.8333H5.83333C4.68274 10.8333 3.75 9.90056 3.75 8.74998C3.75 7.59939 4.68274 6.66664 5.83333 6.66664V5.83333H7.50002ZM10 1.66667C8.51377 1.66667 7.17893 2.31513 6.26313 3.34457C6.39704 3.33736 6.53138 3.33333 6.66668 3.33333C10.3486 3.33333 13.3333 6.3181 13.3333 9.99998C13.3333 10.1356 13.3293 10.2702 13.3213 10.4037C14.3513 9.48814 15 8.15314 15 6.66664C15 3.90524 12.7614 1.66667 10 1.66667Z", fill: "#008C56" }))), h("p", { class: "s-orders-banner-text" }, this.getBannerText())));
+    }
     render() {
         if (this.showPlaceholder) {
-            return h("div", { class: "s-orders-no-content" }, h("i", { class: "sicon-packed-box icon" }), h("p", null, this.noOrderText));
+            return (h("div", { class: "s-orders-no-content" }, h("i", { class: "sicon-packed-box icon" }), h("p", null, this.noOrderText)));
         }
-        return h("div", { class: "s-orders-wrapper" }, h("table", { class: "s-orders-table" }, h("thead", { class: "s-orders-table-head" }, h("tr", { class: "s-orders-table-head-tr" }, h("th", { class: "s-orders-table-head-tr-th", scope: "col" }, this.orderNumberText), h("th", { class: "s-orders-table-head-tr-th", scope: "col" }, this.totalOrderText), h("th", { class: "s-orders-table-head-tr-th", scope: "col" }, this.orderDateText), h("th", { class: "s-orders-table-head-tr-th", scope: "col" }, this.orderStatusText))), h("tbody", { class: "s-orders-table-tbody", ref: (el) => (this.wrapper = el) })), this.nextPage && (h("div", { class: "s-infinite-scroll-wrapper", ref: status => this.status = status }, h("button", { onClick: () => this.loadMore(), class: "s-infinite-scroll-btn s-button-btn s-button-primary" }, h("span", { class: "s-button-text s-infinite-scroll-btn-text" }, this.loadMoreText ?? this.load_more_text_trans), h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader", ref: btnLoader => this.btnLoader = btnLoader, style: { "display": "none" } })))));
+        return (h("div", { class: "s-orders-wrapper" }, this.renderBanner(), this.renderFilters(), h("div", { class: "s-orders-list-wrapper" }, this.isFetching && (h("div", { class: "s-orders-list-loading" }, h("salla-loading", { size: 32, width: 3 }))), this.emptyFilterResult ? (h("div", { class: "s-orders-no-content" }, h("i", { class: "sicon-packed-box icon" }), h("p", null, this.noUnratedOrdersText))) : (h("table", { class: { 's-orders-table': true, 's-orders-table-fetching': this.isFetching } }, h("thead", { class: "s-orders-table-head" }, h("tr", { class: "s-orders-table-head-tr" }, h("th", { class: "s-orders-table-head-tr-th", scope: "col" }, this.orderNumberText), h("th", { class: "s-orders-table-head-tr-th", scope: "col" }, this.orderStatusText), h("th", { class: "s-orders-table-head-tr-th", scope: "col" }, this.totalOrderText), h("th", { class: "s-orders-table-head-tr-th", scope: "col" }, this.orderDateText), h("th", { class: "s-orders-table-head-tr-th", scope: "col" }))), h("tbody", { class: "s-orders-table-tbody", ref: el => (this.wrapper = el) })))), this.nextPage && !this.emptyFilterResult && (h("div", { class: "s-infinite-scroll-wrapper", ref: status => (this.status = status) }, h("button", { onClick: () => this.loadMore(), class: "s-infinite-scroll-btn s-button-btn s-button-primary" }, h("span", { class: "s-button-text s-infinite-scroll-btn-text" }, this.loadMoreText ?? this.load_more_text_trans), h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader", ref: btnLoader => (this.btnLoader = btnLoader), style: { display: 'none' } })))), h("salla-rating-modal", { ref: el => (this.ratingModal = el) })));
     }
     componentWillLoad() {
-        return salla.onReady()
-            .then(() => this.loadInitialData())
-            .then(() => this.initiateInfiniteScroll());
+        salla.lang.onLoaded(() => {
+            salla.lang.addBulk(LANG_DEFAULTS);
+            this.refreshReviewLabels();
+        });
+        return salla.onReady().then(() => {
+            this.setupLoyalty();
+            return Promise.all([this.fetchOrders('all'), this.loadPendingReviewCount()]);
+        });
     }
     static get is() { return "salla-orders"; }
     static get originalStyleUrls() {
@@ -290,12 +468,20 @@ export class SallaOrder {
             "noOrderText": {},
             "load_more_text_trans": {},
             "languageCode": {},
+            "filterAllText": {},
+            "filterAwaitingReviewText": {},
+            "leaveReviewText": {},
+            "noUnratedOrdersText": {},
             "orders": {},
             "pagination": {},
             "hasInfiniteScroll": {},
             "total": {},
             "nextPage": {},
-            "showPlaceholder": {}
+            "showPlaceholder": {},
+            "activeFilter": {},
+            "pendingReviewCount": {},
+            "emptyFilterResult": {},
+            "isFetching": {}
         };
     }
     static get elementRef() { return "host"; }

package/dist/collection/components/salla-payments/salla-payments.css

@@ -4,6 +4,9 @@
 .static {
   position: static;
 }
+.hidden {
+  display: none;
+}
 .s-payments-list {
   display: flex;
   flex-wrap: wrap;