@kompasid/lit-web-components 0.1.0

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

@@ -0,0 +1,54 @@
+# kompas-paywall-body
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                       | Attribute                      | Description | Type                    | Default     |
+| ------------------------------ | ------------------------------ | ----------- | ----------------------- | ----------- |
+| `countdownArticle`             | `countdown-article`            |             | `number`                | `0`         |
+| `isLogin`                      | `is-login`                     |             | `boolean`               | `false`     |
+| `paywallData`                  | --                             |             | `PaywallProduct`        | `undefined` |
+| `paywall_location`             | `paywall_location`             |             | `string`                | `''`        |
+| `paywall_position`             | `paywall_position`             |             | `number`                | `0`         |
+| `paywall_subscription_id`      | `paywall_subscription_id`      |             | `number`                | `0`         |
+| `paywall_subscription_package` | `paywall_subscription_package` |             | `string`                | `''`        |
+| `paywall_subscription_price`   | `paywall_subscription_price`   |             | `number`                | `0`         |
+| `slug`                         | `slug`                         |             | `string`                | `""`        |
+| `subscriptionStatus`           | `subscription-status`          |             | `string`                | `''`        |
+| `swgEnable`                    | `swg-enable`                   |             | `boolean`               | `false`     |
+| `theme`                        | `theme`                        |             | `string`                | `''`        |
+| `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_epaper_edition`       | `tracker_epaper_edition`       |             | `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`                | `''`        |
+| `type`                         | `type`                         |             | `"epaper" \| "reguler"` | `'reguler'` |
+| `userGuid`                     | `user-guid`                    |             | `string`                | `''`        |
+
+
+## Dependencies
+
+### Used by
+
+ - [kompas-paywall](../kompas-paywall)
+
+### Graph
+```mermaid
+graph TD;
+  kompas-paywall --> kompas-paywall-body
+  style kompas-paywall-body fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Terbikin oleh tim front-end kompas.id*

package/src/components/kompas-paywall-information-header/KompasPaywallInformationHeader.ts

@@ -0,0 +1,29 @@
+/* eslint-disable class-methods-use-this */
+import { html, css, LitElement } from 'lit'
+import { property, customElement } from 'lit/decorators.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+
+@customElement('kompas-paywall-information-header')
+export class KompasPaywallInformationHeader extends LitElement {
+  static styles = [css``, TWStyles]
+
+  @property({ type: String }) text = ''
+  @property({ type: String }) theme = ''
+
+  get isDark() {
+    return this.theme === 'dark'
+  }
+
+  render() {
+    return html`
+      <div class="my-4 md:my-8">
+        <h5
+          class="text-base text-center md:text-xl ${this.theme === 'dark' &&
+          'text-white'} font-bold font-serif"
+        >
+          ${this.text}
+        </h5>
+      </div>
+    `
+  }
+}

package/src/components/kompas-paywall-information-header/readme.md

@@ -0,0 +1,30 @@
+# kompas-paywall-information-header
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type     | Default |
+| -------- | --------- | ----------- | -------- | ------- |
+| `text`   | `text`    |             | `string` | `''`    |
+
+
+## Dependencies
+
+### Used by
+
+ - [kompas-paywall](../kompas-paywall)
+
+### Graph
+```mermaid
+graph TD;
+  kompas-paywall --> kompas-paywall-information-header
+  style kompas-paywall-information-header fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Terbikin oleh tim front-end kompas.id*

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

