@kompasid/lit-web-components 0.8.16 → 0.8.18

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 (13) hide show
  1. package/demo/index.html +4 -4
  2. package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js +19 -15
  3. package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js.map +1 -1
  4. package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js +16 -10
  5. package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js.map +1 -1
  6. package/dist/tailwind/tailwind.js +143 -133
  7. package/dist/tailwind/tailwind.js.map +1 -1
  8. package/dist/tsconfig.tsbuildinfo +1 -1
  9. package/package.json +1 -1
  10. package/src/components/kompasid-header-notification/KompasHeaderNotification.ts +19 -18
  11. package/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts +16 -10
  12. package/tailwind/tailwind.css +80 -20
  13. package/tailwind/tailwind.ts +143 -133
package/demo/index.html CHANGED
@@ -277,7 +277,7 @@
277
277
  .tracker_metered_wall_balance=${trackerMeteredWallBalance}
278
278
  >
279
279
  </kompasid-freewall>
280
- <!-- <kompasid-metered-wall-register
280
+ <kompasid-metered-wall-register
281
281
  .id=${'metered-wall-register'}
282
282
  .countdownArticle=${countdownArticle}
283
283
  .tracker_page_title=${trackerPageTitle}
@@ -296,9 +296,9 @@
296
296
  .tracker_metered_wall_balance=${trackerMeteredWallBalance}
297
297
  .tracker_page_domain=${trackerPageDomain}
298
298
  source="kompasid"
299
- ></kompasid-metered-wall-register> -->
299
+ ></kompasid-metered-wall-register>
300
300
 
301
- <kompasid-grace-period
301
+ <!-- <kompasid-grace-period
302
302
  totalGracePeriod="1"
303
303
  isShowButton="true"
304
304
  .paywall_location=${paywallLocation}
@@ -316,7 +316,7 @@
316
316
  .tracker_metered_wall_type=${meteredWallType}
317
317
  .tracker_subscription_status=${trackerSubscriptionStatus}
318
318
  .tracker_metered_wall_balance=${trackerMeteredWallBalance}
319
- ></kompasid-grace-period>
319
+ ></kompasid-grace-period> -->
320
320
  `,
321
321
  document.querySelector('#demo')
322
322
  )
package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js CHANGED
@@ -167,7 +167,7 @@ let KompasHeaderNotification = class KompasHeaderNotification extends LitElement
167
167
  const data = {
168
168
  title,
169
169
  category: [{ name: 'ePaper', slug: 'epaper' }],
170
- publishedDateGmt: format(new Date(publishDate), 'yyyy-MM-dd HH:mm:ss'),
170
+ publishedDate: format(new Date(publishDate), 'yyyy-MM-dd HH:mm:ss'),
171
171
  permalink: url,
172
172
  thumbnails: {
173
173
  sizes: { thumbnailSquareMedium: { permalink: thumbnail } },
@@ -175,8 +175,8 @@ let KompasHeaderNotification = class KompasHeaderNotification extends LitElement
175
175
  excerpt: description,
176
176
  };
177
177
  this.notificationContentData = [data, ...rubrikData];
178
- this.notificationContentData.sort((a, b) => new Date(b.publishedDateGmt).getTime() -
179
- new Date(a.publishedDateGmt).getTime());
178
+ this.notificationContentData.sort((a, b) => new Date(b.publishedDate).getTime() -
179
+ new Date(a.publishedDate).getTime());
180
180
  this.isDataLoaded = true;
181
181
  });
182
182
  }
@@ -190,9 +190,7 @@ let KompasHeaderNotification = class KompasHeaderNotification extends LitElement
190
190
  const notificationIndicator = () => {
191
191
  if (!this.notificationInfoData.notificationCount)
192
192
  return html ``;
193
- return html `<div
194
- class="header-account--notification-indicator animate-ping"
195
- ></div>`;
193
+ return html `<div class="header-account--notification-indicator"></div>`;
196
194
  };
197
195
  return html `
198
196
  <button
@@ -250,8 +248,8 @@ let KompasHeaderNotification = class KompasHeaderNotification extends LitElement
250
248
  >${this.formatDate(item.time)}</span
251
249
  >
252
250
  </div>
253
- <div>
254
- <p class="text-sm font-bold">${item.title}</p>
251
+ <div class="text-grey-600">
252
+ <p class="text-sm font-bold break-words">${item.title}</p>
255
253
  <p class="text-sm">${item.description}</p>
256
254
  </div>
257
255
  </div>
@@ -307,10 +305,12 @@ let KompasHeaderNotification = class KompasHeaderNotification extends LitElement
307
305
  ${item.category[0].name}
308
306
  </span>
309
307
  <span class="text-grey-400 ml-2">
310
- ${this.formatDate(item.publishedDateGmt)}</span
308
+ ${this.formatDate(item.publishedDate)}</span
311
309
  >
312
310
  </div>
313
- <p class="font-bold text-sm text-customTextColor py-1">${item.title}</p>
311
+ <p class="font-bold text-sm text-grey-600 py-1 break-words">
312
+ ${item.title}
313
+ </p>
314
314
  </div>
315
315
  <div class="w-1/4">
316
316
  <img
