@kompasid/lit-web-components 0.6.3 → 0.6.6

package/src/components/kompasid-header-account/KompasHeaderAccount.ts

@@ -0,0 +1,197 @@
+import { LitElement, html, css } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
+import { User } from './types.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import '../kompasid-header-account-profile/KompasHeaderAccountProfile.js'
+import '../kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js'
+import '../kompasid-header-account-menu/KompasHeaderAccountMenu.js'
+
+@customElement('kompasid-header-account')
+export class KompasHeaderAccount extends LitElement {
+  static styles = [
+    css`
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+      .header {
+        background-color: #0356a8;
+      }
+      .account-profile {
+        overflow-y: auto;
+      }
+
+      .header-account-help-center--item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 0.75rem;
+      }
+
+      .header-account-help-center--content {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        margin-left: 1rem;
+        line-height: 1.5rem;
+      }
+
+      .header-account--membership-icon {
+        position: absolute;
+        bottom: -2px;
+        right: -2px;
+      }
+
+      .header-account--notification-indicator {
+        position: absolute;
+        top: 0;
+        height: 0.5rem;
+        width: 0.5rem;
+        background-color: #f6ad55;
+        border-radius: 50%;
+        right: -0.563rem;
+        top: -0.281rem;
+      }
+
+      .header-account-sidebar {
+        width: 19rem;
+        background-color: #edf2f7;
+        box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
+        display: flex;
+        flex-direction: column;
+        font-family: 'PT Sans', sans-serif;
+        font-size: 0.875rem;
+      }
+    `,
+    TWStyles,
+  ]
+
+  @state() isShowSidebar: boolean = false
+
+  formattedUserData: User = {} as User
+
+  @property({ type: String }) cartUrl = ''
+  @property({ type: String }) logoutUrl = ''
+  @property({ type: String }) manageAccountUrl = ''
+  @property({ type: Number }) notificationTotal = 0
+  @property({ type: String }) notificationUrl = ''
+  @property({ type: String }) ordersUrl = ''
+  @property({ type: String }) readLaterUrl = ''
+  @property({ type: Object }) userData = {}
+  @property({ type: Number }) sidebarTopSpacing = 0
+  @property({ type: String }) subscriptionUrl = ''
+  @property({ type: Number }) totalGracePeriod = 0
+
+  private toggleSidebar() {
+    this.isShowSidebar = !this.isShowSidebar
+  }
+
+  private getInitialUserName() {
+    return this.formattedUserData?.userName
+      ? this.formattedUserData.userName.charAt(0)
+      : ''
+  }
+
+  private account() {
+    const notificationIndicator = () => {
+      if (!this.notificationTotal) return html``
+      return html`<div class="header-account--notification-indicator"></div>`
+    }
+
+    const membershipIcon = () => {
+      if (!this.formattedUserData?.isMembership) return html``
+      return html`
+        <div>
+          <img
+            class="header-account--membership-icon h-2.5 w-2.5"
+            src="https://d3w4qaq4xm1ncv.cloudfront.net/global-header/crown-royal-blue-60.svg"
+            alt="membership-crown-icon"
+          />
+        </div>
+      `
+    }
+
+    return html`
+      <button @click=${this.toggleSidebar} class="cursor-pointer p-3">
+        <div class="flex flex-row items-center self-center">
+          ${!this.getInitialUserName()
+            ? html`<div
+                class="bg-grey-300 rounded-full h-6 w-6 animate-pulse"
+              ></div>`
+            : html`
+                <div
+                  class="flex bg-grey-100 rounded-full h-6 w-6 items-center justify-center relative"
+                >
+                  <span class="capitalize text-xxs text-blue-600 font-bold"
+                    >${this.getInitialUserName()}</span
+                  >
+                  ${notificationIndicator()} ${membershipIcon()}
+                </div>
+              `}
+          <div
+            class="ml-3 icon-xs text-white chevron-icon ${this.isShowSidebar
+              ? 'chevron-down'
+              : 'rotate-180'}"
+          >
+            ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}
+          </div>
+        </div>
+      </button>
+    `
+  }
+
+  private accountSidebar() {
+    return html`
+      <nav @keyup="${this.onkeyup}" @click=${this.toggleSidebar}>
+        <div
+          @keyup="${this.onkeyup}"
+          class="bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-99 ml-auto"
+          style=${`margin-top: ${this.sidebarTopSpacing}px`}
+          @click=${(ev: any) => ev.stopPropagation()}
+        >
+          <kompasid-header-account-profile
+            .userInitialName=${this.getInitialUserName()}
+            .userData=${this.formattedUserData}
+            .subscriptionUrl=${this.subscriptionUrl}
+            .totalGracePeriod=${this.totalGracePeriod}
+          ></kompasid-header-account-profile>
+          <div class="pl-4 pr-3 py-4 text-left">
+            <kompasid-header-account-menu
+              .cart-url=${this.cartUrl}
+              .manage-account-url=${this.manageAccountUrl}
+              .logout-url=${this.logoutUrl}
+              .notification-url=${this.notificationUrl}
+              .notification-total=${this.notificationTotal}
+              .orders-url=${this.ordersUrl}
+              .read-later-url=${this.readLaterUrl}
+            ></kompasid-header-account-menu>
+            <kompasid-header-account-help-center></kompasid-header-account-help-center>
+          </div>
+        </div>
+      </nav>
+    `
+  }
+
+  override async connectedCallback() {
+    super.connectedCallback()
+    this.isShowSidebar = false
+    if (typeof this.userData === 'string') {
+      this.formattedUserData = JSON.parse(this.userData)
+    } else if (typeof this.userData === 'object' && this.userData !== null) {
+      // If userData is already an object, you might not need to parse it.
+      // You can assign it directly to formattedUserData:
+      this.formattedUserData = this.userData as User
+    }
+  }
+
+  render() {
+    return html`
+      <header class="header flex flex-row justify-end h-[49px] relative z-50">
+        <div class="text-end">
+          ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}
+        </div>
+      </header>
+    `
+  }
+}

