@kompasid/lit-web-components 0.8.21 → 0.8.23

package/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts

@@ -123,34 +123,39 @@ export class KompasHeaderAccountProfile extends LitElement {
      */
 
     const activeInfoTemplate = () => {
-      const { isGracePeriod, totalGracePeriod, activeInfo } = this.userData
+      const { isGracePeriod, totalGracePeriod, activeInfo, expired } =
+        this.userData
+
+      let startGracePeriodDate
+      let endGracePeriodDate
+
+      if (isGracePeriod) {
+        const totalGraceSubs = Math.max(totalGracePeriod - 1, 0)
+        startGracePeriodDate = this.formatDate(
+          subDays(new Date(), totalGraceSubs)
+        )
+        endGracePeriodDate = this.formatDate(
+          addDays(new Date(), this.maxGracePeriod - totalGracePeriod)
+        )
+      }
 
       const expiredTextColor = isGracePeriod
         ? `text-orange-500`
         : `text-grey-600`
 
-      const startGracePeriodDate = this.formatDate(
-        subDays(new Date().toLocaleDateString(), totalGracePeriod - 1)
-      )
-      const endGracePeriodDate = this.formatDate(
-        addDays(
-          new Date().toLocaleDateString(),
-          this.maxGracePeriod - totalGracePeriod
-        )
-      )
-
       const text = isGracePeriod
         ? html`<span> Periode Masa Tenggang </span>
             <p class="font-bold">
               ${startGracePeriodDate} - ${endGracePeriodDate}
             </p> `
-        : activeInfo || ''
+        : html`<p>${activeInfo}</p>
+            <p class="font-bold">${expired}</p>` || ''
 
-      return html`<p class="capitalize text-sm ${expiredTextColor}">${text}</p>`
+      return html`<p class="text-sm ${expiredTextColor}">${text}</p>`
     }
 
     return html`<div
-      class="active-info flex flex-col items-start leading-none text-left"
+      class="active-info flex flex-col items-start leading-none text-left font-sans"
     >
       <div class="flex flex-row items-center gap-4">
         <div

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from 'lit'
 import { format, isToday, formatDistanceStrict, subDays } from 'date-fns'
+import { cva } from 'class-variance-authority'
 import { id } from 'date-fns/locale/id'
 import { customElement, property, state } from 'lit/decorators.js'
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
@@ -12,7 +13,7 @@ import {
   ApiRubrikResponse,
 } from './types.js'
 import { customFetch } from './utils.js'
-import { getHeaderTheme } from '../../utils/getHeaderTheme.js'
+import { getHeaderTheme } from '../../utils/api/getHeaderTheme.js'
 
 @customElement('kompasid-header-notification')
 export class KompasHeaderNotification extends LitElement {
@@ -142,7 +143,7 @@ export class KompasHeaderNotification extends LitElement {
   @state() notificationInfoData: UserNotification = {} as UserNotification
   @state() notificationContentData: any[] = []
   @state() isDataLoaded: boolean = false
-
+  @state() themeList: any = null
   /*
    * property accessToken is the access token of the user
    * property refreshToken is the refresh token of the user
@@ -189,6 +190,7 @@ export class KompasHeaderNotification extends LitElement {
   override async connectedCallback() {
     super.connectedCallback()
     this.isShowDropdown = false
+    this.themeList = await getHeaderTheme()
 
     if ((this.accessToken || this.refreshToken) && this.domain)
       await this.loadData()
@@ -200,6 +202,13 @@ export class KompasHeaderNotification extends LitElement {
     document.removeEventListener('click', this.handleClickOutside)
   }
 
+  private setTheme(param: any): String {
+    if (!this.themeList) return 'text-grey-100'
+    const cvaFn = cva('', { variants: this.themeList })
+
+    return cvaFn(param)
+  }
+
   private async apiFetch(url: string, options: any) {
     const response = await customFetch(
       url,
@@ -337,7 +346,7 @@ export class KompasHeaderNotification extends LitElement {
         ${notificationIndicator()}
         <div class="flex flex-row items-center self-center">
           <div
-            class="cursor-pointer mt-0.5 ${getHeaderTheme({
+            class="cursor-pointer mt-0.5 ${this.setTheme({
               icon: this.theme,
             })}"
           >
@@ -656,7 +665,7 @@ export class KompasHeaderNotification extends LitElement {
       ${this.isDataLoaded
         ? this.notificationIcon()
         : html`<div
-            class="cursor-pointer mt-0.5 animate-spin ${getHeaderTheme({
+            class="cursor-pointer mt-0.5 animate-spin ${this.setTheme({
               icon: this.theme,
             })}"
           >

