@kompasid/lit-web-components 0.1.0 → 0.2.0

package/dist/src/components/kompas-paywall-video/KompasPaywallVideo.js

@@ -28,9 +28,7 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
          * prop metered_wall_type = The type of Metered Wall
          * prop metered_wall_balance = The balance of their metered wall
          */
-        this.loginUrl = 'https://account.kompas.id/login';
         this.subscriptionUrl = 'https://www.kompas.id/berlangganan';
-        this.registerUrl = 'https://account.kompas.id/register';
         this.isLogin = false;
         this.paywall_location = '';
         this.paywall_subscription_package = '';
@@ -135,7 +133,7 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
         </h5>
         <div class="flex justify-center mt-4 space-x-3">
           <button
-            @click=${() => this.redirectToLogin('Masuk')}
+            @click=${() => this.redirectToRegister('Masuk')}
             class="rounded text-sm text-white px-4 py-1.5 ring-1 ring-grey-100"
           >
             Masuk
@@ -152,7 +150,7 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
         >
           Dapatkan 5 konten premium gratis tiap bulan!
           <button
-            @click=${() => this.redirectToLogin('Coba Sekarang')}
+            @click=${() => this.redirectToRegister('Coba Sekarang')}
             target="_blank"
             class="text-blue-300 font-bold cursor-pointer"
           >
