@kompasid/lit-web-components 0.8.4 → 0.8.6

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

@@ -3,7 +3,11 @@ 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'
+import {
+  lastArticleData,
+  meteredRegisterResponse,
+  meteredRegisterContent,
+} from './types.js'
 
 @customElement('kompasid-metered-wall-register')
 export class KompasMeteredWallRegister extends LitElement {
@@ -20,22 +24,9 @@ export class KompasMeteredWallRegister extends LitElement {
         width: 100%;
       }
 
-      .btn-regis {
-        margin-left: 16px;
-        width: 127px;
-      }
-
       .banner-content {
         gap: 55px;
       }
-
-      .cont-banner-content {
-        justify-content: space-evenly;
-      }
-
-      .expanded-btn {
-        width: 127px;
-      }
     `,
     TWStyles,
   ]
@@ -60,15 +51,25 @@ export class KompasMeteredWallRegister extends LitElement {
    * state textTemplate untuk menyimpan template yang di berikan.
    */
   @state() private textTemplate: meteredRegisterContent = {
-    default: { title: '', lastArticle: { title: '' } },
     expand: {
-      title: '',
       description: '',
-      lastArticle: { title: '', description: '' },
+      imageUrl: '',
+      lastArticle: {
+        title: '',
+        description: '',
+      },
+      title: '',
+      ctaUrl: '',
+      ctaText: '',
+    },
+    collapse: {
+      lastArticle: {
+        title: '',
+      },
+      title: '',
     },
-    ctaUrl: '',
-    ctaText: '',
   }
+
   /**
    * Props
    */
@@ -94,7 +95,7 @@ export class KompasMeteredWallRegister extends LitElement {
    */
   @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 = ''
@@ -112,34 +113,37 @@ export class KompasMeteredWallRegister extends LitElement {
   @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'
+  @property({ type: String }) source = 'default'
 
   /**
    * menentukan template yang akan di render
    */
   private setTemplate(
     prop: string,
-    mode: keyof meteredRegisterContent = 'default'
+    mode: keyof meteredRegisterContent = 'collapse'
   ): string {
-    interface LastArticle {
-      [key: string]: string
-    }
-    interface DynamicMode {
-      lastArticle?: LastArticle
-      [key: string]: string | LastArticle | undefined
+    interface templateType {
+      lastArticle?: lastArticleData
+      [key: string]: string | lastArticleData | undefined
     }
-    const dynamicMode = this.textTemplate[mode] as DynamicMode | string
+    const templateObj = this.textTemplate[mode] as unknown as
+      | templateType
+      | string
 
     let template: 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
+    if (typeof templateObj === 'object' && templateObj !== null) {
+      // Check if templateObj has a lastArticle object and if the prop exists within it
+
+      if (this.countdownArticle === 1) {
+        if (templateObj.lastArticle && prop in templateObj.lastArticle) {
+          const value = (templateObj.lastArticle as any)[prop]
+          if (typeof value === 'string') {
+            template = value
+          }
         }
-      } else if (prop in dynamicMode) {
-        const value = dynamicMode[prop]
+      } else if (prop in templateObj) {
+        const value = templateObj[prop]
         if (typeof value === 'string') {
           template = value
         }
@@ -149,14 +153,6 @@ export class KompasMeteredWallRegister extends LitElement {
     return template
   }
 
-  private checkIsDesktop() {
-    if (window.innerWidth >= 960) {
-      this.isDesktop = true
-    } else {
-      this.isDesktop = false
-    }
-  }
-
   /**
    * Render Statement
    */
@@ -169,24 +165,15 @@ export class KompasMeteredWallRegister extends LitElement {
 
   private defaultBannerContent() {
     return html`
-      <div>
-        <div
-          class="${this.isDesktop
-            ? 'cont-banner-content'
-            : 'justify-between'} flex flex-row"
-        >
-          <div .hidden="${!this.isDesktop}" class="w-9 h-9"></div>
-          <div class="banner-content flex flex-row">
+      <div class="flex flex-col space-y-4">
+        <div class="flex justify-between items-center h-full">
+          <div class="w-9 h-9 hidden lg:block"></div>
+          <div class="banner-content flex flex-row items-center">
             <div
-              class="text-base md:text-lg font-lora mb-3 mt-1 pt-[5px] md:mb-0 md:mt-0 pr-14 md:px-0"
+              class="text-base md:text-lg font-lora"
               .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 class="hidden md:block">${this.registerButtonTemplate()}</div>
           </div>
           <div>
             <button
