@kompasid/lit-web-components 0.4.0 → 0.4.2

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-return-assign */
 
-import { html, css, LitElement } from 'lit'
+import { html, css, LitElement, nothing } from 'lit'
 import { property, state, customElement } from 'lit/decorators.js'
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
@@ -12,6 +12,8 @@ import {
 } from '../kompasid-paywall/types.js'
 import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
 import { deviceType } from '../../utils/deviceType.js'
+import { formatRupiah } from '../../utils/formatRupiah.js'
+import { addGoogleFonts } from '../../utils/googleFont.js'
 
 @customElement('kompasid-paywall-body')
 export class KompasIdPaywallBody extends LitElement {
@@ -23,6 +25,10 @@ export class KompasIdPaywallBody extends LitElement {
         justify-items: center;
         align-items: center;
       }
+
+      .font-lora {
+        font-family: 'Lora', 'Georgia', 'serif';
+      }
     `,
     TWStyles,
   ]
@@ -86,6 +92,10 @@ export class KompasIdPaywallBody extends LitElement {
   @property({ type: String }) tracker_epaper_edition = ''
   @property({ type: String }) theme = ''
 
+  /**
+   * State
+   */
+
   @state() private isExtensionsOpened = false
   @state() private kompasAkunHost = 'https://akun.kompas.id'
   @state() private kompasApigenHost = 'https://apigen.kompas.id'
@@ -99,13 +109,24 @@ export class KompasIdPaywallBody extends LitElement {
 
   buttonElement!: HTMLButtonElement
 
-  private getRupiahFormat(value: number) {
-    const roundedValue = Math.round(value)
-    return `Rp ${roundedValue
-      .toString()
-      .replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')}`
+  /**
+   * Getter
+   */
+
+  get loginUrl() {
+    return `${this.kompasLoginHost}?next=${encodeURIComponent(
+      this.selfHost + window.location.pathname
+    )}`
+  }
+
+  get isDark() {
+    return this.theme === 'dark'
   }
 
+  /**
+   * Logic Function
+   */
+
   private redirectToCheckout(
     url: string,
     name: string,
@@ -115,7 +136,7 @@ export class KompasIdPaywallBody extends LitElement {
   ): void {
     this.sendDataLayeronButtonBuyPackage(name, id, price, position)
     const originHost: string = encodeURIComponent(window.location.href)
-    const source: string = this.type === 'epaper' ? 'epaper' : ''
+    const source: string = this.type === 'epaper' ? 'epaper' : 'article'
     const directUrlCheckout: string = `${url}${originHost}&source=${source}`
     window.open(directUrlCheckout)
   }
@@ -130,12 +151,16 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private redirectToRegister(): void {
-    const loginHost: string = 'https://account.kompas.id/login'
+    const loginHost: string = 'https://account.kompas.id/register'
     const nextParams: string = encodeURIComponent(window.location.href)
     const directUrlRegister: string = `${loginHost}?next=${nextParams}?status=sukses_login&status_login=login`
     window.location.href = directUrlRegister
   }
 
+  private redirectToLogin = (): void => {
+    window.location.href = this.loginUrl
+  }
+
   private redirectToHelpdesk(): void {
     this.sendDataLayeronHelpDesk()
     window.open(
@@ -143,18 +168,14 @@ export class KompasIdPaywallBody extends LitElement {
     )
   }
 
-  private paymentExtensionHandler(): void {
-    this.isExtensionsOpened = !this.isExtensionsOpened
-  }
+  private parsePrice(price: string): number {
+    const lowerCasePrice = price.toLowerCase()
 
-  get isDark() {
-    return this.theme === 'dark'
-  }
+    if (lowerCasePrice.startsWith('rp')) {
+      return parseFloat(price.replace(/[^0-9,]/g, ''))
+    }
 
-  get redirectToLogin() {
-    return `${this.kompasLoginHost}?next=${encodeURIComponent(
-      this.selfHost + window.location.pathname
-    )}`
+    return parseFloat(price.replace(/[^0-9.]/g, ''))
   }
 
   private async getRegisterToken(path: string, payload: any): Promise<string> {
@@ -233,7 +254,7 @@ export class KompasIdPaywallBody extends LitElement {
       })
   }
 
-  private subscribeWithGoogleButton = (): any => {
+  private subscribeWithGoogleButton(): any {
     // @ts-ignore
     // eslint-disable-next-line no-restricted-globals
     ;(self.SWG = self.SWG || []).push((subscriptions: any) => {
@@ -243,10 +264,27 @@ export class KompasIdPaywallBody extends LitElement {
         subscriptions.attachButton(
           this.buttonElement,
           { theme: 'light', lang: 'en' },
-          () => {
+          async () => {
             subscriptions.showOffers({ isClosable: true })
             subscriptions.setOnLoginRequest(() => {
-              window.location.href = this.redirectToLogin
+              window.location.href = this.loginUrl
+            })
+            const offers = await subscriptions.getOffers()
+            subscriptions.setOnFlowStarted((callback: any) => {
+              if (callback.flow === 'showOffers') {
+                window.dataLayer.push(this.swgPackageViewedDataLayer(offers))
+              } else if (callback.flow === 'subscribe') {
+                const selectedOfferSkuId = callback.data.skuId
+                const selectedOffer = offers.find(
+                  (offer: any) => offer.skuId === selectedOfferSkuId
+                )
+                window.dataLayer.push(
+                  this.swgSubscribeButtonClicked(
+                    selectedOffer,
+                    offers.indexOf(selectedOffer)
+                  )
+                )
+              }
             })
             subscriptions.setOnPaymentResponse(async (paymentResponse: any) => {
               const response = await paymentResponse
@@ -300,7 +338,7 @@ export class KompasIdPaywallBody extends LitElement {
                 }
               }
               response.complete().then(() => {
-                window.location.href = this.redirectToLogin
+                window.location.href = this.loginUrl
               })
             })
           }
@@ -336,29 +374,90 @@ export class KompasIdPaywallBody extends LitElement {
     }
   }
 
-  override connectedCallback() {
-    // eslint-disable-next-line wc/guard-super-call
+  override async connectedCallback() {
     super.connectedCallback()
+    await this.updateComplete
     if (this.swgEnable) {
       this.jsonScript()
-      const appendSWGButton = () => {
-        this.buttonElement = this.shadowRoot?.getElementById(
-          'subscribe-with-google'
-        ) as HTMLButtonElement
-        if (this.buttonElement) {
-          const head = document.querySelector('head')
-          const script = document.createElement('script')
-          script.src = 'https://news.google.com/swg/js/v1/swg.js'
-          script.defer = true
-          script.onload = this.subscribeWithGoogleButton()
-          if (head) {
-            head.appendChild(script)
-          }
+      this.buttonElement = this.shadowRoot?.getElementById(
+        'subscribe-with-google'
+      ) as HTMLButtonElement
+      if (this.buttonElement) {
+        const head = document.querySelector('head')
+        const script = document.createElement('script')
+        script.src = 'https://news.google.com/swg/js/v1/swg.js'
+        script.defer = true
+        script.onload = this.subscribeWithGoogleButton()
+        if (head) {
+          head.appendChild(script)
         }
       }
+    }
+    addGoogleFonts(['pt-sans', 'lora'])
+  }
+
+  private otherPackagesClicked() {
+    this.sendDataLayerOtherPackagesClicked()
+    this.redirectToSubscriber()
+  }
+
+  private customerServiceClicked() {
+    this.sendDataLayerCustomerServiceClicked()
+    this.redirectToHelpdesk()
+  }
+
+  /**
+   * Data Layer
+   */
 
-      setTimeout(appendSWGButton, 500)
+  private buildGtmParams(
+    event: string,
+    impressions: Record<string, any>[],
+    index: number = 0
+  ) {
+    const gtmParams: Record<string, any> = {
+      event,
+      impressions: impressions.map((impression, i) => ({
+        paywall_location: this.paywall_location || '',
+        paywall_subscription_package: impression.package,
+        paywall_subscription_id: impression.subscription_id,
+        paywall_subscription_price: this.parsePrice(impression.price),
+        paywall_position: index + i + 1,
+        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,
+        ...(this.type === 'epaper'
+          ? { epaper_edition: this.tracker_epaper_edition }
+          : {
+              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,
+            }),
+      })),
     }
+
+    return gtmParams
+  }
+
+  private generalPaywallDataLayer(event: string): Record<string, any> {
+    const impressions = [
+      {
+        package: 'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12',
+        subscription_id: '9802032',
+        price: '360000',
+      },
+      {
+        package: 'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1',
+        subscription_id: '9802035',
+        price: '50000',
+      },
+    ]
+
+    return this.buildGtmParams(event, impressions)
   }
 
   private sendDataLayer(): void {
@@ -412,78 +511,99 @@ export class KompasIdPaywallBody extends LitElement {
     window.dataLayer.push(gtmParams)
   }
 
-  private sendDataLayeronPaywallBody = (): void => {
-    const gtmParams: Record<string, any> = {
-      event: 'paywall_viewed',
-      impressions: [
-        {
-          paywall_location: this.paywall_location || '',
-          paywall_subscription_package:
-            'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12',
-          paywall_subscription_id: '9802032',
-          paywall_subscription_price: 360000,
-          paywall_position: 1,
-          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,
-        },
-        {
-          paywall_location: this.paywall_location || '',
-          paywall_subscription_package:
-            'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1',
-          paywall_subscription_id: '9802035',
-          paywall_subscription_price: 50000,
-          paywall_position: 2,
-          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 sendDataLayeronPaywallBody(): void {
+    const gtmParams = this.generalPaywallDataLayer('paywall_viewed')
+    window.dataLayer.push(gtmParams)
+  }
+
+  private sendDataLayerOtherPackagesClicked(): void {
+    const gtmParams = this.generalPaywallDataLayer('other_packages_clicked')
+    window.dataLayer.push(gtmParams)
+  }
+
+  private sendDataLayerCustomerServiceClicked(): void {
+    const gtmParams = this.generalPaywallDataLayer('customer_service_clicked')
+    window.dataLayer.push(gtmParams)
+  }
+
+  private swgPackageViewedDataLayer(data: any): Record<string, any> {
+    const impressions = data.map(
+      (item: {
+        title: string
+        skuId: string
+        price: string
+        introductoryPrice: string
+      }) => ({
+        package: item.title,
+        subscription_id: item.skuId,
+        price: item.introductoryPrice || item.price,
+      })
+    )
+
+    return this.buildGtmParams('subscription_package_viewed', impressions)
+  }
+
+  private swgSubscribeButtonClicked(item: any, index: number) {
+    const gtmParams: any = {
+      event: 'subscribe_button_clicked',
+      paywall_location: this.paywall_location || '',
+      paywall_subscription_package: item.title,
+      paywall_subscription_id: item.skuId,
+      paywall_subscription_price: this.parsePrice(
+        item.introductoryPrice || item.price
+      ),
+      paywall_position: index + 1,
+      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,
     }
 
     if (this.type === 'epaper') {
-      gtmParams.impressions[0].epaper_edition = this.tracker_epaper_edition
-      gtmParams.impressions[1].epaper_edition = this.tracker_epaper_edition
+      gtmParams.epaper_edition = this.tracker_epaper_edition
     } else {
-      gtmParams.impressions[0].page_type = this.tracker_page_type
-      gtmParams.impressions[0].content_id = this.tracker_content_id
-      gtmParams.impressions[0].content_title = this.tracker_content_title
-      gtmParams.impressions[0].content_categories =
-        this.tracker_content_categories
-      gtmParams.impressions[0].content_type = this.tracker_content_type
-
-      gtmParams.impressions[1].page_type = this.tracker_page_type
-      gtmParams.impressions[1].content_id = this.tracker_content_id
-      gtmParams.impressions[1].content_title = this.tracker_content_title
-      gtmParams.impressions[1].content_categories =
-        this.tracker_content_categories
-      gtmParams.impressions[1].content_type = this.tracker_content_type
+      gtmParams.page_type = this.tracker_page_type
+      gtmParams.content_id = this.tracker_content_id
+      gtmParams.content_title = this.tracker_content_title
+      gtmParams.content_categories = this.tracker_content_categories
+      gtmParams.content_type = this.tracker_content_type
     }
 
-    window.dataLayer.push(gtmParams)
+    return gtmParams
   }
 
+  /**
+   * Component
+   */
+
   private headerSection(type: 'epaper' | 'reguler') {
+    const headerSectionText =
+      type === 'epaper'
+        ? 'Akses ePaper Ini dengan Berlangganan'
+        : 'Lanjut Baca Artikel Ini dengan Berlangganan'
     return html`
-      <div class="flex w-full items-center">
+      <div class="flex w-full items-center justify-center">
         ${type === 'epaper'
           ? html`<button
-              @click=${() => this.redirectToPrevUrl()}
+              @click=${this.redirectToPrevUrl}
               class="hidden lg:block w-8 h-8 text-blue-600 pl-4"
             >
               ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
             </button>`
-          : ''}
+          : nothing}
         <h4
-          class="text-base md:text-xl ${this.isDark &&
-          'text-white'} text-center font-bold font-serif tracking-wide md:tracking-normal w-full"
+          class="text-base flex justify-center self-center md:block md:text-xl ${this
+            .isDark
+            ? 'text-white'
+            : 'text-grey-600'}
+          text-center font-lora font-bold tracking-wide md:tracking-normal w-4/5 md:w-full"
         >
-          Langganan untuk Lanjut Membaca
+          ${headerSectionText}
         </h4>
+        ${type === 'epaper'
+          ? html`<div class="w-10 hidden lg:flex"></div>`
+          : nothing}
       </div>
     `
   }
@@ -495,12 +615,13 @@ export class KompasIdPaywallBody extends LitElement {
           item =>
             html`
               <div class="flex items-center">
-                <div class="text-green-500">
+                <div class=${this.isDark ? 'text-green-400' : 'text-green-500'}>
                   ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 12, 12))}
                 </div>
                 <h6
-                  class="text-xs md:text-base ${this.isDark &&
-                  'text-white'} ml-0.5 md:ml-1"
+                  class="text-xs md:text-base ${this.isDark
+                    ? 'text-white'
+                    : 'text-grey-600'} ml-0.5 md:ml-1"
                 >
                   ${item}
                 </h6>
@@ -514,7 +635,7 @@ export class KompasIdPaywallBody extends LitElement {
   private informationPackages() {
     return html` <div class="mt-4 flex justify-center">
       <button
-        @click=${() => this.redirectToSubscriber()}
+        @click=${this.otherPackagesClicked}
         class="text-sm md:text-base font-bold ${this.isDark
           ? 'text-blue-300'
           : 'text-blue-600'} underline"
@@ -527,63 +648,73 @@ export class KompasIdPaywallBody extends LitElement {
   private separatorLine() {
     return html`
       <div class="flex flex-row w-full justify-center">
-        <div
-          class="border-b-2 ${this.isDark
-            ? 'border-dark-2'
-            : 'border-blue-200'} w-1/4 my-4 flex justify-center"
-        ></div>
-        <p class="px-4 pt-1 ${this.isDark && 'text-dark-1'}">atau</p>
-        <div
-          class="border-b-2 ${this.isDark
-            ? 'border-dark-2'
-            : 'border-blue-200'} w-1/4 my-4 flex justify-center"
-        ></div>
+        <p class="px-4 pt-1 ${this.isDark ? 'text-dark-1' : 'text-grey-500'}">
+          atau
+        </p>
       </div>
     `
   }
 
-  private paymentDesktopSection(data: Array<PaymentImage>) {
+  private epaperRegistrationSection() {
     return html`
-      <div
-        class="hidden md:flex w-full md:max-w-sm items-center justify-center flex-wrap"
-      >
-        ${data.map(
-          item =>
-            html`<img
-              class="object-cover ${this.isDark ? 'h-9' : 'h-10'}"
-              src=${item.link}
-              alt="${item.name}-logo-payment"
-            />`
-        )}
+      <div>
+        <button
+          @click=${this.redirectToLogin}
+          class="text-sm md:text-base font-bold ${this.isDark
+            ? 'text-blue-300'
+            : 'text-blue-600'} underline"
+        >
+          Masuk
+        </button>
+        <span class=${this.isDark && 'text-white'}>
+          jika sudah berlangganan.</span
+        >
       </div>
     `
   }
 
-  private paymentMobileSection(data: Array<PaymentImage>) {
+  private regulerRegistrationSection() {
     return html`
-      <div
-        class="grid md:hidden items-center grid-flow-col grid-cols-auto grid-rows-1 mt-4 mx-4"
-      >
-        ${data.map(
-          item =>
-            html`<img
-              class="w-16"
-              src=${item.link}
-              alt="${item.name}-logo-payment"
-            />`
-        )}
-        <button
-          @click=${() => this.paymentExtensionHandler()}
-          class="text-xs md:text-sm ${this.isDark
-            ? 'text-blue-300'
-            : 'text-blue-600'} font-bold"
-        >
-          +9 lainnya
-        </button>
+      <div class="flex flex-col items-center justify-center">
+        <div>
+          <button
+            @click=${this.redirectToRegister}
+            class="text-sm md:text-base font-bold ${this.isDark
+              ? 'text-blue-300'
+              : 'text-blue-600'} underline"
+          >
+            Daftar
+          </button>
+          <span class=${this.isDark ? 'text-white' : 'text-grey-600'}>
+            untuk kuota artikel gratis</span
+          >
+        </div>
+        <div>
+          <span class=${this.isDark ? 'text-white' : 'text-grey-600'}
+            >atau
+          </span>
+          <button
+            @click=${this.redirectToLogin}
+            class="text-sm md:text-base font-bold ${this.isDark
+              ? 'text-blue-300'
+              : 'text-blue-600'} underline"
+          >
+            Masuk
+          </button>
+          <span class=${this.isDark ? 'text-white' : 'text-grey-600'}>
+            jika sudah punya akun.</span
+          >
+        </div>
       </div>
     `
   }
 
+  private registrationSection(type: 'epaper' | 'reguler') {
+    return type === 'epaper'
+      ? this.epaperRegistrationSection()
+      : this.regulerRegistrationSection()
+  }
+
   private paymentMobileExtension(data: Array<PaymentImage>) {
     return html`
       <div
@@ -628,22 +759,23 @@ export class KompasIdPaywallBody extends LitElement {
       <div
         class="flex flex-wrap justify-between items-center ${this.isDark
           ? 'bg-grey-600'
-          : 'bg-white'} rounded md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-2.5 md:mt-4 border border-yellow-400 relative"
+          : 'bg-white'} rounded-lg md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-2.5 md:mt-4 border border-yellow-400 relative"
       >
         <div class="flex flex-col py-3 px-4">
           <div class="flex flex-none items-center">
             <h5 class="text-base md:text-lg font-bold text-orange-400">
-              ${this.getRupiahFormat(product.price)}
+              ${formatRupiah(product.price)}
             </h5>
             <h6
-              class="text-xs md:text-base ${this.isDark &&
-              'text-white'} font-bold pl-1"
+              class="text-xs md:text-base ${this.isDark
+                ? 'text-dark-7'
+                : 'text-grey-600'} font-bold pl-1"
             >
               / ${product.periode}
             </h6>
           </div>
           <div class="flex items-center">
-            <p class="text-xs ${this.isDark && 'text-white'}">
+            <p class="text-xs ${this.isDark ? 'text-dark-7' : 'text-grey-600'}">
               hanya <span class="text-orange-400">Rp 30.000</span> / bulan
             </p>
           </div>
@@ -671,7 +803,7 @@ export class KompasIdPaywallBody extends LitElement {
         </button>
         <div class="absolute -top-2 left-4">
           <div class="rounded bg-yellow-300 px-2 py-0.5 text-xs">
-            <b>Harga Terbaik</b>
+            <b class="text-grey-600">Harga Terbaik</b>
           </div>
         </div>
       </div>
@@ -683,15 +815,16 @@ export class KompasIdPaywallBody extends LitElement {
       <div
         class="flex  flex-wrap justify-between ${this.isDark
           ? 'bg-grey-600'
-          : 'bg-white'} py-3 px-4 rounded md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4"
+          : 'bg-white'} py-3 px-4 rounded-lg md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4"
       >
         <div class="flex items-center">
           <h5 class="text-base md:text-lg font-bold text-orange-400">
-            ${this.getRupiahFormat(product.price)}
+            ${formatRupiah(product.price)}
           </h5>
           <h6
-            class="text-xs md:text-base ${this.isDark &&
-            'text-white'} font-bold pl-1"
+            class="text-xs md:text-base ${this.isDark
+              ? 'text-dark-7'
+              : 'text-grey-600'} font-bold pl-1"
           >
             / ${product.periode}
           </h6>
@@ -722,12 +855,7 @@ export class KompasIdPaywallBody extends LitElement {
 
   private packagesSection(data: Packages) {
     return html`
-      <div class="flex flex-col w-full items-center mt-8 lg:mt-2 px-2 ">
-        <h6
-          class="text-sm md:text-base ${this.isDark && 'text-white'} font-bold"
-        >
-          ${data.title}
-        </h6>
+      <div class="flex flex-col w-full items-center mt-8 lg:mt-2 px-4">
         ${data.memberships.map(item =>
           item.isHighlight
             ? this.primaryPackages(item)
@@ -741,7 +869,7 @@ export class KompasIdPaywallBody extends LitElement {
     return html`
       <div class="flex lg:hidden items-center w-full pb-4 ">
         <button
-          @click=${() => this.redirectToPrevUrl()}
+          @click=${this.redirectToPrevUrl}
           class="text-xs md:text-lg text-white flex flex-row"
         >
           <div class="icon-lg icon-white w-4 h-4 mr-3.5 md:mr-5 pt-0.5">
@@ -754,74 +882,55 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private helpDesk() {
-    return html`
-      <div class="py-2.5 text-white self-center text-xs md:text-sm">
-        Mengalami masalah? Hubungi
-        <button
-          @click=${() => this.redirectToHelpdesk()}
-          class="font-bold ${this.isDark && 'text-blue-300'} underline"
-        >
-          Layanan Pelanggan.
-        </button>
-      </div>
-    `
-  }
-
-  private authRegister() {
     return html`
       <div
-        class="flex flex-row text-white px-2 py-2.5 space-x-4 md:space-x-8 self-center"
+        class="${this.isDark
+          ? 'text-dark-7'
+          : 'text-white'} self-center text-xs md:text-sm"
       >
-        <div class="flex flex-col text-left text-xs md:text-sm text-white">
-          <b>Sudah berlangganan Kompas.id?</b>
-          <p>Masuk untuk lanjut membaca.</p>
-        </div>
+        Butuh bantuan? Hubungi
         <button
-          @click=${() => this.redirectToRegister()}
-          class="h-auto ${this.isDark
-            ? 'bg-blue-300'
-            : 'bg-grey-100'} rounded mr-3"
+          @click=${this.customerServiceClicked}
+          class="font-bold underline"
         >
-          <p
-            class="text-xs md:text-sm ${this.isDark
-              ? 'text-black'
-              : 'text-blue-600'} font-bold py-2 px-4"
-          >
-            Masuk / Daftar
-          </p>
+          Layanan Pelanggan.
         </button>
       </div>
     `
   }
 
-  private userAction(isLogin: boolean, type: 'epaper' | 'reguler') {
+  private userAction() {
     return html`
       <div
-        class="flex h-20 ${this.isDark
+        class="flex py-5 px-8 md:py-6 ${this.isDark
           ? 'bg-dark-4'
-          : 'bg-blue-600'} w-full justify-evenly rounded-b mt-6 md:mt-8 relative"
+          : 'bg-blue-600'} w-full justify-evenly rounded-b-xl mt-6 md:mt-8 relative"
       >
-        ${isLogin || type !== 'epaper' ? this.helpDesk() : this.authRegister()}
+        ${this.helpDesk()}
       </div>
     `
   }
 
+  /**
+   * Render Statement
+   */
+
   render() {
     return html`
       <div
         class="${this.type === 'epaper'
-          ? 'bg-transparent wrapper-body'
+          ? 'bg-transparent wrapper-body mx-2'
           : 'wrapper-body'}"
       >
         <div
-          class="flex flex-col justify-center items-center w-full max-w-screen-sm px-4 md:px-0 my-5 relative"
+          class="flex flex-col justify-center items-center w-full max-w-screen-sm my-5 relative"
         >
-          ${this.type === 'epaper' ? this.topNavigator() : ''}
+          ${this.type === 'epaper' ? this.topNavigator() : nothing}
           <div
             class="flex w-full flex-col items-center justify-center ${this
               .isDark
               ? 'bg-dark-3'
-              : 'bg-blue-100'}  rounded pt-6 md:pt-8 relative"
+              : 'bg-blue-100'}  rounded-xl pt-6 md:pt-8 relative"
           >
             ${this.headerSection(this.type)}
             ${this.descriptionSection(
@@ -831,30 +940,43 @@ export class KompasIdPaywallBody extends LitElement {
               this.paywallData?.packages ?? ({} as Packages)
             )}
             ${this.informationPackages()}
-            ${this.swgEnable ? this.separatorLine() : null}
+            ${this.swgEnable ? this.separatorLine() : nothing}
             ${this.swgEnable
               ? html`<button
-              class="border-2 bg-grey-100 border-grey-100 rounded-lg px-6 shadow-sm flex flex-row py-2 mt-1 mb-4"
-              id="subscribe-with-google"
-            >
-              <p>Subscribe with</p>
-              <img class="pl-2 object-scale-down w-20 pt-0.5" src="https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google.png" alt="subscribe with google"></img>
-            </button>`
-              : null}
-            ${this.paymentDesktopSection(
-              this.paywallData?.payment?.desktop ?? []
-            )}
-            ${this.paymentMobileSection(
-              this.paywallData?.payment?.mobile ?? []
-            )}
-            ${this.userAction(this.isLogin, this.type)}
-            ${this.sendDataLayeronPaywallBody()}
+                  class="${this.isDark
+                    ? 'bg-grey-600'
+                    : 'border-2 bg-grey-100 border-grey-100'} rounded-lg px-6 shadow-sm flex flex-row py-2 mt-1 items-center"
+                  id="subscribe-with-google"
+                >
+                  <p class=${this.isDark ? 'text-dark-7' : 'text-grey-500'}>
+                    Subscribe with
+                  </p>
+                  <img
+                    class="pl-2 object-scale-down w-20 pt-0.5"
+                    src=${this.isDark
+                      ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google-white.png'
+                      : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google.png'}
+                    alt="subscribe with google"
+                  />
+                </button>`
+              : nothing}
+            ${!this.isLogin
+              ? html`
+                  <div
+                    class="border-b ${this.isDark
+                      ? 'border-dark-8'
+                      : 'border-blue-200'} w-1/5 my-4 flex justify-center"
+                  ></div>
+                  ${this.registrationSection(this.type)}
+                `
+              : nothing}
+            ${this.userAction()} ${this.sendDataLayeronPaywallBody()}
           </div>
           ${this.isExtensionsOpened
             ? this.paymentMobileExtension(
                 this.paywallData?.payment?.ekstension ?? []
               )
-            : ''}
+            : nothing}
         </div>
       </div>
     `