Merge pull request #2699 from threefoldtech/development_upgrade_card

Upgrade card creation
threefoldtech · May 21, 2024 · e7bb580 · e7bb580
2 parents 5856083 + 72c7a0f
commit e7bb580
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 21 deletions.
diff --git a/packages/playground/src/calculator/pricing_calculator.vue b/packages/playground/src/calculator/pricing_calculator.vue
@@ -153,29 +153,57 @@
           <VRow class="text-center text-body-1 text-black" v-else-if="valid">
             <VCol cols="6">
               <div
-                class="rounded pa-4 h-100 d-flex justify-center align-center"
-                :style="{ background: computePackageColor(priceTask.data?.dedicatedPackage.package) }"
+                class="rounded pa-4 discount"
+                :style="{
+                  background: computePackageColor(priceTask.data?.dedicatedPackage.package),
+                }"
               >
-                <p>
-                  Cost of reserving a <strong v-text="'Dedicated Node'" /> of the same specifications<br />
-                  <strong v-text="'Loading...'" v-if="priceTask.loading" />
-                  <strong v-else v-text="dedicatedPriceUSD + ' USD/month, ' + dedicatedPriceTFT + ' TFT/month'" />. A
-                  user can reserve an entire node then use it exclusively to deploy solutions
-                </p>
+                <input-tooltip
+                  justifyCenter
+                  alignCenter
+                  tooltip="Dedicated Node allow user to reserve an entire node then use it exclusively to deploy solutions."
+                >
+                  <p>
+                    Cost of reserving a
+                    <strong class="mr-1" v-text="'Dedicated Node'" />
+                    <strong v-text="'Loading...'" v-if="priceTask.loading" />
+                    <strong v-else v-text="dedicatedPriceUSD + ' USD/month, ' + dedicatedPriceTFT + ' TFT/month'" />
+                  </p>
+                </input-tooltip>
               </div>
+              <section class="card mt-5" v-if="priceTask.data?.dedicatedPackage.package !== 'gold'">
+                <p class="card-info pa-2">
+                  <b>Too expensive?</b> can upgrade to <b>Gold package</b> to get discount up to 60% when you fund your
+                  wallet with <b>{{ dedicatedUpgradePrice }}</b> TFT
+                </p>
+              </section>
             </VCol>
             <VCol cols="6">
               <div
-                class="rounded pa-4 h-100 d-flex justify-center align-center"
-                :style="{ background: computePackageColor(priceTask.data?.sharedPackage.package) }"
+                class="rounded pa-4 discount"
+                :style="{
+                  background: computePackageColor(priceTask.data?.sharedPackage.package),
+                }"
               >
-                <p>
-                  Cost of reservation on a <strong v-text="'Shared Node'" /><br />
-                  <strong v-text="'Loading...'" v-if="priceTask.loading" />
-                  <strong v-else v-text="sharedPriceUSD + ' USD/month, ' + sharedPriceTFT + ' TFT/month'" />. Shared
-                  Nodes allow several users to host various workloads on a single node
-                </p>
+                <input-tooltip
+                  justifyCenter
+                  alignCenter
+                  tooltip="Shared Nodes allow several users to host various workloads on a single node."
+                >
+                  <p>
+                    Cost of reservation on a
+                    <strong class="mr-1" v-text="'Shared Node'" />
+                    <strong v-text="'Loading...'" v-if="priceTask.loading" />
+                    <strong v-else v-text="sharedPriceUSD + ' USD/month, ' + sharedPriceTFT + ' TFT/month'" />
+                  </p>
+                </input-tooltip>
               </div>
+              <section class="card mt-5 pa-2" v-if="priceTask.data?.sharedPackage.package !== 'gold'">
+                <p class="card-info">
+                  <b>Too expensive?</b> can upgrade to <b>Gold package</b> to get discount up to 60% when you fund your
+                  wallet with <b>{{ sharedUpgradePrice }}</b> TFT
+                </p>
+              </section>
             </VCol>
           </VRow>
 
@@ -207,7 +235,6 @@ import { useProfileManager } from "../stores";
 import { normalizeError } from "../utils/helpers";
 import { balanceRules, cruRules, hruRules, mruRules, nuRules, sruRules } from "../utils/pricing_calculator";
 import { computePackageColor, normalizePrice } from "../utils/pricing_calculator";
-
 export default {
   name: "PricingCalculator",
   setup() {
@@ -226,8 +253,12 @@ export default {
       ipv4: false,
       useCurrentBalance: true,
     });
-
-    const tftPriceTask = useAsync(() => calculator.tftPrice(), { init: true, default: 0 });
+    const dedicatedUpgradePrice = Math.ceil(114.473 * 18);
+    const sharedUpgradePrice = Math.ceil(228.947 * 18);
+    const tftPriceTask = useAsync(() => calculator.tftPrice(), {
+      init: true,
+      default: 0,
+    });
     const priceTask = useAsync(
       () => {
         return calculator.calculate({
@@ -303,7 +334,21 @@ export default {
       normalizeError,
       profileManager,
       manual,
+      dedicatedUpgradePrice,
+      sharedUpgradePrice,
     };
   },
 };
 </script>
+
+<style scoped>
+.discount p {
+  padding: 10px 0;
+}
+
+.card {
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+</style>
diff --git a/packages/playground/src/components/input_tooltip.vue b/packages/playground/src/components/input_tooltip.vue
@@ -3,10 +3,13 @@
     <v-tooltip :text="tooltip || 'None!'" :location="location" :width="width ? width : ''">
       <template #activator="{ props }">
         {{ getPropsRef(props) }}
-        <div class="d-flex" :class="{ 'w-100': !inline, 'align-center': alignCenter }">
+        <div class="d-flex" :class="{ 'w-100': !inline, 'align-center': alignCenter, 'justify-center': justifyCenter }">
           <slot></slot>
           <span
-            :style="{ cursor: 'help', marginTop: $props.alignCenter ? '' : '17.5px' }"
+            :style="{
+              cursor: 'help',
+              marginTop: $props.alignCenter ? '' : '17.5px',
+            }"
             class="ml-3"
             @mouseenter="propsRef?.onMouseenter"
             @mouseleave="propsRef?.onMouseleave"
@@ -56,6 +59,10 @@ export default {
       required: false,
     },
     disabled: Boolean,
+    justifyCenter: {
+      type: Boolean,
+      required: false,
+    },
   },
   setup() {
     const appendIcon = "mdi-information";