@kompasid/lit-web-components 0.9.37 → 0.9.38

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

@@ -1,7 +1,8 @@
 import { html, css, LitElement, nothing } from 'lit'
 import { property, state, customElement } from 'lit/decorators.js'
+import { differenceInDays } from 'date-fns'
 import { TWStyles } from '../../../tailwind/tailwind.js'
-import { PaywallProduct, PaywallType } from './types.js'
+import { PaywallProduct, PaywallType, Contextual } from './types.js'
 import '../kompasid-paywall-body/KompasPaywallBody.js'
 import '../kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.js'
 import '../kompasid-paywall-information-header/KompasPaywallInformationHeader.js'
@@ -93,6 +94,9 @@ export class KompasPaywall extends LitElement {
   @property({ type: String }) tracker_content_title = ''
   @property({ type: String }) tracker_content_categories = ''
   @property({ type: String }) tracker_content_type = ''
+  @property({ type: String }) tracker_content_tags = ''
+  @property({ type: String }) tracker_content_published_date = ''
+  @property({ type: String }) tracker_content_variant = ''
   @property({ type: String }) tracker_user_type = ''
   @property({ type: String }) tracker_subscription_status = ''
   @property({ type: String }) tracker_page_domain = ''
@@ -273,10 +277,16 @@ export class KompasPaywall extends LitElement {
 
   async getPaywallData() {
     try {
-      const response = await fetch(
-        'https://cdn-www.kompas.id/web-component/paywall.json'
+      const [paywallResponse, contextualResponse] = await Promise.all([
+        fetch('https://cdn-www.kompas.id/web-component/paywall.json'),
+        fetch(
+          'https://cdn-www.kompas.id/web-component/contextual_paywall.json'
+        ),
+      ])
+      const json = await paywallResponse.json()
+      const isContextual = this.contextualScenario(
+        await contextualResponse.json()
       )
-      const json = await response.json()
       const listType = [
         'reguler',
         'audio',
@@ -287,17 +297,24 @@ export class KompasPaywall extends LitElement {
       ]
       const findTypeOnTheList = listType.includes(this.type)
       const defaultType = findTypeOnTheList ? this.type : 'reguler'
+      const typeContextual = isContextual ? 'typeB' : 'typeA'
       this.paywallData = {
         ...this.mockResult,
         informations: {
           ...this.mockResult.informations,
-          title: json[defaultType].head,
-          description: json[defaultType].content,
+          title: json[defaultType][typeContextual]
+            ? json[defaultType][typeContextual].head
+            : json[defaultType].head,
+          description: json[defaultType][typeContextual]
+            ? json[defaultType][typeContextual].content
+            : json[defaultType].content,
           cta: json[defaultType].cta,
         },
         packages: {
           ...this.mockResult.packages,
-          memberships: json[defaultType].memberships,
+          memberships: json[defaultType][typeContextual]
+            ? json[defaultType][typeContextual].memberships
+            : json[defaultType].memberships,
           swgEnable: json[defaultType].swgEnable,
           freeTrial: json[defaultType].freeTrial,
           swgContent: json[defaultType].swgContent,
@@ -310,6 +327,70 @@ export class KompasPaywall extends LitElement {
     }
   }
 
+  /**
+   * Checks if all strings in the given target tags and variant are found in the given string tag and variant.
+   * @param {Contextual} target - The contextual data to be checked.
+   * @param {string} stringTag - The string tag to search for.
+   * @param {string} stringVariant - The string variant to search for.
+   * @returns {boolean} - True if all strings are found, false otherwise.
+   */
+  private checkAllInString(
+    target: Contextual,
+    stringTag: string,
+    stringVariant: string
+  ) {
+    const tagsTarget = target.tags
+    const variantTarget = target.variant
+    const checkVariant =
+      variantTarget.toLowerCase() === stringVariant.toLowerCase()
+    const checkTags = () => {
+      for (const item of tagsTarget) {
+        if (!stringTag.toLowerCase().includes(item.toLowerCase())) {
+          return false
+        }
+      }
+      return true
+    }
+
+    return checkVariant && checkTags()
+  }
+
+  /**
+   * Check if the given contextual data is valid based on the following rules:
+   * - The published date must be within 90 days from now
+   * - The tracker tags and variant must be found in the contextual data
+   * @param {Contextual} jsonContextual - The contextual data to be checked
+   * @returns {boolean} - True if the contextual data is valid, false otherwise
+   */
+  private contextualScenario(jsonContextual: Contextual): boolean {
+    if (!jsonContextual) {
+      return false
+    }
+
+    const {
+      tracker_content_published_date: publishedDate,
+      tracker_content_tags: trackerTags,
+      tracker_content_variant: trackerVariant,
+    } = this
+
+    if (!publishedDate || !trackerVariant || !trackerTags) {
+      return false
+    }
+
+    const nowDate = new Date()
+    const isoDateString = publishedDate.replace(' ', 'T')
+    const publishedDateObj = new Date(isoDateString)
+
+    const isWithin90Days = differenceInDays(publishedDateObj, nowDate) <= -90 // differenceInDays jika tanggal telah melewati 90 hari
+    const hasMatchingTagsAndVariants = this.checkAllInString(
+      jsonContextual,
+      trackerTags,
+      trackerVariant
+    ) // checkAllInString jika ada tag yang cocok
+
+    return isWithin90Days || hasMatchingTagsAndVariants
+  }
+
   private transitionBox() {
     return html`
       <div
@@ -331,6 +412,9 @@ export class KompasPaywall extends LitElement {
       tracker_content_id=${this.tracker_content_id}
       tracker_content_title=${this.tracker_content_title}
       tracker_content_categories=${this.tracker_content_categories}
+      tracker_content_tags=${this.tracker_content_tags}
+      tracker_content_published_date=${this.tracker_content_published_date}
+      tracker_content_variant=${this.tracker_content_variant}
       tracker_user_type=${this.tracker_user_type}
       tracker_subscription_status=${this.tracker_subscription_status}
       tracker_page_domain=${this.tracker_page_domain}
@@ -378,6 +462,10 @@ export class KompasPaywall extends LitElement {
                 tracker_content_id=${this.tracker_content_id}
                 tracker_content_title=${this.tracker_content_title}
                 tracker_content_categories=${this.tracker_content_categories}
+                tracker_content_tags=${this.tracker_content_tags}
+                tracker_content_published_date=${this
+                  .tracker_content_published_date}
+                tracker_content_variant=${this.tracker_content_variant}
                 tracker_user_type=${this.tracker_user_type}
                 tracker_subscription_status=${this.tracker_subscription_status}
                 tracker_page_domain=${this.tracker_page_domain}
@@ -421,6 +509,10 @@ export class KompasPaywall extends LitElement {
               tracker_content_id=${this.tracker_content_id}
               tracker_content_title=${this.tracker_content_title}
               tracker_content_categories=${this.tracker_content_categories}
+              tracker_content_tags=${this.tracker_content_tags}
+              tracker_content_published_date=${this
+                .tracker_content_published_date}
+              tracker_content_variant=${this.tracker_content_variant}
               tracker_user_type=${this.tracker_user_type}
               tracker_subscription_status=${this.tracker_subscription_status}
               tracker_epaper_edition=${this.tracker_epaper_edition}
@@ -471,6 +563,10 @@ export class KompasPaywall extends LitElement {
                 tracker_content_id=${this.tracker_content_id}
                 tracker_content_title=${this.tracker_content_title}
                 tracker_content_categories=${this.tracker_content_categories}
+                tracker_content_tags=${this.tracker_content_tags}
+                tracker_content_published_date=${this
+                  .tracker_content_published_date}
+                tracker_content_variant=${this.tracker_content_variant}
                 tracker_user_type=${this.tracker_user_type}
                 tracker_subscription_status=${this.tracker_subscription_status}
                 tracker_page_domain=${this.tracker_page_domain}
@@ -515,6 +611,10 @@ export class KompasPaywall extends LitElement {
               tracker_content_id=${this.tracker_content_id}
               tracker_content_title=${this.tracker_content_title}
               tracker_content_categories=${this.tracker_content_categories}
+              tracker_content_tags=${this.tracker_content_tags}
+              tracker_content_published_date=${this
+                .tracker_content_published_date}
+              tracker_content_variant=${this.tracker_content_variant}
               tracker_user_type=${this.tracker_user_type}
               tracker_subscription_status=${this.tracker_subscription_status}
               tracker_epaper_edition=${this.tracker_epaper_edition}