From f3605b03bb04950d596e0b6fc5826142e987b25b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pha=CC=A3m=20Va=CC=86n=20Kha=CC=81nh?=
 <khanhpv@ecotekcorp.com>
Date: Thu, 16 May 2024 17:44:29 +0700
Subject: [PATCH] khanhpv - fix style shopmodal, shopitem, post request

---
 .../src/components/Modal/Shop/ShopModal.tsx   | 30 ++++++++++++++-----
 .../src/components/Shop/ShopItem.tsx          | 15 ++++++----
 .../src/connector/booka/sdk.ts                | 19 ++++++------
 .../src/connector/booka/types.ts              |  1 +
 4 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/packages/extension-koni-ui/src/components/Modal/Shop/ShopModal.tsx b/packages/extension-koni-ui/src/components/Modal/Shop/ShopModal.tsx
index 75c2d5b8d1..7c363c40cd 100644
--- a/packages/extension-koni-ui/src/components/Modal/Shop/ShopModal.tsx
+++ b/packages/extension-koni-ui/src/components/Modal/Shop/ShopModal.tsx
@@ -53,7 +53,20 @@ function Component ({ className, energyConfig,
       inventoryItemMapByGameItemId[i.gameItemId] = i;
     });
 
-    const getShopItem = (gi: GameItem, disabled = false): ShopItemInfo => {
+    const getShopItem = (gi: GameItem, disabled = false): {
+      gameId: number;
+      itemGroup: string;
+      usable: false | boolean | undefined;
+      gameItemId: string;
+      itemGroupLevel: number;
+      inventoryQuantity: number | undefined;
+      price: number;
+      name: string;
+      limit: number | undefined;
+      icon: string | undefined;
+      description: string;
+      disabled: boolean
+    } => {
       const limit = gi.maxBuy || undefined;
       const inventoryQuantity = inventoryItemMapByGameItemId[gi.id]?.quantity || undefined;
 
@@ -68,7 +81,8 @@ function Component ({ className, energyConfig,
         itemGroupLevel: gi.itemGroupLevel,
         price: gi.price,
         disabled: disabled || (!!limit && limit > 0 && limit === inventoryQuantity) || (!!gi.itemGroup && inventoryQuantity === 1),
-        usable: !!inventoryQuantity && inventoryQuantity > 0 && inventoryItemMapByGameItemId[gi.id]?.usable
+        usable: !!inventoryQuantity && inventoryQuantity > 0 && inventoryItemMapByGameItemId[gi.id]?.usable,
+        icon: gi.icon
       };
     };
 
@@ -111,6 +125,7 @@ function Component ({ className, energyConfig,
   }, [energyConfig, gameId, gameInventoryItemList, gameItemMap]);
   const onBuy = useCallback((gameItemId: string) => {
     setIsLoading(true);
+
     if (gameItemId === 'buy-energy-id') {
       apiSDK.buyEnergy()
         .then(() => {
@@ -119,7 +134,7 @@ function Component ({ className, energyConfig,
             type: 'success'
           });
         })
-        .catch((error) => {
+        .catch((error: Error) => {
           notify({
             message: error.message,
             type: 'error'
@@ -136,7 +151,7 @@ function Component ({ className, energyConfig,
             type: 'success'
           });
         })
-        .catch((error) => {
+        .catch((error: Error) => {
           notify({
             message: error.message,
             type: 'error'
@@ -157,11 +172,10 @@ function Component ({ className, energyConfig,
           type: 'success'
         });
       })
-      .catch((e) => {
-        console.log('onUse error', e);
+      .catch((e: Error) => {
         notify({
-          message: 'Error',
-          type: e.error
+          message: e.message,
+          type: 'error'
         });
       }).finally(() => {
         setIsLoading(false);
diff --git a/packages/extension-koni-ui/src/components/Shop/ShopItem.tsx b/packages/extension-koni-ui/src/components/Shop/ShopItem.tsx
index 5f58e09d1f..dd3d6e0a95 100644
--- a/packages/extension-koni-ui/src/components/Shop/ShopItem.tsx
+++ b/packages/extension-koni-ui/src/components/Shop/ShopItem.tsx
@@ -19,9 +19,10 @@ function Component (props: Props): React.ReactElement<Props> {
     description,
     disabled,
     gameItemId,
+    icon,
     inventoryQuantity,
     limit,
-    name, onBuy, price, usable, onUse } = props;
+    name, onBuy, onUse, price, usable } = props;
 
   const _onBuy = useCallback(() => {
     onBuy(gameItemId, 1);
@@ -41,24 +42,24 @@ function Component (props: Props): React.ReactElement<Props> {
     >
       <Image
         className={'item-icon'}
-        src={DefaultLogosMap.subwallet}
+        src={icon || DefaultLogosMap.subwallet}
         width={40}
       />
 
       <div className={'__middle-part'}>
-        <div>{name}</div>
-        <div>description: {description}</div>
+        <div className={'__website-name h5-text'}>{name}</div>
+        <div className={'__website-domain cdescription'}> {description !== null && 'Description: ' + description}</div>
         {
           !!limit && (
             <div>Limit: {limit}</div>
           )
         }
 
-        <div>Price: {price}</div>
+        <div className={'__website-domain description'}>Price: <strong> {price}</strong></div>
 
         {
           !!inventoryQuantity && (
-            <div>Quantity: {inventoryQuantity}</div>
+            <div className={'__website-domain description'}>Quantity: <strong> {inventoryQuantity}</strong></div>
           )
         }
 
@@ -68,6 +69,7 @@ function Component (props: Props): React.ReactElement<Props> {
         usable && (
           <Button
             onClick={_onUse}
+            size={'xs'}
           >
             Use
           </Button>
@@ -77,6 +79,7 @@ function Component (props: Props): React.ReactElement<Props> {
       <Button
         disabled={disabled}
         onClick={_onBuy}
+        size={'xs'}
       >
         Buy
       </Button>
diff --git a/packages/extension-koni-ui/src/connector/booka/sdk.ts b/packages/extension-koni-ui/src/connector/booka/sdk.ts
index db3909b6e2..ceb427e817 100644
--- a/packages/extension-koni-ui/src/connector/booka/sdk.ts
+++ b/packages/extension-koni-ui/src/connector/booka/sdk.ts
@@ -157,26 +157,25 @@ export class BookaSdk {
       return undefined;
     }
   }
-  private async postRequest<T>(url: string, body: any): Promise<T> {
+
+  private async postRequest<T, U>(url: string, body: U): Promise<T> {
     try {
       const response = await fetch(url, {
         method: 'POST',
         headers: this.getRequestHeader(),
-        body: JSON.stringify(body)
-      });  
-      if (response.status === 200 || response.status === 304) {
-        return (await response.json()) as T;
-      }
-      if (response.status === 400) {
-        const errorResponse = await response.json();
+        body: JSON.stringify(body),
+      });
+
+      if (response && response.status === 200  || response.status === 304) {
+        return await response.json();
+      } else {
+        const errorResponse = await response.json() as { error: string };
         throw new Error(errorResponse.error || 'Bad request');
       }
-      throw new Error(`HTTP error! status: ${response.status}`);
     } catch (error) {
       throw error;
     }
   }
-  
 
   private async reloadAccount () {
     const account = this.account;
diff --git a/packages/extension-koni-ui/src/connector/booka/types.ts b/packages/extension-koni-ui/src/connector/booka/types.ts
index a0bad5ac7c..2371a100c1 100644
--- a/packages/extension-koni-ui/src/connector/booka/types.ts
+++ b/packages/extension-koni-ui/src/connector/booka/types.ts
@@ -28,6 +28,7 @@ export interface GameItem {
   itemGroup: string,
   itemGroupLevel: number,
   effectDuration: number,
+  icon?: string
 }
 
 export enum GameInventoryItemStatus {