@salla.sa/twilight-components
Version:
Salla Web Component
244 lines (238 loc) • 17 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { I as IconVerified } from './check.js';
import { d as defineCustomElement$6 } from './salla-button2.js';
import { d as defineCustomElement$5 } from './salla-loading2.js';
import { d as defineCustomElement$4 } from './salla-modal2.js';
import { d as defineCustomElement$3 } from './salla-rating-stars2.js';
import { d as defineCustomElement$2 } from './salla-slider2.js';
import { d as defineCustomElement$1 } from './salla-tooltip2.js';
var Reply = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>reply</title>
<path d="M20 14.667h-12.609l9.401-6.927c0.592-0.436 0.72-1.271 0.283-1.863-0.439-0.595-1.273-0.72-1.864-0.283l-12.667 9.333c-0.343 0.251-0.544 0.649-0.544 1.072s0.201 0.821 0.543 1.073l12.667 9.333c0.237 0.176 0.515 0.26 0.789 0.26 0.409 0 0.813-0.188 1.075-0.543 0.437-0.592 0.309-1.427-0.283-1.863l-9.4-6.928h12.609c4.412 0 8 3.588 8 8 0 0.737 0.597 1.333 1.333 1.333s1.333-0.596 1.333-1.333c0-5.881-4.785-10.667-10.667-10.667z"></path>
</svg>
`;
var ThumbsUp = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>thumbs-up</title>
<path d="M26.667 10.667h-8.261l1.279-3.38c0.723-1.911 0.087-4.051-1.549-5.203-0.909-0.639-2.004-0.881-3.085-0.684-1.101 0.203-2.061 0.837-2.703 1.787l-5.452 8.067c-0.148 0.22-0.228 0.48-0.228 0.747v12c0 3.676 2.991 6.667 6.667 6.667h8.688c2.535 0 4.817-1.407 5.955-3.671l2.548-5.063c0.093-0.187 0.143-0.392 0.143-0.6v-6.667c0-2.205-1.795-4-4-4zM28 21.017l-2.405 4.78c-0.683 1.359-2.052 2.203-3.573 2.203h-8.688c-2.205 0-4-1.795-4-4v-11.592l5.223-7.728c0.237-0.352 0.584-0.585 0.975-0.657 0.367-0.067 0.749 0.017 1.068 0.241 0.631 0.444 0.879 1.317 0.591 2.079l-1.963 5.185c-0.156 0.409-0.099 0.869 0.149 1.229s0.66 0.576 1.099 0.576h10.192c0.735 0 1.333 0.599 1.333 1.333zM2.667 10.667c-0.736 0-1.333 0.597-1.333 1.333v16c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-16c0-0.736-0.597-1.333-1.333-1.333z"></path>
</svg>
`;
const sallaCommentsCss = ":host{display:block}";
const SallaCommentItem = /*@__PURE__*/ proxyCustomElement(class SallaCommentItem extends HTMLElement {
constructor() {
super();
this.__registerHost();
// Translations
this.locked_trans = salla.lang.get('blocks.comments.locked');
this.has_bought_trans = salla.lang.get('blocks.comments.has_bought');
this.rated_trans = salla.lang.get('pages.rating.rated');
this.waiting_approval_trans = salla.lang.get('blocks.comments.waiting_approval');
this.has_order_trans = salla.lang.get('blocks.comments.has_order');
this.allowLikes = salla.config.get('store.settings.rating.allow_likes');
this.allowAttachImages = salla.config.get('store.settings.rating.allow_attach_images');
this.helpfulLabel = salla.lang.getWithDefault('blocks.comments.helpful', 'مفيد');
this.likesCount = 0;
this.likedComments = [];
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.helpful', 'مفيد');
await setNestedAsync('en.trans', 'blocks.comments.helpful', 'Helpful');
await setNestedAsync('ar.trans', 'blocks.comments.locked', 'الرد غير ظاهر لباقي العملاء');
await setNestedAsync('en.trans', 'blocks.comments.locked', 'The reply is not visible to other customers');
this.helpfulLabel = salla.lang.getWithDefault('blocks.comments.helpful', 'مفيد');
this.locked_trans = salla.lang.getWithDefault('blocks.comments.locked', 'الرد غير ظاهر لباقي العملاء');
};
this.locked_trans = salla.lang.get('blocks.comments.locked');
this.has_bought_trans = salla.lang.get('blocks.comments.has_bought');
this.rated_trans = salla.lang.get('pages.rating.rated');
this.waiting_approval_trans = salla.lang.get('blocks.comments.waiting_approval');
this.has_order_trans = salla.lang.get('blocks.comments.has_order');
setTranslations();
});
}
componentDidLoad() {
if (!this.comment)
return;
this.likesCount = this.comment.likes_count;
try {
this.likedComments = JSON.parse(localStorage.getItem('liked_comments') || '[]');
if (this.likedComments.includes(this.comment.id)) {
this.likeBtn.classList.add('liked');
this.likeBtn.fill = "solid";
}
}
catch {
salla.log('Bad json for liked_comments');
}
}
getReplies() {
return Array.isArray(this.comment.replies) ? this.comment.replies : [this.comment.replies];
}
getDate(dateString) {
const [datePart] = dateString.split(' ');
const [year, month, day] = datePart.split('-');
const formattedDate = `${parseInt(day, 10)}/${parseInt(month, 10)}/${parseInt(year, 10)}`;
return formattedDate;
}
getTime(dateString) {
const [, timePart] = dateString.split(' ');
const [hours, minutes] = timePart.split(':');
const formattedTime = `${parseInt(hours, 10)}:${parseInt(minutes, 10)}`;
return formattedTime;
}
async toggleLike() {
if (salla.config.isGuest()) {
return salla.notify.error(salla.lang.get('common.messages.must_login'));
}
this.likedComments = JSON.parse(localStorage.getItem('liked_comments') || '[]');
const isLiked = this.likedComments.includes(this.comment.id);
try {
const endpoint = isLiked ? `rating/${this.comment.id}/unlike` : `rating/${this.comment.id}/like`;
const res = await salla.api.request(endpoint, '', 'put');
salla.log(res.message);
if (isLiked) {
this.likeBtn.classList.remove('liked');
this.likeBtn.fill = 'outline';
this.updateLikedComments(this.comment.id, false);
this.likesCount--;
}
else {
this.likeBtn.classList.add('liked');
this.likeBtn.fill = 'solid';
this.updateLikedComments(this.comment.id, true);
this.likesCount++;
}
}
catch (e) {
if (e.response.status == 409) {
if (this.likeBtn.classList.contains('liked')) {
this.likeBtn.fill = 'outline';
this.likeBtn.classList.remove('liked');
this.updateLikedComments(this.comment.id, false);
this.likesCount--;
}
else {
this.likeBtn.fill = 'solid';
this.likeBtn.classList.add('liked');
salla.logger.warn('Like already exists');
this.updateLikedComments(this.comment.id, true);
}
}
}
}
updateLikedComments(commentId, add) {
this.likedComments = JSON.parse(localStorage.getItem('liked_comments') || '[]');
if (add) {
if (!this.likedComments.includes(commentId)) {
this.likedComments.push(commentId);
}
}
else {
this.likedComments = this.likedComments.filter(id => id !== commentId);
}
localStorage.setItem('liked_comments', JSON.stringify(this.likedComments));
}
isPrivateComment(comment) {
return comment.status === 'hidden';
}
PinnedIcon() {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "16", height: "16", color: "#555555", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M12 16V21" }), h("path", { d: "M8 5.2918C8 5.02079 8 4.88529 8.01312 4.77132C8.1194 3.84789 8.84789 3.1194 9.77133 3.01312C9.88529 3 10.0208 3 10.2918 3H13.7082C13.9792 3 14.1147 3 14.2287 3.01312C15.1521 3.1194 15.8806 3.84789 15.9869 4.77132C16 4.88529 16 5.02079 16 5.2918C16 5.37885 16 5.42237 15.9967 5.46264C15.9708 5.78281 15.7927 6.07104 15.5179 6.2374C15.4834 6.25832 15.4444 6.27779 15.3666 6.31672L15.1055 6.44726C14.7021 6.64897 14.5003 6.74983 14.3681 6.90564C14.26 7.03286 14.1856 7.18509 14.1515 7.34846C14.1097 7.54854 14.1539 7.76968 14.2424 8.21197L15 12H15.3333C15.9533 12 16.2633 12 16.5176 12.0681C17.2078 12.2531 17.7469 12.7922 17.9319 13.4824C18 13.7367 18 14.0467 18 14.6667C18 14.9767 18 15.1317 17.9659 15.2588C17.8735 15.6039 17.6039 15.8735 17.2588 15.9659C17.1317 16 16.9767 16 16.6667 16H7.33333C7.02334 16 6.86835 16 6.74118 15.9659C6.39609 15.8735 6.12654 15.6039 6.03407 15.2588C6 15.1317 6 14.9767 6 14.6667C6 14.0467 6 13.7367 6.06815 13.4824C6.25308 12.7922 6.79218 12.2531 7.48236 12.0681C7.73669 12 8.04669 12 8.66667 12H9L9.75761 8.21197C9.84606 7.76968 9.89029 7.54854 9.84852 7.34846C9.81441 7.18509 9.73995 7.03286 9.63194 6.90564C9.49965 6.74983 9.29794 6.64897 8.89452 6.44726L8.63344 6.31672C8.55558 6.27779 8.51665 6.25832 8.48208 6.2374C8.20731 6.07104 8.02917 5.78281 8.00326 5.46264C8 5.42237 8 5.37885 8 5.2918Z" })));
}
LockedIcon() {
return (h("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M3.5 4.66683V4.0835C3.5 2.1505 5.067 0.583496 7 0.583496C8.93299 0.583496 10.5 2.1505 10.5 4.0835V4.66683H11.6667C11.9888 4.66683 12.25 4.928 12.25 5.25016V12.2502C12.25 12.5723 11.9888 12.8335 11.6667 12.8335H2.33333C2.01117 12.8335 1.75 12.5723 1.75 12.2502V5.25016C1.75 4.928 2.01117 4.66683 2.33333 4.66683H3.5ZM11.0833 5.8335H2.91667V11.6668H11.0833V5.8335ZM6.41667 9.1774C6.06795 8.97568 5.83333 8.59867 5.83333 8.16683C5.83333 7.52248 6.35565 7.00016 7 7.00016C7.64435 7.00016 8.16667 7.52248 8.16667 8.16683C8.16667 8.59867 7.93205 8.97568 7.58333 9.1774V10.5002H6.41667V9.1774ZM4.66667 4.66683H9.33333V4.0835C9.33333 2.79483 8.28864 1.75016 7 1.75016C5.71134 1.75016 4.66667 2.79483 4.66667 4.0835V4.66683Z", fill: "#555555" })));
}
render() {
if (!this.comment) {
return null;
}
let isAdmin = this.comment.type == 'admin';
return (h(Host, { class: isAdmin ? 's-comments-item-admin' : 's-comments-item' }, h("div", { class: { "s-comments-item-wrapper": !isAdmin, "s-comments-item-admin-wrapper": isAdmin }, id: `s-comments-item-${this.comment.id}` }, h("div", { class: "s-comments-item-inner s-comments-flex-1" }, isAdmin && h("span", { class: "s-comments-item-reply-icon", innerHTML: Reply }), h("div", { class: "s-comments-item-avatar" }, h("img", { "data-src": this.comment?.avatar, alt: this.comment?.name, src: this.comment?.avatar, class: "s-comments-item-avatar-img lazy" })), h("div", { class: "s-comments-flex-1" }, h("div", { class: "s-comments-item-user-wrapper" }, h("div", { class: "s-comments-item-user-info" }, h("h3", { class: this.comment.is_pinned ? "s-comments-item-user-info-name" : "s-comments-item-user-info-name-with-margin" }, this.comment?.name), this.comment.is_pinned ?
h("div", { class: "s-comments-item-pinned-icon-with-margin" }, this.PinnedIcon())
: null, (this.comment.has_order || !!this.comment.rating) && !this.comment.is_pending && !this.hideBought ?
h("div", { class: "s-comments-flex" }, this.comment.has_order ?
[h("span", { class: "s-comments-item-has-order-check-icon", innerHTML: IconVerified }), h("span", { class: "s-comments-item-has-order-check-text" }, this.has_bought_trans, " ", this.comment.rating ? ', ' : '')] : null, !!this.comment.rating ?
h("span", { class: "s-comments-item-rated-widget" }, this.rated_trans) : null)
: null), h("p", { class: "s-comments-item-timestamp s-ltr" }, this.getDate(this.comment.created_at?.date), h("span", { class: "s-comments-item-time" }, " - ", this.getTime(this.comment.created_at?.date))), !!this.comment.rating || !!this.comment.stars ?
h("salla-rating-stars", { size: "mini", class: "s-comments-item-stars", value: this.comment.rating || this.comment.stars })
: null), h("div", { class: "s-comments-item-content" }, h("div", { class: "s-comments-item-content-container" }, this.isPrivateComment(this.comment) ? (h("div", { id: `s-comments-item-${this.comment.id}-locked-icon`, class: "s-comments-item-pinned-icon" }, this.LockedIcon())) : null, h("p", { innerHTML: this.comment.content })), this.isPrivateComment(this.comment) ? (h("salla-tooltip", { text: this.locked_trans, targetId: `s-comments-item-${this.comment.id}-locked-icon` })) : null, this.allowAttachImages && h("div", { class: "s-comments-item-images" }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "", onClick: () => this.modal.open() }))), h("salla-modal", { ref: modal => this.modal = modal, width: "sm" }, h("salla-slider", { id: `s-comments-item-${this.comment.id}-images`, class: "s-comments-item-images-slider", type: "thumbs", "auto-height": true, showControls: this.comment.images.length > 1 ? true : false, "show-thumbs-controls": "false" }, h("div", { slot: 'items' }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "" })))), h("div", { slot: "thumbs" }, this.comment.images.map((image, index) => (h("div", { class: "s-comments-item-images-slider-thumb" }, h("img", { key: index, src: image, alt: "" })))))))), this.allowLikes && !isAdmin && !!this.comment.id && salla.url.is_page('product.single') ? h("salla-button", { ref: el => this.likeBtn = el, class: `s-comments-item-like-btn ${this.likedComments.includes(this.comment.id) ? 'liked' : ''}`, loaderPosition: 'center', fill: 'outline', size: 'small', onClick: () => this.toggleLike() }, h("span", null, this.helpfulLabel, " ", this.likesCount > 0 ? `(${this.likesCount})` : ''), h("span", { innerHTML: ThumbsUp })) : '', this.comment.is_pending ?
h("span", { class: "s-comments-item-pending-text" }, this.waiting_approval_trans) : null))), !!this.getReplies().length && !isAdmin ?
this.getReplies().map((reply) => {
return h("div", null, h("salla-comment-item", { comment: reply }));
}) : null)));
}
get host() { return this; }
static get style() { return sallaCommentsCss; }
}, [0, "salla-comment-item", {
"comment": [16],
"hideBought": [16, "hide-bought"],
"locked_trans": [32],
"has_bought_trans": [32],
"rated_trans": [32],
"waiting_approval_trans": [32],
"has_order_trans": [32],
"allowLikes": [32],
"allowAttachImages": [32],
"helpfulLabel": [32],
"likesCount": [32],
"likedComments": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-comment-item", "salla-button", "salla-comment-item", "salla-loading", "salla-modal", "salla-rating-stars", "salla-slider", "salla-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "salla-comment-item":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaCommentItem);
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "salla-comment-item":
if (!customElements.get(tagName)) {
defineCustomElement();
}
break;
case "salla-loading":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "salla-modal":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "salla-rating-stars":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "salla-slider":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "salla-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { SallaCommentItem as S, defineCustomElement as d };