@kompasid/lit-web-components 0.1.0

package/src/components/kompas-footer/types.ts

@@ -0,0 +1,54 @@
+export interface Image {
+  alt: string
+  height: number
+  url: string
+  width: number
+}
+
+export interface Item {
+  image: Image
+  permalink: string
+  name: string
+  url: string
+}
+
+export interface Section<T> {
+  items: T[]
+  title?: string
+}
+
+export interface Phones {
+  number: number
+}
+
+export interface Sites {
+  text: string
+  permalink: string
+}
+
+export interface Items {
+  phones: Phones
+  title: string
+  text: string
+  sites: Sites
+  action: string
+  icon: string[]
+  label: string
+  color: string
+  name: string
+  url: string
+}
+
+export interface Universal {
+  itemsLeft: Item[]
+  itemsRight: Item[]
+}
+
+export interface Footer {
+  brands: Universal
+  address: Section<Items>
+  products: Section<Items>
+  contacts: Section<Items>
+  sosmed: Section<Items>
+  universal: Universal
+}

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

@@ -0,0 +1,174 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, state, property } from 'lit/decorators.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+
+@customElement('kompas-metered-paywall')
+export class KompasMeteredPaywall extends LitElement {
+  static styles = [
+    css`
+      .text-transition {
+        width: 100%;
+        height: 5rem;
+      }
+
+      .body {
+        position: sticky;
+        top: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      .icon {
+        height: 1rem;
+        color: #48bb78;
+      }
+
+      .icon.lg {
+        height: 1.5rem;
+      }
+
+      .icon.lg svg {
+        height: 1.5rem;
+      }
+    `,
+    TWStyles,
+  ]
+
+  @state() maxQuota: number = 5
+
+  @state() subscriptionUrl: string = 'https://www.kompas.id/berlangganan'
+  /**
+   * Props
+   */
+  /**
+   * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
+   * 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 ther subscription package viewed by user
+   * prop tracker_page_type = Type of the page
+   * prop tracker_content_id = ID of article (slug)
+   * prop tracker_content_type = Whether it's free article or paid article
+   * prop tracker_content_title = The title of article
+   * prop tracker_content_categories = The category of the content
+   * prop tracker_user_type = Type of user based on their subscription
+   * prop tracker_subscription_status = Status of their subscription
+   * prop tracker_page_domain = Page Domain
+   * prop tracker_metered_wall_type = The type of Metered Wall
+   * prop tracker_epaper_edition = The edition of epaper viewed by user
+   * prop tracker_metered_wall_balance = The balance of their metered wall
+   */
+  @property({ type: Number }) countdownArticle = 0
+  @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
+
+  private getCountdownArticle() {
+    const getCountdown = this.countdownArticle
+    const { maxQuota } = this
+
+    if (getCountdown > 0 && getCountdown < maxQuota) {
+      return html`
+        <p>
+          Anda memiliki sisa
+          <b>${maxQuota - getCountdown} dari ${maxQuota}</b> artikel premium
+          gratis bulan ini. Langganan untuk akses tanpa batas
+        </p>
+      `
+    }
+    return html`
+      <p>
+        Anda sedang membaca <b>artikel gratis terakhir bulan ini.</b> Langganan
+        untuk akses tanpa batas
+      </p>
+    `
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.dataLayeronMeteredPaywall()
+  }
+
+  private redirectToBerlangganan() {
+    this.dataLayeronLanggananButton()
+    window.location.href = this.subscriptionUrl
+  }
+
+  private dataLayeronLanggananButton() {
+    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 || 0,
+      paywall_position: this.paywall_position || 0,
+      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 || 'R',
+      subscription_status: this.tracker_subscription_status,
+      page_domain: this.tracker_page_domain || 'Kompas.id',
+      metered_wall_type: this.tracker_metered_wall_type || 'MP',
+      metered_wall_balance: (this.maxQuota - this.countdownArticle) + 1
+    })
+  }
+
+  private dataLayeronMeteredPaywall() {
+    window.dataLayer.push({
+      event: 'paywall_viewed',
+      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 || 0,
+      paywall_position: this.paywall_position || 0,
+      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 || 'R',
+      subscription_status: this.tracker_subscription_status,
+      page_domain: this.tracker_page_domain || 'Kompas.id',
+      metered_wall_type: this.tracker_metered_wall_type || 'MP',
+      metered_wall_balance: (this.maxQuota - this.countdownArticle) + 1
+    })
+  }
+
+  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"
+            >
+              Langganan
+            </button>
+          </div>
+        </div>
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,32 @@
+# kompas-paywall-meter
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                       | Attribute                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Type     | Default |
+| ------------------------------ | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
+| `countdownArticle`             | `countdown-article`            | prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca. 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 ther subscription package viewed by user prop tracker_page_type = Type of the page prop tracker_content_id = ID of article (slug) prop tracker_content_type = Whether it's free article or paid article prop tracker_content_title = The title of article prop tracker_content_categories = The category of the content prop tracker_user_type = Type of user based on their subscription prop tracker_subscription_status = Status of their subscription prop tracker_page_domain = Page Domain prop tracker_metered_wall_type = The type of Metered Wall prop tracker_epaper_edition = The edition of epaper viewed by user prop tracker_metered_wall_balance = The balance of their metered wall | `number` | `0`     |
+| `paywall_location`             | `paywall_location`             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `string` | `''`    |
+| `paywall_position`             | `paywall_position`             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `number` | `0`     |
+| `paywall_subscription_id`      | `paywall_subscription_id`      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `string` | `''`    |
+| `paywall_subscription_package` | `paywall_subscription_package` |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `string` | `''`    |
+| `paywall_subscription_price`   | `paywall_subscription_price`   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `number` | `0`     |
+| `tracker_content_categories`   | `tracker_content_categories`   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `string` | `''`    |
+| `tracker_content_id`           | `tracker_content_id`           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `string` | `''`    |
+| `tracker_content_title`        | `tracker_content_title`        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `string` | `''`    |
+| `tracker_content_type`         | `tracker_content_type`         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `string` | `''`    |
+| `tracker_metered_wall_balance` | `tracker_metered_wall_balance` |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `number` | `0`     |
+| `tracker_metered_wall_type`    | `tracker_metered_wall_type`    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `string` | `''`    |
+| `tracker_page_domain`          | `tracker_page_domain`          |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `string` | `''`    |
+| `tracker_page_type`            | `tracker_page_type`            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `string` | `''`    |
+| `tracker_subscription_status`  | `tracker_subscription_status`  |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `string` | `''`    |
+| `tracker_user_type`            | `tracker_user_type`            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `string` | `''`    |
+
+
+----------------------------------------------
+
+*Terbikin oleh tim front-end kompas.id*