@kompasid/lit-web-components 0.9.39 → 0.9.41

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

@@ -36,7 +36,6 @@ export class KompasMeteredPaywall extends LitElement {
   ]
 
   @state() private isLoading: Boolean = true
-  @state() private maxQuota: number = 3
   @state() private packageData: PackageData = {
     subscriptionText: 'Langganan untuk akses tanpa batas',
     buttonText: 'Langganan',
@@ -48,7 +47,6 @@ export class KompasMeteredPaywall extends LitElement {
    * Props
    */
   /**
-   * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
    * 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
@@ -63,10 +61,8 @@ export class KompasMeteredPaywall extends LitElement {
    * 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 }) paywall_location = ''
   @property({ type: String }) paywall_subscription_package = ''
   @property({ type: String }) paywall_subscription_id = ''
@@ -83,27 +79,7 @@ export class KompasMeteredPaywall extends LitElement {
   @property({ type: String }) tracker_metered_wall_type = ''
   @property({ type: Number }) tracker_metered_wall_balance = 0
 
-  private getCountdownArticle() {
-    // const getCountdown = this.countdownArticle
-    // const { maxQuota } = this
-
-    // if (getCountdown > 0 && getCountdown < maxQuota) {
-    //   return html`
-    //     <p>
-    //       Anda memiliki sisa
-    //       <b>${maxQuota - getCountdown} dari ${maxQuota}</b> artikel premium
-    //       gratis bulan ini. ${this.packageData.subscriptionText}
-    //     </p>
-    //   `
-    // }
-    // return html`
-    //   <p>
-    //     Anda sedang membaca <b>artikel gratis terakhir bulan ini.</b> ${this
-    //       .packageData.subscriptionText}
-    //   </p>
-    // `
-
-    // Handle tanpa kuota
+  private textSubscription() {
     return html` <p>${this.packageData.subscriptionText}</p> `
   }
 
@@ -155,7 +131,7 @@ export class KompasMeteredPaywall extends LitElement {
       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,
+      metered_wall_balance: this.tracker_metered_wall_balance || 0,
     })
   }
 
@@ -176,7 +152,7 @@ export class KompasMeteredPaywall extends LitElement {
       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,
+      metered_wall_balance: this.tracker_metered_wall_balance || 0,
     })
   }
 
@@ -190,7 +166,7 @@ export class KompasMeteredPaywall extends LitElement {
               <div
                 class="text-grey-600 text-sm md:text-lg self-center text-left"
               >
-                ${this.getCountdownArticle()}
+                ${this.textSubscription()}
               </div>
               <div class="self-center">
                 <button
@@ -206,3 +182,26 @@ export class KompasMeteredPaywall extends LitElement {
       : nothing
   }
 }
+
+// Leftover code sebelum nya
+// @state() private maxQuota: number = 3
+// const getCountdown = this.countdownArticle
+// const { maxQuota } = this
+
+// if (getCountdown > 0 && getCountdown < maxQuota) {
+//   return html`
+//     <p>
+//       Anda memiliki sisa
+//       <b>${maxQuota - getCountdown} dari ${maxQuota}</b> artikel premium
+//       gratis bulan ini. ${this.packageData.subscriptionText}
+//     </p>
+//   `
+// }
+// return html`
+//   <p>
+//     Anda sedang membaca <b>artikel gratis terakhir bulan ini.</b> ${this
+//       .packageData.subscriptionText}
+//   </p>
+// `
+
+// Handle tanpa kuota

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

@@ -4,7 +4,6 @@
 
 | Property                       | Attribute                      | Description                                                                              | Type     | Default |
 | ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | -------- | ------- |
-| `countdownArticle`             | `countdown-article`            | prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca (User tidak bisa melihat kuota countdown dari update terbaru lit, namun data tetap di gunakan untuk GTM)        | `number` | `0`     |
 | `paywall_location`             | `paywall_location`             | prop paywall_location = The location where user encounter the paywall                    | `string` | `''`    |
 | `paywall_position`             | `paywall_position`             | prop paywall_position = The position of ther subscription package viewed by user         | `number` | `0`     |
 | `paywall_subscription_id`      | `paywall_subscription_id`      | prop paywall_subscription_id = The ID of the subscription package viewed by user         | `string` | `''`    |
@@ -15,11 +14,11 @@
 | `tracker_content_title`        | `tracker_content_title`        | prop tracker_content_title = The title of article                                        | `string` | `''`    |
 | `tracker_content_type`         | `tracker_content_type`         | prop tracker_content_type = Whether it's free article or paid article                    | `string` | `''`    |
 | `tracker_metered_wall_balance` | `tracker_metered_wall_balance` | prop tracker_metered_wall_balance = The balance of their metered wall                    | `number` | `0`     |
-| `tracker_metered_wall_type`    | `tracker_metered_wall_type`    | prop tracker_metered_wall_type = The type of Metered Wall                                | `string` | `''`    |
-| `tracker_page_domain`          | `tracker_page_domain`          | prop tracker_page_domain = Page Domain                                                   | `string` | `''`    |
+| `tracker_metered_wall_type`    | `tracker_metered_wall_type`    | prop tracker_metered_wall_type = The type of Metered Wall                                | `string` | `'MP'`    |
+| `tracker_page_domain`          | `tracker_page_domain`          | prop tracker_page_domain = Page Domain                                                   | `string` | `'Kompas.id'`    |
 | `tracker_page_type`            | `tracker_page_type`            | prop tracker_page_type = Type of the page                                                | `string` | `''`    |
 | `tracker_subscription_status`  | `tracker_subscription_status`  | prop tracker_subscription_status = Status of their subscription                          | `string` | `''`    |
-| `tracker_user_type`            | `tracker_user_type`            | prop tracker_user_type = Type of user based on their subscription                        | `string` | `''`    |
+| `tracker_user_type`            | `tracker_user_type`            | prop tracker_user_type = Type of user based on their subscription                        | `string` | `'R'`    |
 
 ----------------------------------------------
 

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

@@ -127,6 +127,7 @@ export class KompasPaywall extends LitElement {
         text: 'Lihat Paket Lainnya',
         url: 'https://www.kompas.id/berlangganan/v2',
       },
+      typeVariant: '',
     },
     packages: {
       title: 'Sekali bayar, tanpa perpanjang otomatis',
@@ -309,6 +310,9 @@ export class KompasPaywall extends LitElement {
             ? json[defaultType][typeContextual].content
             : json[defaultType].content,
           cta: json[defaultType].cta,
+          typeVariant: json[defaultType][typeContextual]
+            ? json[defaultType][typeContextual].variant
+            : '',
         },
         packages: {
           ...this.mockResult.packages,

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

@@ -218,7 +218,8 @@ Example:
                   "subscriptionId": "9891075",
                   "position": 2
               }
-          ]
+          ],
+          "variant": "A"
       },
       "typeB": {
           "head": "Tingkatkan Literasi di Bulan Suci Dengan Artikel Penuh Inspirasi Type B",
@@ -254,7 +255,8 @@ Example:
                   "subscriptionId": "9891075",
                   "position": 2
               }
-          ]
+          ],
+          "variant": "B"
       },
       "swgEnable": true,
       "swgContent": {

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

@@ -74,6 +74,7 @@ export interface PaywallProduct {
     register: Registration
     meterred: Metered
     cta: ctaPaywall
+    typeVariant: string
   }
   packages: Packages
   payment: {

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

@@ -486,6 +486,7 @@ export class KompasIdPaywallBody extends LitElement {
         content_tags: this.tracker_content_tags || '',
         content_published_date: this.tracker_content_published_date || '',
         content_variant: this.tracker_content_variant || '',
+        variant: this.paywallData?.informations?.typeVariant || '',
         ...(this.type === 'epaper' || this.type === 'proMiningOutlook'
           ? { epaper_edition: this.tracker_epaper_edition }
           : {