@salla.sa/twilight-components/dist/collection/components/salla-reviews-summary/salla-reviews-summary.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { Host, h } from "@stencil/core";
import Star2 from "../../assets/svg/star2.svg";
export class SallaReviewsSummary {
    constructor() {
        this.canRender = false;
        salla.lang.onLoaded(() => {
            const setNestedAsync = (lang, key, value) => {
                return new Promise((resolve) => {
                    salla.helpers.setNested(salla.lang.messages[lang], key, value);
                    resolve(true);
                });
            };
            const setTranslations = async () => {
                await setNestedAsync('ar.trans', 'blocks.comments.based_on', 'بناءً على');
                await setNestedAsync('en.trans', 'blocks.comments.based_on', 'Based on');
                this.basedOnLabel = salla.lang.get('blocks.comments.based_on');
            };
            setTranslations();
        });
    }
    componentWillLoad() {
        return salla.onReady()
            .then(() => this.loadSummary());
    }
    async loadSummary() {
        if (!this.itemId) {
            console.error('Error loading reviews summary: itemId is not defined');
            return this.canRender = false;
        }
        try {
            let resp = await salla.api.request(`rating/summary/${this.itemId}`);
            if (Array.isArray(resp.data.reviews) && !resp.data.reviews.length) {
                return this.canRender = false;
            }
            else {
                this.data = resp.data;
                this.canRender = true;
            }
        }
        catch (error) {
            console.error('Error loading reviews summary:', error);
        }
    }
    render() {
        if (!this.canRender) {
            return null;
        }
        // Initialize all ratings with 0 if missing
        const ratings = Object.assign({ "1": 0, "2": 0, "3": 0, "4": 0, "5": 0 }, this.data.reviews);
        const reviewElements = Object.keys(ratings).reverse().map(rating => {
            const percentage = ratings[rating];
            return (h("div", { class: "s-reviews-summary-row" }, h("div", { class: "s-reviews-summary-row-rate" }, rating, " ", h("span", { innerHTML: Star2 })), h("salla-progress-bar", { class: "s-reviews-summary-progress", value: percentage, target: 100, hideUnits: true, height: '14px' }), h("span", { class: "s-reviews-summary-percentage" }, percentage, "%")));
        });
        return (h(Host, { class: "s-reviews-summary-wrapper" }, h("div", { class: "s-reviews-summary-header" }, h("h3", { class: "s-reviews-summary-average" }, this.data.rating), h("div", null, h("salla-rating-stars", { value: this.data.rating }), h("p", { class: "s-reviews-summary-count" }, this.basedOnLabel, " ", salla.helpers.number(salla.lang.choice('pages.rating.reviews', this.data.count))))), h("div", { class: "s-reviews-summary-rows" }, reviewElements)));
    }
    static get is() { return "salla-reviews-summary"; }
    static get originalStyleUrls() {
        return {
            "$": ["salla-reviews-summary.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["salla-reviews-summary.css"]
        };
    }
    static get properties() {
        return {
            "itemId": {
                "type": "number",
                "attribute": "item-id",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Product ID"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "canRender": {},
            "data": {},
            "basedOnLabel": {}
        };
    }
}
//# sourceMappingURL=salla-reviews-summary.js.map