@@ -162,9 +160,12 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
       </div>
     `;
     }
-    redirectToLogin(triggerClick) {
+    redirectToRegister(triggerClick) {
         this.sendDataLayeronButtonLogin(triggerClick);
-        window.open(this.loginUrl, '_blank');
+        const registerHost = 'https://account.kompas.id/register';
+        const nextParams = encodeURIComponent(window.location.href);
+        const directUrlRegister = `${registerHost}?next=${nextParams}?status=sukses_login&status_login=login`;
+        window.open(directUrlRegister, '_blank');
     }
     redirectToBerlangganan() {
         this.sendDataLayeronButtonBerlangganan();
@@ -181,15 +182,9 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
     }
 };
 KompasPaywallVideo.styles = [css ``, TWStyles];
-__decorate([
-    state()
-], KompasPaywallVideo.prototype, "loginUrl", void 0);
 __decorate([
     state()
 ], KompasPaywallVideo.prototype, "subscriptionUrl", void 0);
-__decorate([
-    state()
-], KompasPaywallVideo.prototype, "registerUrl", void 0);
 __decorate([
     property({ type: Boolean })
 ], KompasPaywallVideo.prototype, "isLogin", void 0);

package/dist/src/components/kompas-paywall-video/KompasPaywallVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasPaywallVideo.js","sourceRoot":"","sources":["../../../../src/components/kompas-paywall-video/KompasPaywallVideo.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport { html, css, LitElement } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { deviceType } from '../../utils/deviceType.js'\n\n@customElement('kompas-paywall-video')\nexport class KompasPaywallVideo extends LitElement {\n  static styles = [css``, TWStyles]\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   */\n\n  @state() private loginUrl: string = 'https://account.kompas.id/login'\n  @state() private subscriptionUrl: string =\n    'https://www.kompas.id/berlangganan'\n  @state() private registerUrl: string = 'https://account.kompas.id/register'\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\n  private isLoginComponent() {\n    return html`\n      <div>\n        ${this.sendDataLayeronBerlangganan()}\n        <h5\n          class=\"leading-6 text-white text-center text-base md:text-xl max-w-2xl\"\n        >\n          Akses konten premium Anda bulan ini sudah habis. Aktifkan langganan\n          untuk akses tanpa batas, mulai dari\n          <span class=\"font-bold\">Rp50.000/bulan.</span>\n        </h5>\n        <div class=\"flex justify-between mt-4\">\n          <button\n            @click=${() => this.redirectToBerlangganan()}\n            class=\"bg-green-500 rounded px-4 py-1.5 text-sm text-white font-bold\"\n          >\n            Berlangganan\n          </button>\n        </div>\n      </div>\n    `\n  }\n\n  private defaultComponent() {\n    return html`\n      <div>\n        ${this.sendDataLayeronNonLogin()} ${this.sendDataLayeronBerlangganan()}\n        <h5\n          class=\"leading-6 text-white text-center text-base md:text-xl max-w-xl\"\n        >\n          Langganan untuk akses ke seluruh konten premium, mulai dari\n          <span class=\"font-bold\">Rp50.000/bulan.</span>\n        </h5>\n        <div class=\"flex justify-center mt-4 space-x-3\">\n          <button\n            @click=${() => this.redirectToLogin('Masuk')}\n            class=\"rounded text-sm text-white px-4 py-1.5 ring-1 ring-grey-100\"\n          >\n            Masuk\n          </button>\n          <button\n            @click=${() => this.redirectToBerlangganan()}\n            class=\"bg-green-500 rounded px-4 py-1.5 text-sm text-white font-bold\"\n          >\n            Berlangganan\n          </button>\n        </div>\n        <p\n          class=\"text-center text-sm leading-4 text-white mt-6 max-w-xs md:max-w-none\"\n        >\n          Dapatkan 5 konten premium gratis tiap bulan!\n          <button\n            @click=${() => this.redirectToLogin('Coba Sekarang')}\n            target=\"_blank\"\n            class=\"text-blue-300 font-bold cursor-pointer\"\n          >\n            Coba Sekarang\n          </button>\n        </p>\n      </div>\n    `\n  }\n\n  private sendDataLayeronNonLogin = (): void => {\n    window.dataLayer.push({\n      event: 'registrationOfferimppression',\n      interface: deviceType(),\n    })\n  }\n\n  private sendDataLayeronBerlangganan = (): void => {\n    window.dataLayer.push({\n      event: 'paywall_viewed',\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      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      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\n  private sendDataLayeronButtonLogin = (triggerClick: string): void => {\n    window.dataLayer.push({\n      event: 'registrationOfferClick',\n      interface: deviceType(),\n      buttonClicked: triggerClick,\n    })\n  }\n\n  private sendDataLayeronButtonBerlangganan = (): void => {\n    window.dataLayer.push({\n      event: 'subscribe_button_clicked',\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      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      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\n  private redirectToLogin(triggerClick: string): void {\n    this.sendDataLayeronButtonLogin(triggerClick)\n    window.open(this.loginUrl, '_blank')\n  }\n\n  private redirectToBerlangganan(): void {\n    this.sendDataLayeronButtonBerlangganan()\n    window.open(this.subscriptionUrl, '_blank')\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"radius absolute z-20 bg-black bg-opacity-50 p-4 top-0 bottom-0 left-0 flex flex-col w-full h-full justify-center items-center\"\n      >\n        ${this.isLogin ? this.isLoginComponent() : this.defaultComponent()}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasPaywallVideo.js","sourceRoot":"","sources":["../../../../src/components/kompas-paywall-video/KompasPaywallVideo.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport { html, css, LitElement } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { deviceType } from '../../utils/deviceType.js'\n\n@customElement('kompas-paywall-video')\nexport class KompasPaywallVideo extends LitElement {\n  static styles = [css``, TWStyles]\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   */\n\n  @state() private subscriptionUrl: string =\n    'https://www.kompas.id/berlangganan'\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\n  private isLoginComponent() {\n    return html`\n      <div>\n        ${this.sendDataLayeronBerlangganan()}\n        <h5\n          class=\"leading-6 text-white text-center text-base md:text-xl max-w-2xl\"\n        >\n          Akses konten premium Anda bulan ini sudah habis. Aktifkan langganan\n          untuk akses tanpa batas, mulai dari\n          <span class=\"font-bold\">Rp50.000/bulan.</span>\n        </h5>\n        <div class=\"flex justify-between mt-4\">\n          <button\n            @click=${() => this.redirectToBerlangganan()}\n            class=\"bg-green-500 rounded px-4 py-1.5 text-sm text-white font-bold\"\n          >\n            Berlangganan\n          </button>\n        </div>\n      </div>\n    `\n  }\n\n  private defaultComponent() {\n    return html`\n      <div>\n        ${this.sendDataLayeronNonLogin()} ${this.sendDataLayeronBerlangganan()}\n        <h5\n          class=\"leading-6 text-white text-center text-base md:text-xl max-w-xl\"\n        >\n          Langganan untuk akses ke seluruh konten premium, mulai dari\n          <span class=\"font-bold\">Rp50.000/bulan.</span>\n        </h5>\n        <div class=\"flex justify-center mt-4 space-x-3\">\n          <button\n            @click=${() => this.redirectToRegister('Masuk')}\n            class=\"rounded text-sm text-white px-4 py-1.5 ring-1 ring-grey-100\"\n          >\n            Masuk\n          </button>\n          <button\n            @click=${() => this.redirectToBerlangganan()}\n            class=\"bg-green-500 rounded px-4 py-1.5 text-sm text-white font-bold\"\n          >\n            Berlangganan\n          </button>\n        </div>\n        <p\n          class=\"text-center text-sm leading-4 text-white mt-6 max-w-xs md:max-w-none\"\n        >\n          Dapatkan 5 konten premium gratis tiap bulan!\n          <button\n            @click=${() => this.redirectToRegister('Coba Sekarang')}\n            target=\"_blank\"\n            class=\"text-blue-300 font-bold cursor-pointer\"\n          >\n            Coba Sekarang\n          </button>\n        </p>\n      </div>\n    `\n  }\n\n  private sendDataLayeronNonLogin = (): void => {\n    window.dataLayer.push({\n      event: 'registrationOfferimppression',\n      interface: deviceType(),\n    })\n  }\n\n  private sendDataLayeronBerlangganan = (): void => {\n    window.dataLayer.push({\n      event: 'paywall_viewed',\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      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      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\n  private sendDataLayeronButtonLogin = (triggerClick: string): void => {\n    window.dataLayer.push({\n      event: 'registrationOfferClick',\n      interface: deviceType(),\n      buttonClicked: triggerClick,\n    })\n  }\n\n  private sendDataLayeronButtonBerlangganan = (): void => {\n    window.dataLayer.push({\n      event: 'subscribe_button_clicked',\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      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      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\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`\n    window.open(directUrlRegister, '_blank')\n  }\n\n  private redirectToBerlangganan(): void {\n    this.sendDataLayeronButtonBerlangganan()\n    window.open(this.subscriptionUrl, '_blank')\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"radius absolute z-20 bg-black bg-opacity-50 p-4 top-0 bottom-0 left-0 flex flex-col w-full h-full justify-center items-center\"\n      >\n        ${this.isLogin ? this.isLoginComponent() : this.defaultComponent()}\n      </div>\n    `\n  }\n}\n"]}