@kompasid/lit-web-components 0.3.0 → 0.3.1

package/demo/index.html

@@ -52,7 +52,7 @@
     import '../dist/src/components/kompas-paywall-video/KompasPaywallVideo.js'
     import '../dist/src/components/kompas-metered-paywall/KompasMeteredPaywall.js'
 
-    const type = 'epaper'
+    const type = 'regular'
     const theme=""
     const paywallLocation = "Article Detail Page";
     const paywallSubscriptionId = "testId";
@@ -72,7 +72,7 @@
     const trackerEpaperEdition = "edition";
     const meteredWallBalance = 0;
     const isLogin = true;
-    const isWithHeader = true;
+    const isWithHeader = false;
     const textHeader = "this is message for header information";
     const userGuid = "111000";
     const trackerSubscriptionStatus = "register";

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

@@ -382,6 +382,27 @@ KompasPaywall.styles = [
       :host {
         font-family: 'PT Sans', sans-serif;
       }
+      .transparent-linear {
+        background-image: -webkit-gradient(
+          linear,
+          left top,
+          left bottom,
+          from(hsla(0, 0%, 100%, 0)),
+          to(#fff)
+        );
+        background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);
+      }
+
+      .transparent-linear-dark {
+        background-image: -webkit-gradient(
+          linear,
+          left top,
+          left bottom,
+          from(hsla(0, 0%, 18%, 0)),
+          to(#121212)
+        );
+        background-image: linear-gradient(180deg, hsla(0, 0%, 18%, 0), #121212);
+      }
     `,
     TWStyles,
 ];

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

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

package/dist/src/components/kompas-paywall-body/KompasPaywallBody.js

@@ -733,7 +733,17 @@ let KompasPaywallBody = class KompasPaywallBody extends LitElement {
     `;
     }
 };
-KompasPaywallBody.styles = [css ``, TWStyles];
+KompasPaywallBody.styles = [
+    css `
+      .wrapper-body {
+        display: flex;
+        flex-direction: column;
+        justify-items: center;
+        align-items: center;
+      }
+    `,
+    TWStyles,
+];
 __decorate([
     property({ type: String })
 ], KompasPaywallBody.prototype, "slug", void 0);

package/dist/src/components/kompas-paywall-body/KompasPaywallBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasPaywallBody.js","sourceRoot":"","sources":["../../../../src/components/kompas-paywall-body/KompasPaywallBody.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-return-assign */\n\nimport { html, css, LitElement } from 'lit'\nimport { property, state, customElement } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport {\n  PaywallProduct,\n  Product,\n  Packages,\n  PaymentImage,\n} from '../kompas-paywall/types.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { deviceType } from '../../utils/deviceType.js'\n\n@customElement('kompas-paywall-body')\nexport class KompasPaywallBody extends LitElement {\n  static styles = [css``, TWStyles]\n\n  /**\n   * Props\n   */\n  /**\n   * prop slug untuk menghandle slug\n   * prop isLogin untuk menghandle apakah user sudah login atau belum\n   * prop type untuk menghandle tipe epaper\n   * prop paywallData untuk menghandle data paywall\n   * prop userGuid untuk menghandle user Guid\n   * prop subscriptionStatus untuk menghandle status subscription user\n   * prop countdownArticle untuk menghandle count artikel\n   * prop swgEnable untuk menghandle swg apakah di aktifkan atau tidak\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 tracker_page_type = Type of the page\n   * prop tracker_content_id = ID of article (slug)\n   * prop tracker_content_type = Whether it's free article or paid article\n   * prop tracker_content_title = The title of article\n   * prop tracker_content_categories = The category of the content\n   * prop tracker_user_type = Type of user based on their subscription\n   * prop tracker_subscription_status = Status of their subscription\n   * prop tracker_page_domain = Page Domain\n   * prop tracker_metered_wall_type = The type of Metered Wall\n   * prop tracker_metered_wall_balance = The balance of their metered wall\n   * prop tracker_metered_wall_balance = The edition of epaper viewed by user\n   * prop theme = The theme of the paywall component\n   */\n\n  @property({ type: String }) slug = ''\n  @property({ type: Number }) udin = 0\n  @property({ type: Boolean }) isLogin = false\n  @property({ type: String }) type: 'epaper' | 'reguler' = 'reguler'\n  @property({ type: Object }) paywallData: PaywallProduct | undefined =\n    undefined\n  @property({ type: String }) userGuid = ''\n  @property({ type: String }) subscriptionStatus = ''\n  @property({ type: Number }) countdownArticle = 0\n  @property({ type: Boolean }) swgEnable = false\n  @property({ type: String }) paywall_location = ''\n  @property({ type: String }) paywall_subscription_package = ''\n  @property({ type: Number }) paywall_subscription_id = 0\n  @property({ type: Number }) paywall_subscription_price = 0\n  @property({ type: Number }) paywall_position = 0\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n  @property({ type: String }) tracker_epaper_edition = ''\n  @property({ type: String }) theme = ''\n\n  @state() private isExtensionsOpened = false\n  @state() private kompasAkunHost = 'https://akun.kompas.id'\n  @state() private kompasApigenHost = 'https://apigen.kompas.id'\n  @state() private kompasApiWcmHost = 'https://apiwcm.kompas.id'\n  @state() private kompasLoginHost = 'https://account.kompas.id/login'\n  @state() private selfHost = 'https://epaper.kompas.id'\n  @state() private swgPublisherName = 'Harian Kompas'\n  @state() private swgPublisherId = 'kompas.id'\n  @state() private swgProductId = 'kompas.id:kompas_digital_premium'\n  @state() private errorFlag = 0\n\n  buttonElement!: HTMLButtonElement\n\n  private getRupiahFormat(value: number) {\n    const roundedValue = Math.round(value)\n    return `Rp ${roundedValue\n      .toString()\n      .replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1.')}`\n  }\n\n  private redirectToCheckout(\n    url: string,\n    name: string,\n    id: string,\n    price: number,\n    position: number\n  ): void {\n    this.sendDataLayeronButtonBuyPackage(name, id, price, position)\n    const originHost: string = encodeURIComponent(window.location.href)\n    const source: string = this.type === 'epaper' ? 'epaper' : ''\n    const directUrlCheckout: string = `${url}${originHost}&source=${source}`\n    window.open(directUrlCheckout)\n  }\n\n  private redirectToPrevUrl(): void {\n    window.history.back()\n  }\n\n  private redirectToSubscriber(): void {\n    this.sendDataLayer()\n    window.open('https://www.kompas.id/berlangganan')\n  }\n\n  private redirectToRegister(): void {\n    const loginHost: string = 'https://account.kompas.id/login'\n    const nextParams: string = encodeURIComponent(window.location.href)\n    const directUrlRegister: string = `${loginHost}?next=${nextParams}?status=sukses_login&status_login=login`\n    window.location.href = directUrlRegister\n  }\n\n  private redirectToHelpdesk(): void {\n    this.sendDataLayeronHelpDesk()\n    window.open(\n      'https://api.whatsapp.com/send/?phone=6281290050800&text=Halo,%20saya%20perlu%20informasi%20mengenai%20kompas.id'\n    )\n  }\n\n  private paymentExtensionHandler(): void {\n    this.isExtensionsOpened = !this.isExtensionsOpened\n  }\n\n  get isDark() {\n    return this.theme === 'dark'\n  }\n\n  get redirectToLogin() {\n    return `${this.kompasLoginHost}?next=${encodeURIComponent(\n      this.selfHost + window.location.pathname\n    )}`\n  }\n\n  private async getRegisterToken(path: string, payload: any): Promise<string> {\n    return fetch(`${this.kompasApigenHost}/v1/user/register/token/${path}`, {\n      method: 'POST',\n      body: JSON.stringify(payload),\n      headers: {\n        'content-type': 'application/json',\n      },\n    })\n      .then(response => response.json())\n      .then((data: any) => data.result.token)\n      .catch(error => {\n        throw error\n      })\n  }\n\n  private async getUserToken(path: string, payload: any): Promise<string> {\n    return fetch(`${this.kompasApigenHost}/v1/user/token/${path}`, {\n      method: 'POST',\n      body: JSON.stringify(payload),\n      headers: {\n        'content-type': 'application/json',\n      },\n    })\n      .then(response => response.json())\n      .then((data: any) => data.result.token)\n      .catch(error => {\n        throw error\n      })\n  }\n\n  private async getSubscriptionToken(\n    path: string,\n    payload: any\n  ): Promise<string> {\n    return fetch(`${this.kompasAkunHost}/api/subscription/login/${path}`, {\n      method: 'POST',\n      body: JSON.stringify(payload),\n      headers: {\n        'content-type': 'application/json',\n      },\n    })\n      .then(response => response.json())\n      .then((data: any) => {\n        this.errorFlag = 0\n        return data.access_token\n      })\n      .catch(async error => {\n        const errorCode = error.response.status\n        if (errorCode === 500 && this.errorFlag < 5) {\n          // eslint-disable-next-line no-plusplus\n          this.errorFlag++\n          setTimeout(async () => {\n            await this.getSubscriptionToken(path, payload)\n          }, 2000)\n        } else {\n          this.errorFlag = 0\n          throw error\n        }\n      })\n  }\n\n  private async createSwG(payload: any, token: string) {\n    await fetch(`${this.kompasApiWcmHost}/v2/membership/swg/create`, {\n      method: 'POST',\n      body: JSON.stringify(payload),\n      headers: {\n        'content-type': 'application/json',\n        Authorization: `Bearer ${token}`,\n      },\n    })\n      .then(response => response.json())\n      .catch(error => {\n        throw error\n      })\n  }\n\n  private subscribeWithGoogleButton = (): any => {\n    // @ts-ignore\n    // eslint-disable-next-line no-restricted-globals\n    ;(self.SWG = self.SWG || []).push((subscriptions: any) => {\n      // set entitlement\n      subscriptions.setOnEntitlementsResponse(() => {\n        // subscriptions attach button\n        subscriptions.attachButton(\n          this.buttonElement,\n          { theme: 'light', lang: 'en' },\n          () => {\n            subscriptions.showOffers({ isClosable: true })\n            subscriptions.setOnLoginRequest(() => {\n              window.location.href = this.redirectToLogin\n            })\n            subscriptions.setOnPaymentResponse(async (paymentResponse: any) => {\n              const response = await paymentResponse\n              const raw = JSON.parse(response.purchaseData.raw)\n              const { productId, purchaseToken, packageName } = raw\n              const { email } = response.userData.data\n\n              const payload = {\n                subscription_token: purchaseToken,\n                products: productId,\n                detail: 'test',\n              }\n              const userToken = await this.getUserToken('google', payload)\n              if (userToken) {\n                // login and update membership\n                const accessToken = await this.getSubscriptionToken('google', {\n                  token: userToken,\n                })\n                if (accessToken) {\n                  const payloadSWG = {\n                    email,\n                    package_name: packageName,\n                    product_id: productId,\n                    purchase_token: purchaseToken,\n                  }\n                  await this.createSwG(payloadSWG, accessToken)\n                }\n              } else {\n                // register and login the unknown user\n                const payloadRegisterToken = {\n                  subscription_token: purchaseToken,\n                  products: productId,\n                  detail: 'test',\n                }\n                const token = await this.getRegisterToken(\n                  'google',\n                  payloadRegisterToken\n                )\n                if (token) {\n                  const accessToken = await this.getSubscriptionToken(\n                    'google',\n                    { token }\n                  )\n                  const payloadSWRUknown = {\n                    email,\n                    package_name: packageName,\n                    product_id: productId,\n                    purchase_token: purchaseToken,\n                  }\n                  await this.createSwG(payloadSWRUknown, accessToken)\n                }\n              }\n              response.complete().then(() => {\n                window.location.href = this.redirectToLogin\n              })\n            })\n          }\n        )\n      })\n    })\n  }\n\n  private jsonScript() {\n    const jsonData = {\n      '@context': 'https://schema.org',\n      '@type': ['WebSite', 'WebPage'],\n      isAccessibleForFree: false,\n      url: this.selfHost + window.location.pathname,\n      name: this.swgPublisherName,\n      hasPart: {\n        '@type': 'WebPageElement',\n      },\n      isPartOf: {\n        '@type': ['CreativeWork', 'Product'],\n        name: this.swgPublisherId,\n        productID: this.swgProductId,\n      },\n    }\n    const str = JSON.stringify(jsonData)\n    const jsonScript = document.createElement('script')\n    jsonScript.type = 'application/ld+json'\n    jsonScript.text = str\n    jsonScript.defer = true\n    const jsonHead = document.querySelector('head')\n    if (jsonHead) {\n      jsonHead.appendChild(jsonScript)\n    }\n  }\n\n  override connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback()\n    if (this.swgEnable) {\n      this.jsonScript()\n      const appendSWGButton = () => {\n        this.buttonElement = this.shadowRoot?.getElementById(\n          'subscribe-with-google'\n        ) as HTMLButtonElement\n        if (this.buttonElement) {\n          const head = document.querySelector('head')\n          const script = document.createElement('script')\n          script.src = 'https://news.google.com/swg/js/v1/swg.js'\n          script.defer = true\n          script.onload = this.subscribeWithGoogleButton()\n          if (head) {\n            head.appendChild(script)\n          }\n        }\n      }\n\n      setTimeout(appendSWGButton, 500)\n    }\n  }\n\n  private sendDataLayer(): void {\n    window.dataLayer.push({\n      event: 'halamanBerlanggananClick',\n      subscriptionStatus: '',\n      GUID: '',\n      interface: deviceType(),\n    })\n  }\n\n  private sendDataLayeronHelpDesk(): void {\n    window.dataLayer.push({\n      event: 'helpOfferClick',\n      userType: this.subscriptionStatus,\n      GUID: this.userGuid,\n      interface: deviceType(),\n    })\n  }\n\n  private sendDataLayeronButtonBuyPackage(\n    name: string,\n    id: string,\n    price: number,\n    position: number\n  ): void {\n    const gtmParams: Record<string, any> = {\n      event: 'subscribe_button_clicked',\n      paywall_location: this.paywall_location,\n      paywall_subscription_package: name,\n      paywall_subscription_id: id,\n      paywall_subscription_price: price,\n      paywall_position: 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    if (this.type !== 'epaper') {\n      gtmParams.content_title = this.tracker_content_title\n      gtmParams.content_id = this.tracker_content_id\n      gtmParams.content_categories = this.tracker_content_categories\n      gtmParams.content_type = this.tracker_content_type\n      gtmParams.page_type = this.tracker_page_type\n    } else {\n      gtmParams.epaper_edition = this.tracker_epaper_edition\n    }\n\n    window.dataLayer.push(gtmParams)\n  }\n\n  private sendDataLayeronPaywallBody = (): void => {\n    const gtmParams: Record<string, any> = {\n      event: 'paywall_viewed',\n      impressions: [\n        {\n          paywall_location: this.paywall_location || '',\n          paywall_subscription_package:\n            'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12',\n          paywall_subscription_id: '9802032',\n          paywall_subscription_price: 360000,\n          paywall_position: 1,\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          paywall_location: this.paywall_location || '',\n          paywall_subscription_package:\n            'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1',\n          paywall_subscription_id: '9802035',\n          paywall_subscription_price: 50000,\n          paywall_position: 2,\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\n    if (this.type === 'epaper') {\n      gtmParams.impressions[0].epaper_edition = this.tracker_epaper_edition\n      gtmParams.impressions[1].epaper_edition = this.tracker_epaper_edition\n    } else {\n      gtmParams.impressions[0].page_type = this.tracker_page_type\n      gtmParams.impressions[0].content_id = this.tracker_content_id\n      gtmParams.impressions[0].content_title = this.tracker_content_title\n      gtmParams.impressions[0].content_categories =\n        this.tracker_content_categories\n      gtmParams.impressions[0].content_type = this.tracker_content_type\n\n      gtmParams.impressions[1].page_type = this.tracker_page_type\n      gtmParams.impressions[1].content_id = this.tracker_content_id\n      gtmParams.impressions[1].content_title = this.tracker_content_title\n      gtmParams.impressions[1].content_categories =\n        this.tracker_content_categories\n      gtmParams.impressions[1].content_type = this.tracker_content_type\n    }\n\n    window.dataLayer.push(gtmParams)\n  }\n\n  private headerSection(type: 'epaper' | 'reguler') {\n    return html`\n      <div class=\"flex w-full items-center\">\n        ${type === 'epaper'\n          ? html`<button\n              @click=${() => this.redirectToPrevUrl()}\n              class=\"hidden lg:block w-8 h-8 text-blue-600 pl-4\"\n            >\n              ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}\n            </button>`\n          : ''}\n        <h4\n          class=\"text-base md:text-xl ${this.isDark &&\n          'text-white'} text-center font-bold font-serif tracking-wide md:tracking-normal w-full\"\n        >\n          Langganan untuk Lanjut Membaca\n        </h4>\n      </div>\n    `\n  }\n\n  private descriptionSection(data: Array<string>) {\n    return html`<div class=\" flex flex-col items-center\">\n      <div class=\"flex flex-col space-y-2 mt-2.5 md:mt-3\">\n        ${data.map(\n          item =>\n            html`\n              <div class=\"flex items-center\">\n                <div class=\"text-green-500\">\n                  ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 12, 12))}\n                </div>\n                <h6\n                  class=\"text-xs md:text-base ${this.isDark &&\n                  'text-white'} ml-0.5 md:ml-1\"\n                >\n                  ${item}\n                </h6>\n              </div>\n            `\n        )}\n      </div>\n    </div>`\n  }\n\n  private informationPackages() {\n    return html` <div class=\"mt-4 flex justify-center\">\n      <button\n        @click=${() => this.redirectToSubscriber()}\n        class=\"text-sm md:text-base font-bold ${this.isDark\n          ? 'text-blue-300'\n          : 'text-blue-600'} underline\"\n      >\n        Lihat Paket Lainnya\n      </button>\n    </div>`\n  }\n\n  private separatorLine() {\n    return html`\n      <div class=\"flex flex-row w-full justify-center\">\n        <div\n          class=\"border-b-2 ${this.isDark\n            ? 'border-dark-2'\n            : 'border-blue-200'} w-1/4 my-4 flex justify-center\"\n        ></div>\n        <p class=\"px-4 pt-1 ${this.isDark && 'text-dark-1'}\">atau</p>\n        <div\n          class=\"border-b-2 ${this.isDark\n            ? 'border-dark-2'\n            : 'border-blue-200'} w-1/4 my-4 flex justify-center\"\n        ></div>\n      </div>\n    `\n  }\n\n  private paymentDesktopSection(data: Array<PaymentImage>) {\n    return html`\n      <div\n        class=\"hidden md:flex w-full md:max-w-sm items-center justify-center flex-wrap\"\n      >\n        ${data.map(\n          item =>\n            html`<img\n              class=\"object-cover ${this.isDark ? 'h-9' : 'h-10'}\"\n              src=${item.link}\n              alt=\"${item.name}-logo-payment\"\n            />`\n        )}\n      </div>\n    `\n  }\n\n  private paymentMobileSection(data: Array<PaymentImage>) {\n    return html`\n      <div\n        class=\"grid md:hidden items-center grid-flow-col grid-cols-auto grid-rows-1 mt-4 mx-4\"\n      >\n        ${data.map(\n          item =>\n            html`<img\n              class=\"w-16\"\n              src=${item.link}\n              alt=\"${item.name}-logo-payment\"\n            />`\n        )}\n        <button\n          @click=${() => this.paymentExtensionHandler()}\n          class=\"text-xs md:text-sm ${this.isDark\n            ? 'text-blue-300'\n            : 'text-blue-600'} font-bold\"\n        >\n          +9 lainnya\n        </button>\n      </div>\n    `\n  }\n\n  private paymentMobileExtension(data: Array<PaymentImage>) {\n    return html`\n      <div\n        class=\"w-full ${this.isDark\n          ? '-bottom-6'\n          : 'bottom-0'} max-w-xs mb-1 ml-8 md:hidden absolute px-4\"\n      >\n        <div\n          class=\"w-full ${this.isDark\n            ? 'bg-dark-6 border-dark-6'\n            : 'bg-white border-white'} rounded p-3 max-w-xs\"\n        >\n          <svg\n            class=\"right-0 ${this.isDark\n              ? 'text-dark-6 border-dark-6'\n              : 'text-white border-white '} h-4 mr-10 -mt-7 z-0 transform rotate-180 absolute\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 255 255\"\n          >\n            <polygon class=\"fill-current\" points=\"0,0 127.5,127.5 255,0\" />\n          </svg>\n          <div\n            class=\"grid place-items-center items-center grid-flow-row grid-cols-5 grid-rows-2  gap-y-4\"\n          >\n            ${data.map(\n              item =>\n                html`<img\n                  class=\"object-cover\"\n                  src=${item.link}\n                  alt=\"${item.name}-logo-payment\"\n                />`\n            )}\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private primaryPackages(product: Product) {\n    return html`\n      <div\n        class=\"flex flex-wrap justify-between items-center ${this.isDark\n          ? 'bg-grey-600'\n          : 'bg-white'} rounded md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-2.5 md:mt-4 border border-yellow-400 relative\"\n      >\n        <div class=\"flex flex-col py-3 px-4\">\n          <div class=\"flex flex-none items-center\">\n            <h5 class=\"text-base md:text-lg font-bold text-orange-400\">\n              ${this.getRupiahFormat(product.price)}\n            </h5>\n            <h6\n              class=\"text-xs md:text-base ${this.isDark &&\n              'text-white'} font-bold pl-1\"\n            >\n              / ${product.periode}\n            </h6>\n          </div>\n          <div class=\"flex items-center\">\n            <p class=\"text-xs ${this.isDark && 'text-white'}\">\n              hanya <span class=\"text-orange-400\">Rp 30.000</span> / bulan\n            </p>\n          </div>\n        </div>\n        <button\n          class=\"h-auto ${this.isDark\n            ? 'bg-green-300 border border-green-400'\n            : 'bg-green-500'} rounded mr-4\"\n          @click=${() =>\n            this.redirectToCheckout(\n              product.url,\n              'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12',\n              '9802032',\n              360000,\n              1\n            )}\n        >\n          <h6\n            class=\"text-xs md:text-base ${this.isDark\n              ? 'text-black'\n              : 'text-white'} font-bold py-2 px-4\"\n          >\n            Langganan\n          </h6>\n        </button>\n        <div class=\"absolute -top-2 left-4\">\n          <div class=\"rounded bg-yellow-300 px-2 py-0.5 text-xs\">\n            <b>Harga Terbaik</b>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private secondaryPackages(product: Product) {\n    return html`\n      <div\n        class=\"flex  flex-wrap justify-between ${this.isDark\n          ? 'bg-grey-600'\n          : 'bg-white'} py-3 px-4 rounded md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4\"\n      >\n        <div class=\"flex items-center\">\n          <h5 class=\"text-base md:text-lg font-bold text-orange-400\">\n            ${this.getRupiahFormat(product.price)}\n          </h5>\n          <h6\n            class=\"text-xs md:text-base ${this.isDark &&\n            'text-white'} font-bold pl-1\"\n          >\n            / ${product.periode}\n          </h6>\n        </div>\n        <button\n          @click=${() =>\n            this.redirectToCheckout(\n              product.url,\n              'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1',\n              '9802035',\n              50000,\n              2\n            )}\n          class=\"h-auto ${!this.isDark &&\n          'bg-white'} border border-green-500 rounded\"\n        >\n          <h6\n            class=\"text-xs md:text-base ${this.isDark\n              ? 'text-green-300'\n              : 'text-green-500'} font-bold py-2 px-4\"\n          >\n            Langganan\n          </h6>\n        </button>\n      </div>\n    `\n  }\n\n  private packagesSection(data: Packages) {\n    return html`\n      <div class=\"flex flex-col w-full items-center mt-8 lg:mt-2 px-2 \">\n        <h6\n          class=\"text-sm md:text-base ${this.isDark && 'text-white'} font-bold\"\n        >\n          ${data.title}\n        </h6>\n        ${data.memberships.map(item =>\n          item.isHighlight\n            ? this.primaryPackages(item)\n            : this.secondaryPackages(item)\n        )}\n      </div>\n    `\n  }\n\n  private topNavigator() {\n    return html`\n      <div class=\"flex lg:hidden items-center w-full pb-4 \">\n        <button\n          @click=${() => this.redirectToPrevUrl()}\n          class=\"text-xs md:text-lg text-white flex flex-row\"\n        >\n          <div class=\"icon-lg icon-white w-4 h-4 mr-3.5 md:mr-5 pt-0.5\">\n            ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}\n          </div>\n          Kembali\n        </button>\n      </div>\n    `\n  }\n\n  private helpDesk() {\n    return html`\n      <div class=\"py-2.5 text-white self-center text-xs md:text-sm\">\n        Mengalami masalah? Hubungi\n        <button\n          @click=${() => this.redirectToHelpdesk()}\n          class=\"font-bold ${this.isDark && 'text-blue-300'} underline\"\n        >\n          Layanan Pelanggan.\n        </button>\n      </div>\n    `\n  }\n\n  private authRegister() {\n    return html`\n      <div\n        class=\"flex flex-row text-white px-2 py-2.5 space-x-4 md:space-x-8 self-center\"\n      >\n        <div class=\"flex flex-col text-left text-xs md:text-sm text-white\">\n          <b>Sudah berlangganan Kompas.id?</b>\n          <p>Masuk untuk lanjut membaca.</p>\n        </div>\n        <button\n          @click=${() => this.redirectToRegister()}\n          class=\"h-auto ${this.isDark\n            ? 'bg-blue-300'\n            : 'bg-grey-100'} rounded mr-3\"\n        >\n          <p\n            class=\"text-xs md:text-sm ${this.isDark\n              ? 'text-black'\n              : 'text-blue-600'} font-bold py-2 px-4\"\n          >\n            Masuk / Daftar\n          </p>\n        </button>\n      </div>\n    `\n  }\n\n  private userAction(isLogin: boolean, type: 'epaper' | 'reguler') {\n    return html`\n      <div\n        class=\"flex h-20 ${this.isDark\n          ? 'bg-dark-4'\n          : 'bg-blue-600'} w-full justify-evenly rounded-b mt-6 md:mt-8 relative\"\n      >\n        ${isLogin || type !== 'epaper' ? this.helpDesk() : this.authRegister()}\n      </div>\n    `\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"${this.type === 'epaper'\n          ? 'bg-transparent wrapper-body'\n          : 'wrapper-body'}\"\n      >\n        <div\n          class=\"flex flex-col justify-center items-center w-full max-w-screen-sm px-4 md:px-0 my-5 relative\"\n        >\n          ${this.type === 'epaper' ? this.topNavigator() : ''}\n          <div\n            class=\"flex w-full flex-col items-center justify-center ${this\n              .isDark\n              ? 'bg-dark-3'\n              : 'bg-blue-100'}  rounded pt-6 md:pt-8 relative\"\n          >\n            ${this.headerSection(this.type)}\n            ${this.descriptionSection(\n              this.paywallData?.informations?.description ?? []\n            )}\n            ${this.packagesSection(\n              this.paywallData?.packages ?? ({} as Packages)\n            )}\n            ${this.informationPackages()}\n            ${this.swgEnable ? this.separatorLine() : null}\n            ${this.swgEnable\n              ? html`<button\n              class=\"border-2 bg-grey-100 border-grey-100 rounded-lg px-6 shadow-sm flex flex-row py-2 mt-1 mb-4\"\n              id=\"subscribe-with-google\"\n            >\n              <p>Subscribe with</p>\n              <img class=\"pl-2 object-scale-down w-20 pt-0.5\" src=\"https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google.png\" alt=\"subscribe with google\"></img>\n            </button>`\n              : null}\n            ${this.paymentDesktopSection(\n              this.paywallData?.payment?.desktop ?? []\n            )}\n            ${this.paymentMobileSection(\n              this.paywallData?.payment?.mobile ?? []\n            )}\n            ${this.userAction(this.isLogin, this.type)}\n            ${this.sendDataLayeronPaywallBody()}\n          </div>\n          ${this.isExtensionsOpened\n            ? this.paymentMobileExtension(\n                this.paywallData?.payment?.ekstension ?? []\n              )\n            : ''}\n        </div>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasPaywallBody.js","sourceRoot":"","sources":["../../../../src/components/kompas-paywall-body/KompasPaywallBody.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-return-assign */\n\nimport { html, css, LitElement } from 'lit'\nimport { property, state, customElement } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport {\n  PaywallProduct,\n  Product,\n  Packages,\n  PaymentImage,\n} from '../kompas-paywall/types.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { deviceType } from '../../utils/deviceType.js'\n\n@customElement('kompas-paywall-body')\nexport class KompasPaywallBody extends LitElement {\n  static styles = [\n    css`\n      .wrapper-body {\n        display: flex;\n        flex-direction: column;\n        justify-items: center;\n        align-items: center;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * prop slug untuk menghandle slug\n   * prop isLogin untuk menghandle apakah user sudah login atau belum\n   * prop type untuk menghandle tipe epaper\n   * prop paywallData untuk menghandle data paywall\n   * prop userGuid untuk menghandle user Guid\n   * prop subscriptionStatus untuk menghandle status subscription user\n   * prop countdownArticle untuk menghandle count artikel\n   * prop swgEnable untuk menghandle swg apakah di aktifkan atau tidak\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 tracker_page_type = Type of the page\n   * prop tracker_content_id = ID of article (slug)\n   * prop tracker_content_type = Whether it's free article or paid article\n   * prop tracker_content_title = The title of article\n   * prop tracker_content_categories = The category of the content\n   * prop tracker_user_type = Type of user based on their subscription\n   * prop tracker_subscription_status = Status of their subscription\n   * prop tracker_page_domain = Page Domain\n   * prop tracker_metered_wall_type = The type of Metered Wall\n   * prop tracker_metered_wall_balance = The balance of their metered wall\n   * prop tracker_metered_wall_balance = The edition of epaper viewed by user\n   * prop theme = The theme of the paywall component\n   */\n\n  @property({ type: String }) slug = ''\n  @property({ type: Number }) udin = 0\n  @property({ type: Boolean }) isLogin = false\n  @property({ type: String }) type: 'epaper' | 'reguler' = 'reguler'\n  @property({ type: Object }) paywallData: PaywallProduct | undefined =\n    undefined\n  @property({ type: String }) userGuid = ''\n  @property({ type: String }) subscriptionStatus = ''\n  @property({ type: Number }) countdownArticle = 0\n  @property({ type: Boolean }) swgEnable = false\n  @property({ type: String }) paywall_location = ''\n  @property({ type: String }) paywall_subscription_package = ''\n  @property({ type: Number }) paywall_subscription_id = 0\n  @property({ type: Number }) paywall_subscription_price = 0\n  @property({ type: Number }) paywall_position = 0\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n  @property({ type: String }) tracker_epaper_edition = ''\n  @property({ type: String }) theme = ''\n\n  @state() private isExtensionsOpened = false\n  @state() private kompasAkunHost = 'https://akun.kompas.id'\n  @state() private kompasApigenHost = 'https://apigen.kompas.id'\n  @state() private kompasApiWcmHost = 'https://apiwcm.kompas.id'\n  @state() private kompasLoginHost = 'https://account.kompas.id/login'\n  @state() private selfHost = 'https://epaper.kompas.id'\n  @state() private swgPublisherName = 'Harian Kompas'\n  @state() private swgPublisherId = 'kompas.id'\n  @state() private swgProductId = 'kompas.id:kompas_digital_premium'\n  @state() private errorFlag = 0\n\n  buttonElement!: HTMLButtonElement\n\n  private getRupiahFormat(value: number) {\n    const roundedValue = Math.round(value)\n    return `Rp ${roundedValue\n      .toString()\n      .replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1.')}`\n  }\n\n  private redirectToCheckout(\n    url: string,\n    name: string,\n    id: string,\n    price: number,\n    position: number\n  ): void {\n    this.sendDataLayeronButtonBuyPackage(name, id, price, position)\n    const originHost: string = encodeURIComponent(window.location.href)\n    const source: string = this.type === 'epaper' ? 'epaper' : ''\n    const directUrlCheckout: string = `${url}${originHost}&source=${source}`\n    window.open(directUrlCheckout)\n  }\n\n  private redirectToPrevUrl(): void {\n    window.history.back()\n  }\n\n  private redirectToSubscriber(): void {\n    this.sendDataLayer()\n    window.open('https://www.kompas.id/berlangganan')\n  }\n\n  private redirectToRegister(): void {\n    const loginHost: string = 'https://account.kompas.id/login'\n    const nextParams: string = encodeURIComponent(window.location.href)\n    const directUrlRegister: string = `${loginHost}?next=${nextParams}?status=sukses_login&status_login=login`\n    window.location.href = directUrlRegister\n  }\n\n  private redirectToHelpdesk(): void {\n    this.sendDataLayeronHelpDesk()\n    window.open(\n      'https://api.whatsapp.com/send/?phone=6281290050800&text=Halo,%20saya%20perlu%20informasi%20mengenai%20kompas.id'\n    )\n  }\n\n  private paymentExtensionHandler(): void {\n    this.isExtensionsOpened = !this.isExtensionsOpened\n  }\n\n  get isDark() {\n    return this.theme === 'dark'\n  }\n\n  get redirectToLogin() {\n    return `${this.kompasLoginHost}?next=${encodeURIComponent(\n      this.selfHost + window.location.pathname\n    )}`\n  }\n\n  private async getRegisterToken(path: string, payload: any): Promise<string> {\n    return fetch(`${this.kompasApigenHost}/v1/user/register/token/${path}`, {\n      method: 'POST',\n      body: JSON.stringify(payload),\n      headers: {\n        'content-type': 'application/json',\n      },\n    })\n      .then(response => response.json())\n      .then((data: any) => data.result.token)\n      .catch(error => {\n        throw error\n      })\n  }\n\n  private async getUserToken(path: string, payload: any): Promise<string> {\n    return fetch(`${this.kompasApigenHost}/v1/user/token/${path}`, {\n      method: 'POST',\n      body: JSON.stringify(payload),\n      headers: {\n        'content-type': 'application/json',\n      },\n    })\n      .then(response => response.json())\n      .then((data: any) => data.result.token)\n      .catch(error => {\n        throw error\n      })\n  }\n\n  private async getSubscriptionToken(\n    path: string,\n    payload: any\n  ): Promise<string> {\n    return fetch(`${this.kompasAkunHost}/api/subscription/login/${path}`, {\n      method: 'POST',\n      body: JSON.stringify(payload),\n      headers: {\n        'content-type': 'application/json',\n      },\n    })\n      .then(response => response.json())\n      .then((data: any) => {\n        this.errorFlag = 0\n        return data.access_token\n      })\n      .catch(async error => {\n        const errorCode = error.response.status\n        if (errorCode === 500 && this.errorFlag < 5) {\n          // eslint-disable-next-line no-plusplus\n          this.errorFlag++\n          setTimeout(async () => {\n            await this.getSubscriptionToken(path, payload)\n          }, 2000)\n        } else {\n          this.errorFlag = 0\n          throw error\n        }\n      })\n  }\n\n  private async createSwG(payload: any, token: string) {\n    await fetch(`${this.kompasApiWcmHost}/v2/membership/swg/create`, {\n      method: 'POST',\n      body: JSON.stringify(payload),\n      headers: {\n        'content-type': 'application/json',\n        Authorization: `Bearer ${token}`,\n      },\n    })\n      .then(response => response.json())\n      .catch(error => {\n        throw error\n      })\n  }\n\n  private subscribeWithGoogleButton = (): any => {\n    // @ts-ignore\n    // eslint-disable-next-line no-restricted-globals\n    ;(self.SWG = self.SWG || []).push((subscriptions: any) => {\n      // set entitlement\n      subscriptions.setOnEntitlementsResponse(() => {\n        // subscriptions attach button\n        subscriptions.attachButton(\n          this.buttonElement,\n          { theme: 'light', lang: 'en' },\n          () => {\n            subscriptions.showOffers({ isClosable: true })\n            subscriptions.setOnLoginRequest(() => {\n              window.location.href = this.redirectToLogin\n            })\n            subscriptions.setOnPaymentResponse(async (paymentResponse: any) => {\n              const response = await paymentResponse\n              const raw = JSON.parse(response.purchaseData.raw)\n              const { productId, purchaseToken, packageName } = raw\n              const { email } = response.userData.data\n\n              const payload = {\n                subscription_token: purchaseToken,\n                products: productId,\n                detail: 'test',\n              }\n              const userToken = await this.getUserToken('google', payload)\n              if (userToken) {\n                // login and update membership\n                const accessToken = await this.getSubscriptionToken('google', {\n                  token: userToken,\n                })\n                if (accessToken) {\n                  const payloadSWG = {\n                    email,\n                    package_name: packageName,\n                    product_id: productId,\n                    purchase_token: purchaseToken,\n                  }\n                  await this.createSwG(payloadSWG, accessToken)\n                }\n              } else {\n                // register and login the unknown user\n                const payloadRegisterToken = {\n                  subscription_token: purchaseToken,\n                  products: productId,\n                  detail: 'test',\n                }\n                const token = await this.getRegisterToken(\n                  'google',\n                  payloadRegisterToken\n                )\n                if (token) {\n                  const accessToken = await this.getSubscriptionToken(\n                    'google',\n                    { token }\n                  )\n                  const payloadSWRUknown = {\n                    email,\n                    package_name: packageName,\n                    product_id: productId,\n                    purchase_token: purchaseToken,\n                  }\n                  await this.createSwG(payloadSWRUknown, accessToken)\n                }\n              }\n              response.complete().then(() => {\n                window.location.href = this.redirectToLogin\n              })\n            })\n          }\n        )\n      })\n    })\n  }\n\n  private jsonScript() {\n    const jsonData = {\n      '@context': 'https://schema.org',\n      '@type': ['WebSite', 'WebPage'],\n      isAccessibleForFree: false,\n      url: this.selfHost + window.location.pathname,\n      name: this.swgPublisherName,\n      hasPart: {\n        '@type': 'WebPageElement',\n      },\n      isPartOf: {\n        '@type': ['CreativeWork', 'Product'],\n        name: this.swgPublisherId,\n        productID: this.swgProductId,\n      },\n    }\n    const str = JSON.stringify(jsonData)\n    const jsonScript = document.createElement('script')\n    jsonScript.type = 'application/ld+json'\n    jsonScript.text = str\n    jsonScript.defer = true\n    const jsonHead = document.querySelector('head')\n    if (jsonHead) {\n      jsonHead.appendChild(jsonScript)\n    }\n  }\n\n  override connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback()\n    if (this.swgEnable) {\n      this.jsonScript()\n      const appendSWGButton = () => {\n        this.buttonElement = this.shadowRoot?.getElementById(\n          'subscribe-with-google'\n        ) as HTMLButtonElement\n        if (this.buttonElement) {\n          const head = document.querySelector('head')\n          const script = document.createElement('script')\n          script.src = 'https://news.google.com/swg/js/v1/swg.js'\n          script.defer = true\n          script.onload = this.subscribeWithGoogleButton()\n          if (head) {\n            head.appendChild(script)\n          }\n        }\n      }\n\n      setTimeout(appendSWGButton, 500)\n    }\n  }\n\n  private sendDataLayer(): void {\n    window.dataLayer.push({\n      event: 'halamanBerlanggananClick',\n      subscriptionStatus: '',\n      GUID: '',\n      interface: deviceType(),\n    })\n  }\n\n  private sendDataLayeronHelpDesk(): void {\n    window.dataLayer.push({\n      event: 'helpOfferClick',\n      userType: this.subscriptionStatus,\n      GUID: this.userGuid,\n      interface: deviceType(),\n    })\n  }\n\n  private sendDataLayeronButtonBuyPackage(\n    name: string,\n    id: string,\n    price: number,\n    position: number\n  ): void {\n    const gtmParams: Record<string, any> = {\n      event: 'subscribe_button_clicked',\n      paywall_location: this.paywall_location,\n      paywall_subscription_package: name,\n      paywall_subscription_id: id,\n      paywall_subscription_price: price,\n      paywall_position: 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    if (this.type !== 'epaper') {\n      gtmParams.content_title = this.tracker_content_title\n      gtmParams.content_id = this.tracker_content_id\n      gtmParams.content_categories = this.tracker_content_categories\n      gtmParams.content_type = this.tracker_content_type\n      gtmParams.page_type = this.tracker_page_type\n    } else {\n      gtmParams.epaper_edition = this.tracker_epaper_edition\n    }\n\n    window.dataLayer.push(gtmParams)\n  }\n\n  private sendDataLayeronPaywallBody = (): void => {\n    const gtmParams: Record<string, any> = {\n      event: 'paywall_viewed',\n      impressions: [\n        {\n          paywall_location: this.paywall_location || '',\n          paywall_subscription_package:\n            'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12',\n          paywall_subscription_id: '9802032',\n          paywall_subscription_price: 360000,\n          paywall_position: 1,\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          paywall_location: this.paywall_location || '',\n          paywall_subscription_package:\n            'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1',\n          paywall_subscription_id: '9802035',\n          paywall_subscription_price: 50000,\n          paywall_position: 2,\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\n    if (this.type === 'epaper') {\n      gtmParams.impressions[0].epaper_edition = this.tracker_epaper_edition\n      gtmParams.impressions[1].epaper_edition = this.tracker_epaper_edition\n    } else {\n      gtmParams.impressions[0].page_type = this.tracker_page_type\n      gtmParams.impressions[0].content_id = this.tracker_content_id\n      gtmParams.impressions[0].content_title = this.tracker_content_title\n      gtmParams.impressions[0].content_categories =\n        this.tracker_content_categories\n      gtmParams.impressions[0].content_type = this.tracker_content_type\n\n      gtmParams.impressions[1].page_type = this.tracker_page_type\n      gtmParams.impressions[1].content_id = this.tracker_content_id\n      gtmParams.impressions[1].content_title = this.tracker_content_title\n      gtmParams.impressions[1].content_categories =\n        this.tracker_content_categories\n      gtmParams.impressions[1].content_type = this.tracker_content_type\n    }\n\n    window.dataLayer.push(gtmParams)\n  }\n\n  private headerSection(type: 'epaper' | 'reguler') {\n    return html`\n      <div class=\"flex w-full items-center\">\n        ${type === 'epaper'\n          ? html`<button\n              @click=${() => this.redirectToPrevUrl()}\n              class=\"hidden lg:block w-8 h-8 text-blue-600 pl-4\"\n            >\n              ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}\n            </button>`\n          : ''}\n        <h4\n          class=\"text-base md:text-xl ${this.isDark &&\n          'text-white'} text-center font-bold font-serif tracking-wide md:tracking-normal w-full\"\n        >\n          Langganan untuk Lanjut Membaca\n        </h4>\n      </div>\n    `\n  }\n\n  private descriptionSection(data: Array<string>) {\n    return html`<div class=\" flex flex-col items-center\">\n      <div class=\"flex flex-col space-y-2 mt-2.5 md:mt-3\">\n        ${data.map(\n          item =>\n            html`\n              <div class=\"flex items-center\">\n                <div class=\"text-green-500\">\n                  ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 12, 12))}\n                </div>\n                <h6\n                  class=\"text-xs md:text-base ${this.isDark &&\n                  'text-white'} ml-0.5 md:ml-1\"\n                >\n                  ${item}\n                </h6>\n              </div>\n            `\n        )}\n      </div>\n    </div>`\n  }\n\n  private informationPackages() {\n    return html` <div class=\"mt-4 flex justify-center\">\n      <button\n        @click=${() => this.redirectToSubscriber()}\n        class=\"text-sm md:text-base font-bold ${this.isDark\n          ? 'text-blue-300'\n          : 'text-blue-600'} underline\"\n      >\n        Lihat Paket Lainnya\n      </button>\n    </div>`\n  }\n\n  private separatorLine() {\n    return html`\n      <div class=\"flex flex-row w-full justify-center\">\n        <div\n          class=\"border-b-2 ${this.isDark\n            ? 'border-dark-2'\n            : 'border-blue-200'} w-1/4 my-4 flex justify-center\"\n        ></div>\n        <p class=\"px-4 pt-1 ${this.isDark && 'text-dark-1'}\">atau</p>\n        <div\n          class=\"border-b-2 ${this.isDark\n            ? 'border-dark-2'\n            : 'border-blue-200'} w-1/4 my-4 flex justify-center\"\n        ></div>\n      </div>\n    `\n  }\n\n  private paymentDesktopSection(data: Array<PaymentImage>) {\n    return html`\n      <div\n        class=\"hidden md:flex w-full md:max-w-sm items-center justify-center flex-wrap\"\n      >\n        ${data.map(\n          item =>\n            html`<img\n              class=\"object-cover ${this.isDark ? 'h-9' : 'h-10'}\"\n              src=${item.link}\n              alt=\"${item.name}-logo-payment\"\n            />`\n        )}\n      </div>\n    `\n  }\n\n  private paymentMobileSection(data: Array<PaymentImage>) {\n    return html`\n      <div\n        class=\"grid md:hidden items-center grid-flow-col grid-cols-auto grid-rows-1 mt-4 mx-4\"\n      >\n        ${data.map(\n          item =>\n            html`<img\n              class=\"w-16\"\n              src=${item.link}\n              alt=\"${item.name}-logo-payment\"\n            />`\n        )}\n        <button\n          @click=${() => this.paymentExtensionHandler()}\n          class=\"text-xs md:text-sm ${this.isDark\n            ? 'text-blue-300'\n            : 'text-blue-600'} font-bold\"\n        >\n          +9 lainnya\n        </button>\n      </div>\n    `\n  }\n\n  private paymentMobileExtension(data: Array<PaymentImage>) {\n    return html`\n      <div\n        class=\"w-full ${this.isDark\n          ? '-bottom-6'\n          : 'bottom-0'} max-w-xs mb-1 ml-8 md:hidden absolute px-4\"\n      >\n        <div\n          class=\"w-full ${this.isDark\n            ? 'bg-dark-6 border-dark-6'\n            : 'bg-white border-white'} rounded p-3 max-w-xs\"\n        >\n          <svg\n            class=\"right-0 ${this.isDark\n              ? 'text-dark-6 border-dark-6'\n              : 'text-white border-white '} h-4 mr-10 -mt-7 z-0 transform rotate-180 absolute\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 255 255\"\n          >\n            <polygon class=\"fill-current\" points=\"0,0 127.5,127.5 255,0\" />\n          </svg>\n          <div\n            class=\"grid place-items-center items-center grid-flow-row grid-cols-5 grid-rows-2  gap-y-4\"\n          >\n            ${data.map(\n              item =>\n                html`<img\n                  class=\"object-cover\"\n                  src=${item.link}\n                  alt=\"${item.name}-logo-payment\"\n                />`\n            )}\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private primaryPackages(product: Product) {\n    return html`\n      <div\n        class=\"flex flex-wrap justify-between items-center ${this.isDark\n          ? 'bg-grey-600'\n          : 'bg-white'} rounded md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-2.5 md:mt-4 border border-yellow-400 relative\"\n      >\n        <div class=\"flex flex-col py-3 px-4\">\n          <div class=\"flex flex-none items-center\">\n            <h5 class=\"text-base md:text-lg font-bold text-orange-400\">\n              ${this.getRupiahFormat(product.price)}\n            </h5>\n            <h6\n              class=\"text-xs md:text-base ${this.isDark &&\n              'text-white'} font-bold pl-1\"\n            >\n              / ${product.periode}\n            </h6>\n          </div>\n          <div class=\"flex items-center\">\n            <p class=\"text-xs ${this.isDark && 'text-white'}\">\n              hanya <span class=\"text-orange-400\">Rp 30.000</span> / bulan\n            </p>\n          </div>\n        </div>\n        <button\n          class=\"h-auto ${this.isDark\n            ? 'bg-green-300 border border-green-400'\n            : 'bg-green-500'} rounded mr-4\"\n          @click=${() =>\n            this.redirectToCheckout(\n              product.url,\n              'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12',\n              '9802032',\n              360000,\n              1\n            )}\n        >\n          <h6\n            class=\"text-xs md:text-base ${this.isDark\n              ? 'text-black'\n              : 'text-white'} font-bold py-2 px-4\"\n          >\n            Langganan\n          </h6>\n        </button>\n        <div class=\"absolute -top-2 left-4\">\n          <div class=\"rounded bg-yellow-300 px-2 py-0.5 text-xs\">\n            <b>Harga Terbaik</b>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private secondaryPackages(product: Product) {\n    return html`\n      <div\n        class=\"flex  flex-wrap justify-between ${this.isDark\n          ? 'bg-grey-600'\n          : 'bg-white'} py-3 px-4 rounded md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4\"\n      >\n        <div class=\"flex items-center\">\n          <h5 class=\"text-base md:text-lg font-bold text-orange-400\">\n            ${this.getRupiahFormat(product.price)}\n          </h5>\n          <h6\n            class=\"text-xs md:text-base ${this.isDark &&\n            'text-white'} font-bold pl-1\"\n          >\n            / ${product.periode}\n          </h6>\n        </div>\n        <button\n          @click=${() =>\n            this.redirectToCheckout(\n              product.url,\n              'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1',\n              '9802035',\n              50000,\n              2\n            )}\n          class=\"h-auto ${!this.isDark &&\n          'bg-white'} border border-green-500 rounded\"\n        >\n          <h6\n            class=\"text-xs md:text-base ${this.isDark\n              ? 'text-green-300'\n              : 'text-green-500'} font-bold py-2 px-4\"\n          >\n            Langganan\n          </h6>\n        </button>\n      </div>\n    `\n  }\n\n  private packagesSection(data: Packages) {\n    return html`\n      <div class=\"flex flex-col w-full items-center mt-8 lg:mt-2 px-2 \">\n        <h6\n          class=\"text-sm md:text-base ${this.isDark && 'text-white'} font-bold\"\n        >\n          ${data.title}\n        </h6>\n        ${data.memberships.map(item =>\n          item.isHighlight\n            ? this.primaryPackages(item)\n            : this.secondaryPackages(item)\n        )}\n      </div>\n    `\n  }\n\n  private topNavigator() {\n    return html`\n      <div class=\"flex lg:hidden items-center w-full pb-4 \">\n        <button\n          @click=${() => this.redirectToPrevUrl()}\n          class=\"text-xs md:text-lg text-white flex flex-row\"\n        >\n          <div class=\"icon-lg icon-white w-4 h-4 mr-3.5 md:mr-5 pt-0.5\">\n            ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}\n          </div>\n          Kembali\n        </button>\n      </div>\n    `\n  }\n\n  private helpDesk() {\n    return html`\n      <div class=\"py-2.5 text-white self-center text-xs md:text-sm\">\n        Mengalami masalah? Hubungi\n        <button\n          @click=${() => this.redirectToHelpdesk()}\n          class=\"font-bold ${this.isDark && 'text-blue-300'} underline\"\n        >\n          Layanan Pelanggan.\n        </button>\n      </div>\n    `\n  }\n\n  private authRegister() {\n    return html`\n      <div\n        class=\"flex flex-row text-white px-2 py-2.5 space-x-4 md:space-x-8 self-center\"\n      >\n        <div class=\"flex flex-col text-left text-xs md:text-sm text-white\">\n          <b>Sudah berlangganan Kompas.id?</b>\n          <p>Masuk untuk lanjut membaca.</p>\n        </div>\n        <button\n          @click=${() => this.redirectToRegister()}\n          class=\"h-auto ${this.isDark\n            ? 'bg-blue-300'\n            : 'bg-grey-100'} rounded mr-3\"\n        >\n          <p\n            class=\"text-xs md:text-sm ${this.isDark\n              ? 'text-black'\n              : 'text-blue-600'} font-bold py-2 px-4\"\n          >\n            Masuk / Daftar\n          </p>\n        </button>\n      </div>\n    `\n  }\n\n  private userAction(isLogin: boolean, type: 'epaper' | 'reguler') {\n    return html`\n      <div\n        class=\"flex h-20 ${this.isDark\n          ? 'bg-dark-4'\n          : 'bg-blue-600'} w-full justify-evenly rounded-b mt-6 md:mt-8 relative\"\n      >\n        ${isLogin || type !== 'epaper' ? this.helpDesk() : this.authRegister()}\n      </div>\n    `\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"${this.type === 'epaper'\n          ? 'bg-transparent wrapper-body'\n          : 'wrapper-body'}\"\n      >\n        <div\n          class=\"flex flex-col justify-center items-center w-full max-w-screen-sm px-4 md:px-0 my-5 relative\"\n        >\n          ${this.type === 'epaper' ? this.topNavigator() : ''}\n          <div\n            class=\"flex w-full flex-col items-center justify-center ${this\n              .isDark\n              ? 'bg-dark-3'\n              : 'bg-blue-100'}  rounded pt-6 md:pt-8 relative\"\n          >\n            ${this.headerSection(this.type)}\n            ${this.descriptionSection(\n              this.paywallData?.informations?.description ?? []\n            )}\n            ${this.packagesSection(\n              this.paywallData?.packages ?? ({} as Packages)\n            )}\n            ${this.informationPackages()}\n            ${this.swgEnable ? this.separatorLine() : null}\n            ${this.swgEnable\n              ? html`<button\n              class=\"border-2 bg-grey-100 border-grey-100 rounded-lg px-6 shadow-sm flex flex-row py-2 mt-1 mb-4\"\n              id=\"subscribe-with-google\"\n            >\n              <p>Subscribe with</p>\n              <img class=\"pl-2 object-scale-down w-20 pt-0.5\" src=\"https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google.png\" alt=\"subscribe with google\"></img>\n            </button>`\n              : null}\n            ${this.paymentDesktopSection(\n              this.paywallData?.payment?.desktop ?? []\n            )}\n            ${this.paymentMobileSection(\n              this.paywallData?.payment?.mobile ?? []\n            )}\n            ${this.userAction(this.isLogin, this.type)}\n            ${this.sendDataLayeronPaywallBody()}\n          </div>\n          ${this.isExtensionsOpened\n            ? this.paymentMobileExtension(\n                this.paywallData?.payment?.ekstension ?? []\n              )\n            : ''}\n        </div>\n      </div>\n    `\n  }\n}\n"]}