@kompasid/lit-web-components 0.1.0

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

@@ -0,0 +1,844 @@
+/* eslint-disable no-return-assign */
+
+import { html, css, LitElement } from 'lit'
+import { property, state, customElement } from 'lit/decorators.js'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import {
+  PaywallProduct,
+  Product,
+  Packages,
+  PaymentImage,
+} from '../kompas-paywall/types.js'
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
+import { deviceType } from '../../utils/deviceType.js'
+
+@customElement('kompas-paywall-body')
+export class KompasPaywallBody extends LitElement {
+  static styles = [css``, TWStyles]
+
+  /**
+   * Props
+   */
+  /**
+   * prop slug untuk menghandle slug
+   * prop isLogin untuk menghandle apakah user sudah login atau belum
+   * prop type untuk menghandle tipe epaper
+   * prop paywallData untuk menghandle data paywall
+   * prop userGuid untuk menghandle user Guid
+   * prop subscriptionStatus untuk menghandle status subscription user
+   * prop countdownArticle untuk menghandle count artikel
+   * prop swgEnable untuk menghandle swg apakah di aktifkan atau tidak
+   * 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 tracker_page_type = Type of the page
+   * prop tracker_content_id = ID of article (slug)
+   * prop tracker_content_type = Whether it's free article or paid article
+   * prop tracker_content_title = The title of article
+   * prop tracker_content_categories = The category of the content
+   * prop tracker_user_type = Type of user based on their subscription
+   * prop tracker_subscription_status = Status of their subscription
+   * prop tracker_page_domain = Page Domain
+   * prop tracker_metered_wall_type = The type of Metered Wall
+   * prop tracker_metered_wall_balance = The balance of their metered wall
+   * prop tracker_metered_wall_balance = The edition of epaper viewed by user
+   * prop theme = The theme of the paywall component
+   */
+
+  @property({ type: String }) slug = ''
+  @property({ type: Number }) udin = 0
+  @property({ type: Boolean }) isLogin = false
+  @property({ type: String }) type: 'epaper' | 'reguler' = 'reguler'
+  @property({ type: Object }) paywallData: PaywallProduct | undefined =
+    undefined
+  @property({ type: String }) userGuid = ''
+  @property({ type: String }) subscriptionStatus = ''
+  @property({ type: Number }) countdownArticle = 0
+  @property({ type: Boolean }) swgEnable = false
+  @property({ type: String }) paywall_location = ''
+  @property({ type: String }) paywall_subscription_package = ''
+  @property({ type: Number }) paywall_subscription_id = 0
+  @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
+  @property({ type: String }) tracker_epaper_edition = ''
+  @property({ type: String }) theme = ''
+
+  @state() private isExtensionsOpened = false
+  @state() private kompasAkunHost = 'https://akun.kompas.id'
+  @state() private kompasApigenHost = 'https://apigen.kompas.id'
+  @state() private kompasApiWcmHost = 'https://apiwcm.kompas.id'
+  @state() private kompasLoginHost = 'https://account.kompas.id/login'
+  @state() private selfHost = 'https://epaper.kompas.id'
+  @state() private swgPublisherName = 'Harian Kompas'
+  @state() private swgPublisherId = 'kompas.id'
+  @state() private swgProductId = 'kompas.id:kompas_digital_premium'
+  @state() private errorFlag = 0
+
+  buttonElement!: HTMLButtonElement
+
+  private getRupiahFormat(value: number) {
+    const roundedValue = Math.round(value)
+    return `Rp ${roundedValue
+      .toString()
+      .replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')}`
+  }
+
+  private redirectToCheckout(
+    url: string,
+    name: string,
+    id: string,
+    price: number,
+    position: number
+  ): void {
+    this.sendDataLayeronButtonBuyPackage(name, id, price, position)
+    const originHost: string = encodeURIComponent(window.location.href)
+    const directUrlCheckout: string = url + originHost
+    window.open(directUrlCheckout)
+  }
+
+  private redirectToPrevUrl(): void {
+    window.history.back()
+  }
+
+  private redirectToSubscriber(): void {
+    this.sendDataLayer()
+    window.open('https://www.kompas.id/berlangganan')
+  }
+
+  private redirectToRegister(): void {
+    const loginHost: string = 'https://account.kompas.id/login'
+    const nextParams: string = encodeURIComponent(window.location.href)
+    const directUrlRegister: string = `${loginHost}?next=${nextParams}?status=sukses_login&status_login=login`
+    window.location.href = directUrlRegister
+  }
+
+  private redirectToHelpdesk(): void {
+    this.sendDataLayeronHelpDesk()
+    window.open(
+      'https://api.whatsapp.com/send/?phone=6281290050800&text=Halo,%20saya%20perlu%20informasi%20mengenai%20kompas.id'
+    )
+  }
+
+  private paymentExtensionHandler(): void {
+    this.isExtensionsOpened = !this.isExtensionsOpened
+  }
+
+  get isDark() {
+    return this.theme === 'dark'
+  }
+
+  get redirectToLogin() {
+    return `${this.kompasLoginHost}?next=${encodeURIComponent(
+      this.selfHost + window.location.pathname
+    )}`
+  }
+
+  private async getRegisterToken(path: string, payload: any): Promise<string> {
+    return fetch(`${this.kompasApigenHost}/v1/user/register/token/${path}`, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+      headers: {
+        'content-type': 'application/json',
+      },
+    })
+      .then(response => response.json())
+      .then((data: any) => data.result.token)
+      .catch(error => {
+        throw error
+      })
+  }
+
+  private async getUserToken(path: string, payload: any): Promise<string> {
+    return fetch(`${this.kompasApigenHost}/v1/user/token/${path}`, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+      headers: {
+        'content-type': 'application/json',
+      },
+    })
+      .then(response => response.json())
+      .then((data: any) => data.result.token)
+      .catch(error => {
+        throw error
+      })
+  }
+
+  private async getSubscriptionToken(
+    path: string,
+    payload: any
+  ): Promise<string> {
+    return fetch(`${this.kompasAkunHost}/api/subscription/login/${path}`, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+      headers: {
+        'content-type': 'application/json',
+      },
+    })
+      .then(response => response.json())
+      .then((data: any) => {
+        this.errorFlag = 0
+        return data.access_token
+      })
+      .catch(async error => {
+        const errorCode = error.response.status
+        if (errorCode === 500 && this.errorFlag < 5) {
+          // eslint-disable-next-line no-plusplus
+          this.errorFlag++
+          setTimeout(async () => {
+            await this.getSubscriptionToken(path, payload)
+          }, 2000)
+        } else {
+          this.errorFlag = 0
+          throw error
+        }
+      })
+  }
+
+  private async createSwG(payload: any, token: string) {
+    await fetch(`${this.kompasApiWcmHost}/v2/membership/swg/create`, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+      headers: {
+        'content-type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+    })
+      .then(response => response.json())
+      .catch(error => {
+        throw error
+      })
+  }
+
+  private subscribeWithGoogleButton = (): any => {
+    // @ts-ignore
+    // eslint-disable-next-line no-restricted-globals
+    ;(self.SWG = self.SWG || []).push((subscriptions: any) => {
+      // set entitlement
+      subscriptions.setOnEntitlementsResponse(() => {
+        // subscriptions attach button
+        subscriptions.attachButton(
+          this.buttonElement,
+          { theme: 'light', lang: 'en' },
+          () => {
+            subscriptions.showOffers({ isClosable: true })
+            subscriptions.setOnLoginRequest(() => {
+              window.location.href = this.redirectToLogin
+            })
+            subscriptions.setOnPaymentResponse(async (paymentResponse: any) => {
+              const response = await paymentResponse
+              const raw = JSON.parse(response.purchaseData.raw)
+              const { productId, purchaseToken, packageName } = raw
+              const { email } = response.userData.data
+
+              const payload = {
+                subscription_token: purchaseToken,
+                products: productId,
+                detail: 'test',
+              }
+              const userToken = await this.getUserToken('google', payload)
+              if (userToken) {
+                // login and update membership
+                const accessToken = await this.getSubscriptionToken('google', {
+                  token: userToken,
+                })
+                if (accessToken) {
+                  const payloadSWG = {
+                    email,
+                    package_name: packageName,
+                    product_id: productId,
+                    purchase_token: purchaseToken,
+                  }
+                  await this.createSwG(payloadSWG, accessToken)
+                }
+              } else {
+                // register and login the unknown user
+                const payloadRegisterToken = {
+                  subscription_token: purchaseToken,
+                  products: productId,
+                  detail: 'test',
+                }
+                const token = await this.getRegisterToken(
+                  'google',
+                  payloadRegisterToken
+                )
+                if (token) {
+                  const accessToken = await this.getSubscriptionToken(
+                    'google',
+                    { token }
+                  )
+                  const payloadSWRUknown = {
+                    email,
+                    package_name: packageName,
+                    product_id: productId,
+                    purchase_token: purchaseToken,
+                  }
+                  await this.createSwG(payloadSWRUknown, accessToken)
+                }
+              }
+              response.complete().then(() => {
+                window.location.href = this.redirectToLogin
+              })
+            })
+          }
+        )
+      })
+    })
+  }
+
+  private jsonScript() {
+    const jsonData = {
+      '@context': 'https://schema.org',
+      '@type': ['WebSite', 'WebPage'],
+      isAccessibleForFree: false,
+      url: this.selfHost + window.location.pathname,
+      name: this.swgPublisherName,
+      hasPart: {
+        '@type': 'WebPageElement',
+      },
+      isPartOf: {
+        '@type': ['CreativeWork', 'Product'],
+        name: this.swgPublisherId,
+        productID: this.swgProductId,
+      },
+    }
+    const str = JSON.stringify(jsonData)
+    const jsonScript = document.createElement('script')
+    jsonScript.type = 'application/ld+json'
+    jsonScript.text = str
+    jsonScript.defer = true
+    const jsonHead = document.querySelector('head')
+    if (jsonHead) {
+      jsonHead.appendChild(jsonScript)
+    }
+  }
+
+  override connectedCallback() {
+    // eslint-disable-next-line wc/guard-super-call
+    super.connectedCallback()
+    if (this.swgEnable) {
+      this.jsonScript()
+      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)
+        }
+      }
+    }
+  }
+
+  private sendDataLayer(): void {
+    window.dataLayer.push({
+      event: 'halamanBerlanggananClick',
+      subscriptionStatus: '',
+      GUID: '',
+      interface: deviceType(),
+    })
+  }
+
+  private sendDataLayeronHelpDesk(): void {
+    window.dataLayer.push({
+      event: 'helpOfferClick',
+      userType: this.subscriptionStatus,
+      GUID: this.userGuid,
+      interface: deviceType(),
+    })
+  }
+
+  private sendDataLayeronButtonBuyPackage(
+    name: string,
+    id: string,
+    price: number,
+    position: number
+  ): void {
+    const gtmParams: Record<string, any> = {
+      event: 'subscribe_button_clicked',
+      paywall_location: this.paywall_location,
+      paywall_subscription_package: name,
+      paywall_subscription_id: id,
+      paywall_subscription_price: price,
+      paywall_position: position,
+      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.content_title = this.tracker_content_title
+      gtmParams.content_id = this.tracker_content_id
+      gtmParams.content_categories = this.tracker_content_categories
+      gtmParams.content_type = this.tracker_content_type
+      gtmParams.page_type = this.tracker_page_type
+    } else {
+      gtmParams.epaper_edition = this.tracker_epaper_edition
+    }
+
+    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,
+        },
+      ],
+    }
+
+    if (this.type === 'epaper') {
+      gtmParams.impressions[0].epaper_edition = this.tracker_epaper_edition
+      gtmParams.impressions[1].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
+    }
+
+    window.dataLayer.push(gtmParams)
+  }
+
+  private headerSection(type: 'epaper' | 'reguler') {
+    return html`
+      <div class="flex w-full items-center">
+        ${type === 'epaper'
+          ? html`<button
+              @click=${() => this.redirectToPrevUrl()}
+              class="hidden lg:block w-8 h-8 text-blue-600 pl-4"
+            >
+              ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
+            </button>`
+          : ''}
+        <h4
+          class="text-base md:text-xl ${this.isDark &&
+          'text-white'} text-center font-bold font-serif tracking-wide md:tracking-normal w-full"
+        >
+          Langganan untuk Lanjut Membaca
+        </h4>
+      </div>
+    `
+  }
+
+  private descriptionSection(data: Array<string>) {
+    return html`<div class=" flex flex-col items-center">
+      <div class="flex flex-col space-y-2 mt-2.5 md:mt-3">
+        ${data.map(
+          item =>
+            html`
+              <div class="flex items-center">
+                <div class="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"
+                >
+                  ${item}
+                </h6>
+              </div>
+            `
+        )}
+      </div>
+    </div>`
+  }
+
+  private informationPackages() {
+    return html` <div class="mt-4 flex justify-center">
+      <button
+        @click=${() => this.redirectToSubscriber()}
+        class="text-sm md:text-base font-bold ${this.isDark
+          ? 'text-blue-300'
+          : 'text-blue-600'} underline"
+      >
+        Lihat Paket Lainnya
+      </button>
+    </div>`
+  }
+
+  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>
+      </div>
+    `
+  }
+
+  private paymentDesktopSection(data: Array<PaymentImage>) {
+    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>
+    `
+  }
+
+  private paymentMobileSection(data: Array<PaymentImage>) {
+    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>
+    `
+  }
+
+  private paymentMobileExtension(data: Array<PaymentImage>) {
+    return html`
+      <div
+        class="w-full ${this.isDark
+          ? '-bottom-6'
+          : 'bottom-0'} max-w-xs mb-1 ml-8 md:hidden absolute px-4"
+      >
+        <div
+          class="w-full ${this.isDark
+            ? 'bg-dark-6 border-dark-6'
+            : 'bg-white border-white'} rounded p-3 max-w-xs"
+        >
+          <svg
+            class="right-0 ${this.isDark
+              ? 'text-dark-6 border-dark-6'
+              : 'text-white border-white '} h-4 mr-10 -mt-7 z-0 transform rotate-180 absolute"
+            x="0px"
+            y="0px"
+            viewBox="0 0 255 255"
+          >
+            <polygon class="fill-current" points="0,0 127.5,127.5 255,0" />
+          </svg>
+          <div
+            class="grid place-items-center items-center grid-flow-row grid-cols-5 grid-rows-2  gap-y-4"
+          >
+            ${data.map(
+              item =>
+                html`<img
+                  class="object-cover"
+                  src=${item.link}
+                  alt="${item.name}-logo-payment"
+                />`
+            )}
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  private primaryPackages(product: Product) {
+    return html`
+      <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"
+      >
+        <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)}
+            </h5>
+            <h6
+              class="text-xs md:text-base ${this.isDark &&
+              'text-white'} font-bold pl-1"
+            >
+              / ${product.periode}
+            </h6>
+          </div>
+          <div class="flex items-center">
+            <p class="text-xs ${this.isDark && 'text-white'}">
+              hanya <span class="text-orange-400">Rp 30.000</span> / bulan
+            </p>
+          </div>
+        </div>
+        <button
+          class="h-auto ${this.isDark
+            ? 'bg-green-300 border border-green-400'
+            : 'bg-green-500'} rounded mr-4"
+          @click=${() =>
+            this.redirectToCheckout(
+              product.url,
+              'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12',
+              '9802032',
+              360000,
+              1
+            )}
+        >
+          <h6
+            class="text-xs md:text-base ${this.isDark
+              ? 'text-black'
+              : 'text-white'} font-bold py-2 px-4"
+          >
+            Langganan
+          </h6>
+        </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>
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  private secondaryPackages(product: Product) {
+    return html`
+      <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"
+      >
+        <div class="flex items-center">
+          <h5 class="text-base md:text-lg font-bold text-orange-400">
+            ${this.getRupiahFormat(product.price)}
+          </h5>
+          <h6
+            class="text-xs md:text-base ${this.isDark &&
+            'text-white'} font-bold pl-1"
+          >
+            / ${product.periode}
+          </h6>
+        </div>
+        <button
+          @click=${() =>
+            this.redirectToCheckout(
+              product.url,
+              'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1',
+              '9802035',
+              50000,
+              2
+            )}
+          class="h-auto ${!this.isDark &&
+          'bg-white'} border border-green-500 rounded"
+        >
+          <h6
+            class="text-xs md:text-base ${this.isDark
+              ? 'text-green-300'
+              : 'text-green-500'} font-bold py-2 px-4"
+          >
+            Langganan
+          </h6>
+        </button>
+      </div>
+    `
+  }
+
+  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>
+        ${data.memberships.map(item =>
+          item.isHighlight
+            ? this.primaryPackages(item)
+            : this.secondaryPackages(item)
+        )}
+      </div>
+    `
+  }
+
+  private topNavigator() {
+    return html`
+      <div class="flex lg:hidden items-center w-full pb-4 ">
+        <button
+          @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">
+            ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
+          </div>
+          Kembali
+        </button>
+      </div>
+    `
+  }
+
+  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"
+      >
+        <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>
+        <button
+          @click=${() => this.redirectToRegister()}
+          class="h-auto ${this.isDark
+            ? 'bg-blue-300'
+            : 'bg-grey-100'} rounded mr-3"
+        >
+          <p
+            class="text-xs md:text-sm ${this.isDark
+              ? 'text-black'
+              : 'text-blue-600'} font-bold py-2 px-4"
+          >
+            Masuk / Daftar
+          </p>
+        </button>
+      </div>
+    `
+  }
+
+  private userAction(isLogin: boolean, type: 'epaper' | 'reguler') {
+    return html`
+      <div
+        class="flex h-20 ${this.isDark
+          ? 'bg-dark-4'
+          : 'bg-blue-600'} w-full justify-evenly rounded-b mt-6 md:mt-8 relative"
+      >
+        ${isLogin || type !== 'epaper' ? this.helpDesk() : this.authRegister()}
+      </div>
+    `
+  }
+
+  render() {
+    return html`
+      <div
+        class="${this.type === 'epaper'
+          ? 'bg-transparent wrapper-body'
+          : '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"
+        >
+          ${this.type === 'epaper' ? this.topNavigator() : ''}
+          <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"
+          >
+            ${this.headerSection(this.type)}
+            ${this.descriptionSection(
+              this.paywallData?.informations?.description ?? []
+            )}
+            ${this.packagesSection(
+              this.paywallData?.packages ?? ({} as Packages)
+            )}
+            ${this.informationPackages()}
+            ${this.swgEnable ? this.separatorLine() : null}
+            ${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"
+              ref=${(el: any) => (this.buttonElement = el as HTMLButtonElement)}
+            >
+              <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()}
+          </div>
+          ${this.isExtensionsOpened
+            ? this.paymentMobileExtension(
+                this.paywallData?.payment?.ekstension ?? []
+              )
+            : ''}
+        </div>
+      </div>
+    `
+  }
+}