@salla.sa/twilight-components 2.14.541 → 2.14.543

package/dist/collection/components/salla-verified-review/salla-verified-review.js

@@ -0,0 +1,264 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Host, h } from "@stencil/core";
+import CheckCircle2 from "../../assets/svg/check-circle2.svg";
+import Block from "../../assets/svg/block.svg";
+export class SallaVerifiedReview {
+    constructor() {
+        this.ready = false;
+        this.eligible = false;
+        this.order = null;
+        this.productImage = '';
+        this.productImageAlt = '';
+        this.loyaltyPoints = 0;
+        this.titlePurchasedLabel = '';
+        this.titleNotPurchasedLabel = '';
+        this.subtitleLabel = '';
+        this.badgeLabel = '';
+        this.orderMetaLabel = '';
+        this.ctaLabel = '';
+        this.loyaltyLabel = '';
+        this.rateLimitMessage = '';
+        this.rateLimited = false;
+        this.rateLimitTitleLabel = '';
+        this.rateLimitDefaultMessageLabel = '';
+        this.rateLimitExitLabel = '';
+        this.resolvedProductId = null;
+        this.handleRateClick = () => {
+            if (salla.config.isGuest()) {
+                salla.event.dispatch('login::open');
+                return;
+            }
+            if (!this.eligible) {
+                return;
+            }
+            if (this.rateLimited) {
+                this.showRateLimitAlert();
+                return;
+            }
+            // Verified purchases pass their order id; unverified-but-eligible reviews
+            // pass `null` so the modal submits the review without an order.
+            const orderId = this.order?.id ?? null;
+            const modal = this.ensureRatingModal();
+            requestAnimationFrame(async () => {
+                await modal.setOrder?.(orderId, this.resolvedProductId);
+                modal.open?.();
+            });
+        };
+    }
+    async componentWillLoad() {
+        try {
+            await salla.onReady();
+            await salla.lang.onLoaded();
+            await this.loadTranslations();
+            this.resolvedProductId =
+                this.productId || this.host.dataset.productId || salla.config.get('page.id');
+            if (!this.resolvedProductId) {
+                return;
+            }
+            if (salla.config.isGuest()) {
+                return;
+            }
+            salla.event.on('rating::products-rated', (_response, payload) => {
+                if (String(payload?.product_id) === String(this.resolvedProductId)) {
+                    this.eligible = false;
+                }
+            });
+            await Promise.all([this.loadProductImage(), this.loadEligibility()]);
+            this.ready = true;
+        }
+        catch (e) {
+            salla?.logger?.warn?.('salla-verified-review: init failed', e);
+        }
+    }
+    async loadTranslations() {
+        const setNestedAsync = (lang, key, value) => {
+            return new Promise(resolve => {
+                salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                resolve(true);
+            });
+        };
+        await setNestedAsync('ar.trans', 'pages.rating.verified_review.title_purchased', 'جربت هذا المنتج؟');
+        await setNestedAsync('en.trans', 'pages.rating.verified_review.title_purchased', 'You tried this product?');
+        await setNestedAsync('ar.trans', 'pages.rating.verified_review.title_not_purchased', 'جربت هذا المنتج؟ شارك تجربتك 🎉');
+        await setNestedAsync('en.trans', 'pages.rating.verified_review.title_not_purchased', 'Tried this product? Share your experience 🎉');
+        await setNestedAsync('ar.trans', 'pages.rating.verified_review.subtitle', 'شارك رأيك وساعد غيرك يختار بثقة.');
+        await setNestedAsync('en.trans', 'pages.rating.verified_review.subtitle', 'Share your opinion and help others choose with confidence.');
+        await setNestedAsync('ar.trans', 'pages.rating.verified_review.badge', 'عملية شراء موثقة');
+        await setNestedAsync('en.trans', 'pages.rating.verified_review.badge', 'Verified purchase');
+        await setNestedAsync('ar.trans', 'pages.rating.verified_review.order_meta', 'طلب #:id');
+        await setNestedAsync('en.trans', 'pages.rating.verified_review.order_meta', 'Order #:id');
+        await setNestedAsync('ar.trans', 'pages.rating.verified_review.cta', 'تقييم المنتج');
+        await setNestedAsync('en.trans', 'pages.rating.verified_review.cta', 'Rate product');
+        await setNestedAsync('ar.trans', 'pages.rating.verified_review.loyalty_points', 'اكسب +:points نقطة ولاء بكتابة مراجعة 🏆');
+        await setNestedAsync('en.trans', 'pages.rating.verified_review.loyalty_points', '🏆 Earn +:points loyalty points by writing a review');
+        await setNestedAsync('ar.trans', 'pages.rating.rate_limit_title', 'تم تقييد حسابك');
+        await setNestedAsync('en.trans', 'pages.rating.rate_limit_title', 'Your account has been restricted');
+        await setNestedAsync('ar.trans', 'pages.rating.rate_limit_message', 'تجاوزت الحد المسموح لتقييم منتجات لم تشتريها بعد.');
+        await setNestedAsync('en.trans', 'pages.rating.rate_limit_message', "You've exceeded the allowed limit for rating products you haven't purchased yet.");
+        await setNestedAsync('ar.trans', 'pages.rating.rate_limit_exit', 'خروج');
+        await setNestedAsync('en.trans', 'pages.rating.rate_limit_exit', 'Exit');
+        this.titlePurchasedLabel = salla.lang.getWithDefault('pages.rating.verified_review.title_purchased', 'اشتريت هذا! شارك تجربتك 🎉');
+        this.titleNotPurchasedLabel = salla.lang.getWithDefault('pages.rating.verified_review.title_not_purchased', 'جربت هذا المنتج؟ شارك تجربتك 🎉');
+        this.subtitleLabel = salla.lang.getWithDefault('pages.rating.verified_review.subtitle', 'ساعد المتسوقين الآخرين بمراجعة هذا المنتج. رأيك يهم.');
+        this.badgeLabel = salla.lang.getWithDefault('pages.rating.verified_review.badge', 'عملية شراء موثقة');
+        this.orderMetaLabel = salla.lang.getWithDefault('pages.rating.verified_review.order_meta', 'طلب #:id');
+        this.ctaLabel = salla.lang.getWithDefault('pages.rating.verified_review.cta', 'قيِّم المنتج');
+        this.loyaltyLabel = salla.lang.getWithDefault('pages.rating.verified_review.loyalty_points', 'اكسب +:points نقطة ولاء بكتابة مراجعة 🏆');
+        this.rateLimitTitleLabel = salla.lang.getWithDefault('pages.rating.rate_limit_title', 'تم تقييد حسابك');
+        this.rateLimitDefaultMessageLabel = salla.lang.getWithDefault('pages.rating.rate_limit_message', 'تجاوزت الحد المسموح لتقييم منتجات لم تشتريها بعد.');
+        this.rateLimitExitLabel = salla.lang.getWithDefault('pages.rating.rate_limit_exit', 'خروج');
+    }
+    async loadProductImage() {
+        try {
+            const response = await salla.api.withoutNotifier(() => salla.product.api.getDetails(this.resolvedProductId));
+            const product = response?.data;
+            this.productImage = product?.image?.url || salla.url.cdn('images/s-empty.png');
+            this.productImageAlt = product?.image?.alt || product?.name || '';
+        }
+        catch {
+            this.productImage = salla.url.cdn('images/s-empty.png');
+        }
+    }
+    async fetchEligibility(productId) {
+        const response = await salla.api.withoutNotifier(() => salla.rating.api.productEligibility(productId));
+        return response?.data;
+    }
+    async loadEligibility() {
+        if (!this.resolvedProductId) {
+            return;
+        }
+        const eligibility = await this.fetchEligibility(this.resolvedProductId);
+        if (!eligibility) {
+            this.eligible = false;
+            this.order = null;
+            return;
+        }
+        this.eligible = eligibility.eligible;
+        if (eligibility.code === 'community_review_daily_limit') {
+            this.rateLimitMessage = eligibility.message || this.rateLimitDefaultMessageLabel;
+            this.rateLimited = true;
+            this.eligible = true;
+        }
+        this.order =
+            this.eligible && eligibility.order_id
+                ? {
+                    id: eligibility.order_id,
+                    reference_id: eligibility.reference_id,
+                    created_at: eligibility.created_at,
+                }
+                : null;
+        const loyaltyPoints = salla.config.get('store.settings.rating.rating_product_points');
+        this.loyaltyPoints = loyaltyPoints ? Number(loyaltyPoints) : 0;
+    }
+    getOrderMetaText() {
+        if (!this.order) {
+            return '';
+        }
+        const orderMetaLabel = this.orderMetaLabel.replace(':id', String(this.order.reference_id || this.order.id));
+        const orderCreatedAt = this.order.created_at ? new Date(this.order.created_at) : null;
+        return orderMetaLabel + (orderCreatedAt ? ` • ${this.formatOrderDate(orderCreatedAt)}` : '');
+    }
+    formatOrderDate(date) {
+        const month = date.toLocaleDateString(navigator.language, { month: 'short' });
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${date.getFullYear()} ${month} ${day}`;
+    }
+    getLoyaltyText() {
+        if (!this.loyaltyPoints) {
+            return '';
+        }
+        if (!this.loyaltyLabel) {
+            this.loyaltyLabel = salla.lang.getWithDefault('pages.rating.verified_review.loyalty_points', 'اكسب +:points نقطة ولاء بكتابة مراجعة 🏆');
+        }
+        return this.loyaltyLabel.replace(':points', String(this.loyaltyPoints));
+    }
+    /**
+     * Shown when the shopper tries to rate a product after the eligibility
+     * check reported the community-review daily limit was hit.
+     */
+    showRateLimitAlert() {
+        requestAnimationFrame(() => {
+            this.rateLimitModal?.setTitle?.(this.rateLimitTitleLabel);
+            this.rateLimitModal?.open?.();
+        });
+    }
+    getRateLimitModal() {
+        return (h("salla-modal", { ref: modal => (this.rateLimitModal = modal), width: "xs", centered: true }, h("span", { slot: "icon", class: "s-modal-icon s-modal-bg-normal", innerHTML: Block }), h("p", { class: "s-verified-review-rate-limit-message" }, this.rateLimitMessage), h("div", { slot: "footer", class: "s-verified-review-rate-limit-footer" }, h("salla-button", { width: "wide", fill: "outline", color: "primary", onClick: () => this.rateLimitModal?.close?.() }, this.rateLimitExitLabel))));
+    }
+    ensureRatingModal() {
+        let modal = document.querySelector('salla-rating-modal');
+        if (!modal) {
+            modal = document.createElement('salla-rating-modal');
+            document.body.appendChild(modal);
+        }
+        return modal;
+    }
+    render() {
+        if (salla.config.isGuest() || !this.ready || !this.resolvedProductId) {
+            return null;
+        }
+        if (!this.eligible) {
+            return null;
+        }
+        const title = this.order ? this.titlePurchasedLabel : this.titleNotPurchasedLabel;
+        const loyaltyText = this.order ? this.getLoyaltyText() : null;
+        const orderMeta = this.getOrderMetaText();
+        return (h(Host, null, h("div", { class: "s-verified-review-container" }, h("div", { class: "s-verified-review-glow", "aria-hidden": "true" }), h("div", { class: "s-verified-review-media" }, h("img", { class: "s-verified-review-image", src: this.productImage, alt: this.productImageAlt, width: 72, height: 72, loading: "lazy", decoding: "async" })), h("div", { class: "s-verified-review-content" }, this.order ? (h("div", { class: "s-verified-review-meta" }, h("span", { class: "s-verified-review-badge" }, h("span", { class: "s-verified-review-badge-icon", innerHTML: CheckCircle2 }), this.badgeLabel), orderMeta ? h("span", { class: "s-verified-review-order" }, orderMeta) : null)) : null, h("h3", { class: "s-verified-review-title" }, title), h("p", { class: "s-verified-review-subtitle" }, this.subtitleLabel), loyaltyText ? h("p", { class: "s-verified-review-loyalty" }, loyaltyText) : null), h("div", { class: "s-verified-review-actions" }, h("salla-button", { class: "s-verified-review-cta", fill: "outline", color: "primary", size: "medium", onClick: this.handleRateClick }, this.ctaLabel))), this.getRateLimitModal()));
+    }
+    static get is() { return "salla-verified-review"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-verified-review.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-verified-review.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "productId": {
+                "type": "any",
+                "attribute": "product-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Product id to check purchase eligibility for.\nFalls back to `data-product-id` or the current page id."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ready": {},
+            "eligible": {},
+            "order": {},
+            "productImage": {},
+            "productImageAlt": {},
+            "loyaltyPoints": {},
+            "titlePurchasedLabel": {},
+            "titleNotPurchasedLabel": {},
+            "subtitleLabel": {},
+            "badgeLabel": {},
+            "orderMetaLabel": {},
+            "ctaLabel": {},
+            "loyaltyLabel": {},
+            "rateLimitMessage": {},
+            "rateLimited": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}