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:
parent
961a9ccb57
commit
89bfdcf7fb
3 changed files with 38 additions and 47 deletions
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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") }}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue