@kompasid/lit-web-components 0.1.0

package/src/components/kompas-paywall-banner-registration/KompasPaywallBannerRegistration.ts

@@ -0,0 +1,92 @@
+import { html, css, LitElement } from 'lit'
+import { property, customElement } from 'lit/decorators.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { Registration } from '../kompas-paywall/types.js'
+import { deviceType } from '../../utils/deviceType.js'
+
+@customElement('kompas-paywall-banner-registration')
+export class KompasPaywallBannerRegistration extends LitElement {
+  static styles = [css``, TWStyles]
+
+  @property({ type: String }) theme = ''
+  @property({ type: Object }) bannerData: Registration | undefined = undefined
+
+  get isDark() {
+    return this.theme === 'dark'
+  }
+
+  private redirectToRegister(): void {
+    this.sendDataLayer('registrationOfferClick')
+    const loginHost: string = 'https://account.kompas.id/login'
+    const nextParams: string = encodeURIComponent(window.location.href)
+    const directUrlRegister: string = `${loginHost}?next=${nextParams}`
+    window.location.href = directUrlRegister
+  }
+
+  private sendDataLayer(value: string): void {
+    window.dataLayer.push({
+      event: value,
+      interface: deviceType(),
+    })
+  }
+
+  render() {
+    this.sendDataLayer('registrationOfferimppression')
+    return html`
+      <div class="flex flex-col items-center my-5">
+        <div
+          class="flex flex-col md:flex-row justify-between items-center w-full"
+        >
+          <div class="flex flex-col md:flex-row items-center w-full">
+            <img
+              class="object-cover w-20 h-20"
+              src=${this.bannerData?.img ?? ''}
+              alt="information-register-img"
+            />
+            <div
+              class="flex flex-col justify-start ${this.isDark &&
+              'text-white'} md:ml-6 my-4"
+            >
+              <h5
+                class="text-center md:text-left text-base md:text-xl font-serif font-bold"
+              >
+                ${this.bannerData?.title}
+              </h5>
+              <h6 class="text-center md:text-left">
+                ${this.bannerData?.subtitle}
+              </h6>
+            </div>
+          </div>
+          <button
+            @click=${() => this.redirectToRegister()}
+            class="w-40 md:w-52 h-auto ${this.isDark
+              ? 'bg-green-300'
+              : 'bg-brand-1'} rounded"
+          >
+            <h6
+              class="text-base ${this.isDark
+                ? 'text-black'
+                : 'text-white'} font-bold py-2 px-4"
+            >
+              ${this.bannerData?.label}
+            </h6>
+          </button>
+        </div>
+        <div class="border-b-2 border-grey-200 w-32 md:w-40 my-6"></div>
+        <div>
+          <h6 class="${this.isDark && 'text-white'}">
+            Sudah punya akun?
+            <button
+              @click=${() => this.redirectToRegister()}
+              class="font-bold ${this.isDark
+                ? 'text-blue-300'
+                : 'text-blue-600'} underline"
+            >
+              Silakan Masuk
+            </button>
+          </h6>
+        </div>
+      </div>
+    `
+  }
+}

package/src/components/kompas-paywall-banner-registration/readme.md

@@ -0,0 +1,31 @@
+# kompas-paywall-banner-registration
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute | Description | Type           | Default     |
+| ------------ | --------- | ----------- | -------------- | ----------- |
+| `bannerData` | --        |             | `Registration` | `undefined` |
+| `theme`      | `theme`   |             | `string`       | `''`        |
+
+
+## Dependencies
+
+### Used by
+
+ - [kompas-paywall](../kompas-paywall)
+
+### Graph
+```mermaid
+graph TD;
+  kompas-paywall --> kompas-paywall-banner-registration
+  style kompas-paywall-banner-registration fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Terbikin oleh tim front-end kompas.id*