@kompasid/lit-web-components 0.9.41 → 0.9.43

package/src/components/kompasid-header-account/readme.md

@@ -6,10 +6,9 @@ Ini adalah komponen _header account_ yang akan di implementasi pada header
 | Property                       | Attribute                      | Description                                   | Type                      | Default        | Required |
 | ------------------------------ | ------------------------------ | --------------------------------------------- | ------------------------- | -------------- | -------- |
 | `userData`                     | `userData`                    	| `Object containing user data`									| `object`                 | `{}`           | `yes`			|
-| `logoutUrl`                    | `logoutUrl`                   | `URL to log the user out`											| `string`                 | `''`           | `no`			|
-| `manageAccountUrl`             | `manageAccountUrl`           | `URL to manage user account settings`					| `string`                 | `''`           | `no`			|
-| `notificationUrl`              | `notificationUrl`             | `URL to view user notifications`							| `string`                 | `''`           | `no`			|
-| `readLaterUrl`                 | `readLaterUrl`               | `URL to access the "Read Later" feature`			| `string`                 | `''`           | `no`			|
+| `logout_url`                    | `logout_url`                   | `URL to log the user out`											| `string`                 | `'https://auth.kompas.id/login'`           | `no`			|
+| `manage_account_url`             | `manage_account_url`           | `URL to manage user account settings`					| `string`                 | `'https://manage-account.kompas.id/manage-account/my-account'`           | `no`			|
+| `read_later_url`                 | `read_later_url`               | `URL to access the "Read Later" feature`			| `string`                 | `'https://www.kompas.id/baca-nanti'`           | `no`			|
 | `sidebarTopSpacing`            | `sidebarTopSpacing`          | `Top spacing for the sidebar (in pixels)`			| `number`                 | `0`            | `no`			|
 | `subscriptionUrl`              | `subscriptionUrl`             | `URL to manage subscriptions`									| `string`                 | `''`           | `no`			|
 | `theme`                        | `theme`                        | `Component theme`															| `'default' \| 'primary'` | `'primary'`    | `no`			|
@@ -24,6 +23,29 @@ Ini adalah komponen _header account_ yang akan di implementasi pada header
 | `isGracePeriod`    | `isGracePeriod`    | Boolean flag indicating whether the user is currently in a grace period. Set to `true` if the grace period array is not empty. **However**, if both active membership and grace period arrays are not empty, this value must be `false`. | `boolean` | `false` | yes      |
 | `isMembership`     | `isMembership`     | Boolean flag indicating whether the user has an active membership. Set to `true` if the active membership array is not empty.                                                                                                            | `boolean` | `false` | yes      |
 