@@ -345,14 +345,14 @@ let KompasHeaderNotification = class KompasHeaderNotification extends LitElement
345
345
  return html `
346
346
  <div
347
347
  id="notificationPopup"
348
- class="header-notificaion-dropdown rounded-lg shadow-lg z-50 mt-2 ${this
348
+ class="header-notification-dropdown rounded-lg shadow-lg z-50 mt-2 ${this
349
349
  .isShowDropdown
350
350
  ? 'active'
351
351
  : ''}"
352
352
  >
353
353
  <div class="sticky">
354
354
  <div class="flex justify-center py-4 border-b border-grey-300">
355
- <span class="font-bold text-base">Notifikasi</span>
355
+ <span class="font-bold text-base text-grey-700">Notifikasi</span>
356
356
  </div>
357
357
  <!-- Tabs for Info and Content -->
358
358
  <div class="flex justify-between text-grey-400">
@@ -447,7 +447,11 @@ KompasHeaderNotification.styles = [
447
447
  top: -0.281rem;
448
448
  }
449
449
 
450
- .header-notificaion-dropdown {
450
+ .break-words {
451
+ overflow-wrap: break-word;
452
+ }
453
+
454
+ .header-notification-dropdown {
451
455
  width: 20.5rem;
452
456
  background-color: #ffffff;
453
457
  font-family: 'PT Sans', sans-serif;
@@ -532,13 +536,13 @@ KompasHeaderNotification.styles = [
532
536
  }
533
537
 
534
538
  @media (min-width: 1024px) {
535
- .header-notificaion-dropdown {
539
+ .header-notification-dropdown {
536
540
  right: -4vmax;
537
541
  }
538
542
  }
539
543
 
540
544
  @media (max-width: 360px) {
541
- .header-notificaion-dropdown {
545
+ .header-notification-dropdown {
542
546
  right: -10vmax;
543
547
  }
544
548
  }
package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"KompasHeaderNotification.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-notification/KompasHeaderNotification.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, isToday, formatDistanceStrict, subDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport {\n UserNotification,\n NotificationList,\n ApiResponse,\n ApiRubrikResponse,\n} from './types.js'\nimport { customFetch } from './utils.js'\n\n@customElement('kompasid-header-notification')\nexport class KompasHeaderNotification extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .header-account--notification-indicator {\n position: absolute;\n top: 0;\n height: 0.5rem;\n width: 0.5rem;\n background-color: #ff7a00;\n border-radius: 50%;\n right: -0.403rem;\n top: -0.281rem;\n }\n\n .header-notificaion-dropdown {\n width: 20.5rem;\n background-color: #ffffff;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.875rem;\n position: absolute;\n right: -7.5vmax;\n }\n\n .w-14 {\n width: 3.25rem;\n }\n\n .pb-18 {\n padding-bottom: 4.5rem;\n }\n\n .h-\\\\[300px\\\\] {\n height: 300px;\n }\n\n .h-14 {\n height: 3.25rem;\n }\n\n .bg-green-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(238 252 210 / var(--tw-bg-opacity));\n }\n\n .overflow-y-scroll {\n overflow-y: scroll;\n }\n\n .link-active {\n color: #0468cb;\n border-color: #0468cb;\n border-bottom-width: 3px;\n background-color: transparent !important;\n }\n\n .animate-spin {\n animation: spin 2s linear infinite;\n }\n\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n .object-cover {\n object-fit: cover;\n }\n\n .z-index-max {\n z-index: 99999;\n }\n\n /* Custom Scrollbar for header */\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #0356a8;\n border-radius: 100px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: #0356a8;\n }\n\n @media (min-width: 1024px) {\n .header-notificaion-dropdown {\n right: -4vmax;\n }\n }\n\n @media (max-width: 360px) {\n .header-notificaion-dropdown {\n right: -10vmax;\n }\n }\n `,\n TWStyles,\n ]\n\n @state() isShowDropdown: boolean = false\n @state() selectedTab: string = 'Info'\n @state() notificationInfoData: UserNotification = {} as UserNotification\n @state() notificationContentData: any[] = []\n @state() isDataLoaded: boolean = false\n\n /*\n * property accessToken is the access token of the user\n * property refreshToken is the refresh token of the user\n * property domain is the domain of the API based on website\n * property tracker_user_type is the type of user based on their subscription\n * property tracker_subscription_status is the status of their subscription\n * property tracker_page_domain is the page domain\n * property tracker_metered_wall_type is the type of metered wall\n * property tracker_metered_wall_balance is the balance of their metered wall\n */\n\n @property({ type: String }) accessToken = ''\n @property({ type: String }) refreshToken = ''\n @property({ type: String }) domain = 'id' // 'id' | 'cloud'\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n constructor() {\n super()\n this.handleClickOutside = this.handleClickOutside.bind(this)\n }\n\n /**\n * Function to format date\n */\n formatDate(date: string) {\n // Check if the provided date is today\n let result\n if (isToday(date)) {\n // Return time difference if it's today (e.g., \"7 hours ago\")\n result = `${formatDistanceStrict(date, new Date(), { locale: id })} lalu`\n } else {\n // Return formatted date (e.g., \"12 Sep 2024, 09:00\")\n result = format(date, 'dd MMM yyyy, HH:mm', { locale: id })\n }\n return result\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n this.isShowDropdown = false\n\n if ((this.accessToken || this.refreshToken) && this.domain)\n await this.loadData()\n document.addEventListener('click', this.handleClickOutside)\n }\n\n override async disconnectedCallback() {\n super.disconnectedCallback()\n document.removeEventListener('click', this.handleClickOutside)\n }\n\n private async apiFetch(url: string, options: any) {\n const response = await customFetch(\n url,\n this.refreshToken,\n this.accessToken,\n this.domain,\n { ...options }\n )\n\n return response\n }\n\n private async getNotifRubrik() {\n const req = this.apiFetch(\n `https://cds.kompas.${this.domain}/api/v1/article/pilihanku`,\n {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n }\n )\n return req\n }\n\n private async getNotifList() {\n const req = await this.apiFetch(\n `https://api.kompas.${this.domain}/account/api/v1/users/notification`,\n {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n }\n )\n return req\n }\n\n private async getEpaperData() {\n const formatDate = 'yyyy/MM/dd'\n const startDate = format(subDays(new Date(), 1), formatDate)\n const endDate = format(new Date(), formatDate).toString()\n const req = await this.apiFetch(\n `https://apiepaper.kompas.${this.domain}/products?startDate=${startDate}&endDate=${endDate}&sort=desc`,\n {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n }\n )\n\n return req\n }\n\n private async notifRead(notifId: string) {\n const req = await this.apiFetch(\n `https://api.kompas.${this.domain}/account/api/v1/users/notification/read`,\n {\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'PUT',\n body: JSON.stringify({\n notificationId: notifId,\n }),\n }\n )\n return req\n }\n\n private async loadData() {\n const apiCalls = [\n this.getNotifList(),\n this.getNotifRubrik(),\n this.getEpaperData(),\n ]\n this.isDataLoaded = false\n\n Promise.all(apiCalls)\n .then(responses =>\n Promise.all(responses.map(response => response.json()))\n )\n .then(values => {\n this.notificationInfoData = (\n values[0] as ApiResponse<UserNotification>\n ).data\n this.notificationInfoData.notificationList =\n this.notificationInfoData.notificationList || []\n const rubrikData = (values[1] as ApiRubrikResponse<any>).result || []\n const ePaperData = (values[2] as ApiResponse<any>).data[0] || {}\n\n const { publishDate, description, thumbnail, title, url } = ePaperData\n\n const data = {\n title,\n category: [{ name: 'ePaper', slug: 'epaper' }],\n publishedDateGmt: format(\n new Date(publishDate),\n 'yyyy-MM-dd HH:mm:ss'\n ),\n permalink: url,\n thumbnails: {\n sizes: { thumbnailSquareMedium: { permalink: thumbnail } },\n },\n excerpt: description,\n }\n\n this.notificationContentData = [data, ...rubrikData]\n this.notificationContentData.sort(\n (a: any, b: any) =>\n new Date(b.publishedDateGmt).getTime() -\n new Date(a.publishedDateGmt).getTime()\n )\n\n this.isDataLoaded = true\n })\n }\n\n private toggleDropdown() {\n this.isShowDropdown = !this.isShowDropdown\n\n // if opened, fire the datalayer\n if (this.isShowDropdown) this.pushDataLayer('notification_opened')\n }\n\n private notificationIcon() {\n const notificationIndicator = () => {\n if (!this.notificationInfoData.notificationCount) return html``\n return html`<div\n class=\"header-account--notification-indicator animate-ping\"\n ></div>`\n }\n\n return html`\n <button\n @click=${this.toggleDropdown}\n class=\"cursor-pointer relative flex items-center\"\n >\n ${notificationIndicator()}\n <div class=\"flex flex-row items-center self-center\">\n <div class=\"text-white cursor-pointer mt-0.5\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'bell', 21, 21))}\n </div>\n </div>\n </button>\n `\n }\n\n private handleClick = (value: string) => {\n this.selectedTab = value\n }\n\n private handleNotificationUrlParam = (url: string, type: string) => {\n const params = {\n open_from: type,\n }\n const newUrl = new URL(decodeURIComponent(url))\n if (newUrl.search) {\n for (const [key, value] of Object.entries(params)) {\n if (!newUrl.searchParams.has(key)) {\n newUrl.searchParams.append(key, value)\n }\n }\n } else {\n newUrl.search = new URLSearchParams(params).toString()\n }\n\n return newUrl.toString()\n }\n\n private redirectTo = async (notifData: NotificationList) => {\n const { notificationId: notifId, link, label } = notifData\n const res = await this.notifRead(notifId)\n\n if (res.status === 200) {\n this.notificationInfoData = {\n ...this.notificationInfoData,\n notificationList: this.notificationInfoData.notificationList\n ? this.notificationInfoData.notificationList.map(notifItem => ({\n ...notifItem,\n isRead:\n notifItem.notificationId === notifId ? true : notifItem.isRead,\n }))\n : [],\n }\n }\n\n this.pushDataLayer('notification_clicked', 'Information', label)\n if (link) {\n const url = this.handleNotificationUrlParam(link, 'Notification_Info')\n window.open(url, '_blank')\n }\n }\n\n private handleClickOutside(event: Event) {\n if (!this.isShowDropdown) return\n\n const popup = this.shadowRoot?.getElementById('headerNotification')\n const ev = event.composedPath()\n if (this.isShowDropdown && popup && !ev?.includes(popup as HTMLElement)) {\n this.isShowDropdown = false // Close the popup\n }\n }\n\n // Notification Info\n private notificationInfoSection() {\n const {\n notificationList,\n }: { notificationList: NotificationList[] | null } =\n this.notificationInfoData\n\n // Empty state\n if (!notificationList || !notificationList.length)\n return html`\n <div class=\"text-center px-4 pt-6 pb-18\">\n <img\n src=\"https://cdn-www.kompas.id/assets/empty-state-notification.png\"\n alt=\"empty-state-notification\"\n class=\"w-auto mx-auto\"\n />\n <p class=\"font-bold text-center text-lg py-2\">Belum Ada Notifikasi</p>\n <p class=\"px-2\">\n Kami akan memberitahukan Anda ketika ada informasi dan pemberitahuan\n terbaru.\n </p>\n </div>\n `\n\n const notificationInfoListTemplate = (item: NotificationList) => {\n const imgUrl =\n item.label === 'Akun'\n ? `https://cdn-www.kompas.id/assets/notifikasi-akun.svg`\n : `https://cdn-www.kompas.id/assets/langganan-anda-telah-berakhir.svg`\n\n return html`<div class=\"w-3/4 pr-1\">\n <div class=\"flex items-center mb-1 text-xs font-bold\">\n <span class=\"text-green-500 bg-green-100 rounded-sm p-1 px-2\">\n ${item.label}\n </span>\n <span class=\"text-grey-400 ml-2\"\n >${this.formatDate(item.time)}</span\n >\n </div>\n <div>\n <p class=\"text-sm font-bold\">${item.title}</p>\n <p class=\"text-sm\">${item.description}</p>\n </div>\n </div>\n <div class=\"w-1/4\">\n <img src=\"${imgUrl}\" alt=\"${item.label}-alt\" class=\"w-14 h-14\" />\n </div>`\n }\n\n return html`<div class=\"h-[300px] overflow-y-scroll\">\n ${notificationList.map(\n item =>\n html`<button\n class=\"flex w-full text-left items-start p-4 cursor-pointer justify-between ${!item.isRead\n ? 'bg-blue-100'\n : ''}\"\n @click=${() => this.redirectTo(item)}\n >\n ${notificationInfoListTemplate(item)}\n </button> `\n )}\n </div>\n <!-- Footer Link -->\n <div class=\"px-4 py-4 text-center\">\n <a href=\"#\" @click=\"${() =>\n this.redirectToNotification(\n 'info'\n )}\" class=\"text-base font-bold text-blue-500\">\n Lihat Selengkapnya</a\n >\n </div>\n </div>`\n }\n\n private redirectToNotification(tab: string) {\n window.open(\n `https://account.kompas.${this.domain}/manage-account/notification/${tab}`,\n '_blank'\n )\n }\n\n // Notification Content\n private notificationContentSection() {\n // Empty state\n if (!this.notificationContentData.length) {\n return html`\n <div class=\"text-center px-4 pt-6 pb-18\">\n <img\n src=\"https://cdn-www.kompas.id/assets/empty-state-notification.png\"\n alt=\"empty-state-notification\"\n class=\"w-auto mx-auto\"\n />\n <p class=\"font-bold text-center text-lg py-2\">Belum Ada Notifikasi</p>\n <p class=\"px-2\">\n Kami akan memberitahukan Anda ketika ada informasi dan pemberitahuan\n terbaru.\n </p>\n </div>\n `\n }\n const notificationContentListTemplate = (item: any) => html`<div\n class=\"w-3/4 pr-1 \"\n >\n <div class=\"flex items-center mb-1 text-xs font-bold\">\n <span class=\"text-green-500 bg-green-100 rounded-sm p-1 px-2\">\n ${item.category[0].name}\n </span>\n <span class=\"text-grey-400 ml-2\">\n ${this.formatDate(item.publishedDateGmt)}</span\n >\n </div>\n <p class=\"font-bold text-sm text-customTextColor py-1\">${item.title}</p>\n </div>\n <div class=\"w-1/4\">\n <img\n src=\"${item.thumbnails.sizes.thumbnailSquareMedium.permalink}\"\n alt=\"content-img-alt\"\n class=\"w-14 h-14 object-cover\"\n />\n </div>`\n\n return html`<div class=\"h-[300px] overflow-y-scroll\">\n ${this.notificationContentData.map(\n item =>\n html`<button\n class=\"flex w-full text-left items-start p-4 cursor-pointer justify-between ${!item.isRead\n ? 'bg-blue-100'\n : ''}\"\n @click=${() => {\n this.pushDataLayer('notification_clicked', 'Content', 'Content')\n window.open(\n this.handleNotificationUrlParam(\n item.permalink,\n 'Notification_Content'\n ),\n '_blank'\n )\n }}\n >\n ${notificationContentListTemplate(item)}\n </button> `\n )}\n </div>\n <!-- Footer Link -->\n <div class=\"px-4 py-4 text-center\">\n <a href=\"#\" @click=\"${() =>\n this.redirectToNotification(\n 'konten'\n )}\" class=\"text-base font-bold text-blue-500\">\n Lihat Selengkapnya</a\n >\n </div>\n </div>`\n }\n\n private notificationPopup() {\n const tab = ['Info', 'Konten']\n\n return html`\n <div\n id=\"notificationPopup\"\n class=\"header-notificaion-dropdown rounded-lg shadow-lg z-50 mt-2 ${this\n .isShowDropdown\n ? 'active'\n : ''}\"\n >\n <div class=\"sticky\">\n <div class=\"flex justify-center py-4 border-b border-grey-300\">\n <span class=\"font-bold text-base\">Notifikasi</span>\n </div>\n <!-- Tabs for Info and Content -->\n <div class=\"flex justify-between text-grey-400\">\n ${tab.map(\n item =>\n html`\n <button\n class=\"focus:outline-none font-bold py-2 w-1/2 ${this\n .selectedTab === item && 'link-active'}\"\n @click=${() => this.handleClick(item)}\n >\n ${item}\n </button>\n `\n )}\n </div>\n </div>\n\n <!-- Notification Content -->\n ${this.selectedTab === 'Info'\n ? this.notificationInfoSection()\n : this.notificationContentSection()}\n </div>\n `\n }\n\n private getParamsData(tab?: string, type?: string): any {\n let notificationData = {}\n let notifType = type\n\n if (type && tab) {\n if (type !== 'Content') {\n switch (true) {\n case /langganan/i.test(type):\n notifType = 'Subscription'\n break\n case type === 'Akun':\n notifType = 'Account'\n break\n case /bayar/i.test(type):\n notifType = 'Payment'\n break\n default:\n notifType = 'Information'\n break\n }\n }\n\n notificationData = {\n notification_tab: tab,\n notification_type: notifType,\n }\n }\n\n const data = {\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'FP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n\n return {\n ...notificationData,\n ...data,\n }\n }\n\n private pushDataLayer(eventName: string, tab?: string, type?: string): void {\n const data = this.getParamsData(tab, type)\n window.dataLayer.push({\n event: eventName,\n ...data,\n })\n }\n\n render() {\n return html`<div id=\"headerNotification\" class=\"relative\">\n ${this.isDataLoaded\n ? this.notificationIcon()\n : html`<div class=\"text-white cursor-pointer mt-0.5 animate-spin\">\n ${unsafeSVG(getFontAwesomeIcon('fa', 'circle-notch', 21, 21))}\n </div>`}\n ${this.isShowDropdown ? this.notificationPopup() : ''}\n </div>`\n }\n}\n"]}
1
+ {"version":3,"file":"KompasHeaderNotification.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-notification/KompasHeaderNotification.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, isToday, formatDistanceStrict, subDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport {\n UserNotification,\n NotificationList,\n ApiResponse,\n ApiRubrikResponse,\n} from './types.js'\nimport { customFetch } from './utils.js'\n\n@customElement('kompasid-header-notification')\nexport class KompasHeaderNotification extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .header-account--notification-indicator {\n position: absolute;\n top: 0;\n height: 0.5rem;\n width: 0.5rem;\n background-color: #ff7a00;\n border-radius: 50%;\n right: -0.403rem;\n top: -0.281rem;\n }\n\n .break-words {\n overflow-wrap: break-word;\n }\n\n .header-notification-dropdown {\n width: 20.5rem;\n background-color: #ffffff;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.875rem;\n position: absolute;\n right: -7.5vmax;\n }\n\n .w-14 {\n width: 3.25rem;\n }\n\n .pb-18 {\n padding-bottom: 4.5rem;\n }\n\n .h-\\\\[300px\\\\] {\n height: 300px;\n }\n\n .h-14 {\n height: 3.25rem;\n }\n\n .bg-green-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(238 252 210 / var(--tw-bg-opacity));\n }\n\n .overflow-y-scroll {\n overflow-y: scroll;\n }\n\n .link-active {\n color: #0468cb;\n border-color: #0468cb;\n border-bottom-width: 3px;\n background-color: transparent !important;\n }\n\n .animate-spin {\n animation: spin 2s linear infinite;\n }\n\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n .object-cover {\n object-fit: cover;\n }\n\n .z-index-max {\n z-index: 99999;\n }\n\n /* Custom Scrollbar for header */\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #0356a8;\n border-radius: 100px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: #0356a8;\n }\n\n @media (min-width: 1024px) {\n .header-notification-dropdown {\n right: -4vmax;\n }\n }\n\n @media (max-width: 360px) {\n .header-notification-dropdown {\n right: -10vmax;\n }\n }\n `,\n TWStyles,\n ]\n\n @state() isShowDropdown: boolean = false\n @state() selectedTab: string = 'Info'\n @state() notificationInfoData: UserNotification = {} as UserNotification\n @state() notificationContentData: any[] = []\n @state() isDataLoaded: boolean = false\n\n /*\n * property accessToken is the access token of the user\n * property refreshToken is the refresh token of the user\n * property domain is the domain of the API based on website\n * property tracker_user_type is the type of user based on their subscription\n * property tracker_subscription_status is the status of their subscription\n * property tracker_page_domain is the page domain\n * property tracker_metered_wall_type is the type of metered wall\n * property tracker_metered_wall_balance is the balance of their metered wall\n */\n\n @property({ type: String }) accessToken = ''\n @property({ type: String }) refreshToken = ''\n @property({ type: String }) domain = 'id' // 'id' | 'cloud'\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n constructor() {\n super()\n this.handleClickOutside = this.handleClickOutside.bind(this)\n }\n\n /**\n * Function to format date\n */\n formatDate(date: string) {\n // Check if the provided date is today\n let result\n if (isToday(date)) {\n // Return time difference if it's today (e.g., \"7 hours ago\")\n result = `${formatDistanceStrict(date, new Date(), { locale: id })} lalu`\n } else {\n // Return formatted date (e.g., \"12 Sep 2024, 09:00\")\n result = format(date, 'dd MMM yyyy, HH:mm', { locale: id })\n }\n return result\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n this.isShowDropdown = false\n\n if ((this.accessToken || this.refreshToken) && this.domain)\n await this.loadData()\n document.addEventListener('click', this.handleClickOutside)\n }\n\n override async disconnectedCallback() {\n super.disconnectedCallback()\n document.removeEventListener('click', this.handleClickOutside)\n }\n\n private async apiFetch(url: string, options: any) {\n const response = await customFetch(\n url,\n this.refreshToken,\n this.accessToken,\n this.domain,\n { ...options }\n )\n\n return response\n }\n\n private async getNotifRubrik() {\n const req = this.apiFetch(\n `https://cds.kompas.${this.domain}/api/v1/article/pilihanku`,\n {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n }\n )\n return req\n }\n\n private async getNotifList() {\n const req = await this.apiFetch(\n `https://api.kompas.${this.domain}/account/api/v1/users/notification`,\n {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n }\n )\n return req\n }\n\n private async getEpaperData() {\n const formatDate = 'yyyy/MM/dd'\n const startDate = format(subDays(new Date(), 1), formatDate)\n const endDate = format(new Date(), formatDate).toString()\n const req = await this.apiFetch(\n `https://apiepaper.kompas.${this.domain}/products?startDate=${startDate}&endDate=${endDate}&sort=desc`,\n {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n }\n )\n\n return req\n }\n\n private async notifRead(notifId: string) {\n const req = await this.apiFetch(\n `https://api.kompas.${this.domain}/account/api/v1/users/notification/read`,\n {\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'PUT',\n body: JSON.stringify({\n notificationId: notifId,\n }),\n }\n )\n return req\n }\n\n private async loadData() {\n const apiCalls = [\n this.getNotifList(),\n this.getNotifRubrik(),\n this.getEpaperData(),\n ]\n this.isDataLoaded = false\n\n Promise.all(apiCalls)\n .then(responses =>\n Promise.all(responses.map(response => response.json()))\n )\n .then(values => {\n this.notificationInfoData = (\n values[0] as ApiResponse<UserNotification>\n ).data\n this.notificationInfoData.notificationList =\n this.notificationInfoData.notificationList || []\n const rubrikData = (values[1] as ApiRubrikResponse<any>).result || []\n const ePaperData = (values[2] as ApiResponse<any>).data[0] || {}\n\n const { publishDate, description, thumbnail, title, url } = ePaperData\n\n const data = {\n title,\n category: [{ name: 'ePaper', slug: 'epaper' }],\n publishedDate: format(new Date(publishDate), 'yyyy-MM-dd HH:mm:ss'),\n permalink: url,\n thumbnails: {\n sizes: { thumbnailSquareMedium: { permalink: thumbnail } },\n },\n excerpt: description,\n }\n\n this.notificationContentData = [data, ...rubrikData]\n this.notificationContentData.sort(\n (a: any, b: any) =>\n new Date(b.publishedDate).getTime() -\n new Date(a.publishedDate).getTime()\n )\n\n this.isDataLoaded = true\n })\n }\n\n private toggleDropdown() {\n this.isShowDropdown = !this.isShowDropdown\n\n // if opened, fire the datalayer\n if (this.isShowDropdown) this.pushDataLayer('notification_opened')\n }\n\n private notificationIcon() {\n const notificationIndicator = () => {\n if (!this.notificationInfoData.notificationCount) return html``\n return html`<div class=\"header-account--notification-indicator\"></div>`\n }\n\n return html`\n <button\n @click=${this.toggleDropdown}\n class=\"cursor-pointer relative flex items-center\"\n >\n ${notificationIndicator()}\n <div class=\"flex flex-row items-center self-center\">\n <div class=\"text-white cursor-pointer mt-0.5\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'bell', 21, 21))}\n </div>\n </div>\n </button>\n `\n }\n\n private handleClick = (value: string) => {\n this.selectedTab = value\n }\n\n private handleNotificationUrlParam = (url: string, type: string) => {\n const params = {\n open_from: type,\n }\n const newUrl = new URL(decodeURIComponent(url))\n if (newUrl.search) {\n for (const [key, value] of Object.entries(params)) {\n if (!newUrl.searchParams.has(key)) {\n newUrl.searchParams.append(key, value)\n }\n }\n } else {\n newUrl.search = new URLSearchParams(params).toString()\n }\n\n return newUrl.toString()\n }\n\n private redirectTo = async (notifData: NotificationList) => {\n const { notificationId: notifId, link, label } = notifData\n const res = await this.notifRead(notifId)\n\n if (res.status === 200) {\n this.notificationInfoData = {\n ...this.notificationInfoData,\n notificationList: this.notificationInfoData.notificationList\n ? this.notificationInfoData.notificationList.map(notifItem => ({\n ...notifItem,\n isRead:\n notifItem.notificationId === notifId ? true : notifItem.isRead,\n }))\n : [],\n }\n }\n\n this.pushDataLayer('notification_clicked', 'Information', label)\n if (link) {\n const url = this.handleNotificationUrlParam(link, 'Notification_Info')\n window.open(url, '_blank')\n }\n }\n\n private handleClickOutside(event: Event) {\n if (!this.isShowDropdown) return\n\n const popup = this.shadowRoot?.getElementById('headerNotification')\n const ev = event.composedPath()\n if (this.isShowDropdown && popup && !ev?.includes(popup as HTMLElement)) {\n this.isShowDropdown = false // Close the popup\n }\n }\n\n // Notification Info\n private notificationInfoSection() {\n const {\n notificationList,\n }: { notificationList: NotificationList[] | null } =\n this.notificationInfoData\n\n // Empty state\n if (!notificationList || !notificationList.length)\n return html`\n <div class=\"text-center px-4 pt-6 pb-18\">\n <img\n src=\"https://cdn-www.kompas.id/assets/empty-state-notification.png\"\n alt=\"empty-state-notification\"\n class=\"w-auto mx-auto\"\n />\n <p class=\"font-bold text-center text-lg py-2\">Belum Ada Notifikasi</p>\n <p class=\"px-2\">\n Kami akan memberitahukan Anda ketika ada informasi dan pemberitahuan\n terbaru.\n </p>\n </div>\n `\n\n const notificationInfoListTemplate = (item: NotificationList) => {\n const imgUrl =\n item.label === 'Akun'\n ? `https://cdn-www.kompas.id/assets/notifikasi-akun.svg`\n : `https://cdn-www.kompas.id/assets/langganan-anda-telah-berakhir.svg`\n\n return html`<div class=\"w-3/4 pr-1\">\n <div class=\"flex items-center mb-1 text-xs font-bold\">\n <span class=\"text-green-500 bg-green-100 rounded-sm p-1 px-2\">\n ${item.label}\n </span>\n <span class=\"text-grey-400 ml-2\"\n >${this.formatDate(item.time)}</span\n >\n </div>\n <div class=\"text-grey-600\">\n <p class=\"text-sm font-bold break-words\">${item.title}</p>\n <p class=\"text-sm\">${item.description}</p>\n </div>\n </div>\n <div class=\"w-1/4\">\n <img src=\"${imgUrl}\" alt=\"${item.label}-alt\" class=\"w-14 h-14\" />\n </div>`\n }\n\n return html`<div class=\"h-[300px] overflow-y-scroll\">\n ${notificationList.map(\n item =>\n html`<button\n class=\"flex w-full text-left items-start p-4 cursor-pointer justify-between ${!item.isRead\n ? 'bg-blue-100'\n : ''}\"\n @click=${() => this.redirectTo(item)}\n >\n ${notificationInfoListTemplate(item)}\n </button> `\n )}\n </div>\n <!-- Footer Link -->\n <div class=\"px-4 py-4 text-center\">\n <a href=\"#\" @click=\"${() =>\n this.redirectToNotification(\n 'info'\n )}\" class=\"text-base font-bold text-blue-500\">\n Lihat Selengkapnya</a\n >\n </div>\n </div>`\n }\n\n private redirectToNotification(tab: string) {\n window.open(\n `https://account.kompas.${this.domain}/manage-account/notification/${tab}`,\n '_blank'\n )\n }\n\n // Notification Content\n private notificationContentSection() {\n // Empty state\n if (!this.notificationContentData.length) {\n return html`\n <div class=\"text-center px-4 pt-6 pb-18\">\n <img\n src=\"https://cdn-www.kompas.id/assets/empty-state-notification.png\"\n alt=\"empty-state-notification\"\n class=\"w-auto mx-auto\"\n />\n <p class=\"font-bold text-center text-lg py-2\">Belum Ada Notifikasi</p>\n <p class=\"px-2\">\n Kami akan memberitahukan Anda ketika ada informasi dan pemberitahuan\n terbaru.\n </p>\n </div>\n `\n }\n const notificationContentListTemplate = (item: any) => html`<div\n class=\"w-3/4 pr-1 \"\n >\n <div class=\"flex items-center mb-1 text-xs font-bold\">\n <span class=\"text-green-500 bg-green-100 rounded-sm p-1 px-2\">\n ${item.category[0].name}\n </span>\n <span class=\"text-grey-400 ml-2\">\n ${this.formatDate(item.publishedDate)}</span\n >\n </div>\n <p class=\"font-bold text-sm text-grey-600 py-1 break-words\">\n ${item.title}\n </p>\n </div>\n <div class=\"w-1/4\">\n <img\n src=\"${item.thumbnails.sizes.thumbnailSquareMedium.permalink}\"\n alt=\"content-img-alt\"\n class=\"w-14 h-14 object-cover\"\n />\n </div>`\n\n return html`<div class=\"h-[300px] overflow-y-scroll\">\n ${this.notificationContentData.map(\n item =>\n html`<button\n class=\"flex w-full text-left items-start p-4 cursor-pointer justify-between ${!item.isRead\n ? 'bg-blue-100'\n : ''}\"\n @click=${() => {\n this.pushDataLayer('notification_clicked', 'Content', 'Content')\n window.open(\n this.handleNotificationUrlParam(\n item.permalink,\n 'Notification_Content'\n ),\n '_blank'\n )\n }}\n >\n ${notificationContentListTemplate(item)}\n </button> `\n )}\n </div>\n <!-- Footer Link -->\n <div class=\"px-4 py-4 text-center\">\n <a href=\"#\" @click=\"${() =>\n this.redirectToNotification(\n 'konten'\n )}\" class=\"text-base font-bold text-blue-500\">\n Lihat Selengkapnya</a\n >\n </div>\n </div>`\n }\n\n private notificationPopup() {\n const tab = ['Info', 'Konten']\n\n return html`\n <div\n id=\"notificationPopup\"\n class=\"header-notification-dropdown rounded-lg shadow-lg z-50 mt-2 ${this\n .isShowDropdown\n ? 'active'\n : ''}\"\n >\n <div class=\"sticky\">\n <div class=\"flex justify-center py-4 border-b border-grey-300\">\n <span class=\"font-bold text-base text-grey-700\">Notifikasi</span>\n </div>\n <!-- Tabs for Info and Content -->\n <div class=\"flex justify-between text-grey-400\">\n ${tab.map(\n item =>\n html`\n <button\n class=\"focus:outline-none font-bold py-2 w-1/2 ${this\n .selectedTab === item && 'link-active'}\"\n @click=${() => this.handleClick(item)}\n >\n ${item}\n </button>\n `\n )}\n </div>\n </div>\n\n <!-- Notification Content -->\n ${this.selectedTab === 'Info'\n ? this.notificationInfoSection()\n : this.notificationContentSection()}\n </div>\n `\n }\n\n private getParamsData(tab?: string, type?: string): any {\n let notificationData = {}\n let notifType = type\n\n if (type && tab) {\n if (type !== 'Content') {\n switch (true) {\n case /langganan/i.test(type):\n notifType = 'Subscription'\n break\n case type === 'Akun':\n notifType = 'Account'\n break\n case /bayar/i.test(type):\n notifType = 'Payment'\n break\n default:\n notifType = 'Information'\n break\n }\n }\n\n notificationData = {\n notification_tab: tab,\n notification_type: notifType,\n }\n }\n\n const data = {\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'FP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n\n return {\n ...notificationData,\n ...data,\n }\n }\n\n private pushDataLayer(eventName: string, tab?: string, type?: string): void {\n const data = this.getParamsData(tab, type)\n window.dataLayer.push({\n event: eventName,\n ...data,\n })\n }\n\n render() {\n return html`<div id=\"headerNotification\" class=\"relative\">\n ${this.isDataLoaded\n ? this.notificationIcon()\n : html`<div class=\"text-white cursor-pointer mt-0.5 animate-spin\">\n ${unsafeSVG(getFontAwesomeIcon('fa', 'circle-notch', 21, 21))}\n </div>`}\n ${this.isShowDropdown ? this.notificationPopup() : ''}\n </div>`\n }\n}\n"]}
package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js CHANGED
@@ -154,9 +154,9 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
154
154
  <div class="flex flex-col space-y-4">
