@kompasid/lit-web-components 0.9.47 → 0.9.49

package/dist/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.js

@@ -0,0 +1,589 @@
+import { __decorate } from "tslib";
+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';
+let KompasPaywallModalRegister = class KompasPaywallModalRegister extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Properties
+         */
+        this.subscriptionStatus = '';
+        this.userGuid = '';
+        this.isModalOpen = false;
+        this.confirmation = false;
+        this.dataModalRegister = {};
+        this.showModalRegister = false;
+        this.showMobileBenefit = false;
+        this.formData = {
+            nameUser: '',
+            email: '',
+            nomor: '',
+            nameCompany: '',
+        };
+        this.formErrors = {
+            nameUser: '',
+            email: '',
+            nomor: '',
+            nameCompany: '',
+        };
+        this.formTouched = {
+            nameUser: false,
+            email: false,
+            nomor: false,
+            nameCompany: false,
+        };
+        this.formSubmitted = false;
+        this.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>
+  `;
+    }
+    /**
+     * Lifecycle
+     */
+    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;
+    }
+    toggleMobileBenefit() {
+        this.showMobileBenefit = !this.showMobileBenefit;
+    }
+    handleInput(e) {
+        const target = e.target;
+        const name = target.name;
+        this.formData = {
+            ...this.formData,
+            [name]: target.value,
+        };
+        if (this.formTouched[name] || this.formSubmitted) {
+            this.validateField(name);
+        }
+    }
+    handleBlur(e) {
+        const target = e.target;
+        const name = target.name;
+        this.formTouched = {
+            ...this.formTouched,
+            [name]: true,
+        };
+        this.validateField(name);
+    }
+    validateField(field) {
+        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,
+        };
+    }
+    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() !== ''));
+    }
+    async handleSubmit(e) {
+        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);
+        }
+    }
+    customerServiceClicked() {
+        this.redirectToHelpdesk();
+    }
+    redirectToHelpdesk() {
+        this.sendDataLayeronHelpDesk();
+        window.open('https://api.whatsapp.com/send/?phone=6281290050800&text=Halo,%20saya%20perlu%20informasi%20mengenai%20kompas.id');
+    }
+    sendDataLayeronHelpDesk() {
+        window.dataLayer.push({
+            event: 'helpOfferClick',
+            userType: this.subscriptionStatus,
+            GUID: this.userGuid,
+            interface: deviceType(),
+        });
+    }
+    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) => e.stopPropagation()}"
+                    @keydown=${(e) => 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) => e.stopPropagation()}"
+                  @keydown=${(e) => 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;
+    }
+};
+KompasPaywallModalRegister.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,
+];
+__decorate([
+    property({ type: String })
+], KompasPaywallModalRegister.prototype, "subscriptionStatus", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallModalRegister.prototype, "userGuid", void 0);
+__decorate([
+    state()
+], KompasPaywallModalRegister.prototype, "isModalOpen", void 0);
+__decorate([
+    state()
+], KompasPaywallModalRegister.prototype, "confirmation", void 0);
+__decorate([
+    state()
+], KompasPaywallModalRegister.prototype, "dataModalRegister", void 0);
+__decorate([
+    state()
+], KompasPaywallModalRegister.prototype, "showModalRegister", void 0);
+__decorate([
+    state()
+], KompasPaywallModalRegister.prototype, "showMobileBenefit", void 0);
+__decorate([
+    state()
+], KompasPaywallModalRegister.prototype, "formData", void 0);
+__decorate([
+    state()
+], KompasPaywallModalRegister.prototype, "formErrors", void 0);
+__decorate([
+    state()
+], KompasPaywallModalRegister.prototype, "formTouched", void 0);
+__decorate([
+    state()
+], KompasPaywallModalRegister.prototype, "formSubmitted", void 0);
+KompasPaywallModalRegister = __decorate([
+    customElement('kompasid-paywall-modal-register')
+], KompasPaywallModalRegister);
+export { KompasPaywallModalRegister };
+//# sourceMappingURL=KompasPaywallModalRegister.js.map

package/dist/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.js.map

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