@kompasid/lit-web-components 0.6.8 → 0.7.1

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

@@ -66,6 +66,8 @@ export class KompasMeteredWallRegister extends LitElement {
       description: '',
       lastArticle: { title: '', description: '' },
     },
+    ctaUrl: '',
+    ctaText: '',
   }
   /**
    * Props
@@ -90,7 +92,6 @@ export class KompasMeteredWallRegister extends LitElement {
    * 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
@@ -119,19 +120,32 @@ export class KompasMeteredWallRegister extends LitElement {
     prop: string,
     mode: keyof meteredRegisterContent = 'default'
   ): string {
-    let template = ''
+    interface LastArticle {
+      [key: string]: string
+    }
+    interface DynamicMode {
+      lastArticle?: LastArticle
+      [key: string]: string | LastArticle | undefined
+    }
+    const dynamicMode = this.textTemplate[mode] as DynamicMode | string
 
-    // dynamicMode dibuat agar typescript bisa akses data lastArticle
-    const dynamicMode = this.textTemplate[mode]
+    let template: string = ''
 
-    if ('lastArticle' in dynamicMode) {
-      const lastArticleMode = dynamicMode as {
-        lastArticle: { [key: string]: string }
+    if (typeof dynamicMode === 'object' && dynamicMode !== null) {
+      // Check if dynamicMode has a lastArticle object and if the prop exists within it
+      if (dynamicMode.lastArticle && prop in dynamicMode.lastArticle) {
+        const value = dynamicMode.lastArticle[prop]
+        if (typeof value === 'string') {
+          template = value
+        }
+      } else if (prop in dynamicMode) {
+        const value = dynamicMode[prop]
+        if (typeof value === 'string') {
+          template = value
+        }
       }
-      template = lastArticleMode.lastArticle[prop] || ''
-    } else {
-      template = dynamicMode[prop] || ''
     }
+
     return template
   }
 
@@ -216,11 +230,12 @@ export class KompasMeteredWallRegister extends LitElement {
             ${this.registerButtonTemplate()}
           </div>
         </div>
-        <div class="flex justify-center">
+        <div
+          class="flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto"
+        >
           <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
@@ -246,15 +261,45 @@ export class KompasMeteredWallRegister extends LitElement {
    */
   private registerButtonTemplate() {
     return html`
-      <button
-        @click=${this.redirectToRegister}
-        class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
-      >
-        Daftar Akun
-      </button>
+      <div>
+        ${!this.textTemplate.ctaUrl
+          ? html`<button
+              @click=${this.redirectToRegister}
+              class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
+            >
+              Daftar Akun
+            </button>`
+          : html`<button
+              @click=${this.redirectToCTAUrl}
+              class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-[165px]"
+            >
+              ${this.textTemplate.ctaText}
+            </button>`}
+      </div>
     `
   }
 
+  /**
+   * mengarahkan ke page checkout promo
+   */
+  private redirectToCTAUrl = (): void => {
+    const params = new URLSearchParams(window.location.href)
+    const newUrl = new URL(this.textTemplate.ctaUrl)
+    const referrer = new URLSearchParams(this.textTemplate.ctaUrl).get(
+      'referrer'
+    )
+    this.pushToDataLayer('mrw_clicked')
+    if (!referrer) {
+      newUrl.searchParams.append('referrer', params.toString())
+      window.location.href = newUrl.toString()
+    } else {
+      const currentReferrerValue = newUrl.searchParams.get('referrer')
+      const updatedReferrerValue = `${params.toString()},${currentReferrerValue}`
+      newUrl.searchParams.set('referrer', updatedReferrerValue)
+      window.location.href = newUrl.toString()
+    }
+  }
+
   /**
    * mengarahkan ke page register
    */

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

@@ -13,4 +13,6 @@ export interface meteredRegisterContent {
     }
     title: string
   }
+  ctaUrl: string
+  ctaText: string
 }

package/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts

