@kompasid/lit-web-components 0.7.6 → 0.7.8

package/src/components/kompasid-freewall/KompasFreewall.ts

@@ -1,7 +1,7 @@
 import { html, css, LitElement, nothing } from 'lit'
 import { property, customElement, state } from 'lit/decorators.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
-import { PackageData } from './types.js'
+import { JsonPackageData, PackageData } from './types.js'
 import { redirectToCheckout } from '../../utils/cta.js'
 import '../kompasid-freewall-head/KompasFreewallHead.js'
 import '../kompasid-freewall-body/KompasFreewallBody.js'
@@ -85,8 +85,10 @@ export class KompasFreewall extends LitElement {
    * State
    */
 
+  @state() private isLoading: Boolean = true
   @state() private isExpand: boolean = true
   @state() private packageData: PackageData = {} as PackageData
+  @state() private jsonPackageData: JsonPackageData = {} as JsonPackageData
 
   /**
    * Getter
@@ -166,7 +168,7 @@ export class KompasFreewall extends LitElement {
   private onSubscriptionClick() {
     this.sendDataLayerSubscribeButtonClicked()
     redirectToCheckout({
-      link: `${this.packageData.link}${this.packageData.referrer}`,
+      link: `${this.jsonPackageData.subscriptionUrl}&referrer=${this.packageData.referrer}`,
       source: this.type,
     })
   }
@@ -183,40 +185,70 @@ export class KompasFreewall extends LitElement {
 
     const originHost: string = encodeURIComponent(window.location.href)
     this.packageData = { ...this.showPackage, referrer: originHost }
+    this.getFreewallData()
 
     this.sendDataLayerPaywallViewed()
   }
 
+  async getFreewallData() {
+    try {
+      const response = await fetch(
+        'https://cdn-www.kompas.id/web-component/freewall.json'
+      )
+      const json = await response.json()
+      this.jsonPackageData = {
+        headCopyCollapse: json.headCopyCollapse,
+        headCopyExpand: json.headCopyExpand,
+        subscriptionUrl: json.subscriptionUrl,
+        subscriptionTitle: json.subscriptionTitle,
+        subscriptionTitleGuest: json.subscriptionTitleGuest,
+        subscriptionDescription: json.subscriptionDescription,
+        subscriptionButtonText: json.subscriptionButtonText,
+        registerTitle: json.registerTitle,
+        registerDescription: json.registerDescription,
+        registerButtonText: json.registerButtonText,
+      }
+    } catch (error) {
+      throw Error('Failed to get metered paywall data')
+    } finally {
+      this.isLoading = false
+    }
+  }
+
   /**
    * Render Statement
    */
 
   render() {
-    return html`
-      <div class="sticky bottom-0 w-full h-full z-20 top-shadow">
-        <div
-          class="flex flex-col w-full bg-blue-100 justify-center ${this
-            .isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24"
-        >
-          <kompasid-freewall-head
-            .expand=${this.isExpand}
-            .type=${this.type}
-            .head_copy_expand=${this.head_copy_expand}
-            .head_copy_collapse=${this.head_copy_collapse}
-            .toggleExpand=${() => this.toggleExpand()}
-            .onSubscriptionClick=${() => this.onSubscriptionClick()}
-            .packageData=${this.packageData}
-          ></kompasid-freewall-head>
-          ${this.isExpand
-            ? html`<kompasid-freewall-body
+    return !this.isLoading
+      ? html`
+          <div class="sticky bottom-0 w-full h-full z-20 top-shadow">
+            <div
+              class="flex flex-col w-full bg-blue-100 justify-center ${this
+                .isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24"
+            >
+              <kompasid-freewall-head
+                .expand=${this.isExpand}
                 .type=${this.type}
+                .head_copy_expand=${this.jsonPackageData.headCopyExpand}
+                .head_copy_collapse=${this.jsonPackageData.headCopyCollapse}
+                .toggleExpand=${() => this.toggleExpand()}
                 .onSubscriptionClick=${() => this.onSubscriptionClick()}
                 .packageData=${this.packageData}
-                ?isLogin=${this.isLogin}
-              ></kompasid-freewall-body>`
-            : nothing}
-        </div>
-      </div>
-    `
+                .jsonPackageData=${this.jsonPackageData}
+              ></kompasid-freewall-head>
+              ${this.isExpand
+                ? html`<kompasid-freewall-body
+                    .type=${this.type}
+                    .onSubscriptionClick=${() => this.onSubscriptionClick()}
+                    .packageData=${this.packageData}
+                    .jsonPackageData=${this.jsonPackageData}
+                    ?isLogin=${this.isLogin}
+                  ></kompasid-freewall-body>`
+                : nothing}
+            </div>
+          </div>
+        `
+      : nothing
   }
 }

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