155
155
  <div class="flex justify-between items-center h-full">
156
156
  <div class="w-9 h-9 hidden lg:block"></div>
157
- <div class="banner-content flex flex-row items-center">
157
+ <div class="flex flex-row items-center gap-6">
158
158
  <div
159
- class="text-base md:text-lg font-lora"
159
+ class="text-base md:text-lg font-lora md:max-w-[737px] text-grey-600"
160
160
  .innerHTML=${this.setTemplate('title')}
161
161
  ></div>
162
162
  <div class="hidden md:block">${this.registerButtonTemplate()}</div>
@@ -164,7 +164,7 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
164
164
  <div>
165
165
  <button
166
166
  @click="${this.triggerExpandBanner}"
167
- class="h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200"
167
+ class="h-9 w-9 flex ml-auto items-center justify-center text-blue-500 rounded bg-blue-200"
168
168
  >
169
169
  <div
170
170
  class="icon icon-blue-600 ${this.isExpandBanner
@@ -184,13 +184,13 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
184
184
  var _a;
185
185
  return html `
186
186
  <div
187
- class="flex flex-col-reverse justify-between md:flex-row gap-4 md:gap-8"
187
+ class="flex flex-col-reverse justify-between md:flex-row gap-4 md:gap-8 text-grey-600"
188
188
  >
189
189
  <div
190
190
  class="flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 ml-auto"
191
191
  >
192
192
  <p
193
- class="text-lg md:text-2xl font-lora"
193
+ class="text-2xl md:text-2xl font-lora"
194
194
  .innerHTML=${this.setTemplate('title', 'expand')}
195
195
  ></p>
196
196
  <p
@@ -209,7 +209,7 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
209
209
  </div>
210
210
  <button
211
211
  @click="${this.triggerExpandBanner}"
212
- class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
212
+ class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200 ml-auto"
213
213
  >
214
214
  <div
215
215
  class="icon icon-blue-600 ${this.isExpandBanner
@@ -231,13 +231,13 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
231
231
  ${!this.textTemplate.expand.ctaUrl
232
232
  ? html `<button
