@kompasid/lit-web-components 0.7.0 → 0.7.2

package/src/components/kompasid-grace-period/readme.md

@@ -0,0 +1,17 @@
+# kompasid-grace-period
+
+Ini adalah redesign komponen _grace period_ yang digunakan pada [kompas.id](https://kompas.id).
+
+## Properties
+
+| Property                       | Attribute                      | Description | Type                                        | Default     |             
+| ------------------------------ | ------------------------------ | ----------- | ------------------------------------------- | ----------- |
+| `totalGracePeriod`             | `total-grace-period`           | how many days are left in grace period                    | `number`    | `0`         |
+| `isColumn`                     | `is-column`                    | changes how the component looks on different screen sizes | `boolean`   | `false`     |
+| `isShowButton`                 | `is-show-button`               | shows or hides a subscription button                      | `boolean`   | `false`     |
+| `subscriptionId`               | `subscription-id`              | used for renewal subs                                     | `string`    | `false`     |
+
+
+----------------------------------------------
+
+*Terbikin oleh tim front-end kompas.id*

package/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts

@@ -66,6 +66,8 @@ export class KompasMeteredWallRegister extends LitElement {
       description: '',
       lastArticle: { title: '', description: '' },
     },
+    ctaUrl: '',
+    ctaText: '',
   }
   /**
    * Props
@@ -90,7 +92,6 @@ export class KompasMeteredWallRegister extends LitElement {
    * prop tracker_page_domain untuk Page Domain
    * prop next_param untuk page Domain
    */
-
   @property({ type: Number }) countdownArticle = 0
   @property({ type: Boolean }) defaultExpandBanner = false
   @property({ type: Boolean }) isDesktop = false
