@kompasid/lit-web-components 0.5.6 → 0.5.8

package/src/components/kompasid-paywall-body/KompasPaywallBody.ts

@@ -9,6 +9,7 @@ import {
   Product,
   Packages,
   PaymentImage,
+  PaywallType,
 } from '../kompasid-paywall/types.js'
 import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
 import { deviceType } from '../../utils/deviceType.js'
@@ -63,12 +64,12 @@ export class KompasIdPaywallBody extends LitElement {
    * prop tracker_metered_wall_balance = The balance of their metered wall
    * prop tracker_metered_wall_balance = The edition of epaper viewed by user
    * prop theme = The theme of the paywall component
+   * prop isOpen = The condition for the visibility of the component
    */
 
   @property({ type: String }) slug = ''
-  @property({ type: Number }) udin = 0
   @property({ type: Boolean }) isLogin = false
-  @property({ type: String }) type: 'epaper' | 'reguler' = 'reguler'
+  @property({ type: String }) type: PaywallType = 'reguler'
   @property({ type: Object }) paywallData: PaywallProduct | undefined =
     undefined
   @property({ type: String }) userGuid = ''
@@ -92,6 +93,7 @@ export class KompasIdPaywallBody extends LitElement {
   @property({ type: Number }) tracker_metered_wall_balance = 0
   @property({ type: String }) tracker_epaper_edition = ''
   @property({ type: String }) theme = ''
+  @property({ type: Boolean }) isOpen = true
 
   /**
    * State
@@ -109,6 +111,7 @@ export class KompasIdPaywallBody extends LitElement {
   @state() private errorFlag = 0
 
   buttonElement!: HTMLButtonElement
+  targetElement!: HTMLElement
 
   /**
    * Getter
@@ -141,7 +144,18 @@ export class KompasIdPaywallBody extends LitElement {
   ): void {
     this.sendDataLayeronButtonBuyPackage(name, id, price, position)
     const originHost: string = encodeURIComponent(window.location.href)
-    const source: string = this.type === 'epaper' ? 'epaper' : 'article'
+    let source: string
+
+    switch (this.type) {
+      case 'epaper':
+        source = 'epaper'
+        break
+      case 'audio':
+        source = 'news_audio'
+        break
+      default:
+        source = 'article'
+    }
     const directUrlCheckout: string = `${url}${originHost}&source=${source}`
     window.open(directUrlCheckout)
   }
@@ -162,6 +176,21 @@ export class KompasIdPaywallBody extends LitElement {
     )
   }
 
+  private close() {
+    this.isOpen = false
+  }
+
+  private handleClickOutside() {
+    if (this.isOpen) {
+      if (
+        this.targetElement instanceof HTMLElement &&
+        this.targetElement.classList.contains('wrapper-body')
+      ) {
+        this.close()
+      }
+    }
+  }
+
   private parsePrice(price: string): number {
     const lowerCasePrice = price.toLowerCase()
 
@@ -368,26 +397,49 @@ export class KompasIdPaywallBody extends LitElement {
     }
   }
 
+  constructor() {
+    super()
+    this.handleClickOutside = this.handleClickOutside.bind(this)
+  }
+
+  protected createRenderRoot() {
+    const root = super.createRenderRoot()
+    root.addEventListener(
+      'click',
+      (e: Event) => (this.targetElement = e.target as HTMLElement)
+    )
+    return root
+  }
+
   override async connectedCallback() {
     super.connectedCallback()
     await this.updateComplete
     if (this.swgEnable) {
       this.jsonScript()
-      this.buttonElement = this.shadowRoot?.getElementById(
-        'subscribe-with-google'
-      ) as HTMLButtonElement
-      if (this.buttonElement) {
-        const head = document.querySelector('head')
-        const script = document.createElement('script')
-        script.src = 'https://news.google.com/swg/js/v1/swg.js'
-        script.defer = true
-        script.onload = this.subscribeWithGoogleButton()
-        if (head) {
-          head.appendChild(script)
+      const appendSWGButton = () => {
+        this.buttonElement = this.shadowRoot?.getElementById(
+          'subscribe-with-google'
+        ) as HTMLButtonElement
+        if (this.buttonElement) {
+          const head = document.querySelector('head')
+          const script = document.createElement('script')
+          script.src = 'https://news.google.com/swg/js/v1/swg.js'
+          script.defer = true
+          script.onload = this.subscribeWithGoogleButton()
+          if (head) {
+            head.appendChild(script)
+          }
         }
       }
+      setTimeout(appendSWGButton, 500)
     }
     addGoogleFonts(['pt-sans', 'lora'])
+    document.addEventListener('click', this.handleClickOutside)
+  }
+
+  override async disconnectedCallback() {
+    super.disconnectedCallback()
+    document.removeEventListener('click', this.handleClickOutside)
   }
 
   private otherPackagesClicked() {
@@ -571,34 +623,43 @@ export class KompasIdPaywallBody extends LitElement {
    * Component
    */
 
-  private headerSection(type: 'epaper' | 'reguler') {
-    const headerSectionText =
-      type === 'epaper'
-        ? 'Akses ePaper Ini dengan Berlangganan'
-        : 'Lanjut Baca Artikel Ini dengan Berlangganan'
+  private headerSection(type: PaywallType, title: string) {
+    let buttonContent
+
+    if (type === 'epaper') {
+      buttonContent = html` <button
+        @click=${this.redirectToPrevUrl}
+        class="hidden lg:block w-8 h-8 pl-4 ${this.isDark
+          ? 'text-blue-300'
+          : 'text-blue-600'}"
+      >
+        ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
+      </button>`
+    } else if (type === 'audio') {
+      buttonContent = html` <button
+        @click=${this.close}
+        class="hidden md:block w-8 h-8 pl-4 ${this.isDark
+          ? 'text-blue-300'
+          : 'text-blue-600'}"
+      >
+        ${unsafeSVG(getFontAwesomeIcon('fas', 'xmark', 24, 24))}
+      </button>`
+    } else {
+      buttonContent = nothing
+    }
+
+    const headerClass = `text-base flex justify-center self-center md:block md:text-xl ${
+      this.isDark ? 'text-white' : 'text-grey-600'
+    } text-center font-lora font-bold tracking-wide md:tracking-normal w-4/5 md:w-full ${
+      type === 'audio' && 'sm:px-16 md:px-20'
+    }`
+
     return html`
-      <div class="flex w-full items-center justify-center">
-        ${type === 'epaper'
-          ? html`<button
-              @click=${this.redirectToPrevUrl}
-              class="hidden lg:block w-8 h-8 ${this.isDark
-                ? 'text-blue-300'
-                : 'text-blue-600'} pl-4"
-            >
-              ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
-            </button>`
-          : nothing}
-        <h4
-          class="text-base flex justify-center self-center md:block md:text-xl ${this
-            .isDark
-            ? 'text-white'
-            : 'text-grey-600'}
-          text-center font-lora font-bold tracking-wide md:tracking-normal w-4/5 md:w-full"
-        >
-          ${headerSectionText}
-        </h4>
-        ${type === 'epaper'
-          ? html`<div class="w-10 hidden lg:flex"></div>`
+      <div class="flex w-full items-start justify-center">
+        ${buttonContent}
+        <h4 class=${headerClass}>${title}</h4>
+        ${type === 'epaper' || type === 'audio'
+          ? html`<div class="w-10 hidden md:flex"></div>`
           : nothing}
       </div>
     `
@@ -699,7 +760,7 @@ export class KompasIdPaywallBody extends LitElement {
     `
   }
 
-  private registrationSection(type: 'epaper' | 'reguler') {
+  private registrationSection(type: PaywallType) {
     return type === 'epaper'
       ? this.epaperRegistrationSection()
       : this.regulerRegistrationSection()
@@ -835,7 +896,7 @@ export class KompasIdPaywallBody extends LitElement {
           <h6
             class="text-xs md:text-sm ${this.isDark
               ? 'text-green-300'
-              : 'text-green-500'} font-bold px-4 "
+              : 'text-green-500'} font-bold px-4"
           >
             Langganan
           </h6>
@@ -857,17 +918,31 @@ export class KompasIdPaywallBody extends LitElement {
     `
   }
 
-  private topNavigator() {
+  private topNavigator(type: PaywallType) {
+    let icon: string
+    let buttonText: string
+    let clickAction: Function
+
+    if (type === 'audio') {
+      icon = getFontAwesomeIcon('fas', 'xmark')
+      buttonText = 'Tutup'
+      clickAction = this.close.bind(this)
+    } else {
+      icon = getFontAwesomeIcon('fas', 'arrow-left')
+      buttonText = 'Kembali'
+      clickAction = this.redirectToPrevUrl.bind(this)
+    }
+
     return html`
-      <div class="flex lg:hidden items-center w-full pb-4 ">
+      <div class="flex md:hidden w-full pb-4">
         <button
-          @click=${this.redirectToPrevUrl}
+          @click=${clickAction}
           class="text-xs md:text-lg text-white flex flex-row"
         >
           <div class="icon-lg icon-white w-4 h-4 mr-3.5 md:mr-5 pt-0.5">
-            ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
+            ${unsafeSVG(icon)}
           </div>
-          Kembali
+          ${buttonText}
         </button>
       </div>
     `
@@ -945,7 +1020,7 @@ export class KompasIdPaywallBody extends LitElement {
             <p
               class="${this.isDark
                 ? 'text-dark-7'
-                : 'text-grey-500'} text-[11px] md:text-xs whitespace-nowrap w-full "
+                : 'text-grey-500'} text-[11px] md:text-xs whitespace-nowrap w-full"
             >
               Subscribe with
             </p>
@@ -971,19 +1046,29 @@ export class KompasIdPaywallBody extends LitElement {
       <div
         class="${this.type === 'epaper'
           ? 'bg-transparent wrapper-body mx-2'
+          : 'wrapper-body'}
+          ${this.type === 'audio'
+          ? `${
+              this.isOpen ? 'visible' : 'invisible'
+            } fixed w-full h-full inset-0 flex justify-center items-center z-50 bg-black bg-opacity-75`
           : 'wrapper-body'}"
       >
         <div
-          class="flex flex-col justify-center items-center w-full max-w-screen-sm my-5 relative"
+          class="flex flex-col justify-center items-center w-full max-w-screen-sm my-5 px-2 relative"
         >
-          ${this.type === 'epaper' ? this.topNavigator() : nothing}
+          ${this.type === 'epaper' || this.type === 'audio'
+            ? this.topNavigator(this.type)
+            : nothing}
           <div
             class="flex w-full flex-col items-center justify-center ${this
               .isDark
               ? 'bg-dark-3'
-              : 'bg-blue-100'}  rounded-xl pt-6 md:pt-8 relative"
+              : 'bg-blue-100'} rounded-xl pt-6 md:pt-8 relative"
           >
-            ${this.headerSection(this.type)}
+            ${this.headerSection(
+              this.type,
+              this.paywallData?.informations?.title ?? ''
+            )}
             ${this.descriptionSection(
               this.paywallData?.informations?.description ?? []
             )}

package/src/components/kompasid-paywall-body/readme.md

@@ -29,6 +29,7 @@
 | `tracker_user_type`            | `tracker_user_type`            |             | `string`                | `''`        |
 | `type`                         | `type`                         |             | `"epaper" \| "reguler"` | `'reguler'` |
 | `userGuid`                     | `user-guid`                    |             | `string`                | `''`        |
+| `isOpen`                       | `is-open`                      |             | `boolean`               | `true`      |
 
 
 ## Dependencies

package/tailwind/tailwind.css

@@ -534,6 +534,14 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.visible {
+  visibility: visible;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
 .collapse {
   visibility: collapse;
 }
@@ -542,6 +550,10 @@ video {
   position: static;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -554,6 +566,10 @@ video {
   position: sticky;
 }
 
+.inset-0 {
+  inset: 0px;
+}
+
 .-bottom-6 {
   bottom: -1.5rem;
 }
@@ -594,6 +610,10 @@ video {
   z-index: 20;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .col-span-2 {
   grid-column: span 2 / span 2;
 }
@@ -602,6 +622,10 @@ video {
   grid-column: span 4 / span 4;
 }
 
+.m-auto {
+  margin: auto;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -656,6 +680,10 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -680,10 +708,18 @@ video {
   margin-left: 0.75rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .ml-8 {
   margin-left: 2rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .mr-10 {
   margin-right: 2.5rem;
 }
@@ -760,6 +796,10 @@ video {
   height: 1rem;
 }
 
+.h-40 {
+  height: 10rem;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -942,6 +982,10 @@ video {
   flex-direction: column;
 }
 
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -1263,6 +1307,11 @@ video {
   padding-right: 1rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -1357,6 +1406,10 @@ video {
   padding-left: 1rem;
 }
 
+.pr-14 {
+  padding-right: 3.5rem;
+}
+
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -1573,6 +1626,11 @@ video {
   .sm\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+
+  .sm\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
 }
 
 @media (min-width: 768px) {
@@ -1606,6 +1664,10 @@ video {
     margin-right: 1.25rem;
   }
 
+  .md\:mt-0 {
+    margin-top: 0px;
+  }
+
   .md\:mt-3 {
     margin-top: 0.75rem;
   }
@@ -1622,6 +1684,10 @@ video {
     display: block;
   }
 
+  .md\:flex {
+    display: flex;
+  }
+
   .md\:hidden {
     display: none;
   }
@@ -1638,6 +1704,10 @@ video {
     height: 68px;
   }
 
+  .md\:h-full {
+    height: 100%;
+  }
+
   .md\:h-max {
     height: -moz-max-content;
     height: max-content;
@@ -1655,6 +1725,10 @@ video {
     width: 10rem;
   }
 
+  .md\:w-5\/12 {
+    width: 41.666667%;
+  }
+
   .md\:w-52 {
     width: 13rem;
   }
@@ -1715,6 +1789,14 @@ video {
     justify-content: center;
   }
 
+  .md\:gap-2 {
+    gap: 0.5rem;
+  }
+
+  .md\:gap-8 {
+    gap: 2rem;
+  }
+
   .md\:space-x-0 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0px * var(--tw-space-x-reverse));
@@ -1745,10 +1827,18 @@ video {
     margin-bottom: calc(1rem * var(--tw-space-y-reverse));
   }
 
+  .md\:self-start {
+    align-self: flex-start;
+  }
+
   .md\:self-end {
     align-self: flex-end;
   }
 
+  .md\:self-center {
+    align-self: center;
+  }
+
   .md\:rounded {
     border-radius: 0.25rem;
   }
@@ -1826,6 +1916,11 @@ video {
     text-align: left;
   }
 
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
   .md\:text-base {
     font-size: 1rem;
     line-height: 1.5rem;
@@ -1898,14 +1993,6 @@ video {
     display: block;
   }
 
-  .lg\:flex {
-    display: flex;
-  }
-
-  .lg\:hidden {
-    display: none;
-  }
-
   .lg\:min-h-\[220px\] {
     min-height: 220px;
   }
@@ -1914,6 +2001,10 @@ video {
     width: 410px;
   }
 
+  .lg\:max-w-7xl {
+    max-width: 80rem;
+  }
+
   .lg\:grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
@@ -1978,3 +2069,10 @@ video {
     padding-bottom: 1.5rem;
   }
 }
+
+@media (min-width: 1280px) {
+  .xl\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+}