@kompasid/lit-web-components 0.3.1 → 0.4.1

package/src/components/{kompas-paywall-body → kompasid-paywall-body}/readme.md

@@ -1,4 +1,4 @@
-# kompas-paywall-body
+# kompasid-paywall-body
 
 ## Properties
 
@@ -35,13 +35,13 @@
 
 ### Used by
 
- - [kompas-paywall](../kompas-paywall)
+ - [kompasid-paywall](../kompasid-paywall)
 
 ### Graph
 ```mermaid
 graph TD;
-  kompas-paywall --> kompas-paywall-body
-  style kompas-paywall-body fill:#f9f,stroke:#333,stroke-width:4px
+  kompasid-paywall --> kompasid-paywall-body
+  style kompasid-paywall-body fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/src/components/{kompas-paywall-information-header → kompasid-paywall-information-header}/KompasPaywallInformationHeader.ts

@@ -3,7 +3,7 @@ import { html, css, LitElement } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
 
-@customElement('kompas-paywall-information-header')
+@customElement('kompasid-paywall-information-header')
 export class KompasPaywallInformationHeader extends LitElement {
   static styles = [css``, TWStyles]
 

package/src/components/{kompas-paywall-information-header → kompasid-paywall-information-header}/readme.md

@@ -1,4 +1,4 @@
-# kompas-paywall-information-header
+# kompasid-paywall-information-header
 
 ## Properties
 
@@ -11,13 +11,13 @@
 
 ### Used by
 
- - [kompas-paywall](../kompas-paywall)
+ - [kompasid-paywall](../kompasid-paywall)
 
 ### Graph
 ```mermaid
 graph TD;
-  kompas-paywall --> kompas-paywall-information-header
-  style kompas-paywall-information-header fill:#f9f,stroke:#333,stroke-width:4px
+  kompasid-paywall --> kompasid-paywall-information-header
+  style kompasid-paywall-information-header fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

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

@@ -0,0 +1,269 @@
+/* eslint-disable class-methods-use-this */
+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'
+
+@customElement('kompasid-paywall-video')
+export class KompasPaywallVideo extends LitElement {
+  static styles = [css``, TWStyles]
+
+  /**
+   * Props
+   */
+  /**
+   * prop isLogin untuk menghandle apakah user sudah login atau belum
+   * 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
+   * prop paywall_subscription_price = The price of the subscriprtion package viewed by user
+   * prop paywall_position = The position of the subscription package viewed by user
+   * prop page_type = Type of the page
+   * prop content_id = ID of article (slug)
+   * prop content_type = Whether it's free article or paid article
+   * prop content_title = The title of article
+   * prop tracker_content_categories = The category of the content
+   * prop user_type = Type of user based on their subscription
+   * prop subscription_status = Status of their subscription
+   * 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
+   */
+
+  @property({ type: Boolean }) isLogin = false
+  @property({ type: String }) paywall_location = ''
+  @property({ type: String }) paywall_subscription_package = ''
+  @property({ type: String }) paywall_subscription_id = ''
+  @property({ type: Number }) paywall_subscription_price = 0
+  @property({ type: Number }) paywall_position = 0
+  @property({ type: String }) tracker_page_type = ''
+  @property({ type: String }) tracker_content_id = ''
+  @property({ type: String }) tracker_content_title = ''
+  @property({ type: String }) tracker_content_categories = ''
+  @property({ type: String }) tracker_content_type = ''
+  @property({ type: String }) tracker_user_type = ''
+  @property({ type: String }) tracker_subscription_status = ''
+  @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 regulerRegistrationSection() {
+    return html`
+      <div
+        class="flex flex-col text-white text-sm md:text-base font-sans 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.redirectToLogin}
+            class="text-blue-300 font-bold"
+          >
+            Masuk<span class="text-white font-normal">.</span>
+          </button>
+        </div>
+      </div>
+    `
+  }
+
+  private defaultComponent() {
+    return html`
+      <div class="flex font-sans flex-col items-center space-y-2 md:space-y-4">
+        ${this.sendDataLayeronNonLogin()} ${this.sendDataLayerPaywallViewed()}
+        <h5
+          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"
+        >
+          ${this.isArticle
+            ? 'Langganan untuk lanjut menonton video'
+            : 'Langganan sekarang untuk akses seluruh konten Kompas.id'}
+        </h5>
+        <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]"
+        >
+          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>
+    `
+  }
+
+  /**
+   * Data Layer
+   */
+
+  private sendDataLayer(event: string): void {
+    const baseData = {
+      event,
+      paywall_location: this.paywall_location,
+      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 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(),
+      buttonClicked: triggerClick,
+    })
+  }
+
+  private sendDataLayeronNonLogin(): void {
+    window.dataLayer.push({
+      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&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.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 ''
+    }
+  }
+
+  /**
+   * Render Statement
+   */
+
+  render() {
+    return html`
+      <div
+        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.defaultComponent()}
+      </div>
+    `
+  }
+}

package/src/components/{kompas-paywall-video → kompasid-paywall-video}/readme.md

@@ -1,13 +1,13 @@
-# kompas-paywall-video
+# kompasid-paywall-video
 
 ### Standar
-Anda perlu meletakkan _tag_ komponen `<kompas-paywall-video />` pada child component (komponen ini memiliki style `position: absolute` sehingga parent componentnya harus menggunakan style `position:relative`).
+Anda perlu meletakkan _tag_ komponen `<kompasid-paywall-video />` pada child component (komponen ini memiliki style `position: absolute` sehingga parent componentnya harus menggunakan style `position:relative`).
 
 ### Elemen
 ```javascript
     <div style="position:relative">  
       <your-content-component/>
-      <kompas-paywall-video />
+      <kompasid-paywall-video />
     </div>
 ```
 
@@ -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/index.ts

@@ -1,7 +1,7 @@
-export { KompasPaywall } from './components/kompas-paywall/KompasPaywall.js'
-export { KompasFooter } from './components/kompas-footer/KompasFooter.js'
-export { KompasPaywallVideo } from './components/kompas-paywall-video/KompasPaywallVideo.js'
-export { KompasMeteredPaywall } from './components/kompas-metered-paywall/KompasMeteredPaywall.js'
+export { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js'
+export { KompasFooter } from './components/kompasid-footer/KompasFooter.js'
+export { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js'
+export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js'
 
 declare global {
   interface Window {

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.')}`
+}