@kompasid/lit-web-components 0.7.4 → 0.7.6

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

@@ -28,6 +28,10 @@ export class KompasIdPaywallBody extends LitElement {
         align-items: center;
       }
 
+      .z-index-max {
+        z-index: 999999;
+      }
+
       .font-lora {
         font-family: 'Lora', 'Georgia', 'serif';
       }
@@ -155,6 +159,7 @@ export class KompasIdPaywallBody extends LitElement {
       default:
         source = 'article'
     }
+
     const directUrlCheckout: string = `${url}${originHost}&source=${source}`
     window.open(directUrlCheckout)
   }
@@ -614,22 +619,20 @@ export class KompasIdPaywallBody extends LitElement {
 
   private headerSection(type: PaywallType, title: string) {
     let buttonContent
+    const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'
+    const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'
 
     if (type === 'epaper') {
       buttonContent = html` <button
         @click=${this.redirectToPrevUrl}
-        class="hidden md:block w-8 h-8 pl-4 ${this.isDark
-          ? 'text-blue-300'
-          : 'text-blue-600'}"
+        class="hidden md:block w-8 h-8 pl-4 ${textColorClass}"
       >
         ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
       </button>`
     } else if (type === 'audio') {
       buttonContent = html` <button
         @click=${this.togglePaywall}
-        class="hidden md:block w-8 h-8 pl-4 ${this.isDark
-          ? 'text-blue-300'
-          : 'text-blue-600'}"
+        class="hidden md:block w-8 h-8 pl-4 ${textColorClass}"
       >
         ${unsafeSVG(getFontAwesomeIcon('fas', 'xmark', 24, 24))}
       </button>`
@@ -637,9 +640,7 @@ export class KompasIdPaywallBody extends LitElement {
       buttonContent = nothing
     }
 
-    const headerClass = `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 max-w-xs sm:max-w-lg md:w-full md:max-w-full ${
+    const headerClass = `text-base flex justify-center self-center md:block md:text-xl ${buttonTextColorClass} text-center font-lora font-bold tracking-wide md:tracking-normal max-w-xs sm:max-w-lg md:w-full md:max-w-full ${
       type === 'audio' && 'sm:px-16 md:px-20'
     }`
 
@@ -655,19 +656,22 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   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">
+    const spaceYClass =
+      this.type === 'audio' ? 'space-y-2 md:space-y-1' : 'space-y-2'
+    const textColorClass = this.isDark ? 'text-green-400' : 'text-green-500'
+    const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'
+
+    return html` <div class=" flex flex-col items-center">
+      <div class="flex flex-col md:max-w-[464px] mt-2.5 md:mt-3 ${spaceYClass}">
         ${data.map(
           item =>
             html`
               <div class="flex items-center">
-                <div class=${this.isDark ? 'text-green-400' : 'text-green-500'}>
+                <div class="${textColorClass}">
                   ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 12, 12))}
                 </div>
                 <h6
-                  class="text-xs md:text-base ${this.isDark
-                    ? 'text-white'
-                    : 'text-grey-600'} ml-0.5 md:ml-1"
+                  class="text-xs md:text-base ml-0.5 md:ml-1 ${buttonTextColorClass}"
                 >
                   ${item}
                 </h6>
@@ -679,12 +683,13 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private informationPackages() {
-    return html` <div class="mt-4 flex justify-center">
+    const marginTopClass = this.type === 'audio' ? 'mt-4 md:mt-2' : 'mt-4'
+    const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'
+
+    return html` <div class="flex justify-center ${marginTopClass}">
       <button
         @click=${this.otherPackagesClicked}
-        class="text-sm md:text-base font-bold ${this.isDark
-          ? 'text-blue-300'
-          : 'text-blue-600'} underline"
+        class="text-sm md:text-base font-bold underline ${textColorClass}"
       >
         Lihat Paket Lainnya
       </button>
@@ -692,6 +697,9 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private epaperRegistrationSection() {
+    const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'
+    const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'
+
     return html`
       <div>
         <button
@@ -700,50 +708,41 @@ export class KompasIdPaywallBody extends LitElement {
               loc: 'hard_paywall',
               next: this.epaperHost + window.location.pathname,
             })}
-          class="text-sm md:text-base font-bold ${this.isDark
-            ? 'text-blue-300'
-            : 'text-blue-600'} underline"
+          class="text-sm md:text-base font-bold underline ${textColorClass}"
         >
           Masuk
         </button>
-        <span class=${this.isDark ? 'text-white' : 'text-grey-600'}>
-          jika sudah berlangganan.</span
-        >
+        <span class="${buttonTextColorClass}">jika sudah berlangganan.</span>
       </div>
     `
   }
 
   private regulerRegistrationSection() {
+    const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'
+    const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'
+
     return html`
       <div class="flex flex-col items-center justify-center">
         <div>
           <button
             @click=${() => redirectToRegister('hard_paywall')}
-            class="text-sm md:text-base font-bold ${this.isDark
-              ? 'text-blue-300'
-              : 'text-blue-600'} underline"
+            class="text-sm md:text-base font-bold underline ${textColorClass}"
           >
             Daftar
           </button>
-          <span class=${this.isDark ? 'text-white' : 'text-grey-600'}>
-            untuk kuota artikel gratis</span
+          <span class="${buttonTextColorClass}"
+            >untuk kuota artikel gratis</span
           >
         </div>
         <div>
-          <span class=${this.isDark ? 'text-white' : 'text-grey-600'}
-            >atau
-          </span>
+          <span class="${buttonTextColorClass}">atau</span>
           <button
             @click=${() => redirectToLogin({ loc: 'hard_paywall' })}
-            class="text-sm md:text-base font-bold ${this.isDark
-              ? 'text-blue-300'
-              : 'text-blue-600'} underline"
+            class="text-sm md:text-base font-bold underline ${textColorClass}"
           >
             Masuk
           </button>
