+
diff --git a/src/components/core/org-switcher/org-switcher.tsx b/src/components/core/org-switcher/org-switcher.tsx
new file mode 100644
index 000000000..e2bdcd10c
--- /dev/null
+++ b/src/components/core/org-switcher/org-switcher.tsx
@@ -0,0 +1,232 @@
+import { useState, useMemo } from 'react';
+import { Building2, Check, ChevronDown } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/components/ui-kit/dropdown-menu';
+import { Skeleton } from '@/components/ui-kit/skeleton';
+import { useGetAccount } from '@/modules/profile/hooks/use-account';
+import { switchOrganization } from '@/modules/auth/services/auth.service';
+import { useAuthStore } from '@/state/store/auth';
+import { useToast } from '@/hooks/use-toast';
+import { HttpError } from '@/lib/https';
+import { useGetMultiOrgs } from '@/lib/api/hooks/use-multi-orgs';
+import { Button } from '@/components/ui-kit/button';
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '@/components/ui-kit/tooltip';
+
+const projectKey = import.meta.env.VITE_X_BLOCKS_KEY || '';
+
+export const OrgSwitcher = () => {
+ const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+ const [isSwitching, setIsSwitching] = useState(false);
+ const { t } = useTranslation();
+ const { setTokens, selectedOrgId } = useAuthStore();
+ const { toast } = useToast();
+ const queryClient = useQueryClient();
+
+ const { data, isLoading } = useGetAccount();
+ const { data: orgsData, isLoading: isLoadingOrgs } = useGetMultiOrgs({
+ ProjectKey: projectKey,
+ Page: 0,
+ PageSize: 10,
+ });
+
+ const membershipOrgIds = useMemo(() => {
+ return data?.memberships?.map((m) => m.organizationId) ?? [];
+ }, [data]);
+
+ const organizations = orgsData?.organizations ?? [];
+ const enabledOrganizations = organizations.filter(
+ (org) => org.isEnable && membershipOrgIds.includes(org.itemId)
+ );
+
+ const selectedOrg = selectedOrgId
+ ? enabledOrganizations.find((org) => org.itemId === selectedOrgId)
+ : enabledOrganizations[0];
+
+ const currentOrgRoles = useMemo(() => {
+ if (!data?.memberships?.length || !selectedOrgId) return [];
+ const membership = data.memberships.find((m) => m.organizationId === selectedOrgId);
+ return membership?.roles ?? [];
+ }, [data, selectedOrgId]);
+
+ const translatedRoles = currentOrgRoles
+ .map((role: string) => {
+ const roleKey = role.toUpperCase();
+ return t(roleKey);
+ })
+ .join(', ');
+
+ const handleOrgSelect = async (orgId: string) => {
+ if (isSwitching || orgId === selectedOrgId) {
+ return;
+ }
+
+ try {
+ setIsSwitching(true);
+ setIsDropdownOpen(false);
+
+ const response = await switchOrganization(orgId);
+
+ setTokens({
+ accessToken: response.access_token,
+ refreshToken: (response.refresh_token || useAuthStore.getState().refreshToken) ?? '',
+ });
+
+ await queryClient.invalidateQueries({
+ queryKey: ['getAccount'],
+ });
+
+ setIsSwitching(false);
+
+ toast({
+ title: t('ORGANIZATION_SWITCHED'),
+
+ description: t('SUCCESSFULLY_SWITCHED_ORGANIZATION'),
+ });
+ } catch (error) {
+ setIsSwitching(false);
+
+ let errorTitle = t('FAILED_TO_SWITCH_ORGANIZATION');
+ let errorDescription = t('SOMETHING_WENT_WRONG');
+
+ if (error instanceof HttpError) {
+ const errorData = error.error;
+
+ if (errorData?.error === 'user_inactive_or_not_verified') {
+ errorTitle = t('ACCESS_DENIED');
+ errorDescription =
+ typeof errorData?.error_description === 'string'
+ ? errorData.error_description
+ : t('USER_NOT_EXIST_IN_ORGANIZATION');
+ } else if (typeof errorData?.error_description === 'string') {
+ errorDescription = errorData.error_description;
+ } else if (typeof errorData?.error === 'string') {
+ errorDescription = errorData.error;
+ }
+ }
+
+ toast({
+ variant: 'destructive',
+ title: errorTitle,
+ description: errorDescription,
+ });
+ }
+ };
+
+ const isComponentLoading = isLoading || isLoadingOrgs || isSwitching;
+
+ return (
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/core/phone-input/phone-input.tsx b/src/components/core/phone-input/phone-input.tsx
index e18d4549e..e2a2f9987 100644
--- a/src/components/core/phone-input/phone-input.tsx
+++ b/src/components/core/phone-input/phone-input.tsx
@@ -81,7 +81,7 @@ const UIPhoneInput = forwardRef(
placeholder={placeholder}
defaultCountry={defaultCountry}
className={cn(
- 'flex h-11 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+ 'flex h-11 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
className
)}
countryCallingCodeEditable={countryCallingCodeEditable}
diff --git a/src/components/core/profile-menu/profile-menu.tsx b/src/components/core/profile-menu/profile-menu.tsx
index 3fc24f070..30126e47f 100644
--- a/src/components/core/profile-menu/profile-menu.tsx
+++ b/src/components/core/profile-menu/profile-menu.tsx
@@ -1,6 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
-import { ChevronDown, ChevronUp, Moon, Sun } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import {
DropdownMenu,
@@ -13,7 +12,6 @@ import { useSignoutMutation } from '@/modules/auth/hooks/use-auth';
import { useAuthStore } from '@/state/store/auth';
import DummyProfile from '@/assets/images/dummy_profile.png';
import { Skeleton } from '@/components/ui-kit/skeleton';
-import { useTheme } from '@/styles/theme/theme-provider';
import { useGetAccount } from '@/modules/profile/hooks/use-account';
/**
@@ -23,15 +21,12 @@ import { useGetAccount } from '@/modules/profile/hooks/use-account';
* navigation and account management options.
*
* Features:
- * - Displays user profile image and name
+ * - Displays user profile image
* - Shows loading states with skeleton placeholders
* - Provides navigation to profile page
- * - Includes theme toggling functionality
* - Handles user logout with authentication state management
- * - Responsive design with different spacing for mobile and desktop
*
* Dependencies:
- * - Requires useTheme hook for theme management
* - Requires useAuthStore for authentication state management
* - Requires useSignoutMutation for API logout functionality
* - Requires useGetAccount for fetching user account data
@@ -45,7 +40,8 @@ import { useGetAccount } from '@/modules/profile/hooks/use-account';
export const ProfileMenu = () => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
- const { theme, setTheme } = useTheme();
+ const [isImageLoaded, setIsImageLoaded] = useState(false);
+ const imgRef = useRef(null);
const { t } = useTranslation();
const { logout } = useAuthStore();
@@ -66,13 +62,8 @@ export const ProfileMenu = () => {
};
const fullName = `${data?.firstName ?? ''} ${data?.lastName ?? ''}`.trim() ?? ' ';
-
- const translatedRoles = data?.roles
- ?.map((role) => {
- const roleKey = role.toUpperCase();
- return t(roleKey);
- })
- .join(', ');
+ const profileImageUrl =
+ data?.profileImageUrl !== '' ? (data?.profileImageUrl ?? DummyProfile) : DummyProfile;
useEffect(() => {
if (data) {
@@ -86,39 +77,35 @@ export const ProfileMenu = () => {
}
}, [data, fullName]);
+ useEffect(() => {
+ setIsImageLoaded(false);
+ }, [profileImageUrl]);
+
+ useEffect(() => {
+ const img = imgRef.current;
+ if (img && img.complete && img.naturalHeight !== 0) {
+ setIsImageLoaded(true);
+ }
+ }, [profileImageUrl, isLoading]);
+
+ const showSkeleton = isLoading || !isImageLoaded;
+
return (
+
+ {t('SWITCH_ORGANIZATION')}
+
+ {enabledOrganizations.length > 0 ? (
+ enabledOrganizations.map((org) => {
+ const membership = data?.memberships?.find((m) => m.organizationId === org.itemId);
+ const orgRoles = membership?.roles ?? [];
+ const translatedOrgRoles = orgRoles
+ .map((role: string) => t(role.toUpperCase()))
+ .join(', ');
+
+ const isSelected = org.itemId === selectedOrgId;
+
+ return (
+ handleOrgSelect(org.itemId)}
+ className="flex flex-col items-start gap-1 py-2.5 cursor-pointer"
+ >
+
+ );
+ })
+ ) : (
+
+ {t('NO_ORGANIZATIONS_FOUND')}
+
+ )}
+
+
+ {isSelected ? (
+
+ {translatedOrgRoles && (
+
+ {translatedOrgRoles}
+
+ )}
+
- {
{t('ABOUT')}
{t('PRIVACY_POLICY')}
setTheme(theme === 'dark' ? 'light' : 'dark')}
- >
- {t('THEME')}
-
-
- {t('LOG_OUT')}
diff --git a/src/components/core/theme-switcher/theme-switcher.tsx b/src/components/core/theme-switcher/theme-switcher.tsx
new file mode 100644
index 000000000..f5fa0fe7f
--- /dev/null
+++ b/src/components/core/theme-switcher/theme-switcher.tsx
@@ -0,0 +1,18 @@
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from '@/styles/theme/theme-provider';
+import { Button } from '@/components/ui-kit/button';
+
+export const ThemeSwitcher = () => {
+ const { theme, setTheme } = useTheme();
+
+ return (
+
+ );
+};
diff --git a/src/components/ui-kit/badge.tsx b/src/components/ui-kit/badge.tsx
index fb5a01343..adf60e7c9 100644
--- a/src/components/ui-kit/badge.tsx
+++ b/src/components/ui-kit/badge.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const badgeVariants = cva(
- 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+ 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
{
variants: {
variant: {
diff --git a/src/components/ui-kit/breadcrumb.tsx b/src/components/ui-kit/breadcrumb.tsx
index 053545814..1bad714a8 100644
--- a/src/components/ui-kit/breadcrumb.tsx
+++ b/src/components/ui-kit/breadcrumb.tsx
@@ -40,13 +40,7 @@ const BreadcrumbLink = React.forwardRef<
>(({ asChild, className, ...props }, ref) => {
const Comp = asChild ? Slot : 'a';
- return (
- (
))}
diff --git a/src/components/ui-kit/table.tsx b/src/components/ui-kit/table.tsx
index 519e4d307..babe23f57 100644
--- a/src/components/ui-kit/table.tsx
+++ b/src/components/ui-kit/table.tsx
@@ -47,10 +47,7 @@ const TableRow = React.forwardRef (
(
return (
- {isLoading ? (
- 
- )}
+
+ {showSkeleton && 
setIsImageLoaded(true)}
+ onError={() => setIsImageLoaded(true)}
+ />
-
- {isLoading ? (
-
- {isDropdownOpen ? (
- {fullName}
- )} -{translatedRoles}
-