From 6e8baedff22f14bab2373d91f41d7fc3158a3305 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 15 Nov 2024 17:29:21 +0530
Subject: [PATCH 1/3] feat: TrialBanner component for portal apps for
 frappecloud billing

---
 src/components/Billing/LightningIcon.vue | 16 ++++++
 src/components/Billing/TrialBanner.vue   | 71 ++++++++++++++++++++++++
 src/index.js                             |  3 +
 3 files changed, 90 insertions(+)
 create mode 100644 src/components/Billing/LightningIcon.vue
 create mode 100644 src/components/Billing/TrialBanner.vue

diff --git a/src/components/Billing/LightningIcon.vue b/src/components/Billing/LightningIcon.vue
new file mode 100644
index 00000000..18c9e08d
--- /dev/null
+++ b/src/components/Billing/LightningIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="17"
+    height="16"
+    viewBox="0 0 17 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.2641 1C5.5758 1 4.97583 1.46845 4.80889 2.1362L3.57555 7.06953C3.33887 8.01625 4.05491 8.93333 5.03077 8.93333H7.50682L6.72168 14.4293C6.68838 14.6624 6.82229 14.8872 7.04319 14.9689C7.26408 15.0507 7.51204 14.9671 7.63849 14.7684L13.2161 6.00354C13.6398 5.33782 13.1616 4.46667 12.3725 4.46667H9.59038L10.3017 1.62127C10.3391 1.4719 10.3055 1.31365 10.2108 1.19229C10.116 1.07094 9.97063 1 9.81666 1H6.2641ZM5.77903 2.37873C5.83468 2.15615 6.03467 2 6.2641 2H9.17627L8.46492 4.8454C8.42758 4.99477 8.46114 5.15302 8.55589 5.27437C8.65064 5.39573 8.79602 5.46667 8.94999 5.46667H12.3725L8.0395 12.2757L8.5783 8.50404C8.5988 8.36056 8.55602 8.21523 8.46105 8.10573C8.36608 7.99623 8.22827 7.93333 8.08332 7.93333H5.03077C4.70548 7.93333 4.4668 7.62764 4.5457 7.31207L5.77903 2.37873Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/src/components/Billing/TrialBanner.vue b/src/components/Billing/TrialBanner.vue
new file mode 100644
index 00000000..d3549ac8
--- /dev/null
+++ b/src/components/Billing/TrialBanner.vue
@@ -0,0 +1,71 @@
+<template>
+  <div
+    v-if="!isSidebarCollapsed && showBanner"
+    class="m-2 flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-white text-base"
+  >
+    <div class="flex flex-col gap-1">
+      <div class="inline-flex gap-2 items-center font-medium">
+        <FeatherIcon class="h-4" name="info" />
+        {{ trialTitle }}
+      </div>
+      <div class="text-gray-700 text-sm font-normal leading-5">
+        {{ trialMessage }}
+      </div>
+    </div>
+    <Button :label="'Upgrade plan'" theme="red" @click="openBillingPage">
+      <template #prefix>
+        <LightningIcon class="size-4" />
+      </template>
+    </Button>
+  </div>
+</template>
+<script setup>
+import LightningIcon from './LightningIcon.vue'
+import FeatherIcon from '../FeatherIcon.vue'
+import Button from '../Button.vue'
+import { createResource } from '../../resources'
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  isSidebarCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const trialEndDays = ref(0)
+const showBanner = ref(false)
+
+const trialTitle = computed(() => {
+  return trialEndDays.value > 1
+    ? 'Trial ends in ' + trialEndDays.value + ' days'
+    : 'Trial will end tomorrow'
+})
+
+const trialMessage = 'Upgrade to get latest and exclusive features'
+
+createResource({
+  url: 'frappe.integrations.frappe_providers.frappecloud_billing.current_site_info',
+  cache: 'currentSiteInfo',
+  auto: true,
+  onSuccess: (data) => {
+    trialEndDays.value = calculateTrialEndDays(data.trial_end_date)
+    showBanner.value =
+      window.setup_complete && data.plan.is_trial_plan && trialEndDays.value > 0
+  },
+})
+
+function calculateTrialEndDays(trialEndDate) {
+  if (!trialEndDate) return 0
+
+  trialEndDate = new Date(trialEndDate)
+  const today = new Date()
+  const diffTime = trialEndDate - today
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+  return diffDays
+}
+
+function openBillingPage() {
+  window.location.href = '/billing'
+}
+</script>
diff --git a/src/index.js b/src/index.js
index 2ddeb011..e52de535 100644
--- a/src/index.js
+++ b/src/index.js
@@ -66,6 +66,9 @@ export { default as NestedPopover } from './components/ListFilter/NestedPopover.
 export { default as CircularProgressBar } from './components/CircularProgressBar.vue'
 export { default as Tree } from './components/Tree/Tree.vue'
 
+// billing components
+export { default as TrialBanner } from './components/Billing/TrialBanner.vue'
+
 // directives
 export { default as onOutsideClickDirective } from './directives/onOutsideClick.js'
 export { default as visibilityDirective } from './directives/visibility.js'

From 9b480a68f561714edd3d49e79d2563f2d1c1f8fd Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 15 Nov 2024 17:34:59 +0530
Subject: [PATCH 2/3] fix: updated description message

---
 src/components/Billing/TrialBanner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Billing/TrialBanner.vue b/src/components/Billing/TrialBanner.vue
index d3549ac8..46776cba 100644
--- a/src/components/Billing/TrialBanner.vue
+++ b/src/components/Billing/TrialBanner.vue
@@ -42,7 +42,7 @@ const trialTitle = computed(() => {
     : 'Trial will end tomorrow'
 })
 
-const trialMessage = 'Upgrade to get latest and exclusive features'
+const trialMessage = 'Upgrade to a paid plan for uninterrupted services'
 
 createResource({
   url: 'frappe.integrations.frappe_providers.frappecloud_billing.current_site_info',

From 68aacaba4481b5e35d85d84a730fec6202bb28e0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 15 Nov 2024 17:53:31 +0530
Subject: [PATCH 3/3] fix: changed upgrade button's color to blue

---
 src/components/Billing/TrialBanner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Billing/TrialBanner.vue b/src/components/Billing/TrialBanner.vue
index 46776cba..44e31cc8 100644
--- a/src/components/Billing/TrialBanner.vue
+++ b/src/components/Billing/TrialBanner.vue
@@ -12,7 +12,7 @@
         {{ trialMessage }}
       </div>
     </div>
-    <Button :label="'Upgrade plan'" theme="red" @click="openBillingPage">
+    <Button :label="'Upgrade plan'" theme="blue" @click="openBillingPage">
       <template #prefix>
         <LightningIcon class="size-4" />
       </template>