@kompasid/lit-web-components 0.7.7 → 0.7.8

package/src/components/kompasid-freewall/readme.md

@@ -45,6 +45,31 @@
 | `paywall_subscription_price`   | `paywall_subscription_price`   | property paywall_subscription_price is the price of the subscription package viewed by user             | `number`                | `0`         |
 | `paywall_position`             | `paywall_position`             | property paywall_position is the position of the subscription package viewed by user             | `number`                | `1`         |
 
+
+## JSON ([https://cdn-www.kompas.id/web-component/freewall.json](https://cdn-www.kompas.id/web-component/freewall.json))
+Example:
+
+```json
+{
+  "headCopyCollapse": "Akses seluruh konten dan fitur Kompas.id dengan berlangganan.",
+  "headCopyExpand": "Akses seluruh konten dan fitur Kompas.id dengan berlangganan.",
+  "subscriptionUrl": "kdp?productId=9802035",
+  "subscriptionTitle": "Dukung Jurnalisme Mencerahkan dengan Berlangganan",
+  "subscriptionTitleGuest": "Mulai Berlangganan",
+  "subscriptionDescription": [
+    "Akses seluruh konten Kompas.id di web & aplikasi",
+    "ePaper hingga 30 edisi terakhir",
+    "Buku digital tiap bulannya di aplikasi"
+  ],
+  "subscriptionButtonText": "Langganan Rp 50.000 / bulan",
+  "registerTitle": "Daftar Akun Gratis",
+  "registerDescription": [
+    "Akses ke 3 artikel berbayar gratis tiap bulan"
+  ],
+  "registerButtonText": "Daftar Gratis"
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/src/components/kompasid-freewall/types.ts

@@ -8,3 +8,16 @@ export interface PackageData {
   title: string
   referrer: string
 }
+
+export interface JsonPackageData {
+  headCopyCollapse: string
+  headCopyExpand: string
+  subscriptionUrl: string
+  subscriptionTitle: string
+  subscriptionTitleGuest: string
+  subscriptionDescription: string[]
+  subscriptionButtonText: string
+  registerTitle: string
+  registerDescription: string[]
+  registerButtonText: string
+}

package/src/components/kompasid-freewall-body/KompasFreewallBody.ts

@@ -2,9 +2,7 @@ import { html, css, LitElement, nothing } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
 import { addGoogleFonts } from '../../utils/googleFont.js'
-import { formatRupiah } from '../../utils/formatRupiah.js'
-import { generateCopyDuration } from '../../utils/generateCopyDuration.js'
-import { PackageData } from '../kompasid-freewall/types.js'
+import { JsonPackageData, PackageData } from '../kompasid-freewall/types.js'
 import { faCheck } from '../../../assets/font-awesome.js'
 import { redirectToRegister } from '../../utils/cta.js'
 
@@ -93,6 +91,8 @@ export class KompasFreewallBody extends LitElement {
   @property({ type: String }) type: 'article' | 'landing_page' = 'article'
   @property() onSubscriptionClick = () => {}
   @property({ type: Object }) packageData: PackageData = {} as PackageData
+  @property({ type: Object }) jsonPackageData: JsonPackageData =
+    {} as JsonPackageData
 
   description = [
     'Akses seluruh konten Kompas.id di web & aplikasi',
@@ -134,8 +134,8 @@ export class KompasFreewallBody extends LitElement {
                 .isLogin && 'w-60 md:w-full'} text-grey-600"
             >
               ${this.isLogin
-                ? 'Dukung Jurnalisme Mencerahkan dengan Berlangganan'
-                : 'Mulai Berlangganan'}
+                ? this.jsonPackageData.subscriptionTitle
+                : this.jsonPackageData.subscriptionTitleGuest}
             </h5>
             ${this.descriptionSection()}
           </div>
@@ -145,8 +145,7 @@ export class KompasFreewallBody extends LitElement {
               .isLogin &&
             'md:w-[370px]'} md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
           >
-            Langganan ${formatRupiah(this.packageData.price)}
-            /${generateCopyDuration(this.packageData.durationType)}
+            ${this.jsonPackageData.subscriptionButtonText}
           </button>
         </div>
         <div id="ribbon-container">
@@ -169,22 +168,26 @@ export class KompasFreewallBody extends LitElement {
           <h5
             class="font-lora text-lg md:text-xl font-bold leading-[30px] text-grey-600"
           >
-            Daftar Akun Gratis
+            ${this.jsonPackageData.registerTitle}
           </h5>
-          <div
-            class="flex items-start lg:items-center mt-3 mb-4 md:mt-4 md:mb-5"
-          >
-            <div class="mt-1 lg:mt-0">${faCheck()}</div>
-            <h6 class="text-base text-grey-600 ml-1">
-              Akses ke 3 artikel berbayar gratis tiap bulan
-            </h6>
+          <div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
+            ${this.jsonPackageData.registerDescription.map(
+              item => html`
+                <div class="flex items-start lg:items-center">
+                  <div class="mt-1 lg:mt-0">${faCheck()}</div>
+                  <h6 class="text-base text-grey-600 ml-1 text-start">
+                    ${item}
+                  </h6>
+                </div>
+              `
+            )}
           </div>
         </div>
         <button
           @click=${() => redirectToRegister('freewall')}
           class="bg-white border border-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-brand-1 font-bold leading-[18px]"
         >
-          Daftar Gratis
+          ${this.jsonPackageData.registerButtonText}
         </button>
       </div>
     `
