@salla.sa/twilight-components 2.14.543 → 2.14.545

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

@@ -1,264 +0,0 @@
-/*!
- * 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"; }
-}