@salla.sa/twilight-components
Version:
Salla Web Component
215 lines (214 loc) • 13.9 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { h, Host } from "@stencil/core";
import CheckIcon from "../../assets/svg/check.svg";
import Reply from "../../assets/svg/reply.svg";
import ThumbsUp from "../../assets/svg/thumbs-up.svg";
export class SallaCommentItem {
constructor() {
// Translations
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');
this.helpfulLabel = salla.lang.getWithDefault('blocks.comments.helpful', 'مفيد');
};
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() {
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));
}
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" })));
}
render() {
let isAdmin = this.comment.type == 'admin';
return (h(Host, { key: '3f9d4b98cff2dd49259d3386b4996b905f92d7db', class: isAdmin ? 's-comments-item-admin' : 's-comments-item' }, h("div", { key: '1348f11b2e553be483f60c5c558d3e800f050700', class: { "s-comments-item-wrapper": !isAdmin, "s-comments-item-admin-wrapper": isAdmin }, id: `s-comments-item-${this.comment.id}` }, h("div", { key: '0587afd7ae1fc27b12fc4fd2c9ef4bf9e919d04a', class: "s-comments-item-inner s-comments-flex-1" }, isAdmin && h("span", { key: '40009b2b3b9af60481d0e40d5fb919076ab43b10', class: "s-comments-item-reply-icon", innerHTML: Reply }), h("div", { key: '8f0563811445046ecf5ce3abe6ee6d7d1ec4a235', class: "s-comments-item-avatar" }, h("img", { key: '5f82bb9d3a5c4c340f37b8e48af3edce42c133f8', "data-src": this.comment?.avatar, alt: this.comment?.name, src: this.comment?.avatar, class: "s-comments-item-avatar-img lazy" })), h("div", { key: '34581ee9fddaa2f79ee933efb65c2e354010f37a', class: "s-comments-flex-1" }, h("div", { key: 'e03fc074d5ac8ddf183e3b081001e73dd62a7116', class: "s-comments-item-user-wrapper" }, h("div", { key: '6ea5e07eb9fa35d7673019628e6fde4605b74e0c', class: "s-comments-item-user-info" }, h("h3", { key: '18d7cf8c8b8125138a544bd10027ae7503f2f3a6', 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: CheckIcon }), 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", { key: '694c2079d3379966994af7040fe4542481a53e66', class: "s-comments-item-timestamp s-ltr" }, this.getDate(this.comment.created_at?.date), h("span", { key: '734ca2eb6bf846c661007a1b9c41f22c47923b27', 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", { key: '45e32a0759536f8c9e8bc8b823d50c931bdd1e23', class: "s-comments-item-content" }, h("p", { key: '9edf2cdfd489f77214d7a1ecae8a99943dfd4ece', innerHTML: this.comment.content }), this.allowAttachImages && h("div", { key: 'bbba6c62c4d13289137c634f5413880dfa572ab4', 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", { key: 'cd5c48b8cf3e1c9457a2fb60a42859cbd91aa996', ref: modal => this.modal = modal, width: "sm" }, h("salla-slider", { key: '304bc9417e6d7fd0e310127dce4e56a1c6ce00ea', 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", { key: '50401766737293c42fa7ba3b351b6db736fd92eb', slot: 'items' }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "" })))), h("div", { key: '6b9a50da0b67497dfae21b52044850329d8712b5', 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 && 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)));
}
static get is() { return "salla-comment-item"; }
static get originalStyleUrls() {
return {
"$": ["salla-comments.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-comments.css"]
};
}
static get properties() {
return {
"comment": {
"type": "unknown",
"attribute": "comment",
"mutable": false,
"complexType": {
"original": "Comment",
"resolved": "Comment",
"references": {
"Comment": {
"location": "import",
"path": "./interfaces",
"id": "src/components/salla-comments/interfaces.ts::Comment"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Single Comment Instance"
},
"getter": false,
"setter": false
},
"hideBought": {
"type": "unknown",
"attribute": "hide-bought",
"mutable": false,
"complexType": {
"original": "Boolean",
"resolved": "Boolean",
"references": {
"Boolean": {
"location": "global",
"id": "global::Boolean"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Hide Bought"
},
"getter": false,
"setter": false
}
};
}
static get states() {
return {
"has_bought_trans": {},
"rated_trans": {},
"waiting_approval_trans": {},
"has_order_trans": {},
"allowLikes": {},
"allowAttachImages": {},
"helpfulLabel": {},
"likesCount": {},
"likedComments": {}
};
}
static get elementRef() { return "host"; }
}