Display sandbox layout to sandbox users (#830)

web/beacon-app/src/application/routes/privateRoute.tsx

@@ -4,15 +4,28 @@ import { Navigate, Outlet } from 'react-router-dom';
 import OvalLoader from '@/components/ui/OvalLoader';
 import { useFetchProfile } from '@/features/members/hooks/useFetchProfile';
 import { isOnboardedMember } from '@/features/members/utils';
+import { isSandboxAccount } from '@/features/sandbox/util/utils';
+import useAccountType from '@/hooks/useAccountType';
 import { useAuth } from '@/hooks/useAuth';
 const DashLayout = React.lazy(() => import('@/components/layout/DashLayout'));
 const OnboardingLayout = React.lazy(() => import('@/components/layout/OnboardingLayout'));
+const SandboxLayout = React.lazy(() => import('@/components/layout/SandboxLayout'));
 
 const PrivateRoute = () => {
   const { profile: userProfile } = useFetchProfile();
   const { isAuthenticated } = useAuth();
   const isOnboarded = isOnboardedMember(userProfile?.onboarding_status);
-  const Layout = isOnboarded ? DashLayout : OnboardingLayout;
+
+  const accountType = useAccountType();
+  const isSandboxAcct = isSandboxAccount(accountType);
+
+  let Layout = OnboardingLayout;
+
+  if (isOnboarded && isSandboxAcct) {
+    Layout = SandboxLayout;
+  } else if (isOnboarded && !isSandboxAcct) {
+    Layout = DashLayout;
+  }
 
   return isAuthenticated ? (
     <Suspense

web/beacon-app/src/components/layout/AppLayout.tsx

@@ -5,8 +5,10 @@ import { useNavigate } from 'react-router-dom';
 import { PATH_DASHBOARD } from '@/application';
 import { useFetchProfile } from '@/features/members/hooks/useFetchProfile';
 import { isOnboardedMember } from '@/features/members/utils';
+import { isSandboxAccount } from '@/features/sandbox/util/utils';
+import useAccountType from '@/hooks/useAccountType';
 
-// import SandboxBanner from './SanboxBanner/SandboxBanner';
+import SandboxBanner from './SanboxBanner/SandboxBanner';
 import Topbar from './Topbar';
 
 type PageProps = {
@@ -19,6 +21,9 @@ function AppLayout({ children, Breadcrumbs }: PageProps) {
   const { profile: loaderData } = useFetchProfile();
   const isOnboarded = isOnboardedMember(loaderData?.onboarding_status);
 
+  const accountType = useAccountType();
+  const isSandboxAcct = isSandboxAccount(accountType);
+
   // if onboarded redirect to onboarded route
   useEffect(() => {
     if (!isOnboarded) {
@@ -29,9 +34,7 @@ function AppLayout({ children, Breadcrumbs }: PageProps) {
   return (
     <>
       <Topbar Breadcrumbs={Breadcrumbs} isOnboarded={isOnboarded} profileData={loaderData} />
-      {/* TODO: Display SandboxBanner only to user's with the sandbox account type. 
-      <SandboxBanner />
-      */}
+      {isOnboarded && isSandboxAcct && <SandboxBanner />}
       <Container max={696} centered className="my-10 mt-8 px-4 xl:px-28">
         {children}
       </Container>

web/beacon-app/src/components/layout/ProfileAvatar/ProfileAvatar.tsx

@@ -1,4 +1,4 @@
-import { getInitials } from '@/utils/strings';
+import { getInitials } from '@/utils/getInitials';
 
 type ProfileAvatar = {
   name: string;

web/beacon-app/src/components/ui/Avatar/Avatar.tsx

@@ -1,9 +1,9 @@
 import { twMerge } from 'tailwind-merge';
 
-import getInitials from '@/utils/getInitials';
 
 import { StyledAvatar, StyledAvatarFallback, StyledAvatarImage } from './Avatar.styles';
 import { AvatarProps } from './Avatar.type';
+import { getInitials } from '@/utils/getInitials';
 
 const Avatar: React.FC<AvatarProps> = ({ className, fallbackProps, ...imageProps }) => {
   return (

web/beacon-app/src/features/members/hooks/useUpdateProfile.tsx

@@ -16,6 +16,8 @@ export function useUpdateProfile(): ProfileUpdateMutation {
       queryClient.invalidateQueries({ queryKey: [RQK.MEMBER_LIST] });
       queryClient.invalidateQueries({ queryKey: [RQK.MEMBER_DETAIL] });
       queryClient.invalidateQueries({ queryKey: [RQK.PROFILE] });
+      queryClient.invalidateQueries({ queryKey: [RQK.ORG_DETAIL] });
+      queryClient.invalidateQueries({ queryKey: [RQK.ORGANIZATION_LIST] });
       queryClient.setQueriesData([RQK.PROFILE], (oldData: any) => {
         return { ...oldData, ...data };
       });

web/beacon-app/src/features/sandbox/types/accountType.ts

@@ -0,0 +1,3 @@
+export const ACCOUNT_TYPE = {
+  SANDBOX: 'sandbox',
+};

web/beacon-app/src/features/sandbox/util/utils.ts

@@ -0,0 +1,5 @@
+import { ACCOUNT_TYPE } from '../types/accountType';
+
+export const isSandboxAccount = (account: string) => {
+  return account === ACCOUNT_TYPE.SANDBOX;
+};

web/beacon-app/src/hooks/useAccountType.ts

@@ -0,0 +1,10 @@
+import { useOrgStore } from '@/store';
+
+function useAccountType() {
+  const state = useOrgStore((state: any) => state) as any;
+  const accountType = state.account as string;
+
+  return accountType;
+}
+
+export default useAccountType;

web/beacon-app/src/utils/getInitials.ts

@@ -1,13 +1,9 @@
-/**
- * Get initials of a given name (e.g: Calumn Scott -> CS)
- * @param name
- * @returns string
- */
-export default function getInitials(name = '') {
-  return name
-    .match(/(^\S\S?|\b\S)?/g)
-    ?.join('')
-    .match(/(^\S|\S$)?/g)
-    ?.join('')
-    .toUpperCase();
-}
+export const getInitials = (name: string) => {
+  const nameArray = name?.split(' ') || [''];
+  const initials =
+    nameArray.length >= 2
+      ? nameArray[0].charAt(0) + nameArray[1].charAt(0)
+      : nameArray[0].charAt(0) + nameArray[0].charAt(1);
+
+  return initials.toUpperCase();
+};

web/beacon-app/src/utils/strings.ts

@@ -2,14 +2,3 @@
 export const capitalize = (str: string) => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 };
-
-export const getInitials = (name: string) => {
-  const nameArray = name.split(' ');
-  const initials =
-    nameArray.length >= 2
-      ? nameArray[0].charAt(0) + nameArray[1].charAt(0)
-      : nameArray[0].charAt(0) + nameArray[0].charAt(1);
-
-  // console.log('[] initials', initials);
-  return initials.toUpperCase();
-};