@kompasid/lit-web-components 0.9.40 → 0.9.42

package/src/components/kompasid-header-account/readme.md

@@ -6,10 +6,9 @@ Ini adalah komponen _header account_ yang akan di implementasi pada header
 | Property                       | Attribute                      | Description                                   | Type                      | Default        | Required |
 | ------------------------------ | ------------------------------ | --------------------------------------------- | ------------------------- | -------------- | -------- |
 | `userData`                     | `userData`                    	| `Object containing user data`									| `object`                 | `{}`           | `yes`			|
-| `logoutUrl`                    | `logoutUrl`                   | `URL to log the user out`											| `string`                 | `''`           | `no`			|
-| `manageAccountUrl`             | `manageAccountUrl`           | `URL to manage user account settings`					| `string`                 | `''`           | `no`			|
-| `notificationUrl`              | `notificationUrl`             | `URL to view user notifications`							| `string`                 | `''`           | `no`			|
-| `readLaterUrl`                 | `readLaterUrl`               | `URL to access the "Read Later" feature`			| `string`                 | `''`           | `no`			|
+| `logout_url`                    | `logout_url`                   | `URL to log the user out`											| `string`                 | `'https://auth.kompas.id/login'`           | `no`			|
+| `manage_account_url`             | `manage_account_url`           | `URL to manage user account settings`					| `string`                 | `'https://manage-account.kompas.id/manage-account/my-account'`           | `no`			|
+| `read_later_url`                 | `read_later_url`               | `URL to access the "Read Later" feature`			| `string`                 | `'https://www.kompas.id/baca-nanti'`           | `no`			|
 | `sidebarTopSpacing`            | `sidebarTopSpacing`          | `Top spacing for the sidebar (in pixels)`			| `number`                 | `0`            | `no`			|
 | `subscriptionUrl`              | `subscriptionUrl`             | `URL to manage subscriptions`									| `string`                 | `''`           | `no`			|
 | `theme`                        | `theme`                        | `Component theme`															| `'default' \| 'primary'` | `'primary'`    | `no`			|
@@ -24,6 +23,29 @@ Ini adalah komponen _header account_ yang akan di implementasi pada header
 | `isGracePeriod`    | `isGracePeriod`    | Boolean flag indicating whether the user is currently in a grace period. Set to `true` if the grace period array is not empty. **However**, if both active membership and grace period arrays are not empty, this value must be `false`. | `boolean` | `false` | yes      |
 | `isMembership`     | `isMembership`     | Boolean flag indicating whether the user has an active membership. Set to `true` if the active membership array is not empty.                                                                                                            | `boolean` | `false` | yes      |
 
