@kompasid/lit-web-components 0.9.41 → 0.9.43

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

@@ -8,7 +8,7 @@ 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';
-import { redirectToRegister, redirectToLogin } from '../../utils/cta.js';
+import { redirectToLogin } from '../../utils/cta.js';
 import { customFetch } from '../../utils/customFetch.js';
 import { getCookie } from '../../utils/getCookies.js';
 import { getLoginGuest } from '../../utils/api/getLoginGuest.js';
@@ -501,31 +501,33 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
      */
     headerSection(type, title) {
         let buttonContent;
-        const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600';
+        const isPro = this.type === 'proMiningArticle' || this.type === 'proMiningOutlook';
+        const textColorDefault = isPro ? 'text-grey-600' : 'text-blue-600';
+        const textColorClass = this.isDark ? 'text-blue-300' : textColorDefault;
         const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600';
         const isPrevHistoryExist = window.history.length > 1;
         if (type === 'epaper' && isPrevHistoryExist) {
             buttonContent = html ` <button
         @click=${this.redirectToPrevUrl}
-        class="hidden md:block w-8 h-8 pl-4 ${textColorClass}"
+        class="absolute left-2.5 -top-1.5 hidden md:flex w-10 h-10 justify-center items-center ${textColorClass}"
       >
-        ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
+        ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left', 20, 20))}
       </button>`;
         }
         else if (type === 'proMiningOutlook' && isPrevHistoryExist) {
             buttonContent = html ` <button
         @click=${this.redirectToPrevUrl}
-        class="hidden md:block w-8 h-8 pl-4 ${textColorClass}"
+        class="absolute left-2.5 -top-1.5 hidden md:flex w-10 h-10 justify-center items-center ${textColorClass}"
       >
-        ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
+        ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left', 20, 20))}
       </button>`;
         }
         else if (type === 'audio') {
             buttonContent = html ` <button
         @click=${this.togglePaywall}
-        class="hidden md:block w-8 h-8 pl-4 ${textColorClass}"
+        class="absolute left-2.5 -top-1.5 hidden md:flex w-10 h-10 justify-center items-center ${textColorClass}"
       >
-        ${unsafeSVG(getFontAwesomeIcon('fas', 'xmark', 24, 24))}
+        ${unsafeSVG(getFontAwesomeIcon('fas', 'xmark', 28, 28))}
       </button>`;
         }
         else {
@@ -533,40 +535,64 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         }
         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">
+      <div class="flex w-full items-start justify-center relative  md:px-10">
         ${buttonContent}
         <h4 class=${headerClass}>${title}</h4>
-        ${type === 'epaper' || type === 'audio'
-            ? html `<div class="w-10 hidden md:flex"></div>`
-            : nothing}
       </div>
     `;
     }
+    excerptSection(excerpt) {
+        return excerpt
+            ? html ` <p
+          class="text-sm md:text-base ${this.isDark
+                ? 'text-white'
+                : 'text-grey-600'} font-sans mt-2 md:mt-4  text-center"
+        >
+          ${excerpt}
+        </p>`
+            : nothing;
+    }
     descriptionSection(data) {
-        const spaceYClass = this.type === 'audio' ? 'space-y-2 md:space-y-1' : 'space-y-2';
+        const isPro = this.type === 'proMiningArticle' || this.type === 'proMiningOutlook';
         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 px-4">
-      <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="${textColorClass}">
-                  ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 12, 12))}
-                </div>
-                <h6
-                  class="text-sm md:text-base ml-0.5 md:ml-1 ${buttonTextColorClass}"
-                >
-                  ${item}
-                </h6>
-              </div>
-            `)}
-      </div>
-    </div>`;
+        const borderColorDefault = isPro ? 'border-grey-300' : 'border-blue-200';
+        const borderColorClass = this.isDark ? 'border-white' : borderColorDefault;
+        return data.length
+            ? html `<div
+          class="md:max-w-[492px] flex flex-col items-center px-0 lg:px-4 py-4 lg:py-5 w-full border-b border-t ${borderColorClass} mt-4 lg:mt-5"
+        >
+          <div>
+            <div
+              class="font-bold font-sans ${buttonTextColorClass} w-full text-left"
+            >
+              Keuntungan Eksklusif yang Anda Dapatkan:
+            </div>
+            <div class="flex flex-col mt-2 md:mt-3 gap-2 text-left">
+              ${data.map(item => html `
+                    <div class="flex items-center text-left">
+                      <div
+                        class="${textColorClass} h-4 w-4 md:h-5 md:w-5 flex items-center justify-center"
+                      >
+                        ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 16, 16))}
+                      </div>
+                      <h6
+                        class="text-sm md:text-base ml-1 md:ml-2 ${buttonTextColorClass}"
+                      >
+                        ${item}
+                      </h6>
+                    </div>
+                  `)}
+            </div>
+          </div>
+        </div>`
+            : nothing;
     }
     ctaPackages() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        const marginTopClass = this.type === 'audio' ? 'mt-4 md:mt-2' : 'mt-4';
-        const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600';
+        const isPro = this.type === 'proMiningArticle' || this.type === 'proMiningOutlook';
+        const textColorDefault = isPro ? 'text-grey-600' : 'text-blue-600';
+        const textColorClass = this.isDark ? 'text-blue-300' : textColorDefault;
         const getCtaText = ((_b = (_a = this.paywallData) === null || _a === void 0 ? void 0 : _a.informations) === null || _b === void 0 ? void 0 : _b.cta)
             ? (_d = (_c = this.paywallData) === null || _c === void 0 ? void 0 : _c.informations) === null || _d === void 0 ? void 0 : _d.cta.text
             : '';
@@ -574,7 +600,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
             ? (_h = (_g = this.paywallData) === null || _g === void 0 ? void 0 : _g.informations) === null || _h === void 0 ? void 0 : _h.cta.show
             : false;
         return showCta
-            ? html ` <div class="flex justify-center ${marginTopClass}">
+            ? html ` <div class="flex justify-center mt-2 md:mt-3">
           <button
             @click=${this.otherPackagesClicked}
             class="text-sm md:text-base font-bold underline ${textColorClass}"
@@ -588,7 +614,8 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600';
         const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600';
         return html `
