@kompasid/lit-web-components 0.4.0 → 0.4.2

package/src/components/kompasid-paywall-video/KompasPaywallVideo.ts

@@ -1,12 +1,21 @@
 /* eslint-disable class-methods-use-this */
-import { html, css, LitElement } from 'lit'
+import { html, css, LitElement, nothing } from 'lit'
 import { property, customElement, state } from 'lit/decorators.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
 import { deviceType } from '../../utils/deviceType.js'
+import { formatRupiah } from '../../utils/formatRupiah.js'
+import { addGoogleFonts } from '../../utils/googleFont.js'
 
 @customElement('kompasid-paywall-video')
 export class KompasPaywallVideo extends LitElement {
-  static styles = [css``, TWStyles]
+  static styles = [
+    css`
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+    `,
+    TWStyles,
+  ]
 
   /**
    * Props
@@ -28,11 +37,9 @@ export class KompasPaywallVideo extends LitElement {
    * prop page_domain = Page Domain
    * prop metered_wall_type = The type of Metered Wall
    * prop metered_wall_balance = The balance of their metered wall
+   * prop type = The type of video paywall
    */
 
-  @state() private subscriptionUrl: string =
-    'https://www.kompas.id/berlangganan'
-
   @property({ type: Boolean }) isLogin = false
   @property({ type: String }) paywall_location = ''
   @property({ type: String }) paywall_subscription_package = ''
@@ -49,24 +56,41 @@ export class KompasPaywallVideo extends LitElement {
   @property({ type: String }) tracker_page_domain = ''
   @property({ type: String }) tracker_metered_wall_type = ''
   @property({ type: Number }) tracker_metered_wall_balance = 0
+  @property({ type: String }) type: 'article' | 'homepage' = 'article'
+
+  /**
+   * State
+   */
+
+  @state() private subscriptionUrl: string =
+    'https://www.kompas.id/berlangganan'
+  @state() private checkoutHost: string = 'https://checkoutv2.kompas.id'
+
+  /**
+   * Component
+   */
 
-  private isLoginComponent() {
+  private regulerRegistrationSection() {
     return html`
-      <div>
-        ${this.sendDataLayeronBerlangganan()}
-        <h5
-          class="leading-6 text-white text-center text-base md:text-xl max-w-2xl"
-        >
-          Akses konten premium Anda bulan ini sudah habis. Aktifkan langganan
-          untuk akses tanpa batas, mulai dari
-          <span class="font-bold">Rp50.000/bulan.</span>
-        </h5>
-        <div class="flex justify-between mt-4">
+      <div
+        class="flex flex-col text-white text-sm md:text-base items-center justify-center"
+      >
+        <div>
+          <button
+            @click=${() => this.redirectToRegister('Daftar')}
+            class="text-blue-300 font-bold"
+          >
+            Daftar
+          </button>
+          <span> untuk akses konten gratis.</span>
+        </div>
+        <div>
+          <span>Sudah punya akun? </span>
           <button
-            @click=${() => this.redirectToBerlangganan()}
-            class="bg-green-500 rounded px-4 py-1.5 text-sm text-white font-bold"
+            @click=${this.redirectToLogin}
+            class="text-blue-300 font-bold"
           >
-            Berlangganan
+            Masuk<span class="text-white font-normal">.</span>
           </button>
         </div>
       </div>
@@ -75,73 +99,88 @@ export class KompasPaywallVideo extends LitElement {
 
   private defaultComponent() {
     return html`
-      <div>
-        ${this.sendDataLayeronNonLogin()} ${this.sendDataLayeronBerlangganan()}
+      <div class="flex flex-col items-center space-y-2 md:space-y-4">
+        ${this.sendDataLayeronNonLogin()} ${this.sendDataLayerPaywallViewed()}
         <h5
-          class="leading-6 text-white text-center text-base md:text-xl max-w-xl"
+          class="leading-5 md:leading-6 w-[296px] md:w-[400px] text-white text-center text-base mb-2 md:mb-0 ${!this
+            .isLogin &&
+          !this.isArticle &&
+          'mb-0'} md:text-xl max-w-xl"
         >
-          Langganan untuk akses ke seluruh konten premium, mulai dari
-          <span class="font-bold">Rp50.000/bulan.</span>
+          ${this.isArticle
+            ? 'Langganan untuk lanjut menonton video'
+            : 'Langganan sekarang untuk akses seluruh konten Kompas.id'}
         </h5>
-        <div class="flex justify-center mt-4 space-x-3">
-          <button
-            @click=${() => this.redirectToRegister('Masuk')}
-            class="rounded text-sm text-white px-4 py-1.5 ring-1 ring-grey-100"
-          >
-            Masuk
-          </button>
-          <button
-            @click=${() => this.redirectToBerlangganan()}
-            class="bg-green-500 rounded px-4 py-1.5 text-sm text-white font-bold"
-          >
-            Berlangganan
-          </button>
-        </div>
-        <p
-          class="text-center text-sm leading-4 text-white mt-6 max-w-xs md:max-w-none"
+        <button
+          @click=${this.redirectToSelectedPackage}
+          class="bg-green-500 rounded md:rounded-lg h-8 md:h-12 px-4 md:px-6 text-sm md:text-lg text-white font-bold leading-[18px]"
         >
-          Dapatkan 5 konten premium gratis tiap bulan!
-          <button
-            @click=${() => this.redirectToRegister('Coba Sekarang')}
-            target="_blank"
-            class="text-blue-300 font-bold cursor-pointer"
-          >
-            Coba Sekarang
-          </button>
-        </p>
+          Langganan ${formatRupiah(this.showPackage.price)}
+          /${this.generateCopyDuration(this.showPackage.durationType)}
+        </button>
+        <button
+          @click=${this.redirectToBerlangganan}
+          class="text-sm md:text-lg leading-[22px] text-white font-bold underline ${!this
+            .isLogin && this.isArticle
+            ? 'pb-3'
+            : 'pb-2'} md:pb-4"
+        >
+          Paket Lainnya
+        </button>
+        ${!this.isLogin ? this.regulerRegistrationSection() : nothing}
       </div>
     `
   }
 
-  private sendDataLayeronNonLogin = (): void => {
-    window.dataLayer.push({
-      event: 'registrationOfferimppression',
-      interface: deviceType(),
-    })
-  }
+  /**
+   * Data Layer
+   */
 
-  private sendDataLayeronBerlangganan = (): void => {
-    window.dataLayer.push({
-      event: 'paywall_viewed',
+  private sendDataLayer(event: string): void {
+    const baseData = {
+      event,
       paywall_location: this.paywall_location,
-      paywall_subscription_package: this.paywall_subscription_package,
-      paywall_subscription_id: this.paywall_subscription_id,
-      paywall_subscription_price: this.paywall_subscription_price,
-      paywall_position: this.paywall_position,
-      page_type: this.tracker_page_type,
-      content_id: this.tracker_content_id,
-      content_title: this.tracker_content_title,
-      content_categories: this.tracker_content_categories,
-      content_type: this.tracker_content_type,
+      paywall_subscription_package:
+        this.paywall_subscription_package || this.showPackage.title,
+      paywall_subscription_id:
+        this.paywall_subscription_id || this.showPackage.id,
+      paywall_subscription_price:
+        this.paywall_subscription_price || this.showPackage.price,
+      paywall_position: this.paywall_position || this.showPackage.position,
       user_type: this.tracker_user_type,
       subscription_status: this.tracker_subscription_status,
       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,
-    })
+    }
+
+    const data = this.isArticle
+      ? {
+          ...baseData,
+          page_type: this.tracker_page_type,
+          content_id: this.tracker_content_id,
+          content_title: this.tracker_content_title,
+          content_categories: this.tracker_content_categories,
+          content_type: this.tracker_content_type,
+        }
+      : baseData
+
+    window.dataLayer.push(data)
+  }
+
+  private sendDataLayerPaywallViewed(): void {
+    this.sendDataLayer('paywall_viewed')
   }
 
-  private sendDataLayeronButtonLogin = (triggerClick: string): void => {
+  private sendDataLayerSubscribeButtonClicked(): void {
+    this.sendDataLayer('subscribe_button_clicked')
+  }
+
+  private sendDataLayerOtherPackagesClicked(): void {
+    this.sendDataLayer('other_packages_clicked')
+  }
+
+  private sendDataLayeronButtonLogin(triggerClick: string): void {
     window.dataLayer.push({
       event: 'registrationOfferClick',
       interface: deviceType(),
@@ -149,46 +188,95 @@ export class KompasPaywallVideo extends LitElement {
     })
   }
 
-  private sendDataLayeronButtonBerlangganan = (): void => {
+  private sendDataLayeronNonLogin(): void {
     window.dataLayer.push({
-      event: 'subscribe_button_clicked',
-      paywall_location: this.paywall_location,
-      paywall_subscription_package: this.paywall_subscription_package,
-      paywall_subscription_id: this.paywall_subscription_id,
-      paywall_subscription_price: this.paywall_subscription_price,
-      paywall_position: this.paywall_position,
-      page_type: this.tracker_page_type,
-      content_id: this.tracker_content_id,
-      content_title: this.tracker_content_title,
-      content_categories: this.tracker_content_categories,
-      content_type: this.tracker_content_type,
-      user_type: this.tracker_user_type,
-      subscription_status: this.tracker_subscription_status,
-      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,
+      event: 'registrationOfferimppression',
+      interface: deviceType(),
     })
   }
 
+  /**
+   * Getter
+   */
+
+  get isArticle() {
+    return this.type === 'article'
+  }
+
+  // temporary mocking data package for component and dataLayer
+  get showPackage() {
+    return {
+      duration: 1,
+      durationType: 3,
+      id: '9802035',
+      link: 'kdp?productId=9802035&referrer=https%3A%2F%2Fwww.kompas.cloud%2Fberlangganan',
+      price: 50000,
+      position: 1,
+      title: 'Kompas Digital Premium 1 Bulan',
+    }
+  }
+
+  /**
+   * Logic Function
+   */
+
   private redirectToRegister(triggerClick: string): void {
     this.sendDataLayeronButtonLogin(triggerClick)
     const registerHost: string = 'https://account.kompas.id/register'
     const nextParams: string = encodeURIComponent(window.location.href)
-    const directUrlRegister: string = `${registerHost}?next=${nextParams}?status=sukses_login&status_login=login`
+    const directUrlRegister: string = `${registerHost}?next=${nextParams}?status=sukses_login&status_login=login&loc=video_paywall`
     window.open(directUrlRegister, '_blank')
   }
 
+  private redirectToLogin(): void {
+    const loginHost: string = 'https://account.kompas.id/login'
+    const nextParams: string = encodeURIComponent(window.location.href)
+    const directUrlLogin: string = `${loginHost}?next=${nextParams}&loc=video_paywall`
+    window.open(directUrlLogin, '_blank')
+  }
+
+  private redirectToSelectedPackage(): void {
+    const url = `${this.checkoutHost}/${this.showPackage.link}&source=${this.type}`
+    this.sendDataLayerSubscribeButtonClicked()
+    window.open(url, '_blank')
+  }
+
   private redirectToBerlangganan(): void {
-    this.sendDataLayeronButtonBerlangganan()
+    this.sendDataLayerOtherPackagesClicked()
     window.open(this.subscriptionUrl, '_blank')
   }
 
+  private generateCopyDuration(type: number): string {
+    switch (type) {
+      case 1:
+        return 'hari'
+      case 2:
+        return 'minggu'
+      case 3:
+        return 'bulan'
+      case 4:
+        return 'tahun'
+      default:
+        return ''
+    }
+  }
+
+  override async connectedCallback() {
+    super.connectedCallback()
+    await this.updateComplete
+    addGoogleFonts(['pt-sans'])
+  }
+
+  /**
+   * Render Statement
+   */
+
   render() {
     return html`
       <div
-        class="radius absolute z-20 bg-black bg-opacity-50 p-4 top-0 bottom-0 left-0 flex flex-col w-full h-full justify-center items-center"
+        class="radius absolute z-20 bg-black bg-opacity-75 p-4 top-0 bottom-0 left-0 flex flex-col w-full h-full justify-center items-center"
       >
-        ${this.isLogin ? this.isLoginComponent() : this.defaultComponent()}
+        ${this.defaultComponent()}
       </div>
     `
   }

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

@@ -36,6 +36,7 @@ Contoh Penerapan:
 | `tracker_page_type`            | `tracker_page_type`            | prop page_type = Type of the page                                                        | `string`  | `''`    |
 | `tracker_subscription_status`  | `tracker_subscription_status`  | prop subscription_status = Status of their subscription                                  | `string`  | `''`    |
 | `tracker_user_type`            | `tracker_user_type`            | prop user_type = Type of user based on their subscription                                | `string`  | `''`    |
+| `type`            | `type`            | prop type = The type of video paywall                               | `"article" \| "homepage"`  | `"article"`    |
 
 ----------------------------------------------
 

package/src/utils/formatRupiah.ts

@@ -0,0 +1,6 @@
+export const formatRupiah = (value: number) => {
+  const roundedValue = Math.round(value)
+  return `Rp ${roundedValue
+    .toString()
+    .replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')}`
+}

package/src/utils/googleFont.ts

@@ -0,0 +1,19 @@
+export const addGoogleFonts = (fonts: string[]) => {
+  const fontMap: { [key: string]: string } = {
+    lora: 'https://fonts.googleapis.com/css2?family=Lora:wght@700&display=swap',
+    'pt-sans':
+      'https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap',
+  }
+
+  fonts.forEach(font => {
+    const fontCssUrl = fontMap[font]
+    const existingElement = document.querySelector(`link[href="${fontCssUrl}"]`)
+
+    if (!existingElement && fontCssUrl) {
+      const newElement = document.createElement('link')
+      newElement.setAttribute('rel', 'stylesheet')
+      newElement.setAttribute('href', fontCssUrl)
+      document.head.appendChild(newElement)
+    }
+  })
+}