Add discount icon with discount package in contracts table

packages/grid_client/src/clients/tf-grid/contracts.ts

@@ -79,6 +79,9 @@ export interface GqlContracts {
 export interface GqlConsumption extends GqlContracts {
   contractBillReports: GqlContractBillReports[];
 }
+export interface GqlDiscountPackage {
+  contractBillReports: GqlContractBillReports[];
+}
 
 export interface GqlContractBillReports {
   id: string;
@@ -107,6 +110,11 @@ export interface GetConsumptionOptions {
   id: number;
 }
 
+export interface GetDiscountPackageOptions {
+  graphqlURL: string;
+  id: number;
+}
+
 export interface CancelMyContractOptions {
   graphqlURL: string;
 }
@@ -251,7 +259,37 @@ class TFContracts extends Contracts {
       throw err;
     }
   }
+  /**
+   * Get contract discount package
+   * @param {GetDiscountPackageOptions} options
+   * @returns {Promie<DiscountLevel>}
+   */
+  async getDiscountPackage(options: GetDiscountPackageOptions): Promise<DiscountLevel> {
+    const gqlClient = new Graphql(options.graphqlURL);
+
+    const body = `query getConsumption($contractId: BigInt!){
+            contractBillReports(where: {contractID_eq: $contractId} ) {
+                discountReceived
+
+            }
+          }`;
+
+    try {
+      const response = await gqlClient.query(body, { contractId: options.id });
 
+      const gqlDiscountPackage: GqlDiscountPackage = response["data"] as GqlDiscountPackage;
+      const billReports = gqlDiscountPackage.contractBillReports;
+      if (billReports.length === 0) {
+        return "None";
+      } else {
+        const discountPackage = billReports[billReports.length - 1].discountReceived;
+        return discountPackage;
+      }
+    } catch (err) {
+      (err as Error).message = formatErrorMessage(`Error getting discount package for contract ${options.id}.`, err);
+      throw err;
+    }
+  }
   /**
    * Get contract consumption per hour in TFT.
    *

packages/grid_client/src/modules/contracts.ts

@@ -11,6 +11,7 @@ import * as PATH from "path";
 
 import {
   ContractsOverdue,
+  type DiscountLevel,
   GqlContracts,
   GqlNameContract,
   GqlNodeContract,
@@ -31,6 +32,7 @@ import {
   BatchCancelContractsModel,
   ContractCancelModel,
   ContractConsumption,
+  ContractDiscountPackage,
   ContractGetByNodeIdAndHashModel,
   ContractGetModel,
   ContractLockModel,
@@ -523,7 +525,19 @@ class Contracts {
   async setDedicatedNodeExtraFee(options: SetDedicatedNodeExtraFeesModel) {
     return (await this.client.contracts.setDedicatedNodeExtraFee(options)).apply();
   }
-
+  /**
+   * Get contract discount package
+   * @param {ContractDiscountPackage} options
+   * @returns {Promie<DiscountLevel>}
+   * @decorators
+   * - `@expose`: Exposes the method for external use.
+   * - `@validateInput`: Validates the input options.
+   */
+  @expose
+  @validateInput
+  async getDiscountPackage(options: ContractDiscountPackage): Promise<DiscountLevel> {
+    return this.client.contracts.getDiscountPackage({ id: options.id, graphqlURL: this.config.graphqlURL });
+  }
   /**
    * Get contract consumption per hour in TFT.
    *

packages/grid_client/src/modules/models.ts

@@ -390,6 +390,10 @@ class ContractConsumption {
   @Expose() @IsInt() @Min(1) id: number;
 }
 
+class ContractDiscountPackage {
+  @Expose() @IsInt() @Min(1) id: number;
+}
+
 class ContractLockModel extends ContractConsumption {}
 
 class TwinCreateModel {
@@ -970,6 +974,7 @@ export {
   ContractsByTwinId,
   ContractsByAddress,
   ContractConsumption,
+  ContractDiscountPackage,
   ContractLockModel,
   TwinCreateModel,
   TwinGetModel,

packages/playground/src/components/contracts_list/contracts_table.vue

@@ -36,9 +36,20 @@
       </template>
 
       <template #[`item.consumption`]="{ item }">
-        <p v-if="item?.consumption !== 0 && item?.consumption !== undefined">
-          {{ item.consumption.toFixed(3) }} TFT/hour
-        </p>
+        <v-row v-if="item?.consumption !== 0 && item?.consumption !== undefined" class="d-flex justify-center">
+          <p class="mr-2">{{ item.consumption.toFixed(3) }} TFT/hour</p>
+
+          <v-tooltip bottom color="primary" close-delay="100" v-if="item.discountPackage">
+            <template v-slot:activator="{ props }">
+              <v-icon class="scale_beat mr-2" color="warning" v-bind="props">mdi-brightness-percent</v-icon>
+            </template>
+
+            <span>
+              {{ item.discountPackage }}
+            </span>
+          </v-tooltip>
+        </v-row>
+
         <p v-else>No Data Available</p>
       </template>
 
@@ -289,7 +300,7 @@
 
 <script lang="ts" setup>
 // Import necessary types and libraries
-import { ContractStates, type GridClient, type OverdueDetails } from "@threefold/grid_client";
+import { ContractStates, discountPackages, type GridClient, type OverdueDetails } from "@threefold/grid_client";
 import { type Contract, ContractState, type NodeStatus } from "@threefold/gridproxy_client";
 import { TFChainError } from "@threefold/tfchain_client";
 import { DeploymentKeyDeletionError } from "@threefold/types";

packages/playground/src/utils/contracts.ts

@@ -1,4 +1,4 @@
-import { ContractStates, type GridClient } from "@threefold/grid_client";
+import { ContractStates, type DiscountLevel, type GridClient } from "@threefold/grid_client";
 import { NodeStatus } from "@threefold/gridproxy_client";
 import type { Ref } from "vue";
 
@@ -60,6 +60,8 @@ export async function normalizeContract(
     consumption = 0;
   }
 
+  const discountPackage = await grid.contracts.getDiscountPackage({ id });
+
   return {
     contract_id: id,
     twin_id: c.twin_id,
@@ -76,6 +78,7 @@ export async function normalizeContract(
     solutionType: data.projectName || data.type || "-",
     expiration,
     consumption: consumption,
+    discountPackage: discountPackage,
   };
 }
 
@@ -155,6 +158,7 @@ export interface NormalizedContract {
   solutionName?: string;
   deploymentType?: string;
   expiration?: string;
+  discountPackage?: DiscountLevel;
 }
 
 export enum ContractType {

packages/playground/src/views/minting_view.vue

@@ -6,20 +6,10 @@
     </v-card>
     <v-alert class="mb-4 text-subtitle-2 font-weight-regular" type="info" variant="tonal">
       For more information about minting check
-      <a
-        class="app-link font-weight-medium"
-        target="_blank"
-        :href="manual.minting_process"
-        >TFT minting process.
-      </a>
+      <a class="app-link font-weight-medium" target="_blank" :href="manual.minting_process">TFT minting process. </a>
       <br />
       The user can verify the 3Nodes' payments on Stellar Blockchain through the Threefold's
-      <a
-        class="app-link font-weight-medium"
-        target="_blank"
-        :href="manual.minting_reports"
-        >minting tool.
-      </a>
+      <a class="app-link font-weight-medium" target="_blank" :href="manual.minting_reports">minting tool. </a>
       <br />
       TFT minting address on Stellar Chain:
       <a