@@ -192,7 +195,7 @@ export class KompasFreewallBody extends LitElement {
 
   private descriptionSection() {
     return html`<div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
-      ${this.description.map(
+      ${this.jsonPackageData.subscriptionDescription.map(
         item =>
           html`
             <div class="flex items-start lg:items-center">

package/src/components/kompasid-freewall-head/KompasFreewallHead.ts

@@ -4,9 +4,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
 import { addGoogleFonts } from '../../utils/googleFont.js'
 import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
-import { formatRupiah } from '../../utils/formatRupiah.js'
-import { generateCopyDuration } from '../../utils/generateCopyDuration.js'
-import { PackageData } from '../kompasid-freewall/types.js'
+import { JsonPackageData, PackageData } from '../kompasid-freewall/types.js'
 
 @customElement('kompasid-freewall-head')
 export class KompasFreewallHead extends LitElement {
@@ -33,6 +31,8 @@ export class KompasFreewallHead extends LitElement {
   @property() toggleExpand = () => {}
   @property() onSubscriptionClick = () => {}
   @property({ type: Object }) packageData: PackageData = {} as PackageData
+  @property({ type: Object }) jsonPackageData: JsonPackageData =
+    {} as JsonPackageData
 
   /**
    * Getter
@@ -73,8 +73,7 @@ export class KompasFreewallHead extends LitElement {
                   @click=${this.onSubscriptionClick}
                   class="bg-green-500 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
                 >
-                  Langganan ${formatRupiah(this.packageData.price)}
-                  /${generateCopyDuration(this.packageData.durationType)}
+                  ${this.jsonPackageData.subscriptionButtonText}
                 </button>`
               : nothing}
           </div>
@@ -95,8 +94,7 @@ export class KompasFreewallHead extends LitElement {
               @click=${this.onSubscriptionClick}
               class="bg-green-500 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
             >
-              Langganan ${formatRupiah(this.packageData.price)}
-              /${generateCopyDuration(this.packageData.durationType)}
+              ${this.jsonPackageData.subscriptionButtonText}
             </button>`
           : nothing}
       </div>

package/src/components/kompasid-metered-paywall/KompasMeteredPaywall.ts

@@ -1,6 +1,7 @@
-import { html, css, LitElement } from 'lit'
+import { html, css, LitElement, nothing } from 'lit'
 import { customElement, state, property } from 'lit/decorators.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
+import { PackageData } from './types.js'
 
 @customElement('kompasid-metered-paywall')
 export class KompasMeteredPaywall extends LitElement {
@@ -34,9 +35,14 @@ export class KompasMeteredPaywall extends LitElement {
     TWStyles,
   ]
 
-  @state() maxQuota: number = 3
+  @state() private isLoading: Boolean = true
+  @state() private maxQuota: number = 3
+  @state() private packageData: PackageData = {
+    subscriptionText: 'Langganan untuk akses tanpa batas',
+    buttonText: 'Langganan',
+    subscriptionUrl: 'https://www.kompas.id/berlangganan',
+  }
 
-  @state() subscriptionUrl: string = 'https://www.kompas.id/berlangganan'
   /**
    * Props
    */
@@ -85,27 +91,45 @@ export class KompasMeteredPaywall extends LitElement {
         <p>
           Anda memiliki sisa
           <b>${maxQuota - getCountdown} dari ${maxQuota}</b> artikel premium
-          gratis bulan ini. Langganan untuk akses tanpa batas
+          gratis bulan ini. ${this.packageData.subscriptionText}
         </p>
       `
     }
     return html`
       <p>
-        Anda sedang membaca <b>artikel gratis terakhir bulan ini.</b> Langganan
-        untuk akses tanpa batas
+        Anda sedang membaca <b>artikel gratis terakhir bulan ini.</b> ${this
+          .packageData.subscriptionText}
       </p>
     `
   }
 
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback()
-
+    this.getMeteredPaywallData()
     this.dataLayeronMeteredPaywall()
   }
 
+  async getMeteredPaywallData() {
+    try {
+      const response = await fetch(
+        'https://cdn-www.kompas.id/web-component/metered-paywall.json'
+      )
+      const json = await response.json()
+      this.packageData = {
+        subscriptionText: json.subscriptionText,
+        buttonText: json.buttonText,
+        subscriptionUrl: json.subscriptionUrl,
+      }
+    } catch (error) {
+      throw Error('Failed to get metered paywall data')
+    } finally {
+      this.isLoading = false
+    }
+  }
+
   private redirectToBerlangganan() {
     this.dataLayeronLanggananButton()
-    window.location.href = this.subscriptionUrl
+    window.location.href = this.packageData.subscriptionUrl
   }
 
   private dataLayeronLanggananButton() {
@@ -151,24 +175,28 @@ export class KompasMeteredPaywall extends LitElement {
   }
 
   render() {
-    return html`
-      <div class="sticky bottom-0 w-full h-full">
-        <div
-          class="flex flex-row w-full bg-blue-100 py-4 justify-center space-x-4 px-4 lg:px-0 bottom-0"
-        >
-          <div class="text-grey-600 text-sm md:text-lg self-center text-left">
-            ${this.getCountdownArticle()}
-          </div>
-          <div class="self-center">
-            <button
-              @click="${this.redirectToBerlangganan}"
-              class="bg-green-400 p-2 rounded-md font-bold text-grey-100 text-sm md:text-xl"
+    return !this.isLoading
+      ? html`
+          <div class="sticky bottom-0 w-full h-full">
+            <div
+              class="flex flex-row w-full bg-blue-100 py-4 justify-center space-x-4 px-4 lg:px-0 bottom-0"
             >
-              Langganan
-            </button>
+              <div
+                class="text-grey-600 text-sm md:text-lg self-center text-left"
+              >
+                ${this.getCountdownArticle()}
+              </div>
+              <div class="self-center">
+                <button
+                  @click="${this.redirectToBerlangganan}"
+                  class="bg-green-400 p-2 rounded-md font-bold text-grey-100 text-sm md:text-xl"
+                >
+                  ${this.packageData.buttonText}
+                </button>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-    `
+        `
+      : nothing
   }
 }

package/src/components/kompasid-metered-paywall/readme.md

@@ -23,4 +23,15 @@
 
 ----------------------------------------------
 
+## JSON ([https://cdn-www.kompas.id/web-component/metered-paywall.json](https://cdn-www.kompas.id/web-component/metered-paywall.json))
+Example:
+
+```json
+{
+  "subscriptionText": "Langganan untuk akses tanpa batas",
+  "buttonText": "Langganan",
+  "subscriptionUrl": "https://www.kompas.id/berlangganan"
+}
+```
+
 *Terbikin oleh tim front-end kompas.id*

package/src/components/kompasid-metered-paywall/types.ts

@@ -0,0 +1,5 @@
+export interface PackageData {
+  subscriptionText: string
+  buttonText: string
+  subscriptionUrl: string
+}

package/src/components/kompasid-paywall/KompasPaywall.ts

@@ -121,7 +121,14 @@ export class KompasPaywall extends LitElement {
     packages: {
       title: 'Sekali bayar, tanpa perpanjang otomatis',
       memberships: [],
-      freeTrial: 'untuk 3 hari pertama',
+      swgEnable: false,
+      freeTrial: {
+        packageText: 'untuk 3 hari pertama',
+        desktopText:
+          'Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR dengan ponsel atau tablet untuk mengunduh aplikasi.',
+        mobileText:
+          'Dapatkan akses gratis selama 3 hari ke konten dan fitur premium Kompas.id di aplikasi.',
+      },
     },
     payment: {
       desktop: [
@@ -262,11 +269,12 @@ export class KompasPaywall extends LitElement {
         packages: {
           ...this.mockResult.packages,
           memberships: json[this.type].memberships,
+          swgEnable: json[this.type].swgEnable,
           freeTrial: json[this.type].freeTrial,
         },
       }
     } catch (error) {
-      throw Error('failed to get paywall data')
+      throw Error('Failed to get paywall data')
     } finally {
       this.isLoading = false
     }

package/src/components/kompasid-paywall/readme.md

@@ -33,6 +33,167 @@ Ini adalah redesign komponen _paywall_ yang digunakan pada [epaper.kompas.id](ht
 | `userGuid`                     | `user-guid`                    |             | `string`                | `''`        |
 
 
+## JSON ([https://cdn-www.kompas.id/web-component/paywall.json](https://cdn-www.kompas.id/web-component/paywall.json))
+Example:
+
+```json
+{
+    "epaper": {
+        "head": "Akses ePaper Ini dengan Berlangganan",
+        "content": [
+            "10+ buku digital dan 5+ Political Insight eksklusif di aplikasi",
+            "Akses ePaper hingga 30 edisi terakhir",
+            "Undangan prioritas webinar eksklusif bersama redaksi",
+            "Klaim voucer digital Hotel Santika dan mitra Kompas.id lainnya"
+        ],
+        "memberships": [
+            {
+                "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
+                "percentage": 40,
+                "price": 360000,
+                "discountPrice": 600000,
+                "savingPrice": 30000,
+                "periode": "Tahun",
+                "isHighlight": true,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
+                "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
+                "subscriptionId": "9802032",
+                "position": 1
+            },
+            {
+                "title": "Kompas Digital Premium 1 Bulan",
+                "percentage": 0,
+                "discountPrice": 0,
+                "price": 50000,
+                "periode": "Bulan",
+                "isHighlight": false,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
+                "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
+                "subscriptionId": "9802035",
+                "position": 2
+            }
+        ],
+        "swgEnable": true
+    },
+    "reguler": {
+        "head": "Baca Lengkap Seluruh Artikel dengan Berlangganan",
+        "content": [
+            "10+ buku digital dan 5+ Political Insight eksklusif di aplikasi",
+            "Akses ePaper hingga 30 edisi terakhir",
+            "Undangan prioritas webinar eksklusif bersama redaksi",
+            "Klaim voucer digital Hotel Santika dan mitra Kompas.id lainnya"
+        ],
+        "memberships": [
+            {
+                "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
+                "percentage": 40,
+                "price": 360000,
+                "discountPrice": 600000,
+                "savingPrice": 30000,
+                "periode": "Tahun",
+                "isHighlight": true,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
+                "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
+                "subscriptionId": "9802032",
+                "position": 1
+            },
+            {
+                "title": "Kompas Digital Premium 1 Bulan",
+                "percentage": 0,
+                "discountPrice": 0,
+                "price": 50000,
+                "periode": "Bulan",
+                "isHighlight": false,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
+                "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
+                "subscriptionId": "9802035",
+                "position": 2
+            }
+        ],
+        "swgEnable": true
+    },
+    "audio": {
+        "head": "Akses Audio Berita dan Keuntungan Lainnya dengan Berlangganan",
+        "content": [
+            "10+ buku digital dan 5+ Political Insight eksklusif di aplikasi",
+            "Akses ePaper hingga 30 edisi terakhir",
+            "Undangan prioritas webinar eksklusif bersama redaksi",
+            "Klaim voucer digital Hotel Santika dan mitra Kompas.id lainnya"
+        ],
+        "memberships": [
+            {
+                "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
+                "percentage": 40,
+                "price": 360000,
+                "discountPrice": 600000,
+                "savingPrice": 30000,
+                "periode": "Tahun",
+                "isHighlight": true,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
+                "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
+                "subscriptionId": "9802032",
+                "position": 1
+            },
+            {
+                "title": "Kompas Digital Premium 1 Bulan",
+                "percentage": 0,
+                "discountPrice": 0,
+                "price": 50000,
+                "periode": "Bulan",
+                "isHighlight": false,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
+                "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
+                "subscriptionId": "9802035",
+                "position": 2
+            }
+        ],
+        "swgEnable": false
+    },
+    "custom": {
+        "head": "ini title custom",
+        "content": [
+            "Akses seluruh konten Kompas.id web dan aplikasi",
+            "ePaper hingga 30 edisi terakhir",
+            "Artikel Riset dan Opini eksklusif dari para ahli",
+            "Buku digital tiap bulannya di aplikasi"
+        ],
+        "memberships": [
+            {
+                "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
+                "percentage": 40,
+                "price": 360000,
+                "discountPrice": 600000,
+                "savingPrice": 30000,
+                "periode": "Tahun",
+                "isHighlight": true,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
+                "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
+                "subscriptionId": "9802032",
+                "position": 1
+            },
+            {
+                "title": "Kompas Digital Premium 1 Bulan",
+                "percentage": 0,
+                "discountPrice": 0,
+                "price": 50000,
+                "periode": "Bulan",
+                "isHighlight": false,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
+                "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
+                "subscriptionId": "9802035",
+                "position": 2
+            }
+        ],
+        "swgEnable": true,
+        "freeTrial": {
+            "packageText": "untuk 3 hari pertama",
+            "desktopText": "Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR dengan ponsel atau tablet untuk mengunduh aplikasi.",
+            "mobileText": "Dapatkan akses gratis selama 3 hari ke konten dan fitur premium Kompas.id di aplikasi."
+        }
+    }
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/src/components/kompasid-paywall/types.ts

@@ -37,10 +37,16 @@ export interface Informations {
     label: string
   }
 }
+export interface FreeTrial {
+  packageText: string
+  desktopText: string
+  mobileText: string
+}
 export interface Packages {
   title: string
   memberships: Array<Product>
-  freeTrial: string
+  swgEnable: boolean
+  freeTrial: FreeTrial
 }
 export interface PaywallProduct {
   informations: {
@@ -56,5 +62,4 @@ export interface PaywallProduct {
     ekstension: Array<PaymentImage>
   }
 }
-
 export type PaywallType = 'epaper' | 'reguler' | 'audio' | 'custom'

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

@@ -113,6 +113,7 @@ export class KompasIdPaywallBody extends LitElement {
   @state() private swgProductId = 'kompas.id:kompas_digital_premium'
   @state() private errorFlag = 0
 
+  _packages!: Packages
   buttonElement!: HTMLButtonElement
   targetElement!: HTMLElement
 
@@ -134,6 +135,10 @@ export class KompasIdPaywallBody extends LitElement {
     return !this.isLogin || this.tracker_subscription_status === 'IA'
   }
 
+  get packages(): Packages {
+    return this._packages
+  }
+
   /**
    * Logic Function
    */
@@ -181,11 +186,11 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private handleClickOutside() {
-    if (this.targetElement.classList.contains('wrapper-body')) {
+    if (this.targetElement?.classList.contains('wrapper-body')) {
       this.togglePaywall()
     }
 
-    if (this.targetElement.id === 'freeTrialPopup') {
+    if (this.targetElement?.id === 'freeTrialPopup') {
       this.closeFreeTrialPopup()
     }
   }
@@ -411,9 +416,12 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   override async connectedCallback() {
+    this._packages = this.paywallData?.packages ?? ({} as Packages)
+
     super.connectedCallback()
     await this.updateComplete
-    if (this.swgEnable) {
+
+    if (this.packages.swgEnable) {
       this.jsonScript()
       const appendSWGButton = () => {
         this.buttonElement = this.shadowRoot?.getElementById(
@@ -928,7 +936,7 @@ export class KompasIdPaywallBody extends LitElement {
             : this.secondaryPackages(item)
         )}
         ${this.freeTrialPackageSection()} ${this.freeTrialPopUp()}
-        ${this.swgEnable ? this.swgPackageSection() : nothing}
+        ${this.packages.swgEnable ? this.swgPackageSection() : nothing}
       </div>
     `
   }
@@ -1122,8 +1130,7 @@ export class KompasIdPaywallBody extends LitElement {
                 ? 'text-dark-7'
                 : 'text-grey-600'}"
             >
-              Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR
-              dengan ponsel atau tablet untuk mengunduh aplikasi.
+              ${this.packages.freeTrial?.desktopText}
             </div>
           </div>
           <div
@@ -1131,8 +1138,7 @@ export class KompasIdPaywallBody extends LitElement {
               ? 'text-dark-7'
               : 'text-grey-600'}"
           >
-            Dapatkan akses gratis selama 3 hari ke konten dan fitur premium
-            Kompas.id di aplikasi.
+            ${this.packages.freeTrial?.mobileText}
           </div>
           <div class="lg:flex flex justify-center mt-4 hidden lg:block gap-4">
             <a
@@ -1162,9 +1168,7 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private freeTrialPackageSection() {
-    const packages = this.paywallData?.packages ?? ({} as Packages)
-
-    if (packages.freeTrial) {
+    if (this.packages.freeTrial) {
       return html`
         <div
           class="flex flex-wrap items-center justify-between py-3 px-4 rounded-lg md:mx-0 w-full h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4 ${this
@@ -1182,7 +1186,7 @@ export class KompasIdPaywallBody extends LitElement {
               <p
                 class="text-xs ${this.isDark ? 'text-dark-7' : 'text-grey-600'}"
               >
-                ${packages.freeTrial}
+                ${this.packages.freeTrial?.packageText}
               </p>
             </div>
           </div>