@kompasid/lit-web-components 0.5.5 → 0.5.7

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

@@ -0,0 +1,349 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, state, property } from 'lit/decorators.js'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { meteredRegisterContent } from './types.js'
+
+@customElement('kompasid-metered-wall-register')
+export class KompasMeteredWallRegister extends LitElement {
+  static styles = [
+    css`
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+
+      .body {
+        position: sticky;
+        top: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      .btn-regis {
+        margin-left: 16px;
+        width: 127px;
+      }
+
+      .banner-content {
+        gap: 55px;
+        justify-content: space-between;
+      }
+
+      .cont-banner-content {
+        gap: 201px;
+      }
+
+      .expanded-btn {
+        width: 127px;
+      }
+    `,
+    TWStyles,
+  ]
+
+  /**
+   * state
+   */
+  /**
+   * state registerUrl untuk memberikan link kemana user akan dialihkan.
+   */
+  @state() registerUrl: string =
+    'https://account.kompas.id/register?loc=metered_register_wall'
+  /**
+   * state isShowBanner untuk memunculkan component.
+   */
+  @state() isShowBanner: boolean = true
+  /**
+   * state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.
+   */
+  @state() isExpandBanner: boolean = true
+  /**
+   * state textTemplate untuk menyimpan template yang di berikan.
+   */
+  @state() private textTemplate: meteredRegisterContent = {
+    default: { title: '', lastArticle: { title: '' } },
+    expand: {
+      title: '',
+      description: '',
+      lastArticle: { title: '', description: '' },
+    },
+  }
+  /**
+   * Props
+   */
+  /**
+   * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
+   * prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.
+   * prop tracker_page_title untuk title of the page
+   * prop tracker_page_type untuk type of the page
+   * prop tracker_content_type untuk whether it's a free article or paid article (will only be sent if the user views article detail page)
+   * prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)
+   * prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)
+   * prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)
+   * prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)
+   * prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)
+   * prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)
+   * prop tracker_content_categories untuk The main category the content belongs to
+   * prop tracker_user_type untuk type of user based on their subscription
+   * prop tracker_subscription_status untuk status of their subscription
+   * prop tracker_metered_wall_type untuk the type of Metered Wall
+   * prop tracker_metered_wall_balance untuk the balance of their metered wall
+   * prop tracker_page_domain untuk Page Domain
+   * prop next_param untuk page Domain
+   */
+
+  @property({ type: Number }) countdownArticle = 0
+  @property({ type: Boolean }) defaultExpandBanner = false
+  @property({ type: Boolean }) isDesktop = false
+  @property({ type: String }) tracker_page_title = ''
+  @property({ type: String }) tracker_page_type = ''
+  @property({ type: String }) tracker_content_type = ''
+  @property({ type: String }) tracker_content_id = ''
+  @property({ type: String }) tracker_content_title = ''
+  @property({ type: String }) tracker_content_authors = ''
+  @property({ type: String }) tracker_content_editors = ''
+  @property({ type: String }) tracker_content_tags = ''
+  @property({ type: String }) tracker_content_published_date = ''
+  @property({ type: String }) tracker_content_categories = ''
+  @property({ type: String }) tracker_user_type = ''
+  @property({ type: String }) tracker_subscription_status = ''
+  @property({ type: String }) tracker_metered_wall_type = ''
+  @property({ type: Number }) tracker_metered_wall_balance = 0
+  @property({ type: String }) tracker_page_domain = ''
+  @property({ type: String }) next_param =
+    'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini'
+
+  /**
+   * menentukan template yang akan di render
+   */
+  private setTemplate(
+    prop: string,
+    mode: keyof meteredRegisterContent = 'default'
+  ): string {
+    let template = ''
+
+    // dynamicMode dibuat agar typescript bisa akses data lastArticle
+    const dynamicMode = this.textTemplate[mode]
+
+    if ('lastArticle' in dynamicMode) {
+      const lastArticleMode = dynamicMode as {
+        lastArticle: { [key: string]: string }
+      }
+      template = lastArticleMode.lastArticle[prop] || ''
+    } else {
+      template = dynamicMode[prop] || ''
+    }
+    return template
+  }
+
+  private checkIsDesktop() {
+    if (window.innerWidth >= 960) {
+      this.isDesktop = true
+    } else {
+      this.isDesktop = false
+    }
+  }
+
+  /**
+   * Render Statement
+   */
+
+  private bannerTemplate() {
+    return this.isExpandBanner
+      ? this.expandedBannerContent()
+      : this.defaultBannerContent()
+  }
+
+  private defaultBannerContent() {
+    return html`
+      <div>
+        <div
+          class="${this.isDesktop
+            ? 'cont-banner-content justify-center'
+            : null} flex flex-row justify-between"
+        >
+          <div class="banner-content flex flex-row">
+            <div
+              class="text-base md:text-lg font-lora mb-3 mt-1 md:mb-0 md:mt-0 pr-14 md:px-0"
+              .innerHTML=${this.setTemplate('title')}
+            ></div>
+            <div .hidden="${!this.isDesktop}" class="md:self-center btn-regis">
+              ${this.isDesktop
+                ? html`<div class="ml-4"></div>
+                    ${this.registerButtonTemplate()}`
+                : null}
+            </div>
+          </div>
+          <div>
+            <button
+              @click="${this.triggerExpandBanner}"
+              class="h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200"
+            >
+              <div
+                class="icon icon-blue-600 ${this.isExpandBanner
+                  ? 'chevron-down'
+                  : 'rotate-180'}"
+              >
+                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
+              </div>
+            </button>
+          </div>
+        </div>
+        <div class="md:self-center mt-4">
+          ${!this.isDesktop ? html`${this.registerButtonTemplate()} ` : null}
+        </div>
+      </div>
+    `
+  }
+
+  private expandedBannerContent() {
+    return html`
+      <div
+        class="flex flex-col-reverse justify-evenly md:flex-row gap-4 md:gap-8"
+      >
+        <div
+          class="flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 md:gap-2"
+        >
+          <p
+            class="text-lg md:text-2xl font-lora"
+            .innerHTML=${this.setTemplate('title', 'expand')}
+          ></p>
+          <p
+            class="text-sm md:text-base"
+            .innerHTML=${this.setTemplate('description', 'expand')}
+          ></p>
+          <div class="${this.isDesktop ? null : 'expanded-btn'} md:self-start">
+            ${this.registerButtonTemplate()}
+          </div>
+        </div>
+        <div class="flex justify-center">
+          <img
+            alt="metered-wall-register"
+            src="https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png"
+            class="h-40 w-40 md:w-full md:h-full"
+          />
+        </div>
+        <button
+          @click="${this.triggerExpandBanner}"
+          class="h-9 w-9 ${this.isDesktop
+            ? null
+            : 'ml-auto'} flex items-center justify-center text-blue-500 rounded bg-blue-200"
+        >
+          <div
+            class="icon icon-blue-600 ${this.isExpandBanner
+              ? 'chevron-down'
+              : 'rotate-180'}"
+          >
+            ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
+          </div>
+        </button>
+      </div>
+    `
+  }
+
+  /**
+   * template button register
+   */
+  private registerButtonTemplate() {
+    return html`
+      <button
+        onClick=${this.redirectToRegister}
+        class="bg-green-500 px-5 py-3 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
+      >
+        Daftar Akun
+      </button>
+    `
+  }
+
+  /**
+   * mengarahkan ke page register
+   */
+  private redirectToRegister = (): void => {
+    this.pushToDataLayer('mrw_clicked')
+    const newUrl = new URL(decodeURIComponent(this.registerUrl))
+    if (this.next_param)
+      newUrl.searchParams.append('next', decodeURIComponent(this.next_param))
+    window.location.href = newUrl.toString()
+  }
+
+  /**
+   * mengirim event ke datalayer
+   */
+  private pushToDataLayer(eventName: string) {
+    window.dataLayer.push({
+      event: eventName,
+      page_title: this.tracker_page_title,
+      page_type: this.tracker_page_type,
+      content_type: this.tracker_content_type,
+      content_id: this.tracker_content_id,
+      content_title: this.tracker_content_title,
+      content_authors: this.tracker_content_authors,
+      content_editors: this.tracker_content_editors,
+      content_tags: this.tracker_content_tags,
+      content_published_date: this.tracker_content_published_date,
+      content_categories: this.tracker_content_categories,
+      user_type: this.tracker_user_type || 'G',
+      subscription_status: this.tracker_subscription_status || '',
+      metered_wall_type: this.tracker_metered_wall_type || 'MRW',
+      metered_wall_balance: this.tracker_metered_wall_balance,
+      page_domain: this.tracker_page_domain || 'Kompas.id',
+    })
+  }
+
+  /**
+   * toggle isExpandBanner flag
+   */
+  private triggerExpandBanner() {
+    this.isExpandBanner = !this.isExpandBanner
+    return !this.isExpandBanner && this.pushToDataLayer('mrw_closed')
+  }
+
+  /**
+   * Lifecycle
+   */
+
+  override async connectedCallback() {
+    super.connectedCallback()
+    await this.updateComplete
+    this.loadData()
+    this.checkIsDesktop()
+  }
+
+  private async loadData() {
+    const req = await fetch(
+      `https://d3w4qaq4xm1ncv.cloudfront.net/assets/register_wall.json`
+    )
+
+    if (req.status !== 200) {
+      throw new Error(`${req.status} Ada galat saat memproses permintaan.`)
+    }
+
+    this.textTemplate = await req.json()
+
+    const getCountdown = this.countdownArticle
+
+    if (!getCountdown) {
+      this.isShowBanner = false
+    } else {
+      this.isExpandBanner = this.defaultExpandBanner
+    }
+
+    if (this.isShowBanner) {
+      this.pushToDataLayer('mrw_viewed')
+    }
+  }
+
+  render() {
+    return this.isShowBanner
+      ? html`
+          <div class="sticky bottom-0 w-full h-full z-20">
+            <div class="w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4">
+              <div class="lg:max-w-7xl m-auto relative">
+                <div>${this.bannerTemplate()}</div>
+              </div>
+            </div>
+          </div>
+        `
+      : null
+  }
+}

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

