@kompasid/lit-web-components 0.9.23 → 0.9.25

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

@@ -99,6 +99,7 @@ export class KompasPaywall extends LitElement {
   @property({ type: String }) tracker_metered_wall_type = ''
   @property({ type: Number }) tracker_metered_wall_balance = 0
   @property({ type: String }) tracker_epaper_edition = ''
+  @property({ type: String }) tracker_content_publisher = ''
   @property({ type: String }) theme = ''
 
   mockResult: PaywallProduct = {
@@ -117,6 +118,11 @@ export class KompasPaywall extends LitElement {
         maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',
         url: 'https://kompas.id/berlangganan',
       },
+      cta: {
+        show: true,
+        text: 'Lihat Paket Lainnya',
+        url: 'https://www.kompas.id/berlangganan/v2',
+      },
     },
     packages: {
       title: 'Sekali bayar, tanpa perpanjang otomatis',
@@ -271,19 +277,30 @@ export class KompasPaywall extends LitElement {
         'https://cdn-www.kompas.id/web-component/paywall.json'
       )
       const json = await response.json()
+      const listType = [
+        'reguler',
+        'audio',
+        'proMiningOutlook',
+        'proMiningArticle',
+        'epaper',
+        'custom',
+      ]
+      const findTypeOnTheList = listType.includes(this.type)
+      const defaultType = findTypeOnTheList ? this.type : 'reguler'
       this.paywallData = {
         ...this.mockResult,
         informations: {
           ...this.mockResult.informations,
-          title: json[this.type].head,
-          description: json[this.type].content,
+          title: json[defaultType].head,
+          description: json[defaultType].content,
+          cta: json[defaultType].cta,
         },
         packages: {
           ...this.mockResult.packages,
-          memberships: json[this.type].memberships,
-          swgEnable: json[this.type].swgEnable,
-          freeTrial: json[this.type].freeTrial,
-          swgContent: json[this.type].swgContent,
+          memberships: json[defaultType].memberships,
+          swgEnable: json[defaultType].swgEnable,
+          freeTrial: json[defaultType].freeTrial,
+          swgContent: json[defaultType].swgContent,
         },
       }
     } catch (error) {
@@ -320,6 +337,7 @@ export class KompasPaywall extends LitElement {
       tracker_metered_wall_type=${this.tracker_metered_wall_type}
       tracker_epaper_edition=${this.tracker_epaper_edition}
       tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
+      tracker_content_publisher=${this.tracker_content_publisher}
       ?swgEnable=${this.swgEnable}
       tracker_content_type=${this.tracker_content_type}
       ?isLogin=${this.isLogin}
@@ -368,6 +386,7 @@ export class KompasPaywall extends LitElement {
                 tracker_metered_wall_balance=${this
                   .tracker_metered_wall_balance}
                 tracker_content_type=${this.tracker_content_type}
+                tracker_content_publisher=${this.tracker_content_publisher}
                 ?swgEnable=${this.swgEnable}
                 ?isLogin=${this.isLogin}
                 type=${this.type}
@@ -408,6 +427,7 @@ export class KompasPaywall extends LitElement {
               tracker_page_domain=${this.tracker_page_domain}
               tracker_metered_wall_type=${this.tracker_metered_wall_type}
               tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
+              tracker_content_publisher=${this.tracker_content_publisher}
               ?swgEnable=${this.swgEnable}
               ?isLogin=${this.isLogin}
               type=${this.type}
@@ -459,6 +479,7 @@ export class KompasPaywall extends LitElement {
                 tracker_metered_wall_balance=${this
                   .tracker_metered_wall_balance}
                 tracker_content_type=${this.tracker_content_type}
+                tracker_content_publisher=${this.tracker_content_publisher}
                 ?swgEnable=${this.swgEnable}
                 ?isLogin=${this.isLogin}
                 type=${this.type}
@@ -500,6 +521,7 @@ export class KompasPaywall extends LitElement {
               tracker_page_domain=${this.tracker_page_domain}
               tracker_metered_wall_type=${this.tracker_metered_wall_type}
               tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
+              tracker_content_publisher=${this.tracker_content_publisher}
               ?swgEnable=${this.swgEnable}
               ?isLogin=${this.isLogin}
               type=${this.type}
@@ -519,6 +541,8 @@ export class KompasPaywall extends LitElement {
   private selectorTypePaywall = (type: PaywallType) => {
     switch (type) {
       case 'epaper':
+      case 'proMiningArticle':
+      case 'proMiningOutlook':
         return this.renderEpaperPaywallSection()
       case 'audio':
         return this.renderAudioPaywallSection()

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

@@ -61,12 +61,19 @@ export interface Packages {
   swgContent: SwgContent
 }
 
+export interface ctaPaywall {
+  show: boolean
+  text: string
+  url: string
+}
+
 export interface PaywallProduct {
   informations: {
     title: string
     description: Array<string>
     register: Registration
     meterred: Metered
+    cta: ctaPaywall
   }
   packages: Packages
   payment: {
@@ -75,4 +82,10 @@ export interface PaywallProduct {
     ekstension: Array<PaymentImage>
   }
 }
-export type PaywallType = 'epaper' | 'reguler' | 'audio' | 'custom'
+export type PaywallType =
+  | 'proMiningArticle'
+  | 'proMiningOutlook'
+  | 'epaper'
+  | 'reguler'
+  | 'audio'
+  | 'custom'

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

@@ -98,6 +98,7 @@ export class KompasIdPaywallBody extends LitElement {
   @property({ type: String }) tracker_metered_wall_type = ''
   @property({ type: Number }) tracker_metered_wall_balance = 0
   @property({ type: String }) tracker_epaper_edition = ''
+  @property({ type: String }) tracker_content_publisher = ''
   @property({ type: String }) theme = ''
   @property() togglePaywall = () => {}
 
@@ -182,8 +183,13 @@ export class KompasIdPaywallBody extends LitElement {
 
   private redirectToSubscriber(): void {
     this.sendDataLayer()
+    const getCtaUrl = this.paywallData?.informations?.cta
+      ? this.paywallData?.informations?.cta.url
+      : ''
+    // TODO: Hendy
+    // Bisa jadi ini nanti open from nya beda, untuk sekarang biarkan dulu, note 25 08 2025 (tolong tanya ke PM bersangkutan)
     const openFrom = `${this.type === 'epaper' ? 'ePaper' : 'Hard'}_Paywall`
-    window.open(`https://www.kompas.id/berlangganan?open_from=${openFrom}`)
+    window.open(`${getCtaUrl}?open_from=${openFrom}`)
   }
 
   private redirectToHelpdesk(): void {
@@ -472,7 +478,7 @@ export class KompasIdPaywallBody extends LitElement {
         page_domain: this.tracker_page_domain || 'Kompas.id',
         metered_wall_type: this.tracker_metered_wall_type || 'HP',
         metered_wall_balance: this.tracker_metered_wall_balance,
-        ...(this.type === 'epaper'
+        ...(this.type === 'epaper' || this.type === 'proMiningOutlook'
           ? { epaper_edition: this.tracker_epaper_edition }
           : {
               page_type: this.tracker_page_type,
@@ -480,6 +486,7 @@ export class KompasIdPaywallBody extends LitElement {
               content_title: this.tracker_content_title,
               content_categories: this.tracker_content_categories,
               content_type: this.tracker_content_type,
+              content_publisher: this.tracker_content_publisher,
             }),
       })),
     }
@@ -542,6 +549,7 @@ export class KompasIdPaywallBody extends LitElement {
       gtmParams.content_id = this.tracker_content_id
       gtmParams.content_categories = this.tracker_content_categories
       gtmParams.content_type = this.tracker_content_type
+      gtmParams.content_publisher = this.tracker_content_publisher
       gtmParams.page_type = this.tracker_page_type
     } else {
       gtmParams.epaper_edition = this.tracker_epaper_edition
@@ -682,18 +690,26 @@ export class KompasIdPaywallBody extends LitElement {
     </div>`
   }
 
-  private informationPackages() {
+  private ctaPackages() {
     const marginTopClass = this.type === 'audio' ? 'mt-4 md:mt-2' : 'mt-4'
     const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'
-
-    return html` <div class="flex justify-center ${marginTopClass}">
-      <button
-        @click=${this.otherPackagesClicked}
-        class="text-sm md:text-base font-bold underline ${textColorClass}"
-      >
-        Lihat Paket Lainnya
-      </button>
-    </div>`
+    const getCtaText = this.paywallData?.informations?.cta
+      ? this.paywallData?.informations?.cta.text
+      : ''
+    const showCta = this.paywallData?.informations?.cta
+      ? this.paywallData?.informations?.cta.show
+      : false
+
+    return showCta
+      ? html` <div class="flex justify-center ${marginTopClass}">
+          <button
+            @click=${this.otherPackagesClicked}
+            class="text-sm md:text-base font-bold underline ${textColorClass}"
+          >
+            ${getCtaText}
+          </button>
+        </div>`
+      : nothing
   }
 
   private epaperRegistrationSection() {
@@ -1253,7 +1269,7 @@ export class KompasIdPaywallBody extends LitElement {
             ${this.packagesSection(
               this.paywallData?.packages ?? ({} as Packages)
             )}
-            ${this.informationPackages()}
+            ${this.ctaPackages()}
             ${!isLogin
               ? html`
                   <div

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

@@ -20,6 +20,7 @@
 | `tracker_content_id`           | `tracker_content_id`           |             | `string`                | `''`        |
 | `tracker_content_title`        | `tracker_content_title`        |             | `string`                | `''`        |
 | `tracker_content_type`         | `tracker_content_type`         |             | `string`                | `''`        |
+| `tracker_content_publisher`    | `tracker_content_publisher`    |             | `string`                | `''`        |
 | `tracker_epaper_edition`       | `tracker_epaper_edition`       |             | `string`                | `''`        |
 | `tracker_metered_wall_balance` | `tracker_metered_wall_balance` |             | `number`                | `0`         |
 | `tracker_metered_wall_type`    | `tracker_metered_wall_type`    |             | `string`                | `''`        |
@@ -27,7 +28,7 @@
 | `tracker_page_type`            | `tracker_page_type`            |             | `string`                | `''`        |
 | `tracker_subscription_status`  | `tracker_subscription_status`  |             | `string`                | `''`        |
 | `tracker_user_type`            | `tracker_user_type`            |             | `string`                | `''`        |
-| `type`                         | `type`                         |             | `"epaper" \| "reguler" \| "audio" \| "custom"` | `'reguler'` | `'reguler'` |
+| `type`                         | `type`                         |             | `"epaper" \| "reguler" \| "audio" \| "proMiningArticle" \| "proMiningOutlook" \| "custom"` | `'reguler'` | `'reguler'` |
 | `userGuid`                     | `user-guid`                    |             | `string`                | `''`        |
 
 

package/tailwind/tailwind.css

@@ -642,10 +642,6 @@ video {
   grid-column: span 4 / span 4;
 }
 
-.m-6 {
-  margin: 1.5rem;
-}
-
 .m-auto {
   margin: auto;
 }
@@ -665,16 +661,16 @@ video {
   margin-right: 1rem;
 }
 
+.mx-6 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
-.my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -854,10 +850,6 @@ video {
   height: 4rem;
 }
 
-.h-2 {
-  height: 0.5rem;
-}
-
 .h-20 {
   height: 5rem;
 }
@@ -951,10 +943,6 @@ video {
   width: 4rem;
 }
 
-.w-2 {
-  width: 0.5rem;
-}
-
 .w-2\/3 {
   width: 66.666667%;
 }
@@ -1027,10 +1015,6 @@ video {
   width: 296px;
 }
 
-.w-\[312px\] {
-  width: 312px;
-}
-
 .w-\[328px\] {
   width: 328px;
 }
@@ -1438,14 +1422,14 @@ video {
   background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1));
 }
 
-.bg-\[\#FFFFFF\] {
+.bg-\[\#D71920\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  background-color: rgb(215 25 32 / var(--tw-bg-opacity, 1));
 }
 
-.bg-\[\#e1f0ff\] {
+.bg-\[\#FFFFFF\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(225 240 255 / var(--tw-bg-opacity, 1));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
 .bg-black {
@@ -1724,14 +1708,6 @@ video {
   padding-left: 0.25rem;
 }
 
-.pl-11 {
-  padding-left: 2.75rem;
-}
-
-.pl-14 {
-  padding-left: 3.5rem;
-}
-
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -1740,6 +1716,10 @@ video {
   padding-left: 1rem;
 }
 
+.pl-8 {
+  padding-left: 2rem;
+}
+
 .pl-px {
   padding-left: 1px;
 }
@@ -1764,10 +1744,6 @@ video {
   padding-top: 0.125rem;
 }
 
-.pt-1 {
-  padding-top: 0.25rem;
-}
-
 .pt-10 {
   padding-top: 2.5rem;
 }
@@ -1907,11 +1883,6 @@ video {
   color: rgb(0 85 154 / var(--tw-text-opacity, 1));
 }
 
-.text-\[\#333\] {
-  --tw-text-opacity: 1;
-  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
-}
-
 .text-\[\#666666\] {
   --tw-text-opacity: 1;
   color: rgb(102 102 102 / var(--tw-text-opacity, 1));
@@ -2052,6 +2023,10 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

package/tailwind/tailwind.ts

@@ -649,10 +649,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     grid-column: span 4 / span 4;
   }
 
-  .m-6 {
-    margin: 1.5rem;
-  }
-
   .m-auto {
     margin: auto;
   }
@@ -682,11 +678,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-right: auto;
   }
 
-  .my-1 {
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-  }
-
   .my-4 {
     margin-top: 1rem;
     margin-bottom: 1rem;
@@ -866,10 +857,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     height: 4rem;
   }
 
-  .h-2 {
-    height: 0.5rem;
-  }
-
   .h-20 {
     height: 5rem;
   }
@@ -963,10 +950,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 4rem;
   }
 
-  .w-2 {
-    width: 0.5rem;
-  }
-
   .w-2\\/3 {
     width: 66.666667%;
   }
@@ -1039,10 +1022,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 296px;
   }
 
-  .w-\\[312px\\] {
-    width: 312px;
-  }
-
   .w-\\[328px\\] {
     width: 328px;
   }
@@ -1454,14 +1433,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1));
   }
 
-  .bg-\\[\\#FFFFFF\\] {
+  .bg-\\[\\#D71920\\] {
     --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+    background-color: rgb(215 25 32 / var(--tw-bg-opacity, 1));
   }
 
-  .bg-\\[\\#e1f0ff\\] {
+  .bg-\\[\\#FFFFFF\\] {
     --tw-bg-opacity: 1;
-    background-color: rgb(225 240 255 / var(--tw-bg-opacity, 1));
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   }
 
   .bg-black {
@@ -1740,18 +1719,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-left: 0.25rem;
   }
 
-  .pl-8 {
-    padding-left: 2rem;
-  }
-
-  .pl-11 {
-    padding-left: 2.75rem;
-  }
-
-  .pl-14 {
-    padding-left: 3.5rem;
-  }
-
   .pl-2 {
     padding-left: 0.5rem;
   }
@@ -1760,6 +1727,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-left: 1rem;
   }
 
+  .pl-8 {
+    padding-left: 2rem;
+  }
+
   .pl-px {
     padding-left: 1px;
   }
@@ -1784,10 +1755,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-top: 0.125rem;
   }
 
-  .pt-1 {
-    padding-top: 0.25rem;
-  }
-
   .pt-10 {
     padding-top: 2.5rem;
   }
@@ -1927,11 +1894,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     color: rgb(0 85 154 / var(--tw-text-opacity, 1));
   }
 
-  .text-\\[\\#333\\] {
-    --tw-text-opacity: 1;
-    color: rgb(51 51 51 / var(--tw-text-opacity, 1));
-  }
-
   .text-\\[\\#666666\\] {
     --tw-text-opacity: 1;
     color: rgb(102 102 102 / var(--tw-text-opacity, 1));
@@ -2076,6 +2038,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
 
+  .filter {
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
+      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  }
+
   .transition {
     transition-property: color, background-color, border-color,
       text-decoration-color, fill, stroke, opacity, box-shadow, transform,