@kompasid/lit-web-components 0.8.22 → 0.8.24

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'
@@ -142,8 +143,7 @@ export class KompasHeaderNotification extends LitElement {
   @state() notificationInfoData: UserNotification = {} as UserNotification
   @state() notificationContentData: any[] = []
   @state() isDataLoaded: boolean = false
-  @state() setTheme: any
-
+  @state() themeList: any = null
   /*
    * property accessToken is the access token of the user
    * property refreshToken is the refresh token of the user
@@ -190,7 +190,7 @@ export class KompasHeaderNotification extends LitElement {
   override async connectedCallback() {
     super.connectedCallback()
     this.isShowDropdown = false
-    this.setTheme = await getHeaderTheme()
+    this.themeList = await getHeaderTheme()
 
     if ((this.accessToken || this.refreshToken) && this.domain)
       await this.loadData()
@@ -202,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,

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

@@ -400,6 +400,7 @@ export class KompasIdPaywallBody extends LitElement {
     this._packages = this.paywallData?.packages ?? ({} as Packages)
 
     super.connectedCallback()
+    this.sendDataLayeronPaywallBody()
     await this.updateComplete
     this.accessToken = getCookie('kompas._token')
     this.refreshToken = getCookie('kompas._token_refresh')
@@ -1262,7 +1263,7 @@ export class KompasIdPaywallBody extends LitElement {
                   ${this.registrationSection(this.type)}
                 `
               : nothing}
-            ${this.userAction()} ${this.sendDataLayeronPaywallBody()}
+            ${this.userAction()}
           </div>
           ${this.isExtensionsOpened
             ? this.paymentMobileExtension(

package/src/utils/api/getHeaderTheme.ts

@@ -1,5 +1,3 @@
-import { cva } from 'class-variance-authority'
-
 let cachedHeaderTheme: any = null
 let fetchPromise: Promise<any> | null = null
 
@@ -16,9 +14,8 @@ export const getHeaderTheme = async () => {
       .then(response => response.json())
       .then(data => {
         // Process the fetched data using `cva` and cache it
-        cachedHeaderTheme = cva('', {
-          variants: data.header,
-        })
+        cachedHeaderTheme = data.header
+
         fetchPromise = null // Reset the fetchPromise
         return cachedHeaderTheme
       })