npm - @kompasid/lit-web-components - Versions diffs - 0.6.3 → 0.6.6 - Mend

@kompasid/lit-web-components 0.6.3 → 0.6.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

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

@@ -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 ADDED Viewed

@@ -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 \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 \n \n \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 \n \n \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 \n ${this.renderTotalBubble(this.notificationTotal)}\n </p>\n </a>\n \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 \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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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)) {
+                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 ADDED Viewed

@@ -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) {\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 \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-metered-wall-register/KompasMeteredWallRegister.js CHANGED Viewed

@@ -123,12 +123,13 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
       <div>
         <div
           class="${this.isDesktop
-            ? 'cont-banner-content justify-center'
-            : null} flex flex-row justify-between"
+            ? 'cont-banner-content'
+            : 'justify-between'} flex flex-row"
         >
+          <div .hidden="${!this.isDesktop}" class="w-9 h-9"></div>
           <div class="banner-content flex flex-row">
             <div
-              class="text-base md:text-lg font-lora mb-3 mt-1 md:mb-0 md:mt-0 pr-14 md:px-0"
+              class="text-base md:text-lg font-lora mb-3 mt-1 pt-[5px] md:mb-0 md:mt-0 pr-14 md:px-0"
               .innerHTML=${this.setTemplate('title')}
             ></div>
             <div .hidden="${!this.isDesktop}" class="md:self-center btn-regis">
@@ -175,7 +176,7 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
             class="text-sm md:text-base"
             .innerHTML=${this.setTemplate('description', 'expand')}
           ></p>
-          <div class="${this.isDesktop ? null : 'expanded-btn'} md:self-start">
+          <div class="${this.isDesktop ? 'expanded-btn' : null} md:self-start">
             ${this.registerButtonTemplate()}
           </div>
         </div>