@@ -0,0 +1,194 @@
+/* eslint-disable class-methods-use-this */
+import { html, css, LitElement } from 'lit'
+import { property, customElement, state } from 'lit/decorators.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { deviceType } from '../../utils/deviceType.js'
+
+@customElement('kompas-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
+   */
+
+  @state() private loginUrl: string = 'https://account.kompas.id/login'
+  @state() private subscriptionUrl: string =
+    'https://www.kompas.id/berlangganan'
+  @state() private registerUrl: string = 'https://account.kompas.id/register'
+
+  @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
+
+  private isLoginComponent() {
+    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">
+          <button
+            @click=${() => this.redirectToBerlangganan()}
+            class="bg-green-500 rounded px-4 py-1.5 text-sm text-white font-bold"
+          >
+            Berlangganan
+          </button>
+        </div>
+      </div>
+    `
+  }
+
+  private defaultComponent() {
+    return html`
+      <div>
+        ${this.sendDataLayeronNonLogin()} ${this.sendDataLayeronBerlangganan()}
+        <h5
+          class="leading-6 text-white text-center text-base md:text-xl max-w-xl"
+        >
+          Langganan untuk akses ke seluruh konten premium, mulai dari
+          <span class="font-bold">Rp50.000/bulan.</span>
+        </h5>
+        <div class="flex justify-center mt-4 space-x-3">
+          <button
+            @click=${() => this.redirectToLogin('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"
+        >
+          Dapatkan 5 konten premium gratis tiap bulan!
+          <button
+            @click=${() => this.redirectToLogin('Coba Sekarang')}
+            target="_blank"
+            class="text-blue-300 font-bold cursor-pointer"
+          >
+            Coba Sekarang
+          </button>
+        </p>
+      </div>
+    `
+  }
+
+  private sendDataLayeronNonLogin = (): void => {
+    window.dataLayer.push({
+      event: 'registrationOfferimppression',
+      interface: deviceType(),
+    })
+  }
+
+  private sendDataLayeronBerlangganan = (): void => {
+    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,
+      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,
+    })
+  }
+
+  private sendDataLayeronButtonLogin = (triggerClick: string): void => {
+    window.dataLayer.push({
+      event: 'registrationOfferClick',
+      interface: deviceType(),
+      buttonClicked: triggerClick,
+    })
+  }
+
+  private sendDataLayeronButtonBerlangganan = (): 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,
+    })
+  }
+
+  private redirectToLogin(triggerClick: string): void {
+    this.sendDataLayeronButtonLogin(triggerClick)
+    window.open(this.loginUrl, '_blank')
+  }
+
+  private redirectToBerlangganan(): void {
+    this.sendDataLayeronButtonBerlangganan()
+    window.open(this.subscriptionUrl, '_blank')
+  }
+
+  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"
+      >
+        ${this.isLogin ? this.isLoginComponent() : this.defaultComponent()}
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,46 @@
+# kompas-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`).
+
+### Elemen
+```javascript
+    <div style="position:relative">  
+      <your-content-component/>
+      <kompas-paywall-video />
+    </div>
+```
+
+Contoh Penerapan:
+
+<img width="500" src="https://user-images.githubusercontent.com/43400392/198214862-16f0f0b1-d179-48b8-9e30-a7667ede1a95.jpg">
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                       | Attribute                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Type      | Default |
+| ------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
+| `isLogin`                      | `is-login`                     | 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 | `boolean` | `false` |
+| `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*

package/src/index.ts

@@ -0,0 +1,11 @@
+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'
+
+declare global {
+  interface Window {
+    gtag: (...args: any[]) => void
+    dataLayer: Record<string, any>
+  }
+}

package/src/utils/deviceType.ts

@@ -0,0 +1,11 @@
+const deviceType = (): string => {
+  if (window.innerWidth <= 768) {
+    return 'Mobile'
+  }
+  if (window.innerWidth > 768 && window.innerWidth <= 1024) {
+    return 'Tab'
+  }
+  return 'Desktop'
+}
+
+export { deviceType }

package/src/utils/fontawesome-setup.ts

@@ -0,0 +1,40 @@
+import {
+  library,
+  config,
+  icon,
+  IconName,
+  IconPrefix,
+} from '@fortawesome/fontawesome-svg-core'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+import { far } from '@fortawesome/free-regular-svg-icons'
+import { fab } from '@fortawesome/free-brands-svg-icons'
+
+config.autoAddCss = false
+library.add(fas, far, fab)
+
+export function getFontAwesomeIcon(
+  prefix: string,
+  iconName: string,
+  width: number = 16,
+  height: number = 16
+): string {
+  const iconObject = icon({
+    prefix: prefix as IconPrefix,
+    iconName: iconName as IconName,
+  })
+
+  if (iconObject) {
+    const htmlString = iconObject.html.join('')
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(htmlString, 'image/svg+xml')
+    const svgElement = doc.querySelector('svg')
+
+    if (svgElement) {
+      svgElement.setAttribute('width', width.toString())
+      svgElement.setAttribute('height', height.toString())
+      return svgElement.outerHTML
+    }
+  }
+
+  return ''
+}