@kompasid/lit-web-components 0.4.4 → 0.5.0

package/src/components/kompasid-freewall-body/KompasFreewallBody.ts

@@ -0,0 +1,219 @@
+import { html, css, LitElement, nothing } from 'lit'
+import { property, customElement } from 'lit/decorators.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { addGoogleFonts } from '../../utils/googleFont.js'
+import { formatRupiah } from '../../utils/formatRupiah.js'
+import { generateCopyDuration } from '../../utils/generateCopyDuration.js'
+import { PackageData } from '../kompasid-freewall/types.js'
+import { faCheck } from '../../../assets/font-awesome.js'
+import { redirectToRegister } from '../../utils/cta.js'
+
+@customElement('kompasid-freewall-body')
+export class KompasFreewallBody extends LitElement {
+  static styles = [
+    css`
+      .font-lora {
+        font-family: 'Lora', 'Georgia', 'serif';
+      }
+
+      .font-roboto-condensed {
+        font-family: 'Roboto Condensed', sans-serif;
+      }
+
+      /* ----- Ribbon Container ---------------------------------------*/
+      #ribbon-container {
+        background: transparent;
+        height: 130px;
+        width: 200px;
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        overflow: hidden;
+      }
+
+      /* ----- Top Curl ---------------------------------------*/
+      #ribbon-container:before {
+        content: '';
+        display: block;
+        -webkit-border-radius: 10px 10px 0px 0px;
+        border-radius: 10px 10px 0px 0px;
+        width: 35px;
+        height: 10px;
+        position: absolute;
+        right: 60px;
+        background: #b78b00;
+        z-index: 1;
+      }
+
+      /* ----- Right Curl ---------------------------------------*/
+      #ribbon-container:after {
+        content: '';
+        display: block;
+        -webkit-border-radius: 0px 10px 10px 0px;
+        border-radius: 0px 10px 10px 0px;
+        width: 10px;
+        height: 35px;
+        position: absolute;
+        right: 0px;
+        top: 60px;
+        background: #b78b00;
+      }
+
+      /* ----- Ribbon ---------------------------------------*/
+      #ribbon-container > div {
+        width: 140px;
+        height: 28px;
+        position: relative;
+        top: 24px;
+        right: -100px;
+        z-index: 11;
+        overflow: hidden;
+        transform: rotate(45deg);
+        -ms-transform: rotate(45deg); /* IE 9 */
+        -moz-transform: rotate(45deg); /* Firefox */
+        -webkit-transform: rotate(45deg); /* Safari and Chrome */
+        -o-transform: rotate(45deg); /* Opera */
+        background: #ffcc00;
+      }
+    `,
+    TWStyles,
+  ]
+
+  /**
+   * Props
+   */
+  /**
+   * property isLogin untuk menghandle apakah user sudah login atau belum
+   * property type untuk menghandle tipe freewall
+   * property onSubscriptionClick to handle cta when subscription button is clicked
+   * packageData sebagai data package yang diambil dari kompasid-freewall
+   */
+
+  @property({ type: Boolean }) isLogin = false
+  @property({ type: String }) type: 'article' | 'landing_page' = 'article'
+  @property() onSubscriptionClick = () => {}
+  @property({ type: Object }) packageData: PackageData = {} as PackageData
+
+  description = [
+    'Akses seluruh konten Kompas.id di web & aplikasi',
+    'ePaper hingga 30 edisi terakhir',
+    'Buku digital tiap bulannya di aplikasi ',
+  ]
+
+  /**
+   * Lifecycle
+   */
+
+  override async connectedCallback() {
+    super.connectedCallback()
+    await this.updateComplete
+    addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])
+  }
+
+  /**
+   * Component
+   */
+
+  private subscriptionCardComponent() {
+    return html`
+      <div class="relative">
+        <div
+          id="subscription-card"
+          class="flex justify-between items-center relative z-10 flex-col w-[328px] ${this
+            .isLogin
+            ? 'h-[277px] md:w-[580px] md:h-[240px]'
+            : 'h-[223px] md:w-[350px] lg:w-[410px] md:h-[210px]'} py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] border-2 border-yellow-400 bg-white"
+        >
+          <div
+            class="flex w-full flex-col ${this.isLogin
+              ? 'items-center md:w-[374px] text-center'
+              : 'items-start text-start'}"
+          >
+            <h5
+              class="font-lora text-lg md:text-xl font-bold leading-[30px] ${this
+                .isLogin && 'w-60 md:w-full'} text-grey-600"
+            >
+              ${this.isLogin
+                ? 'Dukung Jurnalisme Mencerahkan dengan Berlangganan'
+                : 'Mulai Berlangganan'}
+            </h5>
+            ${this.descriptionSection()}
+          </div>
+          <button
+            @click=${this.onSubscriptionClick}
+            class="bg-green-500 whitespace-nowrap w-full rounded ${this
+              .isLogin &&
+            'md:w-[370px]'} md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
+          >
+            Langganan ${formatRupiah(this.packageData.price)}
+            /${generateCopyDuration(this.packageData.durationType)}
+          </button>
+        </div>
+        <div id="ribbon-container">
+          <div
+            class="text-[11px] font-medium font-roboto-condensed flex justify-center items-center"
+          >
+            <span class="-ml-2">Penawaran Terbaik</span>
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  private registerCardComponent() {
+    return html`
+      <div
+        class="flex flex-col justify-between w-[328px] h-[159px] md:w-[350px] lg:w-[410px] md:h-[210px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white"
+      >
+        <div>
+          <h5
+            class="font-lora text-lg md:text-xl font-bold leading-[30px] text-grey-600"
+          >
+            Daftar Akun Gratis
+          </h5>
+          <div class="flex items-start lg:items-center mt-1 md:mt-3">
+            <div class="mt-1 lg:mt-0">${faCheck()}</div>
+            <h6 class="text-base text-grey-600 ml-1">
+              Akses ke 3 artikel berbayar gratis tiap bulan
+            </h6>
+          </div>
+        </div>
+        <button
+          @click=${() => redirectToRegister('freewall')}
+          class="bg-white border border-blue-600 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-blue-600 font-bold leading-[18px]"
+        >
+          Daftar Gratis
+        </button>
+      </div>
+    `
+  }
+
+  private descriptionSection() {
+    return html`<div class="flex flex-col space-y-1 mt-1 lg:mt-3">
+      ${this.description.map(
+        item =>
+          html`
+            <div class="flex items-start lg:items-center">
+              <div class="mt-1 lg:mt-0">${faCheck()}</div>
+              <h6 class="text-base text-grey-600 ml-1 text-start">${item}</h6>
+            </div>
+          `
+      )}
+    </div>`
+  }
+
+  /**
+   * Render Statement
+   */
+
+  render() {
+    return html`
+      <div
+        class="w-full h-full flex flex-col md:flex-row pt-6 md:pt-3 relative px-4 md:px-0 py-3 space-y-4 md:space-x-5 md:space-y-0 justify-center items-center"
+      >
+        ${this.subscriptionCardComponent()}
+        ${!this.isLogin ? this.registerCardComponent() : nothing}
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,13 @@
+# kompasid-freewall-body
+
+## Properties
+
+| Property                       | Attribute                      | Description                                                                              | Type     | Default |
+| ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | -------- | ------- |
+| `isLogin`             | `isLogin`            | property isLogin untuk menghandle apakah user sudah login atau belum        | `boolean` | `false`     |
+| `type`             | `type`            | property type untuk menghandle tipe freewall        | `"article" \| "landing_page"` | `"article"`     |
+| `packageData`             | `packageData`            | packageData sebagai data package yang akan di offer    | `PackageData` | `{}`     |
+
+----------------------------------------------
+
+*Terbikin oleh tim front-end kompas.id*

package/src/components/kompasid-freewall-head/KompasFreewallHead.ts

@@ -0,0 +1,102 @@
+import { html, css, LitElement, nothing } from 'lit'
+import { property, customElement } from 'lit/decorators.js'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { addGoogleFonts } from '../../utils/googleFont.js'
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
+import { formatRupiah } from '../../utils/formatRupiah.js'
+import { generateCopyDuration } from '../../utils/generateCopyDuration.js'
+import { PackageData } from '../kompasid-freewall/types.js'
+
+@customElement('kompasid-freewall-head')
+export class KompasFreewallHead extends LitElement {
+  static styles = [css``, TWStyles]
+
+  /**
+   * Props
+   */
+  /**
+   * property isLogin untuk menghandle apakah user sudah login atau belum
+   * property type untuk menghandle tipe freewall
+   * property head_copy_expand to update copy header when expand
+   * property head_copy_collapse to update copy header when collapse
+   * property expand to handle expand/collapse
+   * property toggleExpand to handle toggle expand/collapse
+   * property onSubscriptionClick to handle cta when subscription button is clicked
+   */
+
+  @property({ type: Boolean }) isLogin = false
+  @property({ type: String }) type: 'article' | 'landing_page' = 'article'
+  @property({ type: String }) head_copy_expand = ''
+  @property({ type: String }) head_copy_collapse = ''
+  @property({ type: Boolean }) expand = true
+  @property() toggleExpand = () => {}
+  @property() onSubscriptionClick = () => {}
+  @property({ type: Object }) packageData: PackageData = {} as PackageData
+
+  /**
+   * Getter
+   */
+
+  get headCopy() {
+    return (
+      (this.expand ? this.head_copy_expand : this.head_copy_collapse) ||
+      'Akses seluruh konten dan fitur Kompas.id dengan berlangganan.'
+    )
+  }
+
+  /**
+   * Lifecycle
+   */
+
+  override async connectedCallback() {
+    super.connectedCallback()
+    await this.updateComplete
+    addGoogleFonts(['pt-sans'])
+  }
+
+  /**
+   * Render Statement
+   */
+
+  render() {
+    return html`
+      <div class="flex flex-col px-4 md:px-0 space-y-4">
+        <div class="flex justify-between items-center h-full space-x-3">
+          <div class="hidden md:block"></div>
+          <div class="flex items-center md:justify-start space-x-3">
+            <p class="w-[280px] md:w-full">${this.headCopy}</p>
+            ${!this.expand
+              ? html`<button
+                  @click=${this.onSubscriptionClick}
+                  class="bg-green-500 hidden md:block whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
+                >
+                  Langganan ${formatRupiah(this.packageData.price)}
+                  /${generateCopyDuration(this.packageData.durationType)}
+                </button>`
+              : nothing}
+          </div>
+          <div>
+            <button
+              @click=${this.toggleExpand}
+              class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
+            >
+              <div class="${!this.expand && 'rotate-180'}">
+                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
+              </div>
+            </button>
+          </div>
+        </div>
+        ${!this.expand
+          ? html`<button
+              @click=${this.onSubscriptionClick}
+              class="bg-green-500 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
+            >
+              Langganan ${formatRupiah(this.packageData.price)}
+              /${generateCopyDuration(this.packageData.durationType)}
+            </button>`
+          : nothing}
+      </div>
+    `
+  }
+}

package/src/components/kompasid-freewall-head/readme.md

@@ -0,0 +1,17 @@
+# kompasid-freewall-head
+
+## Properties
+
+| Property                       | Attribute                      | Description                                                                              | Type     | Default |
+| ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | -------- | ------- |
+| `isLogin`             | `isLogin`            | property isLogin untuk menghandle apakah user sudah login atau belum        | `boolean` | `false`     |
+| `type`             | `type`            | property type untuk menghandle tipe freewall        | `"article" \| "landing_page"` | `"article"`     
+| `expand`             | `expand`            | property expand to handle expand/collapse       | `boolean` | `true`     |
+| `head_copy_expand`             | `head_copy_expand`            |property head_copy_expand to update copy header when expand        | `string` | `""`     |
+| `head_copy_collapse`             | `head_copy_collapse`            |property head_copy_expand to update copy header when collapse        | `string` | `""`     |
+| `packageData`             | `packageData`            | packageData sebagai data package yang akan di offer    | `PackageData` | `{}`     |
+| `toggleExpand`             | `toggleExpand`            |property toggleExpand to handle toggle expand/collapse   | `Function` | `() => {}`     |
+
+----------------------------------------------
+
+*Terbikin oleh tim front-end kompas.id*

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

@@ -14,6 +14,7 @@ import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
 import { deviceType } from '../../utils/deviceType.js'
 import { formatRupiah } from '../../utils/formatRupiah.js'
 import { addGoogleFonts } from '../../utils/googleFont.js'
+import { redirectToRegister } from '../../utils/cta.js'
 
 @customElement('kompasid-paywall-body')
 export class KompasIdPaywallBody extends LitElement {
@@ -116,7 +117,7 @@ export class KompasIdPaywallBody extends LitElement {
   get loginUrl() {
     return `${this.kompasLoginHost}?next=${encodeURIComponent(
       this.selfHost + window.location.pathname
-    )}`
+    )}&loc=hard_paywall`
   }
 
   get isDark() {
@@ -150,13 +151,6 @@ export class KompasIdPaywallBody extends LitElement {
     window.open('https://www.kompas.id/berlangganan')
   }
 
-  private redirectToRegister(): void {
-    const loginHost: string = 'https://account.kompas.id/register'
-    const nextParams: string = encodeURIComponent(window.location.href)
-    const directUrlRegister: string = `${loginHost}?next=${nextParams}?status=sukses_login&status_login=login`
-    window.location.href = directUrlRegister
-  }
-
   private redirectToLogin = (): void => {
     window.location.href = this.loginUrl
   }
@@ -680,7 +674,7 @@ export class KompasIdPaywallBody extends LitElement {
       <div class="flex flex-col items-center justify-center">
         <div>
           <button
-            @click=${this.redirectToRegister}
+            @click=${() => redirectToRegister('hard_paywall')}
             class="text-sm md:text-base font-bold ${this.isDark
               ? 'text-blue-300'
               : 'text-blue-600'} underline"

package/src/components/kompasid-paywall-video/KompasPaywallVideo.ts

@@ -5,6 +5,13 @@ import { TWStyles } from '../../../tailwind/tailwind.js'
 import { deviceType } from '../../utils/deviceType.js'
 import { formatRupiah } from '../../utils/formatRupiah.js'
 import { addGoogleFonts } from '../../utils/googleFont.js'
+import { generateCopyDuration } from '../../utils/generateCopyDuration.js'
+import { PackageData } from '../kompasid-freewall/types.js'
+import {
+  redirectToCheckout,
+  redirectToLogin,
+  redirectToRegister,
+} from '../../utils/cta.js'
 
 @customElement('kompasid-paywall-video')
 export class KompasPaywallVideo extends LitElement {
@@ -58,13 +65,24 @@ export class KompasPaywallVideo extends LitElement {
   @property({ type: Number }) tracker_metered_wall_balance = 0
   @property({ type: String }) type: 'article' | 'homepage' = 'article'
 
+  showPackage = {
+    duration: 1,
+    durationType: 3,
+    id: '9802035',
+    link: 'kdp?productId=9802035&referrer=',
+    price: 50000,
+    position: 1,
+    title: 'Kompas Digital Premium 1 Bulan',
+    referrer: '',
+  }
+
   /**
    * State
    */
 
   @state() private subscriptionUrl: string =
     'https://www.kompas.id/berlangganan'
-  @state() private checkoutHost: string = 'https://checkoutv2.kompas.id'
+  @state() private packageData: PackageData = {} as PackageData
 
   /**
    * Component
@@ -77,7 +95,7 @@ export class KompasPaywallVideo extends LitElement {
       >
         <div>
           <button
-            @click=${() => this.redirectToRegister('Daftar')}
+            @click=${() => this.onRegisterClick('Daftar')}
             class="text-blue-300 font-bold"
           >
             Daftar
@@ -87,7 +105,7 @@ export class KompasPaywallVideo extends LitElement {
         <div>
           <span>Sudah punya akun? </span>
           <button
-            @click=${this.redirectToLogin}
+            @click=${() => redirectToLogin('video_paywall')}
             class="text-blue-300 font-bold"
           >
             Masuk<span class="text-grey-300 font-normal">.</span>
@@ -115,8 +133,8 @@ export class KompasPaywallVideo extends LitElement {
           @click=${this.redirectToSelectedPackage}
           class="bg-green-500 rounded md:rounded-lg h-8 md:h-12 px-4 md:px-6 text-sm md:text-lg text-white font-bold leading-[18px]"
         >
-          Langganan ${formatRupiah(this.showPackage.price)}
-          /${this.generateCopyDuration(this.showPackage.durationType)}
+          Langganan ${formatRupiah(this.packageData.price)}
+          /${generateCopyDuration(this.packageData.durationType)}
         </button>
         <button
           @click=${this.redirectToBerlangganan}
@@ -141,12 +159,12 @@ export class KompasPaywallVideo extends LitElement {
       event,
       paywall_location: this.paywall_location,
       paywall_subscription_package:
-        this.paywall_subscription_package || this.showPackage.title,
+        this.paywall_subscription_package || this.packageData.title,
       paywall_subscription_id:
-        this.paywall_subscription_id || this.showPackage.id,
+        this.paywall_subscription_id || this.packageData.id,
       paywall_subscription_price:
-        this.paywall_subscription_price || this.showPackage.price,
-      paywall_position: this.paywall_position || this.showPackage.position,
+        this.paywall_subscription_price || this.packageData.price,
+      paywall_position: this.paywall_position || this.packageData.position,
       user_type: this.tracker_user_type,
       subscription_status: this.tracker_subscription_status,
       page_domain: this.tracker_page_domain || 'Kompas.id',
@@ -203,42 +221,21 @@ export class KompasPaywallVideo extends LitElement {
     return this.type === 'article'
   }
 
-  // temporary mocking data package for component and dataLayer
-  get showPackage() {
-    return {
-      duration: 1,
-      durationType: 3,
-      id: '9802035',
-      link: 'kdp?productId=9802035&referrer=https%3A%2F%2Fwww.kompas.cloud%2Fberlangganan',
-      price: 50000,
-      position: 1,
-      title: 'Kompas Digital Premium 1 Bulan',
-    }
-  }
-
   /**
    * Logic Function
    */
 
-  private redirectToRegister(triggerClick: string): void {
+  private onRegisterClick(triggerClick: string): void {
     this.sendDataLayeronButtonLogin(triggerClick)
-    const registerHost: string = 'https://account.kompas.id/register'
-    const nextParams: string = encodeURIComponent(window.location.href)
-    const directUrlRegister: string = `${registerHost}?next=${nextParams}?status=sukses_login&status_login=login&loc=video_paywall`
-    window.open(directUrlRegister, '_blank')
-  }
-
-  private redirectToLogin(): void {
-    const loginHost: string = 'https://account.kompas.id/login'
-    const nextParams: string = encodeURIComponent(window.location.href)
-    const directUrlLogin: string = `${loginHost}?next=${nextParams}&loc=video_paywall`
-    window.open(directUrlLogin, '_blank')
+    redirectToRegister('video_paywall')
   }
 
   private redirectToSelectedPackage(): void {
-    const url = `${this.checkoutHost}/${this.showPackage.link}&source=${this.type}`
     this.sendDataLayerSubscribeButtonClicked()
-    window.open(url, '_blank')
+    redirectToCheckout({
+      link: `${this.packageData.link}${this.packageData.referrer}`,
+      source: this.type,
+    })
   }
 
   private redirectToBerlangganan(): void {
@@ -246,25 +243,13 @@ export class KompasPaywallVideo extends LitElement {
     window.open(this.subscriptionUrl, '_blank')
   }
 
-  private generateCopyDuration(type: number): string {
-    switch (type) {
-      case 1:
-        return 'hari'
-      case 2:
-        return 'minggu'
-      case 3:
-        return 'bulan'
-      case 4:
-        return 'tahun'
-      default:
-        return ''
-    }
-  }
-
   override async connectedCallback() {
     super.connectedCallback()
     await this.updateComplete
     addGoogleFonts(['pt-sans'])
+
+    const originHost: string = encodeURIComponent(window.location.href)
+    this.packageData = { ...this.showPackage, referrer: originHost }
   }
 
   /**

package/src/index.ts

@@ -2,6 +2,7 @@ export { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js'
 export { KompasFooter } from './components/kompasid-footer/KompasFooter.js'
 export { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js'
 export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js'
+export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js'
 
 declare global {
   interface Window {

package/src/utils/cta.ts

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

package/src/utils/generateCopyDuration.ts

@@ -0,0 +1,14 @@
+export const generateCopyDuration = (type: number): string => {
+  switch (type) {
+    case 1:
+      return 'hari'
+    case 2:
+      return 'minggu'
+    case 3:
+      return 'bulan'
+    case 4:
+      return 'tahun'
+    default:
+      return ''
+  }
+}

package/src/utils/googleFont.ts

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