@salla.sa/twilight-components 2.13.62 → 2.13.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/cjs/app-globals-26c5d5d4.js.map +1 -1
  2. package/dist/cjs/salla-add-product-button_48.cjs.entry.js +8 -6
  3. package/dist/cjs/salla-add-product-button_48.cjs.entry.js.map +1 -1
  4. package/dist/collection/components/salla-comments/salla-comment-item.js +6 -4
  5. package/dist/collection/components/salla-comments/salla-comment-item.js.map +1 -1
  6. package/dist/collection/components/salla-comments/salla-comments.js +2 -2
  7. package/dist/collection/components/salla-comments/salla-comments.js.map +1 -1
  8. package/dist/components/index.js.map +1 -1
  9. package/dist/components/salla-comment-item2.js +6 -4
  10. package/dist/components/salla-comment-item2.js.map +1 -1
  11. package/dist/components/salla-comments.js +2 -2
  12. package/dist/components/salla-comments.js.map +1 -1
  13. package/dist/components/salla-quick-buy2.js.map +1 -1
  14. package/dist/esm/app-globals-70ff1b77.js.map +1 -1
  15. package/dist/esm/salla-add-product-button_48.entry.js +8 -6
  16. package/dist/esm/salla-add-product-button_48.entry.js.map +1 -1
  17. package/dist/esm-es5/app-globals-70ff1b77.js.map +1 -1
  18. package/dist/esm-es5/salla-add-product-button_48.entry.js +3 -3
  19. package/dist/esm-es5/salla-add-product-button_48.entry.js.map +1 -1
  20. package/dist/twilight/{p-9deb641b.entry.js → p-3f21189a.entry.js} +2 -2
  21. package/dist/twilight/p-3f21189a.entry.js.map +1 -0
  22. package/dist/twilight/{p-4212388a.system.entry.js → p-5c56c9a8.system.entry.js} +2 -2
  23. package/dist/twilight/p-5c56c9a8.system.entry.js.map +1 -0
  24. package/dist/twilight/p-aac0f2a6.js.map +1 -1
  25. package/dist/twilight/p-b6075524.system.js.map +1 -1
  26. package/dist/twilight/p-edfb1f0b.system.js +1 -1
  27. package/dist/twilight/twilight.esm.js +1 -1
  28. package/package.json +5 -5
  29. package/dist/twilight/p-4212388a.system.entry.js.map +0 -1
  30. package/dist/twilight/p-9deb641b.entry.js.map +0 -1
@@ -34,13 +34,15 @@ const SallaCommentItem = /*@__PURE__*/ proxyCustomElement(class SallaCommentItem
34
34
  return Array.isArray(this.comment.replies) ? this.comment.replies : [this.comment.replies];
35
35
  }
36
36
  getDate(dateString) {
37
- const date = new Date(dateString);
38
- const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
37
+ const [datePart] = dateString.split(' ');
38
+ const [year, month, day] = datePart.split('-');
39
+ const formattedDate = `${parseInt(month, 10)}/${parseInt(day, 10)}/${parseInt(year, 10)}`;
39
40
  return formattedDate;
40
41
  }
41
42
  getTime(dateString) {
42
- const date = new Date(dateString);
43
- const formattedTime = `${date.getHours()}:${date.getMinutes()}`;
43
+ const [, timePart] = dateString.split(' ');
44
+ const [hours, minutes] = timePart.split(':');
45
+ const formattedTime = `${parseInt(hours, 10)}:${parseInt(minutes, 10)}`;
44
46
  return formattedTime;
45
47
  }
