@kompasid/lit-web-components 0.6.3 → 0.6.6

package/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts

@@ -0,0 +1,161 @@
+import { LitElement, html, css } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { truncate } from '../../utils/text.js'
+
+@customElement('kompasid-header-account-profile')
+export class KompasHeaderAccountProfile extends LitElement {
+  static styles = [
+    css`
+      .header-account--membership-icon {
+        position: absolute;
+        bottom: -2px;
+        right: -2px;
+      }
+    `,
+    TWStyles,
+  ]
+
+  @property({ type: String }) userInitialName = ''
+  @property({ type: Object }) userData = {}
+  @property({ type: String }) subscriptionUrl = ''
+  @property({ type: Number }) totalGracePeriod = 0
+
+  private renderSkeletonLoading() {
+    return html`
+      <div>
+        <div class="flex flex-row mb-5 items-center gap-4 leading-none">
+          <div
+            class="bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse"
+          ></div>
+          <div class="flex flex-col text-left w-40 gap-y-2">
+            <div class="h-3 rounded-sm w-full bg-grey-300 animate-pulse"></div>
+            <div class="h-3 rounded-sm w-full bg-grey-300 animate-pulse"></div>
+            <div class="h-3 rounded-sm w-full bg-grey-300 animate-pulse"></div>
+          </div>
+        </div>
+        <div>
+          <div class="h-6 rounded-sm w-full bg-grey-300 animate-pulse"></div>
+        </div>
+      </div>
+    `
+  }
+
+  private renderProfileContent() {
+    /**
+     * Expired Button Element
+     */
+    const subscribeButton = () => {
+      if (!(this.userData as any)?.updateMembership) {
+        return html``
+      }
+      const handleSubscribe = () => {
+        window.location.href = this.subscriptionUrl
+      }
+
+      return html`
+        <div class="w-full">
+          <button
+            onClick=${handleSubscribe}
+            class="w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-green-500 text-grey-100 font-bold text-base focus:outline-none"
+          >
+            ${(this.userData as any)?.updateMembership}
+          </button>
+        </div>
+      `
+    }
+    /**
+     * expired Info Element
+     */
+    const expiredInfo = () => {
+      const isNearExpired = (this.userData as any)?.isNearExpired
+      const expiredTextColor = isNearExpired
+        ? `text-orange-400`
+        : `text-grey-600`
+
+      return html`<p class="${expiredTextColor} font-bold">
+        ${(this.userData as any)?.expired}
+      </p>`
+    }
+
+    /**
+     * membership icon element, show if isMebership has truthy value
+     */
+    const membershipIcon = () => {
+      if (!(this.userData as any)?.isMembership) {
+        return html``
+      }
+
+      return html`
+        <div>
+          <img
+            class="header-account--membership-icon"
+            src="https://d3w4qaq4xm1ncv.cloudfront.net/global-header/crown-blue-10.svg"
+            alt="membership-crown-icon"
+          />
+        </div>
+      `
+    }
+
+    /**
+     * Active Info Element
+     */
+
+    const activeInfo = () => {
+      const isNearExpired = (this.userData as any)?.isNearExpired
+      const expiredTextColor = isNearExpired
+        ? `text-orange-400`
+        : `text-grey-600`
+
+      return html`<p class="capitalize text-sm ${expiredTextColor}">
+        ${(this.userData as any)?.activeInfo}
+      </p>`
+    }
+
+    return html`<div
+      class="active-info flex flex-col items-start leading-none text-left"
+    >
+      <div class="flex flex-row items-center gap-4">
+        <div
+          class="flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative"
+        >
+          <span class="capitalize text-2xl text-grey-100 font-bold"
+            >${this.userInitialName}</span
+          >
+          ${membershipIcon()}
+        </div>
+
+        <div class="flex flex-col text-left">
+          <p class="capitalize font-bold text-base text-blue-600">
+            ${truncate((this.userData as any)?.userName, 25)}
+          </p>
+          ${activeInfo()} ${expiredInfo()}
+        </div>
+      </div>
+
+      <div class="mt-4">
+        <!-- <kompas-grace-period
+          totalGracePeriod="{this.totalGracePeriod}"
+          isColoumn="{true}"
+          isShowButton="{true}"
+        /> -->
+      </div>
+
+      ${subscribeButton()}
+    </div>`
+  }
+
+  override async connectedCallback() {
+    super.connectedCallback()
+  }
+
+  render() {
+    return html`
+      <div class="flex flex-shrink-0 flex-col bg-blue-100 p-4">
+        ${!this.userData
+          ? this.renderSkeletonLoading()
+          : this.renderProfileContent()}
+      </div>
+    `
+  }
+}

