From e8d21ee187f705f13b00901038bb6705de77cdec Mon Sep 17 00:00:00 2001 From: chamikaJ Date: Mon, 28 Jul 2025 16:30:21 +0530 Subject: [PATCH] feat(account-setup): implement skip functionality and update localization - Added a state to manage the skipping process during account setup, enhancing user experience. - Updated button behavior to reflect the skipping state and provide feedback to users. - Included new localization entries for the "skipping" status in multiple languages (Albanian, German, English, Spanish, Portuguese, Chinese). - Refined HubSpot widget styling to ensure better integration with the app's UI. --- worklenz-frontend/public/js/hubspot.js | 34 ++++--------------- .../public/locales/alb/account-setup.json | 1 + .../public/locales/de/account-setup.json | 1 + .../public/locales/en/account-setup.json | 1 + .../public/locales/es/account-setup.json | 1 + .../public/locales/pt/account-setup.json | 1 + .../public/locales/zh/account-setup.json | 1 + .../src/pages/account-setup/account-setup.tsx | 16 +++++++-- 8 files changed, 25 insertions(+), 31 deletions(-) diff --git a/worklenz-frontend/public/js/hubspot.js b/worklenz-frontend/public/js/hubspot.js index e807976b..0929ee7c 100644 --- a/worklenz-frontend/public/js/hubspot.js +++ b/worklenz-frontend/public/js/hubspot.js @@ -76,42 +76,20 @@ class HubSpotManager { style.id = this.styleId; style.textContent = ` /* HubSpot Chat Widget Dark Mode Override */ + /* + Note: We can only style the container backgrounds, not the widget UI inside the iframe. + HubSpot does not currently support external dark mode theming for the chat UI itself. + */ #hubspot-conversations-inline-parent, - #hubspot-conversations-iframe-container, - .shadow-2xl.widget-align-right.widget-align-bottom, - [data-test-id="chat-widget"], - [class*="VizExCollapsedChat"], - [class*="VizExExpandedChat"], - iframe[src*="hubspot"] { - filter: invert(1) hue-rotate(180deg) !important; - background: transparent !important; + #hubspot-conversations-iframe-container { + background: #141414 !important; } - /* Target HubSpot widget container backgrounds */ #hubspot-conversations-inline-parent div, #hubspot-conversations-iframe-container div, [data-test-id="chat-widget"] div { background-color: transparent !important; } - - /* Prevent double inversion of images, avatars, and icons */ - #hubspot-conversations-iframe-container img, - #hubspot-conversations-iframe-container [style*="background-image"], - #hubspot-conversations-iframe-container svg, - iframe[src*="hubspot"] img, - iframe[src*="hubspot"] svg, - [data-test-id="chat-widget"] img, - [data-test-id="chat-widget"] svg { - filter: invert(1) hue-rotate(180deg) !important; - } - - /* More specific targeting for HubSpot widget elements only - avoid affecting app UI */ - div[class*="shadow-2xl"][class*="widget-align"]:not([class*="ant-"]), - div[style*="position: fixed"][id*="hubspot"]:not([class*="ant-"]), - div[style*="position: fixed"][class*="widget"]:not([class*="ant-"]) { - filter: invert(1) hue-rotate(180deg) !important; - } - /* Ensure Worklenz app elements are not affected by HubSpot styles */ .ant-menu, .ant-menu *, diff --git a/worklenz-frontend/public/locales/alb/account-setup.json b/worklenz-frontend/public/locales/alb/account-setup.json index bf2b98a9..3d2e785b 100644 --- a/worklenz-frontend/public/locales/alb/account-setup.json +++ b/worklenz-frontend/public/locales/alb/account-setup.json @@ -41,6 +41,7 @@ "step3InputLabel": "Fto me email", "addAnother": "Shto një tjetër", "skipForNow": "Kalo për tani", + "skipping": "Duke kaluar...", "formTitle": "Krijo detyrën tënde të parë.", "step3Title": "Fto ekipin tënd për të punuar së bashku", "maxMembers": " (Mund të ftoni deri në 5 anëtarë)", diff --git a/worklenz-frontend/public/locales/de/account-setup.json b/worklenz-frontend/public/locales/de/account-setup.json index 200d5eb8..d496d75c 100644 --- a/worklenz-frontend/public/locales/de/account-setup.json +++ b/worklenz-frontend/public/locales/de/account-setup.json @@ -45,6 +45,7 @@ "step3InputLabel": "Per E-Mail einladen", "addAnother": "Weitere hinzufügen", "skipForNow": "Jetzt überspringen", + "skipping": "Überspringen...", "formTitle": "Erstellen Sie Ihre erste Aufgabe.", "step3Title": "Laden Sie Ihr Team zur Zusammenarbeit ein", "maxMembers": " (Sie können bis zu 5 Mitglieder einladen)", diff --git a/worklenz-frontend/public/locales/en/account-setup.json b/worklenz-frontend/public/locales/en/account-setup.json index 0d03f057..1d960237 100644 --- a/worklenz-frontend/public/locales/en/account-setup.json +++ b/worklenz-frontend/public/locales/en/account-setup.json @@ -44,6 +44,7 @@ "step3InputLabel": "Invite with email", "addAnother": "Add another", "skipForNow": "Skip for now", + "skipping": "Skipping...", "formTitle": "Create your first task.", "step3Title": "Invite your team to work with", "maxMembers": " (You can invite up to 5 members)", diff --git a/worklenz-frontend/public/locales/es/account-setup.json b/worklenz-frontend/public/locales/es/account-setup.json index f1c40f08..98694ba3 100644 --- a/worklenz-frontend/public/locales/es/account-setup.json +++ b/worklenz-frontend/public/locales/es/account-setup.json @@ -45,6 +45,7 @@ "step3InputLabel": "Invitar por correo electrónico", "addAnother": "Agregar otro", "skipForNow": "Omitir por ahora", + "skipping": "Omitiendo...", "formTitle": "Crea tu primera tarea.", "step3Title": "Invita a tu equipo a trabajar", diff --git a/worklenz-frontend/public/locales/pt/account-setup.json b/worklenz-frontend/public/locales/pt/account-setup.json index ca406b97..24e7cbe6 100644 --- a/worklenz-frontend/public/locales/pt/account-setup.json +++ b/worklenz-frontend/public/locales/pt/account-setup.json @@ -45,6 +45,7 @@ "step3InputLabel": "Convidar por email", "addAnother": "Adicionar outro", "skipForNow": "Pular por enquanto", + "skipping": "Pulando...", "formTitle": "Crie sua primeira tarefa.", "step3Title": "Convide sua equipe para trabalhar", diff --git a/worklenz-frontend/public/locales/zh/account-setup.json b/worklenz-frontend/public/locales/zh/account-setup.json index abca6e81..b9a0e46e 100644 --- a/worklenz-frontend/public/locales/zh/account-setup.json +++ b/worklenz-frontend/public/locales/zh/account-setup.json @@ -44,6 +44,7 @@ "step3InputLabel": "通过电子邮件邀请", "addAnother": "添加另一个", "skipForNow": "暂时跳过", + "skipping": "跳过中...", "formTitle": "创建您的第一个任务。", "step3Title": "邀请您的团队一起工作", "maxMembers": "（您最多可以邀请 5 名成员）", diff --git a/worklenz-frontend/src/pages/account-setup/account-setup.tsx b/worklenz-frontend/src/pages/account-setup/account-setup.tsx index 98c5c444..3c189b57 100644 --- a/worklenz-frontend/src/pages/account-setup/account-setup.tsx +++ b/worklenz-frontend/src/pages/account-setup/account-setup.tsx @@ -80,6 +80,7 @@ const AccountSetup: React.FC = () => { const themeMode = useSelector((state: RootState) => state.themeReducer.mode); const [surveyId, setSurveyId] = React.useState(null); + const [isSkipping, setIsSkipping] = React.useState(false); const isDarkMode = themeMode === 'dark'; // Helper to extract organization name from email or fallback to user name @@ -215,8 +216,15 @@ const AccountSetup: React.FC = () => { }; const handleSkipMembers = async () => { - // Bypass all validation and complete setup without team members - await completeAccountSetup(true); + try { + setIsSkipping(true); + // Bypass all validation and complete setup without team members + await completeAccountSetup(true); + } catch (error) { + logger.error('Failed to skip members and complete setup', error); + } finally { + setIsSkipping(false); + } }; const completeAccountSetupWithTemplate = async () => { @@ -598,8 +606,10 @@ const AccountSetup: React.FC = () => { className="p-0 font-medium" style={{ color: token.colorTextTertiary }} onClick={handleSkipMembers} + loading={isSkipping} + disabled={isSkipping} > - {t('skipForNow')} + {isSkipping ? t('skipping') : t('skipForNow')} )}