@kompasid/lit-web-components 0.9.47 → 0.9.49

package/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.ts

@@ -0,0 +1,613 @@
+import { LitElement, html, css, nothing } from 'lit'
+import { customElement, state, property } from 'lit/decorators.js'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { addGoogleFonts } from '../../utils/googleFont.js'
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { deviceType } from '../../utils/deviceType.js'
+import { ModalRegister } from './types.js'
+
+@customElement('kompasid-paywall-modal-register')
+export class KompasPaywallModalRegister extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+
+      .bold-yellow b {
+        color: #dbaa00;
+      }
+
+      .modal-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+      }
+
+      .modal-content {
+        background-color: #222222;
+        border-radius: 12px;
+        overflow: hidden;
+        position: relative;
+      }
+
+      .close-button {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: none;
+        border: none;
+        font-size: 1.5em;
+        color: #999999;
+        cursor: pointer;
+        z-index: 1;
+      }
+
+      .transparent-linear-dark {
+        background-image: -webkit-gradient(
+          linear,
+          left top,
+          left bottom,
+          from(hsla(0, 0%, 18%, 0)),
+          to(#333333)
+        );
+        background-image: linear-gradient(180deg, hsla(0, 0%, 18%, 0), #333333);
+      }
+
+      .font-lora {
+        font-family: 'Lora', 'Georgia', 'serif';
+      }
+    `,
+    TWStyles,
+  ]
+
+  /**
+   * Properties
+   */
+  @property({ type: String }) subscriptionStatus = ''
+  @property({ type: String }) userGuid = ''
+
+  @state() private isModalOpen = false
+  @state() private confirmation = false
+  @state() private dataModalRegister: ModalRegister = {} as ModalRegister
+  @state() private showModalRegister = false
+
+  /**
+   * Lifecycle
+   */
+  override connectedCallback() {
+    super.connectedCallback()
+    addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])
+    this.getRegisterProData()
+  }
+
+  async getRegisterProData() {
+    try {
+      const response = await fetch(
+        'https://cdn-www.kompas.id/web-component/form-b2b-kompas-pro.json'
+      )
+      const data = await response.json()
+      this.dataModalRegister = data
+    } catch (error) {
+      if (error instanceof Error) {
+        console.log(error.message)
+      }
+    } finally {
+      this.showModalRegister = true
+    }
+  }
+
+  openModal() {
+    this.isModalOpen = true
+  }
+
+  closeModal() {
+    this.isModalOpen = false
+    this.confirmation = false
+  }
+
+  @state()
+  private showMobileBenefit = false
+
+  @state()
+  private formData = {
+    nameUser: '',
+    email: '',
+    nomor: '',
+    nameCompany: '',
+  }
+
+  @state()
+  private formErrors = {
+    nameUser: '',
+    email: '',
+    nomor: '',
+    nameCompany: '',
+  }
+
+  @state()
+  private formTouched = {
+    nameUser: false,
+    email: false,
+    nomor: false,
+    nameCompany: false,
+  }
+
+  @state()
+  private formSubmitted = false
+
+  private toggleMobileBenefit() {
+    this.showMobileBenefit = !this.showMobileBenefit
+  }
+
+  private handleInput(e: InputEvent) {
+    const target = e.target as HTMLInputElement
+    const name = target.name as keyof typeof this.formData
+    this.formData = {
+      ...this.formData,
+      [name]: target.value,
+    }
+
+    if (this.formTouched[name] || this.formSubmitted) {
+      this.validateField(name)
+    }
+  }
+
+  private handleBlur(e: FocusEvent) {
+    const target = e.target as HTMLInputElement
+    const name = target.name as keyof typeof this.formData
+    this.formTouched = {
+      ...this.formTouched,
+      [name]: true,
+    }
+    this.validateField(name)
+  }
+
+  private validateField(field: keyof typeof this.formData) {
+    const value = this.formData[field].trim()
+    let error = ''
+
+    if (!value) {
+      switch (field) {
+        case 'nameUser':
+          error = 'Nama lengkap harus diisi.'
+          break
+        case 'email':
+          error = 'Email harus diisi.'
+          break
+        case 'nomor':
+          error = 'Nomor kontak harus diisi.'
+          break
+        case 'nameCompany':
+          error = 'Nama perusahaan/asosiasi harus diisi.'
+          break
+        default:
+          error = ''
+          break
+      }
+    } else if (field === 'email' && !/^\S+@\S+\.\S+$/.test(value)) {
+      error = 'Masukan email yang valid.'
+    } else if (field === 'nomor' && !/^[0-9+\-\s()]{6,20}$/.test(value)) {
+      error = 'Masukan nomor kontak yang valid.'
+    }
+
+    this.formErrors = {
+      ...this.formErrors,
+      [field]: error,
+    }
+  }
+
+  private validateForm() {
+    this.validateField('nameUser')
+    this.validateField('email')
+    this.validateField('nomor')
+    this.validateField('nameCompany')
+
+    return (
+      Object.values(this.formErrors).every(error => !error) &&
+      Object.values(this.formData).every(value => value.trim() !== '')
+    )
+  }
+
+  private async handleSubmit(e: Event) {
+    e.preventDefault()
+    this.formSubmitted = true
+
+    const isValid = this.validateForm()
+    if (!isValid) {
+      return
+    }
+
+    const formResult = {
+      name: this.formData.nameUser,
+      email: this.formData.email,
+      phone: this.formData.nomor,
+      company: this.formData.nameCompany,
+    }
+
+    this.confirmation = true
+
+    // Send form data to Zapier
+    try {
+      const formBody = new URLSearchParams(formResult)
+      await fetch('https://hooks.zapier.com/hooks/catch/14222434/uedqovx/', {
+        method: 'POST',
+        body: formBody,
+      })
+    } catch (err) {
+      console.error('Form submission error:', err)
+    }
+  }
+
+  private customerServiceClicked() {
+    this.redirectToHelpdesk()
+  }
+
+  private redirectToHelpdesk(): void {
+    this.sendDataLayeronHelpDesk()
+    window.open(
+      'https://api.whatsapp.com/send/?phone=6281290050800&text=Halo,%20saya%20perlu%20informasi%20mengenai%20kompas.id'
+    )
+  }
+
+  private sendDataLayeronHelpDesk(): void {
+    window.dataLayer.push({
+      event: 'helpOfferClick',
+      userType: this.subscriptionStatus,
+      GUID: this.userGuid,
+      interface: deviceType(),
+    })
+  }
+
+  private templateForm = () => html`
+    <div class="text-white text-center font-sans py-6 px-4 md:px-20 md:py-16">
+      <h1 class="font-lora text-xl md:text-2xl font-bold">
+        Akses Penuh Media Intelligence dengan Paket Langganan Korporasi
+      </h1>
+      <div class="text-grey-200 text-sm md:text-base mt-4">
+        Lengkapi formulir ini untuk dapatkan konsultasi paket korporasi Kompas
+        Professional dan penawaran harga terbaik bagi organisasi Anda.
+      </div>
+      <div>
+        <form
+          @submit="${this.handleSubmit}"
+          action=""
+          class="mt-8 gap-6 flex flex-col"
+        >
+          <div class="flex flex-col gap-2">
+            <label for="nameUser" class="font-bold flex flex-row">
+              Nama Lengkap
+              <span class="text-[#F57A7A] flex items-start">*</span>
+            </label>
+            <input
+              id="nameUser"
+              name="nameUser"
+              type="text"
+              placeholder=""
+              class="p-2 bg-grey-500 rounded border border-grey-400"
+              .value="${this.formData.nameUser}"
+              @input="${this.handleInput}"
+              @blur="${this.handleBlur}"
+              aria-invalid="${!!this.formErrors.nameUser}"
+            />
+            ${(this.formTouched.nameUser || this.formSubmitted) &&
+            this.formErrors.nameUser
+              ? html`
+                  <div
+                    class="text-sm text-[#F57A7A] flex flex-row items-center"
+                  >
+                    <div class="h-4 w-4 flex items-center justify-center mr-2">
+                      ${unsafeSVG(
+                        getFontAwesomeIcon('fas', 'exclamation-circle', 10, 10)
+                      )}
+                    </div>
+                    ${this.formErrors.nameUser}
+                  </div>
+                `
+              : ''}
+          </div>
+          <div class="flex flex-col gap-2">
+            <label for="email" class="font-bold flex flex-row">
+              Email
+              <span class="text-[#F57A7A] flex items-start">*</span>
+            </label>
+            <input
+              autocomplete="off"
+              id="email"
+              name="email"
+              type="email"
+              placeholder=""
+              class="p-2 bg-grey-500 rounded border border-grey-400"
+              .value="${this.formData.email}"
+              @input="${this.handleInput}"
+              @blur="${this.handleBlur}"
+              aria-invalid="${!!this.formErrors.email}"
+            />
+            ${(this.formTouched.email || this.formSubmitted) &&
+            this.formErrors.email
+              ? html`
+                  <div
+                    class="text-sm text-[#F57A7A] flex flex-row items-center"
+                  >
+                    <div class="h-4 w-4 flex items-center justify-center mr-2">
+                      ${unsafeSVG(
+                        getFontAwesomeIcon('fas', 'exclamation-circle', 10, 10)
+                      )}
+                    </div>
+                    ${this.formErrors.email}
+                  </div>
+                `
+              : ''}
+          </div>
+          <div class="flex flex-col gap-2">
+            <label for="nomor" class="font-bold flex flex-row">
+              Nomor Kontak (WhatsApp/Ponsel)
+              <span class="text-[#F57A7A] flex items-start">*</span>
+            </label>
+            <input
+              autocomplete="off"
+              id="nomor"
+              name="nomor"
+              type="tel"
+              placeholder=""
+              class="p-2 bg-grey-500 rounded border border-grey-400"
+              .value="${this.formData.nomor}"
+              @input="${this.handleInput}"
+              @blur="${this.handleBlur}"
+              aria-invalid="${!!this.formErrors.nomor}"
+            />
+            ${(this.formTouched.nomor || this.formSubmitted) &&
+            this.formErrors.nomor
+              ? html`
+                  <div
+                    class="text-sm text-[#F57A7A] flex flex-row items-center"
+                  >
+                    <div class="h-4 w-4 flex items-center justify-center mr-2">
+                      ${unsafeSVG(
+                        getFontAwesomeIcon('fas', 'exclamation-circle', 10, 10)
+                      )}
+                    </div>
+                    ${this.formErrors.nomor}
+                  </div>
+                `
+              : ''}
+          </div>
+          <div class="flex flex-col gap-2">
+            <label for="name_company" class="font-bold flex flex-row">
+              Nama Perusahaan/Asosiasi
+              <span class="text-[#F57A7A] flex items-start">*</span>
+            </label>
+            <input
+              id="name_company"
+              name="nameCompany"
+              type="text"
+              placeholder=""
+              class="p-2 bg-grey-500 rounded border border-grey-400"
+              .value="${this.formData.nameCompany}"
+              @input="${this.handleInput}"
+              @blur="${this.handleBlur}"
+              aria-invalid="${!!this.formErrors.nameCompany}"
+            />
+            ${(this.formTouched.nameCompany || this.formSubmitted) &&
+            this.formErrors.nameCompany
+              ? html`
+                  <div
+                    class="text-sm text-[#F57A7A] flex flex-row items-center"
+                  >
+                    <div class="h-4 w-4 flex items-center justify-center mr-2">
+                      ${unsafeSVG(
+                        getFontAwesomeIcon('fas', 'exclamation-circle', 10, 10)
+                      )}
+                    </div>
+                    ${this.formErrors.nameCompany}
+                  </div>
+                `
+              : ''}
+          </div>
+          <button
+            type="submit"
+            class="bg-yellow-500 text-center h-10 rounded text-grey-600 mt-2 w-full font-bold"
+          >
+            Kirim
+          </button>
+        </form>
+      </div>
+    </div>
+  `
+
+  render() {
+    return this.showModalRegister
+      ? html`<div
+            class="px-4 font-sans flex flex-wrap items-center justify-between rounded-lg md:mx-0 w-full min-h-[68px] bg-white relative"
+          >
+            <div class="flex flex-col gap-1">
+              <span class="text-xs leading-tight text-grey-500">
+                ${this.dataModalRegister.card.labelPackage}
+              </span>
+              <div class="flex items-baseline">
+                <h5 class="text-base font-bold text-orange-400 leading-none">
+                  ${this.dataModalRegister.card.textInvitation}
+                </h5>
+              </div>
+            </div>
+            <button
+              @click="${this.openModal}"
+              class="h-8 rounded ${this.dataModalRegister.card.isButtonSolid
+                ? 'bg-green-500 text-white'
+                : 'bg-white border border-green-500 text-green-500'} flex items-center"
+            >
+              <h6 class="text-xs md:text-sm font-bold py-2 px-4">
+                ${this.dataModalRegister.card.textButton}
+              </h6>
+            </button>
+          </div>
+
+          ${this.isModalOpen && !this.confirmation
+            ? html`
+                <div
+                  class="modal-overlay p-4"
+                  @click="${this.closeModal}"
+                  @keydown=${() => this.closeModal()}
+                >
+                  <div
+                    class="modal-content max-w-7xl w-full flex flex-col lg:flex-row max-h-full overflow-auto"
+                    @click="${(e: { stopPropagation: () => any }) =>
+                      e.stopPropagation()}"
+                    @keydown=${(e: { stopPropagation: () => any }) =>
+                      e.stopPropagation()}
+                  >
+                    <button class="close-button" @click="${this.closeModal}">
+                      ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}
+                    </button>
+                    <div
+                      class="bg-grey-600 lg:max-w-[515px] w-full p-4 md:p-16 justify-between items-center flex flex-col relative"
+                    >
+                      <div class="items-center flex flex-col">
+                        ${this.dataModalRegister.modal.registerPopUp.logo
+                          ? html`
+                              <img
+                                class=" max-w-[214px] md:max-w-[321px] pt-2 md:pt-0"
+                                src="${this.dataModalRegister.modal
+                                  .registerPopUp.logo}"
+                                alt="logo kompas pro mining"
+                              />
+                            `
+                          : nothing}
+                        <div
+                          class="flex flex-col mt-6 md:mt-10 gap-2 text-left overflow-hidden ${this
+                            .showMobileBenefit
+                            ? 'max-h-fit'
+                            : 'max-h-[150px] md:max-h-fit'}"
+                        >
+                          ${this.dataModalRegister.modal.registerPopUp
+                            .benefits &&
+                          this.dataModalRegister.modal.registerPopUp.benefits
+                            .length
+                            ? this.dataModalRegister.modal.registerPopUp.benefits.map(
+                                item =>
+                                  html`
+                                    <div
+                                      class="flex items-baseline text-left text-white"
+                                    >
+                                      <div
+                                        class="text-green-400 h-5 w-5 md:h-6 md:w-6 flex shrink-0 items-center justify-center"
+                                      >
+                                        ${unsafeSVG(
+                                          getFontAwesomeIcon(
+                                            'fas',
+                                            'check',
+                                            16,
+                                            16
+                                          )
+                                        )}
+                                      </div>
+                                      <h6
+                                        class="text-sm md:text-lg font-sans ml-1 leading-6"
+                                      >
+                                        ${item}
+                                      </h6>
+                                    </div>
+                                  `
+                              )
+                            : nothing}
+                        </div>
+                      </div>
+                      <button
+                        @click="${this.toggleMobileBenefit}"
+                        class="bg-grey-600 absolute text-grey-100 py-6 w-full bottom-0 left-0 text-center md:hidden"
+                      >
+                        <div
+                          class="h-12 transparent-linear-dark -mt-[72px] z-0 w-full absolute ${this
+                            .showMobileBenefit
+                            ? 'hidden'
+                            : ''}"
+                        ></div>
+                        <div
+                          class="flex flex-row items-center justify-center gap-4"
+                        >
+                          ${this.showMobileBenefit
+                            ? 'Sembunyikan'
+                            : 'Lihat keuntungan lainnnya'}
+                          ${unsafeSVG(
+                            getFontAwesomeIcon(
+                              'fas',
+                              this.showMobileBenefit
+                                ? 'chevron-up'
+                                : 'chevron-down'
+                            )
+                          )}
+                        </div>
+                      </button>
+                      <div
+                        class="hidden md:block text-grey-300 pt-10 border-t border-grey-500 w-full text-center"
+                      >
+                        Butuh bantuan? Hubungi
+                        <button
+                          @click=${this.customerServiceClicked}
+                          class="font-bold underline"
+                        >
+                          Layanan Pelanggan.
+                        </button>
+                      </div>
+                    </div>
+                    <div class="w-full h-full">${this.templateForm()}</div>
+                  </div>
+                </div>
+              `
+            : ''}
+          ${this.isModalOpen && this.confirmation
+            ? html` <div
+                class="modal-overlay px-4"
+                @click="${this.closeModal}"
+                @keydown=${() => this.closeModal()}
+              >
+                <div
+                  class="modal-content max-w-[624px] max-h-[577px] items-end flex flex-col justify-end h-full w-full p-4 md:p-10"
+                  @click="${(e: { stopPropagation: () => any }) =>
+                    e.stopPropagation()}"
+                  @keydown=${(e: { stopPropagation: () => any }) =>
+                    e.stopPropagation()}
+                >
+                  <button class="close-button" @click="${this.closeModal}">
+                    ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}
+                  </button>
+                  ${this.dataModalRegister.modal.successPopUp.logo
+                    ? html`
+                        <img
+                          class="w-full max-w-[242px] mx-auto"
+                          src="${this.dataModalRegister.modal.successPopUp
+                            .logo}"
+                          alt="konfirmasi"
+                        />
+                      `
+                    : nothing}
+                  <div class="text-grey-300 text-center mt-8">
+                    <h1 class="text-lg md:text-xl font-bold ">
+                      ${this.dataModalRegister.modal.successPopUp.title}
+                    </h1>
+                    <p
+                      class="text-sm md:text-base mt-4 bold-yellow"
+                      .innerHTML="${this.dataModalRegister.modal.successPopUp
+                        .description}"
+                    ></p>
+                    <button
+                      @click="${this.closeModal}"
+                      class="bg-yellow-500 text-center h-10 rounded text-grey-600 mt-6 w-full font-bold"
+                    >
+                      Oke
+                    </button>
+                  </div>
+                </div>
+              </div>`
+            : ''} `
+      : nothing
+  }
+}

package/src/components/kompasid-paywall-modal-register/types.ts

@@ -0,0 +1,39 @@
+export interface CardRegister {
+  labelPackage: string
+  textInvitation: string
+  isButtonSolid: boolean
+  textButton: string
+}
+
+export interface hotline {
+  text: string
+  url: string
+}
+
+export interface sectionRegister {
+  title: string
+  description: string
+}
+
+export interface popUpRegister {
+  logo: string
+  benefits: string[]
+  sectionRegister: sectionRegister
+  hotline: hotline
+}
+
+export interface popUpSuccess {
+  logo: string
+  title: string
+  description: string
+}
+
+export interface PopUp {
+  registerPopUp: popUpRegister
+  successPopUp: popUpSuccess
+}
+
+export interface ModalRegister {
+  card: CardRegister
+  modal: PopUp
+}

package/src/index.ts

@@ -11,6 +11,7 @@ export { KompasHeaderAccount } from './components/kompasid-header-account/Kompas
 export { KompasHeaderNotification } from './components/kompasid-header-notification/KompasHeaderNotification.js'
 export { KompasGracePeriod } from './components/kompasid-grace-period/KompasGracePeriod.js'
 export { KompasMeteredPaywallPersonalize } from './components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js'
+export { KompasPaywallModalRegister } from './components/kompasid-paywall-modal-register/KompasPaywallModalRegister.js'
 
 declare global {
   interface Window {