@kompasid/lit-web-components 0.8.0 → 0.8.2

package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js

@@ -1,15 +1,46 @@
 import { __decorate } from "tslib";
 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 '../kompasid-grace-period/KompasGracePeriod.js';
 let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitElement {
     constructor() {
         super(...arguments);
+        /**
+         * Props
+         */
         this.userInitialName = '';
         this.userData = {};
         this.subscriptionUrl = '';
         this.totalGracePeriod = 0;
+        /**
+         * Props For Grace Period Tracker
+         */
+        this.paywall_location = '';
+        this.paywall_subscription_package = '';
+        this.paywall_subscription_id = 0;
+        this.paywall_subscription_price = 0;
+        this.paywall_position = 0;
+        this.tracker_page_type = '';
+        this.tracker_content_id = '';
+        this.tracker_content_title = '';
+        this.tracker_content_categories = '';
+        this.tracker_content_type = '';
+        this.tracker_user_type = '';
+        this.tracker_subscription_status = '';
+        this.tracker_page_domain = '';
+        this.tracker_metered_wall_type = '';
+        this.tracker_metered_wall_balance = 0;
+        /**
+         * State
+         */
+        this.maxGracePeriod = 7;
+    }
+    formatDate(date) {
+        return format(new Date(date), 'dd MMM yyyy', { locale: id });
     }
     renderSkeletonLoading() {
         return html `
@@ -33,7 +64,7 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
     renderProfileContent() {
         var _a;
         /**
-         * Expired Button Element
+         * Subs Button Element
          */
         const subscribeButton = () => {
             var _a, _b;
@@ -53,19 +84,6 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
           </button>
         </div>
       `;
-        };
-        /**
-         * expired Info Element
-         */
-        const expiredInfo = () => {
-            var _a, _b;
-            const isNearExpired = (_a = this.userData) === null || _a === void 0 ? void 0 : _a.isNearExpired;
-            const expiredTextColor = isNearExpired
-                ? `text-orange-400`
-                : `text-grey-600`;
-            return html `<p class="${expiredTextColor} font-bold">
-        ${(_b = this.userData) === null || _b === void 0 ? void 0 : _b.expired}
-      </p>`;
         };
         /**
          * membership icon element, show if isMebership has truthy value
@@ -88,15 +106,20 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
         /**
          * Active Info Element
          */
-        const activeInfo = () => {
-            var _a, _b;
-            const isNearExpired = (_a = this.userData) === null || _a === void 0 ? void 0 : _a.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}">
-        ${(_b = this.userData) === null || _b === void 0 ? void 0 : _b.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
       class="active-info flex flex-col items-start leading-none text-left"
@@ -113,21 +136,37 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
 
         <div class="flex flex-col text-left">
           <p class="capitalize font-bold text-base text-blue-600">
-            ${truncate((_a = this.userData) === null || _a === void 0 ? void 0 : _a.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}"
-        /> -->
-      </div>
-
-      ${subscribeButton()}
+      ${((_a = this.userData) === null || _a === void 0 ? void 0 : _a.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>`;
     }
     async connectedCallback() {
@@ -165,6 +204,54 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], KompasHeaderAccountProfile.prototype, "totalGracePeriod", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "paywall_location", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "paywall_subscription_package", void 0);
+__decorate([
+    property({ type: Number })
+], KompasHeaderAccountProfile.prototype, "paywall_subscription_id", void 0);
+__decorate([
+    property({ type: Number })
+], KompasHeaderAccountProfile.prototype, "paywall_subscription_price", void 0);
+__decorate([
+    property({ type: Number })
+], KompasHeaderAccountProfile.prototype, "paywall_position", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "tracker_page_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "tracker_content_id", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "tracker_content_title", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "tracker_content_categories", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "tracker_content_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "tracker_user_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "tracker_subscription_status", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "tracker_page_domain", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "tracker_metered_wall_type", void 0);
+__decorate([
+    property({ type: Number })
+], KompasHeaderAccountProfile.prototype, "tracker_metered_wall_balance", void 0);
+__decorate([
+    state()
+], KompasHeaderAccountProfile.prototype, "maxGracePeriod", void 0);
 KompasHeaderAccountProfile = __decorate([
     customElement('kompasid-header-account-profile')
 ], KompasHeaderAccountProfile);

package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { truncate } from '../../utils/text.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n  static styles = [\n    css`\n      .header-account--membership-icon {\n        position: absolute;\n        bottom: -2px;\n        right: -2px;\n      }\n    `,\n    TWStyles,\n  ]\n\n  @property({ type: String }) userInitialName = ''\n  @property({ type: Object }) userData = {}\n  @property({ type: String }) subscriptionUrl = ''\n  @property({ type: Number }) totalGracePeriod = 0\n\n  private renderSkeletonLoading() {\n    return html`\n      <div>\n        <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n          <div\n            class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n          ></div>\n          <div class=\"flex flex-col text-left w-40 gap-y-2\">\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n          </div>\n        </div>\n        <div>\n          <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n        </div>\n      </div>\n    `\n  }\n\n  private renderProfileContent() {\n    /**\n     * Expired Button Element\n     */\n    const subscribeButton = () => {\n      if (!(this.userData as any)?.updateMembership) {\n        return html``\n      }\n      const handleSubscribe = () => {\n        window.location.href = this.subscriptionUrl\n      }\n\n      return html`\n        <div class=\"w-full\">\n          <button\n            onClick=${handleSubscribe}\n            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\"\n          >\n            ${(this.userData as any)?.updateMembership}\n          </button>\n        </div>\n      `\n    }\n    /**\n     * expired Info Element\n     */\n    const expiredInfo = () => {\n      const isNearExpired = (this.userData as any)?.isNearExpired\n      const expiredTextColor = isNearExpired\n        ? `text-orange-400`\n        : `text-grey-600`\n\n      return html`<p class=\"${expiredTextColor} font-bold\">\n        ${(this.userData as any)?.expired}\n      </p>`\n    }\n\n    /**\n     * membership icon element, show if isMebership has truthy value\n     */\n    const membershipIcon = () => {\n      if (!(this.userData as any)?.isMembership) {\n        return html``\n      }\n\n      return html`\n        <div>\n          <img\n            class=\"header-account--membership-icon\"\n            src=\"https://cdn-www.kompas.id/global-header/crown-blue-10.svg\"\n            alt=\"membership-crown-icon\"\n          />\n        </div>\n      `\n    }\n\n    /**\n     * Active Info Element\n     */\n\n    const activeInfo = () => {\n      const isNearExpired = (this.userData as any)?.isNearExpired\n      const expiredTextColor = isNearExpired\n        ? `text-orange-400`\n        : `text-grey-600`\n\n      return html`<p class=\"capitalize text-sm ${expiredTextColor}\">\n        ${(this.userData as any)?.activeInfo}\n      </p>`\n    }\n\n    return html`<div\n      class=\"active-info flex flex-col items-start leading-none text-left\"\n    >\n      <div class=\"flex flex-row items-center gap-4\">\n        <div\n          class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative\"\n        >\n          <span class=\"capitalize text-2xl text-grey-100 font-bold\"\n            >${this.userInitialName}</span\n          >\n          ${membershipIcon()}\n        </div>\n\n        <div class=\"flex flex-col text-left\">\n          <p class=\"capitalize font-bold text-base text-blue-600\">\n            ${truncate((this.userData as any)?.userName, 25)}\n          </p>\n          ${activeInfo()} ${expiredInfo()}\n        </div>\n      </div>\n\n      <div class=\"mt-4\">\n        <!-- <kompas-grace-period\n          totalGracePeriod=\"{this.totalGracePeriod}\"\n          isColoumn=\"{true}\"\n          isShowButton=\"{true}\"\n        /> -->\n      </div>\n\n      ${subscribeButton()}\n    </div>`\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n  }\n\n  render() {\n    return html`\n      <div class=\"flex flex-shrink-0 flex-col bg-blue-100 p-4\">\n        ${!this.userData\n          ? this.renderSkeletonLoading()\n          : this.renderProfileContent()}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, subDays, addDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { truncate } from '../../utils/text.js'\nimport { User } from '../kompasid-header-account/types.js'\nimport '../kompasid-grace-period/KompasGracePeriod.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n  static styles = [\n    css`\n      .header-account--membership-icon {\n        position: absolute;\n        bottom: -2px;\n        right: -2px;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  @property({ type: String }) userInitialName = ''\n  @property({ type: Object }) userData = {} as User\n  @property({ type: String }) subscriptionUrl = ''\n  @property({ type: Number }) totalGracePeriod = 0\n\n  /**\n   * Props For Grace Period Tracker\n   */\n  @property({ type: String }) paywall_location = ''\n  @property({ type: String }) paywall_subscription_package = ''\n  @property({ type: Number }) paywall_subscription_id = 0\n  @property({ type: Number }) paywall_subscription_price = 0\n  @property({ type: Number }) paywall_position = 0\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n\n  /**\n   * State\n   */\n  @state() private maxGracePeriod = 7\n\n  formatDate(date: Date | string) {\n    return format(new Date(date), 'dd MMM yyyy', { locale: id })\n  }\n\n  private renderSkeletonLoading() {\n    return html`\n      <div>\n        <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n          <div\n            class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n          ></div>\n          <div class=\"flex flex-col text-left w-40 gap-y-2\">\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n          </div>\n        </div>\n        <div>\n          <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n        </div>\n      </div>\n    `\n  }\n\n  private renderProfileContent() {\n    /**\n     * Subs Button Element\n     */\n    const subscribeButton = () => {\n      if (!(this.userData as any)?.updateMembership) {\n        return html``\n      }\n      const handleSubscribe = () => {\n        window.location.href = this.subscriptionUrl\n      }\n\n      return html`\n        <div class=\"w-full\">\n          <button\n            onClick=${handleSubscribe}\n            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\"\n          >\n            ${(this.userData as any)?.updateMembership}\n          </button>\n        </div>\n      `\n    }\n    /**\n     * membership icon element, show if isMebership has truthy value\n     */\n    const membershipIcon = () => {\n      if (!this.userData?.isMembership) {\n        return html``\n      }\n\n      return html`\n        <div>\n          <img\n            class=\"header-account--membership-icon\"\n            src=\"https://cdn-www.kompas.id/global-header/crown-blue-10.svg\"\n            alt=\"membership-crown-icon\"\n          />\n        </div>\n      `\n    }\n\n    /**\n     * Active Info Element\n     */\n\n    const activeInfoTemplate = () => {\n      const { isGracePeriod, totalGracePeriod, activeInfo } = this.userData\n\n      const expiredTextColor = isGracePeriod\n        ? `text-orange-500`\n        : `text-grey-600`\n\n      const startGracePeriodDate = this.formatDate(\n        subDays(new Date().toLocaleDateString(), totalGracePeriod - 1)\n      )\n      const endGracePeriodDate = this.formatDate(\n        addDays(\n          new Date().toLocaleDateString(),\n          this.maxGracePeriod - totalGracePeriod\n        )\n      )\n\n      const text = isGracePeriod\n        ? html`<span> Periode Masa Tenggang </span>\n            <p class=\"font-bold\">\n              ${startGracePeriodDate} - ${endGracePeriodDate}\n            </p> `\n        : activeInfo || ''\n\n      return html`<p class=\"capitalize text-sm ${expiredTextColor}\">${text}</p>`\n    }\n\n    return html`<div\n      class=\"active-info flex flex-col items-start leading-none text-left\"\n    >\n      <div class=\"flex flex-row items-center gap-4\">\n        <div\n          class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative\"\n        >\n          <span class=\"capitalize text-2xl text-grey-100 font-bold\"\n            >${this.userInitialName}</span\n          >\n          ${membershipIcon()}\n        </div>\n\n        <div class=\"flex flex-col text-left\">\n          <p class=\"capitalize font-bold text-base text-blue-600\">\n            ${truncate(this.userData.userName, 25)}\n          </p>\n          ${activeInfoTemplate()}\n        </div>\n      </div>\n\n      ${this.userData?.isGracePeriod\n        ? html`<div class=\"mt-4\">\n            <kompasid-grace-period\n              totalGracePeriod=${this.userData.totalGracePeriod}\n              isColumn=\"true\"\n              isShowButton=\"true\"\n              isBackgroundOnContentOnly=\"true\"\n              paywall_location=${this.paywall_location}\n              paywall_subscription_package=${this.paywall_subscription_package}\n              paywall_subscription_id=${this.paywall_subscription_id}\n              paywall_subscription_price=${this.paywall_subscription_price}\n              paywall_position=${this.paywall_position}\n              tracker_page_type=${this.tracker_page_type}\n              tracker_content_id=${this.tracker_content_id}\n              tracker_content_title=${this.tracker_content_title}\n              tracker_content_categories=${this.tracker_content_categories}\n              tracker_content_type=${this.tracker_content_type}\n              tracker_user_type=${this.tracker_user_type}\n              tracker_subscription_status=${this.tracker_subscription_status}\n              tracker_page_domain=${this.tracker_page_domain}\n              tracker_metered_wall_type=${this.tracker_metered_wall_type}\n              tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n            ></kompasid-grace-period>\n          </div>`\n        : subscribeButton()}\n    </div>`\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n  }\n\n  render() {\n    return html`\n      <div class=\"flex flex-shrink-0 flex-col bg-blue-100 p-4\">\n        ${!this.userData\n          ? this.renderSkeletonLoading()\n          : this.renderProfileContent()}\n      </div>\n    `\n  }\n}\n"]}