@salla.sa/twilight-components
Version:
Salla Web Component
306 lines (305 loc) • 13.8 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { h } from "@stencil/core";
import IconArrowLeft from "../../assets/svg/arrow-left.svg";
import IconQuoteOpen from "../../assets/svg/quote-open.svg";
import Helper from "../../Helpers/Helper";
export class SallaReviews {
constructor() {
/**
* Defines the maximum number of reviews to retrieve from the API.
*
* @type {number}
* @default 5
*/
this.limit = 5;
/**
* Specifies the type of reviews to fetch.
* Available options:
* - "all": Fetches reviews from all sources.
* - "store": Fetches reviews specific to the store.
* - "products": Fetches reviews specific to products.
*
* @type {ReviewType}
* @default store
*/
this.type = "store";
/**
* Specifies the sorting criteria for the fetched reviews.
* Available options:
* - "top_rating": Sorts reviews based on top ratings.
* - "random": Sorts reviews randomly.
* - "latest": Sorts reviews based on the latest ones (default).
*
* @type {SortingOption}
* @default latest
*/
this.sort = "latest";
/**
* Specifies whether to hide customer information in the component.
* When set to true, customer information will be hidden.
* Defaults to false, meaning customer information will be displayed.
*/
this.hideCustomerInfo = false;
this.reviews = [];
this.showReviews = false;
this.testimonialText = salla.lang.get('blocks.home.testimonials');
this.displayAllLinkText = salla.lang.get('blocks.home.display_all');
this.displayAllURL = null;
this.source = this.source;
salla.onReady(() => {
this.displayAllURL = salla.url.get('testimonials');
this.isRTL = salla.config.get('theme.is_rtl', true);
});
salla.lang.onLoaded(() => {
this.testimonialText = salla.lang.get('blocks.home.testimonials');
this.displayAllLinkText = salla.lang.get('blocks.home.display_all');
});
}
fetchReviews() {
if (this.source === 'json') {
return Promise.resolve(JSON.parse(this.sourceValue));
}
const isJsonEncoded = ['products', 'categories'].includes(this.source);
const params = {
limit: this.limit,
source: this.source,
items: isJsonEncoded ? JSON.parse(this.sourceValue) : this.sourceValue,
sort: this.sort,
type: this.type,
hide_customer_info: this.hideCustomerInfo ? 1 : 0
};
return salla.api.request('reviews', { params }, 'get');
}
componentWillLoad() {
return (new Promise(resolve => salla.onReady(resolve)))
.then(() => this.fetchReviews())
.then((resp) => resp.data || [])
.then(reviews => {
if (reviews.length) {
this.reviews = reviews;
this.showReviews = true;
Helper.generateReviewSchema(this.reviews);
}
});
}
render() {
return (h("div", { key: 'edab3103293378d4ebc9dbd16873e734aece0bf9', class: "s-reviews-container" }, h("div", { key: '2562073f29f9257e1d0133ccb7f1534075b3c330', class: "s-reviews-header-wrapper" }, h("h1", { key: '18be1f853b46b13263014940814c3bb276d7d4f9', class: "s-reviews-header" }, this.testimonialText), !!this.displayAllLink ? (h("a", { href: this.displayAllURL, class: "s-reviews-display-all" }, this.displayAllLinkText, h("span", { class: "s-reviews-display-all-icon", innerHTML: IconArrowLeft }))) : null), h("salla-slider", { key: '7b466442e7888112bf43f0cd40182554f446155b', centered: true, "slides-per-view": 1, type: "testimonials", class: "s-reviews-testimonials-slider", "controls-outer": true, "auto-play": true, id: `testimonials-${this.source}-slider` }, h("div", { key: 'bf5be97ea0169b36296f3555ffd4890a9b96863b', slot: "items" }, this.reviews.map((item, index) => (h("div", { key: index, class: "s-reviews-swiper-slide" }, h("div", { class: "s-reviews-testimonial" }, h("div", { class: "s-reviews-testimonial__inner" }, h("div", { class: "s-reviews-testimonial__avatar" }, h("img", { src: 'images/s-empty.png', "data-src": item.avatar, alt: item.name ? item.name : 'testimonial-' + index, class: "lazy" })), h("div", { class: "s-reviews-testimonial__text" }, h("p", { innerHTML: item.content }), h("div", { class: "s-reviews-testimonial__name_wrapper" }, h("div", { class: "s-reviews-testimonial__info" }, item.name && h("h2", null, `${item.name}`)), h("div", { class: "s-reviews-testimonial__rating" }, h("salla-rating-stars", { size: "small", value: item.stars })))), h("span", { class: "s-reviews-testimonial__icon", innerHTML: IconQuoteOpen }))))))))));
}
static get is() { return "salla-reviews"; }
static get originalStyleUrls() {
return {
"$": ["salla-reviews.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-reviews.css"]
};
}
static get properties() {
return {
"displayAllLink": {
"type": "boolean",
"attribute": "display-all-link",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "type",
"text": "{boolean}"
}],
"text": "Controls the visibility of a link to the reviews page.\n\nWhen set to `true`, a link will be displayed allowing users to navigate to the full reviews section."
},
"getter": false,
"setter": false,
"reflect": true
},
"source": {
"type": "string",
"attribute": "source",
"mutable": false,
"complexType": {
"original": "Source",
"resolved": "\"categories\" | \"json\" | \"products\"",
"references": {
"Source": {
"location": "import",
"path": "./interfaces",
"id": "src/components/salla-reviews/interfaces.ts::Source"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "type",
"text": "{Source}"
}, {
"name": "default",
"text": "\"store\""
}],
"text": "Specifies the data source for reviews.\n\nValid options include:\n - 'categories': Retrieves reviews for specific product categories.\n - 'products': Retrieves reviews for individual products.\n - 'json': Retrieves reviews from a custom JSON payload provided in `sourceValue`.\n\nWhen using 'json' as the source, a valid payload must be provided in `sourceValue`."
},
"getter": false,
"setter": false,
"reflect": true
},
"sourceValue": {
"type": "string",
"attribute": "source-value",
"mutable": false,
"complexType": {
"original": "string | object | Array<number>",
"resolved": "number[] | object | string",
"references": {
"Array": {
"location": "global",
"id": "global::Array"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "type",
"text": "{string | object | Array<number>}"
}],
"text": "Provides data specific to the chosen source.\n\nRequired when using 'categories', 'products', or 'json' as the source:\n - 'categories': An array of category IDs.\n - 'products': An array of product IDs.\n - 'json': A custom JSON object containing review data."
},
"getter": false,
"setter": false,
"reflect": true
},
"limit": {
"type": "number",
"attribute": "limit",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "type",
"text": "{number}"
}, {
"name": "default",
"text": "5"
}],
"text": "Defines the maximum number of reviews to retrieve from the API."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "5"
},
"type": {
"type": "string",
"attribute": "type",
"mutable": false,
"complexType": {
"original": "ReviewType",
"resolved": "\"all\" | \"products\" | \"store\"",
"references": {
"ReviewType": {
"location": "import",
"path": "./interfaces",
"id": "src/components/salla-reviews/interfaces.ts::ReviewType"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "type",
"text": "{ReviewType}"
}, {
"name": "default",
"text": "store"
}],
"text": "Specifies the type of reviews to fetch.\nAvailable options:\n- \"all\": Fetches reviews from all sources.\n- \"store\": Fetches reviews specific to the store.\n- \"products\": Fetches reviews specific to products."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "\"store\""
},
"sort": {
"type": "string",
"attribute": "sort",
"mutable": false,
"complexType": {
"original": "SortingOption",
"resolved": "\"latest\" | \"random\" | \"top_rating\"",
"references": {
"SortingOption": {
"location": "import",
"path": "./interfaces",
"id": "src/components/salla-reviews/interfaces.ts::SortingOption"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "type",
"text": "{SortingOption}"
}, {
"name": "default",
"text": "latest"
}],
"text": "Specifies the sorting criteria for the fetched reviews.\nAvailable options:\n- \"top_rating\": Sorts reviews based on top ratings.\n- \"random\": Sorts reviews randomly.\n- \"latest\": Sorts reviews based on the latest ones (default)."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "\"latest\""
},
"hideCustomerInfo": {
"type": "boolean",
"attribute": "hide-customer-info",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether to hide customer information in the component.\nWhen set to true, customer information will be hidden.\nDefaults to false, meaning customer information will be displayed."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"reviews": {},
"isRTL": {},
"showReviews": {},
"testimonialText": {},
"displayAllLinkText": {}
};
}
}
//# sourceMappingURL=salla-reviews.js.map