@kompasid/lit-web-components 0.1.0

package/dist/src/components/kompas-paywall-banner-registration/KompasPaywallBannerRegistration.js

@@ -0,0 +1,100 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { TWStyles } from '../../../tailwind/tailwind.js';
+import { deviceType } from '../../utils/deviceType.js';
+let KompasPaywallBannerRegistration = class KompasPaywallBannerRegistration extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.theme = '';
+        this.bannerData = undefined;
+    }
+    get isDark() {
+        return this.theme === 'dark';
+    }
+    redirectToRegister() {
+        this.sendDataLayer('registrationOfferClick');
+        const loginHost = 'https://account.kompas.id/login';
+        const nextParams = encodeURIComponent(window.location.href);
+        const directUrlRegister = `${loginHost}?next=${nextParams}`;
+        window.location.href = directUrlRegister;
+    }
+    sendDataLayer(value) {
+        window.dataLayer.push({
+            event: value,
+            interface: deviceType(),
+        });
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        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=${(_b = (_a = this.bannerData) === null || _a === void 0 ? void 0 : _a.img) !== null && _b !== void 0 ? _b : ''}
+              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"
+              >
+                ${(_c = this.bannerData) === null || _c === void 0 ? void 0 : _c.title}
+              </h5>
+              <h6 class="text-center md:text-left">
+                ${(_d = this.bannerData) === null || _d === void 0 ? void 0 : _d.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"
+            >
+              ${(_e = this.bannerData) === null || _e === void 0 ? void 0 : _e.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>
+    `;
+    }
+};
+KompasPaywallBannerRegistration.styles = [css ``, TWStyles];
+__decorate([
+    property({ type: String })
+], KompasPaywallBannerRegistration.prototype, "theme", void 0);
+__decorate([
+    property({ type: Object })
+], KompasPaywallBannerRegistration.prototype, "bannerData", void 0);
+KompasPaywallBannerRegistration = __decorate([
+    customElement('kompas-paywall-banner-registration')
+], KompasPaywallBannerRegistration);
+export { KompasPaywallBannerRegistration };
+//# sourceMappingURL=KompasPaywallBannerRegistration.js.map

package/dist/src/components/kompas-paywall-banner-registration/KompasPaywallBannerRegistration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KompasPaywallBannerRegistration.js","sourceRoot":"","sources":["../../../../src/components/kompas-paywall-banner-registration/KompasPaywallBannerRegistration.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAG/C,IAAM,+BAA+B,GAArC,MAAM,+BAAgC,SAAQ,UAAU;IAAxD;;QAGuB,UAAK,GAAG,EAAE,CAAA;QACV,eAAU,GAA6B,SAAS,CAAA;IAgF9E,CAAC;IA9EC,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,KAAK,KAAK,MAAM,CAAA;IAC9B,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAA;QAC5C,MAAM,SAAS,GAAW,iCAAiC,CAAA;QAC3D,MAAM,UAAU,GAAW,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;QACnE,MAAM,iBAAiB,GAAW,GAAG,SAAS,SAAS,UAAU,EAAE,CAAA;QACnE,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,iBAAiB,CAAA;IAC1C,CAAC;IAEO,aAAa,CAAC,KAAa;QACjC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,KAAK;YACZ,SAAS,EAAE,UAAU,EAAE;SACxB,CAAC,CAAA;IACJ,CAAC;IAED,MAAM;;QACJ,IAAI,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAA;QAClD,OAAO,IAAI,CAAA;;;;;;;;oBAQK,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,GAAG,mCAAI,EAAE;;;;mDAIK,IAAI,CAAC,MAAM;YAChD,YAAY;;;;;kBAKR,MAAA,IAAI,CAAC,UAAU,0CAAE,KAAK;;;kBAGtB,MAAA,IAAI,CAAC,UAAU,0CAAE,QAAQ;;;;;qBAKtB,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;yCACX,IAAI,CAAC,MAAM;YACtC,CAAC,CAAC,cAAc;YAChB,CAAC,CAAC,YAAY;;;iCAGK,IAAI,CAAC,MAAM;YAC5B,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,YAAY;;gBAEd,MAAA,IAAI,CAAC,UAAU,0CAAE,KAAK;;;;;;uBAMf,IAAI,CAAC,MAAM,IAAI,YAAY;;;uBAG3B,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;iCACrB,IAAI,CAAC,MAAM;YAC5B,CAAC,CAAC,eAAe;YACjB,CAAC,CAAC,eAAe;;;;;;;KAO5B,CAAA;IACH,CAAC;;AAlFM,sCAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAoB;AAEL;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAiD;AAJjE,+BAA+B;IAD3C,aAAa,CAAC,oCAAoC,CAAC;GACvC,+BAA+B,CAoF3C","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Registration } from '../kompas-paywall/types.js'\nimport { deviceType } from '../../utils/deviceType.js'\n\n@customElement('kompas-paywall-banner-registration')\nexport class KompasPaywallBannerRegistration extends LitElement {\n  static styles = [css``, TWStyles]\n\n  @property({ type: String }) theme = ''\n  @property({ type: Object }) bannerData: Registration | undefined = undefined\n\n  get isDark() {\n    return this.theme === 'dark'\n  }\n\n  private redirectToRegister(): void {\n    this.sendDataLayer('registrationOfferClick')\n    const loginHost: string = 'https://account.kompas.id/login'\n    const nextParams: string = encodeURIComponent(window.location.href)\n    const directUrlRegister: string = `${loginHost}?next=${nextParams}`\n    window.location.href = directUrlRegister\n  }\n\n  private sendDataLayer(value: string): void {\n    window.dataLayer.push({\n      event: value,\n      interface: deviceType(),\n    })\n  }\n\n  render() {\n    this.sendDataLayer('registrationOfferimppression')\n    return html`\n      <div class=\"flex flex-col items-center my-5\">\n        <div\n          class=\"flex flex-col md:flex-row justify-between items-center w-full\"\n        >\n          <div class=\"flex flex-col md:flex-row items-center w-full\">\n            <img\n              class=\"object-cover w-20 h-20\"\n              src=${this.bannerData?.img ?? ''}\n              alt=\"information-register-img\"\n            />\n            <div\n              class=\"flex flex-col justify-start ${this.isDark &&\n              'text-white'} md:ml-6 my-4\"\n            >\n              <h5\n                class=\"text-center md:text-left text-base md:text-xl font-serif font-bold\"\n              >\n                ${this.bannerData?.title}\n              </h5>\n              <h6 class=\"text-center md:text-left\">\n                ${this.bannerData?.subtitle}\n              </h6>\n            </div>\n          </div>\n          <button\n            @click=${() => this.redirectToRegister()}\n            class=\"w-40 md:w-52 h-auto ${this.isDark\n              ? 'bg-green-300'\n              : 'bg-brand-1'} rounded\"\n          >\n            <h6\n              class=\"text-base ${this.isDark\n                ? 'text-black'\n                : 'text-white'} font-bold py-2 px-4\"\n            >\n              ${this.bannerData?.label}\n            </h6>\n          </button>\n        </div>\n        <div class=\"border-b-2 border-grey-200 w-32 md:w-40 my-6\"></div>\n        <div>\n          <h6 class=\"${this.isDark && 'text-white'}\">\n            Sudah punya akun?\n            <button\n              @click=${() => this.redirectToRegister()}\n              class=\"font-bold ${this.isDark\n                ? 'text-blue-300'\n                : 'text-blue-600'} underline\"\n            >\n              Silakan Masuk\n            </button>\n          </h6>\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompas-paywall-body/KompasPaywallBody.d.ts

@@ -0,0 +1,107 @@
+import { LitElement } from 'lit';
+import { PaywallProduct } from '../kompas-paywall/types.js';
+export declare class KompasPaywallBody extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Props
+     */
+    /**
+     * prop slug untuk menghandle slug
+     * prop isLogin untuk menghandle apakah user sudah login atau belum
+     * prop type untuk menghandle tipe epaper
+     * prop paywallData untuk menghandle data paywall
+     * prop userGuid untuk menghandle user Guid
+     * prop subscriptionStatus untuk menghandle status subscription user
+     * prop countdownArticle untuk menghandle count artikel
+     * prop swgEnable untuk menghandle swg apakah di aktifkan atau tidak
+     * prop paywall_location = The location where user encounter the paywall
+     * prop paywall_subscription_package = The name of the subscription package viewed by user
+     * prop paywall_subscription_id = The ID of the subscription package viewed by user
+     * prop paywall_subscription_price = The price of the subscriprtion package viewed by user
+     * prop paywall_position = The position of the subscription package viewed by user
+     * prop tracker_page_type = Type of the page
+     * prop tracker_content_id = ID of article (slug)
+     * prop tracker_content_type = Whether it's free article or paid article
+     * prop tracker_content_title = The title of article
+     * prop tracker_content_categories = The category of the content
+     * prop tracker_user_type = Type of user based on their subscription
+     * prop tracker_subscription_status = Status of their subscription
+     * prop tracker_page_domain = Page Domain
+     * prop tracker_metered_wall_type = The type of Metered Wall
+     * prop tracker_metered_wall_balance = The balance of their metered wall
+     * prop tracker_metered_wall_balance = The edition of epaper viewed by user
+     * prop theme = The theme of the paywall component
+     */
+    slug: string;
+    udin: number;
+    isLogin: boolean;
+    type: 'epaper' | 'reguler';
+    paywallData: PaywallProduct | undefined;
+    userGuid: string;
+    subscriptionStatus: string;
+    countdownArticle: number;
+    swgEnable: boolean;
+    paywall_location: string;
+    paywall_subscription_package: string;
+    paywall_subscription_id: number;
+    paywall_subscription_price: number;
+    paywall_position: number;
+    tracker_page_type: string;
+    tracker_content_id: string;
+    tracker_content_title: string;
+    tracker_content_categories: string;
+    tracker_content_type: string;
+    tracker_user_type: string;
+    tracker_subscription_status: string;
+    tracker_page_domain: string;
+    tracker_metered_wall_type: string;
+    tracker_metered_wall_balance: number;
+    tracker_epaper_edition: string;
+    theme: string;
+    private isExtensionsOpened;
+    private kompasAkunHost;
+    private kompasApigenHost;
+    private kompasApiWcmHost;
+    private kompasLoginHost;
+    private selfHost;
+    private swgPublisherName;
+    private swgPublisherId;
+    private swgProductId;
+    private errorFlag;
+    buttonElement: HTMLButtonElement;
+    private getRupiahFormat;
+    private redirectToCheckout;
+    private redirectToPrevUrl;
+    private redirectToSubscriber;
+    private redirectToRegister;
+    private redirectToHelpdesk;
+    private paymentExtensionHandler;
+    get isDark(): boolean;
+    get redirectToLogin(): string;
+    private getRegisterToken;
+    private getUserToken;
+    private getSubscriptionToken;
+    private createSwG;
+    private subscribeWithGoogleButton;
+    private jsonScript;
+    connectedCallback(): void;
+    private sendDataLayer;
+    private sendDataLayeronHelpDesk;
+    private sendDataLayeronButtonBuyPackage;
+    private sendDataLayeronPaywallBody;
+    private headerSection;
+    private descriptionSection;
+    private informationPackages;
+    private separatorLine;
+    private paymentDesktopSection;
+    private paymentMobileSection;
+    private paymentMobileExtension;
+    private primaryPackages;
+    private secondaryPackages;
+    private packagesSection;
+    private topNavigator;
+    private helpDesk;
+    private authRegister;
+    private userAction;
+    render(): import("lit-html").TemplateResult<1>;
+}