233
233
  @click=${this.redirectToRegister}
234
- class="bg-green-500 p-1.5 w-full whitespace-nowrap rounded-md font-bold text-grey-100 text-sm md:text-base"
234
+ class="bg-green-500 p-3 w-full whitespace-nowrap rounded-md font-bold text-grey-100 text-sm md:text-base"
235
235
  >
236
236
  Daftar Akun
237
237
  </button>`
238
238
  : html `<button
239
239
  @click=${this.redirectToCTAUrl}
240
- class="bg-green-500 p-1.5 w-full whitespace-nowrap rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-auto"
240
+ class="bg-green-500 p-3 w-full whitespace-nowrap rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-auto md:mr-6"
241
241
  >
242
242
  ${this.textTemplate.expand.ctaText}
243
243
  </button>`}
@@ -322,6 +322,10 @@ KompasMeteredWallRegister.styles = [
322
322
  font-family: 'PT Sans', sans-serif;
323
323
  }
324
324
 
325
+ .font-lora {
326
+ font-family: 'Lora', 'Georgia', 'serif';
327
+ }
328
+
325
329
  .body {
326
330
  position: sticky;
327
331
  top: 0;
@@ -329,8 +333,10 @@ KompasMeteredWallRegister.styles = [
329
333
  width: 100%;
330
334
  }
331
335
 
332
- .banner-content {
333
- gap: 55px;
336
+ @media (min-width: 768px) {
337
+ .md\:max-w-\[737px\] {
338
+ max-width: 737px;
339
+ }
334
340
  }
335
341
  `,
