From 6e188b3acb8cfd7897787dc88ff5d19738be9e54 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Fri, 19 Jul 2024 00:21:42 +0300
Subject: [PATCH 1/2] Show the node price if the node is rentable or rented by
 the logged-in user

---
 .../src/components/node_selector/TfNodeDetailsCard.vue     | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
index a7119d126e..57da082d37 100644
--- a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
+++ b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -175,7 +175,7 @@
       </VRow>
 
       <VRow>
-        <VCol class="tf-node-resource">
+        <VCol class="tf-node-resource mb-5">
           <ResourceDetails
             name="SSD Disks"
             :used="(node?.used_resources.sru ?? 0) + selectedMachines.reduce((r, m) => r + m.disk * 1e9, 0)"
@@ -192,7 +192,7 @@
           />
         </VCol>
       </VRow>
-      <div class="mt-5 ml-auto text-right">
+      <div class="ml-auto text-right" v-if="node && (node.rentable || rentedByUser)">
         <v-tooltip bottom color="primary" close-delay="100" :disabled="!(node && node.dedicated)">
           <template v-slot:activator="{ isActive, props }">
             <span v-bind="props" v-on="isActive" class="font-weight-bold"
@@ -278,8 +278,7 @@ import type { GridClient, NodeInfo, NodeResources } from "@threefold/grid_client
 import { discountPackages } from "@threefold/grid_client";
 import { CertificationType, type GridNode } from "@threefold/gridproxy_client";
 import { QueryClient } from "@threefold/tfchain_client";
-import { computed, onMounted, ref, watch } from "vue";
-import { capitalize, type PropType } from "vue";
+import { capitalize, computed, onMounted, type PropType, ref, watch } from "vue";
 
 import { gridProxyClient } from "@/clients";
 import ReserveBtn from "@/dashboard/components/reserve_action_btn.vue";

From 4fb10198bdc2f095a25953cc2b6f3c5d9fdf46ac Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 21 Jul 2024 12:45:54 +0300
Subject: [PATCH 2/2] update price condition

---
 .../node_selector/TfNodeDetailsCard.vue       | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
index 57da082d37..722aecfa71 100644
--- a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
+++ b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -68,7 +68,8 @@
         <span class="font-weight-bold" v-text="toReadableDate(node.uptime)" />
       </span>
       <span class="ml-2" v-if="node"
-        >Last Deployment Time: {{ lastDeploymentTime === 0 ? "N/A" : toHumanDate(lastDeploymentTime) }}
+        >Last Deployment Time:
+        {{ lastDeploymentTime === 0 ? "N/A" : toHumanDate(lastDeploymentTime) }}
       </span>
     </template>
 
@@ -192,7 +193,7 @@
           />
         </VCol>
       </VRow>
-      <div class="ml-auto text-right" v-if="node && (node.rentable || rentedByUser)">
+      <div class="ml-auto text-right" v-if="node && (rentedByUser || (node.status !== 'down' && node.rentable))">
         <v-tooltip bottom color="primary" close-delay="100" :disabled="!(node && node.dedicated)">
           <template v-slot:activator="{ isActive, props }">
             <span v-bind="props" v-on="isActive" class="font-weight-bold"
@@ -210,9 +211,24 @@
               hover
               :loading="loadingdiscountTableItems"
               :headers="[
-                { title: 'Packages', align: 'center', key: 'name', sortable: false },
-                { title: 'Discount', align: 'center', key: 'discount', sortable: false },
-                { title: 'TFTs Required', align: 'center', key: 'tfts', sortable: false },
+                {
+                  title: 'Packages',
+                  align: 'center',
+                  key: 'name',
+                  sortable: false,
+                },
+                {
+                  title: 'Discount',
+                  align: 'center',
+                  key: 'discount',
+                  sortable: false,
+                },
+                {
+                  title: 'TFTs Required',
+                  align: 'center',
+                  key: 'tfts',
+                  sortable: false,
+                },
               ]"
               :items="discountTableItems"
               disable-sort="true"