@kompasid/lit-web-components 0.9.28 → 0.9.29

package/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.ts

@@ -0,0 +1,500 @@
+import { html, css, LitElement, nothing } from 'lit'
+import { customElement, state, property } from 'lit/decorators.js'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { PackageData, OfferingItem } from './types.js'
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
+import { formatRupiah } from '../../utils/formatRupiah.js'
+
+@customElement('kompasid-metered-paywall-personalize')
+export class KompasMeteredPaywallPersonalize extends LitElement {
+  static styles = [
+    css`
+      .text-transition {
+        width: 100%;
+        height: 5rem;
+      }
+
+      .body {
+        position: sticky;
+        top: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      .message-collapse-engage-returners span {
+        color: #ff7a00;
+        font-weight: 700;
+        text-wrap: nowrap;
+      }
+
+      .message-collapse-engage-returners s {
+        color: #999999;
+        text-wrap: nowrap;
+      }
+
+      .font-lora {
+        font-family: 'Lora', 'Georgia', 'serif';
+      }
+
+      .icon {
+        height: 1rem;
+        color: #48bb78;
+      }
+
+      .icon.lg {
+        height: 1.5rem;
+      }
+
+      .icon.lg svg {
+        height: 1.5rem;
+      }
+    `,
+    TWStyles,
+  ]
+
+  @state() private isLoading: Boolean = true
+  @state() private maxQuota: number = 3
+  @state() private packageData: PackageData | undefined
+
+  /**
+   * Props
+   */
+  /**
+   * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
+   * prop segment untuk menentukan paywall template dari segmen apa yang di pakai, bila tidak ada yang cocok jangan render paywall
+   * prop offering untuk handle offering yang akan di berikan, bila tidak di isi maka akan default menjadi Q1
+   * prop user_name untuk menerima nama user yang akan di tampilkan paywall specific
+   * prop paywall_location = The location where user encounter the paywall
+   * prop paywall_subscription_package = The name of the subscription package viewed by user
+   * prop paywall_subscription_id = The ID of the subscription package viewed by user
+   * prop paywall_subscription_price = The price of the subscriprtion package viewed by user
+   * prop paywall_position = The position of ther subscription package viewed by user
+   * prop tracker_page_type = Type of the page
+   * prop tracker_content_id = ID of article (slug)
+   * prop tracker_content_type = Whether it's free article or paid article
+   * prop tracker_content_title = The title of article
+   * prop tracker_content_categories = The category of the content
+   * prop tracker_user_type = Type of user based on their subscription
+   * prop tracker_subscription_status = Status of their subscription
+   * prop tracker_page_domain = Page Domain
+   * prop tracker_metered_wall_type = The type of Metered Wall
+   * prop tracker_epaper_edition = The edition of epaper viewed by user
+   * prop tracker_metered_wall_balance = The balance of their metered wall
+   */
+  @property({ type: Number }) countdownArticle = 0
+  @property({ type: String }) segment = ''
+  @property({ type: String }) offering = ''
+  @property({ type: String }) user_name = ''
+  @property({ type: String }) paywall_location = ''
+  @property({ type: String }) paywall_subscription_package = ''
+  @property({ type: String }) paywall_subscription_id = ''
+  @property({ type: Number }) paywall_subscription_price = 0
+  @property({ type: Number }) paywall_position = 0
+  @property({ type: String }) tracker_page_type = ''
+  @property({ type: String }) tracker_content_id = ''
+  @property({ type: String }) tracker_content_title = ''
+  @property({ type: String }) tracker_content_categories = ''
+  @property({ type: String }) tracker_content_type = ''
+  @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
+
+  override async connectedCallback() {
+    super.connectedCallback()
+    await this.getMeteredPaywallData()
+    this.dataLayeronMeteredPaywall()
+  }
+
+  async getMeteredPaywallData() {
+    try {
+      const getSegment = this.segment.toLocaleLowerCase().replace(' ', '_')
+      const response = await fetch(
+        `https://cdn-www.kompas.id/web-component/metered-paywall-personalize/${getSegment}.json`
+      )
+      const json = await response.json()
+
+      this.packageData = json
+    } catch (error) {
+      throw Error('Failed to get metered paywall data')
+    } finally {
+      this.isLoading = false
+    }
+  }
+
+  private redirectToBerlangganan() {
+    this.dataLayeronLanggananButton()
+
+    // Pastikan data tersedia
+    const offeringKey = this.offering || 'Q1'
+    const offeringData = this.packageData?.offering?.[offeringKey]
+
+    const checkoutUrl = offeringData?.checkout_url || ''
+
+    // Encode referrer dengan aman
+    const { origin, pathname, search } = window.location
+    const referrer = encodeURIComponent(`${origin}${pathname}${search}`)
+
+    // Bangun URL dengan parameter tambahan aman
+    const url = new URL(checkoutUrl)
+    url.searchParams.set('referrer', referrer)
+
+    // Redirect ke URL akhir
+    window.location.href = url.toString()
+  }
+
+  private dataLayeronLanggananButton() {
+    window.dataLayer.push({
+      event: 'subscribe_button_clicked',
+      paywall_location: this.paywall_location || '',
+      paywall_subscription_package: this.paywall_subscription_package || '',
+      paywall_subscription_id: this.paywall_subscription_id || '',
+      paywall_subscription_price: this.paywall_subscription_price || 0,
+      paywall_position: this.paywall_position || 0,
+      page_type: this.tracker_page_type,
+      content_id: this.tracker_content_id,
+      content_title: this.tracker_content_title,
+      content_categories: this.tracker_content_categories,
+      content_type: this.tracker_content_type,
+      user_type: this.tracker_user_type || 'R',
+      subscription_status: this.tracker_subscription_status,
+      page_domain: this.tracker_page_domain || 'Kompas.id',
+      metered_wall_type: this.tracker_metered_wall_type || 'MP',
+      metered_wall_balance: this.maxQuota - this.countdownArticle + 1,
+      paywall_segment: this.segment || '',
+      checkout_url:
+        this.packageData?.offering[this.offering ? this.offering : 'Q1']
+          .checkout_url,
+    })
+  }
+
+  private dataLayeronMeteredPaywall() {
+    window.dataLayer.push({
+      event: 'paywall_viewed',
+      paywall_location: this.paywall_location || '',
+      paywall_subscription_package: this.paywall_subscription_package || '',
+      paywall_subscription_id: this.paywall_subscription_id || '',
+      paywall_subscription_price: this.paywall_subscription_price || 0,
+      paywall_position: this.paywall_position || 0,
+      page_type: this.tracker_page_type,
+      content_id: this.tracker_content_id,
+      content_title: this.tracker_content_title,
+      content_categories: this.tracker_content_categories,
+      content_type: this.tracker_content_type,
+      user_type: this.tracker_user_type || 'R',
+      subscription_status: this.tracker_subscription_status,
+      page_domain: this.tracker_page_domain || 'Kompas.id',
+      metered_wall_type: this.tracker_metered_wall_type || 'MP',
+      metered_wall_balance: this.maxQuota - this.countdownArticle + 1,
+      paywall_segment: this.segment || '',
+      checkout_url:
+        this.packageData?.offering[this.offering ? this.offering : 'Q1']
+          .checkout_url,
+    })
+  }
+
+  private stateDefaultPaywall = false
+  private computedstateDefaultPaywall() {
+    this.stateDefaultPaywall = !this.stateDefaultPaywall
+    this.requestUpdate()
+  }
+
+  /**
+   * Ganti placeholder _key_ di template dengan nilai dari data offering
+   * Hanya replace jika placeholder cocok dan datanya valid
+   */
+  private replacePlaceholdersFromOffering(
+    template: string,
+    offeringData: OfferingItem
+  ): string {
+    if (!offeringData) return template
+    // regex cari placeholder seperti _harga_coret_, _offering_price_, dst.
+    return template.replace(/_([a-zA-Z0-9_]+)_/g, (match, key) => {
+      // cek apakah key ada di dalam data
+      if (key in offeringData) {
+        const value = (offeringData as any)[key]
+
+        // jika value number, auto format ke rupiah
+        if (typeof value === 'number') {
+          return formatRupiah(value)
+        }
+
+        // jika string, langsung return
+        return String(value)
+      }
+
+      // kalau placeholder tidak dikenal, biarkan apa adanya
+      return match
+    })
+  }
+
+  private engageReturners() {
+    const textTemplateFormater = this.replacePlaceholdersFromOffering(
+      this.packageData?.paywall.messageTitleCollapse || '',
+      this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||
+        ({} as OfferingItem)
+    )
+    return !this.stateDefaultPaywall
+      ? html`
+          <div
+            class="fixed w-full inset-0 px-4 lg:px-0 h-full flex justify-center items-center bg-black bg-opacity-75 z-[999]"
+          >
+            <div
+              class="bg-white max-w-[460px] w-full justify-center items-center flex flex-col p-6 lg:pb-6 lg:px-6 lg:pt-9 relative rounded"
+            >
+              <button
+                class="font-bold cursor-pointer text-grey-400 flex rounded text-base absolute right-0 top-0 w-6 h-6 lg:w-8 lg:h-8 justify-center items-center mt-4 mr-4"
+                @click=${this.computedstateDefaultPaywall}
+              >
+                ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}
+              </button>
+              <image
+                src="${this.packageData?.paywall.image}"
+                alt="content"
+                class="w-[248px] lg:w-[364px]"
+              />
+              <div
+                class="font-lora font-bold text-grey-600 lg:text-2xl text-center"
+              >
+                <div>Halo ${this.user_name},</div>
+                <div>${this.packageData?.paywall.messageTitleExpand}</div>
+              </div>
+              <div
+                class="pt-3 text-center font-sans text-grey-600 text-sm lg:text-base leading-none"
+              >
+                <div>${this.packageData?.paywall.descriptionExpand}</div>
+                <div class="text-base lg:text-lg text-grey-400 py-3">
+                  <s
+                    >${formatRupiah(
+                      this.packageData?.offering[
+                        this.offering ? this.offering : 'Q1'
+                      ].harga_coret || 0
+                    )}</s
+                  >
+                  <span class="text-lg lg:text-2xl text-orange-400 font-bold">
+                    ${formatRupiah(
+                      this.packageData?.offering[
+                        this.offering ? this.offering : 'Q1'
+                      ].offering_price || 0
+                    )}
+                  </span>
+                  ${this.packageData?.offering[
+                    this.offering ? this.offering : 'Q1'
+                  ].duration
+                    ? html`
+                        <span class="text-base lg:text-lg text-grey-600"
+                          >${this.packageData?.offering[
+                            this.offering ? this.offering : 'Q1'
+                          ].duration}</span
+                        >
+                      `
+                    : nothing}
+                </div>
+                <div>untuk tahun pertama.</div>
+              </div>
+              <div class="w-full pt-6">
+                <button
+                  @click="${this.redirectToBerlangganan}"
+                  class="bg-brand-1 whitespace-nowrap rounded md:rounded h-8 lg:h-10 px-4 md:px-5 text-sm lg:text-base text-white font-bold leading-none w-full"
+                >
+                  ${this.packageData?.offering[
+                    this.offering ? this.offering : 'Q1'
+                  ].checkout_text}
+                </button>
+              </div>
+            </div>
+          </div>
+        `
+      : html`
+          <div class="sticky bottom-0 w-full h-full">
+            <div
+              class="flex flex-col lg:flex-row w-full bg-blue-100 py-4 justify-center gap-4 px-4 lg:px-0 bottom-0"
+            >
+              <div
+                class="text-grey-600 text-base self-center text-left message-collapse-engage-returners font-bold"
+              >
+                ${unsafeHTML(textTemplateFormater)}
+              </div>
+              <div>
+                <button
+                  @click="${this.redirectToBerlangganan}"
+                  class="bg-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto"
+                >
+                  ${this.packageData?.offering[
+                    this.offering ? this.offering : 'Q1'
+                  ].checkout_text}
+                </button>
+              </div>
+            </div>
+          </div>
+        `
+  }
+
+  private passiveFaders() {
+    const messageTitleCollapse = this.replacePlaceholdersFromOffering(
+      this.packageData?.paywall.messageTitleCollapse || '',
+      this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||
+        ({} as OfferingItem)
+    )
+    const descriptionExpand = this.replacePlaceholdersFromOffering(
+      this.packageData?.paywall.descriptionExpand || '',
+      this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||
+        ({} as OfferingItem)
+    )
+    return html`
+      <div class="sticky bottom-0 w-full h-full">
+        <div
+          class="flex flex-col lg:flex-row w-full bg-blue-100 py-4 gap-4 px-4 bottom-0"
+        >
+          <div
+            class="flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto "
+          >
+            ${!this.stateDefaultPaywall
+              ? html`
+                  <div class="h-9 w-9 hidden lg:flex"></div>
+                  <div
+                    class="flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl"
+                  >
+                    <div
+                      class="text-grey-600 font-lora message-collapse-engage-returners order-2"
+                    >
+                      <div
+                        class="text-xl lg:text-2xl font-bold mb-3 text-center lg:text-start"
+                      >
+                        ${this.packageData?.paywall.messageTitleExpand}
+                      </div>
+                      <div class="flex flex-col font-sans gap-3 mb-3">
+                        ${this.packageData?.paywall.listBenefits
+                          ? this.packageData?.paywall.listBenefits.map(
+                              item =>
+                                html`
+                                  <div
+                                    class="flex items-baseline align-baseline"
+                                  >
+                                    <div
+                                      class="bg-white text-green-500 h-3 w-3 mr-1 rounded-full flex justify-center items-center"
+                                    >
+                                      ${unsafeSVG(
+                                        getFontAwesomeIcon(
+                                          'fas',
+                                          'circle-check',
+                                          12,
+                                          12
+                                        )
+                                      )}
+                                    </div>
+                                    <h6 class="text-base ml-1">${item}</h6>
+                                  </div>
+                                `
+                            )
+                          : nothing}
+                      </div>
+                      <div
+                        class="text-grey-600 font-sans text-sm lg:text-base self-center text-left message-collapse-engage-returners mb-4"
+                      >
+                        ${unsafeHTML(descriptionExpand)}
+                      </div>
+                      <div>
+                        <button
+                          @click="${this.redirectToBerlangganan}"
+                          class="bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto"
+                        >
+                          ${this.packageData?.offering[
+                            this.offering ? this.offering : 'Q1'
+                          ].checkout_text}
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      class="flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2"
+                    >
+                      <image
+                        src="${this.packageData?.paywall.image}"
+                        alt="content"
+                        class="w-[112px] lg:w-[202px]"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <button
+                      @click="${this.computedstateDefaultPaywall}"
+                      class="h-9 w-9 absolute lg:static flex items-center justify-center text-blue-500 rounded bg-blue-200 right-4 top-4"
+                    >
+                      <div>
+                        ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
+                      </div>
+                    </button>
+                  </div>
+                `
+              : html`
+                  <div class="h-9 w-9 flex"></div>
+                  <div class="flex justify-between">
+                    <div
+                      class="text-grey-600 text-base self-center text-left message-collapse-engage-returners font-bold"
+                    >
+                      ${unsafeHTML(messageTitleCollapse)}
+                    </div>
+                    <div class="hidden lg:flex ml-6">
+                      <button
+                        @click="${this.redirectToBerlangganan}"
+                        class="bg-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto"
+                      >
+                        ${this.packageData?.offering[
+                          this.offering ? this.offering : 'Q1'
+                        ].checkout_text}
+                      </button>
+                    </div>
+                    <div class="flex lg:hidden ml-4">
+                      <button
+                        @click="${this.computedstateDefaultPaywall}"
+                        class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
+                      >
+                        <div>
+                          ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                  <div>
+                    <button
+                      @click="${this.computedstateDefaultPaywall}"
+                      class="h-9 w-9 hidden lg:flex items-center justify-center text-blue-500 rounded bg-blue-200"
+                    >
+                      <div>
+                        ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}
+                      </div>
+                    </button>
+                    <button
+                      @click="${this.redirectToBerlangganan}"
+                      class="bg-brand-1 lg:hidden flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full"
+                    >
+                      ${this.packageData?.offering[
+                        this.offering ? this.offering : 'Q1'
+                      ].checkout_text}
+                    </button>
+                  </div>
+                `}
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  private pickTemplate() {
+    switch (this.segment) {
+      case 'Engaged Returners':
+        return this.engageReturners()
+      case 'Passive Faders':
+        return this.passiveFaders()
+      default:
+        return nothing
+    }
+  }
+
+  render() {
+    return !this.isLoading ? this.pickTemplate() : nothing
+  }
+}

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

@@ -0,0 +1,155 @@
+# kompasid-metered-paywall-personalize
+
+Komponen Web Component yang digunakan untuk menampilkan **Metered Paywall Personalize** pada situs **Kompas.id**.  
+Komponen ini menyesuaikan tampilan paywall berdasarkan **segmentasi pengguna** seperti *Engaged Returners* dan *Passive Faders*, serta mengirim event tracking ke **Google Tag Manager (GTM)**.
+
+---
+
+## 📦 Import
+
+```js
+import 'kompasid-metered-paywall-personalize'
+```
+
+---
+
+## 🧩 Deskripsi Umum
+
+Komponen ini akan:
+- Menampilkan tampilan paywall berdasarkan segmentasi pengguna (`segment`).
+- Mengambil data paywall dari endpoint CDN Kompas.
+- Mengirim event `paywall_viewed` dan `subscribe_button_clicked` ke `window.dataLayer`.
+- Melakukan personalisasi tampilan dan teks berdasarkan data offering (paket langganan).
+
+---
+
+## ⚙️ Properties
+
+| Property                       | Attribute                      | Description                                                                                                                                                                                                                 | Type     | Default |
+| ------------------------------ | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
+| `countdownArticle`             | `countdown-article`            | Menghitung berapa artikel gratis yang telah dibaca user (untuk GTM tracking, tidak ditampilkan di UI).                                                                                                                     | `number` | `0`     |
+| `segment`                      | `segment`                      | Menentukan template paywall berdasarkan segmentasi user (`Engaged Returners`, `Passive Faders`, dll).                                                                                                                       | `string` | `''`    |
+| `offering`                     | `offering`                     | Menentukan paket penawaran langganan (default: `Q1`).                                                                                                                                                                       | `string` | `''`    |
+| `user_name`                    | `user_name`                    | Nama pengguna untuk menampilkan sapaan personal (“Halo, [nama]”).                                                                                                                                                            | `string` | `''`    |
+| `paywall_location`             | `paywall_location`             | Lokasi di mana user menemukan paywall.                                                                                                                                                                                       | `string` | `''`    |
+| `paywall_subscription_package` | `paywall_subscription_package` | Nama paket langganan yang ditampilkan ke user.                                                                                                                                                                               | `string` | `''`    |
+| `paywall_subscription_id`      | `paywall_subscription_id`      | ID paket langganan yang ditampilkan ke user.                                                                                                                                                                                 | `string` | `''`    |
+| `paywall_subscription_price`   | `paywall_subscription_price`   | Harga paket langganan yang ditampilkan ke user.                                                                                                                                                                              | `number` | `0`     |
+| `paywall_position`             | `paywall_position`             | Posisi dari paket langganan yang sedang ditampilkan.                                                                                                                                                                         | `number` | `0`     |
+| `tracker_page_type`            | `tracker_page_type`            | Jenis halaman (misalnya: `article`, `homepage`).                                                                                                                                                                             | `string` | `''`    |
+| `tracker_content_id`           | `tracker_content_id`           | ID atau slug artikel.                                                                                                                                                                                                        | `string` | `''`    |
+| `tracker_content_title`        | `tracker_content_title`        | Judul artikel yang sedang dibaca.                                                                                                                                                                                            | `string` | `''`    |
+| `tracker_content_categories`   | `tracker_content_categories`   | Kategori dari artikel yang sedang dibaca.                                                                                                                                                                                    | `string` | `''`    |
+| `tracker_content_type`         | `tracker_content_type`         | Jenis artikel (`free` atau `paid`).                                                                                                                                                                                          | `string` | `''`    |
+| `tracker_user_type`            | `tracker_user_type`            | Tipe user berdasarkan status langganan (`R` untuk regon, `S` untuk subscriber).                                                                                                                                             | `string` | `''`    |
+| `tracker_subscription_status`  | `tracker_subscription_status`  | Status langganan user.                                                                                                                                                                                                       | `string` | `''`    |
+| `tracker_page_domain`          | `tracker_page_domain`          | Domain halaman (default: `Kompas.id`).                                                                                                                                                                                       | `string` | `''`    |
+| `tracker_metered_wall_type`    | `tracker_metered_wall_type`    | Tipe paywall yang digunakan (contoh: `MP` = Metered Paywall).                                                                                                                                                                | `string` | `''`    |
+| `tracker_metered_wall_balance` | `tracker_metered_wall_balance` | Sisa kuota artikel gratis (calculated: `maxQuota - countdownArticle + 1`).                                                                                                                                                   | `number` | `0`     |
+
+---
+
+## 🧠 State Internal
+
+| State Name        | Type      | Default | Description                                               |
+| ----------------- | --------- | -------- | --------------------------------------------------------- |
+| `isLoading`       | `boolean` | `true`   | Indikator apakah data JSON sudah dimuat.                  |
+| `maxQuota`        | `number`  | `3`      | Jumlah maksimum artikel gratis sebelum paywall muncul.    |
+| `packageData`     | `object`  | `undefined` | Data JSON hasil fetch dari CDN.                         |
+| `stateDefaultPaywall` | `boolean` | `false` | Mengatur tampilan collapse/expand paywall.               |
+
+---
+
+## 🧾 Lifecycle
+
+### `connectedCallback()`
+- Dipanggil saat komponen dimasukkan ke DOM.
+- Memanggil:
+  - `getMeteredPaywallData()` untuk fetch JSON paywall.
+  - `dataLayeronMeteredPaywall()` untuk push event “paywall_viewed”.
+
+---
+
+## 🔄 Method
+
+| Method Name | Description |
+| ------------ | ------------ |
+| **`getMeteredPaywallData()`** | Fetch data JSON berdasarkan segment dari endpoint CDN. |
+| **`redirectToBerlangganan()`** | Mengarahkan user ke halaman checkout berdasarkan URL di `offering`. |
+| **`dataLayeronLanggananButton()`** | Mengirim event `subscribe_button_clicked` ke `window.dataLayer`. |
+| **`dataLayeronMeteredPaywall()`** | Mengirim event `paywall_viewed` ke `window.dataLayer`. |
+| **`replacePlaceholdersFromOffering(template, offeringData)`** | Melakukan replace placeholder seperti `_harga_coret_` di template dengan nilai dari `offeringData`. |
+| **`engageReturners()`** | Template tampilan paywall untuk segment “Engaged Returners”. |
+| **`passiveFaders()`** | Template tampilan paywall untuk segment “Passive Faders”. |
+| **`pickTemplate()`** | Menentukan tampilan yang digunakan berdasarkan `segment`. |
+
+---
+
+## 🎨 Tampilan
+
+Komponen menggunakan kombinasi **TailwindCSS** (`TWStyles`) dan CSS custom untuk gaya visual seperti:
+- `.font-lora` → Font Lora / Georgia.
+- `.icon` → Ikon Font Awesome dengan ukuran dinamis.
+- `.message-collapse-engage-returners` → Penyorotan teks utama di banner bawah.
+
+---
+
+## 🌐 JSON Endpoint Example
+
+```json
+{
+  "paywall": {
+    "messageTitleExpand": "Dapatkan akses penuh ke Kompas.id",
+    "messageTitleCollapse": "Langganan hanya _offering_price_ per bulan",
+    "descriptionExpand": "Nikmati berita premium dan eksklusif hanya di Kompas.id",
+    "image": "https://cdn-www.kompas.id/images/paywall-image.jpg"
+  },
+  "offering": {
+    "Q1": {
+      "harga_coret": 100000,
+      "offering_price": 75000,
+      "duration": "per bulan",
+      "checkout_url": "https://www.kompas.id/berlangganan?package=Q1",
+      "checkout_text": "Langganan Sekarang"
+    }
+  }
+}
+```
+
+---
+
+## 📊 Event Tracking (GTM)
+
+| Event | Description | Data Sent |
+| ------ | ------------ | ---------- |
+| `paywall_viewed` | Dikirim saat komponen dimuat pertama kali. | `paywall_location`, `segment`, `content_id`, `subscription_status`, dll. |
+| `subscribe_button_clicked` | Dikirim saat user klik tombol langganan. | `checkout_url`, `offering_price`, `paywall_position`, dll. |
+
+---
+
+## 🧱 Contoh Penggunaan
+
+```html
+<kompasid-metered-paywall-personalize
+  segment="Engaged Returners"
+  offering="Q1"
+  user_name="Andi"
+  countdown-article="2"
+  paywall_location="Article Page"
+  tracker_content_id="artikel-luar-biasa"
+  tracker_page_type="article"
+>
+</kompasid-metered-paywall-personalize>
+```
+
+---
+
+## 🪄 Catatan
+- Komponen ini bergantung pada file JSON di CDN:  
+  `https://cdn-www.kompas.id/web-component/metered-paywall-personalize/{segment}.json`
+- Pastikan properti `segment` sesuai dengan file JSON yang tersedia.
+- Jika `segment` tidak ditemukan, komponen tidak akan menampilkan apa pun (`nothing`).
+---
+
+**Dibuat oleh tim Front-End Kompas.id**  
+_© Kompas.id, 2025_

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

@@ -0,0 +1,26 @@
+export interface OfferingItem {
+  offering_price: number
+  harga_coret: number
+  duration?: string
+  checkout_url: string
+  checkout_text: string
+}
+
+export interface OfferingList {
+  [key: string]: OfferingItem
+}
+
+export interface PaywallData {
+  messageTitleExpand: string
+  descriptionExpand: string
+  messageTitleCollapse: string
+  descriptionCollapse?: string
+  listBenefits?: string[]
+  image: string
+}
+
+export interface PackageData {
+  segment_name: string
+  paywall: PaywallData
+  offering: OfferingList
+}