@kompasid/lit-web-components 0.7.7 → 0.7.9

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

@@ -1 +1 @@
-{"version":3,"file":"KompasPaywallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall-body/KompasPaywallBody.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-return-assign */\n\nimport { html, css, LitElement, nothing } 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  PaywallType,\n} from '../kompasid-paywall/types.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { redirectToRegister, redirectToLogin } from '../../utils/cta.js'\n\n@customElement('kompasid-paywall-body')\nexport class KompasIdPaywallBody 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      .z-index-max {\n        z-index: 999999;\n      }\n\n      .font-lora {\n        font-family: 'Lora', 'Georgia', 'serif';\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: Boolean }) isLogin = false\n  @property({ type: String }) type: PaywallType = '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  @property() togglePaywall = () => {}\n\n  /**\n   * State\n   */\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 epaperHost = '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  targetElement!: HTMLElement\n\n  /**\n   * Getter\n   */\n\n  get loginUrl() {\n    return `${this.kompasLoginHost}?next=${encodeURIComponent(\n      this.epaperHost + window.location.pathname\n    )}&loc=hard_paywall`\n  }\n\n  get isDark() {\n    return this.theme === 'dark'\n  }\n\n  get isEntitledForIntroductoryPrice(): boolean {\n    return !this.isLogin || this.tracker_subscription_status === 'IA'\n  }\n\n  /**\n   * Logic Function\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    let source: string\n\n    switch (this.type) {\n      case 'epaper':\n        source = 'epaper'\n        break\n      case 'audio':\n        source = 'news_audio'\n        break\n      default:\n        source = 'article'\n    }\n\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 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 handleClickOutside() {\n    if (this.targetElement.classList.contains('wrapper-body')) {\n      this.togglePaywall()\n    }\n\n    if (this.targetElement.id === 'freeTrialPopup') {\n      this.closeFreeTrialPopup()\n    }\n  }\n\n  private parsePrice(price: string): number {\n    const lowerCasePrice = price.toLowerCase()\n\n    if (lowerCasePrice.startsWith('rp')) {\n      return parseFloat(price.replace(/[^0-9,]/g, ''))\n    }\n\n    return parseFloat(price.replace(/[^0-9.]/g, ''))\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          async () => {\n            subscriptions.showOffers({ isClosable: true })\n            subscriptions.setOnLoginRequest(() => {\n              window.location.href = this.loginUrl\n            })\n            const offers = await subscriptions.getOffers()\n            subscriptions.setOnFlowStarted((callback: any) => {\n              if (callback.flow === 'showOffers') {\n                window.dataLayer.push(this.swgPackageViewedDataLayer(offers))\n              } else if (callback.flow === 'subscribe') {\n                const selectedOfferSkuId = callback.data.skuId\n                const selectedOffer = offers.find(\n                  (offer: any) => offer.skuId === selectedOfferSkuId\n                )\n                window.dataLayer.push(\n                  this.swgSubscribeButtonClicked(\n                    selectedOffer,\n                    offers.indexOf(selectedOffer)\n                  )\n                )\n              }\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.loginUrl\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.epaperHost + 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  constructor() {\n    super()\n    this.handleClickOutside = this.handleClickOutside.bind(this)\n  }\n\n  protected createRenderRoot() {\n    const root = super.createRenderRoot()\n    root.addEventListener(\n      'click',\n      (e: Event) => (this.targetElement = e.target as HTMLElement)\n    )\n    return root\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\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      setTimeout(appendSWGButton, 500)\n    }\n    addGoogleFonts(['pt-sans', 'lora'])\n    document.addEventListener('click', this.handleClickOutside)\n  }\n\n  override async disconnectedCallback() {\n    super.disconnectedCallback()\n    document.removeEventListener('click', this.handleClickOutside)\n  }\n\n  private otherPackagesClicked() {\n    this.sendDataLayerOtherPackagesClicked()\n    this.redirectToSubscriber()\n  }\n\n  private customerServiceClicked() {\n    this.sendDataLayerCustomerServiceClicked()\n    this.redirectToHelpdesk()\n  }\n\n  /**\n   * Data Layer\n   */\n\n  private buildGtmParams(\n    event: string,\n    impressions: Record<string, any>[],\n    index: number = 0\n  ) {\n    const gtmParams: Record<string, any> = {\n      event,\n      impressions: impressions.map((impression, i) => ({\n        paywall_location: this.paywall_location || '',\n        paywall_subscription_package: impression.package,\n        paywall_subscription_id: impression.subscription_id,\n        paywall_subscription_price: this.parsePrice(impression.price),\n        paywall_position: index + i + 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        ...(this.type === 'epaper'\n          ? { epaper_edition: this.tracker_epaper_edition }\n          : {\n              page_type: this.tracker_page_type,\n              content_id: this.tracker_content_id,\n              content_title: this.tracker_content_title,\n              content_categories: this.tracker_content_categories,\n              content_type: this.tracker_content_type,\n            }),\n      })),\n    }\n\n    return gtmParams\n  }\n\n  private generalPaywallDataLayer(event: string): Record<string, any> {\n    const packages = this.paywallData?.packages ?? ({} as Packages)\n\n    const impressions = packages.memberships.map(membership => ({\n      package: membership.package,\n      subscription_id: membership.subscriptionId,\n      price: membership.price.toString(),\n    }))\n\n    return this.buildGtmParams(event, impressions)\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 = this.generalPaywallDataLayer('paywall_viewed')\n    window.dataLayer.push(gtmParams)\n  }\n\n  private sendDataLayerOtherPackagesClicked(): void {\n    const gtmParams = this.generalPaywallDataLayer('other_packages_clicked')\n    window.dataLayer.push(gtmParams)\n  }\n\n  private sendDataLayerCustomerServiceClicked(): void {\n    const gtmParams = this.generalPaywallDataLayer('customer_service_clicked')\n    window.dataLayer.push(gtmParams)\n  }\n\n  private swgPackageViewedDataLayer(data: any): Record<string, any> {\n    const impressions = data.map(\n      (item: {\n        title: string\n        skuId: string\n        price: string\n        introductoryPrice: string\n      }) => ({\n        package: item.title,\n        subscription_id: item.skuId,\n        price: item.introductoryPrice || item.price,\n      })\n    )\n\n    return this.buildGtmParams('subscription_package_viewed', impressions)\n  }\n\n  private swgSubscribeButtonClicked(item: any, index: number) {\n    const gtmParams: any = {\n      event: 'subscribe_button_clicked',\n      paywall_location: this.paywall_location || '',\n      paywall_subscription_package: item.title,\n      paywall_subscription_id: item.skuId,\n      paywall_subscription_price: this.parsePrice(\n        item.introductoryPrice || item.price\n      ),\n      paywall_position: index + 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    if (this.type === 'epaper') {\n      gtmParams.epaper_edition = this.tracker_epaper_edition\n    } else {\n      gtmParams.page_type = this.tracker_page_type\n      gtmParams.content_id = this.tracker_content_id\n      gtmParams.content_title = this.tracker_content_title\n      gtmParams.content_categories = this.tracker_content_categories\n      gtmParams.content_type = this.tracker_content_type\n    }\n\n    return gtmParams\n  }\n\n  /**\n   * Component\n   */\n\n  private headerSection(type: PaywallType, title: string) {\n    let buttonContent\n    const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'\n    const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'\n\n    if (type === 'epaper') {\n      buttonContent = html` <button\n        @click=${this.redirectToPrevUrl}\n        class=\"hidden md:block w-8 h-8 pl-4 ${textColorClass}\"\n      >\n        ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}\n      </button>`\n    } else if (type === 'audio') {\n      buttonContent = html` <button\n        @click=${this.togglePaywall}\n        class=\"hidden md:block w-8 h-8 pl-4 ${textColorClass}\"\n      >\n        ${unsafeSVG(getFontAwesomeIcon('fas', 'xmark', 24, 24))}\n      </button>`\n    } else {\n      buttonContent = nothing\n    }\n\n    const headerClass = `text-base flex justify-center self-center md:block md:text-xl ${buttonTextColorClass} text-center font-lora font-bold tracking-wide md:tracking-normal max-w-xs sm:max-w-lg md:w-full md:max-w-full ${\n      type === 'audio' && 'sm:px-16 md:px-20'\n    }`\n\n    return html`\n      <div class=\"flex w-full items-start justify-center\">\n        ${buttonContent}\n        <h4 class=${headerClass}>${title}</h4>\n        ${type === 'epaper' || type === 'audio'\n          ? html`<div class=\"w-10 hidden md:flex\"></div>`\n          : nothing}\n      </div>\n    `\n  }\n\n  private descriptionSection(data: Array<string>) {\n    const spaceYClass =\n      this.type === 'audio' ? 'space-y-2 md:space-y-1' : 'space-y-2'\n    const textColorClass = this.isDark ? 'text-green-400' : 'text-green-500'\n    const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'\n\n    return html` <div class=\" flex flex-col items-center\">\n      <div class=\"flex flex-col md:max-w-[464px] mt-2.5 md:mt-3 ${spaceYClass}\">\n        ${data.map(\n          item =>\n            html`\n              <div class=\"flex items-center\">\n                <div class=\"${textColorClass}\">\n                  ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 12, 12))}\n                </div>\n                <h6\n                  class=\"text-xs md:text-base ml-0.5 md:ml-1 ${buttonTextColorClass}\"\n                >\n                  ${item}\n                </h6>\n              </div>\n            `\n        )}\n      </div>\n    </div>`\n  }\n\n  private informationPackages() {\n    const marginTopClass = this.type === 'audio' ? 'mt-4 md:mt-2' : 'mt-4'\n    const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'\n\n    return html` <div class=\"flex justify-center ${marginTopClass}\">\n      <button\n        @click=${this.otherPackagesClicked}\n        class=\"text-sm md:text-base font-bold underline ${textColorClass}\"\n      >\n        Lihat Paket Lainnya\n      </button>\n    </div>`\n  }\n\n  private epaperRegistrationSection() {\n    const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'\n    const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'\n\n    return html`\n      <div>\n        <button\n          @click=${() =>\n            redirectToLogin({\n              loc: 'hard_paywall',\n              next: this.epaperHost + window.location.pathname,\n            })}\n          class=\"text-sm md:text-base font-bold underline ${textColorClass}\"\n        >\n          Masuk\n        </button>\n        <span class=\"${buttonTextColorClass}\">jika sudah berlangganan.</span>\n      </div>\n    `\n  }\n\n  private regulerRegistrationSection() {\n    const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'\n    const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'\n\n    return html`\n      <div class=\"flex flex-col items-center justify-center\">\n        <div>\n          <button\n            @click=${() => redirectToRegister('hard_paywall')}\n            class=\"text-sm md:text-base font-bold underline ${textColorClass}\"\n          >\n            Daftar\n          </button>\n          <span class=\"${buttonTextColorClass}\"\n            >untuk kuota artikel gratis</span\n          >\n        </div>\n        <div>\n          <span class=\"${buttonTextColorClass}\">atau</span>\n          <button\n            @click=${() => redirectToLogin({ loc: 'hard_paywall' })}\n            class=\"text-sm md:text-base font-bold underline ${textColorClass}\"\n          >\n            Masuk\n          </button>\n          <span class=\"${buttonTextColorClass}\">jika sudah punya akun.</span>\n        </div>\n      </div>\n    `\n  }\n\n  private registrationSection(type: PaywallType) {\n    return type === 'epaper'\n      ? this.epaperRegistrationSection()\n      : this.regulerRegistrationSection()\n  }\n\n  private paymentMobileExtension(data: Array<PaymentImage>) {\n    return html`\n      <div\n        class=\"w-full max-w-xs mb-1 ml-8 md:hidden absolute px-4 ${this.isDark\n          ? '-bottom-6'\n          : 'bottom-0'}\"\n      >\n        <div\n          class=\"w-full rounded p-3 max-w-xs ${this.isDark\n            ? 'bg-dark-6 border-dark-6'\n            : 'bg-white border-white'}\"\n        >\n          <svg\n            class=\"right-0 h-4 mr-10 -mt-7 z-0 transform rotate-180 absolute ${this\n              .isDark\n              ? 'text-dark-6 border-dark-6'\n              : 'text-white border-white '}\"\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    const { isDark } = this\n    const isAudio = this.type === 'audio'\n\n    const containerClass = `flex flex-wrap justify-between h-[68px] items-center rounded-lg md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-2.5${\n      isDark ? ' bg-grey-600' : ' bg-white'\n    }${isAudio ? ' md:mt-3' : ' md:mt-4'} border border-yellow-400 relative`\n\n    const textColorClass = isDark ? 'text-dark-7' : 'text-grey-600'\n\n    const buttonClass = `h-8 rounded mr-4 flex items-center${\n      isDark ? ' bg-green-300 border border-green-400' : ' bg-green-500'\n    }`\n\n    const buttonTextClass = `text-xs md:text-sm font-bold py-2 px-4${\n      isDark ? ' text-black' : ' text-white'\n    }`\n\n    return html`\n      <div class=\"${containerClass}\">\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              ${formatRupiah(product.price)}\n            </h5>\n            <h6 class=\"text-xs md:text-base font-bold pl-1 ${textColorClass}\">\n              / ${product.periode}\n            </h6>\n          </div>\n          ${product.savingPrice\n            ? html`\n                <div class=\"flex items-center\">\n                  <p class=\"text-xs ${textColorClass}\">\n                    hanya\n                    <span class=\"text-orange-400\"\n                      >${formatRupiah(product.savingPrice)}</span\n                    >\n                    / bulan\n                  </p>\n                </div>\n              `\n            : nothing}\n        </div>\n        <button\n          class=\"${buttonClass}\"\n          @click=${() =>\n            this.redirectToCheckout(\n              product.url,\n              product.package,\n              product.subscriptionId,\n              product.price,\n              product.position\n            )}\n        >\n          <h6 class=\"${buttonTextClass}\">Langganan</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 class=\"text-grey-600\">Harga Terbaik</b>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private secondaryPackages(product: Product) {\n    const { isDark } = this\n    const isAudio = this.type === 'audio'\n\n    const containerClass = `flex flex-wrap items-center justify-between py-3 px-4 rounded-lg md:mx-0 w-full h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3${\n      isDark ? ' bg-grey-600' : ' bg-white'\n    }${isAudio ? ' md:mt-2.5' : ' md:mt-4'}`\n\n    const textColorClass = isDark ? 'text-dark-7' : 'text-grey-600'\n\n    const buttonClass = `h-8 rounded border border-green-500${\n      isDark ? ' text-green-300' : ' bg-white text-green-500'\n    }`\n\n    const buttonTextClass = `text-xs md:text-sm font-bold px-4${\n      isDark ? ' text-green-300' : ' text-green-500'\n    }`\n\n    return html`\n      <div class=\"${containerClass}\">\n        <div class=\"flex flex-col\">\n          <div class=\"flex items-center\">\n            <h5 class=\"text-base md:text-lg font-bold text-orange-400\">\n              ${formatRupiah(product.price)}\n            </h5>\n            <h6 class=\"text-xs md:text-base font-bold pl-1 ${textColorClass}\">\n              / ${product.periode}\n            </h6>\n          </div>\n          ${product.savingPrice\n            ? html`\n                <div class=\"flex items-center\">\n                  <p class=\"text-xs ${textColorClass}\">\n                    hanya\n                    <span class=\"text-orange-400\"\n                      >${formatRupiah(product.savingPrice)}</span\n                    >\n                    / bulan\n                  </p>\n                </div>\n              `\n            : nothing}\n        </div>\n        <button\n          @click=${() =>\n            this.redirectToCheckout(\n              product.url,\n              product.package,\n              product.subscriptionId,\n              product.price,\n              product.position\n            )}\n          class=\"${buttonClass}\"\n        >\n          <h6 class=\"${buttonTextClass}\">Langganan</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 md:mt-2 px-4\">\n        ${data.memberships.map(item =>\n          item.isHighlight\n            ? this.primaryPackages(item)\n            : this.secondaryPackages(item)\n        )}\n        ${this.freeTrialPackageSection()} ${this.freeTrialPopUp()}\n        ${this.swgEnable ? this.swgPackageSection() : nothing}\n      </div>\n    `\n  }\n\n  private topNavigator(type: PaywallType) {\n    let icon: string\n    let buttonText: string\n    let clickAction: Function\n\n    if (type === 'audio') {\n      icon = getFontAwesomeIcon('fas', 'xmark')\n      buttonText = 'Tutup'\n      clickAction = this.togglePaywall.bind(this)\n    } else {\n      icon = getFontAwesomeIcon('fas', 'arrow-left')\n      buttonText = 'Kembali'\n      clickAction = this.redirectToPrevUrl.bind(this)\n    }\n\n    return html`\n      <div class=\"flex md:hidden w-full pb-4\">\n        <button\n          @click=${clickAction}\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(icon)}\n          </div>\n          ${buttonText}\n        </button>\n      </div>\n    `\n  }\n\n  private helpDesk() {\n    const textColorClass = this.isDark ? 'text-dark-7' : 'text-white'\n\n    return html`\n      <div class=\"self-center text-xs md:text-sm ${textColorClass}\">\n        Butuh bantuan? Hubungi\n        <button\n          @click=${this.customerServiceClicked}\n          class=\"font-bold underline\"\n        >\n          Layanan Pelanggan.\n        </button>\n      </div>\n    `\n  }\n\n  private userAction() {\n    const isAudio = this.type === 'audio'\n    const paddingClass = isAudio ? 'md:py-3.5' : 'md:py-6'\n    const marginClass = isAudio ? 'md:mt-4' : 'md:mt-8'\n    const backgroundClass = this.isDark ? 'bg-dark-4' : 'bg-blue-600'\n\n    return html`\n      <div\n        class=\"flex py-5 px-8 w-full justify-evenly rounded-b-xl mt-6 relative ${paddingClass} ${marginClass} ${backgroundClass}\"\n      >\n        ${this.helpDesk()}\n      </div>\n    `\n  }\n\n  private introductoryPrice() {\n    const textColorClass = this.isDark ? 'text-dark-7' : 'text-grey-600'\n    return html` <div\n      class=\"flex space-x-1 h-5 md:h-max overflow-hidden md:flex-col md:space-x-0 items-center md:items-start md:justify-center\"\n    >\n      <h5 class=\"text-base md:text-lg font-bold text-orange-400\">Rp 10.000</h5>\n      <p class=\"text-xs ${textColorClass}\">untuk 1 bulan pertama</p>\n    </div>`\n  }\n\n  private swgRegonText() {\n    const textColorClass = this.isDark ? 'text-dark-7' : 'text-grey-600'\n    return html`<p class=\"text-xs leading-4 md:max-w-[137px] ${textColorClass}\">\n      Berlangganan lebih mudah dengan Google\n    </p>`\n  }\n\n  private swgPackageSection() {\n    const { isDark } = this\n    const isAudio = this.type === 'audio'\n\n    const containerClass = `flex flex-col space-y-2 md:space-x-2 md:space-y-0 md:flex-row justify-between items-center py-3 px-4 rounded-lg md:mx-0 w-full h-[76px] md:h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3${\n      isDark ? ' bg-grey-600' : ' bg-white'\n    }${isAudio ? ' md:mt-2.5' : ' md:mt-4'}`\n\n    const buttonClass = `border space-x-2 justify-center border-grey-400 rounded-md px-[22px] md:px-6 shadow-sm flex h-max flex-row flex-nowrap py-[5.6px] md:py-1.5 items-center${\n      isDark ? ' bg-grey-600' : ' bg-grey-100 border-grey-100'\n    }`\n\n    const textColorClass = isDark ? 'text-dark-7' : 'text-grey-500'\n\n    const googleImageSrc = isDark\n      ? 'https://cdn-www.kompas.id/paywall-asset/google-white.png'\n      : 'https://cdn-www.kompas.id/paywall-asset/google.png'\n\n    return html`\n      <div class=\"${containerClass}\">\n        ${this.isEntitledForIntroductoryPrice\n          ? this.introductoryPrice()\n          : this.swgRegonText()}\n        <div>\n          <button class=\"${buttonClass}\" id=\"subscribe-with-google\">\n            <p\n              class=\"text-[11px] md:text-xs whitespace-nowrap w-full ${textColorClass}\"\n            >\n              Subscribe with\n            </p>\n            <img\n              class=\"object-scale-down h-[17px] md:h-5\"\n              src=${googleImageSrc}\n              alt=\"subscribe with google\"\n            />\n          </button>\n        </div>\n      </div>\n    `\n  }\n\n  private openFreeTrialPopup() {\n    const popup = this.shadowRoot?.getElementById('freeTrialPopup')\n    popup?.classList.remove('hidden')\n  }\n\n  private closeFreeTrialPopup() {\n    const popup = this.shadowRoot?.getElementById('freeTrialPopup')\n    popup?.classList.add('hidden')\n  }\n\n  private freeTrialPopUp() {\n    const { isDark } = this\n\n    const googlePlayBadgeSrc = isDark\n      ? 'https://cdn-www.kompas.id/web-component/Button_Download%20Google%20Play_Dark%20Mode.svg'\n      : 'https://cdn-www.kompas.id/web-component/Button_Download%20Google%20Play_Light%20Mode.svg'\n\n    const appStoreBadgeSrc = isDark\n      ? 'https://cdn-www.kompas.id/web-component/Button_Download%20App%20Store_Dark%20Mode.svg'\n      : 'https://cdn-www.kompas.id/web-component/Button_Download%20App%20Store_Light%20Mode.svg'\n\n    return html`\n      <div\n        id=\"freeTrialPopup\"\n        class=\"fixed w-full h-full inset-0 flex justify-center items-center z-50 bg-black bg-opacity-75 hidden\"\n      >\n        <div\n          class=\"rounded w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 2xl:w-1/4 p-6 text-center ${isDark\n            ? 'bg-dark-4'\n            : 'bg-white'}\"\n        >\n          <div class=\"w-full flex justify-end px-2\">\n            <button\n              @click=${this.closeFreeTrialPopup}\n              class=\"w-8 h-8 pl-4 ${isDark ? 'text-grey-300' : 'text-grey-400'}\"\n            >\n              ${unsafeSVG(getFontAwesomeIcon('fas', 'xmark', 24, 24))}\n            </button>\n          </div>\n          <div class=\"w-full flex justify-center\">\n            <div class=\"w-3/4 lg:w-1/2\">\n              <img\n                src=\"https://cdn-www.kompas.id/web-component/kompas-free-trial.png\"\n                alt=\"Free Trial\"\n              />\n            </div>\n          </div>\n          <p\n            class=\"font-bold text-lg mt-4 ${isDark\n              ? 'text-white'\n              : 'text-grey-600'}\"\n          >\n            Coba Gratis Kompas.id di Aplikasi\n          </p>\n          <div\n            class=\"hidden lg:block lg:flex flex rounded mt-4 px-8 py-4 items-center ${isDark\n              ? 'bg-dark-3 border border-dark-9'\n              : 'bg-white border border-grey-300'}\"\n          >\n            <div class=\"w-1/3 flex mr-6\">\n              <img\n                src=\"https://cdn-www.kompas.id/web-component/free-trial-qr-code.png\"\n                alt=\"QR Code Deep Link\"\n              />\n            </div>\n            <div\n              class=\"w-2/3 text-base text-left ${isDark\n                ? 'text-dark-7'\n                : 'text-grey-600'}\"\n            >\n              Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR\n              dengan ponsel atau tablet untuk mengunduh aplikasi.\n            </div>\n          </div>\n          <div\n            class=\"text-base text-center lg:hidden px-2 md:px-8 ${isDark\n              ? 'text-dark-7'\n              : 'text-grey-600'}\"\n          >\n            Dapatkan akses gratis selama 3 hari ke konten dan fitur premium\n            Kompas.id di aplikasi.\n          </div>\n          <div class=\"lg:flex flex justify-center mt-4 hidden lg:block gap-4\">\n            <a\n              href=\"https://play.google.com/store/apps/details?id=id.kompas.app\"\n              target=\"_blank\"\n              ><img src=\"${googlePlayBadgeSrc}\" alt=\"Google Play Badge\"\n            /></a>\n            <a\n              href=\"https://apps.apple.com/id/app/kompas-id/id1242195037?l=id\"\n              target=\"_blank\"\n              ><img src=\"${appStoreBadgeSrc}\" alt=\"iOS App Store Badge\"\n            /></a>\n          </div>\n          <button\n            onclick=\"window.open('https://app.komp.as/langganan', '_blank')\"\n            class=\"h-12 rounded-md mt-4 flex w-full items-center justify-center lg:hidden ${isDark\n              ? 'bg-green-300'\n              : 'bg-green-500'}\"\n          >\n            <h6 class=\"font-bold p-4 ${isDark ? 'text-dark-5' : 'text-white'}\">\n              Unduh Sekarang\n            </h6>\n          </button>\n        </div>\n      </div>\n    `\n  }\n\n  private freeTrialPackageSection() {\n    const packages = this.paywallData?.packages ?? ({} as Packages)\n\n    if (packages.freeTrial) {\n      return html`\n        <div\n          class=\"flex flex-wrap items-center justify-between py-3 px-4 rounded-lg md:mx-0 w-full h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4 ${this\n            .isDark\n            ? 'bg-grey-600'\n            : 'bg-white'}\"\n        >\n          <div class=\"flex flex-col\">\n            <div class=\"flex items-center\">\n              <h5 class=\"text-base md:text-lg font-bold text-orange-400\">\n                ${formatRupiah(0)}\n              </h5>\n            </div>\n            <div class=\"flex items-center\">\n              <p\n                class=\"text-xs ${this.isDark ? 'text-dark-7' : 'text-grey-600'}\"\n              >\n                ${packages.freeTrial}\n              </p>\n            </div>\n          </div>\n          <button\n            @click=${this.openFreeTrialPopup}\n            class=\"h-8 border border-green-500 rounded ${!this.isDark &&\n            'bg-white'}\"\n          >\n            <h6\n              class=\"text-xs md:text-sm font-bold px-4 ${this.isDark\n                ? 'text-green-300'\n                : 'text-green-500'}\"\n            >\n              Coba Gratis\n            </h6>\n          </button>\n        </div>\n      `\n    }\n    return nothing\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    const isEpaper = this.type === 'epaper'\n    const isAudio = this.type === 'audio'\n    const { isDark } = this\n    const { isLogin } = this\n\n    const wrapperBodyClass = `wrapper-body\n      ${isEpaper ? 'bg-transparent mx-2' : ''}\n      ${\n        isAudio\n          ? 'fixed w-full h-full inset-0 flex justify-center items-center z-index-max bg-black bg-opacity-75'\n          : ''\n      }`\n      .trim()\n      .replace(/\\s+/g, ' ')\n\n    const containerClass = `flex w-full flex-col items-center justify-center rounded-xl pt-6 relative ${\n      isDark ? 'bg-dark-3' : 'bg-blue-100'\n    } ${isAudio ? 'md:pt-5' : 'md:pt-8'}`\n\n    const borderClass = isDark ? 'border-dark-8' : 'border-blue-200'\n\n    return html`\n      <div class=\"${wrapperBodyClass}\">\n        <div\n          class=\"flex flex-col justify-center items-center w-full max-w-screen-sm my-5 px-2 relative\"\n        >\n          ${isEpaper || isAudio ? this.topNavigator(this.type) : nothing}\n          <div class=\"${containerClass}\">\n            ${this.headerSection(\n              this.type,\n              this.paywallData?.informations?.title ?? ''\n            )}\n            ${this.descriptionSection(\n              this.paywallData?.informations?.description ?? []\n            )}\n            ${this.packagesSection(\n              this.paywallData?.packages ?? ({} as Packages)\n            )}\n            ${this.informationPackages()}\n            ${!isLogin\n              ? html`\n                  <div\n                    class=\"border-b w-1/5 flex justify-center ${borderClass} ${isAudio\n                      ? 'my-4 md:my-3'\n                      : 'my-4'}\"\n                  ></div>\n                  ${this.registrationSection(this.type)}\n                `\n              : nothing}\n            ${this.userAction()} ${this.sendDataLayeronPaywallBody()}\n          </div>\n          ${this.isExtensionsOpened\n            ? this.paymentMobileExtension(\n                this.paywallData?.payment?.ekstension ?? []\n              )\n            : nothing}\n        </div>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasPaywallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall-body/KompasPaywallBody.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-return-assign */\n\nimport { html, css, LitElement, nothing } 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  PaywallType,\n} from '../kompasid-paywall/types.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { redirectToRegister, redirectToLogin } from '../../utils/cta.js'\n\n@customElement('kompasid-paywall-body')\nexport class KompasIdPaywallBody 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      .z-index-max {\n        z-index: 999999;\n      }\n\n      .font-lora {\n        font-family: 'Lora', 'Georgia', 'serif';\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: Boolean }) isLogin = false\n  @property({ type: String }) type: PaywallType = '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  @property() togglePaywall = () => {}\n\n  /**\n   * State\n   */\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 epaperHost = '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  _packages!: Packages\n  buttonElement!: HTMLButtonElement\n  targetElement!: HTMLElement\n\n  /**\n   * Getter\n   */\n\n  get loginUrl() {\n    return `${this.kompasLoginHost}?next=${encodeURIComponent(\n      this.epaperHost + window.location.pathname\n    )}&loc=hard_paywall`\n  }\n\n  get isDark() {\n    return this.theme === 'dark'\n  }\n\n  get isEntitledForIntroductoryPrice(): boolean {\n    return !this.isLogin || this.tracker_subscription_status === 'IA'\n  }\n\n  get packages(): Packages {\n    return this._packages\n  }\n\n  /**\n   * Logic Function\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    let source: string\n\n    switch (this.type) {\n      case 'epaper':\n        source = 'epaper'\n        break\n      case 'audio':\n        source = 'news_audio'\n        break\n      default:\n        source = 'article'\n    }\n\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 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 handleClickOutside() {\n    if (this.targetElement?.classList.contains('wrapper-body')) {\n      this.togglePaywall()\n    }\n\n    if (this.targetElement?.id === 'freeTrialPopup') {\n      this.closeFreeTrialPopup()\n    }\n  }\n\n  private parsePrice(price: string): number {\n    const lowerCasePrice = price.toLowerCase()\n\n    if (lowerCasePrice.startsWith('rp')) {\n      return parseFloat(price.replace(/[^0-9,]/g, ''))\n    }\n\n    return parseFloat(price.replace(/[^0-9.]/g, ''))\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          async () => {\n            subscriptions.showOffers({ isClosable: true })\n            subscriptions.setOnLoginRequest(() => {\n              window.location.href = this.loginUrl\n            })\n            const offers = await subscriptions.getOffers()\n            subscriptions.setOnFlowStarted((callback: any) => {\n              if (callback.flow === 'showOffers') {\n                window.dataLayer.push(this.swgPackageViewedDataLayer(offers))\n              } else if (callback.flow === 'subscribe') {\n                const selectedOfferSkuId = callback.data.skuId\n                const selectedOffer = offers.find(\n                  (offer: any) => offer.skuId === selectedOfferSkuId\n                )\n                window.dataLayer.push(\n                  this.swgSubscribeButtonClicked(\n                    selectedOffer,\n                    offers.indexOf(selectedOffer)\n                  )\n                )\n              }\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.loginUrl\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.epaperHost + 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  constructor() {\n    super()\n    this.handleClickOutside = this.handleClickOutside.bind(this)\n  }\n\n  protected createRenderRoot() {\n    const root = super.createRenderRoot()\n    root.addEventListener(\n      'click',\n      (e: Event) => (this.targetElement = e.target as HTMLElement)\n    )\n    return root\n  }\n\n  override async connectedCallback() {\n    this._packages = this.paywallData?.packages ?? ({} as Packages)\n\n    super.connectedCallback()\n    await this.updateComplete\n\n    if (this.packages.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      setTimeout(appendSWGButton, 500)\n    }\n    addGoogleFonts(['pt-sans', 'lora'])\n    document.addEventListener('click', this.handleClickOutside)\n  }\n\n  override async disconnectedCallback() {\n    super.disconnectedCallback()\n    document.removeEventListener('click', this.handleClickOutside)\n  }\n\n  private otherPackagesClicked() {\n    this.sendDataLayerOtherPackagesClicked()\n    this.redirectToSubscriber()\n  }\n\n  private customerServiceClicked() {\n    this.sendDataLayerCustomerServiceClicked()\n    this.redirectToHelpdesk()\n  }\n\n  /**\n   * Data Layer\n   */\n\n  private buildGtmParams(\n    event: string,\n    impressions: Record<string, any>[],\n    index: number = 0\n  ) {\n    const gtmParams: Record<string, any> = {\n      event,\n      impressions: impressions.map((impression, i) => ({\n        paywall_location: this.paywall_location || '',\n        paywall_subscription_package: impression.package,\n        paywall_subscription_id: impression.subscription_id,\n        paywall_subscription_price: this.parsePrice(impression.price),\n        paywall_position: index + i + 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        ...(this.type === 'epaper'\n          ? { epaper_edition: this.tracker_epaper_edition }\n          : {\n              page_type: this.tracker_page_type,\n              content_id: this.tracker_content_id,\n              content_title: this.tracker_content_title,\n              content_categories: this.tracker_content_categories,\n              content_type: this.tracker_content_type,\n            }),\n      })),\n    }\n\n    return gtmParams\n  }\n\n  private generalPaywallDataLayer(event: string): Record<string, any> {\n    const packages = this.paywallData?.packages ?? ({} as Packages)\n\n    const impressions = packages.memberships.map(membership => ({\n      package: membership.package,\n      subscription_id: membership.subscriptionId,\n      price: membership.price.toString(),\n    }))\n\n    return this.buildGtmParams(event, impressions)\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 = this.generalPaywallDataLayer('paywall_viewed')\n    window.dataLayer.push(gtmParams)\n  }\n\n  private sendDataLayerOtherPackagesClicked(): void {\n    const gtmParams = this.generalPaywallDataLayer('other_packages_clicked')\n    window.dataLayer.push(gtmParams)\n  }\n\n  private sendDataLayerCustomerServiceClicked(): void {\n    const gtmParams = this.generalPaywallDataLayer('customer_service_clicked')\n    window.dataLayer.push(gtmParams)\n  }\n\n  private swgPackageViewedDataLayer(data: any): Record<string, any> {\n    const impressions = data.map(\n      (item: {\n        title: string\n        skuId: string\n        price: string\n        introductoryPrice: string\n      }) => ({\n        package: item.title,\n        subscription_id: item.skuId,\n        price: item.introductoryPrice || item.price,\n      })\n    )\n\n    return this.buildGtmParams('subscription_package_viewed', impressions)\n  }\n\n  private swgSubscribeButtonClicked(item: any, index: number) {\n    const gtmParams: any = {\n      event: 'subscribe_button_clicked',\n      paywall_location: this.paywall_location || '',\n      paywall_subscription_package: item.title,\n      paywall_subscription_id: item.skuId,\n      paywall_subscription_price: this.parsePrice(\n        item.introductoryPrice || item.price\n      ),\n      paywall_position: index + 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    if (this.type === 'epaper') {\n      gtmParams.epaper_edition = this.tracker_epaper_edition\n    } else {\n      gtmParams.page_type = this.tracker_page_type\n      gtmParams.content_id = this.tracker_content_id\n      gtmParams.content_title = this.tracker_content_title\n      gtmParams.content_categories = this.tracker_content_categories\n      gtmParams.content_type = this.tracker_content_type\n    }\n\n    return gtmParams\n  }\n\n  /**\n   * Component\n   */\n\n  private headerSection(type: PaywallType, title: string) {\n    let buttonContent\n    const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'\n    const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'\n\n    if (type === 'epaper') {\n      buttonContent = html` <button\n        @click=${this.redirectToPrevUrl}\n        class=\"hidden md:block w-8 h-8 pl-4 ${textColorClass}\"\n      >\n        ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}\n      </button>`\n    } else if (type === 'audio') {\n      buttonContent = html` <button\n        @click=${this.togglePaywall}\n        class=\"hidden md:block w-8 h-8 pl-4 ${textColorClass}\"\n      >\n        ${unsafeSVG(getFontAwesomeIcon('fas', 'xmark', 24, 24))}\n      </button>`\n    } else {\n      buttonContent = nothing\n    }\n\n    const headerClass = `text-base flex justify-center self-center md:block md:text-xl ${buttonTextColorClass} text-center font-lora font-bold tracking-wide md:tracking-normal max-w-xs sm:max-w-lg md:w-full md:max-w-full ${\n      type === 'audio' && 'sm:px-16 md:px-20'\n    }`\n\n    return html`\n      <div class=\"flex w-full items-start justify-center\">\n        ${buttonContent}\n        <h4 class=${headerClass}>${title}</h4>\n        ${type === 'epaper' || type === 'audio'\n          ? html`<div class=\"w-10 hidden md:flex\"></div>`\n          : nothing}\n      </div>\n    `\n  }\n\n  private descriptionSection(data: Array<string>) {\n    const spaceYClass =\n      this.type === 'audio' ? 'space-y-2 md:space-y-1' : 'space-y-2'\n    const textColorClass = this.isDark ? 'text-green-400' : 'text-green-500'\n    const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'\n\n    return html` <div class=\" flex flex-col items-center\">\n      <div class=\"flex flex-col md:max-w-[464px] mt-2.5 md:mt-3 ${spaceYClass}\">\n        ${data.map(\n          item =>\n            html`\n              <div class=\"flex items-center\">\n                <div class=\"${textColorClass}\">\n                  ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 12, 12))}\n                </div>\n                <h6\n                  class=\"text-xs md:text-base ml-0.5 md:ml-1 ${buttonTextColorClass}\"\n                >\n                  ${item}\n                </h6>\n              </div>\n            `\n        )}\n      </div>\n    </div>`\n  }\n\n  private informationPackages() {\n    const marginTopClass = this.type === 'audio' ? 'mt-4 md:mt-2' : 'mt-4'\n    const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'\n\n    return html` <div class=\"flex justify-center ${marginTopClass}\">\n      <button\n        @click=${this.otherPackagesClicked}\n        class=\"text-sm md:text-base font-bold underline ${textColorClass}\"\n      >\n        Lihat Paket Lainnya\n      </button>\n    </div>`\n  }\n\n  private epaperRegistrationSection() {\n    const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'\n    const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'\n\n    return html`\n      <div>\n        <button\n          @click=${() =>\n            redirectToLogin({\n              loc: 'hard_paywall',\n              next: this.epaperHost + window.location.pathname,\n            })}\n          class=\"text-sm md:text-base font-bold underline ${textColorClass}\"\n        >\n          Masuk\n        </button>\n        <span class=\"${buttonTextColorClass}\">jika sudah berlangganan.</span>\n      </div>\n    `\n  }\n\n  private regulerRegistrationSection() {\n    const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'\n    const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'\n\n    return html`\n      <div class=\"flex flex-col items-center justify-center\">\n        <div>\n          <button\n            @click=${() => redirectToRegister('hard_paywall')}\n            class=\"text-sm md:text-base font-bold underline ${textColorClass}\"\n          >\n            Daftar\n          </button>\n          <span class=\"${buttonTextColorClass}\"\n            >untuk kuota artikel gratis</span\n          >\n        </div>\n        <div>\n          <span class=\"${buttonTextColorClass}\">atau</span>\n          <button\n            @click=${() => redirectToLogin({ loc: 'hard_paywall' })}\n            class=\"text-sm md:text-base font-bold underline ${textColorClass}\"\n          >\n            Masuk\n          </button>\n          <span class=\"${buttonTextColorClass}\">jika sudah punya akun.</span>\n        </div>\n      </div>\n    `\n  }\n\n  private registrationSection(type: PaywallType) {\n    return type === 'epaper'\n      ? this.epaperRegistrationSection()\n      : this.regulerRegistrationSection()\n  }\n\n  private paymentMobileExtension(data: Array<PaymentImage>) {\n    return html`\n      <div\n        class=\"w-full max-w-xs mb-1 ml-8 md:hidden absolute px-4 ${this.isDark\n          ? '-bottom-6'\n          : 'bottom-0'}\"\n      >\n        <div\n          class=\"w-full rounded p-3 max-w-xs ${this.isDark\n            ? 'bg-dark-6 border-dark-6'\n            : 'bg-white border-white'}\"\n        >\n          <svg\n            class=\"right-0 h-4 mr-10 -mt-7 z-0 transform rotate-180 absolute ${this\n              .isDark\n              ? 'text-dark-6 border-dark-6'\n              : 'text-white border-white '}\"\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    const { isDark } = this\n    const isAudio = this.type === 'audio'\n\n    const containerClass = `flex flex-wrap justify-between h-[68px] items-center rounded-lg md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-2.5${\n      isDark ? ' bg-grey-600' : ' bg-white'\n    }${isAudio ? ' md:mt-3' : ' md:mt-4'} border border-yellow-400 relative`\n\n    const textColorClass = isDark ? 'text-dark-7' : 'text-grey-600'\n\n    const buttonClass = `h-8 rounded mr-4 flex items-center${\n      isDark ? ' bg-green-300 border border-green-400' : ' bg-green-500'\n    }`\n\n    const buttonTextClass = `text-xs md:text-sm font-bold py-2 px-4${\n      isDark ? ' text-black' : ' text-white'\n    }`\n\n    return html`\n      <div class=\"${containerClass}\">\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              ${formatRupiah(product.price)}\n            </h5>\n            <h6 class=\"text-xs md:text-base font-bold pl-1 ${textColorClass}\">\n              / ${product.periode}\n            </h6>\n          </div>\n          ${product.savingPrice\n            ? html`\n                <div class=\"flex items-center\">\n                  <p class=\"text-xs ${textColorClass}\">\n                    hanya\n                    <span class=\"text-orange-400\"\n                      >${formatRupiah(product.savingPrice)}</span\n                    >\n                    / bulan\n                  </p>\n                </div>\n              `\n            : nothing}\n        </div>\n        <button\n          class=\"${buttonClass}\"\n          @click=${() =>\n            this.redirectToCheckout(\n              product.url,\n              product.package,\n              product.subscriptionId,\n              product.price,\n              product.position\n            )}\n        >\n          <h6 class=\"${buttonTextClass}\">Langganan</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 class=\"text-grey-600\">Harga Terbaik</b>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private secondaryPackages(product: Product) {\n    const { isDark } = this\n    const isAudio = this.type === 'audio'\n\n    const containerClass = `flex flex-wrap items-center justify-between py-3 px-4 rounded-lg md:mx-0 w-full h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3${\n      isDark ? ' bg-grey-600' : ' bg-white'\n    }${isAudio ? ' md:mt-2.5' : ' md:mt-4'}`\n\n    const textColorClass = isDark ? 'text-dark-7' : 'text-grey-600'\n\n    const buttonClass = `h-8 rounded border border-green-500${\n      isDark ? ' text-green-300' : ' bg-white text-green-500'\n    }`\n\n    const buttonTextClass = `text-xs md:text-sm font-bold px-4${\n      isDark ? ' text-green-300' : ' text-green-500'\n    }`\n\n    return html`\n      <div class=\"${containerClass}\">\n        <div class=\"flex flex-col\">\n          <div class=\"flex items-center\">\n            <h5 class=\"text-base md:text-lg font-bold text-orange-400\">\n              ${formatRupiah(product.price)}\n            </h5>\n            <h6 class=\"text-xs md:text-base font-bold pl-1 ${textColorClass}\">\n              / ${product.periode}\n            </h6>\n          </div>\n          ${product.savingPrice\n            ? html`\n                <div class=\"flex items-center\">\n                  <p class=\"text-xs ${textColorClass}\">\n                    hanya\n                    <span class=\"text-orange-400\"\n                      >${formatRupiah(product.savingPrice)}</span\n                    >\n                    / bulan\n                  </p>\n                </div>\n              `\n            : nothing}\n        </div>\n        <button\n          @click=${() =>\n            this.redirectToCheckout(\n              product.url,\n              product.package,\n              product.subscriptionId,\n              product.price,\n              product.position\n            )}\n          class=\"${buttonClass}\"\n        >\n          <h6 class=\"${buttonTextClass}\">Langganan</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 md:mt-2 px-4\">\n        ${data.memberships.map(item =>\n          item.isHighlight\n            ? this.primaryPackages(item)\n            : this.secondaryPackages(item)\n        )}\n        ${this.freeTrialPackageSection()} ${this.freeTrialPopUp()}\n        ${this.packages.swgEnable ? this.swgPackageSection() : nothing}\n      </div>\n    `\n  }\n\n  private topNavigator(type: PaywallType) {\n    let icon: string\n    let buttonText: string\n    let clickAction: Function\n\n    if (type === 'audio') {\n      icon = getFontAwesomeIcon('fas', 'xmark')\n      buttonText = 'Tutup'\n      clickAction = this.togglePaywall.bind(this)\n    } else {\n      icon = getFontAwesomeIcon('fas', 'arrow-left')\n      buttonText = 'Kembali'\n      clickAction = this.redirectToPrevUrl.bind(this)\n    }\n\n    return html`\n      <div class=\"flex md:hidden w-full pb-4\">\n        <button\n          @click=${clickAction}\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(icon)}\n          </div>\n          ${buttonText}\n        </button>\n      </div>\n    `\n  }\n\n  private helpDesk() {\n    const textColorClass = this.isDark ? 'text-dark-7' : 'text-white'\n\n    return html`\n      <div class=\"self-center text-xs md:text-sm ${textColorClass}\">\n        Butuh bantuan? Hubungi\n        <button\n          @click=${this.customerServiceClicked}\n          class=\"font-bold underline\"\n        >\n          Layanan Pelanggan.\n        </button>\n      </div>\n    `\n  }\n\n  private userAction() {\n    const isAudio = this.type === 'audio'\n    const paddingClass = isAudio ? 'md:py-3.5' : 'md:py-6'\n    const marginClass = isAudio ? 'md:mt-4' : 'md:mt-8'\n    const backgroundClass = this.isDark ? 'bg-dark-4' : 'bg-blue-600'\n\n    return html`\n      <div\n        class=\"flex py-5 px-8 w-full justify-evenly rounded-b-xl mt-6 relative ${paddingClass} ${marginClass} ${backgroundClass}\"\n      >\n        ${this.helpDesk()}\n      </div>\n    `\n  }\n\n  private introductoryPrice() {\n    const textColorClass = this.isDark ? 'text-dark-7' : 'text-grey-600'\n    return html` <div\n      class=\"flex space-x-1 h-5 md:h-max overflow-hidden md:flex-col md:space-x-0 items-center md:items-start md:justify-center\"\n    >\n      <h5 class=\"text-base md:text-lg font-bold text-orange-400\">Rp 10.000</h5>\n      <p class=\"text-xs ${textColorClass}\">untuk 1 bulan pertama</p>\n    </div>`\n  }\n\n  private swgRegonText() {\n    const textColorClass = this.isDark ? 'text-dark-7' : 'text-grey-600'\n    return html`<p class=\"text-xs leading-4 md:max-w-[137px] ${textColorClass}\">\n      Berlangganan lebih mudah dengan Google\n    </p>`\n  }\n\n  private swgPackageSection() {\n    const { isDark } = this\n    const isAudio = this.type === 'audio'\n\n    const containerClass = `flex flex-col space-y-2 md:space-x-2 md:space-y-0 md:flex-row justify-between items-center py-3 px-4 rounded-lg md:mx-0 w-full h-[76px] md:h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3${\n      isDark ? ' bg-grey-600' : ' bg-white'\n    }${isAudio ? ' md:mt-2.5' : ' md:mt-4'}`\n\n    const buttonClass = `border space-x-2 justify-center border-grey-400 rounded-md px-[22px] md:px-6 shadow-sm flex h-max flex-row flex-nowrap py-[5.6px] md:py-1.5 items-center${\n      isDark ? ' bg-grey-600' : ' bg-grey-100 border-grey-100'\n    }`\n\n    const textColorClass = isDark ? 'text-dark-7' : 'text-grey-500'\n\n    const googleImageSrc = isDark\n      ? 'https://cdn-www.kompas.id/paywall-asset/google-white.png'\n      : 'https://cdn-www.kompas.id/paywall-asset/google.png'\n\n    return html`\n      <div class=\"${containerClass}\">\n        ${this.isEntitledForIntroductoryPrice\n          ? this.introductoryPrice()\n          : this.swgRegonText()}\n        <div>\n          <button class=\"${buttonClass}\" id=\"subscribe-with-google\">\n            <p\n              class=\"text-[11px] md:text-xs whitespace-nowrap w-full ${textColorClass}\"\n            >\n              Subscribe with\n            </p>\n            <img\n              class=\"object-scale-down h-[17px] md:h-5\"\n              src=${googleImageSrc}\n              alt=\"subscribe with google\"\n            />\n          </button>\n        </div>\n      </div>\n    `\n  }\n\n  private openFreeTrialPopup() {\n    const popup = this.shadowRoot?.getElementById('freeTrialPopup')\n    popup?.classList.remove('hidden')\n  }\n\n  private closeFreeTrialPopup() {\n    const popup = this.shadowRoot?.getElementById('freeTrialPopup')\n    popup?.classList.add('hidden')\n  }\n\n  private freeTrialPopUp() {\n    const { isDark } = this\n\n    const googlePlayBadgeSrc = isDark\n      ? 'https://cdn-www.kompas.id/web-component/Button_Download%20Google%20Play_Dark%20Mode.svg'\n      : 'https://cdn-www.kompas.id/web-component/Button_Download%20Google%20Play_Light%20Mode.svg'\n\n    const appStoreBadgeSrc = isDark\n      ? 'https://cdn-www.kompas.id/web-component/Button_Download%20App%20Store_Dark%20Mode.svg'\n      : 'https://cdn-www.kompas.id/web-component/Button_Download%20App%20Store_Light%20Mode.svg'\n\n    return html`\n      <div\n        id=\"freeTrialPopup\"\n        class=\"fixed w-full h-full inset-0 flex justify-center items-center z-50 bg-black bg-opacity-75 hidden\"\n      >\n        <div\n          class=\"rounded w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 2xl:w-1/4 p-6 text-center ${isDark\n            ? 'bg-dark-4'\n            : 'bg-white'}\"\n        >\n          <div class=\"w-full flex justify-end px-2\">\n            <button\n              @click=${this.closeFreeTrialPopup}\n              class=\"w-8 h-8 pl-4 ${isDark ? 'text-grey-300' : 'text-grey-400'}\"\n            >\n              ${unsafeSVG(getFontAwesomeIcon('fas', 'xmark', 24, 24))}\n            </button>\n          </div>\n          <div class=\"w-full flex justify-center\">\n            <div class=\"w-3/4 lg:w-1/2\">\n              <img\n                src=\"https://cdn-www.kompas.id/web-component/kompas-free-trial.png\"\n                alt=\"Free Trial\"\n              />\n            </div>\n          </div>\n          <p\n            class=\"font-bold text-lg mt-4 ${isDark\n              ? 'text-white'\n              : 'text-grey-600'}\"\n          >\n            Coba Gratis Kompas.id di Aplikasi\n          </p>\n          <div\n            class=\"hidden lg:block lg:flex flex rounded mt-4 px-8 py-4 items-center ${isDark\n              ? 'bg-dark-3 border border-dark-9'\n              : 'bg-white border border-grey-300'}\"\n          >\n            <div class=\"w-1/3 flex mr-6\">\n              <img\n                src=\"https://cdn-www.kompas.id/web-component/free-trial-qr-code.png\"\n                alt=\"QR Code Deep Link\"\n              />\n            </div>\n            <div\n              class=\"w-2/3 text-base text-left ${isDark\n                ? 'text-dark-7'\n                : 'text-grey-600'}\"\n            >\n              ${this.packages.freeTrial?.desktopText}\n            </div>\n          </div>\n          <div\n            class=\"text-base text-center lg:hidden px-2 md:px-8 ${isDark\n              ? 'text-dark-7'\n              : 'text-grey-600'}\"\n          >\n            ${this.packages.freeTrial?.mobileText}\n          </div>\n          <div class=\"lg:flex flex justify-center mt-4 hidden lg:block gap-4\">\n            <a\n              href=\"https://play.google.com/store/apps/details?id=id.kompas.app\"\n              target=\"_blank\"\n              ><img src=\"${googlePlayBadgeSrc}\" alt=\"Google Play Badge\"\n            /></a>\n            <a\n              href=\"https://apps.apple.com/id/app/kompas-id/id1242195037?l=id\"\n              target=\"_blank\"\n              ><img src=\"${appStoreBadgeSrc}\" alt=\"iOS App Store Badge\"\n            /></a>\n          </div>\n          <button\n            onclick=\"window.open('https://app.komp.as/langganan', '_blank')\"\n            class=\"h-12 rounded-md mt-4 flex w-full items-center justify-center lg:hidden ${isDark\n              ? 'bg-green-300'\n              : 'bg-green-500'}\"\n          >\n            <h6 class=\"font-bold p-4 ${isDark ? 'text-dark-5' : 'text-white'}\">\n              Unduh Sekarang\n            </h6>\n          </button>\n        </div>\n      </div>\n    `\n  }\n\n  private freeTrialPackageSection() {\n    if (this.packages.freeTrial) {\n      return html`\n        <div\n          class=\"flex flex-wrap items-center justify-between py-3 px-4 rounded-lg md:mx-0 w-full h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4 ${this\n            .isDark\n            ? 'bg-grey-600'\n            : 'bg-white'}\"\n        >\n          <div class=\"flex flex-col\">\n            <div class=\"flex items-center\">\n              <h5 class=\"text-base md:text-lg font-bold text-orange-400\">\n                ${formatRupiah(0)}\n              </h5>\n            </div>\n            <div class=\"flex items-center\">\n              <p\n                class=\"text-xs ${this.isDark ? 'text-dark-7' : 'text-grey-600'}\"\n              >\n                ${this.packages.freeTrial?.packageText}\n              </p>\n            </div>\n          </div>\n          <button\n            @click=${this.openFreeTrialPopup}\n            class=\"h-8 border border-green-500 rounded ${!this.isDark &&\n            'bg-white'}\"\n          >\n            <h6\n              class=\"text-xs md:text-sm font-bold px-4 ${this.isDark\n                ? 'text-green-300'\n                : 'text-green-500'}\"\n            >\n              Coba Gratis\n            </h6>\n          </button>\n        </div>\n      `\n    }\n    return nothing\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    const isEpaper = this.type === 'epaper'\n    const isAudio = this.type === 'audio'\n    const { isDark } = this\n    const { isLogin } = this\n\n    const wrapperBodyClass = `wrapper-body\n      ${isEpaper ? 'bg-transparent mx-2' : ''}\n      ${\n        isAudio\n          ? 'fixed w-full h-full inset-0 flex justify-center items-center z-index-max bg-black bg-opacity-75'\n          : ''\n      }`\n      .trim()\n      .replace(/\\s+/g, ' ')\n\n    const containerClass = `flex w-full flex-col items-center justify-center rounded-xl pt-6 relative ${\n      isDark ? 'bg-dark-3' : 'bg-blue-100'\n    } ${isAudio ? 'md:pt-5' : 'md:pt-8'}`\n\n    const borderClass = isDark ? 'border-dark-8' : 'border-blue-200'\n\n    return html`\n      <div class=\"${wrapperBodyClass}\">\n        <div\n          class=\"flex flex-col justify-center items-center w-full max-w-screen-sm my-5 px-2 relative\"\n        >\n          ${isEpaper || isAudio ? this.topNavigator(this.type) : nothing}\n          <div class=\"${containerClass}\">\n            ${this.headerSection(\n              this.type,\n              this.paywallData?.informations?.title ?? ''\n            )}\n            ${this.descriptionSection(\n              this.paywallData?.informations?.description ?? []\n            )}\n            ${this.packagesSection(\n              this.paywallData?.packages ?? ({} as Packages)\n            )}\n            ${this.informationPackages()}\n            ${!isLogin\n              ? html`\n                  <div\n                    class=\"border-b w-1/5 flex justify-center ${borderClass} ${isAudio\n                      ? 'my-4 md:my-3'\n                      : 'my-4'}\"\n                  ></div>\n                  ${this.registrationSection(this.type)}\n                `\n              : nothing}\n            ${this.userAction()} ${this.sendDataLayeronPaywallBody()}\n          </div>\n          ${this.isExtensionsOpened\n            ? this.paymentMobileExtension(\n                this.paywallData?.payment?.ekstension ?? []\n              )\n            : nothing}\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.d.ts

@@ -14,6 +14,7 @@ export declare class KompasWidgetRecirculationsDefault extends LitElement {
     mainCategory: string;
     titleName: string;
     titleLink: string;
+    isDark: boolean;
     /**
      * Fetch Data
      */

package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js

@@ -19,6 +19,7 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
         this.mainCategory = '';
         this.titleName = ''; // contoh: Artikel Terkait / Lainnya dalam 'kategori'
         this.titleLink = ''; // contoh: /kategori/opini
+        this.isDark = false;
     }
     /**
      * Fetch Data
@@ -131,7 +132,12 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
         return html `
       <div class="flex font-sans uppercase items-start mb-6 mt-8">
         <div>
-          <h5 class="capitalize font-bold font-sans text-grey-600">
+          <h5
+            class="capitalize font-bold font-sans text-lg md:text-xl ${this
+            .isDark
+            ? 'text-white'
+            : 'text-grey-600'}"
+          >
             Artikel Terkait
           </h5>
         </div>
@@ -144,7 +150,11 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
         href="${this.titleLink}"
         class="flex font-sans uppercase items-start mb-6 mt-8"
       >
-        <h5 class="capitalize font-bold font-sans text-brand-1">
+        <h5
+          class="capitalize font-bold font-sans text-lg md:text-xl ${this.isDark
+            ? 'text-blue-200'
+            : 'text-brand-1'}"
+        >
           ${this.titleName}
         </h5>
       </a>
@@ -204,7 +214,7 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
     }
     render() {
         return html `
-      <div class="w-full">
+      <div class="w-full ${this.isDark ? 'bg-dark-5 ' : ''}">
         <!-- start: widget title -->
         ${this.type === 'relatedArticle'
             ? this.titleRelatedArticle()
@@ -223,11 +233,18 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
                           <a href="${post.permalink}">
                             ${this.renderChips(post)}
                             <h5
-                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                              class="hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this
+                .isDark
+                ? 'text-white'
+                : 'text-grey-600'}"
                             >
                               ${post.title}
                             </h5>
-                            <p class="text-grey-600 pt-2">
+                            <p
+                              class="font-sans pt-2 text-sm ${this.isDark
+                ? 'text-white'
+                : 'text-grey-600'}"
+                            >
                               ${this.formatDate(post.publishedDate)}
                             </p>
                           </a>
@@ -250,11 +267,18 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
                           <a href="${post.permalink}">
                             ${this.renderChips(post)}
                             <h5
-                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                              class="hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this
+                .isDark
+                ? 'text-white'
+                : 'text-grey-600'}"
                             >
                               ${post.title}
                             </h5>
-                            <p class="text-grey-600 pt-2">
+                            <p
+                              class="font-sans pt-2 text-sm ${this.isDark
+                ? 'text-white'
+                : 'text-grey-600'}"
+                            >
                               ${this.formatDate(post.publishedDate)}
                             </p>
                           </a>
@@ -321,6 +345,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], KompasWidgetRecirculationsDefault.prototype, "titleLink", void 0);
+__decorate([
+    property({ type: Boolean })
+], KompasWidgetRecirculationsDefault.prototype, "isDark", void 0);
 KompasWidgetRecirculationsDefault = __decorate([
     customElement('kompasid-widget-recirculations-default')
 ], KompasWidgetRecirculationsDefault);

package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasWidgetRecirculationsDefault.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { format } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Post } from './types.js'\n\n@customElement('kompasid-widget-recirculations-default')\nexport class KompasWidgetRecirculationsDefault extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n      .chip {\n        align-items: center;\n        border-radius: 0.25rem;\n        display: flex;\n        font-family: 'PT Sans', sans-serif;\n        font-size: 0.75rem;\n        font-weight: bold;\n        height: 1.5rem;\n        justify-content: center;\n        line-height: 1rem;\n        margin-bottom: 0.25rem;\n        padding: 0.375rem 0.5rem;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  @property({ type: Array }) posts: Post[][] = []\n  @property({ type: String }) accessToken = ''\n  @property({ type: String }) permalinkArticle = ''\n  @property({ type: String }) userGuid = '0'\n  @property({ type: String }) slugs = ''\n  @property({ type: String }) type: 'relatedArticle' | 'otherArticle' =\n    'relatedArticle'\n  @property({ type: String }) mainCategory = ''\n  @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'\n  @property({ type: String }) titleLink = '' // contoh: /kategori/opini\n\n  /**\n   * Fetch Data\n   */\n  async connectedCallback() {\n    super.connectedCallback()\n    try {\n      await this.fetchAccessToken()\n      if (this.type === 'relatedArticle') {\n        await this.relatedArticles()\n      } else if (this.type === 'otherArticle') {\n        await this.otherArticles()\n      }\n    } catch (error) {\n      this.handleFetchError(error)\n    }\n  }\n\n  async fetchAccessToken() {\n    const response = await fetch(\n      'https://api.kompas.id/account/api/v1/login/guest',\n      {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify({\n          email: 'anonynous.user@kompas.id',\n        }),\n      }\n    )\n\n    const result = await response.json()\n\n    if (result?.data?.accessToken) {\n      this.accessToken = result.data.accessToken\n    } else {\n      throw new Error('Token akses tidak tersedia dalam respons')\n    }\n  }\n\n  async relatedArticles() {\n    if (!this.accessToken) {\n      throw new Error('Token akses tidak tersedia')\n    }\n\n    const kompasApiAi = 'https://ai.kompas.id/api/v1'\n\n    // Constructing parameters\n    const params = new URLSearchParams()\n    params.append('page_url', this.permalinkArticle)\n    params.append('page_type', 'read')\n    params.append('item_type', 'articles')\n    params.append('guid', this.userGuid)\n    params.append('slugs', this.slugs)\n\n    // Constructing the URL with parameters\n    const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`\n\n    const response = await fetch(endpoint, {\n      headers: {\n        Authorization: `Bearer ${this.accessToken}`,\n        'Content-Type': 'application/json',\n      },\n    })\n\n    const result = await response.json()\n\n    if (result?.result) {\n      const items = result.result\n      const firstChunk = items.slice(0, 5)\n      const secondChunk = items.slice(5, 7)\n      this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n      console.log('related article:', this.posts)\n    } else {\n      throw new Error('Data artikel terkait tidak ditemukan')\n    }\n  }\n\n  async otherArticles() {\n    if (!this.accessToken) {\n      throw new Error('Token akses tidak tersedia')\n    }\n\n    const kompasApiCdsSPA = 'https://cds.kompas.id/api/v1'\n\n    // Constructing the URL with parameters\n    const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`\n\n    const response = await fetch(endpoint, {\n      headers: {\n        Authorization: `Bearer ${this.accessToken}`,\n        'Content-Type': 'application/json',\n      },\n    })\n\n    const result = await response.json()\n\n    if (result?.result) {\n      const items = result.result\n      const firstChunk = items.slice(0, 5)\n      const secondChunk = items.slice(5, 7)\n      this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n      console.log('other article:', this.posts)\n    } else {\n      throw new Error('Data artikel lainnya tidak ditemukan')\n    }\n  }\n\n  handleFetchError(error: unknown) {\n    const errorMessage =\n      error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n    alert(`Terjadi kesalahan: ${errorMessage}`)\n  }\n\n  /**\n   * Function to format date\n   */\n  formatDate(date: string) {\n    return format(new Date(date), 'dd MMMM yyyy', { locale: id })\n  }\n\n  /**\n   * Render widget components\n   */\n\n  private titleRelatedArticle() {\n    return html`\n      <div class=\"flex font-sans uppercase items-start mb-6 mt-8\">\n        <div>\n          <h5 class=\"capitalize font-bold font-sans text-grey-600\">\n            Artikel Terkait\n          </h5>\n        </div>\n      </div>\n    `\n  }\n\n  private titleOtherArticle() {\n    return html`\n      <a\n        href=\"${this.titleLink}\"\n        class=\"flex font-sans uppercase items-start mb-6 mt-8\"\n      >\n        <h5 class=\"capitalize font-bold font-sans text-brand-1\">\n          ${this.titleName}\n        </h5>\n      </a>\n    `\n  }\n\n  renderChips(post: Post) {\n    const chips = []\n    const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')\n    const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')\n    const isFreemium = post.isFreemium === true\n\n    if (isEksklusif) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-grey-600 text-white\">\n              <img\n                src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n                alt=\"Kompas Icon\"\n                style=\"width: 16px; height: 16px; margin-right: 4px;\"\n              />\n              Eksklusif\n            </div>\n          </div>\n        `\n      )\n    } else if (isFreemium) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n          </div>\n        `\n      )\n    } else if (isAnalisis) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n          </div>\n        `\n      )\n    }\n\n    return chips\n  }\n\n  renderImage(post: Post) {\n    const { thumbnailMedium } = post.thumbnails?.sizes || {}\n    if (!thumbnailMedium) return ''\n\n    const { permalink, width, height } = thumbnailMedium\n    return html`\n      <img\n        src=\"${permalink}\"\n        width=\"${width}\"\n        height=\"${height}\"\n        alt=\"${post.title}\"\n        class=\"aspect-video object-cover w-full\"\n      />\n    `\n  }\n\n  render() {\n    return html`\n      <div class=\"w-full\">\n        <!-- start: widget title -->\n        ${this.type === 'relatedArticle'\n          ? this.titleRelatedArticle()\n          : this.titleOtherArticle()}\n        <!-- end: widget title -->\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8\">\n          <!-- start: left-post-loop -->\n          <div class=\"grid grid-cols-1 gap-6\">\n            ${this.posts[0]\n              ? this.posts[0].map(\n                  post => html`\n                    <div class=\"w-full\">\n                      <div class=\"flex\">\n                        <div class=\"w-1/2\">${this.renderImage(post)}</div>\n                        <div class=\"flex-grow pl-4 w-1/2\">\n                          <a href=\"${post.permalink}\">\n                            ${this.renderChips(post)}\n                            <h5\n                              class=\"hover:underline font-bold font-sans leading-tight text-grey-600\"\n                            >\n                              ${post.title}\n                            </h5>\n                            <p class=\"text-grey-600 pt-2\">\n                              ${this.formatDate(post.publishedDate)}\n                            </p>\n                          </a>\n                        </div>\n                      </div>\n                    </div>\n                  `\n                )\n              : 'Belum ada artikel'}\n          </div>\n          <!-- end: left-post-loop -->\n\n          <!-- start: right-post-loop -->\n          <div class=\"flex flex-col w-full\">\n            ${this.posts[1]\n              ? this.posts[1].map(\n                  post => html`\n                    <div class=\"mb-6\">\n                      <div class=\"flex\">\n                        <div class=\"w-1/2\">${this.renderImage(post)}</div>\n                        <div class=\"flex-grow pl-4 w-1/2\">\n                          <a href=\"${post.permalink}\">\n                            ${this.renderChips(post)}\n                            <h5\n                              class=\"hover:underline font-bold font-sans leading-tight text-grey-600\"\n                            >\n                              ${post.title}\n                            </h5>\n                            <p class=\"text-grey-600 pt-2\">\n                              ${this.formatDate(post.publishedDate)}\n                            </p>\n                          </a>\n                        </div>\n                      </div>\n                    </div>\n                  `\n                )\n              : ''}\n            <!-- start: ads -->\n            <slot></slot>\n            <!-- end: ads -->\n          </div>\n          <!-- end: right-post-loop -->\n        </div>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasWidgetRecirculationsDefault.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { format } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Post } from './types.js'\n\n@customElement('kompasid-widget-recirculations-default')\nexport class KompasWidgetRecirculationsDefault extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n      .chip {\n        align-items: center;\n        border-radius: 0.25rem;\n        display: flex;\n        font-family: 'PT Sans', sans-serif;\n        font-size: 0.75rem;\n        font-weight: bold;\n        height: 1.5rem;\n        justify-content: center;\n        line-height: 1rem;\n        margin-bottom: 0.25rem;\n        padding: 0.375rem 0.5rem;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  @property({ type: Array }) posts: Post[][] = []\n  @property({ type: String }) accessToken = ''\n  @property({ type: String }) permalinkArticle = ''\n  @property({ type: String }) userGuid = '0'\n  @property({ type: String }) slugs = ''\n  @property({ type: String }) type: 'relatedArticle' | 'otherArticle' =\n    'relatedArticle'\n  @property({ type: String }) mainCategory = ''\n  @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'\n  @property({ type: String }) titleLink = '' // contoh: /kategori/opini\n\n  @property({ type: Boolean }) isDark = false\n\n  /**\n   * Fetch Data\n   */\n  async connectedCallback() {\n    super.connectedCallback()\n    try {\n      await this.fetchAccessToken()\n      if (this.type === 'relatedArticle') {\n        await this.relatedArticles()\n      } else if (this.type === 'otherArticle') {\n        await this.otherArticles()\n      }\n    } catch (error) {\n      this.handleFetchError(error)\n    }\n  }\n\n  async fetchAccessToken() {\n    const response = await fetch(\n      'https://api.kompas.id/account/api/v1/login/guest',\n      {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify({\n          email: 'anonynous.user@kompas.id',\n        }),\n      }\n    )\n\n    const result = await response.json()\n\n    if (result?.data?.accessToken) {\n      this.accessToken = result.data.accessToken\n    } else {\n      throw new Error('Token akses tidak tersedia dalam respons')\n    }\n  }\n\n  async relatedArticles() {\n    if (!this.accessToken) {\n      throw new Error('Token akses tidak tersedia')\n    }\n\n    const kompasApiAi = 'https://ai.kompas.id/api/v1'\n\n    // Constructing parameters\n    const params = new URLSearchParams()\n    params.append('page_url', this.permalinkArticle)\n    params.append('page_type', 'read')\n    params.append('item_type', 'articles')\n    params.append('guid', this.userGuid)\n    params.append('slugs', this.slugs)\n\n    // Constructing the URL with parameters\n    const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`\n\n    const response = await fetch(endpoint, {\n      headers: {\n        Authorization: `Bearer ${this.accessToken}`,\n        'Content-Type': 'application/json',\n      },\n    })\n\n    const result = await response.json()\n\n    if (result?.result) {\n      const items = result.result\n      const firstChunk = items.slice(0, 5)\n      const secondChunk = items.slice(5, 7)\n      this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n      console.log('related article:', this.posts)\n    } else {\n      throw new Error('Data artikel terkait tidak ditemukan')\n    }\n  }\n\n  async otherArticles() {\n    if (!this.accessToken) {\n      throw new Error('Token akses tidak tersedia')\n    }\n\n    const kompasApiCdsSPA = 'https://cds.kompas.id/api/v1'\n\n    // Constructing the URL with parameters\n    const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`\n\n    const response = await fetch(endpoint, {\n      headers: {\n        Authorization: `Bearer ${this.accessToken}`,\n        'Content-Type': 'application/json',\n      },\n    })\n\n    const result = await response.json()\n\n    if (result?.result) {\n      const items = result.result\n      const firstChunk = items.slice(0, 5)\n      const secondChunk = items.slice(5, 7)\n      this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n      console.log('other article:', this.posts)\n    } else {\n      throw new Error('Data artikel lainnya tidak ditemukan')\n    }\n  }\n\n  handleFetchError(error: unknown) {\n    const errorMessage =\n      error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n    alert(`Terjadi kesalahan: ${errorMessage}`)\n  }\n\n  /**\n   * Function to format date\n   */\n  formatDate(date: string) {\n    return format(new Date(date), 'dd MMMM yyyy', { locale: id })\n  }\n\n  /**\n   * Render widget components\n   */\n\n  private titleRelatedArticle() {\n    return html`\n      <div class=\"flex font-sans uppercase items-start mb-6 mt-8\">\n        <div>\n          <h5\n            class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n              .isDark\n              ? 'text-white'\n              : 'text-grey-600'}\"\n          >\n            Artikel Terkait\n          </h5>\n        </div>\n      </div>\n    `\n  }\n\n  private titleOtherArticle() {\n    return html`\n      <a\n        href=\"${this.titleLink}\"\n        class=\"flex font-sans uppercase items-start mb-6 mt-8\"\n      >\n        <h5\n          class=\"capitalize font-bold font-sans text-lg md:text-xl ${this.isDark\n            ? 'text-blue-200'\n            : 'text-brand-1'}\"\n        >\n          ${this.titleName}\n        </h5>\n      </a>\n    `\n  }\n\n  renderChips(post: Post) {\n    const chips = []\n    const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')\n    const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')\n    const isFreemium = post.isFreemium === true\n\n    if (isEksklusif) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-grey-600 text-white\">\n              <img\n                src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n                alt=\"Kompas Icon\"\n                style=\"width: 16px; height: 16px; margin-right: 4px;\"\n              />\n              Eksklusif\n            </div>\n          </div>\n        `\n      )\n    } else if (isFreemium) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n          </div>\n        `\n      )\n    } else if (isAnalisis) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n          </div>\n        `\n      )\n    }\n\n    return chips\n  }\n\n  renderImage(post: Post) {\n    const { thumbnailMedium } = post.thumbnails?.sizes || {}\n    if (!thumbnailMedium) return ''\n\n    const { permalink, width, height } = thumbnailMedium\n    return html`\n      <img\n        src=\"${permalink}\"\n        width=\"${width}\"\n        height=\"${height}\"\n        alt=\"${post.title}\"\n        class=\"aspect-video object-cover w-full\"\n      />\n    `\n  }\n\n  render() {\n    return html`\n      <div class=\"w-full ${this.isDark ? 'bg-dark-5 ' : ''}\">\n        <!-- start: widget title -->\n        ${this.type === 'relatedArticle'\n          ? this.titleRelatedArticle()\n          : this.titleOtherArticle()}\n        <!-- end: widget title -->\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8\">\n          <!-- start: left-post-loop -->\n          <div class=\"grid grid-cols-1 gap-6\">\n            ${this.posts[0]\n              ? this.posts[0].map(\n                  post => html`\n                    <div class=\"w-full\">\n                      <div class=\"flex\">\n                        <div class=\"w-1/2\">${this.renderImage(post)}</div>\n                        <div class=\"flex-grow pl-4 w-1/2\">\n                          <a href=\"${post.permalink}\">\n                            ${this.renderChips(post)}\n                            <h5\n                              class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n                                .isDark\n                                ? 'text-white'\n                                : 'text-grey-600'}\"\n                            >\n                              ${post.title}\n                            </h5>\n                            <p\n                              class=\"font-sans pt-2 text-sm ${this.isDark\n                                ? 'text-white'\n                                : 'text-grey-600'}\"\n                            >\n                              ${this.formatDate(post.publishedDate)}\n                            </p>\n                          </a>\n                        </div>\n                      </div>\n                    </div>\n                  `\n                )\n              : 'Belum ada artikel'}\n          </div>\n          <!-- end: left-post-loop -->\n\n          <!-- start: right-post-loop -->\n          <div class=\"flex flex-col w-full\">\n            ${this.posts[1]\n              ? this.posts[1].map(\n                  post => html`\n                    <div class=\"mb-6\">\n                      <div class=\"flex\">\n                        <div class=\"w-1/2\">${this.renderImage(post)}</div>\n                        <div class=\"flex-grow pl-4 w-1/2\">\n                          <a href=\"${post.permalink}\">\n                            ${this.renderChips(post)}\n                            <h5\n                              class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n                                .isDark\n                                ? 'text-white'\n                                : 'text-grey-600'}\"\n                            >\n                              ${post.title}\n                            </h5>\n                            <p\n                              class=\"font-sans pt-2 text-sm ${this.isDark\n                                ? 'text-white'\n                                : 'text-grey-600'}\"\n                            >\n                              ${this.formatDate(post.publishedDate)}\n                            </p>\n                          </a>\n                        </div>\n                      </div>\n                    </div>\n                  `\n                )\n              : ''}\n            <!-- start: ads -->\n            <slot></slot>\n            <!-- end: ads -->\n          </div>\n          <!-- end: right-post-loop -->\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.d.ts

@@ -16,6 +16,7 @@ export declare class KompasWidgetRecirculationsList extends LitElement {
     articleList: ListItem[];
     accessToken: string;
     apiSlug: string;
+    isDark: boolean;
     static styles: import("lit").CSSResult[];
     connectedCallback(): Promise<void>;
     fetchAccessToken(): Promise<void>;