@kompasid/lit-web-components 0.9.48 → 0.9.50

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

@@ -1,9 +1,11 @@
-import { LitElement, html, css } from 'lit'
+import { LitElement, html, css, nothing } from 'lit'
 import { format, addDays, differenceInDays } from 'date-fns'
 import { id } from 'date-fns/locale/id'
 import { customElement, property, state } from 'lit/decorators.js'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
 import { User } from '../kompasid-header-account/types.js'
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
 import '../kompasid-grace-period/KompasGracePeriod.js'
 
 @customElement('kompasid-header-account-profile')
@@ -15,6 +17,18 @@ export class KompasHeaderAccountProfile extends LitElement {
         bottom: -2px;
         right: -2px;
       }
+
+      .tooltip::after {
+        content: '';
+        position: absolute;
+        width: 24px;
+        height: 16px;
+        background-color: #333333;
+        /* Memotong kotak menjadi segitiga */
+        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+        /* Menghaluskan sudut potongan */
+        border-radius: 4px;
+      }
     `,
     TWStyles,
   ]
@@ -25,6 +39,8 @@ export class KompasHeaderAccountProfile extends LitElement {
   @property({ type: String }) userInitialName = ''
   @property({ type: Object }) userData = {} as User
   @property({ type: String }) subscriptionUrl = ''
+  @property({ type: String }) company_name = ''
+  @property({ type: String }) manage_account_url = ''
   @property({ type: String }) openFrom = ''
   /**
    * Props For Grace Period Tracker
@@ -186,13 +202,53 @@ export class KompasHeaderAccountProfile extends LitElement {
       </p>`
     }
 
+    /**
+     * Kompeni Element
+     */
+    const kompeniTemplate = () => html` <div
+      class="flex relative group bg-[#FFF8D6] text-yellow-700 gap-1 p-2 mt-2 rounded items-center justify-center text-xs max-w-[190px] font-sans leading-none"
+    >
+      <div class="w-5 h-5 flex items-center justify-center flex-shrink-0">
+        ${unsafeSVG(getFontAwesomeIcon('fa', 'building-circle-check', 13, 10))}
+      </div>
+      <p class="truncate">${this.company_name}</p>
+      <div
+        class="absolute px-2 top-full -right-[5%] w-max max-w-[300px] mt-1 hidden group-hover:block"
+      >
+        <div
+          class="bg-grey-600 text-white text-sm font-sans p-4 rounded-lg relative leading-5"
+        >
+          ${this.company_name}
+          <svg
+            width="16"
+            height="12"
+            viewBox="0 0 24 13"
+            class="text-grey-600 absolute left-[80%] -top-[11px]"
+          >
+            <polygon
+              points="3,15 12,3 21,15"
+              fill="currentColor"
+              stroke="currentColor"
+              stroke-width="4"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>`
+
     return html`
       <div
         class="active-info flex flex-col items-start leading-none text-left font-sans"
       >
         <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"
+            @click=${() => this.clickToManageAccount()}
+            @keydown=${() => this.clickToManageAccount()}
+            class="flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative select-none ${this
+              .manage_account_url
+              ? 'cursor-pointer'
+              : ''}"
           >
             <span class="capitalize text-2xl text-grey-100 font-bold">
               ${this.userInitialName}
@@ -201,10 +257,21 @@ export class KompasHeaderAccountProfile extends LitElement {
           </div>
 
           <div class="flex flex-col text-left">
-            <p class="capitalize font-bold text-base text-blue-600">
-              ${this.userData.userName}
-            </p>
-            ${activeInfoTemplate()}
+            <div
+              @click=${() => this.clickToManageAccount()}
+              @keydown=${() => this.clickToManageAccount()}
+              class="select-none"
+            >
+              <p
+                class="capitalize font-bold text-base ${this.manage_account_url
+                  ? 'text-blue-600 cursor-pointer'
+                  : 'text-grey-600'}"
+              >
+                ${this.userData.userName}
+              </p>
+              ${activeInfoTemplate()}
+            </div>
+            ${this.company_name ? kompeniTemplate() : nothing}
           </div>
         </div>
 
@@ -238,6 +305,11 @@ export class KompasHeaderAccountProfile extends LitElement {
       </div>
     `
   }
+  clickToManageAccount() {
+    if (this.manage_account_url) {
+      window.location.href = this.manage_account_url
+    }
+  }
 
   override async connectedCallback() {
     super.connectedCallback()

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

@@ -6,6 +6,7 @@ export interface Product {
   discountPrice: number
   savingPrice: number
   saveLabel: string
+  labelPackage: string
   periode: string
   isHighlight: boolean
   isButtonSolid: boolean

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

@@ -19,6 +19,7 @@ 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'
+import '../kompasid-paywall-modal-register/KompasPaywallModalRegister.js'
 
 @customElement('kompasid-paywall-body')
 export class KompasIdPaywallBody extends LitElement {
@@ -551,6 +552,10 @@ export class KompasIdPaywallBody extends LitElement {
       page_domain: this.tracker_page_domain || 'Kompas.id',
       metered_wall_type: this.tracker_metered_wall_type || 'HP',
       metered_wall_balance: this.tracker_metered_wall_balance,
+      content_tags: this.tracker_content_tags || '',
+      content_published_date: this.tracker_content_published_date || '',
+      content_variant: this.tracker_content_variant || '',
+      variant: this.paywallData?.informations?.typeVariant || '',
     }
 
     if (this.type !== 'epaper') {
@@ -853,7 +858,7 @@ export class KompasIdPaywallBody extends LitElement {
   ) {
     const { isDark } = this
 
-    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]
+    const containerClass = `px-4 py-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 ? 'outline-yellow-400 outline-2 outline mt-2' : ''
@@ -885,6 +890,12 @@ export class KompasIdPaywallBody extends LitElement {
     return html`
       <div class="${containerClass}">
         <div class="flex flex-col gap-1">
+          <span
+            class="${product.labelPackage
+              ? 'block text-grey-500 text-xs font-sans leading-none'
+              : 'hidden'}"
+            >${product.labelPackage}</span
+          >
           <div class="flex items-baseline">
             <h5 class="text-base font-bold text-orange-400 leading-none">
               ${formatRupiah(product.price)}
@@ -952,6 +963,8 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private packagesSection(data: Packages) {
+    const isPro =
+      this.type === 'proMiningArticle' || this.type === 'proMiningOutlook'
     return html`
       <div
         class="flex flex-col w-full items-center gap-2 md:gap-3 mt-4 md:mt-5"
@@ -961,6 +974,14 @@ export class KompasIdPaywallBody extends LitElement {
         )}
         ${this.freeTrialPackageSection()} ${this.freeTrialPopUp()}
         ${this.packages.swgEnable ? this.swgPackageSection() : nothing}
+        ${isPro
+          ? html`
+              <kompasid-paywall-modal-register
+                class="w-full max-w-xs md:max-w-sm"
+              >
+              </kompasid-paywall-modal-register>
+            `
+          : nothing}
       </div>
     `
   }