refactor: use icons for support included and premium support

frappe · Jan 6, 2025 · 33f1507 · 33f1507
1 parent e49c4a9
commit 33f1507
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 41 deletions.
diff --git a/dashboard/src2/components/ManageSitePlansDialog.vue b/dashboard/src2/components/ManageSitePlansDialog.vue
@@ -20,15 +20,17 @@
 				:isPrivateBenchSite="!$site.doc.group_public"
 				:isDedicatedServerSite="$site.doc.is_dedicated_server"
 			/>
-			<div class="mt-3 text-xs text-gray-700">
-				<p>
-					* <strong>Support</strong> includes only issues and bug fixes related
-					to Frappe apps, functional queries will not be entertained.
-				</p>
-				<p class="mt-1">
-					** If you face any issue while using Frappe Cloud, you can raise
-					support ticket regardless of site plan.
-				</p>
+			<div class="mt-4 text-xs text-gray-700">
+				<div
+					class="flex items-center rounded bg-gray-50 p-2 text-p-base font-medium text-gray-800"
+				>
+					<i-lucide-badge-check class="h-4 w-8 text-gray-600" />
+					<span>
+						<strong>Support</strong> covers only issues of Frappe apps and not
+						functional queries. You can raise a support ticket for Frappe Cloud
+						issues for all plans.
+					</span>
+				</div>
 			</div>
 			<ErrorMessage class="mt-2" :message="$site.setPlan.error" />
 		</template>

diff --git a/dashboard/src2/components/PlansCards.vue b/dashboard/src2/components/PlansCards.vue
@@ -22,16 +22,22 @@
 					]"
 				>
 					<div class="flex items-center justify-between">
-						<div class="text-lg">
+						<div class="flex items-center text-lg">
 							<span class="font-medium text-gray-900">
 								<template v-if="plan.label">
 									{{ plan.label }}
 								</template>
 								<template v-else>
-									{{ $format.planTitle(plan) }}
-									<span v-if="plan.price_inr" class="text-gray-700"> / mo</span>
+									{{ $format.planTitle(plan)
+									}}<span v-if="plan.price_inr" class="text-gray-700">/mo</span>
 								</template>
 							</span>
+							<Tooltip text="Support included">
+								<i-lucide-badge-check
+									class="ml-1 h-4 w-4"
+									v-if="plan.support_included"
+								/>
+							</Tooltip>
 						</div>
 					</div>
 					<div class="mt-1 text-sm text-gray-600">
@@ -47,8 +53,7 @@
 											: plan.price_usd
 									)
 								)
-							}}
-							/ day
+							}}/day
 						</template>
 					</div>
 				</div>

diff --git a/dashboard/src2/components/SiteOverview.vue b/dashboard/src2/components/SiteOverview.vue
@@ -36,33 +36,31 @@
 		<div class="col-span-1 rounded-md border lg:col-span-2">
 			<div class="grid grid-cols-2 lg:grid-cols-4">
 				<div class="border-b border-r p-5 lg:border-b-0">
-					<div class="flex items-center justify-between">
+					<div class="flex h-full items-center justify-between">
 						<div>
 							<div class="text-base text-gray-700">Current Plan</div>
 							<div class="mt-2 flex justify-between">
 								<div>
 									<div class="leading-4">
-										<span class="text-base text-gray-900">
+										<span class="flex items-center text-base text-gray-900">
 											<template v-if="$site.doc.trial_end_date">
 												{{ trialDays($site.doc.trial_end_date) }}
 											</template>
 											<template v-else-if="currentPlan">
 												{{ $format.planTitle(currentPlan) }}
-												<span v-if="currentPlan.price_inr">/ month</span>
+												<span v-if="currentPlan.price_inr">/month</span>
 											</template>
 											<template v-else> No plan set </template>
+											<div
+												class="ml-2 text-sm leading-3 text-gray-600"
+												v-if="currentPlan && currentPlan.support_included"
+											>
+												<Tooltip text="Support included">
+													<i-lucide-badge-check class="h-4 w-4" />
+												</Tooltip>
+											</div>
 										</span>
 									</div>
