@kompasid/lit-web-components 0.6.4 → 0.6.7

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

@@ -179,6 +179,10 @@ export class KompasIdPaywallBody extends LitElement {
     if (this.targetElement.classList.contains('wrapper-body')) {
       this.togglePaywall()
     }
+
+    if (this.targetElement.id === 'freeTrialPopup') {
+      this.closeFreeTrialPopup()
+    }
   }
 
   private parsePrice(price: string): number {
@@ -930,6 +934,7 @@ export class KompasIdPaywallBody extends LitElement {
             : this.secondaryPackages(item)
         )}
         ${this.swgEnable ? this.swgPackageSection() : nothing}
+        ${this.freeTrialPackageSection()} ${this.freeTrialPopUp()}
       </div>
     `
   }
@@ -1053,6 +1058,134 @@ export class KompasIdPaywallBody extends LitElement {
     `
   }
 
+  private openFreeTrialPopup() {
+    const popup = this.shadowRoot?.getElementById('freeTrialPopup')
+    popup?.classList.remove('hidden')
+  }
+
+  private closeFreeTrialPopup() {
+    const popup = this.shadowRoot?.getElementById('freeTrialPopup')
+    popup?.classList.add('hidden')
+  }
+
+  private freeTrialPopUp() {
+    return html`
+      <div
+        id="freeTrialPopup"
+        class="fixed w-full h-full inset-0 flex justify-center items-center z-50 bg-black bg-opacity-75 hidden"
+      >
+        <div
+          class="bg-white rounded w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 2xl:w-1/4 p-6 text-center"
+        >
+          <div class="w-full flex justify-end px-2">
+            <button
+              @click=${this.closeFreeTrialPopup}
+              class="w-8 h-8 pl-4 text-grey-400"
+            >
+              ${unsafeSVG(getFontAwesomeIcon('fas', 'xmark', 24, 24))}
+            </button>
+          </div>
+          <div class="w-full flex justify-center">
+            <div class="w-3/4 lg:w-1/2">
+              <img
+                src="https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/kompas-free-trial.png"
+                alt="Free Trial"
+              />
+            </div>
+          </div>
+          <p class="font-bold text-lg text-grey-600 mt-4">
+            Coba Gratis Kompas.id di Aplikasi
+          </p>
+          <div
+            class="hidden lg:block lg:flex flex border border-grey-300 rounded mt-4 px-8 py-4 items-center"
+          >
+            <div class="w-1/3 flex mr-6">
+              <img
+                src="https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/free-trial-qr-code.png"
+                alt="QR Code Deep Link"
+              />
+            </div>
+            <div class="w-2/3 text-base text-grey-600 text-left">
+              Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR
+              dengan ponsel atau tablet untuk mengunduh aplikasi.
+            </div>
+          </div>
+          <div
+            class="text-base text-grey-600 text-center lg:hidden px-2 md:px-8"
+          >
+            Dapatkan akses gratis selama 3 hari ke konten dan fitur premium
+            Kompas.id di aplikasi.
+          </div>
+          <div class="lg:flex flex justify-center mt-4 hidden lg:block gap-4">
+            <a
+              href="https://play.google.com/store/apps/details?id=id.kompas.app"
+              target="_blank"
+              ><img
+                src="https://cdn-www.kompas.id/halaman-unduh/image/google-play-badge.png"
+                alt="Google Play Badge"
+            /></a>
+            <a
+              href="https://apps.apple.com/id/app/kompas-id/id1242195037?l=id"
+              target="_blank"
+              ><img
+                src="https://cdn-www.kompas.id/halaman-unduh/image/ios-badge.png"
+                alt="iOS App Store Badge"
+            /></a>
+          </div>
+          <button
+            onclick="window.open('https://app.komp.as/langganan', '_blank')"
+            class="h-12 bg-green-500 rounded-md mt-4 flex w-full items-center justify-center lg:hidden"
+          >
+            <h6 class="text-white font-bold p-4">Unduh Sekarang</h6>
+          </button>
+        </div>
+      </div>
+    `
+  }
+
+  private freeTrialPackageSection() {
+    const packages = this.paywallData?.packages ?? ({} as Packages)
+
+    if (packages.freeTrial) {
+      return html`
+        <div
+          class="flex flex-wrap items-center justify-between ${this.isDark
+            ? 'bg-grey-600'
+            : 'bg-white'} py-3 px-4 rounded-lg md:mx-0 w-full h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4"
+        >
+          <div class="flex flex-col">
+            <div class="flex items-center">
+              <h5 class="text-base md:text-lg font-bold text-orange-400">
+                ${formatRupiah(0)}
+              </h5>
+            </div>
+            <div class="flex items-center">
+              <p
+                class="text-xs ${this.isDark ? 'text-dark-7' : 'text-grey-600'}"
+              >
+                ${packages.freeTrial}
+              </p>
+            </div>
+          </div>
+          <button
+            @click=${this.openFreeTrialPopup}
+            class="h-8 ${!this.isDark &&
+            'bg-white'} border border-green-500 rounded"
+          >
+            <h6
+              class="text-xs md:text-sm ${this.isDark
+                ? 'text-green-300'
+                : 'text-green-500'} font-bold px-4"
+            >
+              Coba Gratis
+            </h6>
+          </button>
+        </div>
+      `
+    }
+    return nothing
+  }
+
   /**
    * Render Statement
    */

