@kompasid/lit-web-components 0.5.2 → 0.5.4

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

@@ -124,6 +124,10 @@ export class KompasIdPaywallBody extends LitElement {
     return this.theme === 'dark'
   }
 
+  get isEntitledForIntroductoryPrice(): boolean {
+    return !this.isLogin || this.tracker_subscription_status === 'IA'
+  }
+
   /**
    * Logic Function
    */
@@ -641,16 +645,6 @@ export class KompasIdPaywallBody extends LitElement {
     </div>`
   }
 
-  private separatorLine() {
-    return html`
-      <div class="flex flex-row w-full justify-center">
-        <p class="px-4 pt-1 ${this.isDark ? 'text-dark-1' : 'text-grey-500'}">
-          atau
-        </p>
-      </div>
-    `
-  }
-
   private epaperRegistrationSection() {
     return html`
       <div>
@@ -753,7 +747,8 @@ export class KompasIdPaywallBody extends LitElement {
   private primaryPackages(product: Product) {
     return html`
       <div
-        class="flex flex-wrap justify-between items-center ${this.isDark
+        class="flex flex-wrap justify-between h-[68px] items-center ${this
+          .isDark
           ? 'bg-grey-600'
           : 'bg-white'} rounded-lg md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-2.5 md:mt-4 border border-yellow-400 relative"
       >
@@ -777,9 +772,9 @@ export class KompasIdPaywallBody extends LitElement {
           </div>
         </div>
         <button
-          class="h-auto ${this.isDark
+          class="h-8 ${this.isDark
             ? 'bg-green-300 border border-green-400'
-            : 'bg-green-500'} rounded mr-4"
+            : 'bg-green-500'} rounded mr-4 flex items-center"
           @click=${() =>
             this.redirectToCheckout(
               product.url,
@@ -790,7 +785,7 @@ export class KompasIdPaywallBody extends LitElement {
             )}
         >
           <h6
-            class="text-xs md:text-base ${this.isDark
+            class="text-xs md:text-sm ${this.isDark
               ? 'text-black'
               : 'text-white'} font-bold py-2 px-4"
           >
@@ -809,9 +804,9 @@ export class KompasIdPaywallBody extends LitElement {
   private secondaryPackages(product: Product) {
     return html`
       <div
-        class="flex  flex-wrap justify-between ${this.isDark
+        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 max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4"
+          : '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 items-center">
           <h5 class="text-base md:text-lg font-bold text-orange-400">
@@ -834,13 +829,13 @@ export class KompasIdPaywallBody extends LitElement {
               50000,
               2
             )}
-          class="h-auto ${!this.isDark &&
+          class="h-8 ${!this.isDark &&
           'bg-white'} border border-green-500 rounded"
         >
           <h6
-            class="text-xs md:text-base ${this.isDark
+            class="text-xs md:text-sm ${this.isDark
               ? 'text-green-300'
-              : 'text-green-500'} font-bold py-2 px-4"
+              : 'text-green-500'} font-bold px-4 "
           >
             Langganan
           </h6>
@@ -857,6 +852,7 @@ export class KompasIdPaywallBody extends LitElement {
             ? this.primaryPackages(item)
             : this.secondaryPackages(item)
         )}
+        ${this.swgEnable ? this.swgPackageSection() : nothing}
       </div>
     `
   }
@@ -907,6 +903,65 @@ export class KompasIdPaywallBody extends LitElement {
     `
   }
 
+  private introductoryPrice() {
+    return html` <div
+      class="flex space-x-1 h-5 md:h-max overflow-hidden md:flex-col md:space-x-0 items-center md:items-start md:justify-center"
+    >
+      <h5 class="text-base md:text-lg font-bold text-orange-400">Rp 10.000</h5>
+      <p class="text-xs ${this.isDark ? 'text-dark-7' : 'text-grey-600'}">
+        untuk 1 bulan pertama
+      </p>
+    </div>`
+  }
+
+  private swgRegonText() {
+    return html`<p
+      class="text-xs leading-4 md:max-w-[137px] ${this.isDark
+        ? 'text-dark-7'
+        : 'text-grey-600'}"
+    >
+      Berlangganan lebih mudah dengan Google
+    </p>`
+  }
+
+  private swgPackageSection() {
+    return html`
+      <div
+        class="flex flex-col space-y-2 md:space-x-2 md:space-y-0 md:flex-row justify-between items-center ${this
+          .isDark
+          ? 'bg-grey-600'
+          : 'bg-white'} py-3 px-4 rounded-lg md:mx-0 w-full h-[76px] md:h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4"
+      >
+        ${this.isEntitledForIntroductoryPrice
+          ? this.introductoryPrice()
+          : this.swgRegonText()}
+        <div>
+          <button
+            class="${this.isDark
+              ? 'bg-grey-600'
+              : 'bg-grey-100 border-grey-100'} border space-x-2 justify-center border-grey-400 rounded-md px-[22px] md:px-6 shadow-sm flex h-max flex-row flex-nowrap py-[5.6px] md:py-1.5 items-center"
+            id="subscribe-with-google"
+          >
+            <p
+              class="${this.isDark
+                ? 'text-dark-7'
+                : 'text-grey-500'} text-[11px] md:text-xs whitespace-nowrap w-full "
+            >
+              Subscribe with
+            </p>
+            <img
+              class="object-scale-down h-[17px] md:h-5"
+              src=${this.isDark
+                ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google-white.png'
+                : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google.png'}
+              alt="subscribe with google"
+            />
+          </button>
+        </div>
+      </div>
+    `
+  }
+
   /**
    * Render Statement
    */
