Merge pull request #183 from pt-kompas-media-nusantara/feat/improve-g…

…race-period 101315 - IMP - Update CTA link
pt-kompas-media-nusantara · May 20, 2024 · 3a487d4 · 3a487d4
2 parents 72c2674 + d00da57
commit 3a487d4
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 15 deletions.
diff --git 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",

diff --git 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
@@ -22,23 +22,27 @@ 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
    */
   /**
    * 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
@@ -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
@@ -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"