@@ -203,9 +190,7 @@ export class KompasMeteredWallRegister extends LitElement {
             </button>
           </div>
         </div>
-        <div class="md:self-center mt-4">
-          ${!this.isDesktop ? html`${this.registerButtonTemplate()} ` : null}
-        </div>
+        <div class="block md:hidden">${this.registerButtonTemplate()}</div>
       </div>
     `
   }
@@ -213,10 +198,10 @@ export class KompasMeteredWallRegister extends LitElement {
   private expandedBannerContent() {
     return html`
       <div
-        class="flex flex-col-reverse justify-evenly md:flex-row gap-4 md:gap-8"
+        class="flex flex-col-reverse justify-between 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"
+          class="flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 ml-auto"
         >
           <p
             class="text-lg md:text-2xl font-lora"
@@ -226,23 +211,19 @@ export class KompasMeteredWallRegister extends LitElement {
             class="text-sm md:text-base"
             .innerHTML=${this.setTemplate('description', 'expand')}
           ></p>
-          <div class="${this.isDesktop ? 'expanded-btn' : null} md:self-start">
-            ${this.registerButtonTemplate()}
-          </div>
+          <div class="md:self-start">${this.registerButtonTemplate()}</div>
         </div>
         <div
-          class="flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto"
+          class="flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto mx-auto"
         >
           <img
             alt="metered-wall-register"
-            src="https://cdn-www.kompas.id/paywall-asset/paywall_ilustrasi3-03_1.png"
+            src="${this.textTemplate.expand.imageUrl ?? ''}"
           />
         </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"
+          class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
         >
           <div
             class="icon icon-blue-600 ${this.isExpandBanner
@@ -262,18 +243,18 @@ export class KompasMeteredWallRegister extends LitElement {
   private registerButtonTemplate() {
     return html`
       <div>
-        ${!this.textTemplate.ctaUrl
+        ${!this.textTemplate.expand.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"
+              class="bg-green-500 p-1.5 w-full whitespace-nowrap 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]"
+              class="bg-green-500 p-1.5 w-full whitespace-nowrap rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-auto"
             >
-              ${this.textTemplate.ctaText}
+              ${this.textTemplate.expand.ctaText}
             </button>`}
       </div>
     `
@@ -284,8 +265,8 @@ export class KompasMeteredWallRegister extends LitElement {
    */
   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(
+    const newUrl = new URL(this.textTemplate.expand.ctaUrl)
+    const referrer = new URLSearchParams(this.textTemplate.expand.ctaUrl).get(
       'referrer'
     )
     this.pushToDataLayer('mrw_clicked')
@@ -351,19 +332,23 @@ export class KompasMeteredWallRegister extends LitElement {
     super.connectedCallback()
     await this.updateComplete
     this.loadData()
-    this.checkIsDesktop()
   }
 
   private async loadData() {
+    const { source } = this // kompas_com || default
+
     const req = await fetch(
-      `https://cdn-www.kompas.id/assets/register_wall.json`
+      `https://cdn-www.kompas.id/assets/register_wall_new.json`
     )
 
     if (req.status !== 200) {
       throw new Error(`${req.status} Ada galat saat memproses permintaan.`)
     }
 
-    this.textTemplate = await req.json()
+    const res: meteredRegisterResponse = await req.json()
+    const validSource = source in res ? source : 'default'
+
+    this.textTemplate = res[validSource as keyof typeof res]
 
     const getCountdown = this.countdownArticle
 
@@ -383,8 +368,8 @@ export class KompasMeteredWallRegister extends LitElement {
       ? 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 class="lg:max-w-7xl m-auto px-0 lg:px-24 relative">
+                ${this.bannerTemplate()}
               </div>
             </div>
           </div>

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

@@ -1,18 +1,24 @@
+export interface lastArticleData {
+  title: string
+  description?: string
+}
+
 export interface meteredRegisterContent {
   expand: {
-    lastArticle: {
-      title: string
-      description: string
-    }
+    lastArticle: lastArticleData
     title: string
     description: string
+    ctaUrl: string
+    ctaText: string
+    imageUrl: string
   }
-  default: {
-    lastArticle: {
-      title: string
-    }
+  collapse: {
+    lastArticle: lastArticleData
     title: string
   }
-  ctaUrl: string
-  ctaText: string
+}
+
+export interface meteredRegisterResponse {
+  kompascom: meteredRegisterContent
+  default: meteredRegisterContent
 }

package/src/components/kompasid-paywall-body/KompasPaywallBody.ts

@@ -326,7 +326,7 @@ export class KompasIdPaywallBody extends LitElement {
               const payload = {
                 email,
                 purchase_token: purchaseToken,
-                products: productId,
+                product_id: productId,
                 package_name: packageName,
                 membershipChannelId: swgMembershipChannelId,
               }