From e62ac763666a5f91c792e8bd4db78ea04bd2e2b8 Mon Sep 17 00:00:00 2001
From: Bhargav <BJP232004@GMAIL.COM>
Date: Wed, 19 Apr 2023 10:30:46 +0530
Subject: [PATCH] fix: Billing UI changes (#594)

* fix: billing changes

* fix: ui changes for billing

* fix: ui changes for billing
---
 web/src/App.vue                               |  3 ++-
 web/src/constants/plans.ts                    |  6 +++---
 .../components/billings/planCard.vue          |  5 ++++-
 web/src/locales/languages/en.json             |  5 +++--
 web/src/stores/index.ts                       | 20 +++++++++++--------
 5 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index d7fb0a53f1..dc6c69510b 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -20,10 +20,11 @@
 <script lang="ts">
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
+import config from "@/aws-exports";
 export default {
   setup() {
     const store = useStore();
-    if (window.location.origin != "http://localhost:8081") {
+    if (config.isZincObserveCloud == "false" && window.location.origin != "http://localhost:8081") {
       let endpoint = window.location.origin + window.location.pathname;
       let pos = window.location.pathname.indexOf("/web/");
       if (pos > -1) {
diff --git a/web/src/constants/plans.ts b/web/src/constants/plans.ts
index 845d2ee450..6e350fef02 100644
--- a/web/src/constants/plans.ts
+++ b/web/src/constants/plans.ts
@@ -39,9 +39,9 @@ const Plans = [
     price: "$1000 or 10% of monthly spend, whichever is greater",
     duration: "monthly",
     included: {
-      rule1: "Developer Plan Features",
-      rule2: "Additional Ingestion ($0.50/GB)",
-      rule3: "Additional Query Volume ($5/GB)",
+      rule1: "Additional Ingestion ($0.50/GB)",
+      rule2: "Additional Query Volume ($5/TB)",
+      rule3: "",
     },
     basic: false,
     pro: true,
diff --git a/web/src/enterprise/components/billings/planCard.vue b/web/src/enterprise/components/billings/planCard.vue
index dbee544df9..21d5132276 100644
--- a/web/src/enterprise/components/billings/planCard.vue
+++ b/web/src/enterprise/components/billings/planCard.vue
@@ -76,6 +76,9 @@
       <div class="text-body1 text-weight-bold q-mt-md">
         {{ t("billing.whatIsIncluded") }}
       </div>
+      <div class="text-body1 text-weight-bold q-mt-md" v-if="planData.type == 'pro'">
+          {{ t("billing.everythingDeveloperPlan") }}
+      </div>
       <div class="q-mt-lg q-mb-xl">
         <div class="q-mt-sm">
           <q-icon name="check_circle" size="20px"
@@ -91,7 +94,7 @@
             planData.included.rule2
           }}</span>
         </div>
-        <div class="q-mt-sm">
+        <div class="q-mt-sm" v-if="planData.included.rule3 != ''">
           <q-icon name="check_circle" size="20px"
 :color="cardColor" />
           <span class="q-ml-sm text-body1 text-weight-redular">{{
diff --git a/web/src/locales/languages/en.json b/web/src/locales/languages/en.json
index 77fe9f83ac..b5e1430cdf 100644
--- a/web/src/locales/languages/en.json
+++ b/web/src/locales/languages/en.json
@@ -44,7 +44,7 @@
     "alerts": "Alerts",
     "openapi": "OpenAPI",
     "docs": "Docs",
-    "billings": "Billings"
+    "billings": "Billing"
   },
   "about": {
     "name": "ZincObserve",
@@ -349,7 +349,8 @@
     "action": "Action",
     "usage": "Usage",
     "manageCards": "Manage Cards",
-    "subscriptionCheckout": "Subscription checkout"
+    "subscriptionCheckout": "Subscription checkout",
+    "everythingDeveloperPlan": "Everything in Developer Plan, plus:"
   },
   "message": {
     "ServerInternalError": "Error: Something wrong went. Internal server error.",
diff --git a/web/src/stores/index.ts b/web/src/stores/index.ts
index 9c51d0592f..b66266eb6d 100644
--- a/web/src/stores/index.ts
+++ b/web/src/stores/index.ts
@@ -15,16 +15,20 @@
 import { createStore } from "vuex";
 import { useLocalOrganization, useLocalCurrentUser } from "../utils/zincutils";
 
+const API_ENDPOINT =
+  import.meta.env.VITE_ZINCOBSERVE_CLOUD &&
+  import.meta.env.VITE_ZINCOBSERVE_CLOUD == "true"
+    ? import.meta.env.VITE_ZINCOBSERVE_ENDPOINT &&
+      import.meta.env.VITE_ZINCOBSERVE_ENDPOINT.endsWith("/")
+      ? import.meta.env.VITE_ZINCOBSERVE_ENDPOINT.slice(0, -1)
+      : import.meta.env.VITE_ZINCOBSERVE_ENDPOINT
+    : window.location.origin != "http://localhost:8081"
+    ? window.location.origin
+    : "http://localhost:5080";
+
 export default createStore({
   state: {
-    API_ENDPOINT:
-      (import.meta.env.VITE_ZINCOBSERVE_ENDPOINT &&
-      import.meta.env.VITE_ZINCOBSERVE_ENDPOINT.endsWith("/")
-        ? import.meta.env.VITE_ZINCOBSERVE_ENDPOINT.slice(0, -1)
-        : import.meta.env.VITE_ZINCOBSERVE_ENDPOINT) ||
-      (window.location.origin != "http://localhost:8081"
-        ? window.location.origin
-        : "http://localhost:5080"),
+    API_ENDPOINT: API_ENDPOINT,
     userInfo: {},
     loggedIn: false,
     loadingState: true,