@@ -936,26 +991,6 @@ export class KompasIdPaywallBody extends LitElement {
               this.paywallData?.packages ?? ({} as Packages)
             )}
             ${this.informationPackages()}
-            ${this.swgEnable ? this.separatorLine() : nothing}
-            ${this.swgEnable
-              ? html`<button
-                  class="${this.isDark
-                    ? 'bg-grey-600'
-                    : 'border-2 bg-grey-100 border-grey-100'} rounded-lg px-6 shadow-sm flex flex-row py-2 mt-1 items-center"
-                  id="subscribe-with-google"
-                >
-                  <p class=${this.isDark ? 'text-dark-7' : 'text-grey-500'}>
-                    Subscribe with
-                  </p>
-                  <img
-                    class="pl-2 object-scale-down w-20 pt-0.5"
-                    src=${this.isDark
-                      ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google-white.png'
-                      : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google.png'}
-                    alt="subscribe with google"
-                  />
-                </button>`
-              : nothing}
             ${!this.isLogin
               ? html`
                   <div

package/tailwind/tailwind.css

@@ -672,6 +672,14 @@ video {
   margin-left: 0.25rem;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ml-3 {
+  margin-left: 0.75rem;
+}
+
 .ml-8 {
   margin-left: 2rem;
 }
@@ -764,6 +772,18 @@ video {
   height: 2.25rem;
 }
 
+.h-\[17px\] {
+  height: 17px;
+}
+
+.h-\[68px\] {
+  height: 68px;
+}
+
+.h-\[76px\] {
+  height: 76px;
+}
+
 .h-auto {
   height: auto;
 }
@@ -772,6 +792,11 @@ video {
   height: 100%;
 }
 
+.h-max {
+  height: -moz-max-content;
+  height: max-content;
+}
+
 .w-1\/5 {
   width: 20%;
 }
@@ -844,10 +869,6 @@ video {
   max-width: 80rem;
 }
 
-.max-w-\[280px\] {
-  max-width: 280px;
-}
-
 .max-w-screen-md {
   max-width: 768px;
 }
@@ -925,6 +946,10 @@ video {
   flex-wrap: wrap;
 }
 
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
 .place-items-center {
   place-items: center;
 }
@@ -969,10 +994,16 @@ video {
   row-gap: 1rem;
 }
 
-.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
@@ -1003,6 +1034,10 @@ video {
   align-self: center;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1092,6 +1127,11 @@ video {
   border-color: rgb(238 238 238 / var(--tw-border-opacity));
 }
 
+.border-grey-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(153 153 153 / var(--tw-border-opacity));
+}
+
 .border-white {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -1187,6 +1227,11 @@ video {
   background-color: rgb(255 220 63 / var(--tw-bg-opacity));
 }
 
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 225 207 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -1223,11 +1268,6 @@ video {
   padding-right: 1rem;
 }
 
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -1238,6 +1278,11 @@ video {
   padding-right: 10px;
 }
 
+.px-\[22px\] {
+  padding-left: 22px;
+  padding-right: 22px;
+}
+
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1268,6 +1313,11 @@ video {
   padding-bottom: 1.25rem;
 }
 
+.py-\[5\.6px\] {
+  padding-top: 5.6px;
+  padding-bottom: 5.6px;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1324,10 +1374,6 @@ video {
   padding-top: 0.125rem;
 }
 
-.pt-1 {
-  padding-top: 0.25rem;
-}
-
 .pt-10 {
   padding-top: 2.5rem;
 }
@@ -1396,6 +1442,10 @@ video {
   font-weight: 400;
 }
 
+.leading-4 {
+  line-height: 1rem;
+}
+
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -1459,11 +1509,6 @@ video {
   color: rgb(0 85 154 / var(--tw-text-opacity));
 }
 
-.text-dark-1 {
-  --tw-text-opacity: 1;
-  color: rgb(160 160 160 / var(--tw-text-opacity));
-}
-
 .text-dark-6 {
   --tw-text-opacity: 1;
   color: rgb(46 46 46 / var(--tw-text-opacity));
@@ -1590,6 +1635,19 @@ video {
     height: 3rem;
   }
 
+  .md\:h-5 {
+    height: 1.25rem;
+  }
+
+  .md\:h-\[68px\] {
+    height: 68px;
+  }
+
+  .md\:h-max {
+    height: -moz-max-content;
+    height: max-content;
+  }
+
   .md\:min-h-\[244px\] {
     min-height: 244px;
   }
@@ -1630,8 +1688,8 @@ video {
     width: 100%;
   }
 
-  .md\:max-w-full {
-    max-width: 100%;
+  .md\:max-w-\[137px\] {
+    max-width: 137px;
   }
 
   .md\:max-w-sm {
@@ -1646,10 +1704,34 @@ video {
     flex-direction: row;
   }
 
+  .md\:flex-col {
+    flex-direction: column;
+  }
+
+  .md\:items-start {
+    align-items: flex-start;
+  }
+
   .md\:justify-start {
     justify-content: flex-start;
   }
 
+  .md\:justify-center {
+    justify-content: center;
+  }
+
+  .md\:space-x-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0px * var(--tw-space-x-reverse));
+    margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .md\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(0.5rem * 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));
@@ -1709,6 +1791,16 @@ video {
     padding-right: 1.5rem;
   }
 
+  .md\:py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
+  .md\:py-1\.5 {
+    padding-top: 0.375rem;
+    padding-bottom: 0.375rem;
+  }
+
   .md\:py-2 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
@@ -1759,6 +1851,11 @@ video {
     line-height: 1.75rem;
   }
 
+  .md\:text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
   .md\:leading-6 {
     line-height: 1.5rem;
   }