@kompasid/lit-web-components 0.8.11 → 0.8.13

package/src/components/kompasid-header-notification/KompasHeaderNotification.ts

@@ -137,9 +137,25 @@ export class KompasHeaderNotification extends LitElement {
   @state() notificationContentData: any[] = []
   @state() isDataLoaded: boolean = false
 
+  /*
+   * property accessToken is the access token of the user
+   * property refreshToken is the refresh token of the user
+   * property domain is the domain of the API based on website
+   * property tracker_user_type is the type of user based on their subscription
+   * property tracker_subscription_status is the status of their subscription
+   * property tracker_page_domain is the page domain
+   * property tracker_metered_wall_type is the type of metered wall
+   * property tracker_metered_wall_balance is the balance of their metered wall
+   */
+
   @property({ type: String }) accessToken = ''
   @property({ type: String }) refreshToken = ''
   @property({ type: String }) domain = 'id' // 'id' | 'cloud'
+  @property({ type: String }) tracker_user_type = ''
+  @property({ type: String }) tracker_subscription_status = ''
+  @property({ type: String }) tracker_page_domain = ''
+  @property({ type: String }) tracker_metered_wall_type = ''
+  @property({ type: Number }) tracker_metered_wall_balance = 0
 
   constructor() {
     super()
@@ -166,7 +182,7 @@ export class KompasHeaderNotification extends LitElement {
     super.connectedCallback()
     this.isShowDropdown = false
 
-    if (this.accessToken && this.refreshToken && this.domain)
+    if ((this.accessToken || this.refreshToken) && this.domain)
       await this.loadData()
     document.addEventListener('click', this.handleClickOutside)
   }
@@ -263,10 +279,8 @@ export class KompasHeaderNotification extends LitElement {
         this.notificationInfoData = (
           values[0] as ApiResponse<UserNotification>
         ).data
-        this.notificationInfoData.notificationList = null
         this.notificationInfoData.notificationList =
           this.notificationInfoData.notificationList || []
-
         const rubrikData = (values[1] as ApiRubrikResponse<any>).result || []
         const ePaperData = (values[2] as ApiResponse<any>).data[0] || {}
 
@@ -299,6 +313,9 @@ export class KompasHeaderNotification extends LitElement {
 
   private toggleDropdown() {
     this.isShowDropdown = !this.isShowDropdown
+
+    // if opened, fire the datalayer
+    if (this.isShowDropdown) this.pushDataLayer('notification_opened')
   }
 
   private notificationIcon() {
@@ -328,7 +345,26 @@ export class KompasHeaderNotification extends LitElement {
     this.selectedTab = value
   }
 
-  private redirectTo = async (notifId: string, link: string) => {
+  private handleNotificationUrlParam = (url: string, type: string) => {
+    const params = {
+      open_from: type,
+    }
+    const newUrl = new URL(decodeURIComponent(url))
+    if (newUrl.search) {
+      for (const [key, value] of Object.entries(params)) {
+        if (!newUrl.searchParams.has(key)) {
+          newUrl.searchParams.append(key, value)
+        }
+      }
+    } else {
+      newUrl.search = new URLSearchParams(params).toString()
+    }
+
+    return newUrl.toString()
+  }
+
+  private redirectTo = async (notifData: NotificationList) => {
+    const { notificationId: notifId, link, label } = notifData
     const res = await this.notifRead(notifId)
 
     if (res.status === 200) {
@@ -344,9 +380,9 @@ export class KompasHeaderNotification extends LitElement {
       }
     }
 
+    this.pushDataLayer('notification_clicked', 'Information', label)
     if (link) {
-      const url = new URL(decodeURIComponent(link))
-
+      const url = this.handleNotificationUrlParam(link, 'Notification_Info')
       window.open(url, '_blank')
     }
   }
@@ -373,7 +409,7 @@ export class KompasHeaderNotification extends LitElement {
       return html`
         <div class="text-center px-4 pt-6 pb-18">
           <img
-            src="../../assets/empty-state-notification.png"
+            src="https://cdn-www.kompas.id/assets/empty-state-notification.png"
             alt="empty-state-notification"
             class="w-auto mx-auto"
           />
@@ -392,7 +428,7 @@ export class KompasHeaderNotification extends LitElement {
           : `https://cdn-www.kompas.id/assets/langganan-anda-telah-berakhir.svg`
 
       return html`<div class="w-3/4 pr-1">
-          <div class="flex items-center mb-1 text-xs">
+          <div class="flex items-center mb-1 text-xs font-bold">
             <span class="text-green-500 bg-green-100 rounded-sm p-1 px-2">
               ${item.label}
             </span>
@@ -417,7 +453,7 @@ export class KompasHeaderNotification extends LitElement {
             class="flex w-full text-left items-start p-4 cursor-pointer justify-between ${!item.isRead
               ? 'bg-blue-100'
               : ''}"
-            @click=${() => this.redirectTo(item.notificationId, item.link)}
+            @click=${() => this.redirectTo(item)}
           >
             ${notificationInfoListTemplate(item)}
           </button> `
@@ -437,7 +473,7 @@ export class KompasHeaderNotification extends LitElement {
 
   private redirectToNotification(tab: string) {
     window.open(
-      `https://account.kompas.id/manage-account/notification/${tab}`,
+      `https://account.kompas.${this.domain}/manage-account/notification/${tab}`,
       '_blank'
     )
   }
@@ -449,7 +485,7 @@ export class KompasHeaderNotification extends LitElement {
       return html`
         <div class="text-center px-4 pt-6 pb-18">
           <img
-            src="../../assets/empty-state-notification.png"
+            src="https://cdn-www.kompas.id/assets/empty-state-notification.png"
             alt="empty-state-notification"
             class="w-auto mx-auto"
           />
@@ -464,7 +500,7 @@ export class KompasHeaderNotification extends LitElement {
     const notificationContentListTemplate = (item: any) => html`<div
         class="w-3/4 pr-1 "
       >
-        <div class="flex items-center mb-1 text-xs">
+        <div class="flex items-center mb-1 text-xs font-bold">
           <span class="text-green-500 bg-green-100 rounded-sm p-1 px-2">
             ${item.category[0].name}
           </span>
@@ -472,9 +508,7 @@ export class KompasHeaderNotification extends LitElement {
             ${this.formatDate(item.publishedDateGmt)}</span
           >
         </div>
-        <p class="font-bold text-base text-customTextColor py-1">
-          ${item.title}
-        </p>
+        <p class="font-bold text-sm text-customTextColor py-1">${item.title}</p>
       </div>
       <div class="w-1/4">
         <img
@@ -491,7 +525,16 @@ export class KompasHeaderNotification extends LitElement {
             class="flex w-full text-left items-start p-4 cursor-pointer justify-between ${!item.isRead
               ? 'bg-blue-100'
               : ''}"
-            @click=${() => window.open(item.permalink, '_blank')}
+            @click=${() => {
+              this.pushDataLayer('notification_click', 'Content', 'Content')
+              window.open(
+                this.handleNotificationUrlParam(
+                  item.permalink,
+                  'Notification_Content'
+                ),
+                '_blank'
+              )
+            }}
           >
             ${notificationContentListTemplate(item)}
           </button> `
@@ -521,17 +564,17 @@ export class KompasHeaderNotification extends LitElement {
           : ''}"
       >
         <div class="sticky">
-          <div class="flex justify-center py-2 border-b border-grey-300">
+          <div class="flex justify-center py-4 border-b border-grey-300">
             <span class="font-bold text-base">Notifikasi</span>
           </div>
           <!-- Tabs for Info and Content -->
-          <div class="flex justify-between">
+          <div class="flex justify-between text-grey-400">
             ${tab.map(
               item =>
                 html`
                   <button
-                    class="focus:outline-none py-2 w-1/2 ${this.selectedTab ===
-                      item && 'link-active'}"
+                    class="focus:outline-none font-bold  py-2 w-1/2 ${this
+                      .selectedTab === item && 'link-active'}"
                     @click=${() => this.handleClick(item)}
                   >
                     ${item}
@@ -549,6 +592,56 @@ export class KompasHeaderNotification extends LitElement {
     `
   }
 
+  private getParamsData(tab?: string, type?: string): any {
+    let notificationData = {}
+    let notifType = type
+
+    if (type && tab) {
+      if (type !== 'Content') {
+        switch (true) {
+          case /langganan/i.test(type):
+            notifType = 'Subscription'
+            break
+          case type === 'Akun':
+            notifType = 'Account'
+            break
+          case /bayar/i.test(type):
+            notifType = 'Payment'
+            break
+          default:
+            notifType = 'Information'
+            break
+        }
+      }
+
+      notificationData = {
+        notification_tab: tab,
+        notification_type: notifType,
+      }
+    }
+
+    const data = {
+      user_type: this.tracker_user_type,
+      subscription_status: this.tracker_subscription_status,
+      page_domain: this.tracker_page_domain || 'Kompas.id',
+      metered_wall_type: this.tracker_metered_wall_type || 'FP',
+      metered_wall_balance: this.tracker_metered_wall_balance,
+    }
+
+    return {
+      ...notificationData,
+      ...data,
+    }
+  }
+
+  private pushDataLayer(eventName: string, tab?: string, type?: string): void {
+    const data = this.getParamsData(tab, type)
+    window.dataLayer.push({
+      event: eventName,
+      ...data,
+    })
+  }
+
   render() {
     return html`<div id="headerNotification" class="relative">
       ${this.isDataLoaded

package/src/components/kompasid-header-notification/readme.md

@@ -12,4 +12,15 @@ Ini adalah komponen _header notification_ yang akan di implementasi pada header
 
 ---
 
+## Usage
+
+```js
+   <kompasid-header-notification
+      :accessToken="accessToken" --> // token from cookies
+      :refreshToken="refreshToken" --> // refresh token from cookies
+      domain="cloud" --> // default id
+      style="margin-left: auto; margin-right:15px"
+    />
+```
+
 _Terbikin oleh tim front-end kompas.id_

package/web-dev-server.config.mjs

@@ -1,7 +1,7 @@
 // import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
 
 /** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
+const hmr = process.argv.includes('--hmr')
 
 export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   open: '/demo/',
@@ -24,4 +24,5 @@ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   ],
 
   // See documentation for all available options
-});
+  port: 3000,
+})