@kompasid/lit-web-components 0.9.31 → 0.9.32

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

@@ -1,9 +1,8 @@
 import { LitElement, html, css } from 'lit'
-import { format, subDays, addDays } from 'date-fns'
+import { format, addDays, differenceInDays } 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'
 
@@ -81,7 +80,7 @@ export class KompasHeaderAccountProfile extends LitElement {
      * Subs Button Element
      */
     const subscribeButton = () => {
-      if (!(this.userData as any)?.updateMembership) {
+      if (!(this.userData as any)?.isMembership) {
         return html``
       }
       const handleSubscribe = () => {
@@ -93,9 +92,9 @@ export class KompasHeaderAccountProfile extends LitElement {
         <div class="w-full">
           <button
             @click=${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"
+            class="w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-brand-1 text-grey-100 font-bold text-base focus:outline-none"
           >
-            ${(this.userData as any)?.updateMembership}
+            Berlangganan Sekarang
           </button>
         </div>
       `
@@ -124,84 +123,133 @@ export class KompasHeaderAccountProfile extends LitElement {
      */
 
     const activeInfoTemplate = () => {
-      const { isGracePeriod, totalGracePeriod, activeInfo, expired } =
-        this.userData
+      const {
+        isGracePeriod,
+        totalGracePeriod,
+        isMembership,
+        activeInfo,
+        expired,
+      } = this.userData
+      let result = html``
+      let endGracePeriodDate = ''
 
-      let startGracePeriodDate
-      let endGracePeriodDate
+      const nowDate = new Date()
+      const isoDateString = expired.replace(' ', 'T')
+      const expiredDate = new Date(isoDateString)
+      const subsDaysLeft: number = differenceInDays(expiredDate, nowDate)
 
-      if (isGracePeriod) {
-        const totalGraceSubs = Math.max(totalGracePeriod - 1, 0)
-        startGracePeriodDate = this.formatDate(
-          subDays(new Date(), totalGraceSubs)
-        )
-        endGracePeriodDate = this.formatDate(
-          addDays(new Date(), this.maxGracePeriod - totalGraceSubs)
-        )
+      const gracePeriodCard = () => {
+        if (isGracePeriod) {
+          const totalGraceSubs = Math.max(totalGracePeriod - 1, 0)
+          endGracePeriodDate = this.formatDate(
+            addDays(new Date(), this.maxGracePeriod - totalGraceSubs)
+          )
+        }
+        const label = activeInfo ?? 'Periode Masa Tenggang'
+        return html`
+          <div class="text-orange-500 gracePeriodCard">
+            <span>${label}</span>
+            <p class="font-bold">hingga ${endGracePeriodDate}</p>
+          </div>
+        `
+      }
+
+      const lessThan3daysCard = () => {
+        const label = activeInfo ?? 'Aktif Berlangganan'
+        return html`
+          <div class="lessThan3daysCard">
+            <span> ${label} </span>
+            <p class="font-bold">Berakhir ${subsDaysLeft} hari lagi</p>
+          </div>
+        `
       }
 
-      const expiredTextColor = isGracePeriod
-        ? `text-orange-500`
-        : `text-grey-600`
+      const moreThan3daysCard = () => {
+        const formattedExpired = this.formatDate(expired)
+        const label = activeInfo ?? 'Aktif Berlangganan'
+        return html`
+          <div class="moreThan3daysCard">
+            <span>${label}</span>
+            <p class="font-bold">hingga ${formattedExpired}</p>
+          </div>
+        `
+      }
+
+      const noSubsCard = () => {
+        const label = activeInfo ?? 'Tidak Berlangganan'
+        return html`
+          <div class="noSubsCard">
+            <span>${label}</span>
+          </div>
+        `
+      }
 
-      const text = isGracePeriod
-        ? html`<span> Periode Masa Tenggang </span>
-            <p class="font-bold">
-              ${startGracePeriodDate} - ${endGracePeriodDate}
-            </p> `
-        : html`<p>${activeInfo}</p>
-            <p class="font-bold">${expired}</p>` || ''
+      if (isGracePeriod) {
+        result = gracePeriodCard()
+      } else if (subsDaysLeft > 0 && subsDaysLeft < 3) {
+        result = lessThan3daysCard()
+      } else if (subsDaysLeft >= 3) {
+        result = moreThan3daysCard()
+      } else if (!isMembership || subsDaysLeft < 1) {
+        result = noSubsCard()
+      }
 
-      return html`<p class="text-sm ${expiredTextColor}">${text}</p>`
+      return html`<p class="text-sm text-grey-600 ${subsDaysLeft}-days-left">
+        ${result}
+      </p>`
     }
 
-    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"
-        >
-          <span class="capitalize text-2xl text-grey-100 font-bold"
-            >${this.userInitialName}</span
+    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"
           >
-          ${membershipIcon()}
-        </div>
+            <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.userName, 25)}
-          </p>
-          ${activeInfoTemplate()}
+          <div class="flex flex-col text-left">
+            <p class="capitalize font-bold text-base text-blue-600">
+              ${this.userData.userName}
+            </p>
+            ${activeInfoTemplate()}
+          </div>
         </div>
-      </div>
 
-      ${this.userData?.isGracePeriod
-        ? html`<div class="mt-4">
-            <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>`
+        ${this.userData?.isGracePeriod
+          ? html` <div class="mt-4 kompasid-grace-period">
+              <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>
+    `
   }
 
   override async connectedCallback() {
@@ -210,11 +258,12 @@ export class KompasHeaderAccountProfile extends LitElement {
 
   render() {
     return html`
-      <div class="flex flex-shrink-0 flex-col bg-blue-100 p-4">
+      <div class="flex flex-shrink-0 flex-col p-4">
         ${!this.userData
           ? this.renderSkeletonLoading()
           : this.renderProfileContent()}
       </div>
+      <hr class="border-grey-300 mx-4" />
     `
   }
 }

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

@@ -637,7 +637,7 @@ export class KompasIdPaywallBody extends LitElement {
       >
         ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
       </button>`
-    } else if (type === 'proMiningArticle' && isPrevHistoryExist) {
+    } else if (type === 'proMiningOutlook' && isPrevHistoryExist) {
       buttonContent = html` <button
         @click=${this.redirectToPrevUrl}
         class="hidden md:block w-8 h-8 pl-4 ${textColorClass}"