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

@@ -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,
+      #hubspot-conversations-iframe-container {
-      .shadow-2xl.widget-align-right.widget-align-bottom,
+        background: #141414 !important;
-      [data-test-id="chat-widget"],
-      [class*="VizExCollapsedChat"],
-      [class*="VizExExpandedChat"],
-      iframe[src*="hubspot"] {
-        filter: invert(1) hue-rotate(180deg) !important;
-        background: transparent !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 *,

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ë)",

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)",

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)",

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",
 

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",
 

worklenz-frontend/public/locales/zh/account-setup.json

@@ -44,6 +44,7 @@
   "step3InputLabel": "通过电子邮件邀请",
   "addAnother": "添加另一个",
   "skipForNow": "暂时跳过",
+  "skipping": "跳过中...",
   "formTitle": "创建您的第一个任务。",
   "step3Title": "邀请您的团队一起工作",
   "maxMembers": "（您最多可以邀请 5 名成员）",

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<string | null>(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
+    try {
-    await completeAccountSetup(true);
+      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')}
                     </Button>
                   )}
                 </div>