@kompasid/lit-web-components 0.6.2 → 0.6.4

package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js

@@ -0,0 +1,185 @@
+import { __decorate } from "tslib";
+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';
+let KompasHeaderAccountMenu = class KompasHeaderAccountMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.clipboardClicked = false;
+        /**
+         * Cart Url
+         */
+        this.cartUrl = 'https://gerai.kompas.id/cart';
+        /**
+         * Logout Url
+         */
+        this.logoutUrl = 'https://account.kompas.id/logout';
+        /**
+         * Manage Account Url
+         */
+        this.manageAccountUrl = 'https://account.kompas.id/manage-account/my-account';
+        /**
+         * Notification Url
+         */
+        this.notificationUrl = 'https://account.kompas.id/manage-account/notification';
+        /**
+         * Orders Url
+         */
+        this.ordersUrl = 'https://gerai.kompas.id/my-account/orders';
+        /**
+         * Read Later Url
+         */
+        this.readLaterUrl = 'https://www.kompas.id/baca-nanti';
+        /**
+         * Total Notification Count
+         */
+        this.notificationTotal = 0;
+        // Render Total Bubble
+        this.renderTotalBubble = (total) => {
+            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>
+    `;
+        };
+    }
+    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>
+    `;
+    }
+};
+KompasHeaderAccountMenu.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,
+];
+__decorate([
+    state()
+], KompasHeaderAccountMenu.prototype, "clipboardClicked", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountMenu.prototype, "cartUrl", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountMenu.prototype, "logoutUrl", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountMenu.prototype, "manageAccountUrl", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountMenu.prototype, "notificationUrl", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountMenu.prototype, "ordersUrl", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountMenu.prototype, "readLaterUrl", void 0);
+__decorate([
+    property({ type: Number })
+], KompasHeaderAccountMenu.prototype, "notificationTotal", void 0);
+KompasHeaderAccountMenu = __decorate([
+    customElement('kompasid-header-account-menu')
+], KompasHeaderAccountMenu);
+export { KompasHeaderAccountMenu };
+//# sourceMappingURL=KompasHeaderAccountMenu.js.map

