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 <sohamkulkarns9@gmail.com>
This commit is contained in:
Nikhil Kothari 2026-03-12 01:23:41 +05:30 committed by GitHub
parent 961a9ccb57
commit 89bfdcf7fb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 38 additions and 47 deletions

View file

@ -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();

View file

@ -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) {
<div v-if="!step.is_complete">
<div v-if="!step.is_skipped">
<div
class="ml-auto text-base onb-show-on-hover text-sm w-12 text-right text-ink-gray-8"
>
<div class="ml-auto onb-show-on-hover text-sm w-12 text-right">
<span
style="
font-size: 12px;
vertical-align: text-top;
margin-right: 10px;
margin-right: 0px;
"
class="text-ink-gray-7"
@click="markSkip(step)"
>
{{ __("Skip") }}
@ -332,15 +328,14 @@ function markReset(step) {
</div>
</div>
<div v-if="step.is_skipped">
<div
class="ml-auto text-base onb-show-on-hover text-sm w-12 text-right text-ink-gray-8"
>
<div class="ml-auto onb-show-on-hover text-sm w-12 text-right">
<span
style="
font-size: 12px;
vertical-align: text-top;
margin-right: 10px;
margin-right: 0px;
"
class="text-ink-gray-7"
@click="markReset(step)"
>
{{ __("Reset") }}

View file

@ -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;
}