@kompasid/lit-web-components 0.9.38 → 0.9.40

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

@@ -343,7 +343,9 @@ export class KompasPaywall extends LitElement {
     const variantTarget = target.variant
     const checkVariant =
       variantTarget.toLowerCase() === stringVariant.toLowerCase()
+
     const checkTags = () => {
+      if (!tagsTarget.length) return false
       for (const item of tagsTarget) {
         if (!stringTag.toLowerCase().includes(item.toLowerCase())) {
           return false
@@ -351,7 +353,6 @@ export class KompasPaywall extends LitElement {
       }
       return true
     }
-
     return checkVariant && checkTags()
   }
 
@@ -381,7 +382,10 @@ export class KompasPaywall extends LitElement {
     const isoDateString = publishedDate.replace(' ', 'T')
     const publishedDateObj = new Date(isoDateString)
 
-    const isWithin90Days = differenceInDays(publishedDateObj, nowDate) <= -90 // differenceInDays jika tanggal telah melewati 90 hari
+    const isWithin90Days = jsonContextual.articleAgeTreshold
+      ? differenceInDays(publishedDateObj, nowDate) <
+        -jsonContextual.articleAgeTreshold
+      : false // differenceInDays jika tanggal telah melewati 90 hari
     const hasMatchingTagsAndVariants = this.checkAllInString(
       jsonContextual,
       trackerTags,

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

@@ -93,4 +93,5 @@ export type PaywallType =
 export interface Contextual {
   variant: string
   tags: string[]
+  articleAgeTreshold: number
 }