npm - @kompasid/lit-web-components - Versions diffs - 0.4.4 → 0.5.0 - Mend

@kompasid/lit-web-components 0.4.4 → 0.5.0

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 (53) hide show

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

@@ -6,6 +6,8 @@ import { TWStyles } from '../../../tailwind/tailwind.js';
 import { deviceType } from '../../utils/deviceType.js';
 import { formatRupiah } from '../../utils/formatRupiah.js';
 import { addGoogleFonts } from '../../utils/googleFont.js';
+import { generateCopyDuration } from '../../utils/generateCopyDuration.js';
+import { redirectToCheckout, redirectToLogin, redirectToRegister, } from '../../utils/cta.js';
 let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
     constructor() {
         super(...arguments);
@@ -48,11 +50,21 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
         this.tracker_metered_wall_type = '';
         this.tracker_metered_wall_balance = 0;
         this.type = 'article';
+        this.showPackage = {
+            duration: 1,
+            durationType: 3,
+            id: '9802035',
+            link: 'kdp?productId=9802035&referrer=',
+            price: 50000,
+            position: 1,
+            title: 'Kompas Digital Premium 1 Bulan',
+            referrer: '',
+        };
         /**
          * State
          */
         this.subscriptionUrl = 'https://www.kompas.id/berlangganan';
-        this.checkoutHost = 'https://checkoutv2.kompas.id';
+        this.packageData = {};
     }
     /**
      * Component
@@ -64,7 +76,7 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
       >
         <div>
           <button
-            @click=${() => this.redirectToRegister('Daftar')}
+            @click=${() => this.onRegisterClick('Daftar')}
             class="text-blue-300 font-bold"
           >
             Daftar
@@ -74,7 +86,7 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
         <div>
           <span>Sudah punya akun? </span>
           <button
-            @click=${this.redirectToLogin}
+            @click=${() => redirectToLogin('video_paywall')}
             class="text-blue-300 font-bold"
           >
             Masuk<span class="text-grey-300 font-normal">.</span>
@@ -101,8 +113,8 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
           @click=${this.redirectToSelectedPackage}
           class="bg-green-500 rounded md:rounded-lg h-8 md:h-12 px-4 md:px-6 text-sm md:text-lg text-white font-bold leading-[18px]"
         >
-          Langganan ${formatRupiah(this.showPackage.price)}
-          /${this.generateCopyDuration(this.showPackage.durationType)}
+          Langganan ${formatRupiah(this.packageData.price)}
+          /${generateCopyDuration(this.packageData.durationType)}
         </button>
         <button
           @click=${this.redirectToBerlangganan}
@@ -124,10 +136,10 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
         const baseData = {
             event,
             paywall_location: this.paywall_location,
-            paywall_subscription_package: this.paywall_subscription_package || this.showPackage.title,
-            paywall_subscription_id: this.paywall_subscription_id || this.showPackage.id,
-            paywall_subscription_price: this.paywall_subscription_price || this.showPackage.price,
-            paywall_position: this.paywall_position || this.showPackage.position,
+            paywall_subscription_package: this.paywall_subscription_package || this.packageData.title,
+            paywall_subscription_id: this.paywall_subscription_id || this.packageData.id,
+            paywall_subscription_price: this.paywall_subscription_price || this.packageData.price,
+            paywall_position: this.paywall_position || this.packageData.position,
             user_type: this.tracker_user_type,
             subscription_status: this.tracker_subscription_status,
             page_domain: this.tracker_page_domain || 'Kompas.id',
@@ -174,61 +186,30 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
     get isArticle() {
         return this.type === 'article';
     }
-    // temporary mocking data package for component and dataLayer
-    get showPackage() {
-        return {
-            duration: 1,
-            durationType: 3,
-            id: '9802035',
-            link: 'kdp?productId=9802035&referrer=https%3A%2F%2Fwww.kompas.cloud%2Fberlangganan',
-            price: 50000,
-            position: 1,
-            title: 'Kompas Digital Premium 1 Bulan',
-        };
-    }
     /**
      * Logic Function
      */