package/src/components/kompasid-header-account/types.ts

@@ -0,0 +1,8 @@
+export interface User {
+  userName: string
+  expired: string
+  isNearExpired: boolean
+  activeInfo: string
+  isMembership: boolean
+  updateMembership: string
+}

package/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.ts

@@ -0,0 +1,177 @@
+import { LitElement, html, css } from 'lit'
+import { customElement, state } 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-help-center')
+export class KompasHeaderAccountHelpCenter extends LitElement {
+  static styles = [
+    css`
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+      .header-account-help-center--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-help-center--item:hover {
+        background-color: #e5e7eb;
+      }
+      .header-help-center--content {
+        text-align: left;
+      }
+      .icon {
+        width: 20px;
+        height: 20px;
+        margin-top: auto;
+        margin-bottom: auto;
+        color: rgb(0 85 154);
+      }
+    `,
+    TWStyles,
+  ]
+
+  kompasKring?: HTMLInputElement
+
+  @state() clipboardClicked: boolean = false
+
+  // Q & A
+  private qna = () =>
+    html` <div class="header-account-help-center--item">
+      <div class="icon">
+        ${unsafeSVG(getFontAwesomeIcon('fas', 'comments'))}
+      </div>
+      <div
+        class="header-account-help-center--content mx-4 leading-4 gap-y-2 text-base"
+      >
+        <p>Tanya Jawab</p>
+        <a href="http://kb.kompas.id/" class="font-bold hover:underline"
+          >http://kb.kompas.id/</a
+        >
+      </div>
+    </div>`
+
+  // Telephone
+  private telephone = () => {
+    // Clipboard Action
+    const clipboardAction = async () => {
+      const phoneNumberCopy =
+        this.shadowRoot?.getElementById('kompasKring')?.innerHTML
+      if (phoneNumberCopy) {
+        try {
+          await navigator.clipboard.writeText(phoneNumberCopy)
+          this.clipboardClicked = true
+          setTimeout(() => {
+            this.clipboardClicked = false
+          }, 2000)
+        } catch (error) {
+          // Handle clipboard write error
+          console.error('Failed to copy to clipboard:', error)
+        }
+      }
+    }
+
+    // Keyboard event handler
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Enter') {
+        clipboardAction()
+      }
+    }
+
+    return html`<div class="header-account-help-center--item">
+      <div class="icon">${unsafeSVG(getFontAwesomeIcon('fas', 'phone'))}</div>
+      <div
+        class="relative header-account-help-center--content mx-4 leading-4 gap-y-2 text-base"
+      >
+        ${this.clipboardClicked
+          ? html`<p
+              class="absolute bg-grey-200 rounded-md h-full top-0 w-full flex items-center justify-center"
+            >
+              Berhasil menyalin!
+            </p>`
+          : html``}
+        <p>Kompas Kring</p>
+        <p id="kompasKring" class="font-bold">+6221 2567 6000</p>
+      </div>
+      <div
+        class="bg-grey-200 px-3 py-2 rounded cursor-pointer"
+        @click=${clipboardAction}
+        @keydown=${handleKeyDown}
+        tabindex="0"
+      >
+        <div class="icon-sm icon-grey-600">
+          ${unsafeSVG(getFontAwesomeIcon('fas', 'copy'))}
+        </div>
+      </div>
+    </div>`
+  }
+
+  // Whatsapp
+  private whatsapp = () =>
+    html`<a
+      href="https://api.whatsapp.com/send?phone=6281290050800"
+      class="header-account-help-center--item"
+    >
+      <div class="icon">
+        ${unsafeSVG(getFontAwesomeIcon('fab', 'whatsapp'))}
+      </div>
+      <div
+        class="header-account-help-center--content mx-4 leading-4 gap-y-2 text-base"
+      >
+        <p>Whatsapp</p>
+        <p class="font-bold hover:underline">+62812 900 50 800</p>
+      </div>
+    </a>`
+
+  // Email
+  private email = () =>
+    html`<a
+      href="mailto:hotline@kompas.id"
+      class="header-account-help-center--item"
+    >
+      <div class="icon-md text-brand-1">
+        ${unsafeSVG(getFontAwesomeIcon('fas', 'envelope'))}
+      </div>
+      <div
+        class="header-account-help-center--content mx-4 leading-4 gap-y-2 text-base"
+      >
+        <p>Email</p>
+        <p class="font-bold hover:underline">hotline@kompas.id</p>
+      </div>
+    </a>`
+
+  // Working Hour
+  private workingHour = () =>
+    html`<div class="header-account-help-center--item">
+      <div class="icon-md text-brand-1">
+        ${unsafeSVG(getFontAwesomeIcon('fas', 'clock'))}
+      </div>
+      <div class="flex flex-col mx-4 leading-4 gap-y-2 text-base">
+        <p>Jam Kerja</p>
+        <p class="font-bold">06.00 - 16.00 WIB</p>
+      </div>
+    </div>`
+
+  override async connectedCallback() {
+    super.connectedCallback()
+  }
+
+  render() {
+    return html`
+      <div
+        class="account-help-center-container text-left leading-none mt-4 text-grey-600"
+      >
+        <p class="text-base mx-1">Pusat Bantuan</p>
+        <div class="flex flex-col text-sm gap-y-4 my-4">
+          ${this.qna()} ${this.telephone()} ${this.whatsapp()} ${this.email()}
+          ${this.workingHour()}
+        </div>
+      </div>
+    `
+  }
+}

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>
+    `
+  }
+}