-          <span class=${this.isDark ? 'text-white' : 'text-grey-600'}>
-            jika sudah punya akun.</span
-          >
+          <span class="${buttonTextColorClass}">jika sudah punya akun.</span>
         </div>
       </div>
     `
@@ -758,19 +757,20 @@ export class KompasIdPaywallBody extends LitElement {
   private paymentMobileExtension(data: Array<PaymentImage>) {
     return html`
       <div
-        class="w-full ${this.isDark
+        class="w-full max-w-xs mb-1 ml-8 md:hidden absolute px-4 ${this.isDark
           ? '-bottom-6'
-          : 'bottom-0'} max-w-xs mb-1 ml-8 md:hidden absolute px-4"
+          : 'bottom-0'}"
       >
         <div
-          class="w-full ${this.isDark
+          class="w-full rounded p-3 max-w-xs ${this.isDark
             ? 'bg-dark-6 border-dark-6'
-            : 'bg-white border-white'} rounded p-3 max-w-xs"
+            : 'bg-white border-white'}"
         >
           <svg
-            class="right-0 ${this.isDark
+            class="right-0 h-4 mr-10 -mt-7 z-0 transform rotate-180 absolute ${this
+              .isDark
               ? 'text-dark-6 border-dark-6'
-              : 'text-white border-white '} h-4 mr-10 -mt-7 z-0 transform rotate-180 absolute"
+              : 'text-white border-white '}"
             x="0px"
             y="0px"
             viewBox="0 0 255 255"