@@ -0,0 +1,77 @@
+# kompas-metered-register
+
+### Standar
+
+Anda perlu meletakkan _tag_ komponen `<kompas-metered-wall-register />` pada halaman anda.
+
+### Elemen
+
+```javascript
+<kompas-metered-wall-register countdown-article="1" />
+```
+
+### Detail Props
+
+### 1. countdownArticle
+
+- Value berapa banyak sisa artikel yang dapat dibaca
+  Jika valuenya:
+  0 => tidak ada yg muncul
+  1 => akan menampilkan text artikel terakhir
+  lebih dari 1 => akan menampilkan normal text
+
+### Catatan
+
+Text pada komponen ini dapat di update dengan mengubah value dari url https://d3w4qaq4xm1ncv.cloudfront.net/assets/register_wall.json
+
+Dengan format dibawah ini:
+
+```javascript
+{
+  "expand": {
+    "lastArticle": {
+      "title": "<span>Anda Sedang Membaca <b>Artikel Premium Gratis Terakhir</b> dari Kompas.id</span>",
+      "description": "<span>Ayo daftar akun untuk akses ke beragam artikel dan fitur premium. Anda juga mendukung jurnalisme berkualitas dengan mendaftar akun.</span>"
+    },
+    "title": "<b>Tertarik dengan Artikel Ini? Daftar untuk Akses Artikel Menarik Lainnya</b>",
+    "description": "<span>Dapatkan akses ke beragam konten dan fitur premium Kompas.id. Anda juga mendukung jurnalisme berkualitas dengan mendaftar akun.</span>"
+  },
+  "default": {
+    "lastArticle": {
+      "title": "<span>Ini Adalah <b>Artikel Gratis Terakhir</b> Anda. <b>Daftar Akun untuk Terus Membaca.</b></span>"
+    },
+    "title": "<b>Dukung jurnalisme berkualitas dengan mendaftar akun Kompas.id.</b>"
+  }
+}
+```
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                         | Attribute                        | Description                                                                                           | Type      | Default     |
+| -------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `countdownArticle`               | `countdown-article`              | prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.                    | `number`  | `0`         |
+| `defaultExpandBanner`            | `default-expand-banner`          | prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.  | `boolean` | `true`      |
+| `next_param`                     | `next_param`                     | Page Domain                                                                                           | `string`  | `undefined` |
+| `tracker_content_authors`        | `tracker_content_authors`        | Name of the authors (will only be sent if the user views article detail page)                         | `string`  | `undefined` |
+| `tracker_content_categories`     | `tracker_content_categories`     | The main category the content belongs to                                                              | `string`  | `undefined` |
+| `tracker_content_editors`        | `tracker_content_editors`        | Name of the editors (will only be sent if the user views article detail page)                         | `string`  | `undefined` |
+| `tracker_content_id`             | `tracker_content_id`             | The ID for the article (will only be sent if the user views article detail page)                      | `string`  | `undefined` |
+| `tracker_content_published_date` | `tracker_content_published_date` | The published date (will only be sent if the user views article detail page)                          | `string`  | `undefined` |
+| `tracker_content_tags`           | `tracker_content_tags`           | Tags inside the article (will only be sent if the user views article detail page)                     | `string`  | `undefined` |
+| `tracker_content_title`          | `tracker_content_title`          | The title of the article (will only be sent if the user views article detail page)                    | `string`  | `undefined` |
+| `tracker_content_type`           | `tracker_content_type`           | Whether it's a free article or paid article (will only be sent if the user views article detail page) | `string`  | `undefined` |
+| `tracker_metered_wall_balance`   | `tracker_metered_wall_balance`   | The balance of their metered wall                                                                     | `number`  | `0`         |
+| `tracker_metered_wall_type`      | `tracker_metered_wall_type`      | The type of Metered Wall                                                                              | `string`  | `undefined` |
+| `tracker_page_domain`            | `tracker_page_domain`            | Page Domain                                                                                           | `string`  | `undefined` |
+| `tracker_page_title`             | `tracker_page_title`             | Title of the page                                                                                     | `string`  | `undefined` |
+| `tracker_page_type`              | `tracker_page_type`              | Type of the page                                                                                      | `string`  | `undefined` |
+| `tracker_subscription_status`    | `tracker_subscription_status`    | Status of their subscription                                                                          | `string`  | `undefined` |
+| `tracker_user_type`              | `tracker_user_type`              | Type of user based on their subscription                                                              | `string`  | `undefined` |
+
+
+----------------------------------------------
+
+*Terbikin oleh tim front-end kompas.id*

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

