@kompasid/lit-web-components 0.7.4 → 0.7.6

package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js

@@ -488,12 +488,12 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
      */
     headerSection(type, title) {
         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>`;
@@ -501,9 +501,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         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>`;
@@ -511,7 +509,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         else {
             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 ${type === 'audio' && 'sm:px-16 md:px-20'}`;
+        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'}`;
         return html `
       <div class="flex w-full items-start justify-center">
         ${buttonContent}
@@ -523,17 +521,18 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     `;
     }
     descriptionSection(data) {
-        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>
@@ -543,18 +542,20 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     </div>`;
     }
     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>
     </div>`;
     }
     epaperRegistrationSection() {
+        const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600';
+        const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600';
         return html `
       <div>
         <button
@@ -562,49 +563,39 @@ let KompasIdPaywallBody = 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>
     `;
     }
     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>
     `;
@@ -617,19 +608,20 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     paymentMobileExtension(data) {
         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"
@@ -637,7 +629,7 @@ let KompasIdPaywallBody = 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 => html `<img
                   class="object-cover"
@@ -650,34 +642,27 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     `;
     }
     primaryPackages(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
@@ -689,18 +674,10 @@ let KompasIdPaywallBody = 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, product.package, product.subscriptionId, product.price, 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">
@@ -711,33 +688,27 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     `;
     }
     secondaryPackages(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
@@ -750,23 +721,16 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         </div>
         <button
           @click=${() => this.redirectToCheckout(product.url, product.package, product.subscriptionId, 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>
     `;
     }
     packagesSection(data) {
         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)
             : this.secondaryPackages(item))}
@@ -804,12 +768,9 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     `;
     }
     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}
@@ -821,65 +782,57 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     `;
     }
     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>
     `;
     }
     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>`;
     }
     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>`;
     }
     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>
@@ -898,22 +851,27 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         popup === null || popup === void 0 ? void 0 : popup.classList.add('hidden');
     }
     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>
@@ -927,16 +885,16 @@ let KompasIdPaywallBody = 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
@@ -945,18 +903,18 @@ let KompasIdPaywallBody = 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.
@@ -965,33 +923,21 @@ let KompasIdPaywallBody = 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>
@@ -1005,9 +951,10 @@ let KompasIdPaywallBody = 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">
@@ -1025,13 +972,13 @@ let KompasIdPaywallBody = 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>
@@ -1046,37 +993,36 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
      */
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        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, (_c = (_b = (_a = this.paywallData) === null || _a === void 0 ? void 0 : _a.informations) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '')}
             ${this.descriptionSection((_f = (_e = (_d = this.paywallData) === null || _d === void 0 ? void 0 : _d.informations) === null || _e === void 0 ? void 0 : _e.description) !== null && _f !== void 0 ? _f : [])}
             ${this.packagesSection((_h = (_g = this.paywallData) === null || _g === void 0 ? void 0 : _g.packages) !== null && _h !== void 0 ? _h : {})}
             ${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)}
                 `
@@ -1100,6 +1046,10 @@ KompasIdPaywallBody.styles = [
         align-items: center;
       }
 
+      .z-index-max {
+        z-index: 999999;
+      }
+
       .font-lora {
         font-family: 'Lora', 'Georgia', 'serif';
       }