336
342
  TWStyles,
package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"KompasMeteredWallRegister.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport {\n lastArticleData,\n meteredRegisterResponse,\n meteredRegisterContent,\n} from './types.js'\n\n@customElement('kompasid-metered-wall-register')\nexport class KompasMeteredWallRegister extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n\n .banner-content {\n gap: 55px;\n }\n `,\n TWStyles,\n ]\n\n /**\n * state\n */\n /**\n * state registerUrl untuk memberikan link kemana user akan dialihkan.\n */\n @state() registerUrl: string =\n 'https://account.kompas.id/register?loc=metered_register_wall'\n /**\n * state isShowBanner untuk memunculkan component.\n */\n @state() isShowBanner: boolean = true\n /**\n * state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.\n */\n @state() isExpandBanner: boolean = true\n /**\n * state textTemplate untuk menyimpan template yang di berikan.\n */\n @state() private textTemplate: meteredRegisterContent = {\n expand: {\n description: '',\n imageUrl: '',\n lastArticle: {\n title: '',\n description: '',\n },\n title: '',\n ctaUrl: '',\n ctaText: '',\n },\n collapse: {\n lastArticle: {\n title: '',\n },\n title: '',\n },\n }\n\n /**\n * Props\n */\n /**\n * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n * prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.\n * prop tracker_page_title untuk title of the page\n * prop tracker_page_type untuk type of the page\n * prop tracker_content_type untuk whether it's a free article or paid article (will only be sent if the user views article detail page)\n * prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)\n * prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)\n * prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)\n * prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)\n * prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)\n * prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)\n * prop tracker_content_categories untuk The main category the content belongs to\n * prop tracker_user_type untuk type of user based on their subscription\n * prop tracker_subscription_status untuk status of their subscription\n * prop tracker_metered_wall_type untuk the type of Metered Wall\n * prop tracker_metered_wall_balance untuk the balance of their metered wall\n * prop tracker_page_domain untuk Page Domain\n * prop next_param untuk page Domain\n */\n @property({ type: Number }) countdownArticle = 0\n @property({ type: Boolean }) defaultExpandBanner = false\n\n @property({ type: String }) tracker_page_title = ''\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_authors = ''\n @property({ type: String }) tracker_content_editors = ''\n @property({ type: String }) tracker_content_tags = ''\n @property({ type: String }) tracker_content_published_date = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) next_param =\n 'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini'\n @property({ type: String }) source = 'default'\n\n /**\n * menentukan template yang akan di render\n */\n private setTemplate(\n prop: string,\n mode: keyof meteredRegisterContent = 'collapse'\n ): string {\n interface templateType {\n lastArticle?: lastArticleData\n [key: string]: string | lastArticleData | undefined\n }\n const templateObj = this.textTemplate[mode] as unknown as\n | templateType\n | string\n\n let template: string = ''\n\n if (typeof templateObj === 'object' && templateObj !== null) {\n // Check if templateObj has a lastArticle object and if the prop exists within it\n\n if (this.countdownArticle === 1) {\n if (templateObj.lastArticle && prop in templateObj.lastArticle) {\n const value = (templateObj.lastArticle as any)[prop]\n if (typeof value === 'string') {\n template = value\n }\n }\n } else if (prop in templateObj) {\n const value = templateObj[prop]\n if (typeof value === 'string') {\n template = value\n }\n }\n }\n\n return template\n }\n\n /**\n * Render Statement\n */\n\n private bannerTemplate() {\n return this.isExpandBanner\n ? this.expandedBannerContent()\n : this.defaultBannerContent()\n }\n\n private defaultBannerContent() {\n return html`\n <div class=\"flex flex-col space-y-4\">\n <div class=\"flex justify-between items-center h-full\">\n <div class=\"w-9 h-9 hidden lg:block\"></div>\n <div class=\"banner-content flex flex-row items-center\">\n <div\n class=\"text-base md:text-lg font-lora\"\n .innerHTML=${this.setTemplate('title')}\n ></div>\n <div class=\"hidden md:block\">${this.registerButtonTemplate()}</div>\n </div>\n <div>\n <button\n @click=\"${this.triggerExpandBanner}\"\n class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div\n class=\"icon icon-blue-600 ${this.isExpandBanner\n ? 'chevron-down'\n : 'rotate-180'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n </div>\n <div class=\"block md:hidden\">${this.registerButtonTemplate()}</div>\n </div>\n `\n }\n\n private expandedBannerContent() {\n return html`\n <div\n class=\"flex flex-col-reverse justify-between md:flex-row gap-4 md:gap-8\"\n >\n <div\n class=\"flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 ml-auto\"\n >\n <p\n class=\"text-lg md:text-2xl font-lora\"\n .innerHTML=${this.setTemplate('title', 'expand')}\n ></p>\n <p\n class=\"text-sm md:text-base\"\n .innerHTML=${this.setTemplate('description', 'expand')}\n ></p>\n <div class=\"md:self-start\">${this.registerButtonTemplate()}</div>\n </div>\n <div\n class=\"flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto mx-auto\"\n >\n <img\n alt=\"metered-wall-register\"\n src=\"${this.textTemplate.expand.imageUrl ?? ''}\"\n />\n </div>\n <button\n @click=\"${this.triggerExpandBanner}\"\n class=\"h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div\n class=\"icon icon-blue-600 ${this.isExpandBanner\n ? 'chevron-down'\n : 'rotate-180'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n `\n }\n\n /**\n * template button register\n */\n private registerButtonTemplate() {\n return html`\n <div>\n ${!this.textTemplate.expand.ctaUrl\n ? html`<button\n @click=${this.redirectToRegister}\n class=\"bg-green-500 p-1.5 w-full whitespace-nowrap rounded-md font-bold text-grey-100 text-sm md:text-base\"\n >\n Daftar Akun\n </button>`\n : html`<button\n @click=${this.redirectToCTAUrl}\n class=\"bg-green-500 p-1.5 w-full whitespace-nowrap rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-auto\"\n >\n ${this.textTemplate.expand.ctaText}\n </button>`}\n </div>\n `\n }\n\n /**\n * mengarahkan ke page checkout promo\n */\n private redirectToCTAUrl = (): void => {\n const params = new URLSearchParams(window.location.href)\n const newUrl = new URL(this.textTemplate.expand.ctaUrl)\n const referrer = new URLSearchParams(this.textTemplate.expand.ctaUrl).get(\n 'referrer'\n )\n this.pushToDataLayer('mrw_clicked')\n if (!referrer) {\n newUrl.searchParams.append('referrer', params.toString())\n window.location.href = newUrl.toString()\n } else {\n const currentReferrerValue = newUrl.searchParams.get('referrer')\n const updatedReferrerValue = `${params.toString()},${currentReferrerValue}`\n newUrl.searchParams.set('referrer', updatedReferrerValue)\n window.location.href = newUrl.toString()\n }\n }\n\n /**\n * mengarahkan ke page register\n */\n private redirectToRegister = (): void => {\n this.pushToDataLayer('mrw_clicked')\n const newUrl = new URL(decodeURIComponent(this.registerUrl))\n if (this.next_param)\n newUrl.searchParams.append('next', decodeURIComponent(this.next_param))\n window.location.href = newUrl.toString()\n }\n\n /**\n * mengirim event ke datalayer\n */\n private pushToDataLayer(eventName: string) {\n window.dataLayer.push({\n event: eventName,\n page_title: this.tracker_page_title,\n page_type: this.tracker_page_type,\n content_type: this.tracker_content_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_authors: this.tracker_content_authors,\n content_editors: this.tracker_content_editors,\n content_tags: this.tracker_content_tags,\n content_published_date: this.tracker_content_published_date,\n content_categories: this.tracker_content_categories,\n user_type: this.tracker_user_type || 'G',\n subscription_status: this.tracker_subscription_status || '',\n metered_wall_type: this.tracker_metered_wall_type || 'MRW',\n metered_wall_balance: this.tracker_metered_wall_balance,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n })\n }\n\n /**\n * toggle isExpandBanner flag\n */\n private triggerExpandBanner() {\n this.isExpandBanner = !this.isExpandBanner\n return !this.isExpandBanner && this.pushToDataLayer('mrw_closed')\n }\n\n /**\n * Lifecycle\n */\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n this.loadData()\n }\n\n private async loadData() {\n const { source } = this // kompas_com || default\n\n const req = await fetch(\n `https://cdn-www.kompas.id/assets/register_wall_new.json`\n )\n\n if (req.status !== 200) {\n throw new Error(`${req.status} Ada galat saat memproses permintaan.`)\n }\n\n const res: meteredRegisterResponse = await req.json()\n const validSource = source in res ? source : 'default'\n\n this.textTemplate = res[validSource as keyof typeof res]\n\n const getCountdown = this.countdownArticle\n\n if (!getCountdown) {\n this.isShowBanner = false\n } else {\n this.isExpandBanner = this.defaultExpandBanner\n }\n\n if (this.isShowBanner) {\n this.pushToDataLayer('mrw_viewed')\n }\n }\n\n render() {\n return this.isShowBanner\n ? html`\n <div class=\"sticky bottom-0 w-full h-full z-20\">\n <div class=\"w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4\">\n <div class=\"lg:max-w-7xl m-auto px-0 lg:px-24 relative\">\n ${this.bannerTemplate()}\n </div>\n </div>\n </div>\n `\n : null\n }\n}\n"]}
1
+ {"version":3,"file":"KompasMeteredWallRegister.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport {\n lastArticleData,\n meteredRegisterResponse,\n meteredRegisterContent,\n} from './types.js'\n\n@customElement('kompasid-metered-wall-register')\nexport class KompasMeteredWallRegister extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .font-lora {\n font-family: 'Lora', 'Georgia', 'serif';\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n\n @media (min-width: 768px) {\n .md\\:max-w-\\[737px\\] {\n max-width: 737px;\n }\n }\n `,\n TWStyles,\n ]\n\n /**\n * state\n */\n /**\n * state registerUrl untuk memberikan link kemana user akan dialihkan.\n */\n @state() registerUrl: string =\n 'https://account.kompas.id/register?loc=metered_register_wall'\n /**\n * state isShowBanner untuk memunculkan component.\n */\n @state() isShowBanner: boolean = true\n /**\n * state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.\n */\n @state() isExpandBanner: boolean = true\n /**\n * state textTemplate untuk menyimpan template yang di berikan.\n */\n @state() private textTemplate: meteredRegisterContent = {\n expand: {\n description: '',\n imageUrl: '',\n lastArticle: {\n title: '',\n description: '',\n },\n title: '',\n ctaUrl: '',\n ctaText: '',\n },\n collapse: {\n lastArticle: {\n title: '',\n },\n title: '',\n },\n }\n\n /**\n * Props\n */\n /**\n * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n * prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.\n * prop tracker_page_title untuk title of the page\n * prop tracker_page_type untuk type of the page\n * prop tracker_content_type untuk whether it's a free article or paid article (will only be sent if the user views article detail page)\n * prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)\n * prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)\n * prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)\n * prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)\n * prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)\n * prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)\n * prop tracker_content_categories untuk The main category the content belongs to\n * prop tracker_user_type untuk type of user based on their subscription\n * prop tracker_subscription_status untuk status of their subscription\n * prop tracker_metered_wall_type untuk the type of Metered Wall\n * prop tracker_metered_wall_balance untuk the balance of their metered wall\n * prop tracker_page_domain untuk Page Domain\n * prop next_param untuk page Domain\n */\n @property({ type: Number }) countdownArticle = 0\n @property({ type: Boolean }) defaultExpandBanner = false\n\n @property({ type: String }) tracker_page_title = ''\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_authors = ''\n @property({ type: String }) tracker_content_editors = ''\n @property({ type: String }) tracker_content_tags = ''\n @property({ type: String }) tracker_content_published_date = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) next_param =\n 'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini'\n @property({ type: String }) source = 'default'\n\n /**\n * menentukan template yang akan di render\n */\n private setTemplate(\n prop: string,\n mode: keyof meteredRegisterContent = 'collapse'\n ): string {\n interface templateType {\n lastArticle?: lastArticleData\n [key: string]: string | lastArticleData | undefined\n }\n const templateObj = this.textTemplate[mode] as unknown as\n | templateType\n | string\n\n let template: string = ''\n\n if (typeof templateObj === 'object' && templateObj !== null) {\n // Check if templateObj has a lastArticle object and if the prop exists within it\n\n if (this.countdownArticle === 1) {\n if (templateObj.lastArticle && prop in templateObj.lastArticle) {\n const value = (templateObj.lastArticle as any)[prop]\n if (typeof value === 'string') {\n template = value\n }\n }\n } else if (prop in templateObj) {\n const value = templateObj[prop]\n if (typeof value === 'string') {\n template = value\n }\n }\n }\n\n return template\n }\n\n /**\n * Render Statement\n */\n\n private bannerTemplate() {\n return this.isExpandBanner\n ? this.expandedBannerContent()\n : this.defaultBannerContent()\n }\n\n private defaultBannerContent() {\n return html`\n <div class=\"flex flex-col space-y-4\">\n <div class=\"flex justify-between items-center h-full\">\n <div class=\"w-9 h-9 hidden lg:block\"></div>\n <div class=\"flex flex-row items-center gap-6\">\n <div\n class=\"text-base md:text-lg font-lora md:max-w-[737px] text-grey-600\"\n .innerHTML=${this.setTemplate('title')}\n ></div>\n <div class=\"hidden md:block\">${this.registerButtonTemplate()}</div>\n </div>\n <div>\n <button\n @click=\"${this.triggerExpandBanner}\"\n class=\"h-9 w-9 flex ml-auto items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div\n class=\"icon icon-blue-600 ${this.isExpandBanner\n ? 'chevron-down'\n : 'rotate-180'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n </div>\n <div class=\"block md:hidden\">${this.registerButtonTemplate()}</div>\n </div>\n `\n }\n\n private expandedBannerContent() {\n return html`\n <div\n class=\"flex flex-col-reverse justify-between md:flex-row gap-4 md:gap-8 text-grey-600\"\n >\n <div\n class=\"flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 ml-auto\"\n >\n <p\n class=\"text-2xl md:text-2xl font-lora\"\n .innerHTML=${this.setTemplate('title', 'expand')}\n ></p>\n <p\n class=\"text-sm md:text-base\"\n .innerHTML=${this.setTemplate('description', 'expand')}\n ></p>\n <div class=\"md:self-start\">${this.registerButtonTemplate()}</div>\n </div>\n <div\n class=\"flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto mx-auto\"\n >\n <img\n alt=\"metered-wall-register\"\n src=\"${this.textTemplate.expand.imageUrl ?? ''}\"\n />\n </div>\n <button\n @click=\"${this.triggerExpandBanner}\"\n class=\"h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200 ml-auto\"\n >\n <div\n class=\"icon icon-blue-600 ${this.isExpandBanner\n ? 'chevron-down'\n : 'rotate-180'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n `\n }\n\n /**\n * template button register\n */\n private registerButtonTemplate() {\n return html`\n <div>\n ${!this.textTemplate.expand.ctaUrl\n ? html`<button\n @click=${this.redirectToRegister}\n class=\"bg-green-500 p-3 w-full whitespace-nowrap rounded-md font-bold text-grey-100 text-sm md:text-base\"\n >\n Daftar Akun\n </button>`\n : html`<button\n @click=${this.redirectToCTAUrl}\n class=\"bg-green-500 p-3 w-full whitespace-nowrap rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-auto md:mr-6\"\n >\n ${this.textTemplate.expand.ctaText}\n </button>`}\n </div>\n `\n }\n\n /**\n * mengarahkan ke page checkout promo\n */\n private redirectToCTAUrl = (): void => {\n const params = new URLSearchParams(window.location.href)\n const newUrl = new URL(this.textTemplate.expand.ctaUrl)\n const referrer = new URLSearchParams(this.textTemplate.expand.ctaUrl).get(\n 'referrer'\n )\n this.pushToDataLayer('mrw_clicked')\n if (!referrer) {\n newUrl.searchParams.append('referrer', params.toString())\n window.location.href = newUrl.toString()\n } else {\n const currentReferrerValue = newUrl.searchParams.get('referrer')\n const updatedReferrerValue = `${params.toString()},${currentReferrerValue}`\n newUrl.searchParams.set('referrer', updatedReferrerValue)\n window.location.href = newUrl.toString()\n }\n }\n\n /**\n * mengarahkan ke page register\n */\n private redirectToRegister = (): void => {\n this.pushToDataLayer('mrw_clicked')\n const newUrl = new URL(decodeURIComponent(this.registerUrl))\n if (this.next_param)\n newUrl.searchParams.append('next', decodeURIComponent(this.next_param))\n window.location.href = newUrl.toString()\n }\n\n /**\n * mengirim event ke datalayer\n */\n private pushToDataLayer(eventName: string) {\n window.dataLayer.push({\n event: eventName,\n page_title: this.tracker_page_title,\n page_type: this.tracker_page_type,\n content_type: this.tracker_content_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_authors: this.tracker_content_authors,\n content_editors: this.tracker_content_editors,\n content_tags: this.tracker_content_tags,\n content_published_date: this.tracker_content_published_date,\n content_categories: this.tracker_content_categories,\n user_type: this.tracker_user_type || 'G',\n subscription_status: this.tracker_subscription_status || '',\n metered_wall_type: this.tracker_metered_wall_type || 'MRW',\n metered_wall_balance: this.tracker_metered_wall_balance,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n })\n }\n\n /**\n * toggle isExpandBanner flag\n */\n private triggerExpandBanner() {\n this.isExpandBanner = !this.isExpandBanner\n return !this.isExpandBanner && this.pushToDataLayer('mrw_closed')\n }\n\n /**\n * Lifecycle\n */\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n this.loadData()\n }\n\n private async loadData() {\n const { source } = this // kompas_com || default\n\n const req = await fetch(\n `https://cdn-www.kompas.id/assets/register_wall_new.json`\n )\n\n if (req.status !== 200) {\n throw new Error(`${req.status} Ada galat saat memproses permintaan.`)\n }\n\n const res: meteredRegisterResponse = await req.json()\n const validSource = source in res ? source : 'default'\n\n this.textTemplate = res[validSource as keyof typeof res]\n\n const getCountdown = this.countdownArticle\n\n if (!getCountdown) {\n this.isShowBanner = false\n } else {\n this.isExpandBanner = this.defaultExpandBanner\n }\n\n if (this.isShowBanner) {\n this.pushToDataLayer('mrw_viewed')\n }\n }\n\n render() {\n return this.isShowBanner\n ? html`\n <div class=\"sticky bottom-0 w-full h-full z-20\">\n <div class=\"w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4\">\n <div class=\"lg:max-w-7xl m-auto px-0 lg:px-24 relative\">\n ${this.bannerTemplate()}\n </div>\n </div>\n </div>\n `\n : null\n }\n}\n"]}