@@ -45,6 +45,31 @@
 | `paywall_subscription_price`   | `paywall_subscription_price`   | property paywall_subscription_price is the price of the subscription package viewed by user             | `number`                | `0`         |
 | `paywall_position`             | `paywall_position`             | property paywall_position is the position of the subscription package viewed by user             | `number`                | `1`         |
 
+
+## JSON ([https://cdn-www.kompas.id/web-component/freewall.json](https://cdn-www.kompas.id/web-component/freewall.json))
+Example:
+
+```json
+{
+  "headCopyCollapse": "Akses seluruh konten dan fitur Kompas.id dengan berlangganan.",
+  "headCopyExpand": "Akses seluruh konten dan fitur Kompas.id dengan berlangganan.",
+  "subscriptionUrl": "kdp?productId=9802035",
+  "subscriptionTitle": "Dukung Jurnalisme Mencerahkan dengan Berlangganan",
+  "subscriptionTitleGuest": "Mulai Berlangganan",
+  "subscriptionDescription": [
+    "Akses seluruh konten Kompas.id di web & aplikasi",
+    "ePaper hingga 30 edisi terakhir",
+    "Buku digital tiap bulannya di aplikasi"
+  ],
+  "subscriptionButtonText": "Langganan Rp 50.000 / bulan",
+  "registerTitle": "Daftar Akun Gratis",
+  "registerDescription": [
+    "Akses ke 3 artikel berbayar gratis tiap bulan"
+  ],
+  "registerButtonText": "Daftar Gratis"
+}
+```
+
 ## Dependencies
 
 ### Depends on

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

@@ -8,3 +8,16 @@ export interface PackageData {
   title: string
   referrer: string
 }
+
+export interface JsonPackageData {
+  headCopyCollapse: string
+  headCopyExpand: string
+  subscriptionUrl: string
+  subscriptionTitle: string
+  subscriptionTitleGuest: string
+  subscriptionDescription: string[]
+  subscriptionButtonText: string
+  registerTitle: string
+  registerDescription: string[]
+  registerButtonText: string
+}

package/src/components/kompasid-freewall-body/KompasFreewallBody.ts

@@ -2,9 +2,7 @@ import { html, css, LitElement, nothing } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
 import { addGoogleFonts } from '../../utils/googleFont.js'
-import { formatRupiah } from '../../utils/formatRupiah.js'
-import { generateCopyDuration } from '../../utils/generateCopyDuration.js'
-import { PackageData } from '../kompasid-freewall/types.js'
+import { JsonPackageData, PackageData } from '../kompasid-freewall/types.js'
 import { faCheck } from '../../../assets/font-awesome.js'
 import { redirectToRegister } from '../../utils/cta.js'
 