@@ -0,0 +1,16 @@
+export interface meteredRegisterContent {
+  expand: {
+    lastArticle: {
+      title: string
+      description: string
+    }
+    title: string
+    description: string
+  }
+  default: {
+    lastArticle: {
+      title: string
+    }
+    title: string
+  }
+}

package/src/index.ts

@@ -3,6 +3,7 @@ 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'
 export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js'
+export { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'
 
 declare global {
   interface Window {

package/tailwind/tailwind.css

@@ -602,6 +602,10 @@ video {
   grid-column: span 4 / span 4;
 }
 
+.m-auto {
+  margin: auto;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -656,6 +660,10 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -680,6 +688,10 @@ video {
   margin-left: 0.75rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .ml-8 {
   margin-left: 2rem;
 }
@@ -728,6 +740,10 @@ video {
   margin-top: 2rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .block {
   display: block;
 }
@@ -760,6 +776,10 @@ video {
   height: 1rem;
 }
 
+.h-40 {
+  height: 10rem;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -865,6 +885,10 @@ video {
   width: 100%;
 }
 
+.w-\[127px\] {
+  width: 127px;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -942,6 +966,10 @@ video {
   flex-direction: column;
 }
 
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -1263,6 +1291,11 @@ video {
   padding-right: 1rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -1357,6 +1390,10 @@ video {
   padding-left: 1rem;
 }
 
+.pr-14 {
+  padding-right: 3.5rem;
+}
+
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -1606,6 +1643,10 @@ video {
     margin-right: 1.25rem;
   }
 
+  .md\:mt-0 {
+    margin-top: 0px;
+  }
+
   .md\:mt-3 {
     margin-top: 0.75rem;
   }
@@ -1638,6 +1679,10 @@ video {
     height: 68px;
   }
 
+  .md\:h-full {
+    height: 100%;
+  }
+
   .md\:h-max {
     height: -moz-max-content;
     height: max-content;
@@ -1655,6 +1700,10 @@ video {
     width: 10rem;
   }
 
+  .md\:w-5\/12 {
+    width: 41.666667%;
+  }
+
   .md\:w-52 {
     width: 13rem;
   }
@@ -1715,6 +1764,14 @@ video {
     justify-content: center;
   }
 
+  .md\:gap-2 {
+    gap: 0.5rem;
+  }
+
+  .md\:gap-8 {
+    gap: 2rem;
+  }
+
   .md\:space-x-0 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0px * var(--tw-space-x-reverse));
@@ -1745,10 +1802,18 @@ video {
     margin-bottom: calc(1rem * var(--tw-space-y-reverse));
   }
 
+  .md\:self-start {
+    align-self: flex-start;
+  }
+
   .md\:self-end {
     align-self: flex-end;
   }
 
+  .md\:self-center {
+    align-self: center;
+  }
+
   .md\:rounded {
     border-radius: 0.25rem;
   }
@@ -1826,6 +1891,11 @@ video {
     text-align: left;
   }
 
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
   .md\:text-base {
     font-size: 1rem;
     line-height: 1.5rem;
@@ -1914,6 +1984,10 @@ video {
     width: 410px;
   }
 
+  .lg\:max-w-7xl {
+    max-width: 80rem;
+  }
+
   .lg\:grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
@@ -1978,3 +2052,10 @@ video {
     padding-bottom: 1.5rem;
   }
 }
+
+@media (min-width: 1280px) {
+  .xl\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+}