-      <div>
+      <div class="mt-4 lg:mt-5">
+        <span class="${buttonTextColorClass}">Sudah berlangganan?</span>
         <button
           @click=${() => redirectToLogin({
             loc: 'hard_paywall',
@@ -598,44 +625,26 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         >
           Masuk
         </button>
-        <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';
         const isPro = this.type === 'proMiningArticle' || this.type === 'proMiningOutlook';
+        const textColorDefault = isPro ? 'text-grey-600' : 'text-blue-600';
+        const textColorClass = this.isDark ? 'text-blue-300' : textColorDefault;
+        const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600';
         return html `
       <div
-        class="flex flex-col items-center justify-center text-sm md:text-base"
+        class="flex flex-col items-center justify-center text-sm md:text-base mt-4 lg:mt-5"
       >
-        ${!isPro
-            ? html `
-              <div>
-                <button
-                  @click=${() => redirectToRegister('hard_paywall')}
-                  class="font-bold underline ${textColorClass}"
-                >
-                  Daftar
-                </button>
-                <span class="${buttonTextColorClass}"
-                  >untuk kuota artikel gratis</span
-                >
-              </div>
-            `
-            : nothing}
         <div>
-          ${!isPro
-            ? html ` <span class="${buttonTextColorClass}">atau</span>`
-            : nothing}
+          <span class="${buttonTextColorClass}">Sudah berlangganan?</span>
           <button
             @click=${() => redirectToLogin({ loc: 'hard_paywall' })}
             class="font-bold underline ${textColorClass}"
           >
             Masuk
           </button>
-          <span class="${buttonTextColorClass}">jika sudah punya akun.</span>
         </div>
       </div>
     `;
@@ -681,34 +690,70 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
       </div>
     `;
     }
-    primaryPackages(product) {
+    renderPackage(product, isHighlight, isButtonSolid) {
         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 containerClass = `px-4 flex flex-wrap items-center justify-between rounded-lg md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 min-h-[68px]
+      ${isDark ? ' bg-grey-600' : ' bg-white'}
+      ${isHighlight ? 'border border-yellow-400 mt-2' : ''} 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'}`;
+        let buttonBgColorClass = '';
+        if (isButtonSolid) {
+            buttonBgColorClass = isDark
+                ? 'bg-green-300 border border-green-400'
+                : 'bg-green-500';
+        }
+        else {
+            buttonBgColorClass = isDark
+                ? ' border border-green-500 text-green-300'
+                : ' border border-green-500 bg-white text-green-500';
+        }
+        const buttonClass = `h-8 rounded ${buttonBgColorClass} flex items-center`;
+        let buttonTextColor = '';
+        if (isButtonSolid) {
+            buttonTextColor = isDark ? ' text-black' : ' text-white';
+        }
+        else if (isDark) {
+            buttonTextColor = 'text-green-300';
+        }
+        else {
+            buttonTextColor = 'text-green-500';
+        }
+        const buttonTextClass = `text-xs md:text-sm font-bold py-2 px-4 ${buttonTextColor}`;
         return html `
       <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">
+        <div class="flex flex-col gap-1">
+          <div class="flex items-baseline">
+            <h5 class="text-base font-bold text-orange-400">
               ${formatRupiah(product.price)}
             </h5>
-            <h6 class="text-xs md:text-base font-bold pl-1 ${textColorClass}">
+            <h6 class="text-xs font-bold pl-1 ${textColorClass}">
               / ${product.periode}
             </h6>
           </div>
-          ${product.savingPrice
+          ${product.priceSlice || product.saveLabel
             ? html `
-                <div class="flex items-center">
-                  <p class="text-xs ${textColorClass}">
-                    hanya
-                    <span class="text-orange-400"
-                      >${formatRupiah(product.savingPrice)}</span
-                    >
-                    / bulan
-                  </p>
+                <div class="flex flex-row gap-2">
+                  ${product.priceSlice
+                ? html `
+                        <div class="flex items-center text-xs font-sans">
+                          <span
+                            class="${isDark
+                    ? 'text-white'
+                    : 'text-grey-400'} line-through"
+                            >${formatRupiah(product.priceSlice)}</span
+                          >
+                        </div>
+                      `
+                : nothing}
+                  ${product.saveLabel
+                ? html `
+                        <div
+                          class="flex font-bold items-center text-xs font-sans bg-red-100 rounded p-1"
+                        >
+                          <span class="text-red-500">${product.saveLabel}</span>
+                        </div>
+                      `
+                : nothing}
                 </div>
               `
             : nothing}
@@ -719,90 +764,70 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         >
           <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">
-            <b class="text-grey-600">Harga Terbaik</b>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    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="${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 font-bold pl-1 ${textColorClass}">
-              / ${product.periode}
-            </h6>
-          </div>
-          ${product.savingPrice
+        ${isHighlight
             ? html `
-                <div class="flex items-center">
-                  <p class="text-xs ${textColorClass}">
-                    hanya
-                    <span class="text-orange-400"
-                      >${formatRupiah(product.savingPrice)}</span
-                    >
-                    / bulan
-                  </p>
+              <div class="absolute -top-2 left-4">
+                <div
+                  class="rounded bg-yellow-300 px-2 h-4 items-center text-xs"
+                >
+                  <b class="text-grey-600">Harga Terbaik</b>
                 </div>
-              `
+              </div>
+            `
             : nothing}
-        </div>
-        <button
-          @click=${() => this.redirectToCheckout(product.url, product.package, product.subscriptionId, product.price, product.position)}
-          class="${buttonClass}"
-        >
-          <h6 class="${buttonTextClass}">Langganan</h6>
-        </button>
       </div>
     `;
     }
     packagesSection(data) {
         return html `
-      <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))}
+      <div
+        class="flex flex-col w-full items-center gap-2 md:gap-3 mt-4 md:mt-5"
+      >
+        ${data.memberships.map(item => this.renderPackage(item, item.isHighlight, item.isButtonSolid))}
         ${this.freeTrialPackageSection()} ${this.freeTrialPopUp()}
         ${this.packages.swgEnable ? this.swgPackageSection() : nothing}
       </div>
     `;
     }
+    // private packagesSection(data: Packages) {
+    //   return html`
+    //     <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)
+    //       )}
+    //       ${this.freeTrialPackageSection()} ${this.freeTrialPopUp()}
+    //       ${this.packages.swgEnable ? this.swgPackageSection() : nothing}
+    //     </div>
+    //   `
+    // }
     topNavigator(type) {
         let icon;
         let buttonText;
         let clickAction;
         if (type === 'audio') {
-            icon = getFontAwesomeIcon('fas', 'xmark');
+            icon = getFontAwesomeIcon('fas', 'xmark', 12, 12);
             buttonText = 'Tutup';
             clickAction = this.togglePaywall.bind(this);
         }
         else {
-            icon = getFontAwesomeIcon('fas', 'arrow-left');
+            icon = getFontAwesomeIcon('fas', 'arrow-left', 10, 10);
             buttonText = 'Kembali';
             clickAction = this.redirectToPrevUrl.bind(this);
         }
         return html `
-      <div class="flex md:hidden w-full pb-4">
+      <div class="flex md:hidden w-full">
         <button
           @click=${clickAction}
-          class="text-xs md:text-lg text-white flex flex-row"
+          class="text-xs md:text-lg font-sans font-bold text-white flex flex-row h-8 px-4 items-center gap-1"
         >
-          <div class="icon-lg icon-white w-4 h-4 mr-3.5 md:mr-5 pt-0.5">
+          <div
+            class="icon-lg icon-white w-4 h-4 items-center justify-center flex"
+          >
             ${unsafeSVG(icon)}
           </div>
-          ${buttonText}
+          <span> ${buttonText} </span>
         </button>
       </div>
     `;
@@ -822,13 +847,14 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     `;
     }
     userAction() {
+        const isPro = this.type === 'proMiningArticle' || this.type === 'proMiningOutlook';
         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';
+        const backgroundDefault = isPro ? 'bg-grey-500' : 'bg-blue-600';
+        const backgroundClass = this.isDark ? 'bg-dark-4' : backgroundDefault;
         return html `
       <div
-        class="flex py-5 px-8 w-full justify-evenly rounded-b-xl mt-6 relative ${paddingClass} ${marginClass} ${backgroundClass}"
+        class="flex py-5 px-8 w-full justify-evenly rounded-b-xl mt-5 relative ${paddingClass} md:mt-7 ${backgroundClass}"
       >
         ${this.helpDesk()}
       </div>
@@ -837,17 +863,21 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     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:w-1/2 md:justify-center"
+      class="flex md:flex-col gap-1 items-center md:items-start md:w-1/2 md:justify-center"
     >
-      <div class="flex items-center">
-        <h5 class="text-base md:text-lg font-bold text-orange-400">
+      <div class="flex items-center gap-1 shrink-0">
+        <h5 class="text-base font-bold text-orange-400">
           ${this.packages.swgContent.introductory.price}
         </h5>
-        <h6 class="text-xs md:text-base font-bold pl-1 ${textColorClass}">
-          ${this.packages.swgContent.introductory.duration}
-        </h6>
+        ${this.packages.swgContent.introductory.duration
+            ? html `
+              <h6 class="text-xs font-bold ${textColorClass}">
+                ${this.packages.swgContent.introductory.duration}
+              </h6>
+            `
+            : nothing}
       </div>
-      <p class="text-xs ${textColorClass}">
+      <p class="text-xs flex ${textColorClass}">
         ${this.packages.swgContent.introductory.description}
       </p>
     </div>`;
@@ -860,9 +890,8 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     }
     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 containerClass = `flex flex-col md:flex-row gap-1 justify-center md:justify-between items-center px-4 rounded-lg md:mx-0 w-full min-h-[76px] md:min-h-[68px] max-w-xs md:max-w-sm md:w-3/5 ${isDark ? ' bg-grey-600' : ' bg-white'}`;
+        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-white border-grey-100'}`;
         const textColorClass = isDark ? 'text-dark-7' : 'text-grey-500';
         const googleImageSrc = isDark
             ? 'https://cdn-www.kompas.id/paywall-asset/google-white.png'
@@ -1039,45 +1068,44 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
      * Render Statement
      */
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        const isEpaper = this.type === 'epaper';
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const isEpaper = this.type === 'epaper' || this.type === 'proMiningOutlook';
         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'
+            ? 'fixed w-full h-full inset-0 flex justify-center items-center z-index-max bg-black bg-opacity-75 px-4 md:px-0'
             : ''}`
             .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';
+        const isPro = this.type === 'proMiningArticle' || this.type === 'proMiningOutlook';
+        const backgroundDefault = isPro ? 'bg-grey-100' : 'bg-blue-100';
+        const backgroundClass = isDark ? 'bg-dark-3' : backgroundDefault;
+        const containerClass = `flex w-full flex-col items-center justify-center rounded-xl md:pt-8 pt-6 relative ${backgroundClass}`;
+        // const borderClass = isDark ? 'border-dark-8' : 'border-blue-200'
         return html `
       <div class="${wrapperBodyClass}">
         <div