@@ -778,7 +778,7 @@ export class KompasIdPaywallBody extends LitElement {
             <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"
+            class="grid place-items-center items-center grid-flow-row grid-cols-5 grid-rows-2 gap-y-4"
           >
             ${data.map(
               item =>
@@ -795,34 +795,38 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private primaryPackages(product: Product) {
+    const { isDark } = this
+    const isAudio = this.type === 'audio'
+
+    const containerClass = `flex flex-wrap justify-between h-[68px] items-center rounded-lg md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-2.5${
+      isDark ? ' bg-grey-600' : ' bg-white'
+    }${isAudio ? ' md:mt-3' : ' md:mt-4'} border border-yellow-400 relative`
+
+    const textColorClass = isDark ? 'text-dark-7' : 'text-grey-600'
+
+    const buttonClass = `h-8 rounded mr-4 flex items-center${
+      isDark ? ' bg-green-300 border border-green-400' : ' bg-green-500'
+    }`
+
+    const buttonTextClass = `text-xs md:text-sm font-bold py-2 px-4${
+      isDark ? ' text-black' : ' text-white'
+    }`
+
     return html`
-      <div
-        class="flex flex-wrap justify-between h-[68px] items-center ${this
-          .isDark
-          ? 'bg-grey-600'
-          : '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="${containerClass}">
         <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">
               ${formatRupiah(product.price)}
             </h5>
-            <h6
-              class="text-xs md:text-base ${this.isDark
-                ? 'text-dark-7'
-                : 'text-grey-600'} font-bold pl-1"
-            >
+            <h6 class="text-xs md:text-base font-bold pl-1 ${textColorClass}">
               / ${product.periode}
             </h6>
           </div>
           ${product.savingPrice
             ? html`
                 <div class="flex items-center">
-                  <p
-                    class="text-xs ${this.isDark
-                      ? 'text-dark-7'
-                      : 'text-grey-600'}"
-                  >
+                  <p class="text-xs ${textColorClass}">
                     hanya
                     <span class="text-orange-400"
                       >${formatRupiah(product.savingPrice)}</span
@@ -834,9 +838,7 @@ export class KompasIdPaywallBody extends LitElement {
             : nothing}
         </div>
         <button
-          class="h-8 ${this.isDark
-            ? 'bg-green-300 border border-green-400'
-            : 'bg-green-500'} rounded mr-4 flex items-center"
+          class="${buttonClass}"
           @click=${() =>
             this.redirectToCheckout(
               product.url,
@@ -846,13 +848,7 @@ export class KompasIdPaywallBody extends LitElement {
               product.position
             )}
         >
-          <h6
-            class="text-xs md:text-sm ${this.isDark
-              ? 'text-black'
-              : 'text-white'} font-bold py-2 px-4"
-          >
-            Langganan
-          </h6>
+          <h6 class="${buttonTextClass}">Langganan</h6>
         </button>
         <div class="absolute -top-2 left-4">
           <div class="rounded bg-yellow-300 px-2 py-0.5 text-xs">
@@ -864,33 +860,38 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private secondaryPackages(product: Product) {
+    const { isDark } = this
+    const isAudio = this.type === 'audio'
+
+    const containerClass = `flex flex-wrap items-center justify-between py-3 px-4 rounded-lg md:mx-0 w-full h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3${
+      isDark ? ' bg-grey-600' : ' bg-white'
+    }${isAudio ? ' md:mt-2.5' : ' md:mt-4'}`
+
+    const textColorClass = isDark ? 'text-dark-7' : 'text-grey-600'
+
+    const buttonClass = `h-8 rounded border border-green-500${
+      isDark ? ' text-green-300' : ' bg-white text-green-500'
+    }`
+
+    const buttonTextClass = `text-xs md:text-sm font-bold px-4${
+      isDark ? ' text-green-300' : ' text-green-500'
+    }`
+
     return html`
-      <div
-        class="flex flex-wrap items-center justify-between ${this.isDark
-          ? 'bg-grey-600'
-          : 'bg-white'} py-3 px-4 rounded-lg md:mx-0 w-full h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4"
-      >
+      <div class="${containerClass}">
         <div class="flex flex-col">
           <div class="flex items-center">
             <h5 class="text-base md:text-lg font-bold text-orange-400">
               ${formatRupiah(product.price)}
             </h5>
-            <h6
-              class="text-xs md:text-base ${this.isDark
-                ? 'text-dark-7'
-                : 'text-grey-600'} font-bold pl-1"
-            >
+            <h6 class="text-xs md:text-base font-bold pl-1 ${textColorClass}">
               / ${product.periode}
             </h6>
           </div>
           ${product.savingPrice
             ? html`
                 <div class="flex items-center">
-                  <p
-                    class="text-xs ${this.isDark
-                      ? 'text-dark-7'
-                      : 'text-grey-600'}"
-                  >
+                  <p class="text-xs ${textColorClass}">
                     hanya
                     <span class="text-orange-400"
                       >${formatRupiah(product.savingPrice)}</span
@@ -910,16 +911,9 @@ export class KompasIdPaywallBody extends LitElement {
               product.price,
               product.position
             )}
-          class="h-8 ${!this.isDark &&
-          'bg-white'} border border-green-500 rounded"
+          class="${buttonClass}"
         >
-          <h6
-            class="text-xs md:text-sm ${this.isDark
-              ? 'text-green-300'
-              : 'text-green-500'} font-bold px-4"
-          >
-            Langganan
-          </h6>
+          <h6 class="${buttonTextClass}">Langganan</h6>
         </button>
       </div>
     `
@@ -927,7 +921,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-4">
+      <div class="flex flex-col w-full items-center mt-8 md:mt-2 px-4">
         ${data.memberships.map(item =>
           item.isHighlight
             ? this.primaryPackages(item)
@@ -970,12 +964,10 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private helpDesk() {
+    const textColorClass = this.isDark ? 'text-dark-7' : 'text-white'
+
     return html`
