From a37b053a4e8fbc3d57c7f1e6d32414ff0b16c954 Mon Sep 17 00:00:00 2001
From: Billy Surya <95603213+billsur@users.noreply.github.com>
Date: Tue, 14 May 2024 16:22:14 +0700
Subject: [PATCH 1/2] feat(grace-period): update cta link redirect to extend
 membership url

---
 src/components.d.ts                           |  8 ++++++++
 .../kompas-grace-period.tsx                   | 20 +++++++++++--------
 src/components/kompas-grace-period/readme.md  | 11 +++++-----
 src/index.html                                |  2 +-
 4 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index ebcfd90..5e14216 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -129,6 +129,10 @@ export namespace Components {
           * prop isShowButton untuk nampilin button perbarui langganan
          */
         "isShowButton": boolean;
+        /**
+          * prop subscriptionId untuk renewal subs.
+         */
+        "subscriptionId": string;
         /**
           * prop totalGracePeriod untuk menghitung berapa hari grace period user.
          */
@@ -657,6 +661,10 @@ declare namespace LocalJSX {
           * prop isShowButton untuk nampilin button perbarui langganan
          */
         "isShowButton"?: boolean;
+        /**
+          * prop subscriptionId untuk renewal subs.
+         */
+        "subscriptionId"?: string;
         /**
           * prop totalGracePeriod untuk menghitung berapa hari grace period user.
          */
diff --git a/src/components/kompas-grace-period/kompas-grace-period.tsx b/src/components/kompas-grace-period/kompas-grace-period.tsx
index 740d60b..fc2d5f3 100644
--- a/src/components/kompas-grace-period/kompas-grace-period.tsx
+++ b/src/components/kompas-grace-period/kompas-grace-period.tsx
@@ -22,7 +22,7 @@ export class KompasGracePeriod {
   /**
    * state updateSubscription untuk memberikan link user akan dialihkan ke halaman berlangganan.
    */
-  @State() updateSubscription: string = 'https://www.kompas.id/berlangganan';
+  @State() updateSubscription: string = 'https://checkoutv2.kompas.id';
   /**
    * Props
    */
@@ -30,15 +30,19 @@ export class KompasGracePeriod {
    * prop totalGracePeriod untuk menghitung berapa hari grace period user.
    */
   @Prop() totalGracePeriod: number = 0;
-    /**
+  /**
    * prop isColoumn untuk merubah flex-column pada header account profile
    */
   @Prop() isColoumn: boolean = false;
-    /**
+  /**
    * prop isShowButton untuk nampilin button perbarui langganan
    */
   @Prop() isShowButton: boolean = false;
-  
+  /**
+   * prop subscriptionId untuk renewal subs.
+   */
+  @Prop() subscriptionId: string;
+
   /**
    * TEMPLATING
    */
@@ -66,7 +70,7 @@ export class KompasGracePeriod {
 
   private redirectToBerlangganan = (): void => {
     this.dataLayeronPerbaruiLanggananButton();
-    window.location.href = this.updateSubscription;
+    window.location.href = this.updateSubscription + `/kdp?productId=${this.subscriptionId}`;
   };
 
   private dataLayeronPerbaruiLanggananButton = (): void => {
@@ -88,11 +92,11 @@ export class KompasGracePeriod {
   };
 
   private gracePeriodTemplate = (): void => (
-    <div class={`${this.isColoumn ? 'rounded-lg' : 'md:flex-row lg:px-20'} flex flex-col w-full bg-orange-100 justify-end py-4 md:space-x-4 px-4 bottom-0`}>
+    <div class={`${this.isColoumn ? 'rounded-lg' : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto`}>
       <div class="text-grey-600 text-sm md:text-base self-center text-left">{this.getCountdownGracePeriod()}</div>
       {!this.isShowButton ? (
         <div class="flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0">
-          <button onClick={this.redirectToBerlangganan} class="bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full">
+          <button onClick={this.redirectToBerlangganan} class="bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto ">
             Perbarui Langganan
           </button>
         </div>
@@ -105,6 +109,6 @@ export class KompasGracePeriod {
   }
 
   render() {
-    return <div class="sticky bottom-0 w-full h-full">{this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : ''}</div>;
+    return <div class="sticky bottom-0 w-full h-full bg-orange-100">{this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : ''}</div>;
   }
 }
diff --git a/src/components/kompas-grace-period/readme.md b/src/components/kompas-grace-period/readme.md
index 774f8d2..1141cd3 100644
--- a/src/components/kompas-grace-period/readme.md
+++ b/src/components/kompas-grace-period/readme.md
@@ -7,11 +7,12 @@
 
 ## Properties
 
-| Property           | Attribute            | Description                                                           | Type      | Default |
-| ------------------ | -------------------- | --------------------------------------------------------------------- | --------- | ------- |
-| `isColoumn`        | `is-coloumn`         | prop isColoumn untuk merubah flex-column pada header account profile  | `boolean` | `false` |
-| `isShowButton`     | `is-show-button`     | prop isShowButton untuk nampilin button perbarui langganan            | `boolean` | `false` |
-| `totalGracePeriod` | `total-grace-period` | prop totalGracePeriod untuk menghitung berapa hari grace period user. | `number`  | `0`     |
+| Property                      | Attribute            | Description                                                           | Type      | Default     |
+| ----------------------------- | -------------------- | --------------------------------------------------------------------- | --------- | ----------- |
+| `isColoumn`                   | `is-coloumn`         | prop isColoumn untuk merubah flex-column pada header account profile  | `boolean` | `false`     |
+| `isShowButton`                | `is-show-button`     | prop isShowButton untuk nampilin button perbarui langganan            | `boolean` | `false`     |
+| `subscriptionId` _(required)_ | `subscription-id`    | prop subscriptionId untuk renewal subs.                               | `any`     | `undefined` |
+| `totalGracePeriod`            | `total-grace-period` | prop totalGracePeriod untuk menghitung berapa hari grace period user. | `number`  | `0`         |
 
 
 ## Dependencies
diff --git a/src/index.html b/src/index.html
index 229a013..f4d6dd7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -164,7 +164,7 @@ <h2>Lipsum Dei</h2>
     metered_wall_type="metered_wall_type"
     epaper_edition="epaper_edition"
   ></kid-metered-paywall> -->
-    <!-- <kompas-grace-period total-grace-period=5></kompas-grace-period> -->
+    <kompas-grace-period total-grace-period="7" subscription-id="9802032"></kompas-grace-period>
     <!-- <kompas-metered-register
       countdown-article="2"
       tracker_page_title="Example Page Title"

From d00da57b8833d176e769dacb9b79cb2b11da76d8 Mon Sep 17 00:00:00 2001
From: Billy Surya <95603213+billsur@users.noreply.github.com>
Date: Tue, 14 May 2024 16:22:19 +0700
Subject: [PATCH 2/2] v1.8.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4f57f58..b33a9b8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kompasid/web-components",
-  "version": "v1.8.6",
+  "version": "v1.8.7",
   "description": "Kompas.id reusable web components",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",