+## Properties Grace Period Default
+Property dapat dilihat di [Readme Grace Period](https://github.com/pt-kompas-media-nusantara/lit-web-component/tree/master/src/components/kompasid-grace-period).
+Pemakaian kalo memang tidak ada perubahan, lebih baik tidak digunakan atau di konfirmasi lagi ke PM. Kegunaan property ini hanya pada saat status grace period aktif dan biasanya di biarkan secara default kalau di header.
+
+| Property                     | Attribute                    | Description                                | Type      | Default | Required |
+| ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | -------------- | -------- |
+| `paywall_location`           | `paywall_location`           |																							| `string`  | `''`    | no       |
+| `paywall_subscription_package` | `paywall_subscription_package` |																							| `string`  | `''`    | no       |
+| `paywall_subscription_id`    | `paywall_subscription_id`    |                                            | `number`  | `0`     | no       |
+| `paywall_subscription_price` | `paywall_subscription_price` |																							| `number`  | `0`     | no       |
+| `paywall_position`           | `paywall_position`           |																							| `number`  | `0`     | no       |
+| `tracker_page_type`          | `tracker_page_type`          |																							| `string`  | `''`    | no       |
+| `tracker_content_id`         | `tracker_content_id`         |																							| `string`  | `''`    | no       |
+| `tracker_content_title`      | `tracker_content_title`      |																							| `string`  | `''`    | no       |
+| `tracker_content_categories` | `tracker_content_categories` |																							| `string`  | `''`    | no       |
+| `tracker_content_type`       | `tracker_content_type`       |																							| `string`  | `''`    | no       |
+| `tracker_user_type`          | `tracker_user_type`          |																							| `string`  | `''`    | no       |
+| `tracker_subscription_status` | `tracker_subscription_status` |																							| `string`  | `''``    | no       |
+| `tracker_page_domain`        | `tracker_page_domain`        |																							| `string`  | `''`    | no       |
+| `tracker_metered_wall_type`  | `tracker_metered_wall_type`  |																							| `string`  | `''`    | no       |
+| `tracker_metered_wall_balance` | `tracker_metered_wall_balance` |																							| `number`  | `0`     | no       |
+
+
 ---
 
 ## Usage
@@ -36,12 +58,12 @@ API Last Order = "https://api.kompas.cloud/order/api/v1/product/latest"
 
 ```js
 	<kompas-header-account
-		logoutUrl="https://account.kompas.cloud/logout"
-		manageAccountUrl="https://account.kompas.cloud/manage-account"
+		logout_url="https://account.kompas.cloud/logout"
+		manage_account_url="https://account.kompas.cloud/manage-account"
 		notificationUrl="https://account.kompas.cloud/manage-account/notification"
 		:sidebarTopSpacing="48"
 		subscriptionUrl="https://www.kompas.id/berlangganan"
-		readLaterUrl="https://www.kompas.id/bacananti"
+		read_later_url="https://www.kompas.id/bacananti"
 		:paywall_subscription_id="98888"
 		theme="primary"
 		:userData="userData"

package/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts

@@ -57,38 +57,22 @@ export class KompasHeaderAccountMenu extends LitElement {
 
   @state() clipboardClicked: boolean = false
 
-  /**
-   * Cart Url
-   */
-  @property({ type: String }) cartUrl = 'https://gerai.kompas.id/cart'
-
   /**
    * Logout Url
    */
-  @property({ type: String }) logoutUrl = 'https://account.kompas.id/logout'
+  @property({ type: String }) logout_url = 'https://auth.kompas.id/logout'
 
   /**
    * Manage Account Url
    */
-  @property({ type: String }) manageAccountUrl =
-    'https://account.kompas.id/manage-account/my-account'
-
-  /**
-   * Notification Url
-   */
-  @property({ type: String }) notificationUrl =
-    'https://account.kompas.id/manage-account/notification'
-
-  /**
-   * Orders Url
-   */
-  @property({ type: String }) ordersUrl =
-    'https://gerai.kompas.id/my-account/orders'
+  @property({ type: String }) manage_account_url =
+    'https://manage-account.kompas.id/manage-account/my-account'
 
   /**
    * Read Later Url
    */
-  @property({ type: String }) readLaterUrl = 'https://www.kompas.id/baca-nanti'
+  @property({ type: String }) read_later_url =
+    'https://www.kompas.id/baca-nanti'
 
   // Render Total Bubble
   private renderTotalBubble = (total: number) => {
@@ -127,7 +111,7 @@ export class KompasHeaderAccountMenu extends LitElement {
             <p class="header-account-menu--title">Keranjang</p>
           </a> -->
           <!-- Manage Account  -->
-          <a href=${this.manageAccountUrl} class="header-account-menu--item">
+          <a href=${this.manage_account_url} class="header-account-menu--item">
             <div class="icon icon-md icon-blue-600">
               ${unsafeSVG(getFontAwesomeIcon('fas', 'user-gear'))}
             </div>
@@ -139,14 +123,14 @@ export class KompasHeaderAccountMenu extends LitElement {
             <p class="header-account-menu--title">Transaksi</p>
           </a> -->
           <!-- Read Later  -->
-          <a href=${this.readLaterUrl} class="header-account-menu--item">
+          <a href=${this.read_later_url} class="header-account-menu--item">
             <div class="icon icon-md icon-blue-600">
               ${unsafeSVG(getFontAwesomeIcon('fas', 'bookmark'))}
             </div>
             <p class="header-account-menu--title">Baca Nanti</p>
           </a>
           <!-- Logout -->
-          <a href=${this.logoutUrl} class="header-account-menu--item">
+          <a href=${this.logout_url} class="header-account-menu--item">
             <div class="icon icon-md icon-blue-600">
               ${unsafeSVG(getFontAwesomeIcon('fas', 'right-from-bracket'))}
             </div>

package/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts

@@ -25,7 +25,6 @@ export class KompasHeaderAccountProfile extends LitElement {
   @property({ type: String }) userInitialName = ''
   @property({ type: Object }) userData = {} as User
   @property({ type: String }) subscriptionUrl = ''
-  @property({ type: Number }) totalGracePeriod = 0
   @property({ type: String }) openFrom = ''
   /**
    * Props For Grace Period Tracker

package/src/components/kompasid-paywall/KompasPaywall.ts

@@ -127,6 +127,7 @@ export class KompasPaywall extends LitElement {
         text: 'Lihat Paket Lainnya',
         url: 'https://www.kompas.id/berlangganan/v2',
       },
+      typeVariant: '',
     },
     packages: {
       title: 'Sekali bayar, tanpa perpanjang otomatis',
@@ -309,6 +310,9 @@ export class KompasPaywall extends LitElement {
             ? json[defaultType][typeContextual].content
             : json[defaultType].content,
           cta: json[defaultType].cta,
+          typeVariant: json[defaultType][typeContextual]
+            ? json[defaultType][typeContextual].variant
+            : '',
         },
         packages: {
           ...this.mockResult.packages,

package/src/components/kompasid-paywall/readme.md

@@ -218,7 +218,8 @@ Example:
                   "subscriptionId": "9891075",
                   "position": 2
               }
-          ]
+          ],
+          "variant": "A"
       },
       "typeB": {
           "head": "Tingkatkan Literasi di Bulan Suci Dengan Artikel Penuh Inspirasi Type B",
@@ -254,7 +255,8 @@ Example:
                   "subscriptionId": "9891075",
                   "position": 2
               }
-          ]
+          ],
+          "variant": "B"
       },
       "swgEnable": true,
       "swgContent": {

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

@@ -74,6 +74,7 @@ export interface PaywallProduct {
     register: Registration
     meterred: Metered
     cta: ctaPaywall
+    typeVariant: string
   }
   packages: Packages
   payment: {

package/src/components/kompasid-paywall-body/KompasPaywallBody.ts

@@ -486,6 +486,7 @@ export class KompasIdPaywallBody extends LitElement {
         content_tags: this.tracker_content_tags || '',
         content_published_date: this.tracker_content_published_date || '',
         content_variant: this.tracker_content_variant || '',
+        variant: this.paywallData?.informations?.typeVariant || '',
         ...(this.type === 'epaper' || this.type === 'proMiningOutlook'
           ? { epaper_edition: this.tracker_epaper_edition }
           : {