package/tailwind/tailwind.css

@@ -725,6 +725,10 @@ video {
   margin-right: 2.5rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .mr-3 {
   margin-right: 0.75rem;
 }
@@ -765,6 +769,10 @@ video {
   margin-top: 2rem;
 }
 
+.mr-6 {
+  margin-right: 1.5rem;
+}
+
 .block {
   display: block;
 }
@@ -858,6 +866,18 @@ video {
   height: max-content;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
+.w-1\/4 {
+  width: 25%;
+}
+
 .w-1\/5 {
   width: 20%;
 }
@@ -914,6 +934,10 @@ video {
   width: 2rem;
 }
 
+.w-80 {
+  width: 20rem;
+}
+
 .w-9 {
   width: 2.25rem;
 }
@@ -942,6 +966,30 @@ video {
   width: 100%;
 }
 
+.w-1\/3 {
+  width: 33.333333%;
+}
+
+.w-3\/4 {
+  width: 75%;
+}
+
+.w-4\/5 {
+  width: 80%;
+}
+
+.w-2\/4 {
+  width: 50%;
+}
+
+.w-2\/3 {
+  width: 66.666667%;
+}
+
+.w-11\/12 {
+  width: 91.666667%;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -1089,6 +1137,10 @@ video {
   gap: 2rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-y-2 {
   row-gap: 0.5rem;
 }
@@ -1359,6 +1411,21 @@ video {
   background-color: rgb(255 220 63 / var(--tw-bg-opacity));
 }
 
+.bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 100 76 / var(--tw-bg-opacity));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(208 13 18 / var(--tw-bg-opacity));
+}
+
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 32 19 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -1373,6 +1440,14 @@ video {
      object-fit: scale-down;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -1389,6 +1464,19 @@ video {
   padding: 1.25rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1404,11 +1492,6 @@ video {
   padding-right: 1rem;
 }
 
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -1459,6 +1542,31 @@ video {
   padding-bottom: 5.6px;
 }
 
+.px-9 {
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1746,6 +1854,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-grey-400 {
+  --tw-text-opacity: 1;
+  color: rgb(153 153 153 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -1780,6 +1893,18 @@ video {
 }
 
 @media (min-width: 640px) {
+  .sm\:w-1\/2 {
+    width: 50%;
+  }
+
+  .sm\:w-3\/4 {
+    width: 75%;
+  }
+
+  .sm\:w-1\/4 {
+    width: 25%;
+  }
+
   .sm\:max-w-lg {
     max-width: 32rem;
   }
@@ -1918,6 +2043,26 @@ video {
     width: 100%;
   }
 
+  .md\:w-1\/2 {
+    width: 50%;
+  }
+
+  .md\:w-3\/4 {
+    width: 75%;
+  }
+
+  .md\:w-1\/4 {
+    width: 25%;
+  }
+
+  .md\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .md\:w-2\/3 {
+    width: 66.666667%;
+  }
+
   .md\:max-w-\[137px\] {
     max-width: 137px;
   }
@@ -2061,6 +2206,11 @@ video {
     padding-bottom: 1.5rem;
   }
 
+  .md\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .md\:pb-4 {
     padding-bottom: 1rem;
   }
@@ -2158,6 +2308,14 @@ video {
     display: block;
   }
 
+  .lg\:flex {
+    display: flex;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
   .lg\:min-h-\[220px\] {
     min-height: 220px;
   }
@@ -2166,6 +2324,26 @@ video {
     width: 410px;
   }
 
+  .lg\:w-1\/2 {
+    width: 50%;
+  }
+
+  .lg\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .lg\:w-3\/4 {
+    width: 75%;
+  }
+
+  .lg\:w-2 {
+    width: 0.5rem;
+  }
+
+  .lg\:w-2\/3 {
+    width: 66.666667%;
+  }
+
   .lg\:max-w-7xl {
     max-width: 80rem;
   }
@@ -2236,8 +2414,38 @@ video {
 }
 
 @media (min-width: 1280px) {
+  .xl\:block {
+    display: block;
+  }
+
+  .xl\:flex {
+    display: flex;
+  }
+
+  .xl\:hidden {
+    display: none;
+  }
+
+  .xl\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .xl\:w-1\/2 {
+    width: 50%;
+  }
+
+  .xl\:w-1\/4 {
+    width: 25%;
+  }
+
   .xl\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
   }
 }
+
+@media (min-width: 1536px) {
+  .\32xl\:w-1\/4 {
+    width: 25%;
+  }
+}