-									<div
-										class="mt-1 text-sm leading-3 text-gray-600"
-										v-if="currentPlan"
-									>
-										{{
-											currentPlan.support_included
-												? 'Support included'
-												: 'Support not included'
-										}}
-									</div>
 								</div>
 							</div>
 						</div>

diff --git a/dashboard/src2/components/SitePlansCards.vue b/dashboard/src2/components/SitePlansCards.vue
@@ -109,9 +109,6 @@ export default {
 						{
 							value: plan.support_included ? 'Product Warranty' : ''
 						},
-						{
-							value: plan.support_included ? 'Support Included' : ''
-						},
 						{
 							value: plan.database_access ? 'Database Access' : ''
 						},

diff --git a/dashboard/src2/components/server/ServerOverview.vue b/dashboard/src2/components/server/ServerOverview.vue
@@ -17,15 +17,35 @@
 					>
 						<div
 							v-if="d.type === 'header'"
-							class="m-auto flex items-center justify-between"
+							class="m-auto flex h-full items-center justify-between"
 						>
 							<div
 								v-if="d.type === 'header'"
 								class="mt-2 flex flex-col space-y-2"
 							>
 								<div class="text-base text-gray-700">{{ d.label }}</div>
 								<div class="space-y-1">
-									<div class="text-base text-gray-900" v-html="d.value" />
+									<div class="flex items-center text-base text-gray-900">
+										{{ d.value }}
+										<Tooltip v-if="d.isPremium" text="Premium Server">
+											<!-- this icon isn't available in unplugin package yet -->
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="24"
+												height="24"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												class="lucide lucide-circle-parking ml-2 h-4 w-4 text-gray-600"
+											>
+												<circle cx="12" cy="12" r="10" />
+												<path d="M9 17V7h4a3 3 0 0 1 0 6H9" />
+											</svg>
+										</Tooltip>
+									</div>
 									<div class="flex space-x-1">
 										<div class="text-sm text-gray-600" v-html="d.subValue" />
 										<Tooltip v-if="d.help" :text="d.help">
@@ -171,6 +191,7 @@ export default {
 							  )}/mo`
 							: '',
 					type: 'header',
+					isPremium: !!currentPlan.premium,
 					help:
 						additionalStorage > 0
 							? `Server Plan: ${this.$format.userCurrency(

diff --git a/dashboard/src2/pages/NewSite.vue b/dashboard/src2/pages/NewSite.vue
@@ -153,15 +153,17 @@
 						:hideRestrictedPlans="selectedLocalisationCountry"
 					/>
 				</div>
-				<div class="mt-3 text-xs text-gray-700">
-					<p>
-						* <strong>Support</strong> includes only issues and bug fixes
-						related to Frappe apps, functional queries will not be entertained.
-					</p>
-					<p class="mt-1">
-						** If you face any issue while using Frappe Cloud, you can raise
-						support ticket regardless of site plan.
-					</p>
+				<div class="mt-4 text-xs text-gray-700">
+					<div
+						class="flex items-center rounded bg-gray-50 p-2 text-p-base font-medium text-gray-800"
+					>
+						<i-lucide-badge-check class="h-4 w-8 text-gray-600" />
+						<span class="ml-4">
+							<strong>Support</strong> covers only issues of Frappe apps and not
+							functional queries. You can raise a support ticket for Frappe
+							Cloud issues for all plans.
+						</span>
+					</div>
 				</div>
 			</div>
 			<div v-if="selectedVersion && plan && cluster">

diff --git a/press/press/doctype/server_plan/server_plan.py b/press/press/doctype/server_plan/server_plan.py
@@ -38,6 +38,7 @@ class ServerPlan(Plan):
 		"memory",
 		"disk",
 		"platform",
+		"premium",
 	)
 
 	def get_doc(self, doc):
-Original file line number
+Diff line change
@@ Expand Up / @@ -109,9 +109,6 @@ export default { @@
     						{
     							value: plan.support_included ? 'Product Warranty' : ''
     						},
-    						{
-    							value: plan.support_included ? 'Support Included' : ''
-    						},
     						{
     							value: plan.database_access ? 'Database Access' : ''
     						},
@@ Expand Down @@