@kompasid/lit-web-components 0.8.8 → 0.8.10

package/demo/index.html

@@ -54,6 +54,7 @@
       import '../dist/src/components/kompasid-freewall/KompasFreewall.js'
       import '../dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'
       import '../dist/src/components/kompasid-header-account/KompasHeaderAccount.js'
+      import '../dist/src/components/kompasid-header-notification/KompasHeaderNotification.js'
       import '../dist/src/components/kompasid-grace-period/KompasGracePeriod.js'
 
       const type = 'reguler'
@@ -103,6 +104,18 @@
       const totalGracePeriod = '5'
       const productId = 9802032
 
+      const getCookie = name => {
+        const value = `; ${document.cookie}`
+        const parts = value.split(`; ${name}=`)
+        if (parts && parts.length === 2) {
+          return parts.pop().split(';').shift()
+        }
+        return null
+      }
+
+      const accessToken = getCookie('kompas._token')
+      const refreshToken = getCookie('kompas._token_refresh')
+
       const userData = {
         userName: 'User Fullname',
         expired: 'Berakhir: 6 hari lagi',
@@ -134,6 +147,12 @@
             <div
               style="max-width: 1280px; margin: auto; display: flex;padding:0 30px"
             >
+              <kompasid-header-notification
+                style="margin-left: auto; margin-right: 5px; display: flex; align-items: center"
+                .accessToken=${accessToken}
+                .refreshToken=${refreshToken}
+                domain="cloud"
+              ></kompasid-header-notification>
               <kompasid-header-account
                 .userData=${userData}
                 .cart_url=${cartUrl}
@@ -161,7 +180,7 @@
                 .tracker_page_domain=${trackerPageDomain}
                 .metered_wall_type=${meteredWallType}
                 .tracker_metered_wall_balance=${trackerMeteredWallBalance}
-                style="margin-left: auto; height: 25px; display: flex; align-items: center"
+                style="margin-left: 10px; height: 25px; display: flex; align-items: center"
               ></kompasid-header-account>
             </div>
           </header>

package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import { UserNotification } from './types.js';
+export declare class KompasHeaderNotification extends LitElement {
+    static styles: import("lit").CSSResult[];
+    isShowDropdown: boolean;
+    selectedTab: string;
+    notificationInfoData: UserNotification;
+    notificationContentData: any[];
+    isDataLoaded: boolean;
+    accessToken: string;
+    refreshToken: string;
+    domain: string;
+    constructor();
+    /**
+     * Function to format date
+     */
+    formatDate(date: string): string;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): Promise<void>;
+    private apiFetch;
+    private getNotifRubrik;
+    private getNotifList;
+    private getEpaperData;
+    private notifRead;
+    private loadData;
+    private toggleDropdown;
+    private notificationIcon;
+    private handleClick;
+    private redirectTo;
+    private handleClickOutside;
+    private notificationInfoSection;
+    private redirectToNotification;
+    private notificationContentSection;
+    private notificationPopup;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js

@@ -0,0 +1,495 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { format, isToday, formatDistanceStrict, subDays } from 'date-fns';
+import { id } from 'date-fns/locale/id';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
+import { TWStyles } from '../../../tailwind/tailwind.js';
+import { customFetch } from './utils.js';
+let KompasHeaderNotification = class KompasHeaderNotification extends LitElement {
+    constructor() {
+        super();
+        this.isShowDropdown = false;
+        this.selectedTab = 'Info';
+        this.notificationInfoData = {};
+        this.notificationContentData = [];
+        this.isDataLoaded = false;
+        this.accessToken = '';
+        this.refreshToken = '';
+        this.domain = 'id'; // 'id' | 'cloud'
+        this.handleClick = (value) => {
+            this.selectedTab = value;
+        };
+        this.redirectTo = async (notifId, link) => {
+            const res = await this.notifRead(notifId);
+            if (res.status === 200) {
+                this.notificationInfoData = {
+                    ...this.notificationInfoData,
+                    notificationList: this.notificationInfoData.notificationList
+                        ? this.notificationInfoData.notificationList.map(notifItem => ({
+                            ...notifItem,
+                            isRead: notifItem.notificationId === notifId ? true : notifItem.isRead,
+                        }))
+                        : [],
+                };
+            }
+            if (link) {
+                const url = new URL(decodeURIComponent(link));
+                window.open(url, '_blank');
+            }
+        };
+        this.handleClickOutside = this.handleClickOutside.bind(this);
+    }
+    /**
+     * Function to format date
+     */
+    formatDate(date) {
+        // Check if the provided date is today
+        let result;
+        if (isToday(date)) {
+            // Return time difference if it's today (e.g., "7 hours ago")
+            result = `${formatDistanceStrict(date, new Date(), { locale: id })} lalu`;
+        }
+        else {
+            // Return formatted date (e.g., "12 Sep 2024, 09:00")
+            result = format(date, 'dd MMM yyyy, HH:mm', { locale: id });
+        }
+        return result;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.isShowDropdown = false;
+        if (this.accessToken && this.refreshToken && this.domain)
+            await this.loadData();
+        document.addEventListener('click', this.handleClickOutside);
+    }
+    async disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this.handleClickOutside);
+    }
+    async apiFetch(url, options) {
+        const response = await customFetch(url, this.refreshToken, this.accessToken, this.domain, { ...options });
+        return response;
+    }
+    async getNotifRubrik() {
+        const req = this.apiFetch(`https://cds.kompas.${this.domain}/api/v1/article/pilihanku`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+        return req;
+    }
+    async getNotifList() {
+        const req = await this.apiFetch(`https://api.kompas.${this.domain}/account/api/v1/users/notification`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+        return req;
+    }
+    async getEpaperData() {
+        const formatDate = 'yyyy/MM/dd';
+        const startDate = format(subDays(new Date(), 1), formatDate);
+        const endDate = format(new Date(), formatDate).toString();
+        const req = await this.apiFetch(`https://apiepaper.kompas.${this.domain}/products?startDate=${startDate}&endDate=${endDate}&sort=desc`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+        return req;
+    }
+    async notifRead(notifId) {
+        const req = await this.apiFetch(`https://api.kompas.${this.domain}/account/api/v1/users/notification/read`, {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            method: 'PUT',
+            body: JSON.stringify({
+                notificationId: notifId,
+            }),
+        });
+        return req;
+    }
+    async loadData() {
+        const apiCalls = [
+            this.getNotifList(),
+            this.getNotifRubrik(),
+            this.getEpaperData(),
+        ];
+        this.isDataLoaded = false;
+        Promise.all(apiCalls)
+            .then(responses => Promise.all(responses.map(response => response.json())))
+            .then(values => {
+            this.notificationInfoData = values[0].data;
+            this.notificationInfoData.notificationList = null;
+            this.notificationInfoData.notificationList =
+                this.notificationInfoData.notificationList || [];
+            const rubrikData = values[1].result || [];
+            const ePaperData = values[2].data[0] || {};
+            const { publishDate, description, thumbnail, title, url } = ePaperData;
+            const data = {
+                title,
+                category: [{ name: 'ePaper', slug: 'epaper' }],
+                publishedDateGmt: format(new Date(publishDate), 'yyyy-MM-dd HH:mm:ss'),
+                permalink: url,
+                thumbnails: {
+                    sizes: { thumbnailSquareMedium: { permalink: thumbnail } },
+                },
+                excerpt: description,
+            };
+            this.notificationContentData = [data, ...rubrikData];
+            this.notificationContentData.sort((a, b) => new Date(b.publishedDateGmt).getTime() -
+                new Date(a.publishedDateGmt).getTime());
+            this.isDataLoaded = true;
+        });
+    }
+    toggleDropdown() {
+        this.isShowDropdown = !this.isShowDropdown;
+    }
+    notificationIcon() {
+        const notificationIndicator = () => {
+            if (!this.notificationInfoData.notificationCount)
+                return html ``;
+            return html `<div
+        class="header-account--notification-indicator animate-ping"
+      ></div>`;
+        };
+        return html `
+      <button
+        @click=${this.toggleDropdown}
+        class="cursor-pointer relative flex items-center"
+      >
+        ${notificationIndicator()}
+        <div class="flex flex-row items-center self-center">
+          <div class="text-white cursor-pointer mt-0.5">
+            ${unsafeSVG(getFontAwesomeIcon('fas', 'bell', 21, 21))}
+          </div>
+        </div>
+      </button>
+    `;
+    }
+    handleClickOutside(event) {
+        var _a;
+        if (!this.isShowDropdown)
+            return;
+        const popup = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('headerNotification');
+        const ev = event.composedPath();
+        if (this.isShowDropdown && popup && !(ev === null || ev === void 0 ? void 0 : ev.includes(popup))) {
+            this.isShowDropdown = false; // Close the popup
+        }
+    }
+    // Notification Info
+    notificationInfoSection() {
+        const { notificationList, } = this.notificationInfoData;
+        // Empty state
+        if (!notificationList || !notificationList.length)
+            return html `
+        <div class="text-center px-4 pt-6 pb-18">
+          <img
+            src="../../assets/empty-state-notification.png"
+            alt="empty-state-notification"
+            class="w-auto mx-auto"
+          />
+          <p class="font-bold text-center text-lg py-2">Belum Ada Notifikasi</p>
+          <p class="px-2">
+            Kami akan memberitahukan Anda ketika ada informasi dan pemberitahuan
+            terbaru.
+          </p>
+        </div>
+      `;
+        const notificationInfoListTemplate = (item) => {
+            const imgUrl = item.label === 'Akun'
+                ? `https://cdn-www.kompas.id/assets/notifikasi-akun.svg`
+                : `https://cdn-www.kompas.id/assets/langganan-anda-telah-berakhir.svg`;
+            return html `<div class="w-3/4 pr-1">
+          <div class="flex items-center mb-1 text-xs">
+            <span class="text-green-500 bg-green-100 rounded-sm p-1 px-2">
+              ${item.label}
+            </span>
+            <span class="text-grey-400 ml-2"
+              >${this.formatDate(item.time)}</span
+            >
+          </div>
+          <div>
+            <p class="text-sm font-bold">${item.title}</p>
+            <p class="text-sm">${item.description}</p>
+          </div>
+        </div>
+        <div class="w-1/4">
+          <img src="${imgUrl}" alt="${item.label}-alt" class="w-14 h-14" />
+        </div>`;
+        };
+        return html `<div class="h-[300px] overflow-y-scroll">
+      ${notificationList.map(item => html `<button
+            class="flex w-full text-left items-start p-4 cursor-pointer justify-between ${!item.isRead
+            ? 'bg-blue-100'
+            : ''}"
+            @click=${() => this.redirectTo(item.notificationId, item.link)}
+          >
+            ${notificationInfoListTemplate(item)}
+          </button> `)}
+      </div>
+      <!-- Footer Link -->
+      <div class="px-4 py-4 text-center">
+        <a href="#" @click="${() => this.redirectToNotification('info')}" class="text-base font-bold text-blue-500">
+          Lihat Selengkapnya</a
+        >
+      </div>
+    </div>`;
+    }
+    redirectToNotification(tab) {
+        window.open(`https://account.kompas.id/manage-account/notification/${tab}`, '_blank');
+    }
+    // Notification Content
+    notificationContentSection() {
+        // Empty state
+        if (!this.notificationContentData.length) {
+            return html `
+        <div class="text-center px-4 pt-6 pb-18">
+          <img
+            src="../../assets/empty-state-notification.png"
+            alt="empty-state-notification"
+            class="w-auto mx-auto"
+          />
+          <p class="font-bold text-center text-lg py-2">Belum Ada Notifikasi</p>
+          <p class="px-2">
+            Kami akan memberitahukan Anda ketika ada informasi dan pemberitahuan
+            terbaru.
+          </p>
+        </div>
+      `;
+        }
+        const notificationContentListTemplate = (item) => html `<div
+        class="w-3/4 pr-1 "
+      >
+        <div class="flex items-center mb-1 text-xs">
+          <span class="text-green-500 bg-green-100 rounded-sm p-1 px-2">
+            ${item.category[0].name}
+          </span>
+          <span class="text-grey-400 ml-2">
+            ${this.formatDate(item.publishedDateGmt)}</span
+          >
+        </div>
+        <p class="font-bold text-base text-customTextColor py-1">
+          ${item.title}
+        </p>
+      </div>
+      <div class="w-1/4">
+        <img
+          src="${item.thumbnails.sizes.thumbnailSquareMedium.permalink}"
+          alt="content-img-alt"
+          class="w-14 h-14 object-cover"
+        />
+      </div>`;
+        return html `<div class="h-[300px] overflow-y-scroll">
+      ${this.notificationContentData.map(item => html `<button
+            class="flex w-full text-left items-start p-4 cursor-pointer justify-between ${!item.isRead
+            ? 'bg-blue-100'
+            : ''}"
+            @click=${() => window.open(item.permalink, '_blank')}
+          >
+            ${notificationContentListTemplate(item)}
+          </button> `)}
+      </div>
+      <!-- Footer Link -->
+      <div class="px-4 py-4 text-center">
+        <a href="#" @click="${() => this.redirectToNotification('konten')}"  class="text-base font-bold text-blue-500">
+          Lihat Selengkapnya</a
+        >
+      </div>
+    </div>`;
+    }
+    notificationPopup() {
+        const tab = ['Info', 'Konten'];
+        return html `
+      <div
+        id="notificationPopup"
+        class="header-notificaion-dropdown rounded-lg shadow-lg z-50 mt-2 ${this
+            .isShowDropdown
+            ? 'active'
+            : ''}"
+      >
+        <div class="sticky">
+          <div class="flex justify-center py-2 border-b border-grey-300">
+            <span class="font-bold text-base">Notifikasi</span>
+          </div>
+          <!-- Tabs for Info and Content -->
+          <div class="flex justify-between">
+            ${tab.map(item => html `
+                  <button
+                    class="focus:outline-none py-2 w-1/2 ${this.selectedTab ===
+            item && 'link-active'}"
+                    @click=${() => this.handleClick(item)}
+                  >
+                    ${item}
+                  </button>
+                `)}
+          </div>
+        </div>
+
+        <!-- Notification Content -->
+        ${this.selectedTab === 'Info'
+            ? this.notificationInfoSection()
+            : this.notificationContentSection()}
+      </div>
+    `;
+    }
+    render() {
+        return html `<div id="headerNotification" class="relative">
+      ${this.isDataLoaded
+            ? this.notificationIcon()
+            : html `<div class="text-white cursor-pointer mt-0.5 animate-spin">
+            ${unsafeSVG(getFontAwesomeIcon('fa', 'circle-notch', 21, 21))}
+          </div>`}
+      ${this.isShowDropdown ? this.notificationPopup() : ''}
+    </div>`;
+    }
+};
+KompasHeaderNotification.styles = [
+    css `
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+
+      .header-account--notification-indicator {
+        position: absolute;
+        top: 0;
+        height: 0.5rem;
+        width: 0.5rem;
+        background-color: #ff7a00;
+        border-radius: 50%;
+        right: -0.403rem;
+        top: -0.281rem;
+      }
+
+      .header-notificaion-dropdown {
+        width: 20.5rem;
+        background-color: #ffffff;
+        font-family: 'PT Sans', sans-serif;
+        font-size: 0.875rem;
+        position: absolute;
+        right: -7.5vmax;
+      }
+
+      .w-14 {
+        width: 3.25rem;
+      }
+
+      .pb-18 {
+        padding-bottom: 4.5rem;
+      }
+
+      .h-\\[300px\\] {
+        height: 300px;
+      }
+
+      .h-14 {
+        height: 3.25rem;
+      }
+
+      .bg-green-100 {
+        --tw-bg-opacity: 1;
+        background-color: rgb(238 252 210 / var(--tw-bg-opacity));
+      }
+
+      .overflow-y-scroll {
+        overflow-y: scroll;
+      }
+
+      .link-active {
+        color: #0468cb;
+        border-color: #0468cb;
+        border-bottom-width: 3px;
+        background-color: transparent !important;
+      }
+
+      .animate-spin {
+        animation: spin 2s linear infinite;
+      }
+
+      @keyframes spin {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      .object-cover {
+        object-fit: cover;
+      }
+
+      .z-index-max {
+        z-index: 99999;
+      }
+
+      /* Custom Scrollbar for header */
+      /* width */
+      ::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      /* Track */
+      ::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      /* Handle */
+      ::-webkit-scrollbar-thumb {
+        background: #0356a8;
+        border-radius: 100px;
+      }
+
+      /* Handle on hover */
+      ::-webkit-scrollbar-thumb:hover {
+        background: #0356a8;
+      }
+
+      @media (min-width: 1024px) {
+        .header-notificaion-dropdown {
+          right: -4vmax;
+        }
+      }
+
+      @media (max-width: 360px) {
+        .header-notificaion-dropdown {
+          right: -10vmax;
+        }
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    state()
+], KompasHeaderNotification.prototype, "isShowDropdown", void 0);
+__decorate([
+    state()
+], KompasHeaderNotification.prototype, "selectedTab", void 0);
+__decorate([
+    state()
+], KompasHeaderNotification.prototype, "notificationInfoData", void 0);
+__decorate([
+    state()
+], KompasHeaderNotification.prototype, "notificationContentData", void 0);
+__decorate([
+    state()
+], KompasHeaderNotification.prototype, "isDataLoaded", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderNotification.prototype, "accessToken", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderNotification.prototype, "refreshToken", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderNotification.prototype, "domain", void 0);
+KompasHeaderNotification = __decorate([
+    customElement('kompasid-header-notification')
+], KompasHeaderNotification);
+export { KompasHeaderNotification };
+//# sourceMappingURL=KompasHeaderNotification.js.map

package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KompasHeaderNotification.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-notification/KompasHeaderNotification.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, isToday, formatDistanceStrict, subDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport {\n  UserNotification,\n  NotificationList,\n  ApiResponse,\n  ApiRubrikResponse,\n} from './types.js'\nimport { customFetch } from './utils.js'\n\n@customElement('kompasid-header-notification')\nexport class KompasHeaderNotification extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .header-account--notification-indicator {\n        position: absolute;\n        top: 0;\n        height: 0.5rem;\n        width: 0.5rem;\n        background-color: #ff7a00;\n        border-radius: 50%;\n        right: -0.403rem;\n        top: -0.281rem;\n      }\n\n      .header-notificaion-dropdown {\n        width: 20.5rem;\n        background-color: #ffffff;\n        font-family: 'PT Sans', sans-serif;\n        font-size: 0.875rem;\n        position: absolute;\n        right: -7.5vmax;\n      }\n\n      .w-14 {\n        width: 3.25rem;\n      }\n\n      .pb-18 {\n        padding-bottom: 4.5rem;\n      }\n\n      .h-\\\\[300px\\\\] {\n        height: 300px;\n      }\n\n      .h-14 {\n        height: 3.25rem;\n      }\n\n      .bg-green-100 {\n        --tw-bg-opacity: 1;\n        background-color: rgb(238 252 210 / var(--tw-bg-opacity));\n      }\n\n      .overflow-y-scroll {\n        overflow-y: scroll;\n      }\n\n      .link-active {\n        color: #0468cb;\n        border-color: #0468cb;\n        border-bottom-width: 3px;\n        background-color: transparent !important;\n      }\n\n      .animate-spin {\n        animation: spin 2s linear infinite;\n      }\n\n      @keyframes spin {\n        from {\n          transform: rotate(0deg);\n        }\n        to {\n          transform: rotate(360deg);\n        }\n      }\n\n      .object-cover {\n        object-fit: cover;\n      }\n\n      .z-index-max {\n        z-index: 99999;\n      }\n\n      /* Custom Scrollbar for header */\n      /* width */\n      ::-webkit-scrollbar {\n        width: 4px;\n      }\n\n      /* Track */\n      ::-webkit-scrollbar-track {\n        background: transparent;\n      }\n\n      /* Handle */\n      ::-webkit-scrollbar-thumb {\n        background: #0356a8;\n        border-radius: 100px;\n      }\n\n      /* Handle on hover */\n      ::-webkit-scrollbar-thumb:hover {\n        background: #0356a8;\n      }\n\n      @media (min-width: 1024px) {\n        .header-notificaion-dropdown {\n          right: -4vmax;\n        }\n      }\n\n      @media (max-width: 360px) {\n        .header-notificaion-dropdown {\n          right: -10vmax;\n        }\n      }\n    `,\n    TWStyles,\n  ]\n\n  @state() isShowDropdown: boolean = false\n  @state() selectedTab: string = 'Info'\n  @state() notificationInfoData: UserNotification = {} as UserNotification\n  @state() notificationContentData: any[] = []\n  @state() isDataLoaded: boolean = false\n\n  @property({ type: String }) accessToken = ''\n  @property({ type: String }) refreshToken = ''\n  @property({ type: String }) domain = 'id' // 'id' | 'cloud'\n\n  constructor() {\n    super()\n    this.handleClickOutside = this.handleClickOutside.bind(this)\n  }\n\n  /**\n   * Function to format date\n   */\n  formatDate(date: string) {\n    // Check if the provided date is today\n    let result\n    if (isToday(date)) {\n      // Return time difference if it's today (e.g., \"7 hours ago\")\n      result = `${formatDistanceStrict(date, new Date(), { locale: id })} lalu`\n    } else {\n      // Return formatted date (e.g., \"12 Sep 2024, 09:00\")\n      result = format(date, 'dd MMM yyyy, HH:mm', { locale: id })\n    }\n    return result\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    this.isShowDropdown = false\n\n    if (this.accessToken && this.refreshToken && this.domain)\n      await this.loadData()\n    document.addEventListener('click', this.handleClickOutside)\n  }\n\n  override async disconnectedCallback() {\n    super.disconnectedCallback()\n    document.removeEventListener('click', this.handleClickOutside)\n  }\n\n  private async apiFetch(url: string, options: any) {\n    const response = await customFetch(\n      url,\n      this.refreshToken,\n      this.accessToken,\n      this.domain,\n      { ...options }\n    )\n\n    return response\n  }\n\n  private async getNotifRubrik() {\n    const req = this.apiFetch(\n      `https://cds.kompas.${this.domain}/api/v1/article/pilihanku`,\n      {\n        method: 'GET',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n      }\n    )\n    return req\n  }\n\n  private async getNotifList() {\n    const req = await this.apiFetch(\n      `https://api.kompas.${this.domain}/account/api/v1/users/notification`,\n      {\n        method: 'GET',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n      }\n    )\n    return req\n  }\n\n  private async getEpaperData() {\n    const formatDate = 'yyyy/MM/dd'\n    const startDate = format(subDays(new Date(), 1), formatDate)\n    const endDate = format(new Date(), formatDate).toString()\n    const req = await this.apiFetch(\n      `https://apiepaper.kompas.${this.domain}/products?startDate=${startDate}&endDate=${endDate}&sort=desc`,\n      {\n        method: 'GET',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n      }\n    )\n\n    return req\n  }\n\n  private async notifRead(notifId: string) {\n    const req = await this.apiFetch(\n      `https://api.kompas.${this.domain}/account/api/v1/users/notification/read`,\n      {\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'PUT',\n        body: JSON.stringify({\n          notificationId: notifId,\n        }),\n      }\n    )\n    return req\n  }\n\n  private async loadData() {\n    const apiCalls = [\n      this.getNotifList(),\n      this.getNotifRubrik(),\n      this.getEpaperData(),\n    ]\n    this.isDataLoaded = false\n\n    Promise.all(apiCalls)\n      .then(responses =>\n        Promise.all(responses.map(response => response.json()))\n      )\n      .then(values => {\n        this.notificationInfoData = (\n          values[0] as ApiResponse<UserNotification>\n        ).data\n        this.notificationInfoData.notificationList = null\n        this.notificationInfoData.notificationList =\n          this.notificationInfoData.notificationList || []\n\n        const rubrikData = (values[1] as ApiRubrikResponse<any>).result || []\n        const ePaperData = (values[2] as ApiResponse<any>).data[0] || {}\n\n        const { publishDate, description, thumbnail, title, url } = ePaperData\n\n        const data = {\n          title,\n          category: [{ name: 'ePaper', slug: 'epaper' }],\n          publishedDateGmt: format(\n            new Date(publishDate),\n            'yyyy-MM-dd HH:mm:ss'\n          ),\n          permalink: url,\n          thumbnails: {\n            sizes: { thumbnailSquareMedium: { permalink: thumbnail } },\n          },\n          excerpt: description,\n        }\n\n        this.notificationContentData = [data, ...rubrikData]\n        this.notificationContentData.sort(\n          (a: any, b: any) =>\n            new Date(b.publishedDateGmt).getTime() -\n            new Date(a.publishedDateGmt).getTime()\n        )\n\n        this.isDataLoaded = true\n      })\n  }\n\n  private toggleDropdown() {\n    this.isShowDropdown = !this.isShowDropdown\n  }\n\n  private notificationIcon() {\n    const notificationIndicator = () => {\n      if (!this.notificationInfoData.notificationCount) return html``\n      return html`<div\n        class=\"header-account--notification-indicator animate-ping\"\n      ></div>`\n    }\n\n    return html`\n      <button\n        @click=${this.toggleDropdown}\n        class=\"cursor-pointer relative flex items-center\"\n      >\n        ${notificationIndicator()}\n        <div class=\"flex flex-row items-center self-center\">\n          <div class=\"text-white cursor-pointer mt-0.5\">\n            ${unsafeSVG(getFontAwesomeIcon('fas', 'bell', 21, 21))}\n          </div>\n        </div>\n      </button>\n    `\n  }\n\n  private handleClick = (value: string) => {\n    this.selectedTab = value\n  }\n\n  private redirectTo = async (notifId: string, link: string) => {\n    const res = await this.notifRead(notifId)\n\n    if (res.status === 200) {\n      this.notificationInfoData = {\n        ...this.notificationInfoData,\n        notificationList: this.notificationInfoData.notificationList\n          ? this.notificationInfoData.notificationList.map(notifItem => ({\n              ...notifItem,\n              isRead:\n                notifItem.notificationId === notifId ? true : notifItem.isRead,\n            }))\n          : [],\n      }\n    }\n\n    if (link) {\n      const url = new URL(decodeURIComponent(link))\n\n      window.open(url, '_blank')\n    }\n  }\n\n  private handleClickOutside(event: Event) {\n    if (!this.isShowDropdown) return\n\n    const popup = this.shadowRoot?.getElementById('headerNotification')\n    const ev = event.composedPath()\n    if (this.isShowDropdown && popup && !ev?.includes(popup as HTMLElement)) {\n      this.isShowDropdown = false // Close the popup\n    }\n  }\n\n  // Notification Info\n  private notificationInfoSection() {\n    const {\n      notificationList,\n    }: { notificationList: NotificationList[] | null } =\n      this.notificationInfoData\n\n    // Empty state\n    if (!notificationList || !notificationList.length)\n      return html`\n        <div class=\"text-center px-4 pt-6 pb-18\">\n          <img\n            src=\"../../assets/empty-state-notification.png\"\n            alt=\"empty-state-notification\"\n            class=\"w-auto mx-auto\"\n          />\n          <p class=\"font-bold text-center text-lg py-2\">Belum Ada Notifikasi</p>\n          <p class=\"px-2\">\n            Kami akan memberitahukan Anda ketika ada informasi dan pemberitahuan\n            terbaru.\n          </p>\n        </div>\n      `\n\n    const notificationInfoListTemplate = (item: NotificationList) => {\n      const imgUrl =\n        item.label === 'Akun'\n          ? `https://cdn-www.kompas.id/assets/notifikasi-akun.svg`\n          : `https://cdn-www.kompas.id/assets/langganan-anda-telah-berakhir.svg`\n\n      return html`<div class=\"w-3/4 pr-1\">\n          <div class=\"flex items-center mb-1 text-xs\">\n            <span class=\"text-green-500 bg-green-100 rounded-sm p-1 px-2\">\n              ${item.label}\n            </span>\n            <span class=\"text-grey-400 ml-2\"\n              >${this.formatDate(item.time)}</span\n            >\n          </div>\n          <div>\n            <p class=\"text-sm font-bold\">${item.title}</p>\n            <p class=\"text-sm\">${item.description}</p>\n          </div>\n        </div>\n        <div class=\"w-1/4\">\n          <img src=\"${imgUrl}\" alt=\"${item.label}-alt\" class=\"w-14 h-14\" />\n        </div>`\n    }\n\n    return html`<div class=\"h-[300px] overflow-y-scroll\">\n      ${notificationList.map(\n        item =>\n          html`<button\n            class=\"flex w-full text-left items-start p-4 cursor-pointer justify-between ${!item.isRead\n              ? 'bg-blue-100'\n              : ''}\"\n            @click=${() => this.redirectTo(item.notificationId, item.link)}\n          >\n            ${notificationInfoListTemplate(item)}\n          </button> `\n      )}\n      </div>\n      <!-- Footer Link -->\n      <div class=\"px-4 py-4 text-center\">\n        <a href=\"#\" @click=\"${() =>\n          this.redirectToNotification(\n            'info'\n          )}\" class=\"text-base font-bold text-blue-500\">\n          Lihat Selengkapnya</a\n        >\n      </div>\n    </div>`\n  }\n\n  private redirectToNotification(tab: string) {\n    window.open(\n      `https://account.kompas.id/manage-account/notification/${tab}`,\n      '_blank'\n    )\n  }\n\n  // Notification Content\n  private notificationContentSection() {\n    // Empty state\n    if (!this.notificationContentData.length) {\n      return html`\n        <div class=\"text-center px-4 pt-6 pb-18\">\n          <img\n            src=\"../../assets/empty-state-notification.png\"\n            alt=\"empty-state-notification\"\n            class=\"w-auto mx-auto\"\n          />\n          <p class=\"font-bold text-center text-lg py-2\">Belum Ada Notifikasi</p>\n          <p class=\"px-2\">\n            Kami akan memberitahukan Anda ketika ada informasi dan pemberitahuan\n            terbaru.\n          </p>\n        </div>\n      `\n    }\n    const notificationContentListTemplate = (item: any) => html`<div\n        class=\"w-3/4 pr-1 \"\n      >\n        <div class=\"flex items-center mb-1 text-xs\">\n          <span class=\"text-green-500 bg-green-100 rounded-sm p-1 px-2\">\n            ${item.category[0].name}\n          </span>\n          <span class=\"text-grey-400 ml-2\">\n            ${this.formatDate(item.publishedDateGmt)}</span\n          >\n        </div>\n        <p class=\"font-bold text-base text-customTextColor py-1\">\n          ${item.title}\n        </p>\n      </div>\n      <div class=\"w-1/4\">\n        <img\n          src=\"${item.thumbnails.sizes.thumbnailSquareMedium.permalink}\"\n          alt=\"content-img-alt\"\n          class=\"w-14 h-14 object-cover\"\n        />\n      </div>`\n\n    return html`<div class=\"h-[300px] overflow-y-scroll\">\n      ${this.notificationContentData.map(\n        item =>\n          html`<button\n            class=\"flex w-full text-left items-start p-4 cursor-pointer justify-between ${!item.isRead\n              ? 'bg-blue-100'\n              : ''}\"\n            @click=${() => window.open(item.permalink, '_blank')}\n          >\n            ${notificationContentListTemplate(item)}\n          </button> `\n      )}\n      </div>\n      <!-- Footer Link -->\n      <div class=\"px-4 py-4 text-center\">\n        <a href=\"#\" @click=\"${() =>\n          this.redirectToNotification(\n            'konten'\n          )}\"  class=\"text-base font-bold text-blue-500\">\n          Lihat Selengkapnya</a\n        >\n      </div>\n    </div>`\n  }\n\n  private notificationPopup() {\n    const tab = ['Info', 'Konten']\n\n    return html`\n      <div\n        id=\"notificationPopup\"\n        class=\"header-notificaion-dropdown rounded-lg shadow-lg z-50 mt-2 ${this\n          .isShowDropdown\n          ? 'active'\n          : ''}\"\n      >\n        <div class=\"sticky\">\n          <div class=\"flex justify-center py-2 border-b border-grey-300\">\n            <span class=\"font-bold text-base\">Notifikasi</span>\n          </div>\n          <!-- Tabs for Info and Content -->\n          <div class=\"flex justify-between\">\n            ${tab.map(\n              item =>\n                html`\n                  <button\n                    class=\"focus:outline-none py-2 w-1/2 ${this.selectedTab ===\n                      item && 'link-active'}\"\n                    @click=${() => this.handleClick(item)}\n                  >\n                    ${item}\n                  </button>\n                `\n            )}\n          </div>\n        </div>\n\n        <!-- Notification Content -->\n        ${this.selectedTab === 'Info'\n          ? this.notificationInfoSection()\n          : this.notificationContentSection()}\n      </div>\n    `\n  }\n\n  render() {\n    return html`<div id=\"headerNotification\" class=\"relative\">\n      ${this.isDataLoaded\n        ? this.notificationIcon()\n        : html`<div class=\"text-white cursor-pointer mt-0.5 animate-spin\">\n            ${unsafeSVG(getFontAwesomeIcon('fa', 'circle-notch', 21, 21))}\n          </div>`}\n      ${this.isShowDropdown ? this.notificationPopup() : ''}\n    </div>`\n  }\n}\n"]}

package/dist/src/components/kompasid-header-notification/types.d.ts

@@ -0,0 +1,35 @@
+export interface NotificationList {
+    notificationId: string;
+    id: number;
+    title: string;
+    label: string;
+    description: string;
+    isRead: boolean;
+    time: string;
+    link: string;
+}
+export interface UserNotification {
+    notificationList: NotificationList[] | null;
+    notificationCount: number;
+    loadMore: boolean;
+    next: number;
+}
+interface Meta {
+    cache: boolean;
+    time: number;
+}
+export interface ApiResponse<T> {
+    success: boolean;
+    code: number;
+    message: string;
+    meta: Meta;
+    data: T;
+}
+export interface ApiRubrikResponse<T> {
+    success: boolean;
+    code: number;
+    message: string;
+    meta: Meta;
+    result: T;
+}
+export {};

package/dist/src/components/kompasid-header-notification/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map