@kompasid/lit-web-components 0.9.10 → 0.9.13

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

@@ -1,8 +1,7 @@
 import { html, css, LitElement, nothing } from 'lit'
 import { property, customElement, state } from 'lit/decorators.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
-import { JsonPackageData, PackageData } from './types.js'
-import { redirectToCheckout } from '../../utils/cta.js'
+import { JsonPullDataFreeWall, CardPackage } from './types.js'
 import '../kompasid-freewall-head/KompasFreewallHead.js'
 import '../kompasid-freewall-body/KompasFreewallBody.js'
 
@@ -25,39 +24,25 @@ export class KompasFreewall extends LitElement {
    * Props
    */
   /**
-   * property isLogin untuk menghandle apakah user sudah login atau belum
-   * property type untuk menghandle tipe freewall
-   * property head_copy_expand to update copy header when expand
-   * property head_copy_collapse to update copy header when collapse
+   * property type untuk menghandle tipe freewall (akan menyematkan beberapa tipe data layer)
    * property expand to handle expand/collapse
-   * property paywall_location is the location where user encounter the paywall
-   * property paywall_subscription_package is the name of the subscription package viewed by user
-   * property paywall_subscription_id is the ID of the subscription package viewed by user
-   * property paywall_subscription_price is the price of the subscription package viewed by user
-   * property paywall_position is the position of the subscription package viewed by user
+   * property tracker_paywall_location is the location where user encounter the paywall
    * property tracker_page_type is the type of the page
    * property tracker_page_title is the title of the page
-   * property tracker_content_id is the ID of article (slug)
-   * property content_title is the title of article
-   * property tracker_content_categories is the category of the content
-   * property tracker_content_type is to decide whether it's free article or paid article
    * property tracker_user_type is the type of user based on their subscription
    * property tracker_subscription_status is the status of their subscription
    * property tracker_page_domain is the page domain
    * property tracker_metered_wall_type is the type of metered wall
    * property tracker_metered_wall_balance is the balance of their metered wall
+   * property tracker_content_title is the title of article [type=article]
+   * property tracker_content_id is the ID of article (slug) [type=article]
+   * property tracker_content_categories is the category of the content [type=article]
+   * property tracker_content_type is to decide whether it's free article or paid article [type=article]
    */
 
-  @property({ type: Boolean }) isLogin = false
   @property({ type: String }) type: 'article' | 'landing_page' = 'article'
-  @property({ type: String }) head_copy_expand = ''
-  @property({ type: String }) head_copy_collapse = ''
   @property({ type: Boolean }) expand = true
-  @property({ type: String }) paywall_location = ''
-  @property({ type: String }) paywall_subscription_package = ''
-  @property({ type: Number }) paywall_subscription_id = 0
-  @property({ type: Number }) paywall_subscription_price = 0
-  @property({ type: Number }) paywall_position = 1
+  @property({ type: String }) tracker_paywall_location = ''
   @property({ type: String }) tracker_page_type = ''
   @property({ type: String }) tracker_page_title = ''
   @property({ type: String }) tracker_content_id = ''
@@ -88,8 +73,7 @@ export class KompasFreewall extends LitElement {
 
   @state() private isLoading: Boolean = true
   @state() private isExpand: boolean = true
-  @state() private packageData: PackageData = {} as PackageData
-  @state() private jsonPackageData: JsonPackageData = {} as JsonPackageData
+  @state() private pullData: JsonPullDataFreeWall = {} as JsonPullDataFreeWall
 
   /**
    * Getter
@@ -103,22 +87,19 @@ export class KompasFreewall extends LitElement {
    * Data Layer
    */
 
-  private prepareImpressionsData(): Record<string, any> {
+  private prepareImpressionsData(item: CardPackage): Record<string, any> {
     const baseData = {
-      paywall_location: this.paywall_location,
-      paywall_subscription_package:
-        this.paywall_subscription_package || this.packageData.slug,
-      paywall_subscription_id:
-        this.paywall_subscription_id || this.packageData.id,
-      paywall_subscription_price:
-        this.paywall_subscription_price || this.packageData.price,
-      paywall_position: this.paywall_position || this.packageData.position,
-      user_type: this.tracker_user_type,
-      subscription_status: this.tracker_subscription_status,
-      page_domain: this.tracker_page_domain || 'Kompas.id',
-      page_type: this.tracker_page_type,
-      metered_wall_type: this.tracker_metered_wall_type || 'FP',
-      metered_wall_balance: this.tracker_metered_wall_balance,
+      paywall_subscription_package: item.packageSlug,
+      paywall_subscription_id: item.packageId,
+      paywall_subscription_price: item.priceDiscount || item.priceBased,
+      paywall_position: item.position,
+      paywall_location: this.tracker_paywall_location, // from user
+      user_type: this.tracker_user_type, // from user
+      subscription_status: this.tracker_subscription_status, // from user
+      page_domain: this.tracker_page_domain || 'Kompas.id', // from user
+      page_type: this.tracker_page_type, // from user
+      metered_wall_type: this.tracker_metered_wall_type || 'FP', // from user
+      metered_wall_balance: this.tracker_metered_wall_balance, // from user
     }
 
     if (this.isArticle) {
@@ -138,23 +119,29 @@ export class KompasFreewall extends LitElement {
 
   private sendDataLayer(
     event: string,
-    includeImpressions: boolean = false
+    position: number = 0 // ganti ke specific package
   ): void {
-    const impressionsData = this.prepareImpressionsData()
+    const impressionsData = this.pullData.body.map((item: CardPackage) =>
+      this.prepareImpressionsData(item)
+    )
 
-    const data = includeImpressions
-      ? { event, impressions: [impressionsData] }
-      : { event, ...impressionsData }
+    const get = this.pullData.body.find(item => item.position === position)
+
+    const specificData = get ? this.prepareImpressionsData(get) : []
+
+    const data = position
+      ? { event, ...specificData }
+      : { event, impressions: [impressionsData] }
 
     window.dataLayer.push(data)
   }
 
   private sendDataLayerPaywallViewed(): void {
-    if (this.isExpand) this.sendDataLayer('paywall_viewed', true)
+    if (this.isExpand) this.sendDataLayer('paywall_viewed')
   }
 
-  private sendDataLayerSubscribeButtonClicked(): void {
-    this.sendDataLayer('subscribe_button_clicked')
+  private sendDataLayerSubscribeButtonClicked(pos?: number): void {
+    this.sendDataLayer('subscribe_button_clicked', pos)
   }
 
   /**
@@ -166,12 +153,10 @@ export class KompasFreewall extends LitElement {
     this.sendDataLayerPaywallViewed()
   }
 
-  private onSubscriptionClick() {
-    this.sendDataLayerSubscribeButtonClicked()
-    redirectToCheckout({
-      link: `${this.jsonPackageData.subscriptionUrl}&referrer=${this.packageData.referrer}`,
-      source: this.type,
-    })
+  private goToUrl(url: string, position?: number) {
+    if (!url) return
+    this.sendDataLayerSubscribeButtonClicked(position)
+    window.open(url, '_blank')
   }
 
   /**
@@ -183,9 +168,6 @@ export class KompasFreewall extends LitElement {
     await this.updateComplete
 
     this.isExpand = this.expand
-
-    const originHost: string = encodeURIComponent(window.location.href)
-    this.packageData = { ...this.showPackage, referrer: originHost }
     this.getFreewallData()
 
     this.sendDataLayerPaywallViewed()
@@ -194,21 +176,10 @@ export class KompasFreewall extends LitElement {
   async getFreewallData() {
     try {
       const response = await fetch(
-        'https://cdn-www.kompas.id/web-component/freewall.json'
+        'https://cdn-www.kompas.id/web-component/freewall-new.json'
       )
-      const json = await response.json()
-      this.jsonPackageData = {
-        headCopyCollapse: json.headCopyCollapse,
-        headCopyExpand: json.headCopyExpand,
-        subscriptionUrl: json.subscriptionUrl,
-        subscriptionTitle: json.subscriptionTitle,
-        subscriptionTitleGuest: json.subscriptionTitleGuest,
-        subscriptionDescription: json.subscriptionDescription,
-        subscriptionButtonText: json.subscriptionButtonText,
-        registerTitle: json.registerTitle,
-        registerDescription: json.registerDescription,
-        registerButtonText: json.registerButtonText,
-      }
+      const json: JsonPullDataFreeWall = await response.json()
+      this.pullData = json
     } catch (error) {
       throw Error('Failed to get metered paywall data')
     } finally {
@@ -225,27 +196,23 @@ export class KompasFreewall extends LitElement {
       ? html`
           <div class="sticky bottom-0 w-full h-full z-20 top-shadow">
             <div
-              class="flex flex-col w-full bg-blue-100 justify-center ${this
+              class="flex flex-col transition-all w-full bg-blue-100 justify-center ${this
                 .isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24"
             >
               <kompasid-freewall-head
                 .expand=${this.isExpand}
-                .type=${this.type}
-                .head_copy_expand=${this.jsonPackageData.headCopyExpand}
-                .head_copy_collapse=${this.jsonPackageData.headCopyCollapse}
                 .toggleExpand=${() => this.toggleExpand()}
-                .onSubscriptionClick=${() => this.onSubscriptionClick()}
-                .packageData=${this.packageData}
-                .jsonPackageData=${this.jsonPackageData}
+                .headData=${this.pullData.head}
+                .onButtonClick=${(url: string) => this.goToUrl(url)}
               ></kompasid-freewall-head>
               ${this.isExpand
-                ? html`<kompasid-freewall-body
-                    .type=${this.type}
-                    .onSubscriptionClick=${() => this.onSubscriptionClick()}
-                    .packageData=${this.packageData}
-                    .jsonPackageData=${this.jsonPackageData}
-                    ?isLogin=${this.isLogin}
-                  ></kompasid-freewall-body>`
+                ? html` <div>
+                    <kompasid-freewall-body
+                      .bodyData=${this.pullData.body}
+                      .onButtonClick=${(url: string, position: number) =>
+                        this.goToUrl(url, position)}
+                    ></kompasid-freewall-body>
+                  </div>`
                 : nothing}
             </div>
           </div>

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

@@ -0,0 +1,255 @@
+import { html, css, LitElement, nothing } from 'lit'
+import { property, customElement, state } from 'lit/decorators.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { JsonPackageData, PackageData } from './types.js'
+import { redirectToCheckout } from '../../utils/cta.js'
+import '../kompasid-freewall-head/KompasFreewallHead.js'
+import '../kompasid-freewall-body/KompasFreewallBody.js'
+
+@customElement('kompasid-freewall')
+export class KompasFreewall extends LitElement {
+  static styles = [
+    css`
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+
+      .top-shadow {
+        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
+      }
+    `,
+    TWStyles,
+  ]
+
+  /**
+   * Props
+   */
+  /**
+   * property isLogin untuk menghandle apakah user sudah login atau belum
+   * property type untuk menghandle tipe freewall
+   * property head_copy_expand to update copy header when expand
+   * property head_copy_collapse to update copy header when collapse
+   * property expand to handle expand/collapse
+   * property paywall_location is the location where user encounter the paywall
+   * property paywall_subscription_package is the name of the subscription package viewed by user
+   * property paywall_subscription_id is the ID of the subscription package viewed by user
+   * property paywall_subscription_price is the price of the subscription package viewed by user
+   * property paywall_position is the position of the subscription package viewed by user
+   * property tracker_page_type is the type of the page
+   * property tracker_page_title is the title of the page
+   * property tracker_content_id is the ID of article (slug)
+   * property content_title is the title of article
+   * property tracker_content_categories is the category of the content
+   * property tracker_content_type is to decide whether it's free article or paid article
+   * property tracker_user_type is the type of user based on their subscription
+   * property tracker_subscription_status is the status of their subscription
+   * property tracker_page_domain is the page domain
+   * property tracker_metered_wall_type is the type of metered wall
+   * property tracker_metered_wall_balance is the balance of their metered wall
+   */
+
+  @property({ type: Boolean }) isLogin = false
+  @property({ type: String }) type: 'article' | 'landing_page' = 'article'
+  @property({ type: String }) head_copy_expand = ''
+  @property({ type: String }) head_copy_collapse = ''
+  @property({ type: Boolean }) expand = true
+  @property({ type: String }) paywall_location = ''
+  @property({ type: String }) paywall_subscription_package = ''
+  @property({ type: Number }) paywall_subscription_id = 0
+  @property({ type: Number }) paywall_subscription_price = 0
+  @property({ type: Number }) paywall_position = 1
+  @property({ type: String }) tracker_page_type = ''
+  @property({ type: String }) tracker_page_title = ''
+  @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
+
+  showPackage = {
+    duration: 1,
+    durationType: 3,
+    id: '9802035',
+    link: 'kdp?productId=9802035&referrer=',
+    price: 50000,
+    position: 1,
+    title: 'Kompas Digital Premium 1 Bulan',
+    slug: 'cash-b2c-halaman-berlangganan-reguler_digital-kdp-1',
+    referrer: '',
+  }
+
+  /**
+   * State
+   */
+
+  @state() private isLoading: Boolean = true
+  @state() private isExpand: boolean = true
+  @state() private packageData: PackageData = {} as PackageData
+  @state() private jsonPackageData: JsonPackageData = {} as JsonPackageData
+
+  /**
+   * Getter
+   */
+
+  get isArticle() {
+    return this.type === 'article'
+  }
+
+  /**
+   * Data Layer
+   */
+
+  private prepareImpressionsData(): Record<string, any> {
+    const baseData = {
+      paywall_location: this.paywall_location,
+      paywall_subscription_package:
+        this.paywall_subscription_package || this.packageData.slug,
+      paywall_subscription_id:
+        this.paywall_subscription_id || this.packageData.id,
+      paywall_subscription_price:
+        this.paywall_subscription_price || this.packageData.price,
+      paywall_position: this.paywall_position || this.packageData.position,
+      user_type: this.tracker_user_type,
+      subscription_status: this.tracker_subscription_status,
+      page_domain: this.tracker_page_domain || 'Kompas.id',
+      page_type: this.tracker_page_type,
+      metered_wall_type: this.tracker_metered_wall_type || 'FP',
+      metered_wall_balance: this.tracker_metered_wall_balance,
+    }
+
+    if (this.isArticle) {
+      return {
+        ...baseData,
+        content_id: this.tracker_content_id,
+        content_title: this.tracker_content_title,
+        content_categories: this.tracker_content_categories,
+        content_type: this.tracker_content_type,
+      }
+    }
+    return {
+      ...baseData,
+      page_title: this.tracker_page_title,
+    }
+  }
+
+  private sendDataLayer(
+    event: string,
+    includeImpressions: boolean = false
+  ): void {
+    const impressionsData = this.prepareImpressionsData()
+
+    const data = includeImpressions
+      ? { event, impressions: [impressionsData] }
+      : { event, ...impressionsData }
+
+    window.dataLayer.push(data)
+  }
+
+  private sendDataLayerPaywallViewed(): void {
+    if (this.isExpand) this.sendDataLayer('paywall_viewed', true)
+  }
+
+  private sendDataLayerSubscribeButtonClicked(): void {
+    this.sendDataLayer('subscribe_button_clicked')
+  }
+
+  /**
+   * Logic Function
+   */
+
+  private toggleExpand() {
+    this.isExpand = !this.isExpand
+    this.sendDataLayerPaywallViewed()
+  }
+
+  private onSubscriptionClick() {
+    this.sendDataLayerSubscribeButtonClicked()
+    redirectToCheckout({
+      link: `${this.jsonPackageData.subscriptionUrl}&referrer=${this.packageData.referrer}`,
+      source: this.type,
+    })
+  }
+
+  /**
+   * Lifecycle
+   */
+
+  override async connectedCallback() {
+    super.connectedCallback()
+    await this.updateComplete
+
+    this.isExpand = this.expand
+
+    const originHost: string = encodeURIComponent(window.location.href)
+    this.packageData = { ...this.showPackage, referrer: originHost }
+    this.getFreewallData()
+
+    this.sendDataLayerPaywallViewed()
+  }
+
+  async getFreewallData() {
+    try {
+      const response = await fetch(
+        'https://cdn-www.kompas.id/web-component/freewall.json'
+      )
+      const json = await response.json()
+      this.jsonPackageData = {
+        headCopyCollapse: json.headCopyCollapse,
+        headCopyExpand: json.headCopyExpand,
+        subscriptionUrl: json.subscriptionUrl,
+        subscriptionTitle: json.subscriptionTitle,
+        subscriptionTitleGuest: json.subscriptionTitleGuest,
+        subscriptionDescription: json.subscriptionDescription,
+        subscriptionButtonText: json.subscriptionButtonText,
+        registerTitle: json.registerTitle,
+        registerDescription: json.registerDescription,
+        registerButtonText: json.registerButtonText,
+      }
+    } catch (error) {
+      throw Error('Failed to get metered paywall data')
+    } finally {
+      this.isLoading = false
+    }
+  }
+
+  /**
+   * Render Statement
+   */
+
+  render() {
+    return !this.isLoading
+      ? html`
+          <div class="sticky bottom-0 w-full h-full z-20 top-shadow">
+            <div
+              class="flex flex-col w-full bg-blue-100 justify-center ${this
+                .isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24"
+            >
+              <kompasid-freewall-head
+                .expand=${this.isExpand}
+                .type=${this.type}
+                .head_copy_expand=${this.jsonPackageData.headCopyExpand}
+                .head_copy_collapse=${this.jsonPackageData.headCopyCollapse}
+                .toggleExpand=${() => this.toggleExpand()}
+                .onSubscriptionClick=${() => this.onSubscriptionClick()}
+                .packageData=${this.packageData}
+                .jsonPackageData=${this.jsonPackageData}
+              ></kompasid-freewall-head>
+              ${this.isExpand
+                ? html`<kompasid-freewall-body
+                    .type=${this.type}
+                    .onSubscriptionClick=${() => this.onSubscriptionClick()}
+                    .packageData=${this.packageData}
+                    .jsonPackageData=${this.jsonPackageData}
+                    ?isLogin=${this.isLogin}
+                  ></kompasid-freewall-body>`
+                : nothing}
+            </div>
+          </div>
+        `
+      : nothing
+  }
+}

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

@@ -2,87 +2,43 @@
 
 ## Properties
 
-### Base Properties
-**required for artilce and landing_page type*
-
-| Property                       | Attribute                      | Description                                                                              | Type     | Default |
-| ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | -------- | ------- |
-| `isLogin`                      | `isLogin`                      | property isLogin untuk menghandle apakah user sudah login atau belum        | `boolean` | `false`     |
-| `type`                         | `type`                         | property type untuk menghandle tipe freewall        | `"article" \| "landing_page"` | `"article"`     |
-| `expand`                       | `expand`                       | property expand to handle expand/collapse       | `boolean` | `true`     |
-| `head_copy_expand`             | `head_copy_expand`             | property head_copy_expand to update copy header when expand        | `string` | `""`     |
-| `head_copy_collapse`           | `head_copy_collapse`           | property head_copy_expand to update copy header when collapse        | `string` | `""`     |
-| `paywall_location`             | `paywall_location`             | property paywall_location is the location where user encounter the paywall            | `string`                | `''`        |
-| `tracker_page_type`            | `tracker_page_type`            | property tracker_page_type is the type of the page             | `string`                | `''`      
-| `tracker_user_type`            | `tracker_user_type`            | property tracker_user_type is the type of user based on their subscription             | `string`                | `''`        |
-| `tracker_subscription_status`  | `tracker_subscription_status`  | property tracker_subscription_status is the status of their subscription             | `string`                | `''`        |
-| `tracker_page_domain`          | `tracker_page_domain`          | property tracker_page_domain is the page domain             | `string`                | `''`        |
-| `tracker_metered_wall_balance` | `tracker_metered_wall_balance` | property tracker_metered_wall_balance is the balance of their metered wall             | `number`                | `0`         |
-| `tracker_metered_wall_type`    | `tracker_metered_wall_type`    | property tracker_metered_wall_type is the type of metered wall             | `string`                | `''`        |
-
-### Article Properties
-**required for article type*
-| Property                       | Attribute                      | Description                                                                              | Type     | Default |
-| ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | -------- | ------- |
-| `tracker_content_id`           | `tracker_content_id`           | property tracker_content_id is the ID of article (slug)             | `string`                | `''`        |
-| `tracker_content_title`        | `tracker_content_title`        | property content_title is the title of article             | `string`                | `''`        |
-| `tracker_content_categories`   | `tracker_content_categories`   | property tracker_content_categories is the category of the content             | `string`                | `''`        |
-| `tracker_content_type`         | `tracker_content_type`         | property tracker_content_type is to decide whether it's free article or paid article             | `string`                | `''`        |
-
-
-### Landing Page Properties
-**required for landing_page type*
-| Property                       | Attribute                      | Description                                                                              | Type     | Default |
-| ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | -------- | ------- |
-| `tracker_page_title`           | `tracker_page_title`           | property tracker_page_title is the title of the page             | `string`                | `''`        |
-
-### Optional Properties
-**not required*
-| Property                       | Attribute                      | Description                                                                              | Type     | Default |
-| ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | -------- | ------- |
-| `paywall_subscription_id`      | `paywall_subscription_id`      | property paywall_subscription_id is the ID of the subscription package viewed by user            | `number`                | `0`         |
-| `paywall_subscription_package` | `paywall_subscription_package` | property paywall_subscription_package is the name of the subscription package viewed by user             | `string`                | `''`        |
-| `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
-
-- [kompasid-freewall-head](../kompasid-freewall-head)
-- [kompasid-freewall-body](../kompasid-freewall-body)
-
-### Graph
-```mermaid
-graph TD;
-  kompasid-freewall --> kompasid-freewall-head
-  kompasid-freewall --> kompasid-freewall-body
-  style kompasid-freewall fill:#023B73,stroke:#333,stroke-width:4px
-```
-
-*Terbikin oleh tim front-end kompas.id*
+| Property                        | Attribute                       | Description                                                                                                                                         | Type                                | Default         |
+| ------------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | --------------- |
+| `type`                          | `type`                          | Tipe tampilan freewall yang menentukan skema data layer berbeda (contoh: `article` untuk artikel dengan konten detail, atau `landing_page`).       | `"article" \| "landing_page"`       | `"article"`     |
+| `expand`                        | `expand`                        | Status default expand/collapse paywall saat pertama kali di-load.                                                                                   | `boolean`                           | `true`          |
+| `tracker_paywall_location`      | `tracker_paywall_location`      | Lokasi atau penempatan di mana user menemukan paywall (untuk tracking/data layer).                                                                 | `string`                            | `""`            |
+| `tracker_page_type`             | `tracker_page_type`             | Jenis halaman yang menampilkan paywall (untuk tracking/data layer).                                                                                | `string`                            | `""`            |
+| `tracker_page_title`            | `tracker_page_title`            | Judul halaman ketika paywall muncul (untuk tracking/data layer).                                                                                    | `string`                            | `""`            |
+| `tracker_content_id`            | `tracker_content_id`            | ID atau slug artikel (dipakai jika `type=article`).                                                                                                 | `string`                            | `""`            |
+| `tracker_content_title`         | `tracker_content_title`         | Judul konten/artikel (dipakai jika `type=article`).                                                                                                 | `string`                            | `""`            |
+| `tracker_content_categories`    | `tracker_content_categories`    | Kategori konten/artikel (dipakai jika `type=article`).                                                                                              | `string`                            | `""`            |
+| `tracker_content_type`          | `tracker_content_type`          | Tipe konten: apakah artikel gratis atau berbayar (dipakai jika `type=article`).                                                                    | `string`                            | `""`            |
+| `tracker_user_type`             | `tracker_user_type`             | Tipe user berdasarkan status langganan (untuk tracking/data layer).                                                                                 | `string`                            | `""`            |
+| `tracker_subscription_status`   | `tracker_subscription_status`   | Status langganan user saat itu (untuk tracking/data layer).                                                                                         | `string`                            | `""`            |
+| `tracker_page_domain`           | `tracker_page_domain`           | Domain halaman yang menampilkan paywall (untuk tracking/data layer).                                                                                | `string`                            | `""`            |
+| `tracker_metered_wall_type`     | `tracker_metered_wall_type`     | Tipe metered wall (contoh: FP) untuk tracking/data layer.                                                                                            | `string`                            | `""`            |
+| `tracker_metered_wall_balance`  | `tracker_metered_wall_balance`  | Jumlah sisa balance (akses gratis) pada metered paywall.                                                                                             | `number`                            | `0`             |
+
+---
+
+## State (Internal)
+
+> Properti berikut tidak untuk diatur langsung lewat atribut. Digunakan secara internal oleh komponen:
+
+| Property     | Description                                                                                             | Type                     | Default     |
+| ------------- | ------------------------------------------------------------------------------------------------------- | ------------------------ | ----------- |
+| `isLoading`   | Status untuk menandai proses pengambilan data freewall JSON.                                            | `boolean`                | `true`      |
+| `isExpand`    | Status expand/collapse yang aktif saat ini.                                                             | `boolean`                | `true`      |
+| `pullData`    | Data hasil fetch dari endpoint JSON (berisi objek `head` dan `body`).                                   | `JsonPullDataFreeWall`   | `{}`        |
+
+---
+
+## Description
+
+`<kompasid-freewall>` adalah **komponen wrapper utama** untuk paywall Kompas.id.
+
+✅ Memuat:
+- **Header** dengan teks/copy, tombol toggle expand/collapse (menggunakan `<kompasid-freewall-head>`).
+- **Body** berupa daftar kartu paket langganan (menggunakan `<kompasid-freewall-body>`).
+
+✅ Otomatis fetch data JSON dari:

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

@@ -22,3 +22,32 @@ export interface JsonPackageData {
   registerDescription: string[]
   registerButtonText: string
 }
+
+export interface CardPackage {
+  title: string
+  ribbon: boolean
+  packageSlug: string
+  packageId: string
+  priceBased: number
+  priceDiscount: number
+  position: number
+  duration: string
+  cta: {
+    text: string
+    url: string
+  }
+}
+
+export interface HeadDataFreeWall {
+  headCopyExpand: string
+  headCopyCollapse: string
+  cta: {
+    text: string
+    url: string
+  }
+}
+
+export interface JsonPullDataFreeWall {
+  head: HeadDataFreeWall
+  body: CardPackage[]
+}