@kompasid/lit-web-components 0.7.9 → 0.8.1

package/src/components/kompasid-grace-period/KompasGracePeriod.ts

@@ -28,6 +28,7 @@ export class KompasGracePeriod extends LitElement {
    * property totalGracePeriod = how many days are left in grace period
    * property isColumn = changes how the component looks on different screen sizes
    * property isShowButton = shows or hides a subscription button
+   * property isEpaper = is paywall opened in epaper page
    * property paywall_location = the location where user encounter the paywall
    * property paywall_subscription_package = the name of the subscription package viewed by user
    * property paywall_subscription_id = the ID of the subscription package viewed by user
@@ -43,11 +44,14 @@ export class KompasGracePeriod extends LitElement {
    * property tracker_page_domain = page Domain
    * property tracker_metered_wall_type = the type of Metered Wall
    * property tracker_metered_wall_balance = the balance of their metered wall
+   * property tracker_epaper_edition = the edition of epaper viewed by user
    */
 
   @property({ type: Number }) totalGracePeriod = 0
   @property({ type: Boolean }) isColumn = false
   @property({ type: Boolean }) isShowButton = false
+  @property({ type: Boolean }) isEpaper = false
+  @property({ type: Boolean }) isBackgroundOnContentOnly = false
   @property({ type: String }) paywall_location = ''
   @property({ type: String }) paywall_subscription_package = ''
   @property({ type: Number }) paywall_subscription_id = 0
@@ -63,12 +67,14 @@ export class KompasGracePeriod extends LitElement {
   @property({ type: String }) tracker_page_domain = ''
   @property({ type: String }) tracker_metered_wall_type = ''
   @property({ type: Number }) tracker_metered_wall_balance = 0
+  @property({ type: String }) tracker_epaper_edition = ''
 
   /**
    * State
    */
   @state() private maxGracePeriod = 7
-  @state() private updateSubscription = 'https://checkoutv2.kompas.id'
+  @state() private subscriptionPage = 'https://www.kompas.id/berlangganan'
+  @state() private checkoutPage = 'https://checkoutv2.kompas.id'
 
   private getCountdownGracePeriod() {
     const { totalGracePeriod } = this
@@ -94,47 +100,72 @@ export class KompasGracePeriod extends LitElement {
   }
 
   private redirectToBerlangganan(): void {
+    this.dataLayeronPerbaruiLanggananButton()
+    this.sendGtmEvent('subscribe_button_clicked', true)
+
+    window.open(this.subscriptionPage)
+  }
+
+  private redirectToCheckout(): void {
     this.dataLayeronPerbaruiLanggananButton()
     const originHost: string = encodeURIComponent(window.location.href)
 
     this.sendGtmEvent('subscribe_button_clicked')
 
     window.open(
-      `${this.updateSubscription}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`
+      `${this.checkoutPage}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`,
     )
   }
 
-  private getGtmParams(): Record<string, any> {
-    return {
-      paywall_location: this.paywall_location,
-      paywall_subscription_package: this.paywall_subscription_package,
-      paywall_subscription_id: this.paywall_subscription_id,
-      paywall_subscription_price: this.paywall_subscription_price,
-      paywall_position: this.paywall_position,
-      page_type: this.tracker_page_type,
-      content_id: this.tracker_content_id,
-      content_title: this.tracker_content_title,
-      content_categories: this.tracker_content_categories,
-      content_type: this.tracker_content_type,
-      user_type: this.tracker_user_type,
-      subscription_status: this.tracker_subscription_status,
-      page_domain: this.tracker_page_domain || 'Kompas.id',
-      metered_wall_type: this.tracker_metered_wall_type || 'GP',
-      metered_wall_balance: this.tracker_metered_wall_balance,
+  private getGtmParams(
+    excludeSubscriptionParams: boolean = false,
+  ): Record<string, any> {
+    const gtmParams: Record<string, any> = {}
+
+    if (!this.isEpaper) {
+      gtmParams.content_title = this.tracker_content_title
+      gtmParams.content_id = this.tracker_content_id
+      gtmParams.content_categories = this.tracker_content_categories
+      gtmParams.content_type = this.tracker_content_type
+      gtmParams.page_type = this.tracker_page_type
+    } else {
+      gtmParams.epaper_edition = this.tracker_epaper_edition
     }
+
+    if (!excludeSubscriptionParams) {
+      gtmParams.paywall_subscription_package = this.paywall_subscription_package
+      gtmParams.paywall_subscription_id = this.paywall_subscription_id
+      gtmParams.paywall_subscription_price = this.paywall_subscription_price
+    }
+
+    gtmParams.paywall_location = this.paywall_location
+    gtmParams.paywall_position = this.paywall_position
+    gtmParams.user_type = this.tracker_user_type
+    gtmParams.subscription_status = this.tracker_subscription_status
+    gtmParams.page_domain = this.tracker_page_domain || 'Kompas.id'
+    gtmParams.metered_wall_type = this.tracker_metered_wall_type || 'GP'
+    gtmParams.metered_wall_balance = this.tracker_metered_wall_balance
+
+    return gtmParams
   }
 
-  private sendGtmEvent(event: string) {
+  private sendGtmEvent(
+    event: string,
+    excludeSubscriptionParams: boolean = false,
+  ) {
     let gtmParams: Record<string, any> = { event }
 
     if (event === 'paywall_viewed') {
       gtmParams.impressions = [
         {
-          ...this.getGtmParams(),
+          ...this.getGtmParams(excludeSubscriptionParams),
         },
       ]
     } else {
-      gtmParams = { ...gtmParams, ...this.getGtmParams() }
+      gtmParams = {
+        ...gtmParams,
+        ...this.getGtmParams(excludeSubscriptionParams),
+      }
     }
 
     window.dataLayer.push(gtmParams)
@@ -159,26 +190,56 @@ export class KompasGracePeriod extends LitElement {
   }
 
   private gracePeriodTemplate() {
+    const { isColumn, isBackgroundOnContentOnly } = this
+
+    const wrapperColumnClass = isColumn
+      ? 'rounded-lg'
+      : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4'
+    const buttonColumnClass = isColumn
+      ? ''
+      : 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0'
+    const otherBtnColumnClass = isColumn ? '' : 'md:w-auto'
+    const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : ''
+    const contentBgClass = isBackgroundOnContentOnly
+      ? 'bg-orange-100 p-4 rounded-lg mb-4'
+      : ''
+
     return html`
       <div
-        class="${this.isColumn
-          ? 'rounded-lg'
-          : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto"
+        class="bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}"
       >
-        <div class="text-grey-600 text-sm md:text-base self-center text-left">
+        <div
+          class="self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}"
+        >
           ${this.getCountdownGracePeriod()}
         </div>
-        ${!this.isShowButton
+        ${this.isShowButton
           ? html`
               <div
-                class="flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0"
+                class="flex w-full flex-col gap-4 self-center ${buttonColumnClass}"
               >
                 <button
-                  @click=${this.redirectToBerlangganan}
-                  class="bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto"
+                  @click=${this.redirectToCheckout}
+                  class="w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base"
                 >
                   Perbarui Langganan
                 </button>
+                <div class="md:block hidden">
+                  <button
+                    @click=${this.redirectToBerlangganan}
+                    class="bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}"
+                  >
+                    Paket Lainnya
+                  </button>
+                </div>
+                <div class="md:hidden block">
+                  <button
+                    @click=${this.redirectToBerlangganan}
+                    class="bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}"
+                  >
+                    Lihat Paket Lainnya
+                  </button>
+                </div>
               </div>
             `
           : nothing}
@@ -195,8 +256,9 @@ export class KompasGracePeriod extends LitElement {
   }
 
   render() {
+    const bgClass = !this.isBackgroundOnContentOnly ? 'bg-orange-100' : ''
     return html`
-      <div class="sticky bottom-0 w-full h-full bg-orange-100">
+      <div class="sticky bottom-0 h-full w-full ${bgClass}">
         ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}
       </div>
     `

package/src/components/kompasid-grace-period/readme.md

@@ -8,6 +8,7 @@ Ini adalah redesign komponen _grace period_ yang digunakan pada [kompas.id](http
 | ------------------------------ | ------------------------------ | ----------- | ------------------------| ----------- |
 | `totalGracePeriod`             | `total-grace-period`           |             | `number`                | `0`         |
 | `isColumn`                     | `is-column`                    |             | `boolean`               | `false`     |
+| `isEpaper`                     | `is-epaper`                    |             | `boolean`               | `false`     |
 | `isShowButton`                 | `is-show-button`               |             | `boolean`               | `false`     |
 | `subscriptionId`               | `subscription-id`              |             | `string`                | `false`     |
 | `paywall_location`             | `paywall_location`             |             | `string`                | `''`        |
@@ -25,6 +26,7 @@ Ini adalah redesign komponen _grace period_ yang digunakan pada [kompas.id](http
 | `tracker_page_type`            | `tracker_page_type`            |             | `string`                | `''`        |
 | `tracker_subscription_status`  | `tracker_subscription_status`  |             | `string`                | `''`        |
 | `tracker_user_type`            | `tracker_user_type`            |             | `string`                | `''`        |
+| `tracker_epaper_edition`       | `tracker_epaper_edition`       |             | `string`                | `''`        |
 
 ----------------------------------------------
 

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

@@ -108,6 +108,25 @@ export class KompasHeaderAccount extends LitElement {
   @property({ type: String }) subscriptionUrl = ''
   @property({ type: Number }) totalGracePeriod = 0
 
+  /**
+   * Props For Grace Period Tracker
+   */
+  @property({ type: String }) paywall_location = ''
+  @property({ type: String }) paywall_subscription_package = ''
+  @property({ type: Number }) paywall_subscription_id = 0
+  @property({ type: Number }) paywall_subscription_price = 0
+  @property({ type: Number }) paywall_position = 0
+  @property({ type: String }) tracker_page_type = ''
+  @property({ type: String }) tracker_content_id = ''
+  @property({ type: String }) tracker_content_title = ''
+  @property({ type: String }) tracker_content_categories = ''
+  @property({ type: String }) tracker_content_type = ''
+  @property({ type: String }) tracker_user_type = ''
+  @property({ type: String }) tracker_subscription_status = ''
+  @property({ type: String }) tracker_page_domain = ''
+  @property({ type: String }) tracker_metered_wall_type = ''
+  @property({ type: Number }) tracker_metered_wall_balance = 0
+
   private toggleSidebar() {
     this.isShowSidebar = !this.isShowSidebar
   }
@@ -184,6 +203,21 @@ export class KompasHeaderAccount extends LitElement {
             .userData=${this.formattedUserData}
             .subscriptionUrl=${this.subscriptionUrl}
             .totalGracePeriod=${this.totalGracePeriod}
+            paywall_location=${this.paywall_location}
+            paywall_subscription_package=${this.paywall_subscription_package}
+            paywall_subscription_id=${this.paywall_subscription_id}
+            paywall_subscription_price=${this.paywall_subscription_price}
+            paywall_position=${this.paywall_position}
+            tracker_page_type=${this.tracker_page_type}
+            tracker_content_id=${this.tracker_content_id}
+            tracker_content_title=${this.tracker_content_title}
+            tracker_content_categories=${this.tracker_content_categories}
+            tracker_content_type=${this.tracker_content_type}
+            tracker_user_type=${this.tracker_user_type}
+            tracker_subscription_status=${this.tracker_subscription_status}
+            tracker_page_domain=${this.tracker_page_domain}
+            tracker_metered_wall_type=${this.tracker_metered_wall_type}
+            tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
           ></kompasid-header-account-profile>
           <div class="pl-4 pr-3 py-4 text-left">
             <kompasid-header-account-menu

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

@@ -2,6 +2,8 @@ export interface User {
   userName: string
   expired: string
   isNearExpired: boolean
+  totalGracePeriod: number
+  isGracePeriod: boolean
   activeInfo: string
   isMembership: boolean
   updateMembership: string

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

@@ -1,7 +1,11 @@
 import { LitElement, html, css } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { format, subDays, addDays } from 'date-fns'
+import { id } from 'date-fns/locale/id'
+import { customElement, property, state } from 'lit/decorators.js'
 import { TWStyles } from '../../../tailwind/tailwind.js'
 import { truncate } from '../../utils/text.js'
+import { User } from '../kompasid-header-account/types.js'
+import '../kompasid-grace-period/KompasGracePeriod.js'
 
 @customElement('kompasid-header-account-profile')
 export class KompasHeaderAccountProfile extends LitElement {
@@ -16,11 +20,41 @@ export class KompasHeaderAccountProfile extends LitElement {
     TWStyles,
   ]
 
+  /**
+   * Props
+   */
   @property({ type: String }) userInitialName = ''
-  @property({ type: Object }) userData = {}
-  @property({ type: String }) subscriptionUrl = ''
+  @property({ type: Object }) userData = {} as User
   @property({ type: Number }) totalGracePeriod = 0
 
+  /**
+   * Props For Grace Period Tracker
+   */
+  @property({ type: String }) paywall_location = ''
+  @property({ type: String }) paywall_subscription_package = ''
+  @property({ type: Number }) paywall_subscription_id = 0
+  @property({ type: Number }) paywall_subscription_price = 0
+  @property({ type: Number }) paywall_position = 0
+  @property({ type: String }) tracker_page_type = ''
+  @property({ type: String }) tracker_content_id = ''
+  @property({ type: String }) tracker_content_title = ''
+  @property({ type: String }) tracker_content_categories = ''
+  @property({ type: String }) tracker_content_type = ''
+  @property({ type: String }) tracker_user_type = ''
+  @property({ type: String }) tracker_subscription_status = ''
+  @property({ type: String }) tracker_page_domain = ''
+  @property({ type: String }) tracker_metered_wall_type = ''
+  @property({ type: Number }) tracker_metered_wall_balance = 0
+
+  /**
+   * State
+   */
+  @state() private maxGracePeriod = 7
+
+  formatDate(date: Date | string) {
+    return format(new Date(date), 'dd MMM yyyy', { locale: id })
+  }
+
   private renderSkeletonLoading() {
     return html`
       <div>
@@ -42,47 +76,11 @@ export class KompasHeaderAccountProfile extends LitElement {
   }
 
   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) {
+      if (!this.userData?.isMembership) {
         return html``
       }
 
@@ -101,15 +99,31 @@ export class KompasHeaderAccountProfile extends LitElement {
      * Active Info Element
      */
 
-    const activeInfo = () => {
-      const isNearExpired = (this.userData as any)?.isNearExpired
-      const expiredTextColor = isNearExpired
-        ? `text-orange-400`
+    const activeInfoTemplate = () => {
+      const { isGracePeriod, totalGracePeriod, activeInfo } = this.userData
+
+      const expiredTextColor = isGracePeriod
+        ? `text-orange-500`
         : `text-grey-600`
 
-      return html`<p class="capitalize text-sm ${expiredTextColor}">
-        ${(this.userData as any)?.activeInfo}
-      </p>`
+      const startGracePeriodDate = this.formatDate(
+        subDays(new Date().toLocaleDateString(), totalGracePeriod - 1)
+      )
+      const endGracePeriodDate = this.formatDate(
+        addDays(
+          new Date().toLocaleDateString(),
+          this.maxGracePeriod - totalGracePeriod
+        )
+      )
+
+      const text = isGracePeriod
+        ? html`<span> Periode Masa Tenggang </span>
+            <p class="font-bold">
+              ${startGracePeriodDate} - ${endGracePeriodDate}
+            </p> `
+        : activeInfo || ''
+
+      return html`<p class="capitalize text-sm ${expiredTextColor}">${text}</p>`
     }
 
     return html`<div
@@ -127,21 +141,35 @@ export class KompasHeaderAccountProfile extends LitElement {
 
         <div class="flex flex-col text-left">
           <p class="capitalize font-bold text-base text-blue-600">
-            ${truncate((this.userData as any)?.userName, 25)}
+            ${truncate(this.userData.userName, 25)}
           </p>
-          ${activeInfo()} ${expiredInfo()}
+          ${activeInfoTemplate()}
         </div>
       </div>
 
       <div class="mt-4">
-        <!-- <kompas-grace-period
-          totalGracePeriod="{this.totalGracePeriod}"
-          isColoumn="{true}"
-          isShowButton="{true}"
-        /> -->
+        <kompasid-grace-period
+          totalGracePeriod=${this.userData.totalGracePeriod}
+          isColumn="true"
+          isShowButton="true"
+          isBackgroundOnContentOnly="true"
+          paywall_location=${this.paywall_location}
+          paywall_subscription_package=${this.paywall_subscription_package}
+          paywall_subscription_id=${this.paywall_subscription_id}
+          paywall_subscription_price=${this.paywall_subscription_price}
+          paywall_position=${this.paywall_position}
+          tracker_page_type=${this.tracker_page_type}
+          tracker_content_id=${this.tracker_content_id}
+          tracker_content_title=${this.tracker_content_title}
+          tracker_content_categories=${this.tracker_content_categories}
+          tracker_content_type=${this.tracker_content_type}
+          tracker_user_type=${this.tracker_user_type}
+          tracker_subscription_status=${this.tracker_subscription_status}
+          tracker_page_domain=${this.tracker_page_domain}
+          tracker_metered_wall_type=${this.tracker_metered_wall_type}
+          tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
+        ></kompasid-grace-period>
       </div>
-
-      ${subscribeButton()}
     </div>`
   }