@@ -119,19 +120,32 @@ export class KompasMeteredWallRegister extends LitElement {
     prop: string,
     mode: keyof meteredRegisterContent = 'default'
   ): string {
-    let template = ''
+    interface LastArticle {
+      [key: string]: string
+    }
+    interface DynamicMode {
+      lastArticle?: LastArticle
+      [key: string]: string | LastArticle | undefined
+    }
+    const dynamicMode = this.textTemplate[mode] as DynamicMode | string
 
-    // dynamicMode dibuat agar typescript bisa akses data lastArticle
-    const dynamicMode = this.textTemplate[mode]
+    let template: string = ''
 
-    if ('lastArticle' in dynamicMode) {
-      const lastArticleMode = dynamicMode as {
-        lastArticle: { [key: string]: string }
+    if (typeof dynamicMode === 'object' && dynamicMode !== null) {
+      // Check if dynamicMode has a lastArticle object and if the prop exists within it
+      if (dynamicMode.lastArticle && prop in dynamicMode.lastArticle) {
+        const value = dynamicMode.lastArticle[prop]
+        if (typeof value === 'string') {
+          template = value
+        }
+      } else if (prop in dynamicMode) {
+        const value = dynamicMode[prop]
+        if (typeof value === 'string') {
+          template = value
+        }
       }
-      template = lastArticleMode.lastArticle[prop] || ''
-    } else {
-      template = dynamicMode[prop] || ''
     }
+
     return template
   }
 
@@ -216,11 +230,12 @@ export class KompasMeteredWallRegister extends LitElement {
             ${this.registerButtonTemplate()}
           </div>
         </div>
-        <div class="flex justify-center">
+        <div
+          class="flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto"
+        >
           <img
             alt="metered-wall-register"
             src="https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png"
-            class="h-40 w-40 md:w-full md:h-full"
           />
         </div>
         <button
@@ -246,15 +261,45 @@ export class KompasMeteredWallRegister extends LitElement {
    */
   private registerButtonTemplate() {
     return html`
-      <button
-        @click=${this.redirectToRegister}
-        class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
-      >
-        Daftar Akun
-      </button>
+      <div>
+        ${!this.textTemplate.ctaUrl
+          ? html`<button
+              @click=${this.redirectToRegister}
+              class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
+            >
+              Daftar Akun
+            </button>`
+          : html`<button
+              @click=${this.redirectToCTAUrl}
+              class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-[165px]"
+            >
+              ${this.textTemplate.ctaText}
+            </button>`}
+      </div>
     `
   }
 
+  /**
+   * mengarahkan ke page checkout promo
+   */
+  private redirectToCTAUrl = (): void => {
+    const params = new URLSearchParams(window.location.href)
+    const newUrl = new URL(this.textTemplate.ctaUrl)
+    const referrer = new URLSearchParams(this.textTemplate.ctaUrl).get(
+      'referrer'
+    )
+    this.pushToDataLayer('mrw_clicked')
+    if (!referrer) {
+      newUrl.searchParams.append('referrer', params.toString())
+      window.location.href = newUrl.toString()
+    } else {
+      const currentReferrerValue = newUrl.searchParams.get('referrer')
+      const updatedReferrerValue = `${params.toString()},${currentReferrerValue}`
+      newUrl.searchParams.set('referrer', updatedReferrerValue)
+      window.location.href = newUrl.toString()
+    }
+  }
+
   /**
    * mengarahkan ke page register
    */

package/src/components/kompasid-metered-wall-register/types.ts

@@ -13,4 +13,6 @@ export interface meteredRegisterContent {
     }
     title: string
   }
+  ctaUrl: string
+  ctaText: string
 }

package/src/index.ts

@@ -7,6 +7,7 @@ export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/Komp
 export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js'
 export { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'
 export { KompasHeaderAccount } from './components/kompasid-header-account/KompasHeaderAccount.js'
+export { KompasGracePeriod } from './components/kompasid-grace-period/KompasGracePeriod.js'
 
 declare global {
   interface Window {

package/tailwind/tailwind.css

@@ -825,10 +825,6 @@ video {
   height: 1rem;
 }
 
-.h-40 {
-  height: 10rem;
-}
-
 .h-5 {
   height: 1.25rem;
 }
@@ -1462,6 +1458,11 @@ video {
   padding-right: 1rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -1893,6 +1894,11 @@ video {
     margin-bottom: 2rem;
   }
 
+  .md\:my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
   .md\:mb-0 {
     margin-bottom: 0px;
   }
@@ -1953,15 +1959,15 @@ video {
     height: 68px;
   }
 
-  .md\:h-full {
-    height: 100%;
-  }
-
   .md\:h-max {
     height: -moz-max-content;
     height: max-content;
   }
 
+  .md\:max-h-\[220px\] {
+    max-height: 220px;
+  }
+
   .md\:min-h-\[244px\] {
     min-height: 244px;
   }
@@ -1986,6 +1992,10 @@ video {
     width: 13rem;
   }
 
+  .md\:w-\[165px\] {
+    width: 165px;
+  }
+
   .md\:w-\[350px\] {
     width: 350px;
   }
@@ -2010,10 +2020,18 @@ video {
     width: 100%;
   }
 
+  .md\:w-auto {
+    width: auto;
+  }
+
   .md\:max-w-\[137px\] {
     max-width: 137px;
   }
 
+  .md\:max-w-\[200px\] {
+    max-width: 200px;
+  }
+
   .md\:max-w-full {
     max-width: 100%;
   }
@@ -2070,6 +2088,12 @@ video {
     margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .md\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1.25rem * var(--tw-space-x-reverse));
@@ -2170,6 +2194,10 @@ video {
     padding-bottom: 1.75rem;
   }
 
+  .md\:pt-0 {
+    padding-top: 0px;
+  }
+
   .md\:pt-3 {
     padding-top: 0.75rem;
   }
@@ -2333,6 +2361,11 @@ video {
     padding-right: 0px;
   }
 
+  .lg\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
   .lg\:px-24 {
     padding-left: 6rem;
     padding-right: 6rem;
@@ -2343,6 +2376,11 @@ video {
     padding-bottom: 2.5rem;
   }
 
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .lg\:pb-0 {
     padding-bottom: 0px;
   }

package/tailwind/tailwind.ts

@@ -835,10 +835,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     height: 1rem;
   }
 
-  .h-40 {
-    height: 10rem;
-  }
-
   .h-5 {
     height: 1.25rem;
   }
@@ -1476,6 +1472,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-right: 1rem;
   }
 
+  .px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
   .px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -1920,6 +1921,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-bottom: 2rem;
     }
 
+    .md\\:my-auto {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+
     .md\\:mb-0 {
       margin-bottom: 0px;
     }
@@ -1980,15 +1986,15 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       height: 68px;
     }
 
-    .md\\:h-full {
-      height: 100%;
-    }
-
     .md\\:h-max {
       height: -moz-max-content;
       height: max-content;
     }
 
+    .md\\:max-h-\\[220px\\] {
+      max-height: 220px;
+    }
+
     .md\\:min-h-\\[244px\\] {
       min-height: 244px;
     }
@@ -2013,6 +2019,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 13rem;
     }
 
+    .md\\:w-\\[165px\\] {
+      width: 165px;
+    }
+
     .md\\:w-\\[350px\\] {
       width: 350px;
     }
@@ -2037,10 +2047,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 100%;
     }
 
+    .md\\:w-auto {
+      width: auto;
+    }
+
     .md\\:max-w-\\[137px\\] {
       max-width: 137px;
     }
 
+    .md\\:max-w-\\[200px\\] {
+      max-width: 200px;
+    }
+
     .md\\:max-w-full {
       max-width: 100%;
     }
@@ -2097,6 +2115,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    .md\\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+      --tw-space-x-reverse: 0;
+      margin-right: calc(1rem * var(--tw-space-x-reverse));
+      margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+    }
+
     .md\\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
       --tw-space-x-reverse: 0;
       margin-right: calc(1.25rem * var(--tw-space-x-reverse));
@@ -2197,6 +2221,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 1.75rem;
     }
 
+    .md\\:pt-0 {
+      padding-top: 0px;
+    }
+
     .md\\:pt-3 {
       padding-top: 0.75rem;
     }
@@ -2360,6 +2388,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-right: 0px;
     }
 
+    .lg\\:px-20 {
+      padding-left: 5rem;
+      padding-right: 5rem;
+    }
+
     .lg\\:px-24 {
       padding-left: 6rem;
       padding-right: 6rem;
@@ -2370,6 +2403,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 2.5rem;
     }
 
+    .lg\\:px-8 {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+
     .lg\\:pb-0 {
       padding-bottom: 0px;
     }