-      <div
-        class="${this.isDark
-          ? 'text-dark-7'
-          : 'text-white'} self-center text-xs md:text-sm"
-      >
+      <div class="self-center text-xs md:text-sm ${textColorClass}">
         Butuh bantuan? Hubungi
         <button
           @click=${this.customerServiceClicked}
@@ -988,11 +980,14 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private userAction() {
+    const isAudio = this.type === 'audio'
+    const paddingClass = isAudio ? 'md:py-3.5' : 'md:py-6'
+    const marginClass = isAudio ? 'md:mt-4' : 'md:mt-8'
+    const backgroundClass = this.isDark ? 'bg-dark-4' : 'bg-blue-600'
+
     return html`
       <div
-        class="flex py-5 px-8 md:py-6 ${this.isDark
-          ? 'bg-dark-4'
-          : 'bg-blue-600'} w-full justify-evenly rounded-b-xl mt-6 md:mt-8 relative"
+        class="flex py-5 px-8 w-full justify-evenly rounded-b-xl mt-6 relative ${paddingClass} ${marginClass} ${backgroundClass}"
       >
         ${this.helpDesk()}
       </div>
@@ -1000,56 +995,55 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private introductoryPrice() {
+    const textColorClass = this.isDark ? 'text-dark-7' : 'text-grey-600'
     return html` <div
       class="flex space-x-1 h-5 md:h-max overflow-hidden md:flex-col md:space-x-0 items-center md:items-start md:justify-center"
     >
       <h5 class="text-base md:text-lg font-bold text-orange-400">Rp 10.000</h5>
-      <p class="text-xs ${this.isDark ? 'text-dark-7' : 'text-grey-600'}">
-        untuk 1 bulan pertama
-      </p>
+      <p class="text-xs ${textColorClass}">untuk 1 bulan pertama</p>
     </div>`
   }
 
   private swgRegonText() {
-    return html`<p
-      class="text-xs leading-4 md:max-w-[137px] ${this.isDark
-        ? 'text-dark-7'
-        : 'text-grey-600'}"
-    >
+    const textColorClass = this.isDark ? 'text-dark-7' : 'text-grey-600'
+    return html`<p class="text-xs leading-4 md:max-w-[137px] ${textColorClass}">
       Berlangganan lebih mudah dengan Google
     </p>`
   }
 
   private swgPackageSection() {
+    const { isDark } = this
+    const isAudio = this.type === 'audio'
+
+    const containerClass = `flex flex-col space-y-2 md:space-x-2 md:space-y-0 md:flex-row justify-between items-center py-3 px-4 rounded-lg md:mx-0 w-full h-[76px] md:h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3${
+      isDark ? ' bg-grey-600' : ' bg-white'
+    }${isAudio ? ' md:mt-2.5' : ' md:mt-4'}`
+
+    const buttonClass = `border space-x-2 justify-center border-grey-400 rounded-md px-[22px] md:px-6 shadow-sm flex h-max flex-row flex-nowrap py-[5.6px] md:py-1.5 items-center${
+      isDark ? ' bg-grey-600' : ' bg-grey-100 border-grey-100'
+    }`
+
+    const textColorClass = isDark ? 'text-dark-7' : 'text-grey-500'
+
+    const googleImageSrc = 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'
+
     return html`
-      <div
-        class="flex flex-col space-y-2 md:space-x-2 md:space-y-0 md:flex-row justify-between items-center ${this
-          .isDark
-          ? 'bg-grey-600'
-          : 'bg-white'} py-3 px-4 rounded-lg md:mx-0 w-full h-[76px] md:h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4"
-      >
+      <div class="${containerClass}">
         ${this.isEntitledForIntroductoryPrice
           ? this.introductoryPrice()
           : this.swgRegonText()}
         <div>
-          <button
-            class="${this.isDark
-              ? 'bg-grey-600'
-              : 'bg-grey-100 border-grey-100'} border space-x-2 justify-center border-grey-400 rounded-md px-[22px] md:px-6 shadow-sm flex h-max flex-row flex-nowrap py-[5.6px] md:py-1.5 items-center"
-            id="subscribe-with-google"
-          >
+          <button class="${buttonClass}" id="subscribe-with-google">
             <p
-              class="${this.isDark
-                ? 'text-dark-7'
-                : 'text-grey-500'} text-[11px] md:text-xs whitespace-nowrap w-full"
+              class="text-[11px] md:text-xs whitespace-nowrap w-full ${textColorClass}"
             >
               Subscribe with
             </p>
             <img
               class="object-scale-down h-[17px] md:h-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'}
+              src=${googleImageSrc}
               alt="subscribe with google"
             />
           </button>
@@ -1069,22 +1063,30 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private freeTrialPopUp() {
+    const { isDark } = this
+
+    const googlePlayBadgeSrc = isDark
+      ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20Google%20Play_Dark%20Mode.svg'
+      : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20Google%20Play_Light%20Mode.svg'
+
+    const appStoreBadgeSrc = isDark
+      ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20App%20Store_Dark%20Mode.svg'
+      : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20App%20Store_Light%20Mode.svg'
+
     return html`
       <div
         id="freeTrialPopup"
         class="fixed w-full h-full inset-0 flex justify-center items-center z-50 bg-black bg-opacity-75 hidden"
       >
         <div
-          class="${this.isDark
+          class="rounded w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 2xl:w-1/4 p-6 text-center ${isDark
             ? 'bg-dark-4'
-            : 'bg-white'} rounded w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 2xl:w-1/4 p-6 text-center"
+            : 'bg-white'}"
         >
           <div class="w-full flex justify-end px-2">
             <button
               @click=${this.closeFreeTrialPopup}
