@kompasid/lit-web-components 0.7.6 → 0.7.8

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

@@ -33,6 +33,167 @@ Ini adalah redesign komponen _paywall_ yang digunakan pada [epaper.kompas.id](ht
 | `userGuid`                     | `user-guid`                    |             | `string`                | `''`        |
 
 
+## JSON ([https://cdn-www.kompas.id/web-component/paywall.json](https://cdn-www.kompas.id/web-component/paywall.json))
+Example:
+
+```json
+{
+    "epaper": {
+        "head": "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 40%)",
+                "percentage": 40,
+                "price": 360000,
+                "discountPrice": 600000,
+                "savingPrice": 30000,
+                "periode": "Tahun",
+                "isHighlight": true,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&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": 50000,
+                "periode": "Bulan",
+                "isHighlight": false,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
+                "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
+                "subscriptionId": "9802035",
+                "position": 2
+            }
+        ],
+        "swgEnable": true
+    },
+    "reguler": {
+        "head": "Baca Lengkap Seluruh Artikel 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 40%)",
+                "percentage": 40,
+                "price": 360000,
+                "discountPrice": 600000,
+                "savingPrice": 30000,
+                "periode": "Tahun",
+                "isHighlight": true,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&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": 50000,
+                "periode": "Bulan",
+                "isHighlight": false,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
+                "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
+                "subscriptionId": "9802035",
+                "position": 2
+            }
+        ],
+        "swgEnable": true
+    },
+    "audio": {
+        "head": "Akses Audio Berita dan Keuntungan Lainnya 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 40%)",
+                "percentage": 40,
+                "price": 360000,
+                "discountPrice": 600000,
+                "savingPrice": 30000,
+                "periode": "Tahun",
+                "isHighlight": true,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&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": 50000,
+                "periode": "Bulan",
+                "isHighlight": false,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
+                "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
+                "subscriptionId": "9802035",
+                "position": 2
+            }
+        ],
+        "swgEnable": false
+    },
+    "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 40%)",
+                "percentage": 40,
+                "price": 360000,
+                "discountPrice": 600000,
+                "savingPrice": 30000,
+                "periode": "Tahun",
+                "isHighlight": true,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&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": 50000,
+                "periode": "Bulan",
+                "isHighlight": false,
+                "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
+                "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
+                "subscriptionId": "9802035",
+                "position": 2
+            }
+        ],
+        "swgEnable": true,
+        "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."
+        }
+    }
+}
+```
+
 ## Dependencies
 
 ### Depends on

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

@@ -37,10 +37,16 @@ export interface Informations {
     label: string
   }
 }