@@ -93,6 +91,8 @@ export class KompasFreewallBody extends LitElement {
   @property({ type: String }) type: 'article' | 'landing_page' = 'article'
   @property() onSubscriptionClick = () => {}
   @property({ type: Object }) packageData: PackageData = {} as PackageData
+  @property({ type: Object }) jsonPackageData: JsonPackageData =
+    {} as JsonPackageData
 
   description = [
     'Akses seluruh konten Kompas.id di web & aplikasi',
@@ -134,8 +134,8 @@ export class KompasFreewallBody extends LitElement {
                 .isLogin && 'w-60 md:w-full'} text-grey-600"
             >
               ${this.isLogin
-                ? 'Dukung Jurnalisme Mencerahkan dengan Berlangganan'
-                : 'Mulai Berlangganan'}
+                ? this.jsonPackageData.subscriptionTitle
+                : this.jsonPackageData.subscriptionTitleGuest}
             </h5>
             ${this.descriptionSection()}
           </div>
@@ -145,8 +145,7 @@ export class KompasFreewallBody extends LitElement {
               .isLogin &&
             'md:w-[370px]'} md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
           >
-            Langganan ${formatRupiah(this.packageData.price)}
-            /${generateCopyDuration(this.packageData.durationType)}
+            ${this.jsonPackageData.subscriptionButtonText}
           </button>
         </div>
         <div id="ribbon-container">
@@ -169,22 +168,26 @@ export class KompasFreewallBody extends LitElement {
           <h5
             class="font-lora text-lg md:text-xl font-bold leading-[30px] text-grey-600"
           >
-            Daftar Akun Gratis
+            ${this.jsonPackageData.registerTitle}
           </h5>
-          <div
-            class="flex items-start lg:items-center mt-3 mb-4 md:mt-4 md:mb-5"
-          >
-            <div class="mt-1 lg:mt-0">${faCheck()}</div>
-            <h6 class="text-base text-grey-600 ml-1">
-              Akses ke 3 artikel berbayar gratis tiap bulan
-            </h6>
+          <div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
+            ${this.jsonPackageData.registerDescription.map(
+              item => html`
+                <div class="flex items-start lg:items-center">
+                  <div class="mt-1 lg:mt-0">${faCheck()}</div>
+                  <h6 class="text-base text-grey-600 ml-1 text-start">
+                    ${item}
+                  </h6>
+                </div>
+              `
+            )}
           </div>
         </div>
         <button
           @click=${() => redirectToRegister('freewall')}
           class="bg-white border border-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-brand-1 font-bold leading-[18px]"
         >
-          Daftar Gratis
+          ${this.jsonPackageData.registerButtonText}
         </button>
       </div>
     `
@@ -192,7 +195,7 @@ export class KompasFreewallBody extends LitElement {
 
   private descriptionSection() {
     return html`<div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
-      ${this.description.map(
+      ${this.jsonPackageData.subscriptionDescription.map(
         item =>
           html`
             <div class="flex items-start lg:items-center">

package/src/components/kompasid-freewall-head/KompasFreewallHead.ts

@@ -4,9 +4,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
 import { addGoogleFonts } from '../../utils/googleFont.js'
 import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
-import { formatRupiah } from '../../utils/formatRupiah.js'
-import { generateCopyDuration } from '../../utils/generateCopyDuration.js'
-import { PackageData } from '../kompasid-freewall/types.js'
+import { JsonPackageData, PackageData } from '../kompasid-freewall/types.js'
 
 @customElement('kompasid-freewall-head')
 export class KompasFreewallHead extends LitElement {
@@ -33,6 +31,8 @@ export class KompasFreewallHead extends LitElement {
   @property() toggleExpand = () => {}
   @property() onSubscriptionClick = () => {}
   @property({ type: Object }) packageData: PackageData = {} as PackageData
+  @property({ type: Object }) jsonPackageData: JsonPackageData =
+    {} as JsonPackageData
 
   /**
    * Getter
@@ -73,8 +73,7 @@ export class KompasFreewallHead extends LitElement {
                   @click=${this.onSubscriptionClick}
                   class="bg-green-500 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
                 >
-                  Langganan ${formatRupiah(this.packageData.price)}
-                  /${generateCopyDuration(this.packageData.durationType)}
+                  ${this.jsonPackageData.subscriptionButtonText}
                 </button>`
               : nothing}
           </div>
@@ -95,8 +94,7 @@ export class KompasFreewallHead extends LitElement {
               @click=${this.onSubscriptionClick}
               class="bg-green-500 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
             >
-              Langganan ${formatRupiah(this.packageData.price)}
-              /${generateCopyDuration(this.packageData.durationType)}
+              ${this.jsonPackageData.subscriptionButtonText}
             </button>`
           : nothing}
       </div>

package/src/components/kompasid-header-account/KompasHeaderAccount.ts

@@ -130,7 +130,7 @@ export class KompasHeaderAccount extends LitElement {
         <div>
           <img
             class="header-account--membership-icon h-2.5 w-2.5"
-            src="https://d3w4qaq4xm1ncv.cloudfront.net/global-header/crown-royal-blue-60.svg"
+            src="https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg"
             alt="membership-crown-icon"
           />
         </div>

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

@@ -90,7 +90,7 @@ export class KompasHeaderAccountProfile extends LitElement {
         <div>
           <img
             class="header-account--membership-icon"
-            src="https://d3w4qaq4xm1ncv.cloudfront.net/global-header/crown-blue-10.svg"
+            src="https://cdn-www.kompas.id/global-header/crown-blue-10.svg"
             alt="membership-crown-icon"
           />
         </div>

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

@@ -1,6 +1,7 @@
-import { html, css, LitElement } from 'lit'
+import { html, css, LitElement, nothing } from 'lit'
 import { customElement, state, property } from 'lit/decorators.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
+import { PackageData } from './types.js'
 
 @customElement('kompasid-metered-paywall')
 export class KompasMeteredPaywall extends LitElement {
@@ -34,9 +35,14 @@ export class KompasMeteredPaywall extends LitElement {
     TWStyles,
   ]
 
-  @state() maxQuota: number = 3
+  @state() private isLoading: Boolean = true
+  @state() private maxQuota: number = 3
+  @state() private packageData: PackageData = {
+    subscriptionText: 'Langganan untuk akses tanpa batas',
+    buttonText: 'Langganan',
+    subscriptionUrl: 'https://www.kompas.id/berlangganan',
+  }
 
-  @state() subscriptionUrl: string = 'https://www.kompas.id/berlangganan'
   /**
    * Props
    */
@@ -85,27 +91,45 @@ export class KompasMeteredPaywall extends LitElement {
         <p>
           Anda memiliki sisa
           <b>${maxQuota - getCountdown} dari ${maxQuota}</b> artikel premium
-          gratis bulan ini. Langganan untuk akses tanpa batas
+          gratis bulan ini. ${this.packageData.subscriptionText}
         </p>
       `
     }
     return html`
       <p>
-        Anda sedang membaca <b>artikel gratis terakhir bulan ini.</b> Langganan
-        untuk akses tanpa batas
+        Anda sedang membaca <b>artikel gratis terakhir bulan ini.</b> ${this
+          .packageData.subscriptionText}
       </p>
     `
   }
 
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback()
-
+    this.getMeteredPaywallData()
     this.dataLayeronMeteredPaywall()
   }
 
+  async getMeteredPaywallData() {
+    try {
+      const response = await fetch(
+        'https://cdn-www.kompas.id/web-component/metered-paywall.json'
+      )
+      const json = await response.json()
+      this.packageData = {
+        subscriptionText: json.subscriptionText,
+        buttonText: json.buttonText,
+        subscriptionUrl: json.subscriptionUrl,
+      }
+    } catch (error) {
+      throw Error('Failed to get metered paywall data')
+    } finally {
+      this.isLoading = false
+    }
+  }
+
   private redirectToBerlangganan() {
     this.dataLayeronLanggananButton()
-    window.location.href = this.subscriptionUrl
+    window.location.href = this.packageData.subscriptionUrl
   }
 
   private dataLayeronLanggananButton() {
@@ -151,24 +175,28 @@ export class KompasMeteredPaywall extends LitElement {
   }
 
   render() {
-    return html`
-      <div class="sticky bottom-0 w-full h-full">
-        <div
-          class="flex flex-row w-full bg-blue-100 py-4 justify-center space-x-4 px-4 lg:px-0 bottom-0"
-        >
-          <div class="text-grey-600 text-sm md:text-lg self-center text-left">
-            ${this.getCountdownArticle()}
-          </div>
-          <div class="self-center">
-            <button
-              @click="${this.redirectToBerlangganan}"
-              class="bg-green-400 p-2 rounded-md font-bold text-grey-100 text-sm md:text-xl"
+    return !this.isLoading
+      ? html`
+          <div class="sticky bottom-0 w-full h-full">
+            <div
+              class="flex flex-row w-full bg-blue-100 py-4 justify-center space-x-4 px-4 lg:px-0 bottom-0"
             >
-              Langganan
-            </button>
+              <div
+                class="text-grey-600 text-sm md:text-lg self-center text-left"
+              >
+                ${this.getCountdownArticle()}
+              </div>
+              <div class="self-center">
+                <button
+                  @click="${this.redirectToBerlangganan}"
+                  class="bg-green-400 p-2 rounded-md font-bold text-grey-100 text-sm md:text-xl"
+                >
+                  ${this.packageData.buttonText}
+                </button>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-    `
+        `
+      : nothing
   }
 }

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

@@ -23,4 +23,15 @@
 
 ----------------------------------------------
 
+## JSON ([https://cdn-www.kompas.id/web-component/metered-paywall.json](https://cdn-www.kompas.id/web-component/metered-paywall.json))
+Example:
+
+```json
+{
+  "subscriptionText": "Langganan untuk akses tanpa batas",
+  "buttonText": "Langganan",
+  "subscriptionUrl": "https://www.kompas.id/berlangganan"
+}
+```
+
 *Terbikin oleh tim front-end kompas.id*

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

@@ -0,0 +1,5 @@
+export interface PackageData {
+  subscriptionText: string
+  buttonText: string
+  subscriptionUrl: string
+}

package/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts

@@ -235,7 +235,7 @@ export class KompasMeteredWallRegister extends LitElement {
         >
           <img
             alt="metered-wall-register"
-            src="https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png"
+            src="https://cdn-www.kompas.id/paywall-asset/paywall_ilustrasi3-03_1.png"
           />
         </div>
         <button
@@ -356,7 +356,7 @@ export class KompasMeteredWallRegister extends LitElement {
 
   private async loadData() {
     const req = await fetch(
-      `https://d3w4qaq4xm1ncv.cloudfront.net/assets/register_wall.json`
+      `https://cdn-www.kompas.id/assets/register_wall.json`
     )
 
     if (req.status !== 200) {

package/src/components/kompasid-metered-wall-register/readme.md

@@ -22,7 +22,7 @@ Anda perlu meletakkan _tag_ komponen `<kompas-metered-wall-register />` pada hal
 
 ### Catatan
 
-Text pada komponen ini dapat di update dengan mengubah value dari url https://d3w4qaq4xm1ncv.cloudfront.net/assets/register_wall.json
+Text pada komponen ini dapat di update dengan mengubah value dari url https://cdn-www.kompas.id/assets/register_wall.json
 
 Dengan format dibawah ini:
 

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

@@ -121,7 +121,14 @@ export class KompasPaywall extends LitElement {
     packages: {
       title: 'Sekali bayar, tanpa perpanjang otomatis',
       memberships: [],
-      freeTrial: 'untuk 3 hari pertama',
+      swgEnable: false,
+      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.',
+      },
     },
     payment: {
       desktop: [
@@ -249,7 +256,7 @@ export class KompasPaywall extends LitElement {
   async getPaywallData() {
     try {
       const response = await fetch(
-        'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/paywall.json'
+        'https://cdn-www.kompas.id/web-component/paywall.json'
       )
       const json = await response.json()
       this.paywallData = {
@@ -262,11 +269,12 @@ export class KompasPaywall extends LitElement {
         packages: {
           ...this.mockResult.packages,
           memberships: json[this.type].memberships,
+          swgEnable: json[this.type].swgEnable,
           freeTrial: json[this.type].freeTrial,
         },
       }
     } catch (error) {
-      throw Error('failed to get paywall data')
+      throw Error('Failed to get paywall data')
     } finally {
       this.isLoading = false
     }