-              class="w-8 h-8 pl-4 ${this.isDark
-                ? 'text-grey-300'
-                : 'text-grey-400'}"
+              class="w-8 h-8 pl-4 ${isDark ? 'text-grey-300' : 'text-grey-400'}"
             >
               ${unsafeSVG(getFontAwesomeIcon('fas', 'xmark', 24, 24))}
             </button>
@@ -1098,16 +1100,16 @@ export class KompasIdPaywallBody extends LitElement {
             </div>
           </div>
           <p
-            class="font-bold text-lg ${this.isDark
+            class="font-bold text-lg mt-4 ${isDark
               ? 'text-white'
-              : 'text-grey-600'} mt-4"
+              : 'text-grey-600'}"
           >
             Coba Gratis Kompas.id di Aplikasi
           </p>
           <div
-            class="${this.isDark
+            class="hidden lg:block lg:flex flex rounded mt-4 px-8 py-4 items-center ${isDark
               ? 'bg-dark-3 border border-dark-9'
-              : 'bg-white border border-grey-300'} hidden lg:block lg:flex flex rounded mt-4 px-8 py-4 items-center"
+              : 'bg-white border border-grey-300'}"
           >
             <div class="w-1/3 flex mr-6">
               <img
@@ -1116,18 +1118,18 @@ export class KompasIdPaywallBody extends LitElement {
               />
             </div>
             <div
-              class="w-2/3 text-base ${this.isDark
+              class="w-2/3 text-base text-left ${isDark
                 ? 'text-dark-7'
-                : 'text-grey-600'} text-left"
+                : 'text-grey-600'}"
             >
               Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR
               dengan ponsel atau tablet untuk mengunduh aplikasi.
             </div>
           </div>
           <div
-            class="text-base ${this.isDark
+            class="text-base text-center lg:hidden px-2 md:px-8 ${isDark
               ? 'text-dark-7'
-              : 'text-grey-600'} text-center lg:hidden px-2 md:px-8"
+              : 'text-grey-600'}"
           >
             Dapatkan akses gratis selama 3 hari ke konten dan fitur premium
             Kompas.id di aplikasi.
@@ -1136,33 +1138,21 @@ export class KompasIdPaywallBody extends LitElement {
             <a
               href="https://play.google.com/store/apps/details?id=id.kompas.app"
               target="_blank"
-              ><img
-                src="${this.isDark
-                  ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20Google%20Play_Dark%20Mode.svg'
-                  : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20Google%20Play_Light%20Mode.svg'}"
-                alt="Google Play Badge"
+              ><img src="${googlePlayBadgeSrc}" alt="Google Play Badge"
             /></a>
             <a
               href="https://apps.apple.com/id/app/kompas-id/id1242195037?l=id"
               target="_blank"
-              ><img
-                src="${this.isDark
-                  ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20App%20Store_Dark%20Mode.svg'
-                  : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/Button_Download%20App%20Store_Light%20Mode.svg'}"
-                alt="iOS App Store Badge"
+              ><img src="${appStoreBadgeSrc}" alt="iOS App Store Badge"
             /></a>
           </div>
           <button
             onclick="window.open('https://app.komp.as/langganan', '_blank')"
-            class="h-12 ${this.isDark
+            class="h-12 rounded-md mt-4 flex w-full items-center justify-center lg:hidden ${isDark
               ? 'bg-green-300'
-              : 'bg-green-500'} rounded-md mt-4 flex w-full items-center justify-center lg:hidden"
+              : 'bg-green-500'}"
           >