package/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts

@@ -27,11 +27,10 @@ export class KompasMeteredWallRegister extends LitElement {
 
       .banner-content {
         gap: 55px;
-        justify-content: space-between;
       }
 
       .cont-banner-content {
-        gap: 201px;
+        justify-content: space-evenly;
       }
 
       .expanded-btn {
@@ -159,12 +158,13 @@ export class KompasMeteredWallRegister extends LitElement {
       <div>
         <div
           class="${this.isDesktop
-            ? 'cont-banner-content justify-center'
-            : null} flex flex-row justify-between"
+            ? 'cont-banner-content'
+            : 'justify-between'} flex flex-row"
         >
+          <div .hidden="${!this.isDesktop}" class="w-9 h-9"></div>
           <div class="banner-content flex flex-row">
             <div
-              class="text-base md:text-lg font-lora mb-3 mt-1 md:mb-0 md:mt-0 pr-14 md:px-0"
+              class="text-base md:text-lg font-lora mb-3 mt-1 pt-[5px] md:mb-0 md:mt-0 pr-14 md:px-0"
               .innerHTML=${this.setTemplate('title')}
             ></div>
             <div .hidden="${!this.isDesktop}" class="md:self-center btn-regis">
@@ -212,7 +212,7 @@ export class KompasMeteredWallRegister extends LitElement {
             class="text-sm md:text-base"
             .innerHTML=${this.setTemplate('description', 'expand')}
           ></p>
-          <div class="${this.isDesktop ? null : 'expanded-btn'} md:self-start">
+          <div class="${this.isDesktop ? 'expanded-btn' : null} md:self-start">
             ${this.registerButtonTemplate()}
           </div>
         </div>
@@ -247,8 +247,8 @@ export class KompasMeteredWallRegister extends LitElement {
   private registerButtonTemplate() {
     return html`
       <button
-        onClick=${this.redirectToRegister}
-        class="bg-green-500 px-5 py-3 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
+        @click=${this.redirectToRegister}
+        class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
       >
         Daftar Akun
       </button>

package/src/components/kompasid-paywall/KompasPaywall.ts

@@ -120,26 +120,8 @@ export class KompasPaywall extends LitElement {
     },
     packages: {
       title: 'Sekali bayar, tanpa perpanjang otomatis',
-      memberships: [
-        {
-          title: 'Kompas Digital Premium 12 Bulan (Hemat 40%)',
-          percentage: 40,
-          price: 360000,
-          discountPrice: 600000,
-          periode: 'Tahun',
-          isHighlight: true,
-          url: 'https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=',
-        },
-        {
-          title: 'Kompas Digital Premium 1 Bulan',
-          percentage: 0,
-          discountPrice: 0,
-          price: 50000,
-          periode: 'Bulan',
-          isHighlight: false,
-          url: 'https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=',
-        },
-      ],
+      memberships: [],
+      freeTrial: 'untuk 3 hari pertama',
     },
     payment: {
       desktop: [
@@ -277,6 +259,11 @@ export class KompasPaywall extends LitElement {
           title: json[this.type].head,
           description: json[this.type].content,
         },
+        packages: {
+          ...this.mockResult.packages,
+          memberships: json[this.type].memberships,
+          freeTrial: json[this.type].freeTrial,
+        },
       }
     } catch (error) {
       throw Error('failed to get paywall data')

package/src/components/kompasid-paywall/types.ts

@@ -3,9 +3,13 @@ export interface Product {
   percentage: number
   price: number
   discountPrice: number
+  savingPrice: number
   periode: string
   isHighlight: boolean
   url: string
+  package: string
+  subscriptionId: string
+  position: number
 }
 export interface Metered {
   maxQuota: number
@@ -36,6 +40,7 @@ export interface Informations {
 export interface Packages {
   title: string
   memberships: Array<Product>
+  freeTrial: string
 }
 export interface PaywallProduct {
   informations: {

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

@@ -179,6 +179,10 @@ export class KompasIdPaywallBody extends LitElement {
     if (this.targetElement.classList.contains('wrapper-body')) {
       this.togglePaywall()
     }
+
+    if (this.targetElement.id === 'freeTrialPopup') {
+      this.closeFreeTrialPopup()
+    }
   }
 
   private parsePrice(price: string): number {
@@ -480,18 +484,13 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private generalPaywallDataLayer(event: string): Record<string, any> {
-    const impressions = [
-      {
-        package: 'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12',
-        subscription_id: '9802032',
-        price: '360000',
-      },
-      {
-        package: 'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1',
-        subscription_id: '9802035',
-        price: '50000',
-      },
-    ]
+    const packages = this.paywallData?.packages ?? ({} as Packages)
+
+    const impressions = packages.memberships.map(membership => ({
+      package: membership.package,
+      subscription_id: membership.subscriptionId,
+      price: membership.price.toString(),
+    }))
 
     return this.buildGtmParams(event, impressions)
   }
@@ -816,11 +815,23 @@ export class KompasIdPaywallBody extends LitElement {
               / ${product.periode}
             </h6>
           </div>
-          <div class="flex items-center">
-            <p class="text-xs ${this.isDark ? 'text-dark-7' : 'text-grey-600'}">
-              hanya <span class="text-orange-400">Rp 30.000</span> / bulan
-            </p>
-          </div>
+          ${product.savingPrice
+            ? html`
+                <div class="flex items-center">
+                  <p
+                    class="text-xs ${this.isDark
+                      ? 'text-dark-7'
+                      : 'text-grey-600'}"
+                  >
+                    hanya
+                    <span class="text-orange-400"
+                      >${formatRupiah(product.savingPrice)}</span
+                    >
+                    / bulan
+                  </p>
+                </div>
+              `
+            : nothing}
         </div>
         <button
           class="h-8 ${this.isDark
@@ -829,10 +840,10 @@ export class KompasIdPaywallBody extends LitElement {
           @click=${() =>
             this.redirectToCheckout(
               product.url,
-              'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12',
-              '9802032',
-              360000,
-              1
+              product.package,
+              product.subscriptionId,
+              product.price,
+              product.position
             )}
         >
           <h6
@@ -859,26 +870,45 @@ export class KompasIdPaywallBody extends LitElement {
           ? '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="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"
-          >
-            / ${product.periode}
-          </h6>
+        <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"
+            >
+              / ${product.periode}
+            </h6>
+          </div>
+          ${product.savingPrice
+            ? html`
+                <div class="flex items-center">
+                  <p
+                    class="text-xs ${this.isDark
+                      ? 'text-dark-7'
+                      : 'text-grey-600'}"
+                  >
+                    hanya
+                    <span class="text-orange-400"
+                      >${formatRupiah(product.savingPrice)}</span
+                    >
+                    / bulan
+                  </p>
+                </div>
+              `
+            : nothing}
         </div>
         <button
           @click=${() =>
             this.redirectToCheckout(
               product.url,
-              'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1',
-              '9802035',
-              50000,
-              2
+              product.package,
+              product.subscriptionId,
+              product.price,
+              product.position
             )}
           class="h-8 ${!this.isDark &&
           'bg-white'} border border-green-500 rounded"
@@ -904,6 +934,7 @@ export class KompasIdPaywallBody extends LitElement {
             : this.secondaryPackages(item)
         )}
         ${this.swgEnable ? this.swgPackageSection() : nothing}
+        ${this.freeTrialPackageSection()} ${this.freeTrialPopUp()}
       </div>
     `
   }
@@ -1027,6 +1058,128 @@ export class KompasIdPaywallBody extends LitElement {
     `
   }
 
+  private openFreeTrialPopup() {
+    const popup = this.shadowRoot?.getElementById('freeTrialPopup')
+    popup?.classList.remove('hidden')
+  }
+
+  private closeFreeTrialPopup() {
+    const popup = this.shadowRoot?.getElementById('freeTrialPopup')
+    popup?.classList.add('hidden')
+  }
+
+  private freeTrialPopUp() {
+    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="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"
+        >
+          <div class="w-full flex justify-end px-2">
+            <button
+              @click=${this.closeFreeTrialPopup}
+              class="w-8 h-8 pl-4 text-grey-400"
+            >
+              ${unsafeSVG(getFontAwesomeIcon('fas', 'xmark', 24, 24))}
+            </button>
+          </div>
+          <div class="w-full flex justify-center">
+            <div class="w-3/4 lg:w-1/2">
+              <img src="/assets/kompas-free-trial.png" alt="Free Trial" />
+            </div>
+          </div>
+          <p class="font-bold text-lg text-grey-600 mt-4">
+            Coba Gratis Kompas.id di Aplikasi
+          </p>
+          <div
+            class="hidden lg:block lg:flex flex border border-grey-300 rounded mt-4 px-8 py-4 items-center"
+          >
+            <div class="w-1/3 flex mr-6">
+              <img src="/assets/qr-code.png" alt="QR Code Deep Link" />
+            </div>
+            <div class="w-2/3 text-base text-grey-600 text-left">
+              Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR
+              dengan ponsel atau tablet untuk mengunduh aplikasi.
+            </div>
+          </div>
+          <div
+            class="text-base text-grey-600 text-center lg:hidden px-2 md:px-8"
+          >
+            Dapatkan akses gratis selama 3 hari ke konten dan fitur premium
+            Kompas.id di aplikasi.
+          </div>
+          <div class="lg:flex flex justify-center mt-4 hidden lg:block gap-4">
+            <a
+              href="https://play.google.com/store/apps/details?id=id.kompas.app"
+              target="_blank"
+              ><img
+                src="https://cdn-www.kompas.id/halaman-unduh/image/google-play-badge.png"
+                alt="Google Play Badge"
+            /></a>
+            <a
+              href="https://apps.apple.com/id/app/kompas-id/id1242195037?l=id"
+              target="_blank"
+              ><img
+                src="https://cdn-www.kompas.id/halaman-unduh/image/ios-badge.png"
+                alt="iOS App Store Badge"
+            /></a>
+          </div>
+          <button
+            onclick="window.open('https://app.komp.as/langganan', '_blank')"
+            class="h-12 bg-green-500 rounded-md mt-4 flex w-full items-center justify-center lg:hidden"
+          >
+            <h6 class="text-white font-bold p-4">Unduh Sekarang</h6>
+          </button>
+        </div>
+      </div>
+    `
+  }
+
+  private freeTrialPackageSection() {
+    const packages = this.paywallData?.packages ?? ({} as Packages)
+
+    if (packages.freeTrial) {
+      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="flex flex-col">
+            <div class="flex items-center">
+              <h5 class="text-base md:text-lg font-bold text-orange-400">
+                ${formatRupiah(0)}
+              </h5>
+            </div>
+            <div class="flex items-center">
+              <p
+                class="text-xs ${this.isDark ? 'text-dark-7' : 'text-grey-600'}"
+              >
+                ${packages.freeTrial}
+              </p>
+            </div>
+          </div>
+          <button
+            @click=${this.openFreeTrialPopup}
+            class="h-8 ${!this.isDark &&
+            'bg-white'} border border-green-500 rounded"
+          >
+            <h6
+              class="text-xs md:text-sm ${this.isDark
+                ? 'text-green-300'
+                : 'text-green-500'} font-bold px-4"
+            >
+              Coba Gratis
+            </h6>
+          </button>
+        </div>
+      `
+    }
+    return nothing
+  }
+
   /**
    * Render Statement
    */

package/src/index.ts

@@ -4,6 +4,7 @@ export { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPa
 export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js'
 export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js'
 export { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'
+export { KompasHeaderAccount } from './components/kompasid-header-account/KompasHeaderAccount.js'
 
 declare global {
   interface Window {

package/src/utils/text.ts

@@ -0,0 +1,9 @@
+const truncate = (str: string, len: number = 155): string => {
+  if (str.length <= len) {
+    return str
+  }
+  const truncatedStr = str.substr(0, len - 1)
+  return `${truncatedStr.substr(0, truncatedStr.lastIndexOf(' '))}...`
+}
+
+export { truncate }