[_]: feat/add support section

.env.example

@@ -3,4 +3,5 @@ VITE_DRIVE_API_URL=
 VITE_MAGIC_IV=
 VITE_MAGIC_SALT=
 VITE_CRYPTO_SECRET=
-VITE_DRIVE_APP_URL=
+VITE_DRIVE_APP_URL=
+VITE_INTERCOM_PROVIDER_KEY=

package.json

@@ -47,6 +47,7 @@
     "react-hot-toast": "^2.6.0",
     "react-hotkeys-hook": "^5.2.4",
     "react-i18next": "^16.5.4",
+    "react-live-chat-loader": "^2.11.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.13.1",
     "tailwindcss": "^4.2.1",

src/components/preferences/sections/general/components/support/index.tsx

@@ -0,0 +1,25 @@
+import { useChat } from 'react-live-chat-loader';
+
+import { Button } from '@internxt/ui';
+import PreferenceSectionLayout from '../PreferenceSectionLayout';
+import { useTranslationContext } from '@/i18n';
+
+const Support = () => {
+  const { translate } = useTranslationContext();
+  const [, loadChat] = useChat();
+
+  const onClick = () => {
+    loadChat({ open: true });
+  };
+
+  return (
+    <PreferenceSectionLayout title={translate('modals.preferences.sections.general.support.title')}>
+      <p className="text-gray-80">{translate('modals.preferences.sections.general.support.description')}</p>
+      <Button className="mt-5" variant="secondary" onClick={onClick}>
+        {translate('modals.preferences.sections.general.support.cta')}
+      </Button>
+    </PreferenceSectionLayout>
+  );
+};
+
+export default Support;

src/components/preferences/sections/general/index.tsx

@@ -2,6 +2,7 @@ import { useTranslationContext } from '@/i18n';
 import PreferencesSection from '../../components/PreferencesSection';
 import Appearance from './components/appearance';
 import Language from './components/language';
+import Support from './components/support';
 
 const GeneralSection = ({ onClose }: { onClose: () => void }) => {
   const { translate } = useTranslationContext();
@@ -11,9 +12,9 @@ const GeneralSection = ({ onClose }: { onClose: () => void }) => {
       title={translate('modals.preferences.sections.general.title')}
       onClose={onClose}
     >
-      {/* TODO: Add language and support components */}
       <Appearance />
       <Language />
+      <Support />
     </PreferencesSection>
   );
 };

src/i18n/locales/en.json

@@ -142,7 +142,11 @@
             "fr": "Français (French)",
             "it": "Italiano (Italian)"
           },
-          "support": "Support"
+          "support": {
+            "title": "Support",
+            "description": "Navigate helpful articles or get assistance from our team.",
+            "cta": "Open Support Centre"
+          }
         }
       }
     }

src/i18n/locales/es.json

@@ -132,7 +132,11 @@
             "fr": "Français (Francés)",
             "it": "Italiano (Italiano)"
           },
-          "support": "Soporte"
+          "support": {
+            "title": "Soporte",
+            "description": "Consulta artículos de ayuda u obtén asistencia de nuestro equipo.",
+            "cta": "Abrir Centro de Soporte"
+          }
         }
       }
     }

src/i18n/locales/fr.json

@@ -132,7 +132,11 @@
             "fr": "Français (French)",
             "it": "Italiano (Italien)"
           },
-          "support": "Support"
+          "support": {
+            "title": "Support",
+            "description": "Consultez des articles d'aide ou obtenez l'assistance de notre équipe.",
+            "cta": "Ouvrir le Centre d'assistance"
+          }
         }
       }
     }

src/i18n/locales/it.json

@@ -132,7 +132,11 @@
             "fr": "Français (Francese)",
             "it": "Italiano (Italian)"
           },
-          "support": "Supporto"
+          "support": {
+            "title": "Supporto",
+            "description": "Consulta articoli di aiuto o ricevi assistenza dal nostro team.",
+            "cta": "Apri il Centro assistenza"
+          }
         }
       }
     }

src/main.tsx

@@ -8,19 +8,26 @@ import { userActions } from './store/slices/user/index.ts';
 import { Provider } from 'react-redux';
 import { DialogManagerProvider } from './context/dialog-manager/DialogManager.context.tsx';
 import { ThemeProvider } from './context/theme/ThemeProvider.tsx';
+import { LiveChatLoaderProvider } from 'react-live-chat-loader';
+import { ConfigService } from './services/config/index.ts';
 
 store.dispatch(userActions.initialize());
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-        <ThemeProvider>
-    <TranslationProvider>
-      <DialogManagerProvider>
-        <Provider store={store}>
-          <App />
-        </Provider>
-      </DialogManagerProvider>
-    </TranslationProvider>
-              </ThemeProvider>
+    <LiveChatLoaderProvider
+      provider="intercom"
+      providerKey={ConfigService.instance.getVariable('INTERCOM_PROVIDER_KEY')}
+    >
+      <ThemeProvider>
+        <TranslationProvider>
+           <DialogManagerProvider>
+          <Provider store={store}>
+            <App />
+          </Provider>
+              </DialogManagerProvider>
+        </TranslationProvider>
+      </ThemeProvider>
+    </LiveChatLoaderProvider>
   </StrictMode>,
 );

src/services/config/index.ts

@@ -20,6 +20,7 @@ const configKeys: Record<keyof ConfigKeys, string> = {
   MAGIC_IV: 'VITE_MAGIC_IV',
   MAGIC_SALT: 'VITE_MAGIC_SALT',
   DRIVE_APP_URL: 'VITE_DRIVE_APP_URL',
+  INTERCOM_PROVIDER_KEY: 'VITE_INTERCOM_PROVIDER_KEY',
 };
 
 export class ConfigService {

src/types/config/index.ts

@@ -36,4 +36,5 @@ export interface ConfigKeys {
   MAGIC_IV: string;
   MAGIC_SALT: string;
   DRIVE_APP_URL: string;
+  INTERCOM_PROVIDER_KEY: string;
 }