package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KompasHeaderAccountMenu.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-header-account-menu')\nexport class KompasHeaderAccountMenu extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n      .header-account-menu--item {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: 0.75rem;\n        transition: background-color 0.3s ease-in-out;\n        border-radius: 0.25rem;\n      }\n      .header-account-menu--item:hover {\n        background-color: #e5e7eb; /* Assuming grey-200 */\n      }\n      .header-account-menu--title {\n        flex-grow: 1;\n        font-size: 1rem;\n        font-weight: bold;\n        margin-left: 1rem;\n      }\n      .header-account-menu--notification-info {\n        font-size: 0.875rem;\n        border-radius: 1.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: rgb(255, 122, 0);\n        color: #f7fafc;\n        height: 1.75rem;\n        width: 1.75rem;\n      }\n      .icon {\n        width: 20px;\n        height: 20px;\n        margin-top: auto;\n        margin-bottom: auto;\n        color: rgb(0 85 154);\n      }\n    `,\n    TWStyles,\n  ]\n\n  kompasKring?: HTMLInputElement\n\n  @state() clipboardClicked: boolean = false\n\n  /**\n   * Cart Url\n   */\n  @property({ type: String }) cartUrl = 'https://gerai.kompas.id/cart'\n\n  /**\n   * Logout Url\n   */\n  @property({ type: String }) logoutUrl = 'https://account.kompas.id/logout'\n\n  /**\n   * Manage Account Url\n   */\n  @property({ type: String }) manageAccountUrl =\n    'https://account.kompas.id/manage-account/my-account'\n\n  /**\n   * Notification Url\n   */\n  @property({ type: String }) notificationUrl =\n    'https://account.kompas.id/manage-account/notification'\n\n  /**\n   * Orders Url\n   */\n  @property({ type: String }) ordersUrl =\n    'https://gerai.kompas.id/my-account/orders'\n\n  /**\n   * Read Later Url\n   */\n  @property({ type: String }) readLaterUrl = 'https://www.kompas.id/baca-nanti'\n\n  /**\n   * Total Notification Count\n   */\n  @property({ type: Number }) notificationTotal: number = 0\n\n  // Render Total Bubble\n  private renderTotalBubble = (total: number) => {\n    if (!total) {\n      return html``\n    }\n\n    const isOneDigitNotification = total > 0 && total <= 9\n    const additionalStyling = isOneDigitNotification ? '' : 'pl-0.5'\n\n    return html`\n      <div\n        class=${`header-account-menu--notification-info ${additionalStyling}`}\n      >\n        <!-- Limit Display to use \"9+\"\" if total notification exceed 9 -->\n        ${isOneDigitNotification\n          ? total\n          : html`<span>9<span class=\"pl-px\">+</span></span>`}\n      </div>\n    `\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n  }\n\n  render() {\n    return html`\n      <div class=\"border-b border-grey-300 text-grey-600\">\n        <li\n          class=\"font-bold flex flex-shrink-0 flex-col text-left text-sm mb-4\"\n        >\n          <!-- Cart -->\n          <!--<a href={this.cartUrl} class=\"header-account-menu--item\">\n            <div class=\"icon icon-md icon-blue-600\">{unsafeSVG(getFontAwesomeIcon('fas', 'cart-shopping'))}</div>\n            <p class=\"header-account-menu--title\">Keranjang</p>\n          </a> -->\n          <!-- Manage Account  -->\n          <a href=${this.manageAccountUrl} class=\"header-account-menu--item\">\n            <div class=\"icon icon-md icon-blue-600\">\n              ${unsafeSVG(getFontAwesomeIcon('fas', 'user-gear'))}\n            </div>\n            <p class=\"header-account-menu--title\">Kelola Akun</p>\n          </a>\n          <!-- Transaction  -->\n          <!-- <a href={this.ordersUrl} class=\"header-account-menu--item\">\n            <div class=\"icon icon-md icon-blue-600\">{unsafeSVG(getFontAwesomeIcon('fas', 'arrow-right-arrow-left'))}</div>\n            <p class=\"header-account-menu--title\">Transaksi</p>\n          </a> -->\n          <!-- Notifications  -->\n          <a href=${this.notificationUrl} class=\"header-account-menu--item\">\n            <div class=\"icon icon-md icon-blue-600\">\n              ${unsafeSVG(getFontAwesomeIcon('fas', 'bell'))}\n            </div>\n            <p class=\"header-account-menu--title\">Notifikasi</p>\n            <p class=\"flex-none\">\n              <!-- Conditional rendering based on notification count -->\n              ${this.renderTotalBubble(this.notificationTotal)}\n            </p>\n          </a>\n          <!-- Read Later  -->\n          <a href=${this.readLaterUrl} class=\"header-account-menu--item\">\n            <div class=\"icon icon-md icon-blue-600\">\n              ${unsafeSVG(getFontAwesomeIcon('fas', 'bookmark'))}\n            </div>\n            <p class=\"header-account-menu--title\">Baca Nanti</p>\n          </a>\n          <!-- Logout -->\n          <a href=${this.logoutUrl} class=\"header-account-menu--item\">\n            <div class=\"icon icon-md icon-blue-600\">\n              ${unsafeSVG(getFontAwesomeIcon('fas', 'right-from-bracket'))}\n            </div>\n            <p class=\"header-account-menu--title\">Keluar</p>\n          </a>\n        </li>\n      </div>\n    `\n  }\n}\n"]}

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

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+export declare class KompasHeaderAccountProfile extends LitElement {
+    static styles: import("lit").CSSResult[];
+    userInitialName: string;
+    userData: {};
+    subscriptionUrl: string;
+    totalGracePeriod: number;
+    private renderSkeletonLoading;
+    private renderProfileContent;
+    connectedCallback(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,172 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { TWStyles } from '../../../tailwind/tailwind.js';
+import { truncate } from '../../utils/text.js';
+let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.userInitialName = '';
+        this.userData = {};
+        this.subscriptionUrl = '';
+        this.totalGracePeriod = 0;
+    }
+    renderSkeletonLoading() {
+        return html `
+      <div>
+        <div class="flex flex-row mb-5 items-center gap-4 leading-none">
+          <div
+            class="bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse"
+          ></div>
+          <div class="flex flex-col text-left w-40 gap-y-2">
+            <div class="h-3 rounded-sm w-full bg-grey-300 animate-pulse"></div>
+            <div class="h-3 rounded-sm w-full bg-grey-300 animate-pulse"></div>
+            <div class="h-3 rounded-sm w-full bg-grey-300 animate-pulse"></div>
+          </div>
+        </div>
+        <div>
+          <div class="h-6 rounded-sm w-full bg-grey-300 animate-pulse"></div>
+        </div>
+      </div>
+    `;
+    }
+    renderProfileContent() {
+        var _a;
+        /**
+         * Expired Button Element
+         */
+        const subscribeButton = () => {
+            var _a, _b;
+            if (((_a = this.userData) === null || _a === void 0 ? void 0 : _a.updateMembership) !== null) {
+                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"
+          >
+            ${(_b = this.userData) === null || _b === void 0 ? void 0 : _b.updateMembership}
+          </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
+         */
+        const membershipIcon = () => {
+            var _a;
+            if (!((_a = this.userData) === null || _a === void 0 ? void 0 : _a.isMembership)) {
+                return html ``;
+            }
+            return html `
+        <div>
+          <img
+            class="header-account--membership-icon"
+            src="https://d3w4qaq4xm1ncv.cloudfront.net/global-header/crown-blue-10.svg"
+            alt="membership-crown-icon"
+          />
+        </div>
+      `;
+        };
+        /**
+         * 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`
+                : `text-grey-600`;
+            return html `<p class="capitalize text-sm ${expiredTextColor}">
+        ${(_b = this.userData) === null || _b === void 0 ? void 0 : _b.activeInfo}
+      </p>`;
+        };
+        return html `<div
+      class="active-info flex flex-col items-start leading-none text-left"
+    >
+      <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
+          >
+          ${membershipIcon()}
+        </div>
+
+        <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)}
+          </p>
+          ${activeInfo()} ${expiredInfo()}
+        </div>
+      </div>
+
+      <div class="mt-4">
+        <!-- <kompas-grace-period
+          totalGracePeriod="{this.totalGracePeriod}"
+          isColoumn="{true}"
+          isShowButton="{true}"
+        /> -->
+      </div>
+
+      ${subscribeButton()}
+    </div>`;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+    }
+    render() {
+        return html `
+      <div class="flex flex-shrink-0 flex-col bg-blue-100 p-4">
+        ${!this.userData
+            ? this.renderSkeletonLoading()
+            : this.renderProfileContent()}
+      </div>
+    `;
+    }
+};
+KompasHeaderAccountProfile.styles = [
+    css `
+      .header-account--membership-icon {
+        position: absolute;
+        bottom: -2px;
+        right: -2px;
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "userInitialName", void 0);
+__decorate([
+    property({ type: Object })
+], KompasHeaderAccountProfile.prototype, "userData", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "subscriptionUrl", void 0);
+__decorate([
+    property({ type: Number })
+], KompasHeaderAccountProfile.prototype, "totalGracePeriod", void 0);
+KompasHeaderAccountProfile = __decorate([
+    customElement('kompasid-header-account-profile')
+], KompasHeaderAccountProfile);
+export { KompasHeaderAccountProfile };
+//# sourceMappingURL=KompasHeaderAccountProfile.js.map

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

@@ -0,0 +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 !== null) {\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://d3w4qaq4xm1ncv.cloudfront.net/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"]}

package/dist/src/components/kompasid-paywall/KompasPaywall.js

@@ -86,26 +86,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
             },
             packages: {
                 title: 'Sekali bayar, tanpa perpanjang otomatis',
-                memberships: [
-                    {
-                        title: 'Kompas Digital Premium 12 Bulan (Hemat 40%)',
-                        percentage: 40,
-                        price: 360000,
-                        discountPrice: 600000,
-                        periode: 'Tahun',
-                        isHighlight: true,
-                        url: 'https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=',
-                    },
-                    {
-                        title: 'Kompas Digital Premium 1 Bulan',
-                        percentage: 0,
-                        discountPrice: 0,
-                        price: 50000,
-                        periode: 'Bulan',
-                        isHighlight: false,
-                        url: 'https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=',
-                    },
-                ],
+                memberships: [],
             },
             payment: {
                 desktop: [
@@ -251,6 +232,10 @@ let KompasPaywall = class KompasPaywall extends LitElement {
                     title: json[this.type].head,
                     description: json[this.type].content,
                 },
+                packages: {
+                    ...this.mockResult.packages,
+                    memberships: json[this.type].memberships,
+                },
             };
         }
         catch (error) {

package/dist/src/components/kompasid-paywall/KompasPaywall.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasPaywall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/KompasPaywall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, state, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PaywallProduct, PaywallType } from './types.js'\nimport '../kompasid-paywall-body/KompasPaywallBody.js'\nimport '../kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.js'\nimport '../kompasid-paywall-information-header/KompasPaywallInformationHeader.js'\n\n@customElement('kompasid-paywall')\nexport class KompasPaywall extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .transparent-linear {\n        background-image: -webkit-gradient(\n          linear,\n          left top,\n          left bottom,\n          from(hsla(0, 0%, 100%, 0)),\n          to(#fff)\n        );\n        background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);\n      }\n\n      .transparent-linear-dark {\n        background-image: -webkit-gradient(\n          linear,\n          left top,\n          left bottom,\n          from(hsla(0, 0%, 18%, 0)),\n          to(#121212)\n        );\n        background-image: linear-gradient(180deg, hsla(0, 0%, 18%, 0), #121212);\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property isLogin untuk menghandle apakah user sudah login atau belum\n   * property countdownArticle untuk menghandle count artikel\n   * property type untuk menghandle tipe epaper\n   * property isWithHeader untuk menghandle paywall information header\n   * property textHeader digunakan sebagai text pada paywall information header\n   * property paywallData untuk menghandle data paywall\n   * property userGuid untuk menghandle user Guid\n   * property subscriptionStatus untuk menghandle status subscription user\n   * property swgEnable untuk menghandle swg apakah di aktifkan atau tidak\n   * property paywall_location = The location where user encounter the paywall\n   * property paywall_subscription_package = The name of the subscription package viewed by user\n   * property paywall_subscription_id = The ID of the subscription package viewed by user\n   * property paywall_subscription_price = The price of the subscriprtion package viewed by user\n   * property paywall_position = The position of the subscription package viewed by user\n   * property page_type = Type of the page\n   * property content_id = ID of article (slug)\n   * property content_type = Whether it's free article or paid article\n   * property content_title = The title of article\n   * property tracker_content_categories = The category of the content\n   * property user_type = Type of user based on their subscription\n   * property subscription_status = Status of their subscription\n   * property page_domain = Page Domain\n   * property metered_wall_type = The type of Metered Wall\n   * property metered_wall_balance = The balance of their metered wall\n   * property epaper_edition = The edition of epaper viewed by user\n   * property theme = The theme of the paywall component\n   */\n\n  @state() private paywallData: PaywallProduct = {} as PaywallProduct\n  @state() private isOpen: Boolean = true\n  @state() private isLoading: Boolean = true\n\n  @property({ type: Boolean }) isLogin = false\n  @property({ type: Number }) countdownArticle = 0\n  @property({ type: String }) type: PaywallType = 'reguler'\n  @property({ type: Boolean }) isWithHeader = false\n  @property({ type: String }) textHeader = ''\n  @property({ type: String }) userGuid = ''\n  @property({ type: String }) subscriptionStatus = ''\n  @property({ type: Boolean }) swgEnable = false\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  @property({ type: String }) tracker_epaper_edition = ''\n  @property({ type: String }) theme = ''\n\n  mockResult: PaywallProduct = {\n    informations: {\n      title: '',\n      description: [],\n      register: {\n        img: 'https://www.kompas.id/img/backgrounds/ilustrasi-banner-registration.png',\n        title: 'Ingin Membaca Artikel Ini Secara Utuh?',\n        subtitle: 'Daftar akun untuk membaca 5 artikel premium secara gratis ',\n        label: 'Daftar Sekarang ',\n      },\n      meterred: {\n        maxQuota: 5,\n        label: 'Langganan',\n        maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',\n        url: 'https://kompas.id/berlangganan',\n      },\n    },\n    packages: {\n      title: 'Sekali bayar, tanpa perpanjang otomatis',\n      memberships: [\n        {\n          title: 'Kompas Digital Premium 12 Bulan (Hemat 40%)',\n          percentage: 40,\n          price: 360000,\n          discountPrice: 600000,\n          periode: 'Tahun',\n          isHighlight: true,\n          url: 'https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=',\n        },\n        {\n          title: 'Kompas Digital Premium 1 Bulan',\n          percentage: 0,\n          discountPrice: 0,\n          price: 50000,\n          periode: 'Bulan',\n          isHighlight: false,\n          url: 'https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=',\n        },\n      ],\n    },\n    payment: {\n      desktop: [\n        {\n          name: 'gopay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'ovo',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mastercard',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bcaklikpay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'indomaret',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n        },\n        {\n          name: 'jcb',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n        },\n        {\n          name: 'dana',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n        },\n        {\n          name: 'visa',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mandiri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bca',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bni',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n        },\n        {\n          name: 'akulaku',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n        },\n      ],\n      mobile: [\n        {\n          name: 'gopay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'ovo',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n        },\n        {\n          name: 'visa',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mastercard',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n        },\n      ],\n      ekstension: [\n        {\n          name: 'dana',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mandiri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bcaklikpay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'akulaku',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bni',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n        },\n        {\n          name: 'indomaret',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bca',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n        },\n        {\n          name: 'jcb',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n        },\n      ],\n    },\n  }\n\n  get darkUrl() {\n    return this.theme === 'dark' ? '-dark' : ''\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.getPaywallData()\n  }\n\n  async getPaywallData() {\n    try {\n      const response = await fetch(\n        'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/paywall.json'\n      )\n      const json = await response.json()\n      this.paywallData = {\n        ...this.mockResult,\n        informations: {\n          ...this.mockResult.informations,\n          title: json[this.type].head,\n          description: json[this.type].content,\n        },\n      }\n    } catch (error) {\n      throw Error('failed to get paywall data')\n    } finally {\n      this.isLoading = false\n    }\n  }\n\n  private transitionBox() {\n    return html`\n      <div\n        class=\"h-20 ${this.theme === 'dark'\n          ? 'transparent-linear-dark'\n          : 'transparent-linear'} -mt-24 z-0 w-full\"\n      ></div>\n    `\n  }\n\n  private renderEpaperPaywallSection() {\n    return html`<kompasid-paywall-body\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_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_epaper_edition=${this.tracker_epaper_edition}\n      tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n      ?swgEnable=${this.swgEnable}\n      tracker_content_type=${this.tracker_content_type}\n      ?isLogin=${this.isLogin}\n      type=${this.type}\n      countdownArticle=${this.countdownArticle}\n      .paywallData=${this.paywallData}\n      subscriptionStatus=${this.subscriptionStatus}\n      userGuid=${this.userGuid}\n      theme=${this.theme}\n    ></kompasid-paywall-body>`\n  }\n\n  private renderRegularPaywallSection() {\n    const defaultHeaderText: string =\n      this.paywallData.informations.meterred.maxQuotaMessage\n    if (this.isWithHeader) {\n      return html`\n        <div>\n          ${this.transitionBox()}\n          <div\n            class=\"flex flex-col ${this.theme === 'dark'\n              ? 'bg-dark-5'\n              : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n          >\n            <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n              <kompasid-paywall-information-header\n                text=${this.textHeader || defaultHeaderText}\n                theme=${this.theme}\n              ></kompasid-paywall-information-header>\n              <kompasid-paywall-body\n                paywall_location=${this.paywall_location}\n                paywall_subscription_package=${this\n                  .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_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_epaper_edition=${this.tracker_epaper_edition}\n                tracker_metered_wall_balance=${this\n                  .tracker_metered_wall_balance}\n                tracker_content_type=${this.tracker_content_type}\n                ?swgEnable=${this.swgEnable}\n                ?isLogin=${this.isLogin}\n                type=${this.type}\n                countdownArticle=${this.countdownArticle}\n                .paywallData=${this.paywallData}\n                subscriptionStatus=${this.subscriptionStatus}\n                userGuid=${this.userGuid}\n                theme=${this.theme}\n              ></kompasid-paywall-body>\n            </div>\n          </div>\n        </div>\n      `\n    }\n    return html`\n      <div>\n        ${this.transitionBox()}\n        <div\n          class=\"flex flex-col ${this.theme === 'dark'\n            ? 'bg-dark-5'\n            : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n        >\n          <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n            <kompasid-paywall-body\n              tracker_content_type=${this.tracker_content_type}\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_user_type=${this.tracker_user_type}\n              tracker_subscription_status=${this.tracker_subscription_status}\n              tracker_epaper_edition=${this.tracker_epaper_edition}\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              ?swgEnable=${this.swgEnable}\n              ?isLogin=${this.isLogin}\n              type=${this.type}\n              countdownArticle=${this.countdownArticle}\n              .paywallData=${this.paywallData}\n              subscriptionStatus=${this.subscriptionStatus}\n              userGuid=${this.userGuid}\n              theme=${this.theme}\n            ></kompasid-paywall-body>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private renderAudioPaywallSection() {\n    const defaultHeaderText: string =\n      this.paywallData.informations.meterred.maxQuotaMessage\n    if (this.isWithHeader) {\n      return html`\n        <div>\n          ${this.transitionBox()}\n          <div\n            class=\"flex flex-col ${this.theme === 'dark'\n              ? 'bg-dark-5'\n              : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n          >\n            <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n              <kompasid-paywall-information-header\n                text=${this.textHeader || defaultHeaderText}\n                theme=${this.theme}\n              ></kompasid-paywall-information-header>\n              <kompasid-paywall-body\n                paywall_location=${this.paywall_location}\n                paywall_subscription_package=${this\n                  .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_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_epaper_edition=${this.tracker_epaper_edition}\n                tracker_metered_wall_balance=${this\n                  .tracker_metered_wall_balance}\n                tracker_content_type=${this.tracker_content_type}\n                ?swgEnable=${this.swgEnable}\n                ?isLogin=${this.isLogin}\n                type=${this.type}\n                countdownArticle=${this.countdownArticle}\n                .paywallData=${this.paywallData}\n                subscriptionStatus=${this.subscriptionStatus}\n                userGuid=${this.userGuid}\n                theme=${this.theme}\n                .togglePaywall=${() => this.togglePaywall()}\n              ></kompasid-paywall-body>\n            </div>\n          </div>\n        </div>\n      `\n    }\n    return html`\n      <div>\n        ${this.transitionBox()}\n        <div\n          class=\"flex flex-col ${this.theme === 'dark'\n            ? 'bg-dark-5'\n            : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n        >\n          <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n            <kompasid-paywall-body\n              tracker_content_type=${this.tracker_content_type}\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_user_type=${this.tracker_user_type}\n              tracker_subscription_status=${this.tracker_subscription_status}\n              tracker_epaper_edition=${this.tracker_epaper_edition}\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              ?swgEnable=${this.swgEnable}\n              ?isLogin=${this.isLogin}\n              type=${this.type}\n              countdownArticle=${this.countdownArticle}\n              .paywallData=${this.paywallData}\n              subscriptionStatus=${this.subscriptionStatus}\n              userGuid=${this.userGuid}\n              theme=${this.theme}\n              .togglePaywall=${() => this.togglePaywall()}\n            ></kompasid-paywall-body>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private selectorTypePaywall = (type: PaywallType) => {\n    switch (type) {\n      case 'epaper':\n        return this.renderEpaperPaywallSection()\n      case 'audio':\n        return this.renderAudioPaywallSection()\n      case 'reguler':\n        return this.renderRegularPaywallSection()\n      default:\n        return this.renderRegularPaywallSection()\n    }\n  }\n\n  private togglePaywall() {\n    this.isOpen = !this.isOpen\n  }\n\n  render() {\n    return !this.isLoading && this.isOpen\n      ? html`\n          <div class=\"relative w-full\">\n            ${this.selectorTypePaywall(this.type)}\n          </div>\n        `\n      : nothing\n  }\n}\n"]}
+{"version":3,"file":"KompasPaywall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/KompasPaywall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, state, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PaywallProduct, PaywallType } from './types.js'\nimport '../kompasid-paywall-body/KompasPaywallBody.js'\nimport '../kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.js'\nimport '../kompasid-paywall-information-header/KompasPaywallInformationHeader.js'\n\n@customElement('kompasid-paywall')\nexport class KompasPaywall extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .transparent-linear {\n        background-image: -webkit-gradient(\n          linear,\n          left top,\n          left bottom,\n          from(hsla(0, 0%, 100%, 0)),\n          to(#fff)\n        );\n        background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);\n      }\n\n      .transparent-linear-dark {\n        background-image: -webkit-gradient(\n          linear,\n          left top,\n          left bottom,\n          from(hsla(0, 0%, 18%, 0)),\n          to(#121212)\n        );\n        background-image: linear-gradient(180deg, hsla(0, 0%, 18%, 0), #121212);\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property isLogin untuk menghandle apakah user sudah login atau belum\n   * property countdownArticle untuk menghandle count artikel\n   * property type untuk menghandle tipe epaper\n   * property isWithHeader untuk menghandle paywall information header\n   * property textHeader digunakan sebagai text pada paywall information header\n   * property paywallData untuk menghandle data paywall\n   * property userGuid untuk menghandle user Guid\n   * property subscriptionStatus untuk menghandle status subscription user\n   * property swgEnable untuk menghandle swg apakah di aktifkan atau tidak\n   * property paywall_location = The location where user encounter the paywall\n   * property paywall_subscription_package = The name of the subscription package viewed by user\n   * property paywall_subscription_id = The ID of the subscription package viewed by user\n   * property paywall_subscription_price = The price of the subscriprtion package viewed by user\n   * property paywall_position = The position of the subscription package viewed by user\n   * property page_type = Type of the page\n   * property content_id = ID of article (slug)\n   * property content_type = Whether it's free article or paid article\n   * property content_title = The title of article\n   * property tracker_content_categories = The category of the content\n   * property user_type = Type of user based on their subscription\n   * property subscription_status = Status of their subscription\n   * property page_domain = Page Domain\n   * property metered_wall_type = The type of Metered Wall\n   * property metered_wall_balance = The balance of their metered wall\n   * property epaper_edition = The edition of epaper viewed by user\n   * property theme = The theme of the paywall component\n   */\n\n  @state() private paywallData: PaywallProduct = {} as PaywallProduct\n  @state() private isOpen: Boolean = true\n  @state() private isLoading: Boolean = true\n\n  @property({ type: Boolean }) isLogin = false\n  @property({ type: Number }) countdownArticle = 0\n  @property({ type: String }) type: PaywallType = 'reguler'\n  @property({ type: Boolean }) isWithHeader = false\n  @property({ type: String }) textHeader = ''\n  @property({ type: String }) userGuid = ''\n  @property({ type: String }) subscriptionStatus = ''\n  @property({ type: Boolean }) swgEnable = false\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  @property({ type: String }) tracker_epaper_edition = ''\n  @property({ type: String }) theme = ''\n\n  mockResult: PaywallProduct = {\n    informations: {\n      title: '',\n      description: [],\n      register: {\n        img: 'https://www.kompas.id/img/backgrounds/ilustrasi-banner-registration.png',\n        title: 'Ingin Membaca Artikel Ini Secara Utuh?',\n        subtitle: 'Daftar akun untuk membaca 5 artikel premium secara gratis ',\n        label: 'Daftar Sekarang ',\n      },\n      meterred: {\n        maxQuota: 5,\n        label: 'Langganan',\n        maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',\n        url: 'https://kompas.id/berlangganan',\n      },\n    },\n    packages: {\n      title: 'Sekali bayar, tanpa perpanjang otomatis',\n      memberships: [],\n    },\n    payment: {\n      desktop: [\n        {\n          name: 'gopay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'ovo',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mastercard',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bcaklikpay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'indomaret',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n        },\n        {\n          name: 'jcb',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n        },\n        {\n          name: 'dana',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n        },\n        {\n          name: 'visa',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mandiri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bca',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bni',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n        },\n        {\n          name: 'akulaku',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n        },\n      ],\n      mobile: [\n        {\n          name: 'gopay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'ovo',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n        },\n        {\n          name: 'visa',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mastercard',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n        },\n      ],\n      ekstension: [\n        {\n          name: 'dana',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mandiri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bcaklikpay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'akulaku',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bni',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n        },\n        {\n          name: 'indomaret',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bca',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n        },\n        {\n          name: 'jcb',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n        },\n      ],\n    },\n  }\n\n  get darkUrl() {\n    return this.theme === 'dark' ? '-dark' : ''\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.getPaywallData()\n  }\n\n  async getPaywallData() {\n    try {\n      const response = await fetch(\n        'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/paywall.json'\n      )\n      const json = await response.json()\n      this.paywallData = {\n        ...this.mockResult,\n        informations: {\n          ...this.mockResult.informations,\n          title: json[this.type].head,\n          description: json[this.type].content,\n        },\n        packages: {\n          ...this.mockResult.packages,\n          memberships: json[this.type].memberships,\n        },\n      }\n    } catch (error) {\n      throw Error('failed to get paywall data')\n    } finally {\n      this.isLoading = false\n    }\n  }\n\n  private transitionBox() {\n    return html`\n      <div\n        class=\"h-20 ${this.theme === 'dark'\n          ? 'transparent-linear-dark'\n          : 'transparent-linear'} -mt-24 z-0 w-full\"\n      ></div>\n    `\n  }\n\n  private renderEpaperPaywallSection() {\n    return html`<kompasid-paywall-body\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_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_epaper_edition=${this.tracker_epaper_edition}\n      tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n      ?swgEnable=${this.swgEnable}\n      tracker_content_type=${this.tracker_content_type}\n      ?isLogin=${this.isLogin}\n      type=${this.type}\n      countdownArticle=${this.countdownArticle}\n      .paywallData=${this.paywallData}\n      subscriptionStatus=${this.subscriptionStatus}\n      userGuid=${this.userGuid}\n      theme=${this.theme}\n    ></kompasid-paywall-body>`\n  }\n\n  private renderRegularPaywallSection() {\n    const defaultHeaderText: string =\n      this.paywallData.informations.meterred.maxQuotaMessage\n    if (this.isWithHeader) {\n      return html`\n        <div>\n          ${this.transitionBox()}\n          <div\n            class=\"flex flex-col ${this.theme === 'dark'\n              ? 'bg-dark-5'\n              : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n          >\n            <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n              <kompasid-paywall-information-header\n                text=${this.textHeader || defaultHeaderText}\n                theme=${this.theme}\n              ></kompasid-paywall-information-header>\n              <kompasid-paywall-body\n                paywall_location=${this.paywall_location}\n                paywall_subscription_package=${this\n                  .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_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_epaper_edition=${this.tracker_epaper_edition}\n                tracker_metered_wall_balance=${this\n                  .tracker_metered_wall_balance}\n                tracker_content_type=${this.tracker_content_type}\n                ?swgEnable=${this.swgEnable}\n                ?isLogin=${this.isLogin}\n                type=${this.type}\n                countdownArticle=${this.countdownArticle}\n                .paywallData=${this.paywallData}\n                subscriptionStatus=${this.subscriptionStatus}\n                userGuid=${this.userGuid}\n                theme=${this.theme}\n              ></kompasid-paywall-body>\n            </div>\n          </div>\n        </div>\n      `\n    }\n    return html`\n      <div>\n        ${this.transitionBox()}\n        <div\n          class=\"flex flex-col ${this.theme === 'dark'\n            ? 'bg-dark-5'\n            : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n        >\n          <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n            <kompasid-paywall-body\n              tracker_content_type=${this.tracker_content_type}\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_user_type=${this.tracker_user_type}\n              tracker_subscription_status=${this.tracker_subscription_status}\n              tracker_epaper_edition=${this.tracker_epaper_edition}\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              ?swgEnable=${this.swgEnable}\n              ?isLogin=${this.isLogin}\n              type=${this.type}\n              countdownArticle=${this.countdownArticle}\n              .paywallData=${this.paywallData}\n              subscriptionStatus=${this.subscriptionStatus}\n              userGuid=${this.userGuid}\n              theme=${this.theme}\n            ></kompasid-paywall-body>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private renderAudioPaywallSection() {\n    const defaultHeaderText: string =\n      this.paywallData.informations.meterred.maxQuotaMessage\n    if (this.isWithHeader) {\n      return html`\n        <div>\n          ${this.transitionBox()}\n          <div\n            class=\"flex flex-col ${this.theme === 'dark'\n              ? 'bg-dark-5'\n              : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n          >\n            <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n              <kompasid-paywall-information-header\n                text=${this.textHeader || defaultHeaderText}\n                theme=${this.theme}\n              ></kompasid-paywall-information-header>\n              <kompasid-paywall-body\n                paywall_location=${this.paywall_location}\n                paywall_subscription_package=${this\n                  .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_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_epaper_edition=${this.tracker_epaper_edition}\n                tracker_metered_wall_balance=${this\n                  .tracker_metered_wall_balance}\n                tracker_content_type=${this.tracker_content_type}\n                ?swgEnable=${this.swgEnable}\n                ?isLogin=${this.isLogin}\n                type=${this.type}\n                countdownArticle=${this.countdownArticle}\n                .paywallData=${this.paywallData}\n                subscriptionStatus=${this.subscriptionStatus}\n                userGuid=${this.userGuid}\n                theme=${this.theme}\n                .togglePaywall=${() => this.togglePaywall()}\n              ></kompasid-paywall-body>\n            </div>\n          </div>\n        </div>\n      `\n    }\n    return html`\n      <div>\n        ${this.transitionBox()}\n        <div\n          class=\"flex flex-col ${this.theme === 'dark'\n            ? 'bg-dark-5'\n            : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n        >\n          <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n            <kompasid-paywall-body\n              tracker_content_type=${this.tracker_content_type}\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_user_type=${this.tracker_user_type}\n              tracker_subscription_status=${this.tracker_subscription_status}\n              tracker_epaper_edition=${this.tracker_epaper_edition}\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              ?swgEnable=${this.swgEnable}\n              ?isLogin=${this.isLogin}\n              type=${this.type}\n              countdownArticle=${this.countdownArticle}\n              .paywallData=${this.paywallData}\n              subscriptionStatus=${this.subscriptionStatus}\n              userGuid=${this.userGuid}\n              theme=${this.theme}\n              .togglePaywall=${() => this.togglePaywall()}\n            ></kompasid-paywall-body>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private selectorTypePaywall = (type: PaywallType) => {\n    switch (type) {\n      case 'epaper':\n        return this.renderEpaperPaywallSection()\n      case 'audio':\n        return this.renderAudioPaywallSection()\n      case 'reguler':\n        return this.renderRegularPaywallSection()\n      default:\n        return this.renderRegularPaywallSection()\n    }\n  }\n\n  private togglePaywall() {\n    this.isOpen = !this.isOpen\n  }\n\n  render() {\n    return !this.isLoading && this.isOpen\n      ? html`\n          <div class=\"relative w-full\">\n            ${this.selectorTypePaywall(this.type)}\n          </div>\n        `\n      : nothing\n  }\n}\n"]}

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

@@ -3,9 +3,13 @@ export interface Product {
     percentage: number;
     price: number;
     discountPrice: number;
+    savingPrice: number;
     periode: string;
     isHighlight: boolean;
     url: string;
+    package: string;
+    subscriptionId: string;
+    position: number;
 }
 export interface Metered {
     maxQuota: number;

package/dist/src/components/kompasid-paywall/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface Product {\n  title: string\n  percentage: number\n  price: number\n  discountPrice: number\n  periode: string\n  isHighlight: boolean\n  url: string\n}\nexport interface Metered {\n  maxQuota: number\n  label: string\n  maxQuotaMessage: string\n  url: string\n}\nexport interface PaymentImage {\n  name: string\n  link: string\n}\nexport interface Registration {\n  img: string\n  title: string\n  subtitle: string\n  label: string\n}\nexport interface Informations {\n  title: string\n  description: Array<string>\n  register: {\n    img: string\n    title: string\n    subtitle: string\n    label: string\n  }\n}\nexport interface Packages {\n  title: string\n  memberships: Array<Product>\n}\nexport interface PaywallProduct {\n  informations: {\n    title: string\n    description: Array<string>\n    register: Registration\n    meterred: Metered\n  }\n  packages: Packages\n  payment: {\n    desktop: Array<PaymentImage>\n    mobile: Array<PaymentImage>\n    ekstension: Array<PaymentImage>\n  }\n}\n\nexport type PaywallType = 'epaper' | 'reguler' | 'audio' | 'custom'\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface Product {\n  title: string\n  percentage: number\n  price: number\n  discountPrice: number\n  savingPrice: number\n  periode: string\n  isHighlight: boolean\n  url: string\n  package: string\n  subscriptionId: string\n  position: number\n}\nexport interface Metered {\n  maxQuota: number\n  label: string\n  maxQuotaMessage: string\n  url: string\n}\nexport interface PaymentImage {\n  name: string\n  link: string\n}\nexport interface Registration {\n  img: string\n  title: string\n  subtitle: string\n  label: string\n}\nexport interface Informations {\n  title: string\n  description: Array<string>\n  register: {\n    img: string\n    title: string\n    subtitle: string\n    label: string\n  }\n}\nexport interface Packages {\n  title: string\n  memberships: Array<Product>\n}\nexport interface PaywallProduct {\n  informations: {\n    title: string\n    description: Array<string>\n    register: Registration\n    meterred: Metered\n  }\n  packages: Packages\n  payment: {\n    desktop: Array<PaymentImage>\n    mobile: Array<PaymentImage>\n    ekstension: Array<PaymentImage>\n  }\n}\n\nexport type PaywallType = 'epaper' | 'reguler' | 'audio' | 'custom'\n"]}