@salla.sa/twilight-components 2.14.575 → 2.14.576

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

@@ -5,15 +5,20 @@ import { h } from "@stencil/core";
 import Helper from "../../Helpers/Helper";
 const FEEDBACK_STATUS_WAITING = 'waiting';
 const TAB_QUERY_PARAM = 'tab';
+const SHOW_EXTERNAL_ORDERS_FEATURE = 'show-external-orders';
 function getFilterFromSearchParams() {
     const tab = new URLSearchParams(window.location.search).get(TAB_QUERY_PARAM);
-    return tab === 'waiting' ? 'waiting' : 'all';
+    if (tab === 'waiting' || tab === 'archived')
+        return tab;
+    return 'all';
 }
 const LANG_DEFAULTS = {
     'pages.orders.filter_all': { ar: 'الكل', en: 'All' },
+    'pages.orders.filter_archived': { ar: 'الطلبات المؤرشفة', en: 'Archived orders' },
     '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.no_archived_orders': { ar: 'لا توجد طلبات مؤرشفة', en: 'No archived orders' },
     'pages.orders.review_banner': {
         ar: 'لديك طلبات بانتظار تقييمك. شارك رأيك وساعدنا على تحسين تجربتك.',
         en: 'You have orders awaiting your review. Share your feedback and help us improve your experience.',
@@ -33,9 +38,11 @@ export class SallaOrder {
         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.filterArchivedText = salla.lang.getWithDefault('pages.orders.filter_archived', 'الطلبات المؤرشفة');
         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.noArchivedOrdersText = salla.lang.getWithDefault('pages.orders.no_archived_orders', 'لا توجد طلبات مؤرشفة');
         this.orders = [];
         this.nextPage = null;
         this.activeFilter = getFilterFromSearchParams();
@@ -44,6 +51,7 @@ export class SallaOrder {
         this.isFetching = false;
         this.reviewPoints = 0;
         this.filterGeneration = 0;
+        this.showExternalOrders = false;
         salla.lang.onLoaded(() => {
             this.languageCode = salla.lang.locale;
             this.orderNumberText = salla.lang.get('pages.thank_you.order_id');
@@ -63,9 +71,11 @@ export class SallaOrder {
     }
     refreshReviewLabels() {
         this.filterAllText = salla.lang.getWithDefault('pages.orders.filter_all', 'الكل');
+        this.filterArchivedText = salla.lang.getWithDefault('pages.orders.filter_archived', 'الطلبات المؤرشفة');
         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.noArchivedOrdersText = salla.lang.getWithDefault('pages.orders.no_archived_orders', 'لا توجد طلبات مؤرشفة');
     }
     setupLoyalty() {
         // ? Flags
@@ -210,11 +220,11 @@ export class SallaOrder {
             return;
         this.setLoadMoreLoading(false);
         this.isFetching = true;
-        // Rows are appended to the wrapper imperatively (outside Stencil's vdom), so
+        // Rows are appended to the table body imperatively (outside Stencil's vdom), so
         // switching the render branch to the skeleton table won't clear them on its
         // own — clear them explicitly or the old rows linger alongside the skeleton.
-        if (this.wrapper) {
-            this.wrapper.innerHTML = '';
+        if (this.ordersTableBody) {
+            this.ordersTableBody.innerHTML = '';
         }
         this.filterGeneration++;
         const feedbackStatus = filter === 'waiting' ? FEEDBACK_STATUS_WAITING : null;
@@ -224,6 +234,7 @@ export class SallaOrder {
                 format: 'light',
                 types: [''],
                 feedback_status: feedbackStatus,
+                ...(filter === 'archived' ? { external_orders: 1 } : {}),
             });
             this.orders = resp.data;
             this.hasInfiniteScroll = !!resp.pagination?.links.next;
@@ -237,8 +248,8 @@ export class SallaOrder {
             }
             if (!this.orders.length) {
                 this.setLoadMoreLoading(false);
-                this.emptyFilterResult = filter === 'waiting';
-                this.showPlaceholder = filter !== 'waiting';
+                this.emptyFilterResult = filter !== 'all';
+                this.showPlaceholder = filter === 'all';
                 return;
             }
             this.showPlaceholder = false;
@@ -256,7 +267,9 @@ export class SallaOrder {
         }
     }
     getSingleOrderItem(order) {
-        const referenceId = order.reference_id ?? '';
+        const orderNumber = String((this.activeFilter === 'archived' ? order.external_order_id : order.reference_id) ?? '');
+        // ponytail: # only for pure digits; alphanumeric external ids stay bare
+        const orderNumberLabel = /^\d+$/.test(orderNumber) ? `#${orderNumber}` : orderNumber;
         const tr = document.createElement('tr');
         tr.classList.add('s-orders-table-tbody-tr', 's-orders-table-tbody-tr-shadow');
         const td1 = document.createElement('td');
@@ -268,7 +281,7 @@ export class SallaOrder {
         span1.textContent = `${this.orderNumberText}:`;
         const span2 = document.createElement('span');
         span2.classList.add('s-orders-reference-id');
-        span2.textContent = `#${referenceId}`;
+        span2.textContent = orderNumberLabel;
         div1.appendChild(span1);
         div1.appendChild(span2);
         if (order.source === 'buy_as_gift') {
@@ -286,7 +299,7 @@ export class SallaOrder {
         sallaButton.classList.add('relative');
         sallaButton.setAttribute('color', 'dark');
         sallaButton.setAttribute('shape', 'link');
-        sallaButton.dataset.content = String(referenceId);
+        sallaButton.dataset.content = orderNumber;
         sallaButton.addEventListener('click', event => {
             Helper.copyToClipboard(event);
             Helper.toggleElementClassIf(sallaButton, 'copied', 'code-to-copy', () => true);
@@ -295,7 +308,7 @@ export class SallaOrder {
             }, 1000);
         });
         const span3 = document.createElement('span');
-        span3.textContent = '#' + referenceId;
+        span3.textContent = orderNumberLabel;
         const copyIcon = document.createElement('i');
         copyIcon.classList.add('sicon-swap-stroke', 's-orders-copy-to-clipboard-button-icon');
         // Check the text direction
@@ -427,8 +440,13 @@ export class SallaOrder {
     renderSkeletonRows(count = 5) {
         return Array.from({ length: count }, (_, index) => this.renderSkeletonRow(index));
     }
+    getEmptyFilterText() {
+        return this.activeFilter === 'archived'
+            ? this.noArchivedOrdersText
+            : this.noUnratedOrdersText;
+    }
     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)));
+        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), this.showExternalOrders && (h("salla-button", { size: "small", color: this.activeFilter === 'archived' ? 'primary' : 'light', fill: "outline", onClick: () => this.switchFilter('archived'), enableLoader: false }, this.filterArchivedText)), 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)
@@ -439,7 +457,7 @@ export class SallaOrder {
         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-wrapper" }, this.renderBanner(), this.renderFilters(), h("div", { class: "s-orders-list-wrapper" }, this.isFetching ? (h("table", { class: "s-orders-table s-orders-table-skeleton" }, this.renderTableHead(), h("tbody", { class: "s-orders-table-tbody" }, this.renderSkeletonRows()))) : 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" }, this.renderTableHead(), h("tbody", { class: "s-orders-table-tbody", ref: element => (this.ordersTableBody = element) })))), this.nextPage && !this.emptyFilterResult && (h("div", { class: "s-infinite-scroll-wrapper", ref: status => (this.status = status) }, h("button", { type: "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) })));
+        return (h("div", { class: "s-orders-wrapper" }, this.renderBanner(), this.renderFilters(), h("div", { class: "s-orders-list-wrapper" }, this.isFetching ? (h("table", { class: "s-orders-table s-orders-table-skeleton" }, this.renderTableHead(), h("tbody", { class: "s-orders-table-tbody" }, this.renderSkeletonRows()))) : this.emptyFilterResult ? (h("div", { class: "s-orders-no-content" }, h("i", { class: "sicon-packed-box icon" }), h("p", null, this.getEmptyFilterText()))) : (h("table", { class: "s-orders-table" }, this.renderTableHead(), h("tbody", { class: "s-orders-table-tbody", ref: element => (this.ordersTableBody = element) })))), this.nextPage && !this.emptyFilterResult && (h("div", { class: "s-infinite-scroll-wrapper", ref: status => (this.status = status) }, h("button", { type: "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) })));
     }
     componentDidRender() {
         this.populateOrdersTableIfEmpty();
@@ -451,6 +469,13 @@ export class SallaOrder {
         });
         return salla.onReady().then(() => {
             this.setupLoyalty();
+            this.showExternalOrders = salla.config
+                .get('store.features', [])
+                .includes(SHOW_EXTERNAL_ORDERS_FEATURE);
+            if (this.activeFilter === 'archived' && !this.showExternalOrders) {
+                this.activeFilter = 'all';
+                this.syncFilterToSearchParams('all');
+            }
             const tasks = [this.fetchOrders(this.activeFilter)];
             // fetchOrders already resolves the pending count when the initial tab is "waiting"
             if (this.activeFilter !== 'waiting') {
@@ -527,9 +552,11 @@ export class SallaOrder {
             "load_more_text_trans": {},
             "languageCode": {},
             "filterAllText": {},
+            "filterArchivedText": {},
             "filterAwaitingReviewText": {},
             "leaveReviewText": {},
             "noUnratedOrdersText": {},
+            "noArchivedOrdersText": {},
             "orders": {},
             "pagination": {},
             "hasInfiniteScroll": {},