Merge pull request #216 from shariquerik/trial-banner

feat: TrialBanner component for portal apps for frappecloud billing

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>

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="blue" @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 a paid plan for uninterrupted services'
+
+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>

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'