@kompasid/lit-web-components 0.6.2 → 0.6.4

package/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts

@@ -0,0 +1,172 @@
+import { LitElement, html, css } from 'lit'
+import { customElement, state, property } from 'lit/decorators.js'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+
+@customElement('kompasid-header-account-menu')
+export class KompasHeaderAccountMenu extends LitElement {
+  static styles = [
+    css`
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+      .header-account-menu--item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 0.75rem;
+        transition: background-color 0.3s ease-in-out;
+        border-radius: 0.25rem;
+      }
+      .header-account-menu--item:hover {
+        background-color: #e5e7eb; /* Assuming grey-200 */
+      }
+      .header-account-menu--title {
+        flex-grow: 1;
+        font-size: 1rem;
+        font-weight: bold;
+        margin-left: 1rem;
+      }
+      .header-account-menu--notification-info {
+        font-size: 0.875rem;
+        border-radius: 1.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgb(255, 122, 0);
+        color: #f7fafc;
+        height: 1.75rem;
+        width: 1.75rem;
+      }
+      .icon {
+        width: 20px;
+        height: 20px;
+        margin-top: auto;
+        margin-bottom: auto;
+        color: rgb(0 85 154);
+      }
+    `,
+    TWStyles,
+  ]
+
+  kompasKring?: HTMLInputElement
+
+  @state() clipboardClicked: boolean = false
+
+  /**
+   * Cart Url
+   */
+  @property({ type: String }) cartUrl = 'https://gerai.kompas.id/cart'
+
+  /**
+   * Logout Url
+   */
+  @property({ type: String }) logoutUrl = 'https://account.kompas.id/logout'
+
+  /**
+   * Manage Account Url
+   */
+  @property({ type: String }) manageAccountUrl =
+    'https://account.kompas.id/manage-account/my-account'
+
+  /**
+   * Notification Url
+   */
+  @property({ type: String }) notificationUrl =
+    'https://account.kompas.id/manage-account/notification'
+
+  /**
+   * Orders Url
+   */
+  @property({ type: String }) ordersUrl =
+    'https://gerai.kompas.id/my-account/orders'
+
+  /**
+   * Read Later Url
+   */
+  @property({ type: String }) readLaterUrl = 'https://www.kompas.id/baca-nanti'
+
+  /**
+   * Total Notification Count
+   */
+  @property({ type: Number }) notificationTotal: number = 0
+
+  // Render Total Bubble
+  private renderTotalBubble = (total: number) => {
+    if (!total) {
+      return html``
+    }
+
+    const isOneDigitNotification = total > 0 && total <= 9
+    const additionalStyling = isOneDigitNotification ? '' : 'pl-0.5'
+
+    return html`
+      <div
+        class=${`header-account-menu--notification-info ${additionalStyling}`}
+      >
+        <!-- Limit Display to use "9+"" if total notification exceed 9 -->
+        ${isOneDigitNotification
+          ? total
+          : html`<span>9<span class="pl-px">+</span></span>`}
+      </div>
+    `
+  }
+
+  override async connectedCallback() {
+    super.connectedCallback()
+  }
+
+  render() {
+    return html`
+      <div class="border-b border-grey-300 text-grey-600">
+        <li
+          class="font-bold flex flex-shrink-0 flex-col text-left text-sm mb-4"
+        >
+          <!-- Cart -->
+          <!--<a href={this.cartUrl} class="header-account-menu--item">
+            <div class="icon icon-md icon-blue-600">{unsafeSVG(getFontAwesomeIcon('fas', 'cart-shopping'))}</div>
+            <p class="header-account-menu--title">Keranjang</p>
+          </a> -->
+          <!-- Manage Account  -->
+          <a href=${this.manageAccountUrl} class="header-account-menu--item">
+            <div class="icon icon-md icon-blue-600">
+              ${unsafeSVG(getFontAwesomeIcon('fas', 'user-gear'))}
+            </div>
+            <p class="header-account-menu--title">Kelola Akun</p>
+          </a>
+          <!-- Transaction  -->
+          <!-- <a href={this.ordersUrl} class="header-account-menu--item">
+            <div class="icon icon-md icon-blue-600">{unsafeSVG(getFontAwesomeIcon('fas', 'arrow-right-arrow-left'))}</div>
+            <p class="header-account-menu--title">Transaksi</p>
+          </a> -->
+          <!-- Notifications  -->
+          <a href=${this.notificationUrl} class="header-account-menu--item">
+            <div class="icon icon-md icon-blue-600">
+              ${unsafeSVG(getFontAwesomeIcon('fas', 'bell'))}
+            </div>
+            <p class="header-account-menu--title">Notifikasi</p>
+            <p class="flex-none">
+              <!-- Conditional rendering based on notification count -->
+              ${this.renderTotalBubble(this.notificationTotal)}
+            </p>
+          </a>
+          <!-- Read Later  -->
+          <a href=${this.readLaterUrl} class="header-account-menu--item">
+            <div class="icon icon-md icon-blue-600">
+              ${unsafeSVG(getFontAwesomeIcon('fas', 'bookmark'))}
+            </div>
+            <p class="header-account-menu--title">Baca Nanti</p>
+          </a>
+          <!-- Logout -->
+          <a href=${this.logoutUrl} class="header-account-menu--item">
+            <div class="icon icon-md icon-blue-600">
+              ${unsafeSVG(getFontAwesomeIcon('fas', 'right-from-bracket'))}
+            </div>
+            <p class="header-account-menu--title">Keluar</p>
+          </a>
+        </li>
+      </div>
+    `
+  }
+}

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 !== null) {
+        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-paywall/KompasPaywall.ts

@@ -120,26 +120,7 @@ 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: [],
     },
     payment: {
       desktop: [
@@ -277,6 +258,10 @@ export class KompasPaywall extends LitElement {
           title: json[this.type].head,
           description: json[this.type].content,
         },
+        packages: {
+          ...this.mockResult.packages,
+          memberships: json[this.type].memberships,
+        },
       }
     } 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

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

@@ -480,18 +480,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)
   }
@@ -619,7 +614,7 @@ export class KompasIdPaywallBody extends LitElement {
     if (type === 'epaper') {
       buttonContent = html` <button
         @click=${this.redirectToPrevUrl}
-        class="hidden lg:block w-8 h-8 pl-4 ${this.isDark
+        class="hidden md:block w-8 h-8 pl-4 ${this.isDark
           ? 'text-blue-300'
           : 'text-blue-600'}"
       >
@@ -640,7 +635,7 @@ export class KompasIdPaywallBody extends LitElement {
 
     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 w-4/5 md:w-full ${
+    } 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'
     }`
 
@@ -816,11 +811,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 +836,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 +866,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"

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 }