46
48
  render() {
@@ -1 +1 @@
1
- {"file":"salla-comment-item2.js","mappings":"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","names":["CheckIcon"],"sources":["src/components/salla-comments/salla-comments.scss?tag=salla-comment-item","src/components/salla-comments/salla-comment-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, State, Prop, h, Element, Host } from '@stencil/core';\nimport { Comment } from './interfaces';\nimport CheckIcon from \"../../assets/svg/check.svg\"\nimport Reply from \"../../assets/svg/reply.svg\"\n\n@Component({\n tag: 'salla-comment-item',\n styleUrl: 'salla-comments.scss',\n})\nexport class SallaCommentItem {\n\n constructor() {\n salla.lang.onLoaded(() => {\n this.has_bought_trans = salla.lang.get('blocks.comments.has_bought')\n this.rated_trans = salla.lang.get('pages.rating.rated')\n this.waiting_approval_trans = salla.lang.get('blocks.comments.waiting_approval')\n this.has_order_trans = salla.lang.get('blocks.comments.has_order')\n })\n }\n @Element() host: HTMLElement;\n\n /**\n * Single Comment Instance\n */\n @Prop() comment: Comment;\n\n // Translations\n @State() has_bought_trans = salla.lang.get('blocks.comments.has_bought')\n @State() rated_trans = salla.lang.get('pages.rating.rated')\n @State() waiting_approval_trans = salla.lang.get('blocks.comments.waiting_approval')\n @State() has_order_trans = salla.lang.get('blocks.comments.has_order')\n\n private getReplies() {\n return Array.isArray(this.comment.replies) ? this.comment.replies : [this.comment.replies]\n }\n\n private getDate(dateString) {\n const date = new Date(dateString);\n const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;\n return formattedDate;\n }\n private getTime(dateString) {\n const date = new Date(dateString);\n const formattedTime = `${date.getHours()}:${date.getMinutes()}`;\n return formattedTime;\n }\n render() {\n let isAdmin = this.comment.type == 'admin';\n return (\n <Host class={isAdmin ? 's-comments-item-admin' : 's-comments-item'}>\n <div class={{ \"s-comments-item-wrapper\": !isAdmin, \"s-comments-item-admin-wrapper\": isAdmin }} id={`s-comments-item-${this.comment.id}`}>\n <div class=\"s-comments-item-inner s-comments-flex-1\">\n {isAdmin && <span class=\"s-comments-item-reply-icon\" innerHTML={Reply}></span>}\n <div class=\"s-comments-item-avatar\">\n <img data-src={this.comment?.avatar}\n alt={this.comment?.name} src={this.comment?.avatar}\n class=\"s-comments-item-avatar-img lazy\" />\n </div>\n <div class=\"s-comments-flex-1\">\n <div class=\"s-comments-item-user-wrapper\">\n <div class=\"s-comments-item-user-info\">\n <h3 class=\"s-comments-item-user-info-name\">{this.comment?.name}</h3>\n\n {(this.comment.has_order || !!this.comment.rating) && !this.comment.is_pending ?\n <div class=\"s-comments-flex\">\n {this.comment.has_order ?\n [<span class=\"s-comments-item-has-order-check-icon\" innerHTML={CheckIcon}></span>,\n <span class=\"s-comments-item-has-order-check-text\">\n {this.has_bought_trans} {this.comment.rating ? ', ' : ''}\n </span>] : null\n }\n {!!this.comment.rating ?\n <span class=\"s-comments-item-rated-widget\">{\n this.rated_trans}</span> : null}\n </div>\n : null}\n </div>\n\n <p class=\"s-comments-item-timestamp s-ltr\"> {this.getDate(this.comment.created_at?.date)} <span class=\"s-comments-item-time\"> - {this.getTime(this.comment.created_at?.date)} </span></p>\n\n {!!this.comment.rating ?\n <salla-rating-stars size=\"mini\" class=\"s-comments-item-stars\" value={this.comment.rating}></salla-rating-stars>\n : null}\n </div>\n\n <div class=\"s-comments-item-content\">\n <p>{this.comment.content}</p>\n {this.comment.is_pending ?\n <span\n class=\"s-comments-item-pending-text\">{this.waiting_approval_trans}</span> : null}\n {/* {this.comment.has_order ?\n <span data-toggle=\"tooltip\" data-placement=\"right\">{this.has_order_trans}</span>\n : null} */}\n </div>\n </div>\n </div>\n {!!this.getReplies().length && !isAdmin ?\n this.getReplies().map((reply: Comment) => {\n return <div><salla-comment-item comment={reply}></salla-comment-item></div>\n }) : null}\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
1
+ {"file":"salla-comment-item2.js","mappings":"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","names":["CheckIcon"],"sources":["src/components/salla-comments/salla-comments.scss?tag=salla-comment-item","src/components/salla-comments/salla-comment-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, State, Prop, h, Element, Host } from '@stencil/core';\nimport { Comment } from './interfaces';\nimport CheckIcon from \"../../assets/svg/check.svg\"\nimport Reply from \"../../assets/svg/reply.svg\"\n\n@Component({\n tag: 'salla-comment-item',\n styleUrl: 'salla-comments.scss',\n})\nexport class SallaCommentItem {\n\n constructor() {\n salla.lang.onLoaded(() => {\n this.has_bought_trans = salla.lang.get('blocks.comments.has_bought')\n this.rated_trans = salla.lang.get('pages.rating.rated')\n this.waiting_approval_trans = salla.lang.get('blocks.comments.waiting_approval')\n this.has_order_trans = salla.lang.get('blocks.comments.has_order')\n })\n }\n @Element() host: HTMLElement;\n\n /**\n * Single Comment Instance\n */\n @Prop() comment: Comment;\n\n // Translations\n @State() has_bought_trans = salla.lang.get('blocks.comments.has_bought')\n @State() rated_trans = salla.lang.get('pages.rating.rated')\n @State() waiting_approval_trans = salla.lang.get('blocks.comments.waiting_approval')\n @State() has_order_trans = salla.lang.get('blocks.comments.has_order')\n\n private getReplies() {\n return Array.isArray(this.comment.replies) ? this.comment.replies : [this.comment.replies]\n }\n\n private getDate(dateString) {\n const [datePart] = dateString.split(' ');\n const [year, month, day] = datePart.split('-');\n const formattedDate = `${parseInt(month, 10)}/${parseInt(day, 10)}/${parseInt(year, 10)}`;\n return formattedDate;\n }\n \n private getTime(dateString) {\n const [, timePart] = dateString.split(' ');\n const [hours, minutes] = timePart.split(':');\n const formattedTime = `${parseInt(hours, 10)}:${parseInt(minutes, 10)}`;\n return formattedTime;\n }\n \n render() {\n let isAdmin = this.comment.type == 'admin';\n return (\n <Host class={isAdmin ? 's-comments-item-admin' : 's-comments-item'}>\n <div class={{ \"s-comments-item-wrapper\": !isAdmin, \"s-comments-item-admin-wrapper\": isAdmin }} id={`s-comments-item-${this.comment.id}`}>\n <div class=\"s-comments-item-inner s-comments-flex-1\">\n {isAdmin && <span class=\"s-comments-item-reply-icon\" innerHTML={Reply}></span>}\n <div class=\"s-comments-item-avatar\">\n <img data-src={this.comment?.avatar}\n alt={this.comment?.name} src={this.comment?.avatar}\n class=\"s-comments-item-avatar-img lazy\" />\n </div>\n <div class=\"s-comments-flex-1\">\n <div class=\"s-comments-item-user-wrapper\">\n <div class=\"s-comments-item-user-info\">\n <h3 class=\"s-comments-item-user-info-name\">{this.comment?.name}</h3>\n\n {(this.comment.has_order || !!this.comment.rating) && !this.comment.is_pending ?\n <div class=\"s-comments-flex\">\n {this.comment.has_order ?\n [<span class=\"s-comments-item-has-order-check-icon\" innerHTML={CheckIcon}></span>,\n <span class=\"s-comments-item-has-order-check-text\">\n {this.has_bought_trans} {this.comment.rating ? ', ' : ''}\n </span>] : null\n }\n {!!this.comment.rating ?\n <span class=\"s-comments-item-rated-widget\">{\n this.rated_trans}</span> : null}\n </div>\n : null}\n </div>\n\n <p class=\"s-comments-item-timestamp s-ltr\"> {this.getDate(this.comment.created_at?.date)} <span class=\"s-comments-item-time\"> - {this.getTime(this.comment.created_at?.date)} </span></p>\n\n {!!this.comment.rating ?\n <salla-rating-stars size=\"mini\" class=\"s-comments-item-stars\" value={this.comment.rating}></salla-rating-stars>\n : null}\n </div>\n\n <div class=\"s-comments-item-content\">\n <p>{this.comment.content}</p>\n {this.comment.is_pending ?\n <span\n class=\"s-comments-item-pending-text\">{this.waiting_approval_trans}</span> : null}\n {/* {this.comment.has_order ?\n <span data-toggle=\"tooltip\" data-placement=\"right\">{this.has_order_trans}</span>\n : null} */}\n </div>\n </div>\n </div>\n {!!this.getReplies().length && !isAdmin ?\n this.getReplies().map((reply: Comment) => {\n return <div><salla-comment-item comment={reply}></salla-comment-item></div>\n }) : null}\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
@@ -163,9 +163,9 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
163
163
  render() {
164
164
  // We should show a different placeholder for pages and products (WIP)
165
165
  if (this.showPlaceholder) {
166
- return (h("div", null, !!this.total && !this.hideTitle ? h("h2", { class: "s-comments-title" }, this.blockTitle ? this.blockTitle : this.comment_title) : '', !this.hideForm && h("salla-comment-form", { "show-avatar": this.showFormAvatar, type: this.type, "item-id": this.itemId }), h("div", { class: "no-content-placeholder--comments" }, h("i", { class: "sicon-chat-bubbles text-5xl block mb-5 text-gray-400" }), h("p", { class: "text-sm" }, this.noComments))));
166
+ return (h("div", null, !!this.total && !this.hideTitle ? h("h2", { class: "s-comments-title" }, this.blockTitle ? this.blockTitle : this.comment_title) : '', !this.hideForm && h("salla-comment-form", { showAvatar: this.showFormAvatar, type: this.type, "item-id": this.itemId }), h("div", { class: "no-content-placeholder--comments" }, h("i", { class: "sicon-chat-bubbles text-5xl block mb-5 text-gray-400" }), h("p", { class: "text-sm" }, this.noComments))));
167
167
  }
168
- return (h("div", { class: `s-comments s-comments-${this.type}` }, h("div", { class: `${this.type == CommentType.PAGE ? "s-comments-page-container" : "s-comments-container"}` }, !!this.total && !this.hideTitle ? h("h2", { class: "s-comments-title" }, this.blockTitle ? this.blockTitle : this.comment_title) : '', !this.hideForm && h("salla-comment-form", { type: this.type, "item-id": this.itemId }), !!this.total && h("h2", { class: "s-comments-count-label", innerHTML: this.pluralize(this.comment_name, this.total) }), h("div", { ref: wrapper => this.wrapper = wrapper }), this.nextPage && (h("div", { class: "s-infinite-scroll-wrapper", ref: status => this.status = status }, h("button", { onClick: () => this.loadMore(), class: "s-infinite-scroll-btn s-button-btn s-button-primary" }, h("span", { class: "s-button-text s-infinite-scroll-btn-text" }, this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more')), h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader", ref: btnLoader => this.btnLoader = btnLoader, style: { "display": "none" } })))))));
168
+ return (h("div", { class: `s-comments s-comments-${this.type}` }, h("div", { class: `${this.type == CommentType.PAGE ? "s-comments-page-container" : "s-comments-container"}` }, !!this.total && !this.hideTitle ? h("h2", { class: "s-comments-title" }, this.blockTitle ? this.blockTitle : this.comment_title) : '', !this.hideForm && h("salla-comment-form", { showAvatar: this.showFormAvatar, type: this.type, "item-id": this.itemId }), !!this.total && h("h2", { class: "s-comments-count-label", innerHTML: this.pluralize(this.comment_name, this.total) }), h("div", { ref: wrapper => this.wrapper = wrapper }), this.nextPage && (h("div", { class: "s-infinite-scroll-wrapper", ref: status => this.status = status }, h("button", { onClick: () => this.loadMore(), class: "s-infinite-scroll-btn s-button-btn s-button-primary" }, h("span", { class: "s-button-text s-infinite-scroll-btn-text" }, this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more')), h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader", ref: btnLoader => this.btnLoader = btnLoader, style: { "display": "none" } })))))));
169
169
  }
170
170
  async componentWillLoad() {
171
171
  await this.loadInitialData(); // Load initial data before rendering the component
@@ -1 +1 @@
1
- {"file":"salla-comments.js","mappings":"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","names":["SallaComments"],"sources":["src/components/salla-comments/interfaces.ts","src/components/salla-comments/salla-comments.scss?tag=salla-comments","src/components/salla-comments/salla-comments.tsx"],"sourcesContent":["export enum CommentType {\n PAGE= \"page\",\n PRODUCT = \"product\"\n}\n\nexport interface Comment {\n id?: number;\n avatar?: string;\n name?: string;\n has_order?: boolean;\n date?: string;\n rating?: number;\n content?: string;\n is_pending?: boolean;\n replies?: Comment[];\n customer?: Customer;\n type?: string;\n created_at?: CreatedAt;\n}\nexport interface CreatedAt {\n date?: Date;\n timezone_type?: number;\n timezone?: string;\n}\nexport interface UserComments {\n id?: number;\n type?: string;\n next_page?: string;\n comments?: Comment[];\n}\n\n// Pagination\nexport interface Pagination {\n count?: number;\n total?: number;\n perPage?: number;\n currentPage?: number;\n totalPages?: number;\n links?: Links;\n}\nexport interface Customer {\n id?: number;\n name?: string;\n mobile?: string;\n email?: string;\n avatar?: string;\n country?: string;\n city?: string;\n}\nexport interface Links {\n next?: string;\n}\n",":host {\n display: block;\n}\n","import { Component, Prop, State, Element, h } from '@stencil/core';\nimport { CommentType, UserComments, Pagination } from './interfaces';\nimport anime from 'animejs';\nimport Helper from '../../Helpers/Helper';\n@Component({\n tag: 'salla-comments',\n styleUrl: 'salla-comments.scss',\n})\nexport class SallaComments {\n\n constructor() {\n salla.lang.onLoaded(() => {\n this.comment_title = salla.lang.get('blocks.comments.title')\n this.comment_name = salla.lang.get('blocks.comments.comment')\n this.noComments = salla.lang.get('pages.rating.no_ratings')\n })\n }\n\n /**\n * Page or product ID\n */\n @Prop() itemId!: number;\n\n /**\n * Load more text\n */\n @Prop() loadMoreText: string;\n\n /**\n * Load more text\n */\n @Prop() hideForm: boolean;\n\n /**\n * Block Title\n */\n @Prop() blockTitle: string;\n \n /**\n * Hide Title\n */\n @Prop() hideTitle: boolean;\n\n /**\n * Comment Type\n */\n @Prop() type: CommentType.PAGE | CommentType.PRODUCT = CommentType.PAGE;\n\n /**\n * Show or hide avatar\n */\n @Prop() showFormAvatar: boolean = false;\n\n @State() comments: UserComments[];\n @State() pagination: Pagination;\n @State() total: number;\n @State() showPlaceholder: boolean;\n @State() nextPage: string;\n\n private status: any;\n private btnLoader: any;\n private infiniteScroll: any;\n private wrapper: any;\n\n @Element() host: HTMLElement;\n\n // Translations\n @State() noComments: string = salla.lang.get('blocks.comments.no_comments');\n @State() comment_title = salla.lang.get('blocks.comments.title')\n @State() comment_name = salla.lang.get('blocks.comments.comment')\n @State() placeholder_text: string;\n\n // TOOD: it's a good idea to move this into lang.js\n // Pluralize a string based on the count\n private pluralize(phrases: string, count: number): string {\n const options = phrases.split('|');\n\n const conditions = [\n { condition: count === 0, index: 0 },\n { condition: count === 1, index: 1 },\n { condition: count === 2, index: 2 },\n { condition: count > 2 && count <= 10, index: 3 },\n { condition: count >= 11, index: 4 }\n ];\n\n const { index } = conditions.find(({ condition }) => condition) || { index: options.length - 1 };\n\n const selectedOption = options[index];\n return selectedOption.replace(':count', salla.helpers.number(count.toString()))\n .replace(/\\{[0-9]+\\}/g, '')\n .replace(/\\[\\d+,\\d+\\]|\\[11,\\*\\]/g, '');\n }\n\n\n\n // Initiate infinite scroll\n private initiateInfiniteScroll() {\n if (!this.wrapper) {\n console.error('Wrapper is undefined. Cannot initiate infinite scroll.');\n return;\n }\n\n this.infiniteScroll = salla.infiniteScroll.initiate(this.wrapper, this.wrapper, {\n path: () => this.nextPage,\n history: true,\n nextPage: this.nextPage,\n scrollThreshold: false,\n }, true);\n\n this.infiniteScroll?.on('request', _response => {\n this.loading();\n });\n this.infiniteScroll?.on('load', response => {\n this.pagination = response.pagination;\n this.nextPage = typeof response.pagination.links == 'object' && !!response.pagination.links.next ? response.pagination.links.next : null;\n this.handleResponse(response).forEach(card => this.wrapper.append(card));\n\n let items = this.host.querySelectorAll('salla-comment-item:not(.animated):not(.s-comments-item-admin)');\n this.animateItems(items);\n this.loading(false);\n });\n this.infiniteScroll?.on('error', (e) => {\n salla.console.error('Error loading more comments:', e);\n });\n }\n\n // Show/hide loading\n private loading(isLoading = true) {\n let btnText = this.status?.querySelector('.s-button-text');\n if (btnText) {\n Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);\n this.btnLoader.style.display = isLoading ? 'inherit' : 'none';\n }\n }\n\n // Animate newly added items\n private animateItems(items) {\n anime({\n targets: items,\n opacity: [0, 1],\n duration: 1200,\n translateY: [20, 0],\n delay: function (_el, i) {\n return i * 100;\n },\n easing: 'easeOutExpo',\n complete: function (_anim) {\n items.forEach(item => {\n item.classList.add('animated');\n })\n }\n\n })\n }\n\n // Get comment item HTML\n private getCommentHTML(comment) {\n const commentItem = document.createElement('salla-comment-item') as HTMLSallaCommentItemElement;\n commentItem.comment = comment;\n\n return commentItem;\n }\n\n\n\n // Parse response and return an array of comment items to be appended to the wrapper\n private handleResponse(response): Array<HTMLElement> {\n return response.data?.map(comment => this.getCommentHTML(comment)) || [];\n }\n\n\n\n // Load initial data\n private async loadInitialData() {\n this.loading();\n try {\n const resp = await (this.type == CommentType.PAGE\n ? salla.api.comment.getPageComments(this.itemId)\n : salla.api.comment.getProductComments(this.itemId));\n if (!resp.data || !resp.data.length) {\n this.showPlaceholder = false;\n this.loading(false);\n return;\n }\n this.comments = resp.data;\n this.pagination = resp.pagination;\n this.total = resp.pagination.total;\n this.nextPage = typeof resp.pagination.links == 'object' && !!resp.pagination.links.next ? resp.pagination.links.next : null;\n\n\n setTimeout(() => {\n this.handleResponse(resp).forEach(card => this.wrapper.append(card));\n this.initiateInfiniteScroll(); // Initiate infinite scroll after the initial data is loaded\n let items = this.wrapper.querySelectorAll('salla-comment-item:not(.animated)');\n this.animateItems(items);\n }, 100);\n } catch (error) {\n console.error('Error loading initial data:', error);\n this.showPlaceholder = true;\n this.loading(false);\n }\n }\n\n // Get next page\n async loadMore() {\n this.infiniteScroll?.loadNextPage();\n }\n\n render() {\n // We should show a different placeholder for pages and products (WIP)\n if (this.showPlaceholder) {\n return (\n <div>\n {!!this.total && !this.hideTitle ? <h2 class=\"s-comments-title\">{this.blockTitle ? this.blockTitle : this.comment_title}</h2> : ''}\n {!this.hideForm && <salla-comment-form show-avatar={this.showFormAvatar} type={this.type} item-id={this.itemId}></salla-comment-form>}\n <div class=\"no-content-placeholder--comments\">\n <i class=\"sicon-chat-bubbles text-5xl block mb-5 text-gray-400\"></i>\n <p class=\"text-sm\">{this.noComments}</p>\n </div>\n </div>\n )\n }\n return (\n <div class={`s-comments s-comments-${this.type}`}>\n <div class={`${this.type == CommentType.PAGE ? \"s-comments-page-container\" : \"s-comments-container\"}`} >\n {!!this.total && !this.hideTitle ? <h2 class=\"s-comments-title\">{this.blockTitle ? this.blockTitle : this.comment_title}</h2> : ''}\n {!this.hideForm && <salla-comment-form type={this.type} item-id={this.itemId}></salla-comment-form>}\n\n {!!this.total && <h2 class=\"s-comments-count-label\" innerHTML={this.pluralize(this.comment_name, this.total)}></h2>}\n <div ref={wrapper => this.wrapper = wrapper}></div>\n\n\n {this.nextPage && (\n <div class=\"s-infinite-scroll-wrapper\" ref={status => this.status = status}>\n <button onClick={() => this.loadMore()} class=\"s-infinite-scroll-btn s-button-btn s-button-primary\">\n <span class=\"s-button-text s-infinite-scroll-btn-text\">{this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more')}</span>\n <span class=\"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader\" ref={btnLoader => this.btnLoader = btnLoader} style={{ \"display\": \"none\" }}></span>\n </button>\n </div>\n )}\n </div>\n </div>\n\n );\n }\n\n\n\n async componentWillLoad() {\n await this.loadInitialData(); // Load initial data before rendering the component\n }\n\n}\n"],"version":3}
1
+ {"file":"salla-comments.js","mappings":"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","names":["SallaComments"],"sources":["src/components/salla-comments/interfaces.ts","src/components/salla-comments/salla-comments.scss?tag=salla-comments","src/components/salla-comments/salla-comments.tsx"],"sourcesContent":["export enum CommentType {\n PAGE= \"page\",\n PRODUCT = \"product\"\n}\n\nexport interface Comment {\n id?: number;\n avatar?: string;\n name?: string;\n has_order?: boolean;\n date?: string;\n rating?: number;\n content?: string;\n is_pending?: boolean;\n replies?: Comment[];\n customer?: Customer;\n type?: string;\n created_at?: CreatedAt;\n}\nexport interface CreatedAt {\n date?: Date;\n timezone_type?: number;\n timezone?: string;\n}\nexport interface UserComments {\n id?: number;\n type?: string;\n next_page?: string;\n comments?: Comment[];\n}\n\n// Pagination\nexport interface Pagination {\n count?: number;\n total?: number;\n perPage?: number;\n currentPage?: number;\n totalPages?: number;\n links?: Links;\n}\nexport interface Customer {\n id?: number;\n name?: string;\n mobile?: string;\n email?: string;\n avatar?: string;\n country?: string;\n city?: string;\n}\nexport interface Links {\n next?: string;\n}\n",":host {\n display: block;\n}\n","import { Component, Prop, State, Element, h } from '@stencil/core';\nimport { CommentType, UserComments, Pagination } from './interfaces';\nimport anime from 'animejs';\nimport Helper from '../../Helpers/Helper';\n@Component({\n tag: 'salla-comments',\n styleUrl: 'salla-comments.scss',\n})\nexport class SallaComments {\n\n constructor() {\n salla.lang.onLoaded(() => {\n this.comment_title = salla.lang.get('blocks.comments.title')\n this.comment_name = salla.lang.get('blocks.comments.comment')\n this.noComments = salla.lang.get('pages.rating.no_ratings')\n })\n }\n\n /**\n * Page or product ID\n */\n @Prop() itemId!: number;\n\n /**\n * Load more text\n */\n @Prop() loadMoreText: string;\n\n /**\n * Load more text\n */\n @Prop() hideForm: boolean;\n\n /**\n * Block Title\n */\n @Prop() blockTitle: string;\n \n /**\n * Hide Title\n */\n @Prop() hideTitle: boolean;\n\n /**\n * Comment Type\n */\n @Prop() type: CommentType.PAGE | CommentType.PRODUCT = CommentType.PAGE;\n\n /**\n * Show or hide avatar\n */\n @Prop() showFormAvatar: boolean = false;\n\n @State() comments: UserComments[];\n @State() pagination: Pagination;\n @State() total: number;\n @State() showPlaceholder: boolean;\n @State() nextPage: string;\n\n private status: any;\n private btnLoader: any;\n private infiniteScroll: any;\n private wrapper: any;\n\n @Element() host: HTMLElement;\n\n // Translations\n @State() noComments: string = salla.lang.get('blocks.comments.no_comments');\n @State() comment_title = salla.lang.get('blocks.comments.title')\n @State() comment_name = salla.lang.get('blocks.comments.comment')\n @State() placeholder_text: string;\n\n // TOOD: it's a good idea to move this into lang.js\n // Pluralize a string based on the count\n private pluralize(phrases: string, count: number): string {\n const options = phrases.split('|');\n\n const conditions = [\n { condition: count === 0, index: 0 },\n { condition: count === 1, index: 1 },\n { condition: count === 2, index: 2 },\n { condition: count > 2 && count <= 10, index: 3 },\n { condition: count >= 11, index: 4 }\n ];\n\n const { index } = conditions.find(({ condition }) => condition) || { index: options.length - 1 };\n\n const selectedOption = options[index];\n return selectedOption.replace(':count', salla.helpers.number(count.toString()))\n .replace(/\\{[0-9]+\\}/g, '')\n .replace(/\\[\\d+,\\d+\\]|\\[11,\\*\\]/g, '');\n }\n\n\n\n // Initiate infinite scroll\n private initiateInfiniteScroll() {\n if (!this.wrapper) {\n console.error('Wrapper is undefined. Cannot initiate infinite scroll.');\n return;\n }\n\n this.infiniteScroll = salla.infiniteScroll.initiate(this.wrapper, this.wrapper, {\n path: () => this.nextPage,\n history: true,\n nextPage: this.nextPage,\n scrollThreshold: false,\n }, true);\n\n this.infiniteScroll?.on('request', _response => {\n this.loading();\n });\n this.infiniteScroll?.on('load', response => {\n this.pagination = response.pagination;\n this.nextPage = typeof response.pagination.links == 'object' && !!response.pagination.links.next ? response.pagination.links.next : null;\n this.handleResponse(response).forEach(card => this.wrapper.append(card));\n\n let items = this.host.querySelectorAll('salla-comment-item:not(.animated):not(.s-comments-item-admin)');\n this.animateItems(items);\n this.loading(false);\n });\n this.infiniteScroll?.on('error', (e) => {\n salla.console.error('Error loading more comments:', e);\n });\n }\n\n // Show/hide loading\n private loading(isLoading = true) {\n let btnText = this.status?.querySelector('.s-button-text');\n if (btnText) {\n Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);\n this.btnLoader.style.display = isLoading ? 'inherit' : 'none';\n }\n }\n\n // Animate newly added items\n private animateItems(items) {\n anime({\n targets: items,\n opacity: [0, 1],\n duration: 1200,\n translateY: [20, 0],\n delay: function (_el, i) {\n return i * 100;\n },\n easing: 'easeOutExpo',\n complete: function (_anim) {\n items.forEach(item => {\n item.classList.add('animated');\n })\n }\n\n })\n }\n\n // Get comment item HTML\n private getCommentHTML(comment) {\n const commentItem = document.createElement('salla-comment-item') as HTMLSallaCommentItemElement;\n commentItem.comment = comment;\n\n return commentItem;\n }\n\n\n\n // Parse response and return an array of comment items to be appended to the wrapper\n private handleResponse(response): Array<HTMLElement> {\n return response.data?.map(comment => this.getCommentHTML(comment)) || [];\n }\n\n\n\n // Load initial data\n private async loadInitialData() {\n this.loading();\n try {\n const resp = await (this.type == CommentType.PAGE\n ? salla.api.comment.getPageComments(this.itemId)\n : salla.api.comment.getProductComments(this.itemId));\n if (!resp.data || !resp.data.length) {\n this.showPlaceholder = false;\n this.loading(false);\n return;\n }\n this.comments = resp.data;\n this.pagination = resp.pagination;\n this.total = resp.pagination.total;\n this.nextPage = typeof resp.pagination.links == 'object' && !!resp.pagination.links.next ? resp.pagination.links.next : null;\n\n\n setTimeout(() => {\n this.handleResponse(resp).forEach(card => this.wrapper.append(card));\n this.initiateInfiniteScroll(); // Initiate infinite scroll after the initial data is loaded\n let items = this.wrapper.querySelectorAll('salla-comment-item:not(.animated)');\n this.animateItems(items);\n }, 100);\n } catch (error) {\n console.error('Error loading initial data:', error);\n this.showPlaceholder = true;\n this.loading(false);\n }\n }\n\n // Get next page\n async loadMore() {\n this.infiniteScroll?.loadNextPage();\n }\n\n render() {\n // We should show a different placeholder for pages and products (WIP)\n if (this.showPlaceholder) {\n return (\n <div>\n {!!this.total && !this.hideTitle ? <h2 class=\"s-comments-title\">{this.blockTitle ? this.blockTitle : this.comment_title}</h2> : ''}\n {!this.hideForm && <salla-comment-form showAvatar={this.showFormAvatar} type={this.type} item-id={this.itemId}></salla-comment-form>}\n <div class=\"no-content-placeholder--comments\">\n <i class=\"sicon-chat-bubbles text-5xl block mb-5 text-gray-400\"></i>\n <p class=\"text-sm\">{this.noComments}</p>\n </div>\n </div>\n )\n }\n return (\n <div class={`s-comments s-comments-${this.type}`}>\n <div class={`${this.type == CommentType.PAGE ? \"s-comments-page-container\" : \"s-comments-container\"}`} >\n {!!this.total && !this.hideTitle ? <h2 class=\"s-comments-title\">{this.blockTitle ? this.blockTitle : this.comment_title}</h2> : ''}\n {!this.hideForm && <salla-comment-form showAvatar={this.showFormAvatar} type={this.type} item-id={this.itemId}></salla-comment-form>}\n\n {!!this.total && <h2 class=\"s-comments-count-label\" innerHTML={this.pluralize(this.comment_name, this.total)}></h2>}\n <div ref={wrapper => this.wrapper = wrapper}></div>\n\n\n {this.nextPage && (\n <div class=\"s-infinite-scroll-wrapper\" ref={status => this.status = status}>\n <button onClick={() => this.loadMore()} class=\"s-infinite-scroll-btn s-button-btn s-button-primary\">\n <span class=\"s-button-text s-infinite-scroll-btn-text\">{this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more')}</span>\n <span class=\"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader\" ref={btnLoader => this.btnLoader = btnLoader} style={{ \"display\": \"none\" }}></span>\n </button>\n </div>\n )}\n </div>\n </div>\n\n );\n }\n\n\n\n async componentWillLoad() {\n await this.loadInitialData(); // Load initial data before rendering the component\n }\n\n}\n"],"version":3}