@kompasid/lit-web-components 0.9.42 → 0.9.44

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

@@ -15,7 +15,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'
@@ -635,80 +635,109 @@ export class KompasIdPaywallBody extends LitElement {
 
   private headerSection(type: PaywallType, title: string) {
     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 {
       buttonContent = nothing
     }
 
-    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 ${
+    const headerClass = `text-base flex justify-center self-center md:block md:text-xl ${buttonTextColorClass} text-center font-lora font-bold tracking-normal max-w-xs sm:max-w-lg md:w-full md:max-w-[492px] ${
       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>
     `
   }
 
+  private excerptSection(excerpt: string) {
+    return excerpt
+      ? html` <p
+          class="text-sm md:text-base ${this.isDark
+            ? 'text-white'
+            : 'text-grey-600'} font-sans mt-2 md:mt-4 max-w-[492px] text-center"
+        >
+          ${excerpt}
+        </p>`
+      : nothing
+  }
+
   private descriptionSection(data: Array<string>) {
-    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'
+    const borderColorDefault = isPro ? 'border-grey-300' : 'border-blue-200'
+    const borderColorClass = this.isDark ? 'border-white' : borderColorDefault
 
-    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>`
+    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
   }
 
   private ctaPackages() {
-    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 = this.paywallData?.informations?.cta
       ? this.paywallData?.informations?.cta.text
       : ''
@@ -717,7 +746,7 @@ export class KompasIdPaywallBody extends LitElement {
       : 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}"
@@ -733,7 +762,8 @@ export class KompasIdPaywallBody extends LitElement {
     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({
@@ -744,47 +774,29 @@ export class KompasIdPaywallBody extends LitElement {
         >
           Masuk
         </button>
-        <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'
     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>
     `
@@ -836,45 +848,75 @@ export class KompasIdPaywallBody extends LitElement {
     `
   }
 
-  private primaryPackages(product: Product) {
+  private renderPackage(
+    product: Product,
+    isHighlight: boolean,
+    isButtonSolid: boolean
+  ) {
     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'
-    }`
+    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 buttonTextClass = `text-xs md:text-sm font-bold py-2 px-4${
-      isDark ? ' text-black' : ' text-white'
-    }`
+    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 leading-none">
               ${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} leading-none">
               / ${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}
@@ -892,82 +934,28 @@ export 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>
-    `
-  }
-
-  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="${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
-            ? html`
-                <div class="flex items-center">
-                  <p class="text-xs ${textColorClass}">
-                    hanya
-                    <span class="text-orange-400"
-                      >${formatRupiah(product.savingPrice)}</span
-                    >
-                    / bulan
-                  </p>
+        ${isHighlight
+          ? html`
+              <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>
-              `
-            : 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>
+            `
+          : nothing}
       </div>
     `
   }
 
   private packagesSection(data: Packages) {
     return html`
-      <div class="flex flex-col w-full items-center mt-8 md:mt-2 px-4">
+      <div
+        class="flex flex-col w-full items-center gap-2 md:gap-3 mt-4 md:mt-5"
+      >
         ${data.memberships.map(item =>
-          item.isHighlight
-            ? this.primaryPackages(item)
-            : this.secondaryPackages(item)
+          this.renderPackage(item, item.isHighlight, item.isButtonSolid)
         )}
         ${this.freeTrialPackageSection()} ${this.freeTrialPopUp()}
         ${this.packages.swgEnable ? this.swgPackageSection() : nothing}
@@ -975,31 +963,47 @@ export class KompasIdPaywallBody extends LitElement {
     `
   }
 
+  // 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>
+  //   `
+  // }
+
   private topNavigator(type: PaywallType) {
     let icon: string
     let buttonText: string
     let clickAction: Function
 
     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>
     `
@@ -1022,14 +1026,16 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private 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>
@@ -1039,17 +1045,21 @@ 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: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 leading-none">
           ${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} leading-none">
+                ${this.packages.swgContent.introductory.duration}
+              </h6>
+            `
+          : nothing}
       </div>
-      <p class="text-xs ${textColorClass}">
+      <p class="text-xs flex ${textColorClass} leading-none">
         ${this.packages.swgContent.introductory.description}
       </p>
     </div>`
@@ -1064,14 +1074,13 @@ export class KompasIdPaywallBody extends LitElement {
 
   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${
+    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'
-    }${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'
+      isDark ? ' bg-grey-600' : ' bg-white border-grey-100'
     }`
 
     const textColorClass = isDark ? 'text-dark-7' : 'text-grey-500'
@@ -1257,7 +1266,7 @@ export class KompasIdPaywallBody extends LitElement {
    */
 
   render() {
-    const isEpaper = this.type === 'epaper'
+    const isEpaper = this.type === 'epaper' || this.type === 'proMiningOutlook'
     const isAudio = this.type === 'audio'
     const { isDark } = this
     const { isLogin } = this
@@ -1266,45 +1275,47 @@ export class KompasIdPaywallBody extends LitElement {
       ${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 isPro =
+      this.type === 'proMiningArticle' || this.type === 'proMiningOutlook'
+
+    const backgroundDefault = isPro ? 'bg-grey-100' : 'bg-blue-100'
+    const backgroundClass = isDark ? 'bg-dark-3' : backgroundDefault
 
-    const borderClass = isDark ? 'border-dark-8' : 'border-blue-200'
+    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,
-              this.paywallData?.informations?.title ?? ''
-            )}
-            ${this.descriptionSection(
-              this.paywallData?.informations?.description ?? []
-            )}
-            ${this.packagesSection(
-              this.paywallData?.packages ?? ({} as Packages)
-            )}
-            ${this.ctaPackages()}
+            <div class="px-6 md:px-0 items-center flex flex-col w-full">
+              ${this.headerSection(
+                this.type,
+                this.paywallData?.informations?.title ?? ''
+              )}
+              ${this.excerptSection(
+                this.paywallData?.informations?.excerpt ?? ''
+              )}
+              ${this.packagesSection(
+                this.paywallData?.packages ?? ({} as Packages)
+              )}
+              ${this.ctaPackages()}
+              ${this.descriptionSection(
+                this.paywallData?.informations?.description ?? []
+              )}
+            </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>

package/src/components/kompasid-paywall-body/readme.md

@@ -21,6 +21,9 @@
 | `tracker_content_title`        | `tracker_content_title`        |             | `string`                | `''`        |
 | `tracker_content_type`         | `tracker_content_type`         |             | `string`                | `''`        |
 | `tracker_content_publisher`    | `tracker_content_publisher`    |             | `string`                | `''`        |
+| `tracker_content_published_date`| `tracker_content_published_date`|             | `string`              | `''`        |
+| `tracker_content_tags`         | `tracker_content_tags`         |             | `string`                                       | `''`        |
+| `tracker_content_variant`      | `tracker_content_variant`      |             | `string`                | `''`        |
 | `tracker_epaper_edition`       | `tracker_epaper_edition`       |             | `string`                | `''`        |
 | `tracker_metered_wall_balance` | `tracker_metered_wall_balance` |             | `number`                | `0`         |
 | `tracker_metered_wall_type`    | `tracker_metered_wall_type`    |             | `string`                | `''`        |