@@ -209,8 +210,8 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
     registerButtonTemplate() {
         return html `
       <button
-        onClick=${this.redirectToRegister}
-        class="bg-green-500 px-5 py-3 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
+        @click=${this.redirectToRegister}
+        class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
       >
         Daftar Akun
       </button>
@@ -306,11 +307,10 @@ KompasMeteredWallRegister.styles = [
       .banner-content {
         gap: 55px;
-        justify-content: space-between;
       }
       .cont-banner-content {
-        gap: 201px;
+        justify-content: space-evenly;
       }
       .expanded-btn {

package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasMeteredWallRegister.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } 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'\nimport { meteredRegisterContent } from './types.js'\n\n@customElement('kompasid-metered-wall-register')\nexport class KompasMeteredWallRegister extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n\n .btn-regis {\n margin-left: 16px;\n width: 127px;\n }\n\n .banner-content {\n gap: 55px;\n justify-content: space-between;\n }\n\n .cont-banner-content {\n gap: 201px;\n }\n\n .expanded-btn {\n width: 127px;\n }\n `,\n TWStyles,\n ]\n\n /*\n state\n /\n /\n state registerUrl untuk memberikan link kemana user akan dialihkan.\n /\n @state() registerUrl: string =\n 'https://account.kompas.id/register?loc=metered_register_wall'\n /\n state isShowBanner untuk memunculkan component.\n /\n @state() isShowBanner: boolean = true\n /\n state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.\n /\n @state() isExpandBanner: boolean = true\n /\n state textTemplate untuk menyimpan template yang di berikan.\n /\n @state() private textTemplate: meteredRegisterContent = {\n default: { title: '', lastArticle: { title: '' } },\n expand: {\n title: '',\n description: '',\n lastArticle: { title: '', description: '' },\n },\n }\n /\n Props\n /\n /\n prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n * prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.\n * prop tracker_page_title untuk title of the page\n * prop tracker_page_type untuk type of the page\n * prop tracker_content_type untuk whether it's a free article or paid article (will only be sent if the user views article detail page)\n * prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)\n * prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)\n * prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)\n * prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)\n * prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)\n * prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)\n * prop tracker_content_categories untuk The main category the content belongs to\n * prop tracker_user_type untuk type of user based on their subscription\n * prop tracker_subscription_status untuk status of their subscription\n * prop tracker_metered_wall_type untuk the type of Metered Wall\n * prop tracker_metered_wall_balance untuk the balance of their metered wall\n * prop tracker_page_domain untuk Page Domain\n * prop next_param untuk page Domain\n /\n\n @property({ type: Number }) countdownArticle = 0\n @property({ type: Boolean }) defaultExpandBanner = false\n @property({ type: Boolean }) isDesktop = false\n @property({ type: String }) tracker_page_title = ''\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_authors = ''\n @property({ type: String }) tracker_content_editors = ''\n @property({ type: String }) tracker_content_tags = ''\n @property({ type: String }) tracker_content_published_date = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) next_param =\n 'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini'\n\n /\n menentukan template yang akan di render\n /\n private setTemplate(\n prop: string,\n mode: keyof meteredRegisterContent = 'default'\n ): string {\n let template = ''\n\n // dynamicMode dibuat agar typescript bisa akses data lastArticle\n const dynamicMode = this.textTemplate[mode]\n\n if ('lastArticle' in dynamicMode) {\n const lastArticleMode = dynamicMode as {\n lastArticle: { [key: string]: string }\n }\n template = lastArticleMode.lastArticle[prop] \|\| ''\n } else {\n template = dynamicMode[prop] \|\| ''\n }\n return template\n }\n\n private checkIsDesktop() {\n if (window.innerWidth >= 960) {\n this.isDesktop = true\n } else {\n this.isDesktop = false\n }\n }\n\n /\n Render Statement\n /\n\n private bannerTemplate() {\n return this.isExpandBanner\n ? this.expandedBannerContent()\n : this.defaultBannerContent()\n }\n\n private defaultBannerContent() {\n return html`\n <div>\n <div\n class=\"${this.isDesktop\n ? 'cont-banner-content justify-center'\n : null} flex flex-row justify-between\"\n >\n <div class=\"banner-content flex flex-row\">\n <div\n class=\"text-base md:text-lg font-lora mb-3 mt-1 md:mb-0 md:mt-0 pr-14 md:px-0\"\n .innerHTML=${this.setTemplate('title')}\n ></div>\n <div .hidden=\"${!this.isDesktop}\" class=\"md:self-center btn-regis\">\n ${this.isDesktop\n ? html`<div class=\"ml-4\"></div>\n ${this.registerButtonTemplate()}`\n : null}\n </div>\n </div>\n <div>\n <button\n @click=\"${this.triggerExpandBanner}\"\n class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div\n class=\"icon icon-blue-600 ${this.isExpandBanner\n ? 'chevron-down'\n : 'rotate-180'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n </div>\n <div class=\"md:self-center mt-4\">\n ${!this.isDesktop ? html`${this.registerButtonTemplate()} ` : null}\n </div>\n </div>\n `\n }\n\n private expandedBannerContent() {\n return html`\n <div\n class=\"flex flex-col-reverse justify-evenly md:flex-row gap-4 md:gap-8\"\n >\n <div\n class=\"flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 md:gap-2\"\n >\n <p\n class=\"text-lg md:text-2xl font-lora\"\n .innerHTML=${this.setTemplate('title', 'expand')}\n ></p>\n <p\n class=\"text-sm md:text-base\"\n .innerHTML=${this.setTemplate('description', 'expand')}\n ></p>\n <div class=\"${this.isDesktop ? null : 'expanded-btn'} md:self-start\">\n ${this.registerButtonTemplate()}\n </div>\n </div>\n <div class=\"flex justify-center\">\n <img\n alt=\"metered-wall-register\"\n src=\"https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png\"\n class=\"h-40 w-40 md:w-full md:h-full\"\n />\n </div>\n <button\n @click=\"${this.triggerExpandBanner}\"\n class=\"h-9 w-9 ${this.isDesktop\n ? null\n : 'ml-auto'} flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div\n class=\"icon icon-blue-600 ${this.isExpandBanner\n ? 'chevron-down'\n : 'rotate-180'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n `\n }\n\n /\n template button register\n /\n private registerButtonTemplate() {\n return html`\n <button\n onClick=${this.redirectToRegister}\n class=\"bg-green-500 px-5 py-3 w-full rounded-md font-bold text-grey-100 text-sm md:text-base\"\n >\n Daftar Akun\n </button>\n `\n }\n\n /\n mengarahkan ke page register\n /\n private redirectToRegister = (): void => {\n this.pushToDataLayer('mrw_clicked')\n const newUrl = new URL(decodeURIComponent(this.registerUrl))\n if (this.next_param)\n newUrl.searchParams.append('next', decodeURIComponent(this.next_param))\n window.location.href = newUrl.toString()\n }\n\n /\n mengirim event ke datalayer\n /\n private pushToDataLayer(eventName: string) {\n window.dataLayer.push({\n event: eventName,\n page_title: this.tracker_page_title,\n page_type: this.tracker_page_type,\n content_type: this.tracker_content_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_authors: this.tracker_content_authors,\n content_editors: this.tracker_content_editors,\n content_tags: this.tracker_content_tags,\n content_published_date: this.tracker_content_published_date,\n content_categories: this.tracker_content_categories,\n user_type: this.tracker_user_type \|\| 'G',\n subscription_status: this.tracker_subscription_status \|\| '',\n metered_wall_type: this.tracker_metered_wall_type \|\| 'MRW',\n metered_wall_balance: this.tracker_metered_wall_balance,\n page_domain: this.tracker_page_domain \|\| 'Kompas.id',\n })\n }\n\n /\n toggle isExpandBanner flag\n /\n private triggerExpandBanner() {\n this.isExpandBanner = !this.isExpandBanner\n return !this.isExpandBanner && this.pushToDataLayer('mrw_closed')\n }\n\n /\n Lifecycle\n */\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n this.loadData()\n this.checkIsDesktop()\n }\n\n private async loadData() {\n const req = await fetch(\n `https://d3w4qaq4xm1ncv.cloudfront.net/assets/register_wall.json`\n )\n\n if (req.status !== 200) {\n throw new Error(`${req.status} Ada galat saat memproses permintaan.`)\n }\n\n this.textTemplate = await req.json()\n\n const getCountdown = this.countdownArticle\n\n if (!getCountdown) {\n this.isShowBanner = false\n } else {\n this.isExpandBanner = this.defaultExpandBanner\n }\n\n if (this.isShowBanner) {\n this.pushToDataLayer('mrw_viewed')\n }\n }\n\n render() {\n return this.isShowBanner\n ? html`\n <div class=\"sticky bottom-0 w-full h-full z-20\">\n <div class=\"w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4\">\n <div class=\"lg:max-w-7xl m-auto relative\">\n <div>${this.bannerTemplate()}</div>\n </div>\n </div>\n </div>\n `\n : null\n }\n}\n"]}
1	+ {"version":3,"file":"KompasMeteredWallRegister.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } 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'\nimport { meteredRegisterContent } from './types.js'\n\n@customElement('kompasid-metered-wall-register')\nexport class KompasMeteredWallRegister extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n\n .btn-regis {\n margin-left: 16px;\n width: 127px;\n }\n\n .banner-content {\n gap: 55px;\n }\n\n .cont-banner-content {\n justify-content: space-evenly;\n }\n\n .expanded-btn {\n width: 127px;\n }\n `,\n TWStyles,\n ]\n\n /*\n state\n /\n /\n state registerUrl untuk memberikan link kemana user akan dialihkan.\n /\n @state() registerUrl: string =\n 'https://account.kompas.id/register?loc=metered_register_wall'\n /\n state isShowBanner untuk memunculkan component.\n /\n @state() isShowBanner: boolean = true\n /\n state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.\n /\n @state() isExpandBanner: boolean = true\n /\n state textTemplate untuk menyimpan template yang di berikan.\n /\n @state() private textTemplate: meteredRegisterContent = {\n default: { title: '', lastArticle: { title: '' } },\n expand: {\n title: '',\n description: '',\n lastArticle: { title: '', description: '' },\n },\n }\n /\n Props\n /\n /\n prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n * prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.\n * prop tracker_page_title untuk title of the page\n * prop tracker_page_type untuk type of the page\n * prop tracker_content_type untuk whether it's a free article or paid article (will only be sent if the user views article detail page)\n * prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)\n * prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)\n * prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)\n * prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)\n * prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)\n * prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)\n * prop tracker_content_categories untuk The main category the content belongs to\n * prop tracker_user_type untuk type of user based on their subscription\n * prop tracker_subscription_status untuk status of their subscription\n * prop tracker_metered_wall_type untuk the type of Metered Wall\n * prop tracker_metered_wall_balance untuk the balance of their metered wall\n * prop tracker_page_domain untuk Page Domain\n * prop next_param untuk page Domain\n /\n\n @property({ type: Number }) countdownArticle = 0\n @property({ type: Boolean }) defaultExpandBanner = false\n @property({ type: Boolean }) isDesktop = false\n @property({ type: String }) tracker_page_title = ''\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_authors = ''\n @property({ type: String }) tracker_content_editors = ''\n @property({ type: String }) tracker_content_tags = ''\n @property({ type: String }) tracker_content_published_date = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) next_param =\n 'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini'\n\n /\n menentukan template yang akan di render\n /\n private setTemplate(\n prop: string,\n mode: keyof meteredRegisterContent = 'default'\n ): string {\n let template = ''\n\n // dynamicMode dibuat agar typescript bisa akses data lastArticle\n const dynamicMode = this.textTemplate[mode]\n\n if ('lastArticle' in dynamicMode) {\n const lastArticleMode = dynamicMode as {\n lastArticle: { [key: string]: string }\n }\n template = lastArticleMode.lastArticle[prop] \|\| ''\n } else {\n template = dynamicMode[prop] \|\| ''\n }\n return template\n }\n\n private checkIsDesktop() {\n if (window.innerWidth >= 960) {\n this.isDesktop = true\n } else {\n this.isDesktop = false\n }\n }\n\n /\n Render Statement\n /\n\n private bannerTemplate() {\n return this.isExpandBanner\n ? this.expandedBannerContent()\n : this.defaultBannerContent()\n }\n\n private defaultBannerContent() {\n return html`\n <div>\n <div\n class=\"${this.isDesktop\n ? 'cont-banner-content'\n : 'justify-between'} flex flex-row\"\n >\n <div .hidden=\"${!this.isDesktop}\" class=\"w-9 h-9\"></div>\n <div class=\"banner-content flex flex-row\">\n <div\n class=\"text-base md:text-lg font-lora mb-3 mt-1 pt-[5px] md:mb-0 md:mt-0 pr-14 md:px-0\"\n .innerHTML=${this.setTemplate('title')}\n ></div>\n <div .hidden=\"${!this.isDesktop}\" class=\"md:self-center btn-regis\">\n ${this.isDesktop\n ? html`<div class=\"ml-4\"></div>\n ${this.registerButtonTemplate()}`\n : null}\n </div>\n </div>\n <div>\n <button\n @click=\"${this.triggerExpandBanner}\"\n class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div\n class=\"icon icon-blue-600 ${this.isExpandBanner\n ? 'chevron-down'\n : 'rotate-180'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n </div>\n <div class=\"md:self-center mt-4\">\n ${!this.isDesktop ? html`${this.registerButtonTemplate()} ` : null}\n </div>\n </div>\n `\n }\n\n private expandedBannerContent() {\n return html`\n <div\n class=\"flex flex-col-reverse justify-evenly md:flex-row gap-4 md:gap-8\"\n >\n <div\n class=\"flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 md:gap-2\"\n >\n <p\n class=\"text-lg md:text-2xl font-lora\"\n .innerHTML=${this.setTemplate('title', 'expand')}\n ></p>\n <p\n class=\"text-sm md:text-base\"\n .innerHTML=${this.setTemplate('description', 'expand')}\n ></p>\n <div class=\"${this.isDesktop ? 'expanded-btn' : null} md:self-start\">\n ${this.registerButtonTemplate()}\n </div>\n </div>\n <div class=\"flex justify-center\">\n <img\n alt=\"metered-wall-register\"\n src=\"https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png\"\n class=\"h-40 w-40 md:w-full md:h-full\"\n />\n </div>\n <button\n @click=\"${this.triggerExpandBanner}\"\n class=\"h-9 w-9 ${this.isDesktop\n ? null\n : 'ml-auto'} flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div\n class=\"icon icon-blue-600 ${this.isExpandBanner\n ? 'chevron-down'\n : 'rotate-180'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n `\n }\n\n /\n template button register\n /\n private registerButtonTemplate() {\n return html`\n <button\n @click=${this.redirectToRegister}\n class=\"bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base\"\n >\n Daftar Akun\n </button>\n `\n }\n\n /\n mengarahkan ke page register\n /\n private redirectToRegister = (): void => {\n this.pushToDataLayer('mrw_clicked')\n const newUrl = new URL(decodeURIComponent(this.registerUrl))\n if (this.next_param)\n newUrl.searchParams.append('next', decodeURIComponent(this.next_param))\n window.location.href = newUrl.toString()\n }\n\n /\n mengirim event ke datalayer\n /\n private pushToDataLayer(eventName: string) {\n window.dataLayer.push({\n event: eventName,\n page_title: this.tracker_page_title,\n page_type: this.tracker_page_type,\n content_type: this.tracker_content_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_authors: this.tracker_content_authors,\n content_editors: this.tracker_content_editors,\n content_tags: this.tracker_content_tags,\n content_published_date: this.tracker_content_published_date,\n content_categories: this.tracker_content_categories,\n user_type: this.tracker_user_type \|\| 'G',\n subscription_status: this.tracker_subscription_status \|\| '',\n metered_wall_type: this.tracker_metered_wall_type \|\| 'MRW',\n metered_wall_balance: this.tracker_metered_wall_balance,\n page_domain: this.tracker_page_domain \|\| 'Kompas.id',\n })\n }\n\n /\n toggle isExpandBanner flag\n /\n private triggerExpandBanner() {\n this.isExpandBanner = !this.isExpandBanner\n return !this.isExpandBanner && this.pushToDataLayer('mrw_closed')\n }\n\n /\n Lifecycle\n */\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n this.loadData()\n this.checkIsDesktop()\n }\n\n private async loadData() {\n const req = await fetch(\n `https://d3w4qaq4xm1ncv.cloudfront.net/assets/register_wall.json`\n )\n\n if (req.status !== 200) {\n throw new Error(`${req.status} Ada galat saat memproses permintaan.`)\n }\n\n this.textTemplate = await req.json()\n\n const getCountdown = this.countdownArticle\n\n if (!getCountdown) {\n this.isShowBanner = false\n } else {\n this.isExpandBanner = this.defaultExpandBanner\n }\n\n if (this.isShowBanner) {\n this.pushToDataLayer('mrw_viewed')\n }\n }\n\n render() {\n return this.isShowBanner\n ? html`\n <div class=\"sticky bottom-0 w-full h-full z-20\">\n <div class=\"w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4\">\n <div class=\"lg:max-w-7xl m-auto relative\">\n <div>${this.bannerTemplate()}</div>\n </div>\n </div>\n </div>\n `\n : null\n }\n}\n"]}

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

@@ -86,26 +86,8 @@ 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: [],
+                freeTrial: 'untuk 3 hari pertama',
             },
             payment: {
                 desktop: [
@@ -251,6 +233,11 @@ 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,
+                    freeTrial: json[this.type].freeTrial,
+                },
             };
         }
         catch (error) {