package/src/utils/api/getHeaderTheme.ts

@@ -0,0 +1,29 @@
+let cachedHeaderTheme: any = null
+let fetchPromise: Promise<any> | null = null
+
+export const getHeaderTheme = async () => {
+  if (cachedHeaderTheme) return cachedHeaderTheme // Return cached value if available
+
+  if (!fetchPromise) {
+    fetchPromise = fetch('https://cdn-www.kompas.id/global-header/theme.json', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(response => response.json())
+      .then(data => {
+        // Process the fetched data using `cva` and cache it
+        cachedHeaderTheme = data.header
+
+        fetchPromise = null // Reset the fetchPromise
+        return cachedHeaderTheme
+      })
+      .catch(err => {
+        fetchPromise = null // Reset the promise in case of error
+        throw err // Re-throw the error
+      })
+  }
+
+  return fetchPromise
+}

package/dist/src/utils/getHeaderTheme.d.ts

@@ -1,3 +0,0 @@
-export declare const getHeaderTheme: (props?: import("class-variance-authority/dist/types").ClassProp | ({
-    [x: string]: string | number | symbol | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/src/utils/getHeaderTheme.js

@@ -1,17 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { cva } from 'class-variance-authority';
-let responseData;
-await fetch('https://cdn-www.kompas.id/global-header/theme.json', {
-    method: 'GET',
-    headers: {
-        'Content-Type': 'application/json',
-    },
-})
-    .then(response => response.json())
-    .then(data => {
-    responseData = data;
-});
-export const getHeaderTheme = cva('', {
-    variants: responseData.header,
-});
-//# sourceMappingURL=getHeaderTheme.js.map

package/dist/src/utils/getHeaderTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getHeaderTheme.js","sourceRoot":"","sources":["../../../src/utils/getHeaderTheme.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAA;AAE9C,IAAI,YAAY,CAAA;AAEhB,MAAM,KAAK,CAAC,oDAAoD,EAAE;IAChE,MAAM,EAAE,KAAK;IACb,OAAO,EAAE;QACP,cAAc,EAAE,kBAAkB;KACnC;CACF,CAAC;KACC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACjC,IAAI,CAAC,IAAI,CAAC,EAAE;IACX,YAAY,GAAG,IAAI,CAAA;AACrB,CAAC,CAAC,CAAA;AAEJ,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAC,EAAE,EAAE;IACpC,QAAQ,EAAG,YAAoB,CAAC,MAAM;CACvC,CAAC,CAAA","sourcesContent":["// eslint-disable-next-line import/no-extraneous-dependencies\nimport { cva } from 'class-variance-authority'\n\nlet responseData\n\nawait fetch('https://cdn-www.kompas.id/global-header/theme.json', {\n  method: 'GET',\n  headers: {\n    'Content-Type': 'application/json',\n  },\n})\n  .then(response => response.json())\n  .then(data => {\n    responseData = data\n  })\n\nexport const getHeaderTheme = cva('', {\n  variants: (responseData as any).header,\n})\n"]}

package/src/utils/getHeaderTheme.ts

@@ -1,19 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { cva } from 'class-variance-authority'
-
-let responseData
-
-await fetch('https://cdn-www.kompas.id/global-header/theme.json', {
-  method: 'GET',
-  headers: {
-    'Content-Type': 'application/json',
-  },
-})
-  .then(response => response.json())
-  .then(data => {
-    responseData = data
-  })
-
-export const getHeaderTheme = cva('', {
-  variants: (responseData as any).header,
-})