From 89bfdcf7fb5d5534901ee1104bc77c5746a7b0cb Mon Sep 17 00:00:00 2001 From: Nikhil Kothari Date: Thu, 12 Mar 2026 01:23:41 +0530 Subject: [PATCH] fix: onboarding card placement and style (#37943) * fix: remove business hours restriction on chat support * fix: onboarding card placement and style * fix: left position * fix: use the x icon --------- Co-authored-by: sokumon --- frappe/public/js/billing.bundle.js | 36 +++++++------------ .../ui/user_onboarding/OnboardingPanel.vue | 19 ++++------ .../user_onboarding/user_onboarding.bundle.js | 30 +++++++++------- 3 files changed, 38 insertions(+), 47 deletions(-) diff --git a/frappe/public/js/billing.bundle.js b/frappe/public/js/billing.bundle.js index 95b0780d0d..824f1c12e1 100644 --- a/frappe/public/js/billing.bundle.js +++ b/frappe/public/js/billing.bundle.js @@ -33,14 +33,10 @@ $(document).ready(function () { !frappe.is_mobile() && frappe.user.has_role("System Manager"); if (visiblity_condition && isFCUser) { - frappe.router.on("change", function () { - if (frappe.get_route()[0] == "") { - addChatBubble(); - toggleChatBubble(true); - } else { - toggleChatBubble(false); - } - }); + if (site_info.trial_end_date && trial_end_date > new Date()) { + addChatBubble(); + toggleChatBubble(true); + } } if (isFCUser) { $.extend(card_args, { @@ -100,30 +96,24 @@ function addChatBubble() { const desk_apps = ["erpnext", "hrms"]; const apps_allowed = desk_apps.some((app) => all_apps.includes(app)); - if (checkBusinessHours() && apps_allowed) { + if (apps_allowed) { let chat_banner = document.createElement("script"); chat_banner.setAttribute("id", "chat_widget_trigger"); chat_banner.innerHTML = - 'window.chatwootSettings = {"position":"right","type":"expanded_bubble","launcherTitle":"Chat with us"}; (function(d,t){var BASE_URL="https://chat.frappe.cloud";var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src=BASE_URL+"/packs/js/sdk.js";g.async=true;s.parentNode.insertBefore(g,s);g.onload=function(){window.chatwootSDK.run({websiteToken:"LdmfJzftdJGEcFjoTqk8CrSq",baseUrl:BASE_URL})}})(document,"script");'; + 'window.chatwootSettings = {"position":"right","launcherTitle":"Chat with us", darkMode: "auto"}; (function(d,t){var BASE_URL="https://chat.frappe.cloud";var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src=BASE_URL+"/packs/js/sdk.js";g.async=true;s.parentNode.insertBefore(g,s);g.onload=function(){window.chatwootSDK.run({websiteToken:"LdmfJzftdJGEcFjoTqk8CrSq",baseUrl:BASE_URL})}})(document,"script");'; document.body.append(chat_banner); const root = document.documentElement; root.style.setProperty("--s-700", "var(--gray-500)"); + + // Add padding to the main section to avoid overlapping with the chat bubble + const main_section = document.getElementsByClassName("main-section"); + + if (main_section) { + main_section[0].style.paddingBottom = "90px"; + } } } -function checkBusinessHours() { - let current_time = new Date(); - const ist_time = new Date(current_time.toLocaleString("en-US", { timeZone: "Asia/Kolkata" })); - - const hours = ist_time.getHours(); - const day = ist_time.getDay(); - - const is_weekend = day === 0 || day === 6; - const is_business_hour = hours >= 11 && hours < 18; - - return !is_weekend && is_business_hour; -} - function toggleChatBubble(toggle) { if (toggle) { $(".woot-widget-holder").show(); diff --git a/frappe/public/js/frappe/ui/user_onboarding/OnboardingPanel.vue b/frappe/public/js/frappe/ui/user_onboarding/OnboardingPanel.vue index 6104e4d7a3..20d2189a71 100644 --- a/frappe/public/js/frappe/ui/user_onboarding/OnboardingPanel.vue +++ b/frappe/public/js/frappe/ui/user_onboarding/OnboardingPanel.vue @@ -85,9 +85,6 @@ function resetAll(skips) { } function handleAction(step) { - if (step.is_complete) return; - if (step.is_skipped) return; - if (step.route_options && typeof step.route_options === "string") { frappe.route_options = JSON.parse(step.route_options); } @@ -284,7 +281,7 @@ function markReset(step) { style="align-items: center" :class=" step.is_complete - ? 'text-extra-muted onb-cursor-disabled' + ? 'text-extra-muted onb-select-cursor' : 'text-ink-gray-8 onb-select-cursor' " > @@ -316,15 +313,14 @@ function markReset(step) {
-
+
{{ __("Skip") }} @@ -332,15 +328,14 @@ function markReset(step) {
-
+
{{ __("Reset") }} diff --git a/frappe/public/js/frappe/ui/user_onboarding/user_onboarding.bundle.js b/frappe/public/js/frappe/ui/user_onboarding/user_onboarding.bundle.js index 3ed2215733..1228861377 100644 --- a/frappe/public/js/frappe/ui/user_onboarding/user_onboarding.bundle.js +++ b/frappe/public/js/frappe/ui/user_onboarding/user_onboarding.bundle.js @@ -31,7 +31,7 @@ class UserOnboarding { title: title, steps: steps.value, minimizeIcon: frappe.utils.icon("minimize-2", "sm"), - closeIcon: frappe.utils.icon("close", "sm"), + closeIcon: frappe.utils.icon("x", "sm"), headerIcon: header_icon, checklistIcon: frappe.utils.icon("circle-check", "sm"), completeChecklistIcon: frappe.utils.icon( @@ -59,18 +59,25 @@ class UserOnboarding { function addStyles() { if (document.getElementById("user-onboarding-styles")) return; + const main_section = document.getElementsByClassName("main-section"); + + if (main_section) { + main_section[0].style.paddingBottom = "90px"; + } + const style = document.createElement("style"); style.id = "user-onboarding-styles"; style.innerHTML = ` + .onb-panel { position: fixed; - right: 24px; + left: 236px; bottom: 24px; width: 310px; max-height: 80vh; background: #fff; - border-radius: 16px; + border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.15); padding: 16px; z-index: 9999; @@ -82,7 +89,6 @@ function addStyles() { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 6px; } .onb-header-actions button { @@ -135,21 +141,21 @@ function addStyles() { .onb-steps { margin-top: 16px; - padding: 0; + padding: 0px; list-style: none; display: flex; flex-direction: column; - gap: 12px; + gap: 4px; align-items: flex-start; } - .onb-group:hover { - color: #111827; - background: #f5f5f5; + .onb-group { + padding: 4px 8px; + border-radius: 8px; } - .onb-cursor-disabled { - cursor: not-allowed; + .onb-group:hover { + background: #f5f5f5; } .onb-select-cursor { @@ -240,7 +246,7 @@ function addStyles() { } [data-theme="dark"] .onb-group:hover { - background: #374151; + background: #1C1C1C; color: #f3f4f6; }