+## Properties Grace Period Default
+Property dapat dilihat di [Readme Grace Period](https://github.com/pt-kompas-media-nusantara/lit-web-component/tree/master/src/components/kompasid-grace-period).
+Pemakaian kalo memang tidak ada perubahan, lebih baik tidak digunakan atau di konfirmasi lagi ke PM. Kegunaan property ini hanya pada saat status grace period aktif dan biasanya di biarkan secara default kalau di header.
+
+| Property                     | Attribute                    | Description                                | Type      | Default | Required |
+| ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | -------------- | -------- |
+| `paywall_location`           | `paywall_location`           |																							| `string`  | `''`    | no       |
+| `paywall_subscription_package` | `paywall_subscription_package` |																							| `string`  | `''`    | no       |
+| `paywall_subscription_id`    | `paywall_subscription_id`    |                                            | `number`  | `0`     | no       |
+| `paywall_subscription_price` | `paywall_subscription_price` |																							| `number`  | `0`     | no       |
+| `paywall_position`           | `paywall_position`           |																							| `number`  | `0`     | no       |
+| `tracker_page_type`          | `tracker_page_type`          |																							| `string`  | `''`    | no       |
+| `tracker_content_id`         | `tracker_content_id`         |																							| `string`  | `''`    | no       |
+| `tracker_content_title`      | `tracker_content_title`      |																							| `string`  | `''`    | no       |
+| `tracker_content_categories` | `tracker_content_categories` |																							| `string`  | `''`    | no       |
+| `tracker_content_type`       | `tracker_content_type`       |																							| `string`  | `''`    | no       |
+| `tracker_user_type`          | `tracker_user_type`          |																							| `string`  | `''`    | no       |
+| `tracker_subscription_status` | `tracker_subscription_status` |																							| `string`  | `''``    | no       |
+| `tracker_page_domain`        | `tracker_page_domain`        |																							| `string`  | `''`    | no       |
+| `tracker_metered_wall_type`  | `tracker_metered_wall_type`  |																							| `string`  | `''`    | no       |
+| `tracker_metered_wall_balance` | `tracker_metered_wall_balance` |																							| `number`  | `0`     | no       |
+
+
 ---
 
 ## Usage
@@ -36,12 +58,12 @@ API Last Order = "https://api.kompas.cloud/order/api/v1/product/latest"
 
 ```js
 	<kompas-header-account
-		logoutUrl="https://account.kompas.cloud/logout"
-		manageAccountUrl="https://account.kompas.cloud/manage-account"
+		logout_url="https://account.kompas.cloud/logout"
+		manage_account_url="https://account.kompas.cloud/manage-account"
 		notificationUrl="https://account.kompas.cloud/manage-account/notification"
 		:sidebarTopSpacing="48"
 		subscriptionUrl="https://www.kompas.id/berlangganan"
-		readLaterUrl="https://www.kompas.id/bacananti"
+		read_later_url="https://www.kompas.id/bacananti"
 		:paywall_subscription_id="98888"
 		theme="primary"
 		:userData="userData"

package/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts

@@ -57,38 +57,22 @@ export class KompasHeaderAccountMenu extends LitElement {
 
   @state() clipboardClicked: boolean = false
 
-  /**
-   * Cart Url
-   */
-  @property({ type: String }) cartUrl = 'https://gerai.kompas.id/cart'
-
   /**
    * Logout Url
    */
-  @property({ type: String }) logoutUrl = 'https://account.kompas.id/logout'
+  @property({ type: String }) logout_url = 'https://auth.kompas.id/logout'
 
   /**
    * Manage Account Url
    */
-  @property({ type: String }) manageAccountUrl =
-    'https://account.kompas.id/manage-account/my-account'
-
-  /**
-   * Notification Url
-   */
-  @property({ type: String }) notificationUrl =
-    'https://account.kompas.id/manage-account/notification'
-
-  /**
-   * Orders Url
-   */
-  @property({ type: String }) ordersUrl =
-    'https://gerai.kompas.id/my-account/orders'
+  @property({ type: String }) manage_account_url =
+    'https://manage-account.kompas.id/manage-account/my-account'
 
   /**
    * Read Later Url
    */
-  @property({ type: String }) readLaterUrl = 'https://www.kompas.id/baca-nanti'
+  @property({ type: String }) read_later_url =
+    'https://www.kompas.id/baca-nanti'
 
   // Render Total Bubble
   private renderTotalBubble = (total: number) => {
@@ -127,7 +111,7 @@ export class KompasHeaderAccountMenu extends LitElement {
             <p class="header-account-menu--title">Keranjang</p>
           </a> -->
           <!-- Manage Account  -->
-          <a href=${this.manageAccountUrl} class="header-account-menu--item">
+          <a href=${this.manage_account_url} class="header-account-menu--item">
             <div class="icon icon-md icon-blue-600">
               ${unsafeSVG(getFontAwesomeIcon('fas', 'user-gear'))}
             </div>
@@ -139,14 +123,14 @@ export class KompasHeaderAccountMenu extends LitElement {
             <p class="header-account-menu--title">Transaksi</p>
           </a> -->
           <!-- Read Later  -->
-          <a href=${this.readLaterUrl} class="header-account-menu--item">
+          <a href=${this.read_later_url} class="header-account-menu--item">
             <div class="icon icon-md icon-blue-600">
               ${unsafeSVG(getFontAwesomeIcon('fas', 'bookmark'))}
             </div>
             <p class="header-account-menu--title">Baca Nanti</p>
           </a>
           <!-- Logout -->
-          <a href=${this.logoutUrl} class="header-account-menu--item">
+          <a href=${this.logout_url} class="header-account-menu--item">
             <div class="icon icon-md icon-blue-600">
               ${unsafeSVG(getFontAwesomeIcon('fas', 'right-from-bracket'))}
             </div>

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

@@ -25,7 +25,6 @@ export class KompasHeaderAccountProfile extends LitElement {
   @property({ type: String }) userInitialName = ''
   @property({ type: Object }) userData = {} as User
   @property({ type: String }) subscriptionUrl = ''
-  @property({ type: Number }) totalGracePeriod = 0
   @property({ type: String }) openFrom = ''
   /**
    * Props For Grace Period Tracker

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

@@ -109,6 +109,7 @@ export class KompasPaywall extends LitElement {
   mockResult: PaywallProduct = {
     informations: {
       title: '',
+      excerpt: '',
       description: [],
       register: {
         img: 'https://www.kompas.id/img/backgrounds/ilustrasi-banner-registration.png',
@@ -279,7 +280,7 @@ export class KompasPaywall extends LitElement {
   async getPaywallData() {
     try {
       const [paywallResponse, contextualResponse] = await Promise.all([
-        fetch('https://cdn-www.kompas.id/web-component/paywall.json'),
+        fetch('https://cdn-www.kompas.id/web-component/hard-paywall.json'),
         fetch(
           'https://cdn-www.kompas.id/web-component/contextual_paywall.json'
         ),
@@ -305,10 +306,13 @@ export class KompasPaywall extends LitElement {
           ...this.mockResult.informations,
           title: json[defaultType][typeContextual]
             ? json[defaultType][typeContextual].head
-            : json[defaultType].head,
+            : '',
+          excerpt: json[defaultType][typeContextual]
+            ? json[defaultType][typeContextual].description
+            : '',
           description: json[defaultType][typeContextual]
             ? json[defaultType][typeContextual].content
-            : json[defaultType].content,
+            : '',
           cta: json[defaultType].cta,
           typeVariant: json[defaultType][typeContextual]
             ? json[defaultType][typeContextual].variant
@@ -318,7 +322,7 @@ export class KompasPaywall extends LitElement {
           ...this.mockResult.packages,
           memberships: json[defaultType][typeContextual]
             ? json[defaultType][typeContextual].memberships
-            : json[defaultType].memberships,
+            : [],
           swgEnable: json[defaultType].swgEnable,
           freeTrial: json[defaultType].freeTrial,
           swgContent: json[defaultType].swgContent,
@@ -452,7 +456,7 @@ export class KompasPaywall extends LitElement {
           <div
             class="flex flex-col ${this.theme === 'dark'
               ? 'bg-dark-5'
-              : 'bg-white'} items-center justify-center mx-4 md:mx-0"
+              : 'bg-white'} items-center justify-center px-4 md:px-0"
           >
             <div class="flex flex-col w-full max-w-screen-md my-5">
               <kompasid-paywall-information-header
@@ -503,7 +507,7 @@ export class KompasPaywall extends LitElement {
         <div
           class="flex flex-col ${this.theme === 'dark'
             ? 'bg-dark-5'
-            : 'bg-white'} items-center justify-center mx-4 md:mx-0"
+            : 'bg-white'} items-center justify-center px-4 md:px-0"
         >
           <div class="flex flex-col w-full max-w-screen-md my-5">
             <kompasid-paywall-body
@@ -602,11 +606,7 @@ export class KompasPaywall extends LitElement {
     return html`
       <div>
         ${this.transitionBox()}
-        <div
-          class="flex flex-col ${this.theme === 'dark'
-            ? 'bg-dark-5'
-            : 'bg-white'} items-center justify-center mx-4 md:mx-0"
-        >
+        <div class="flex flex-col">
           <div class="flex flex-col w-full max-w-screen-md my-5">
             <kompasid-paywall-body
               tracker_content_type=${this.tracker_content_type}

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

@@ -38,359 +38,81 @@ Terdapat skenario contextual paywall jika beberapa props tracker di isi seperti
 | `userGuid`                     | `user-guid`                    |             | `string`                                       | `''`        | `false`  |
 
 ## JSON ([https://cdn-www.kompas.id/web-component/paywall.json](https://cdn-www.kompas.id/web-component/paywall.json))
-
-Example:
-
 ```json
-{
-  "proMiningArticle": {
-      "head": "Akses Penuh Kompas Pro dengan Berlangganan",
-      "content": [
-          "Analisis tajam dari pakar industri",
-          "Indonesia Mining Outlook",
-          "Kompas Mining Connect",
-          "Newsletter eksklusif",
-          "Akses penuh Kompas.id Premium"
-      ],
-      "memberships": [
-          {
-              "title": "Kompas Pro Mining 1 Tahun",
-              "percentage": 0,
-              "price": 1500000,
-              "discountPrice": 0,
-              "savingPrice": 0,
-              "periode": "Tahun",
-              "isHighlight": false,
-              "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891033&autorenewal=1&referrer=",
-              "package": "Cash-B2C-Pro-Mining-12",
-              "subscriptionId": "9891033",
-              "position": 1
-          }
-      ],
-      "swgEnable": false,
-      "swgContent": {
-          "introductory": {
-              "price": "Rp 30.000",
-              "description": "untuk 1 bulan pertama",
-              "duration": ""
-          },
-          "default": {
-              "price": "",
-              "description": "Berlangganan lebih mudah dengan Google",
-              "duration": ""
-          }
-      },
-      "cta": {
-          "show": true,
-          "text": "Keunggulan Kompas Pro",
-          "url": "https://pro.kompas.id/"
-      }
-  },
-  "proMiningOutlook": {
-      "head": "Akses Penuh Kompas Pro dengan Berlangganan",
-      "content": [
-          "Analisis tajam dari pakar industri",
-          "Indonesia Mining Outlook",
-          "Kompas Mining Connect",
-          "Newsletter eksklusif",
-          "Akses penuh Kompas.id Premium"
-      ],
-      "memberships": [
-          {
-              "title": "Kompas Pro Mining 1 Tahun",
-              "percentage": 0,
-              "price": 1500000,
-              "discountPrice": 0,
-              "savingPrice": 0,
-              "periode": "Tahun",
-              "isHighlight": false,
-              "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891033&autorenewal=1&referrer=",
-              "package": "Cash-B2C-Pro-Mining-12",
-              "subscriptionId": "9891033",
-              "position": 1
-          }
-      ],
-      "swgEnable": false,
-      "swgContent": {
-          "introductory": {
-              "price": "Rp 30.000",
-              "description": "untuk 1 bulan pertama",
-              "duration": ""
-          },
-          "default": {
-              "price": "",
-              "description": "Berlangganan lebih mudah dengan Google",
-              "duration": ""
-          }
-      },
-      "cta": {
-          "show": true,
-          "text": "Keunggulan Kompas Pro",
-          "url": "https://pro.kompas.id/"
-      }
-  },
-  "epaper": {
-      "head": "Buat Ramadhan Lebih Bermakna, 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 70%)",
-              "percentage": 70,
-              "price": 110000,
-              "discountPrice": 360000,
-              "savingPrice": 9000,
-              "periode": "Tahun",
-              "isHighlight": true,
-              "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891038&autorenewal=1&referrer=",
-              "package": "cash-b2c-kdp-regular-12-1000002",
-              "subscriptionId": "9891038",
-              "position": 1
-          },
-          {
-              "title": "Kompas Digital Premium 1 Bulan",
-              "percentage": 0,
-              "discountPrice": 0,
-              "price": 20000,
-              "periode": "Bulan",
-              "isHighlight": false,
-              "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891075&autorenewal=1&referrer=",
-              "package": "cash-b2c-kdp-regular-1-1000042",
-              "subscriptionId": "9891075",
-              "position": 2
-          }
-      ],
-      "swgEnable": true,
-      "swgContent": {
-          "introductory": {
-              "price": "Rp 30.000",
-              "description": "untuk 1 bulan pertama",
-              "duration": ""
-          },
-          "default": {
-              "price": "",
-              "description": "Berlangganan lebih mudah dengan Google",
-              "duration": ""
-          }
-      },
-      "cta": {
-          "show": true,
-          "text": "Lihat Paket Lainnya",
-          "url": "https://www.kompas.id/berlangganan/v2"
-      }
-  },
-  "reguler": {
-      "typeA": {
-          "head": "Tingkatkan Literasi di Bulan Suci Dengan Artikel Penuh Inspirasi Type A",
-          "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 70%)",
-                  "percentage": 70,
-                  "price": 110000,
-                  "discountPrice": 360000,
-                  "savingPrice": 9000,
-                  "periode": "Tahun",
-                  "isHighlight": true,
-                  "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891038&autorenewal=1&referrer=",
-                  "package": "cash-b2c-kdp-regular-12-1000002",
-                  "subscriptionId": "9891038",
-                  "position": 1
-              },
-              {
-                  "title": "Kompas Digital Premium 1 Bulan",
-                  "percentage": 0,
-                  "discountPrice": 0,
-                  "price": 20000,
-                  "periode": "Bulan",
-                  "isHighlight": false,
-                  "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891075&autorenewal=1&referrer=",
-                  "package": "cash-b2c-kdp-regular-1-1000042",
-                  "subscriptionId": "9891075",
-                  "position": 2
-              }
-          ],
-          "variant": "A"
-      },
-      "typeB": {
-          "head": "Tingkatkan Literasi di Bulan Suci Dengan Artikel Penuh Inspirasi Type B",
-          "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 70%)",
-                  "percentage": 70,
-                  "price": 110000,
-                  "discountPrice": 360000,
-                  "savingPrice": 9000,
-                  "periode": "Tahun",
-                  "isHighlight": true,
-                  "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891038&autorenewal=1&referrer=",
-                  "package": "cash-b2c-kdp-regular-12-1000002",
-                  "subscriptionId": "9891038",
-                  "position": 1
-              },
-              {
-                  "title": "Kompas Digital Premium 1 Bulan",
-                  "percentage": 0,
-                  "discountPrice": 0,
-                  "price": 20000,
-                  "periode": "Bulan",
-                  "isHighlight": false,
-                  "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891075&autorenewal=1&referrer=",
-                  "package": "cash-b2c-kdp-regular-1-1000042",
-                  "subscriptionId": "9891075",
-                  "position": 2
-              }
-          ],
-          "variant": "B"
-      },
-      "swgEnable": true,
-      "swgContent": {
-          "introductory": {
-              "price": "Rp 30.000",
-              "description": "untuk 1 bulan pertama",
-              "duration": ""
-          },
-          "default": {
-              "price": "",
-              "description": "Berlangganan lebih mudah dengan Google",
-              "duration": ""
-          }
-      },
-      "cta": {
-          "show": true,
-          "text": "Lihat Paket Lainnya",
-          "url": "https://www.kompas.id/berlangganan/v2"
-      }
-  },
-  "audio": {
-      "head": "Buat Ramadhan Lebih Bermakna, Akses Audio Berita dan Keuntungan Lainnya Tanpa Jeda",
-      "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 70%)",
-              "percentage": 70,
-              "price": 110000,
-              "discountPrice": 360000,
-              "savingPrice": 9000,
-              "periode": "Tahun",
-              "isHighlight": true,
-              "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891038&autorenewal=1&referrer=",
-              "package": "cash-b2c-kdp-regular-12-1000002",
-              "subscriptionId": "9891038",
-              "position": 1
-          },
-          {
-              "title": "Kompas Digital Premium 1 Bulan",
-              "percentage": 0,
-              "discountPrice": 0,
-              "price": 20000,
-              "periode": "Bulan",
-              "isHighlight": false,
-              "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891075&autorenewal=1&referrer=",
-              "package": "cash-b2c-kdp-regular-1-1000042",
-              "subscriptionId": "9891075",
-              "position": 2
-          }
-      ],
-      "swgEnable": true,
-      "swgContent": {
-          "introductory": {
-              "price": "Rp 30.000",
-              "description": "Berlangganan dengan Harga Pertama",
-              "duration": ""
-          },
-          "default": {
-              "price": "",
-              "description": "Berlangganan lebih mudah dengan Google",
-              "duration": ""
-          }
-      },
-      "cta": {
-          "show": true,
-          "text": "Lihat Paket Lainnya",
-          "url": "https://www.kompas.id/berlangganan/v2"
-      }
-  },
-  "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 70%)",
-              "percentage": 70,
-              "price": 110000,
-              "discountPrice": 360000,
-              "savingPrice": 9000,
-              "periode": "Tahun",
-              "isHighlight": true,
-              "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802032&autorenewal=1&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": 15000,
-              "periode": "Bulan",
-              "isHighlight": false,
-              "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802035&autorenewal=1&referrer=",
-              "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
-              "subscriptionId": "9802035",
-              "position": 2
-          }
-      ],
-      "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."
-      },
-      "swgEnable": true,
-      "swgContent": {
-          "introductory": {
-              "price": "Rp 30.000",
-              "description": "untuk 1 bulan pertama",
-              "duration": ""
-          },
-          "default": {
-              "price": "",
-              "description": "Berlangganan lebih mudah dengan Google",
-              "duration": ""
-          }
-      },
-      "cta": {
-          "show": true,
-          "text": "Lihat Paket Lainnya",
-          "url": "https://www.kompas.id/berlangganan/v2"
-      }
-  }
-}
+    "samplePaywall": {
+        "typeA": {
+            "variant": "A",
+            "head": "Akses Penuh Kompas Professional dengan Berlangganan",
+            "description": "Dapatkan laporan mendalam dan analisis tajam untuk para professional.",
+            "content": [
+                "Analisis tajam dari pakar industri",
+                "Indonesia Mining Outlook",
+                "Kompas Mining Connect",
+                "Newsletter eksklusif",
+                "Akses penuh Kompas.id Premium"
+            ],
+            "memberships": [
+                {
+                    "title": "Kompas Pro Mining 1 Tahun",
+                    "saveLabel": "",
+                    "price": 1500000,
+                    "priceSlice": 0,
+                    "periode": "Tahun",
+                    "isHighlight": true,
+                    "isButtonSolid": true,
+                    "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891033&autorenewal=1&referrer=",
+                    "package": "Cash-B2C-Pro-Mining-12",
+                    "subscriptionId": "9891033",
+                    "position": 1
+                }
+            ]
+        },
+        "typeB": {
+            "variant": "B",
+            "head": "Akses Penuh Kompas Professional dengan Berlangganan",
+            "description": "Dapatkan laporan mendalam dan analisis tajam untuk para professional.",
+            "content": [
+                "Analisis tajam dari pakar industri",
+                "Indonesia Mining Outlook",
+                "Kompas Mining Connect",
+                "Newsletter eksklusif",
+                "Akses penuh Kompas.id Premium"
+            ],
+            "memberships": [
+                {
+                    "title": "Kompas Pro Mining 1 Tahun",
+                    "saveLabel": "",
+                    "price": 1500000,
+                    "priceSlice": 0,
+                    "periode": "Tahun",
+                    "isHighlight": true,
+                    "isButtonSolid": true,
+                    "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891033&autorenewal=1&referrer=",
+                    "package": "Cash-B2C-Pro-Mining-12",
+                    "subscriptionId": "9891033",
+                    "position": 1
+                }
+            ]
+        },
+        "swgEnable": false,
+        "swgContent": {
+            "introductory": {
+                "price": "Rp 30.000",
+                "description": "untuk 1 bulan pertama",
+                "duration": ""
+            },
+            "default": {
+                "price": "",
+                "description": "Berlangganan lebih mudah dengan Google",
+                "duration": ""
+            }
+        },
+        "cta": {
+            "show": true,
+            "text": "Keunggulan Kompas Professional",
+            "url": "https://pro.kompas.id/"
+        }
+    }
 ```
 
 ## JSON ([https://cdn-www.kompas.id/web-component/contextual_paywall.json](https://cdn-www.kompas.id/web-component/contextual_paywall.json))