+export interface FreeTrial {
+  packageText: string
+  desktopText: string
+  mobileText: string
+}
 export interface Packages {
   title: string
   memberships: Array<Product>
-  freeTrial: string
+  swgEnable: boolean
+  freeTrial: FreeTrial
 }
 export interface PaywallProduct {
   informations: {
@@ -56,5 +62,4 @@ export interface PaywallProduct {
     ekstension: Array<PaymentImage>
   }
 }
-
 export type PaywallType = 'epaper' | 'reguler' | 'audio' | 'custom'

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

@@ -113,6 +113,7 @@ export class KompasIdPaywallBody extends LitElement {
   @state() private swgProductId = 'kompas.id:kompas_digital_premium'
   @state() private errorFlag = 0
 
+  _packages!: Packages
   buttonElement!: HTMLButtonElement
   targetElement!: HTMLElement
 
@@ -134,6 +135,10 @@ export class KompasIdPaywallBody extends LitElement {
     return !this.isLogin || this.tracker_subscription_status === 'IA'
   }
 
+  get packages(): Packages {
+    return this._packages
+  }
+
   /**
    * Logic Function
    */
@@ -181,11 +186,11 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private handleClickOutside() {
-    if (this.targetElement.classList.contains('wrapper-body')) {
+    if (this.targetElement?.classList.contains('wrapper-body')) {
       this.togglePaywall()
     }
 
-    if (this.targetElement.id === 'freeTrialPopup') {
+    if (this.targetElement?.id === 'freeTrialPopup') {
       this.closeFreeTrialPopup()
     }
   }
@@ -411,9 +416,12 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   override async connectedCallback() {
+    this._packages = this.paywallData?.packages ?? ({} as Packages)
+
     super.connectedCallback()
     await this.updateComplete
-    if (this.swgEnable) {
+
+    if (this.packages.swgEnable) {
       this.jsonScript()
       const appendSWGButton = () => {
         this.buttonElement = this.shadowRoot?.getElementById(
@@ -928,7 +936,7 @@ export class KompasIdPaywallBody extends LitElement {
             : this.secondaryPackages(item)
         )}
         ${this.freeTrialPackageSection()} ${this.freeTrialPopUp()}
-        ${this.swgEnable ? this.swgPackageSection() : nothing}
+        ${this.packages.swgEnable ? this.swgPackageSection() : nothing}
       </div>
     `
   }
@@ -1026,8 +1034,8 @@ export class KompasIdPaywallBody extends LitElement {
     const textColorClass = isDark ? 'text-dark-7' : 'text-grey-500'
 
     const googleImageSrc = isDark
-      ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google-white.png'
-      : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google.png'
+      ? 'https://cdn-www.kompas.id/paywall-asset/google-white.png'
+      : 'https://cdn-www.kompas.id/paywall-asset/google.png'
 
     return html`
       <div class="${containerClass}">
@@ -1066,12 +1074,12 @@ export class KompasIdPaywallBody extends LitElement {
     const { isDark } = this
 
     const googlePlayBadgeSrc = isDark
-      ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20Google%20Play_Dark%20Mode.svg'
-      : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20Google%20Play_Light%20Mode.svg'
+      ? 'https://cdn-www.kompas.id/web-component/Button_Download%20Google%20Play_Dark%20Mode.svg'
+      : 'https://cdn-www.kompas.id/web-component/Button_Download%20Google%20Play_Light%20Mode.svg'
 
     const appStoreBadgeSrc = isDark
-      ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20App%20Store_Dark%20Mode.svg'
-      : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20App%20Store_Light%20Mode.svg'
+      ? 'https://cdn-www.kompas.id/web-component/Button_Download%20App%20Store_Dark%20Mode.svg'
+      : 'https://cdn-www.kompas.id/web-component/Button_Download%20App%20Store_Light%20Mode.svg'
 
     return html`
       <div
@@ -1094,7 +1102,7 @@ export class KompasIdPaywallBody extends LitElement {
           <div class="w-full flex justify-center">
             <div class="w-3/4 lg:w-1/2">
               <img
-                src="https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/kompas-free-trial.png"
+                src="https://cdn-www.kompas.id/web-component/kompas-free-trial.png"
                 alt="Free Trial"
               />
             </div>
@@ -1113,7 +1121,7 @@ export class KompasIdPaywallBody extends LitElement {
           >
             <div class="w-1/3 flex mr-6">
               <img
-                src="https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/free-trial-qr-code.png"
+                src="https://cdn-www.kompas.id/web-component/free-trial-qr-code.png"
                 alt="QR Code Deep Link"
               />
             </div>
@@ -1122,8 +1130,7 @@ export class KompasIdPaywallBody extends LitElement {
                 ? 'text-dark-7'
                 : 'text-grey-600'}"
             >
-              Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR
-              dengan ponsel atau tablet untuk mengunduh aplikasi.
+              ${this.packages.freeTrial?.desktopText}
             </div>
           </div>
           <div
@@ -1131,8 +1138,7 @@ export class KompasIdPaywallBody extends LitElement {
               ? 'text-dark-7'
               : 'text-grey-600'}"
           >
-            Dapatkan akses gratis selama 3 hari ke konten dan fitur premium
-            Kompas.id di aplikasi.
+            ${this.packages.freeTrial?.mobileText}
           </div>
           <div class="lg:flex flex justify-center mt-4 hidden lg:block gap-4">
             <a
@@ -1162,9 +1168,7 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private freeTrialPackageSection() {
-    const packages = this.paywallData?.packages ?? ({} as Packages)
-
-    if (packages.freeTrial) {
+    if (this.packages.freeTrial) {
       return html`
         <div
           class="flex flex-wrap items-center justify-between py-3 px-4 rounded-lg md:mx-0 w-full h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4 ${this
@@ -1182,7 +1186,7 @@ export class KompasIdPaywallBody extends LitElement {
               <p
                 class="text-xs ${this.isDark ? 'text-dark-7' : 'text-grey-600'}"
               >
-                ${packages.freeTrial}
+                ${this.packages.freeTrial?.packageText}
               </p>
             </div>
           </div>