feat: HomeCalloutSection implemented

.prettierignore

@@ -1 +0,0 @@
-packages/Firecamp-DB

platform/firecamp-platform/src/components/tabs/home/Home.tsx

@@ -9,6 +9,7 @@ import {
   FcIconSocketIoSquare,
   FcIconWebSocket,
 } from '@firecamp/ui';
+import { CalloutSection } from './HomeCalloutSection';
 import { usePlatformStore } from '../../../store/platform';
 import { useTabStore } from '../../../store/tab';
 import { EThemeColor, EThemeMode } from '../../../types';
@@ -74,7 +75,7 @@ const Home: FC<any> = () => {
           </Column>
 
           <Column>
-            <InviteInfo />
+            <CalloutSection />
           </Column>
         </Row>
       </Container.Body>
@@ -233,37 +234,3 @@ interface IRequestItem {
   /** Open request tab */
   openRequest: () => void;
 }
-
-const InviteInfo = ({ organisation = true, info = {workspace: 'My Workspace', organisation: 'Firecamp'} }) => {
-  return (
-    <div className="flex flex-col border border-appBorder rounded-sm p-4 m-auto">
-      <p className={'text-base font-semibold mb-2 mt-1'}>
-        {organisation
-          ? `You're in the ${info.workspace} workspace of the ${info.organisation} organization.`
-          : `You're right now in your personal workspace`}
-      </p>
-
-      {organisation ? (
-        <p className="text-base text-appForegroundInActive mb-2">
-          You can invite your team/colleagues to this workspace to work
-          collaboratively.
-        </p>
-      ) : (
-        <p className="text-base text-appForegroundInActive mb-2">
-          The personal workspace is not meant to work collaboratively, for now,
-          you can create an organization and invite your team/colleagues to work
-          collaboratively.
-        </p>
-      )}
-
-      <a
-        className="text-base font-semibold inline-block !text-info cursor-pointer mb-2"
-        href=""
-      >
-        {organisation
-          ? 'create an organization'
-          : 'invite your team/colleagues'}
-      </a>
-    </div>
-  );
-};

platform/firecamp-platform/src/components/tabs/home/HomeCalloutSection.tsx

@@ -0,0 +1,79 @@
+import shallow from 'zustand/shallow';
+import platformContext from '../../../services/platform-context';
+import { EPlatformScope, usePlatformStore } from '../../../store/platform';
+import { useWorkspaceStore } from '../../../store/workspace';
+import { useUserStore } from '../../../store/user';
+
+const CalloutSection = () => {
+  const { workspace } = useWorkspaceStore(
+    (s) => ({
+      workspace: s.workspace,
+    }),
+    shallow
+  );
+  const { scope, organization } = usePlatformStore(
+    (s) => ({
+      scope: s.scope,
+      organization: s.organization,
+    }),
+    shallow
+  );
+  const { user, isGuest } = useUserStore(
+    (s) => ({
+      user: s.user,
+      isGuest: s.isGuest,
+    }),
+    shallow
+  );
+
+  if (isGuest) return <></>;
+
+  if (scope == EPlatformScope.Person) {
+    return (
+      <CalloutBox
+        title={"You're right now in your personal workspace"}
+        description={`The personal workspace is not meant to work collaboratively, for now, you can create an organization and invite your team/colleagues to work collaboratively.`}
+        actionText={'create an organization'}
+        action={() => platformContext.platform.createOrganizationPrompt()}
+      />
+    );
+  }
+
+  // TODO: set role based condition here, if role is owner or admin then only show this callout message
+  const workspaceName = workspace.name;
+  const orgName = organization.name;
+  return (
+    <CalloutBox
+      title={`You're in the ${workspaceName} workspace of the ${orgName} organization.`}
+      description={`You can invite your team/colleagues to this workspace to work collaboratively.`}
+      actionText={'invite members'}
+      action={() => platformContext.app.modals.openInviteMembers()}
+    />
+  );
+};
+
+const CalloutBox = ({
+  title = '',
+  description = '',
+  actionText = '',
+  action = () => {},
+}) => {
+  return (
+    <div className="flex flex-col border border-appBorder rounded-sm p-4 m-auto">
+      <p className={'text-base font-semibold mb-2 mt-1'}>{title}</p>
+      <p className="text-base text-appForegroundInActive mb-2">{description}</p>
+      <a
+        href=""
+        className="text-base font-semibold inline-block !text-info cursor-pointer mb-2"
+        onClick={(e) => {
+          e.preventDefault();
+          action();
+        }}
+      >
+        {actionText}
+      </a>
+    </div>
+  );
+};
+
+export { CalloutSection };

platform/firecamp-platform/src/services/app.service.ts

@@ -37,7 +37,8 @@ const switchWorkspace = async (
 
   AppService.initUser(user);
   AppService.initWorkspace(wrs);
-  AppService.initOrg(org as IOrganization);
+  const isPersonal = !wrs.__ref.orgId;
+  AppService.initOrg(isPersonal ? null : (org as IOrganization));
 
   AppService.notify.success(`You have switched to ${wrs.name}`);
   await fetchExplorer(wrs.__ref.id);

platform/firecamp-platform/src/store/platform.ts

@@ -68,8 +68,11 @@ export const usePlatformStore = create<IPlatformStore>((set, get) => ({
   },
 
   setOrg: (org: Partial<IOrganization>) => {
-    if (!org || !org.__ref?.id) return;
-    set({ scope: EPlatformScope.Organization, organization: org });
+    if (!org || !org.__ref?.id) {
+      set({ scope: EPlatformScope.Person, organization: null });
+    } else {
+      set({ scope: EPlatformScope.Organization, organization: org });
+    }
   },
 
   setSwitchingOrg: (org: Partial<IOrganization>) => {