@@ -0,0 +1,342 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale/id'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { Post, Navigation } from './types.js'
+
+@customElement('kompasid-widget-recirculations-default')
+export class KompasWidgetRecirculationsDefault extends LitElement {
+  static styles = [
+    css`
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+      .chip {
+        align-items: center;
+        border-radius: 0.25rem;
+        display: flex;
+        font-family: 'PT Sans', sans-serif;
+        font-size: 0.75rem;
+        font-weight: bold;
+        height: 1.5rem;
+        justify-content: center;
+        line-height: 1rem;
+        margin-bottom: 0.25rem;
+        padding: 0.375rem 0.5rem;
+      }
+    `,
+    TWStyles,
+  ]
+
+  /**
+   * Props
+   */
+  @property({ type: Array }) posts: Post[][] = []
+  @property({ type: Object }) navigation: Navigation | undefined = undefined
+  @property({ type: String }) accessToken = ''
+  @property({ type: String }) permalinkArticle = ''
+  @property({ type: String }) userGuid = '0'
+  @property({ type: String }) slugs = ''
+  @property({ type: String }) type: 'relatedArticle' | 'otherArticle' =
+    'relatedArticle'
+  @property({ type: String }) mainCategory = ''
+
+  /**
+   * Getters
+   */
+  get navigationPermalink(): string | undefined {
+    return this.navigation?.permalink
+  }
+
+  /**
+   * Fetch Data
+   */
+  async connectedCallback() {
+    super.connectedCallback()
+    try {
+      await this.fetchAccessToken()
+      if (this.type === 'relatedArticle') {
+        await this.relatedArticles()
+      } else if (this.type === 'otherArticle') {
+        await this.otherArticles()
+      }
+    } catch (error) {
+      this.handleFetchError(error)
+    }
+  }
+
+  async fetchAccessToken() {
+    const response = await fetch(
+      'https://api.kompas.id/account/api/v1/login/guest',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email: 'anonynous.user@kompas.id',
+        }),
+      }
+    )
+
+    const result = await response.json()
+
+    if (result?.data?.accessToken) {
+      this.accessToken = result.data.accessToken
+    } else {
+      throw new Error('Token akses tidak tersedia dalam respons')
+    }
+  }
+
+  async relatedArticles() {
+    if (!this.accessToken) {
+      throw new Error('Token akses tidak tersedia')
+    }
+
+    const kompasApiAi = 'https://ai.kompas.id/api/v1'
+
+    // Constructing parameters
+    const params = new URLSearchParams()
+    params.append('page_url', this.permalinkArticle)
+    params.append('page_type', 'read')
+    params.append('item_type', 'articles')
+    params.append('guid', this.userGuid)
+    params.append('slugs', this.slugs)
+
+    // Constructing the URL with parameters
+    const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`
+
+    const response = await fetch(endpoint, {
+      headers: {
+        Authorization: `Bearer ${this.accessToken}`,
+        'Content-Type': 'application/json',
+      },
+    })
+
+    const result = await response.json()
+
+    if (result?.result) {
+      const items = result.result
+      const firstChunk = items.slice(0, 5)
+      const secondChunk = items.slice(5, 7)
+      this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]
+      console.log('related article:', this.posts)
+    } else {
+      throw new Error('Data artikel terkait tidak ditemukan')
+    }
+  }
+
+  async otherArticles() {
+    if (!this.accessToken) {
+      throw new Error('Token akses tidak tersedia')
+    }
+
+    const kompasApiCdsSPA = 'https://cds.kompas.id/api/v1'
+
+    // Constructing the URL with parameters
+    const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`
+
+    const response = await fetch(endpoint, {
+      headers: {
+        Authorization: `Bearer ${this.accessToken}`,
+        'Content-Type': 'application/json',
+      },
+    })
+
+    const result = await response.json()
+
+    if (result?.result) {
+      const items = result.result
+      const firstChunk = items.slice(0, 5)
+      const secondChunk = items.slice(5, 7)
+      this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]
+      console.log('other article:', this.posts)
+    } else {
+      throw new Error('Data artikel lainnya tidak ditemukan')
+    }
+  }
+
+  handleFetchError(error: unknown) {
+    const errorMessage =
+      error instanceof Error ? error.message : 'Kesalahan tidak diketahui'
+    alert(`Terjadi kesalahan: ${errorMessage}`)
+  }
+
+  /**
+   * Function to format date
+   */
+  formatDate(date: string) {
+    return format(new Date(date), 'dd MMMM yyyy', { locale: id })
+  }
+
+  /**
+   * Render widget components
+   */
+
+  private WidgetTitle() {
+    if (this.navigationPermalink) {
+      return html`
+        <a
+          href="${this.navigationPermalink}"
+          class="flex font-sans uppercase items-start mb-6 mt-8"
+        >
+          <h5
+            class="${[
+              'capitalize font-bold font-sans',
+              this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',
+            ].join(' ')}"
+          >
+            ${this.navigation?.name}
+          </h5>
+        </a>
+      `
+    }
+
+    return html`
+      <div class="flex font-sans uppercase items-start mb-6 mt-8">
+        <div>
+          <h5
+            class="${[
+              'capitalize font-bold font-sans',
+              this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',
+            ].join(' ')}"
+          >
+            ${this.navigation?.name}
+          </h5>
+        </div>
+      </div>
+    `
+  }
+
+  renderChips(post: Post) {
+    const chips = []
+    const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')
+    const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')
+    const isFreemium = post.isFreemium === true
+
+    if (isEksklusif) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-grey-600 text-white">
+              <img
+                src="https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg"
+                alt="Kompas Icon"
+                style="width: 16px; height: 16px; margin-right: 4px;"
+              />
+              Eksklusif
+            </div>
+          </div>
+        `
+      )
+    } else if (isFreemium) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-blue-100 text-brand-1">Bebas Akses</div>
+          </div>
+        `
+      )
+    } else if (isAnalisis) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-orange-100 text-orange-500">Analisis</div>
+          </div>
+        `
+      )
+    }
+
+    return chips
+  }
+
+  renderImage(post: Post) {
+    const { thumbnailMedium } = post.thumbnails?.sizes || {}
+    if (!thumbnailMedium) return ''
+
+    const { permalink, width, height } = thumbnailMedium
+    return html`
+      <img
+        src="${permalink}"
+        width="${width}"
+        height="${height}"
+        alt="${post.title}"
+        class="aspect-video object-cover w-full"
+      />
+    `
+  }
+
+  render() {
+    return html`
+      <div class="w-full">
+        <!-- start: widget title -->
+        ${this.WidgetTitle()}
+        <!-- end: widget title -->
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
+          <!-- start: left-post-loop -->
+          <div class="grid grid-cols-1 gap-6">
+            ${this.posts[0]
+              ? this.posts[0].map(
+                  post => html`
+                    <div class="w-full">
+                      <div class="flex">
+                        <div class="w-1/2">${this.renderImage(post)}</div>
+                        <div class="flex-grow pl-4 w-1/2">
+                          <a href="${post.permalink}">
+                            ${this.renderChips(post)}
+                            <h5
+                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                            >
+                              ${post.title}
+                            </h5>
+                            <p class="text-grey-600 pt-2">
+                              ${this.formatDate(post.publishedDate)}
+                            </p>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  `
+                )
+              : 'Belum ada artikel'}
+          </div>
+          <!-- end: left-post-loop -->
+
+          <!-- start: right-post-loop -->
+          <div class="flex flex-col w-full">
+            ${this.posts[1]
+              ? this.posts[1].map(
+                  post => html`
+                    <div class="mb-6">
+                      <div class="flex">
+                        <div class="w-1/2">${this.renderImage(post)}</div>
+                        <div class="flex-grow pl-4 w-1/2">
+                          <a href="${post.permalink}">
+                            ${this.renderChips(post)}
+                            <h5
+                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                            >
+                              ${post.title}
+                            </h5>
+                            <p class="text-grey-600 pt-2">
+                              ${this.formatDate(post.publishedDate)}
+                            </p>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  `
+                )
+              : ''}
+            <!-- start: ads -->
+            <slot></slot>
+            <!-- end: ads -->
+          </div>
+          <!-- end: right-post-loop -->
+        </div>
+      </div>
+    `
+  }
+}

package/src/components/kompasid-widget-recirculations-default/readme.md

@@ -0,0 +1,57 @@
+# kompasid-widget-recirculations-list
+
+Komponen ini adalah komponen web berbasis LitElement yang digunakan untuk menampilkan daftar aliran artikel dari Kompas.id.
+
+### Contoh Implementasi
+
+```javascript
+const widgetRelatedPost = {
+  navigation: {
+    name: 'Artikel Terkait',
+    permalink: undefined
+  },
+  permalinkArticle: 'https://www.kompas.id/baca/opini/2024/05/02/pesan-bung-karno-jaga-persatuan-dan-keutuhan?open_from=Section_Artikel_Lainnya',
+  slugs: 'persatuan,bung-karno, surat pembaca, eduard lukman, bharoto, wira hardiprakoso, vision'
+}
+
+const widgetOtherPost = {
+  navigation: {
+    name: 'Lainnya Dalam Opini',
+    permalink: '/kategori/opini'
+  }
+}
+
+<div>
+<kompasid-widget-recirculations-default
+  .navigation=${widgetRelatedPost.navigation}
+  .permalinkArticle=${widgetRelatedPost.permalinkArticle}
+  .slugs=${widgetRelatedPost.slugs}
+></kompasid-widget-recirculations-default>
+
+<kompasid-widget-recirculations-default
+  .navigation=${widgetOtherPost.navigation}
+  type='otherArticle'
+  mainCategory='opini'
+></kompasid-widget-recirculations-default>
+</div>
+```
+
+## Properti
+
+| Property           | Attribute       | Deskripsi                                                                                           | Tipe     | Default         | Konten                                      |
+| ------------------ | --------------- | -------------------------------------------------------------------------------------------------- | -------- | --------------- | ------------------------------------------- |
+| `navigation`       | `navigation`    | Navigasi yang berisi nama dan tautan ke kategori atau halaman terkait.  Mengecek value `name` dan `permalink`                            | `Object` | `undefined`     | `Navigation`                                |
+| `userGuid`         | `userGuid`      | GUID pengguna yang sedang menggunakan aplikasi untuk fetch data artikel terkait.                                                    | `String` | `'0'`           |                                             |
+| `slugs`            | `slugs`         | Daftar slug kategori atau tag yang terkait dengan artikel untuk artikel terkait.                                          | `String` | `''`            |                                             |
+| `permalinkArticle` | `permalinkArticle` | Tautan kategori artikel yang sedang ditampilkan atau dibaca untuk rekomendasi artikel terkait.                                     | `String` | `''`            |                                             |
+| `type`             | `type`          | Tipe widget untuk membedakan antara pengambilan data artikel terkait (`relatedArticle`) atau lainnya dalam kategori (`otherArticle`). | `String` | `'relatedArticle'` | `"relatedArticle" \| "otherArticle"` |
+| `mainCategory`     | `mainCategory`  | Kategori utama artikel yang akan ditampilkan jika menggunakan tipe `otherArticle` untuk lainnya dalam kategori.                  | `String` | `''`            |                                             |
+
+
+### Digunakan oleh
+
+- [kompasid-widget-recirculations-default](../kompasid-widget-recirculations-default)
+
+## Kontributor
+
+*Dokumentasi ini dibuat oleh tim front-end Kompas.id.*

package/src/components/kompasid-widget-recirculations-default/types.ts

@@ -0,0 +1,28 @@
+interface PostTag {
+  slug: string
+}
+
+export interface Post {
+  title: string
+  isAnalisis?: boolean
+  isEksklusif?: boolean
+  isFreemium?: boolean
+  featuredImageThumbnailMedium: string
+  permalink: string
+  publishedDate: string
+  postTag?: PostTag[]
+  thumbnails: {
+    sizes: {
+      thumbnailMedium: {
+        permalink: string
+        width: number
+        height: number
+      }
+    }
+  }
+}
+
+export interface Navigation {
+  name: string
+  permalink: string
+}