@kompasid/lit-web-components 0.8.7 → 0.8.9

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

@@ -0,0 +1,548 @@
+import { LitElement, html, css } from 'lit'
+import { format, isToday, formatDistanceStrict, subDays } from 'date-fns'
+import { id } from 'date-fns/locale/id'
+import { customElement, property, state } from 'lit/decorators.js'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import {
+  UserNotification,
+  NotificationList,
+  ApiResponse,
+  ApiRubrikResponse,
+} from './types.js'
+import { customFetch } from './utils.js'
+
+@customElement('kompasid-header-notification')
+export class KompasHeaderNotification extends LitElement {
+  static styles = [
+    css`
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+
+      .header-account--notification-indicator {
+        position: absolute;
+        top: 0;
+        height: 0.5rem;
+        width: 0.5rem;
+        background-color: #ff7a00;
+        border-radius: 50%;
+        right: -0.403rem;
+        top: -0.281rem;
+      }
+
+      .header-notificaion-dropdown {
+        width: 20.5rem;
+        background-color: #ffffff;
+        font-family: 'PT Sans', sans-serif;
+        font-size: 0.875rem;
+        position: absolute;
+        right: -7.5vmax;
+      }
+
+      .w-14 {
+        width: 3.25rem;
+      }
+
+      .h-\\[300px\\] {
+        height: 300px;
+      }
+
+      .h-14 {
+        height: 3.25rem;
+      }
+
+      .bg-green-100 {
+        --tw-bg-opacity: 1;
+        background-color: rgb(238 252 210 / var(--tw-bg-opacity));
+      }
+
+      .overflow-y-scroll {
+        overflow-y: scroll;
+      }
+
+      .link-active {
+        color: #0468cb;
+        border-color: #0468cb;
+        border-bottom-width: 3px;
+        background-color: transparent !important;
+      }
+
+      .animate-spin {
+        animation: spin 2s linear infinite;
+      }
+
+      @keyframes spin {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      .object-cover {
+        object-fit: cover;
+      }
+
+      .z-index-max {
+        z-index: 99999;
+      }
+
+      /* Custom Scrollbar for header */
+      /* width */
+      ::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      /* Track */
+      ::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      /* Handle */
+      ::-webkit-scrollbar-thumb {
+        background: #0356a8;
+        border-radius: 100px;
+      }
+
+      /* Handle on hover */
+      ::-webkit-scrollbar-thumb:hover {
+        background: #0356a8;
+      }
+
+      @media (min-width: 1024px) {
+        .header-notificaion-dropdown {
+          right: -4vmax;
+        }
+      }
+
+      @media (max-width: 360px) {
+        .header-notificaion-dropdown {
+          right: -10vmax;
+        }
+      }
+    `,
+    TWStyles,
+  ]
+
+  @state() isShowDropdown: boolean = false
+  @state() selectedTab: string = 'Info'
+  @state() notificationInfoData: UserNotification = {} as UserNotification
+  @state() notificationContentData: any[] = []
+  @state() isDataLoaded: boolean = false
+
+  @property({ type: String }) accessToken = '' // prod || dev
+  @property({ type: String }) refreshToken = '' // prod || dev
+
+  constructor() {
+    super()
+    this.handleClickOutside = this.handleClickOutside.bind(this)
+  }
+
+  /**
+   * Function to format date
+   */
+  formatDate(date: string) {
+    // Check if the provided date is today
+    let result
+    if (isToday(date)) {
+      // Return time difference if it's today (e.g., "7 hours ago")
+      result = `${formatDistanceStrict(date, new Date(), { locale: id })} lalu`
+    } else {
+      // Return formatted date (e.g., "12 Sep 2024, 09:00")
+      result = format(date, 'dd MMM yyyy, HH:mm', { locale: id })
+    }
+    return result
+  }
+
+  override async connectedCallback() {
+    super.connectedCallback()
+    this.isShowDropdown = false
+
+    if (this.accessToken && this.refreshToken) await this.loadData()
+    document.addEventListener('click', this.handleClickOutside)
+  }
+
+  override async disconnectedCallback() {
+    super.disconnectedCallback()
+    document.removeEventListener('click', this.handleClickOutside)
+  }
+
+  private async apiFetch(url: string, options: any) {
+    const response = await customFetch(
+      url,
+      this.refreshToken,
+      this.accessToken,
+      { ...options }
+    )
+
+    return response
+  }
+
+  private async getNotifRubrik() {
+    const req = this.apiFetch(
+      'https://cds.kompas.cloud/api/v1/article/pilihanku',
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    )
+    return req
+  }
+
+  private async getNotifList() {
+    const req = await this.apiFetch(
+      'https://api.kompas.cloud/account/api/v1/users/notification',
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    )
+    return req
+  }
+
+  private async getEpaperData() {
+    const formatDate = 'yyyy/MM/dd'
+    const startDate = format(subDays(new Date(), 1), formatDate)
+    const endDate = format(new Date(), formatDate).toString()
+    const req = await this.apiFetch(
+      `https://apiepaper.kompas.cloud/products?startDate=${startDate}&endDate=${endDate}&sort=desc`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    )
+
+    return req
+  }
+
+  private async notifRead(notifId: string) {
+    const req = await this.apiFetch(
+      'https://api.kompas.cloud/account/api/v1/users/notification/read',
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'PUT',
+        body: JSON.stringify({
+          notificationId: notifId,
+        }),
+      }
+    )
+    return req
+  }
+
+  private async loadData() {
+    const apiCalls = [
+      this.getNotifList(),
+      this.getNotifRubrik(),
+      this.getEpaperData(),
+    ]
+    this.isDataLoaded = false
+
+    Promise.all(apiCalls)
+      .then(responses =>
+        Promise.all(responses.map(response => response.json()))
+      )
+      .then(values => {
+        this.notificationInfoData = (
+          values[0] as ApiResponse<UserNotification>
+        ).data
+        const rubrikData = (values[1] as ApiRubrikResponse<any>).result
+        const ePaperData = (values[2] as ApiResponse<any>).data[0]
+        const { publishDate, description, thumbnail, title, url } = ePaperData
+
+        const data = {
+          title,
+          category: [{ name: 'ePaper', slug: 'epaper' }],
+          publishedDateGmt: format(
+            new Date(publishDate),
+            'yyyy-MM-dd HH:mm:ss'
+          ),
+          permalink: url,
+          thumbnails: {
+            sizes: { thumbnailSquareMedium: { permalink: thumbnail } },
+          },
+          excerpt: description,
+        }
+
+        this.notificationContentData = [data, ...rubrikData]
+        this.notificationContentData.sort(
+          (a: any, b: any) =>
+            new Date(b.publishedDateGmt).getTime() -
+            new Date(a.publishedDateGmt).getTime()
+        )
+
+        this.isDataLoaded = true
+      })
+  }
+
+  private toggleDropdown() {
+    this.isShowDropdown = !this.isShowDropdown
+  }
+
+  private notificationIcon() {
+    const notificationIndicator = () => {
+      if (!this.notificationInfoData.notificationCount) return html``
+      return html`<div
+        class="header-account--notification-indicator animate-ping"
+      ></div>`
+    }
+
+    return html`
+      <button
+        @click=${this.toggleDropdown}
+        class="cursor-pointer relative flex items-center"
+      >
+        ${notificationIndicator()}
+        <div class="flex flex-row items-center self-center">
+          <div class="text-white cursor-pointer mt-0.5">
+            ${unsafeSVG(getFontAwesomeIcon('fas', 'bell', 21, 21))}
+          </div>
+        </div>
+      </button>
+    `
+  }
+
+  private handleClick = (value: string) => {
+    this.selectedTab = value
+  }
+
+  private redirectTo = async (notifId: string, link: string) => {
+    const res = await this.notifRead(notifId)
+
+    if (res.status === 200) {
+      this.notificationInfoData = {
+        ...this.notificationInfoData,
+        notificationList: this.notificationInfoData.notificationList.map(
+          notifItem => ({
+            ...notifItem,
+            isRead:
+              notifItem.notificationId === notifId ? true : notifItem.isRead,
+          })
+        ),
+      }
+    }
+
+    if (link) {
+      const url = new URL(decodeURIComponent(link))
+
+      window.open(url, '_blank')
+    }
+  }
+
+  private handleClickOutside(event: Event) {
+    if (!this.isShowDropdown) return
+
+    const popup = this.shadowRoot?.getElementById('headerNotification')
+    const ev = event.composedPath()
+    if (this.isShowDropdown && popup && !ev?.includes(popup as HTMLElement)) {
+      this.isShowDropdown = false // Close the popup
+    }
+  }
+
+  // Notification Info
+  private notificationInfoSection() {
+    const { notificationList }: { notificationList: NotificationList[] } =
+      this.notificationInfoData
+
+    // Empty state
+    if (!notificationList.length)
+      return html`
+        <div class="text-center px-4 pt-6 pb-32">
+          <img
+            src="../../assets/empty-state-notification.png"
+            alt="empty-state-notification"
+            class="w-auto mx-auto"
+          />
+          <p class="font-bold text-center text-lg py-2">Belum Ada Notifikasi</p>
+          <p class="px-2">
+            Kami akan memberitahukan Anda ketika ada informasi dan pemberitahuan
+            terbaru.
+          </p>
+        </div>
+      `
+
+    const notificationInfoListTemplate = (item: NotificationList) => {
+      const imgUrl =
+        item.label === 'Akun'
+          ? `https://cdn-www.kompas.id/assets/notifikasi-akun.svg`
+          : `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">
+            <span class="text-green-500 bg-green-100 rounded-sm p-1 px-2">
+              ${item.label}
+            </span>
+            <span class="text-grey-400 ml-2"
+              >${this.formatDate(item.time)}</span
+            >
+          </div>
+          <div>
+            <p class="text-sm font-bold">${item.title}</p>
+            <p class="text-sm">${item.description}</p>
+          </div>
+        </div>
+        <div class="w-1/4">
+          <img src="${imgUrl}" alt="${item.label}-alt" class="w-14 h-14" />
+        </div>`
+    }
+
+    return html`<div class="h-[300px] overflow-y-scroll">
+      ${notificationList.map(
+        item =>
+          html`<button
+            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)}
+          >
+            ${notificationInfoListTemplate(item)}
+          </button> `
+      )}
+      </div>
+      <!-- Footer Link -->
+      <div class="px-4 py-4 text-center">
+        <a href="#" @click="${() =>
+          this.redirectToNotification(
+            'info'
+          )}" class="text-base font-bold text-blue-500">
+          Lihat Selengkapnya</a
+        >
+      </div>
+    </div>`
+  }
+
+  private redirectToNotification(tab: string) {
+    window.open(
+      `https://account.kompas.id/manage-account/notification/${tab}`,
+      '_blank'
+    )
+  }
+
+  // Notification Content
+  private notificationContentSection() {
+    // Empty state
+    if (!this.notificationContentData.length) {
+      return html`
+        <div class="text-center px-4 pt-6 pb-32">
+          <img
+            src="../../assets/empty-state-notification.png"
+            alt="empty-state-notification"
+            class="w-auto mx-auto"
+          />
+          <p class="font-bold text-center text-lg py-2">Belum Ada Notifikasi</p>
+          <p class="px-2">
+            Kami akan memberitahukan Anda ketika ada informasi dan pemberitahuan
+            terbaru.
+          </p>
+        </div>
+      `
+    }
+    const notificationContentListTemplate = (item: any) => html`<div
+        class="w-3/4 pr-1 "
+      >
+        <div class="flex items-center mb-1 text-xs">
+          <span class="text-green-500 bg-green-100 rounded-sm p-1 px-2">
+            ${item.category[0].name}
+          </span>
+          <span class="text-grey-400 ml-2">
+            ${this.formatDate(item.publishedDateGmt)}</span
+          >
+        </div>
+        <p class="font-bold text-base text-customTextColor py-1">
+          ${item.title}
+        </p>
+      </div>
+      <div class="w-1/4">
+        <img
+          src="${item.thumbnails.sizes.thumbnailSquareMedium.permalink}"
+          alt="content-img-alt"
+          class="w-14 h-14 object-cover"
+        />
+      </div>`
+
+    return html`<div class="h-[300px] overflow-y-scroll">
+      ${this.notificationContentData.map(
+        item =>
+          html`<button
+            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')}
+          >
+            ${notificationContentListTemplate(item)}
+          </button> `
+      )}
+      </div>
+      <!-- Footer Link -->
+      <div class="px-4 py-4 text-center">
+        <a href="#" @click="${() =>
+          this.redirectToNotification(
+            'konten'
+          )}"  class="text-base font-bold text-blue-500">
+          Lihat Selengkapnya</a
+        >
+      </div>
+    </div>`
+  }
+
+  private notificationPopup() {
+    const tab = ['Info', 'Konten']
+
+    return html`
+      <div
+        id="notificationPopup"
+        class="header-notificaion-dropdown rounded-lg shadow-lg z-50 mt-2 ${this
+          .isShowDropdown
+          ? 'active'
+          : ''}"
+      >
+        <div class="sticky">
+          <div class="flex justify-center py-2 border-b border-grey-300">
+            <span class="font-bold text-base">Notifikasi</span>
+          </div>
+          <!-- Tabs for Info and Content -->
+          <div class="flex justify-between">
+            ${tab.map(
+              item =>
+                html`
+                  <button
+                    class="focus:outline-none py-2 w-1/2 ${this.selectedTab ===
+                      item && 'link-active'}"
+                    @click=${() => this.handleClick(item)}
+                  >
+                    ${item}
+                  </button>
+                `
+            )}
+          </div>
+        </div>
+
+        <!-- Notification Content -->
+        ${this.selectedTab === 'Info'
+          ? this.notificationInfoSection()
+          : this.notificationContentSection()}
+      </div>
+    `
+  }
+
+  render() {
+    return html`<div id="headerNotification" class="relative">
+      ${this.isDataLoaded
+        ? this.notificationIcon()
+        : html`<div class="text-white cursor-pointer mt-0.5 animate-spin">
+            ${unsafeSVG(getFontAwesomeIcon('fa', 'circle-notch', 21, 21))}
+          </div>`}
+      ${this.isShowDropdown ? this.notificationPopup() : ''}
+    </div>`
+  }
+}

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