-    redirectToRegister(triggerClick) {
+    onRegisterClick(triggerClick) {
         this.sendDataLayeronButtonLogin(triggerClick);
-        const registerHost = 'https://account.kompas.id/register';
-        const nextParams = encodeURIComponent(window.location.href);
-        const directUrlRegister = `${registerHost}?next=${nextParams}?status=sukses_login&status_login=login&loc=video_paywall`;
-        window.open(directUrlRegister, '_blank');
-    }
-    redirectToLogin() {
-        const loginHost = 'https://account.kompas.id/login';
-        const nextParams = encodeURIComponent(window.location.href);
-        const directUrlLogin = `${loginHost}?next=${nextParams}&loc=video_paywall`;
-        window.open(directUrlLogin, '_blank');
+        redirectToRegister('video_paywall');
     }
     redirectToSelectedPackage() {
-        const url = `${this.checkoutHost}/${this.showPackage.link}&source=${this.type}`;
         this.sendDataLayerSubscribeButtonClicked();
-        window.open(url, '_blank');
+        redirectToCheckout({
+            link: `${this.packageData.link}${this.packageData.referrer}`,
+            source: this.type,
+        });
     }
     redirectToBerlangganan() {
         this.sendDataLayerOtherPackagesClicked();
         window.open(this.subscriptionUrl, '_blank');
     }
-    generateCopyDuration(type) {
-        switch (type) {
-            case 1:
-                return 'hari';
-            case 2:
-                return 'minggu';
-            case 3:
-                return 'bulan';
-            case 4:
-                return 'tahun';
-            default:
-                return '';
-        }
-    }
     async connectedCallback() {
         super.connectedCallback();
         await this.updateComplete;
         addGoogleFonts(['pt-sans']);
+        const originHost = encodeURIComponent(window.location.href);
+        this.packageData = { ...this.showPackage, referrer: originHost };
     }
     /**
      * Render Statement
@@ -307,7 +288,7 @@ __decorate([
 ], KompasPaywallVideo.prototype, "subscriptionUrl", void 0);
 __decorate([
     state()
-], KompasPaywallVideo.prototype, "checkoutHost", void 0);
+], KompasPaywallVideo.prototype, "packageData", void 0);
 KompasPaywallVideo = __decorate([
     customElement('kompasid-paywall-video')
 ], KompasPaywallVideo);

package/dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasPaywallVideo.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall-video/KompasPaywallVideo.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable class-methods-use-this /\nimport { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\n\n@customElement('kompasid-paywall-video')\nexport class KompasPaywallVideo extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n `,\n TWStyles,\n ]\n\n /\n Props\n /\n /\n prop isLogin untuk menghandle apakah user sudah login atau belum\n * prop paywall_location = The location where user encounter the paywall\n * prop paywall_subscription_package = The name of the subscription package viewed by user\n * prop paywall_subscription_id = The ID of the subscription package viewed by user\n * prop paywall_subscription_price = The price of the subscriprtion package viewed by user\n * prop paywall_position = The position of the subscription package viewed by user\n * prop page_type = Type of the page\n * prop content_id = ID of article (slug)\n * prop content_type = Whether it's free article or paid article\n * prop content_title = The title of article\n * prop tracker_content_categories = The category of the content\n * prop user_type = Type of user based on their subscription\n * prop subscription_status = Status of their subscription\n * prop page_domain = Page Domain\n * prop metered_wall_type = The type of Metered Wall\n * prop metered_wall_balance = The balance of their metered wall\n * prop type = The type of video paywall\n /\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: String }) paywall_subscription_id = ''\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 }) type: 'article' \| 'homepage' = 'article'\n\n /\n State\n /\n\n @state() private subscriptionUrl: string =\n 'https://www.kompas.id/berlangganan'\n @state() private checkoutHost: string = 'https://checkoutv2.kompas.id'\n\n /\n Component\n /\n\n private regulerRegistrationSection() {\n return html`\n <div\n class=\"flex flex-col text-grey-300 text-sm md:text-base items-center justify-center\"\n >\n <div>\n <button\n @click=${() => this.redirectToRegister('Daftar')}\n class=\"text-blue-300 font-bold\"\n >\n Daftar\n </button>\n <span> untuk akses konten gratis.</span>\n </div>\n <div>\n <span>Sudah punya akun? </span>\n <button\n @click=${this.redirectToLogin}\n class=\"text-blue-300 font-bold\"\n >\n Masuk<span class=\"text-grey-300 font-normal\">.</span>\n </button>\n </div>\n </div>\n `\n }\n\n private defaultComponent() {\n return html`\n <div class=\"flex flex-col items-center space-y-2 md:space-y-4\">\n ${this.sendDataLayeronNonLogin()} ${this.sendDataLayerPaywallViewed()}\n <h5\n class=\"leading-5 md:leading-6 w-[296px] md:w-[400px] text-white text-center text-base mb-2 md:mb-0 ${!this\n .isLogin &&\n !this.isArticle &&\n 'mb-0'} md:text-xl max-w-xl\"\n >\n ${this.isArticle\n ? 'Langganan untuk lanjut menonton video'\n : 'Langganan sekarang untuk akses seluruh konten Kompas.id'}\n </h5>\n <button\n @click=${this.redirectToSelectedPackage}\n class=\"bg-green-500 rounded md:rounded-lg h-8 md:h-12 px-4 md:px-6 text-sm md:text-lg text-white font-bold leading-[18px]\"\n >\n Langganan ${formatRupiah(this.showPackage.price)}\n /${this.generateCopyDuration(this.showPackage.durationType)}\n </button>\n <button\n @click=${this.redirectToBerlangganan}\n class=\"text-sm md:text-lg leading-[22px] text-white font-bold underline ${!this\n .isLogin && this.isArticle\n ? 'pb-3'\n : 'pb-2'} md:pb-4\"\n >\n Paket Lainnya\n </button>\n ${!this.isLogin ? this.regulerRegistrationSection() : nothing}\n </div>\n `\n }\n\n /\n Data Layer\n /\n\n private sendDataLayer(event: string): void {\n const baseData = {\n event,\n paywall_location: this.paywall_location,\n paywall_subscription_package:\n this.paywall_subscription_package \|\| this.showPackage.title,\n paywall_subscription_id:\n this.paywall_subscription_id \|\| this.showPackage.id,\n paywall_subscription_price:\n this.paywall_subscription_price \|\| this.showPackage.price,\n paywall_position: this.paywall_position \|\| this.showPackage.position,\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain \|\| 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type \|\| 'HP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n\n const data = this.isArticle\n ? {\n ...baseData,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n }\n : baseData\n\n window.dataLayer.push(data)\n }\n\n private sendDataLayerPaywallViewed(): void {\n this.sendDataLayer('paywall_viewed')\n }\n\n private sendDataLayerSubscribeButtonClicked(): void {\n this.sendDataLayer('subscribe_button_clicked')\n }\n\n private sendDataLayerOtherPackagesClicked(): void {\n this.sendDataLayer('other_packages_clicked')\n }\n\n private sendDataLayeronButtonLogin(triggerClick: string): void {\n window.dataLayer.push({\n event: 'registrationOfferClick',\n interface: deviceType(),\n buttonClicked: triggerClick,\n })\n }\n\n private sendDataLayeronNonLogin(): void {\n window.dataLayer.push({\n event: 'registrationOfferimppression',\n interface: deviceType(),\n })\n }\n\n /\n Getter\n /\n\n get isArticle() {\n return this.type === 'article'\n }\n\n // temporary mocking data package for component and dataLayer\n get showPackage() {\n return {\n duration: 1,\n durationType: 3,\n id: '9802035',\n link: 'kdp?productId=9802035&referrer=https%3A%2F%2Fwww.kompas.cloud%2Fberlangganan',\n price: 50000,\n position: 1,\n title: 'Kompas Digital Premium 1 Bulan',\n }\n }\n\n /\n Logic Function\n /\n\n private redirectToRegister(triggerClick: string): void {\n this.sendDataLayeronButtonLogin(triggerClick)\n const registerHost: string = 'https://account.kompas.id/register'\n const nextParams: string = encodeURIComponent(window.location.href)\n const directUrlRegister: string = `${registerHost}?next=${nextParams}?status=sukses_login&status_login=login&loc=video_paywall`\n window.open(directUrlRegister, '_blank')\n }\n\n private redirectToLogin(): void {\n const loginHost: string = 'https://account.kompas.id/login'\n const nextParams: string = encodeURIComponent(window.location.href)\n const directUrlLogin: string = `${loginHost}?next=${nextParams}&loc=video_paywall`\n window.open(directUrlLogin, '_blank')\n }\n\n private redirectToSelectedPackage(): void {\n const url = `${this.checkoutHost}/${this.showPackage.link}&source=${this.type}`\n this.sendDataLayerSubscribeButtonClicked()\n window.open(url, '_blank')\n }\n\n private redirectToBerlangganan(): void {\n this.sendDataLayerOtherPackagesClicked()\n window.open(this.subscriptionUrl, '_blank')\n }\n\n private generateCopyDuration(type: number): string {\n switch (type) {\n case 1:\n return 'hari'\n case 2:\n return 'minggu'\n case 3:\n return 'bulan'\n case 4:\n return 'tahun'\n default:\n return ''\n }\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n addGoogleFonts(['pt-sans'])\n }\n\n /\n Render Statement\n */\n\n render() {\n return html`\n <div\n class=\"radius absolute z-20 bg-black bg-opacity-75 p-4 top-0 bottom-0 left-0 flex flex-col w-full h-full justify-center items-center\"\n >\n ${this.defaultComponent()}\n </div>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"KompasPaywallVideo.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall-video/KompasPaywallVideo.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable class-methods-use-this /\nimport { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { generateCopyDuration } from '../../utils/generateCopyDuration.js'\nimport { PackageData } from '../kompasid-freewall/types.js'\nimport {\n redirectToCheckout,\n redirectToLogin,\n redirectToRegister,\n} from '../../utils/cta.js'\n\n@customElement('kompasid-paywall-video')\nexport class KompasPaywallVideo extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n `,\n TWStyles,\n ]\n\n /\n Props\n /\n /\n prop isLogin untuk menghandle apakah user sudah login atau belum\n * prop paywall_location = The location where user encounter the paywall\n * prop paywall_subscription_package = The name of the subscription package viewed by user\n * prop paywall_subscription_id = The ID of the subscription package viewed by user\n * prop paywall_subscription_price = The price of the subscriprtion package viewed by user\n * prop paywall_position = The position of the subscription package viewed by user\n * prop page_type = Type of the page\n * prop content_id = ID of article (slug)\n * prop content_type = Whether it's free article or paid article\n * prop content_title = The title of article\n * prop tracker_content_categories = The category of the content\n * prop user_type = Type of user based on their subscription\n * prop subscription_status = Status of their subscription\n * prop page_domain = Page Domain\n * prop metered_wall_type = The type of Metered Wall\n * prop metered_wall_balance = The balance of their metered wall\n * prop type = The type of video paywall\n /\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: String }) paywall_subscription_id = ''\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 }) type: 'article' \| 'homepage' = 'article'\n\n showPackage = {\n duration: 1,\n durationType: 3,\n id: '9802035',\n link: 'kdp?productId=9802035&referrer=',\n price: 50000,\n position: 1,\n title: 'Kompas Digital Premium 1 Bulan',\n referrer: '',\n }\n\n /\n State\n /\n\n @state() private subscriptionUrl: string =\n 'https://www.kompas.id/berlangganan'\n @state() private packageData: PackageData = {} as PackageData\n\n /\n Component\n /\n\n private regulerRegistrationSection() {\n return html`\n <div\n class=\"flex flex-col text-grey-300 text-sm md:text-base items-center justify-center\"\n >\n <div>\n <button\n @click=${() => this.onRegisterClick('Daftar')}\n class=\"text-blue-300 font-bold\"\n >\n Daftar\n </button>\n <span> untuk akses konten gratis.</span>\n </div>\n <div>\n <span>Sudah punya akun? </span>\n <button\n @click=${() => redirectToLogin('video_paywall')}\n class=\"text-blue-300 font-bold\"\n >\n Masuk<span class=\"text-grey-300 font-normal\">.</span>\n </button>\n </div>\n </div>\n `\n }\n\n private defaultComponent() {\n return html`\n <div class=\"flex flex-col items-center space-y-2 md:space-y-4\">\n ${this.sendDataLayeronNonLogin()} ${this.sendDataLayerPaywallViewed()}\n <h5\n class=\"leading-5 md:leading-6 w-[296px] md:w-[400px] text-white text-center text-base mb-2 md:mb-0 ${!this\n .isLogin &&\n !this.isArticle &&\n 'mb-0'} md:text-xl max-w-xl\"\n >\n ${this.isArticle\n ? 'Langganan untuk lanjut menonton video'\n : 'Langganan sekarang untuk akses seluruh konten Kompas.id'}\n </h5>\n <button\n @click=${this.redirectToSelectedPackage}\n class=\"bg-green-500 rounded md:rounded-lg h-8 md:h-12 px-4 md:px-6 text-sm md:text-lg text-white font-bold leading-[18px]\"\n >\n Langganan ${formatRupiah(this.packageData.price)}\n /${generateCopyDuration(this.packageData.durationType)}\n </button>\n <button\n @click=${this.redirectToBerlangganan}\n class=\"text-sm md:text-lg leading-[22px] text-white font-bold underline ${!this\n .isLogin && this.isArticle\n ? 'pb-3'\n : 'pb-2'} md:pb-4\"\n >\n Paket Lainnya\n </button>\n ${!this.isLogin ? this.regulerRegistrationSection() : nothing}\n </div>\n `\n }\n\n /\n Data Layer\n /\n\n private sendDataLayer(event: string): void {\n const baseData = {\n event,\n paywall_location: this.paywall_location,\n paywall_subscription_package:\n this.paywall_subscription_package \|\| this.packageData.title,\n paywall_subscription_id:\n this.paywall_subscription_id \|\| this.packageData.id,\n paywall_subscription_price:\n this.paywall_subscription_price \|\| this.packageData.price,\n paywall_position: this.paywall_position \|\| this.packageData.position,\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain \|\| 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type \|\| 'HP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n\n const data = this.isArticle\n ? {\n ...baseData,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n }\n : baseData\n\n window.dataLayer.push(data)\n }\n\n private sendDataLayerPaywallViewed(): void {\n this.sendDataLayer('paywall_viewed')\n }\n\n private sendDataLayerSubscribeButtonClicked(): void {\n this.sendDataLayer('subscribe_button_clicked')\n }\n\n private sendDataLayerOtherPackagesClicked(): void {\n this.sendDataLayer('other_packages_clicked')\n }\n\n private sendDataLayeronButtonLogin(triggerClick: string): void {\n window.dataLayer.push({\n event: 'registrationOfferClick',\n interface: deviceType(),\n buttonClicked: triggerClick,\n })\n }\n\n private sendDataLayeronNonLogin(): void {\n window.dataLayer.push({\n event: 'registrationOfferimppression',\n interface: deviceType(),\n })\n }\n\n /\n Getter\n /\n\n get isArticle() {\n return this.type === 'article'\n }\n\n /\n Logic Function\n /\n\n private onRegisterClick(triggerClick: string): void {\n this.sendDataLayeronButtonLogin(triggerClick)\n redirectToRegister('video_paywall')\n }\n\n private redirectToSelectedPackage(): void {\n this.sendDataLayerSubscribeButtonClicked()\n redirectToCheckout({\n link: `${this.packageData.link}${this.packageData.referrer}`,\n source: this.type,\n })\n }\n\n private redirectToBerlangganan(): void {\n this.sendDataLayerOtherPackagesClicked()\n window.open(this.subscriptionUrl, '_blank')\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n addGoogleFonts(['pt-sans'])\n\n const originHost: string = encodeURIComponent(window.location.href)\n this.packageData = { ...this.showPackage, referrer: originHost }\n }\n\n /\n Render Statement\n */\n\n render() {\n return html`\n <div\n class=\"radius absolute z-20 bg-black bg-opacity-75 p-4 top-0 bottom-0 left-0 flex flex-col w-full h-full justify-center items-center\"\n >\n ${this.defaultComponent()}\n </div>\n `\n }\n}\n"]}

package/dist/src/index.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ export { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js';
 export { KompasFooter } from './components/kompasid-footer/KompasFooter.js';
 export { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js';
 export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js';
+export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js';
 declare global {
     interface Window {
         gtag: (...args: any[]) => void;

package/dist/src/index.js CHANGED Viewed

@@ -2,4 +2,5 @@ export { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js';
 export { KompasFooter } from './components/kompasid-footer/KompasFooter.js';
 export { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js';
 export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js';
+export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAA;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAC9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+DAA+D,CAAA","sourcesContent":["export { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js'\nexport { KompasFooter } from './components/kompasid-footer/KompasFooter.js'\nexport { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js'\nexport { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js'\n\ndeclare global {\n interface Window {\n gtag: (...args: any[]) => void\n dataLayer: Record<string, any>\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAA;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAC9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+DAA+D,CAAA;AACpG,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAA","sourcesContent":["export { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js'\nexport { KompasFooter } from './components/kompasid-footer/KompasFooter.js'\nexport { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js'\nexport { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js'\nexport { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js'\n\ndeclare global {\n interface Window {\n gtag: (...args: any[]) => void\n dataLayer: Record<string, any>\n }\n}\n"]}

package/dist/src/utils/cta.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export declare function redirectToRegister(loc: string): void;
+export declare function redirectToLogin(loc: string): void;
+export declare function redirectToCheckout({ link, source, }: {
+    link: string;
+    source: string;
+}): void;

package/dist/src/utils/cta.js ADDED Viewed

@@ -0,0 +1,18 @@
+export function redirectToRegister(loc) {
+    const loginHost = 'https://account.kompas.id/register';
+    const nextParams = encodeURIComponent(window.location.href);
+    const directUrlRegister = `${loginHost}?next=${nextParams}?status=sukses_login&status_login=login&loc=${loc}`;
+    window.location.href = directUrlRegister;
+}
+export function redirectToLogin(loc) {
+    const loginHost = 'https://account.kompas.id/login';
+    const nextParams = encodeURIComponent(window.location.href);
+    const directUrlLogin = `${loginHost}?next=${nextParams}&loc=${loc}`;
+    window.open(directUrlLogin, '_blank');
+}
+export function redirectToCheckout({ link, source, }) {
+    const checkoutHost = 'https://checkoutv2.kompas.id';
+    const url = `${checkoutHost}/${link}&source=${source}`;
+    window.open(url, '_blank');
+}
+//# sourceMappingURL=cta.js.map

package/dist/src/utils/cta.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cta.js","sourceRoot":"","sources":["../../../src/utils/cta.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,kBAAkB,CAAC,GAAW;IAC5C,MAAM,SAAS,GAAW,oCAAoC,CAAA;IAC9D,MAAM,UAAU,GAAW,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IACnE,MAAM,iBAAiB,GAAW,GAAG,SAAS,SAAS,UAAU,+CAA+C,GAAG,EAAE,CAAA;IACrH,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,iBAAiB,CAAA;AAC1C,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,GAAW;IACzC,MAAM,SAAS,GAAW,iCAAiC,CAAA;IAC3D,MAAM,UAAU,GAAW,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IACnE,MAAM,cAAc,GAAW,GAAG,SAAS,SAAS,UAAU,QAAQ,GAAG,EAAE,CAAA;IAC3E,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAA;AACvC,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EACjC,IAAI,EACJ,MAAM,GAIP;IACC,MAAM,YAAY,GAAG,8BAA8B,CAAA;IACnD,MAAM,GAAG,GAAG,GAAG,YAAY,IAAI,IAAI,WAAW,MAAM,EAAE,CAAA;IACtD,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAA;AAC5B,CAAC","sourcesContent":["export function redirectToRegister(loc: string): void {\n const loginHost: string = 'https://account.kompas.id/register'\n const nextParams: string = encodeURIComponent(window.location.href)\n const directUrlRegister: string = `${loginHost}?next=${nextParams}?status=sukses_login&status_login=login&loc=${loc}`\n window.location.href = directUrlRegister\n}\n\nexport function redirectToLogin(loc: string): void {\n const loginHost: string = 'https://account.kompas.id/login'\n const nextParams: string = encodeURIComponent(window.location.href)\n const directUrlLogin: string = `${loginHost}?next=${nextParams}&loc=${loc}`\n window.open(directUrlLogin, '_blank')\n}\n\nexport function redirectToCheckout({\n link,\n source,\n}: {\n link: string\n source: string\n}): void {\n const checkoutHost = 'https://checkoutv2.kompas.id'\n const url = `${checkoutHost}/${link}&source=${source}`\n window.open(url, '_blank')\n}\n"]}

package/dist/src/utils/generateCopyDuration.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const generateCopyDuration: (type: number) => string;

package/dist/src/utils/generateCopyDuration.js ADDED Viewed

@@ -0,0 +1,15 @@
+export const generateCopyDuration = (type) => {
+    switch (type) {
+        case 1:
+            return 'hari';
+        case 2:
+            return 'minggu';
+        case 3:
+            return 'bulan';
+        case 4:
+            return 'tahun';
+        default:
+            return '';
+    }
+};
+//# sourceMappingURL=generateCopyDuration.js.map

package/dist/src/utils/generateCopyDuration.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"generateCopyDuration.js","sourceRoot":"","sources":["../../../src/utils/generateCopyDuration.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,IAAY,EAAU,EAAE;IAC3D,QAAQ,IAAI,EAAE;QACZ,KAAK,CAAC;YACJ,OAAO,MAAM,CAAA;QACf,KAAK,CAAC;YACJ,OAAO,QAAQ,CAAA;QACjB,KAAK,CAAC;YACJ,OAAO,OAAO,CAAA;QAChB,KAAK,CAAC;YACJ,OAAO,OAAO,CAAA;QAChB;YACE,OAAO,EAAE,CAAA;KACZ;AACH,CAAC,CAAA","sourcesContent":["export const generateCopyDuration = (type: number): string => {\n switch (type) {\n case 1:\n return 'hari'\n case 2:\n return 'minggu'\n case 3:\n return 'bulan'\n case 4:\n return 'tahun'\n default:\n return ''\n }\n}\n"]}

package/dist/src/utils/googleFont.js CHANGED Viewed

@@ -2,6 +2,7 @@ export const addGoogleFonts = (fonts) => {
     const fontMap = {
         lora: 'https://fonts.googleapis.com/css2?family=Lora:wght@700&display=swap',
         'pt-sans': 'https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap',
+        'roboto-condensed': 'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@500&display=swap',
     };
     fonts.forEach(font => {
         const fontCssUrl = fontMap[font];

package/dist/src/utils/googleFont.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"googleFont.js","sourceRoot":"","sources":["../../../src/utils/googleFont.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAe,EAAE,EAAE;IAChD,MAAM,OAAO,GAA8B;QACzC,IAAI,EAAE,qEAAqE;QAC3E,SAAS,EACP,iGAAiG;~~KACpG~~,CAAA;IAED,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACnB,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;QAChC,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,UAAU,IAAI,CAAC,CAAA;QAE5E,IAAI,CAAC,eAAe,IAAI,UAAU,EAAE;YAClC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;YACjD,UAAU,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,CAAA;YAC5C,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;YAC3C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAA;SACtC;IACH,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["export const addGoogleFonts = (fonts: string[]) => {\n const fontMap: { [key: string]: string } = {\n lora: 'https://fonts.googleapis.com/css2?family=Lora:wght@700&display=swap',\n 'pt-sans':\n 'https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap',\n }\n\n fonts.forEach(font => {\n const fontCssUrl = fontMap[font]\n const existingElement = document.querySelector(`link[href=\"${fontCssUrl}\"]`)\n\n if (!existingElement && fontCssUrl) {\n const newElement = document.createElement('link')\n newElement.setAttribute('rel', 'stylesheet')\n newElement.setAttribute('href', fontCssUrl)\n document.head.appendChild(newElement)\n }\n })\n}\n"]}
1	+ {"version":3,"file":"googleFont.js","sourceRoot":"","sources":["../../../src/utils/googleFont.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAe,EAAE,EAAE;IAChD,MAAM,OAAO,GAA8B;QACzC,IAAI,EAAE,qEAAqE;QAC3E,SAAS,EACP,iGAAiG;QACnG,kBAAkB,EAChB,iFAAiF;KACpF,CAAA;IAED,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACnB,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;QAChC,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,UAAU,IAAI,CAAC,CAAA;QAE5E,IAAI,CAAC,eAAe,IAAI,UAAU,EAAE;YAClC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;YACjD,UAAU,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,CAAA;YAC5C,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;YAC3C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAA;SACtC;IACH,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["export const addGoogleFonts = (fonts: string[]) => {\n const fontMap: { [key: string]: string } = {\n lora: 'https://fonts.googleapis.com/css2?family=Lora:wght@700&display=swap',\n 'pt-sans':\n 'https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap',\n 'roboto-condensed':\n 'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@500&display=swap',\n }\n\n fonts.forEach(font => {\n const fontCssUrl = fontMap[font]\n const existingElement = document.querySelector(`link[href=\"${fontCssUrl}\"]`)\n\n if (!existingElement && fontCssUrl) {\n const newElement = document.createElement('link')\n newElement.setAttribute('rel', 'stylesheet')\n newElement.setAttribute('href', fontCssUrl)\n document.head.appendChild(newElement)\n }\n })\n}\n"]}