-          class="flex flex-col justify-center items-center w-full max-w-screen-sm my-5 relative"
+          class="flex flex-col justify-center items-center  w-full max-w-screen-sm my-5 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.ctaPackages()}
+            <div class="px-6 md:px-0 items-center flex flex-col w-full">
+              ${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.excerptSection((_f = (_e = (_d = this.paywallData) === null || _d === void 0 ? void 0 : _d.informations) === null || _e === void 0 ? void 0 : _e.excerpt) !== 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.ctaPackages()}
+              ${this.descriptionSection((_l = (_k = (_j = this.paywallData) === null || _j === void 0 ? void 0 : _j.informations) === null || _k === void 0 ? void 0 : _k.description) !== null && _l !== void 0 ? _l : [])}
+            </div>
             ${!isLogin
-            ? html `
-                  <div
-                    class="border-b w-1/5 flex justify-center ${borderClass} ${isAudio
-                ? 'my-4 md:my-3'
-                : 'my-4'}"
-                  ></div>
-                  ${this.registrationSection(this.type)}
-                `
+            ? html ` ${this.registrationSection(this.type)} `
             : nothing}
             ${this.userAction()}
           </div>
           ${this.isExtensionsOpened
-            ? this.paymentMobileExtension((_l = (_k = (_j = this.paywallData) === null || _j === void 0 ? void 0 : _j.payment) === null || _k === void 0 ? void 0 : _k.ekstension) !== null && _l !== void 0 ? _l : [])
+            ? this.paymentMobileExtension((_p = (_o = (_m = this.paywallData) === null || _m === void 0 ? void 0 : _m.payment) === null || _o === void 0 ? void 0 : _o.ekstension) !== null && _p !== void 0 ? _p : [])
             : nothing}
         </div>
       </div>