@@ -0,0 +1,39 @@
+export interface NotificationList {
+  notificationId: string
+  id: number
+  title: string
+  label: string
+  description: string
+  isRead: boolean
+  time: string // ISO date string
+  link: string
+}
+
+// Interface for the overall notification state
+export interface UserNotification {
+  notificationList: NotificationList[]
+  notificationCount: number
+  loadMore: boolean
+  next: number
+}
+
+interface Meta {
+  cache: boolean
+  time: number
+}
+
+export interface ApiResponse<T> {
+  success: boolean
+  code: number
+  message: string
+  meta: Meta
+  data: T
+}
+
+export interface ApiRubrikResponse<T> {
+  success: boolean
+  code: number
+  message: string
+  meta: Meta
+  result: T
+}

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

@@ -0,0 +1,86 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-undef */
+// Define types for the API responses
+interface RefreshTokenResponse {
+  data: {
+    accessToken: string
+    deviceKeyId: string
+    isVerified: boolean
+    refreshToken: string
+  }
+}
+
+interface ApiResponse<T> extends Response {
+  json(): Promise<T>
+}
+
+interface RequestInit {
+  method?: string
+  headers?: Headers | { [key: string]: string }
+  body?: BodyInit | null
+  mode?: RequestMode
+  credentials?: RequestCredentials
+  cache?: RequestCache
+  redirect?: RequestRedirect
+  referrer?: string
+  referrerPolicy?: ReferrerPolicy
+  integrity?: string
+  keepalive?: boolean
+  signal?: AbortSignal
+}
+
+// Function to refresh the token
+async function refreshAccessToken(refreshToken: string): Promise<string> {
+  const response = await fetch(
+    'https://api.kompas.cloud/account/api/v1/tokens/refresh',
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        refreshToken,
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }
+  )
+
+  if (!response.ok) {
+    throw new Error('Failed to refresh token')
+  }
+
+  const data: RefreshTokenResponse = await response.json()
+  return data.data.accessToken
+}
+
+// Custom fetch function that retries after 401
+export async function customFetch<T>(
+  url: string,
+  refreshToken: string,
+  accessToken: string,
+  options: RequestInit = {}
+): Promise<ApiResponse<T>> {
+  try {
+    // Retrieve and set access token in headers
+    const headers = new Headers(options.headers || {})
+    if (accessToken) {
+      headers.set('Authorization', `Bearer ${accessToken}`)
+    }
+
+    // Set updated headers
+    options.headers = headers
+    let response = await fetch(url, options)
+
+    // Retry request if 401 error occurs
+    if (response.status === 401) {
+      const newToken = await refreshAccessToken(refreshToken)
+      headers.set('Authorization', `Bearer ${newToken}`)
+      // Retry the original request with the new token
+      response = await fetch(url, { ...options, headers })
+    }
+
+    return response as ApiResponse<T>
+  } catch (error) {
+    console.error('Error making API call:', error)
+    throw error
+  }
+}

package/src/components/kompasid-paywall-body/KompasPaywallBody.ts

@@ -597,8 +597,9 @@ export class KompasIdPaywallBody extends LitElement {
     let buttonContent
     const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'
     const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'
+    const isPrevHistoryExist = window.history.length > 1
 
-    if (type === 'epaper') {
+    if (type === 'epaper' && isPrevHistoryExist) {
       buttonContent = html` <button
         @click=${this.redirectToPrevUrl}
         class="hidden md:block w-8 h-8 pl-4 ${textColorClass}"

package/src/index.ts

@@ -7,6 +7,7 @@ export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/Komp
 export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js'
 export { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'
 export { KompasHeaderAccount } from './components/kompasid-header-account/KompasHeaderAccount.js'
+export { KompasHeaderNotification } from './components/kompasid-header-notification/KompasHeaderNotification.js'
 export { KompasGracePeriod } from './components/kompasid-grace-period/KompasGracePeriod.js'
 
 declare global {