-            <h6
-              class="${this.isDark
-                ? 'text-dark-5'
-                : 'text-white'} font-bold p-4"
-            >
+            <h6 class="font-bold p-4 ${isDark ? 'text-dark-5' : 'text-white'}">
               Unduh Sekarang
             </h6>
           </button>
@@ -1177,9 +1167,10 @@ export class KompasIdPaywallBody extends LitElement {
     if (packages.freeTrial) {
       return html`
         <div
-          class="flex flex-wrap items-center justify-between ${this.isDark
+          class="flex flex-wrap items-center justify-between py-3 px-4 rounded-lg md:mx-0 w-full h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4 ${this
+            .isDark
             ? 'bg-grey-600'
-            : 'bg-white'} py-3 px-4 rounded-lg md:mx-0 w-full h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4"
+            : 'bg-white'}"
         >
           <div class="flex flex-col">
             <div class="flex items-center">
@@ -1197,13 +1188,13 @@ export class KompasIdPaywallBody extends LitElement {
           </div>
           <button
             @click=${this.openFreeTrialPopup}
-            class="h-8 ${!this.isDark &&
-            'bg-white'} border border-green-500 rounded"
+            class="h-8 border border-green-500 rounded ${!this.isDark &&
+            'bg-white'}"
           >
             <h6
-              class="text-xs md:text-sm ${this.isDark
+              class="text-xs md:text-sm font-bold px-4 ${this.isDark
                 ? 'text-green-300'
-                : 'text-green-500'} font-bold px-4"
+                : 'text-green-500'}"
             >
               Coba Gratis
             </h6>
@@ -1219,27 +1210,34 @@ export class KompasIdPaywallBody extends LitElement {
    */
 
   render() {
+    const isEpaper = this.type === 'epaper'
+    const isAudio = this.type === 'audio'
+    const { isDark } = this
+    const { isLogin } = this
+
+    const wrapperBodyClass = `wrapper-body
+      ${isEpaper ? 'bg-transparent mx-2' : ''}
+      ${
+        isAudio
+          ? 'fixed w-full h-full inset-0 flex justify-center items-center z-index-max bg-black bg-opacity-75'
+          : ''
+      }`
+      .trim()
+      .replace(/\s+/g, ' ')
+
+    const containerClass = `flex w-full flex-col items-center justify-center rounded-xl pt-6 relative ${
+      isDark ? 'bg-dark-3' : 'bg-blue-100'
+    } ${isAudio ? 'md:pt-5' : 'md:pt-8'}`
+
+    const borderClass = isDark ? 'border-dark-8' : 'border-blue-200'
+
     return html`
-      <div
-        class="${this.type === 'epaper'
-          ? 'bg-transparent wrapper-body mx-2'
-          : 'wrapper-body'}
-          ${this.type === 'audio'
-          ? `fixed w-full h-full inset-0 flex justify-center items-center z-50 bg-black bg-opacity-75`
-          : 'wrapper-body'}"
-      >
+      <div class="${wrapperBodyClass}">
         <div
           class="flex flex-col justify-center items-center w-full max-w-screen-sm my-5 px-2 relative"
         >
-          ${this.type === 'epaper' || this.type === 'audio'
-            ? this.topNavigator(this.type)
-            : nothing}
-          <div
-            class="flex w-full flex-col items-center justify-center ${this
-              .isDark
-              ? 'bg-dark-3'
-              : 'bg-blue-100'} rounded-xl pt-6 md:pt-8 relative"
-          >
+          ${isEpaper || isAudio ? this.topNavigator(this.type) : nothing}
+          <div class="${containerClass}">
             ${this.headerSection(
               this.type,
               this.paywallData?.informations?.title ?? ''
@@ -1251,12 +1249,12 @@ export class KompasIdPaywallBody extends LitElement {
               this.paywallData?.packages ?? ({} as Packages)
             )}
             ${this.informationPackages()}
-            ${!this.isLogin
+            ${!isLogin
               ? html`
                   <div
-                    class="border-b ${this.isDark
-                      ? 'border-dark-8'
-                      : 'border-blue-200'} w-1/5 my-4 flex justify-center"
+                    class="border-b w-1/5 flex justify-center ${borderClass} ${isAudio
+                      ? 'my-4 md:my-3'
+                      : 'my-4'}"
                   ></div>
                   ${this.registrationSection(this.type)}
                 `