@campxdev/react-blueprint 0.1.53 → 0.1.55

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.53",
+  "version": "0.1.55",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
-    "@campxdev/campx-web-utils": "^0.1.3",
+    "@campxdev/campx-web-utils": "0.1.5",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.20",

package/src/App.tsx

@@ -10,6 +10,7 @@ function App() {
         actions={[<p>asdjflsf</p>]}
         userFullName="Srikanth Yellapragada"
         collapsed={false}
+        institutionsData={[]}
       />
     </Providers>
   );

package/src/components/Feedback/Tutorial/Tutorial.tsx

@@ -68,7 +68,7 @@ export const Tutorial = ({
           JSON.stringify([...JSON.parse(userTours), tourName])
         );
       }
-      await axios.post("/square/tours/complete", { ...reqData });
+      await axios.post("/square/tours/complete", { reqData });
     } catch (error) {
       console.error("Error completing the tour:", error);
     }

package/src/components/Image/Image.tsx

@@ -0,0 +1,45 @@
+import { Box } from "@mui/material";
+// const brokenImage = require("./broken-image.png");
+
+interface ImageProps {
+  src: string;
+  alt: string;
+  height: string | number;
+  width: string | number;
+  fit?: "cover" | "contain" | "fill";
+  radius?: string | number;
+  defaultImage?: any;
+}
+
+export default function Image({
+  src,
+  alt,
+  height,
+  width,
+  fit = "contain",
+  radius = "10px",
+  defaultImage = null,
+}: ImageProps) {
+  return (
+    <Box
+      sx={{
+        height: height,
+        width: width,
+        "& > img": {
+          borderRadius: radius,
+          width: "100%",
+          height: "100%",
+          objectFit: fit,
+        },
+      }}
+    >
+      <img
+        src={src || defaultImage}
+        alt={alt}
+        onError={(e: any) => {
+          e.target.src = defaultImage ? defaultImage : "";
+        }}
+      />
+    </Box>
+  );
+}

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -14,6 +14,7 @@ export interface AppHeaderProps {
   userFullName: string;
   designation?: string;
   collapsed: boolean;
+  institutionsData?: any[];
   profileSx?: any;
   showActiveDevices?: boolean;
 }
@@ -26,22 +27,27 @@ export const AppHeader = ({
   clientName,
   userFullName,
   collapsed,
+  institutionsData,
   showActiveDevices = true,
 }: AppHeaderProps) => {
   return (
     <StyledHeader collapsed={collapsed} className="appHeader">
       <Typography variant={"subtitle2"}>{clientName}</Typography>
       <Stack alignItems={"center"} gap={"12px"} flexDirection={"row"}>
-        <StyledIconButton
-          onClick={() => {
-            alert("help button clicked");
-          }}
-        >
-          <HelpIcon size={20} />
+        <StyledIconButton>
+          <a
+            href={"https://campx.atlassian.net/servicedesk/customer/portal/2"}
+            target="_blank"
+            rel="noreferrer"
+            style={{ textDecoration: "none" }}
+          >
+            <HelpIcon size={20} />
+          </a>
         </StyledIconButton>
         <UserBox
           fullName={userFullName}
           actions={[]}
+          institutionsData={institutionsData}
           profileSx={profileSx}
           designation={designation}
           showActiveDevices={showActiveDevices}

package/src/components/Layout/AppHeader/AppHeaderActions/SwitchInstitution.tsx

@@ -0,0 +1,100 @@
+import { Box, Stack, TextField, Typography, styled } from "@mui/material";
+import Cookies from "js-cookie";
+import { useState } from "react";
+import { isDevelopment } from "../../../../utils/constants";
+import Image from "../../../Image/Image";
+
+const SwitchInstitution = ({ close, institutions }: any) => {
+  const [searchText, setSearchText] = useState<string>("");
+
+  const filteredInstitutions = institutions?.filter((item: any) =>
+    item.name.toLowerCase().includes(searchText.toLowerCase())
+  );
+
+  return (
+    <Box sx={{ padding: "20px" }}>
+      <Stack>
+        <Typography variant="subtitle3" textAlign={"center"}>
+          Select an Institution
+        </Typography>
+
+        <TextField
+          label="Search Institution"
+          variant="outlined"
+          value={searchText}
+          sx={{
+            display: "flex",
+            alignItems: "center",
+          }}
+          fullWidth
+          onChange={(e) => setSearchText(e.target.value)}
+        />
+      </Stack>
+      <StyledInstitutionContainer>
+        {filteredInstitutions?.map((item: any, index: number) => (
+          <InstitutionCard institution={item} key={index} />
+        ))}
+      </StyledInstitutionContainer>
+    </Box>
+  );
+};
+
+const InstitutionCard = ({ institution }: any) => {
+  const handleClick = () => {
+    if (isDevelopment) {
+      Cookies.set("campx_institution", institution?.code);
+    } else {
+    }
+
+    window.location.replace(`${window.location.origin}/${institution?.code}`);
+  };
+
+  return (
+    <StyledInstitutionCard onClick={handleClick}>
+      <Image
+        alt="logo"
+        height={"100px"}
+        width="100%"
+        src={institution?.imageSquare?.url}
+      />
+      <Typography variant="body2">{institution?.name}</Typography>
+    </StyledInstitutionCard>
+  );
+};
+
+const StyledInstitutionCard = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "20px",
+  padding: "14px",
+  border: "1px solid black",
+  borderRadius: "10px",
+  cursor: "pointer",
+  width: "200px",
+  flexShrink: 0,
+}));
+
+export const StyledInstitutionContainer = styled(Box)(({ theme }) => ({
+  marginTop: "20px",
+  display: "flex",
+  justifyContent: "center",
+  padding: "20px",
+  flexWrap: "wrap",
+  gap: "20px",
+  "&::-webkit-scrollbar": {
+    width: "0.5em",
+    height: "0.5em",
+    backgroundColor: "rgba(0, 0, 0, 0.1)",
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: "3px",
+
+    "&:hover": {
+      background: "rgba(0, 0, 0, 0.3)",
+    },
+  },
+}));
+
+export default SwitchInstitution;

package/src/components/Layout/AppHeader/AppHeaderActions/UserBox.tsx

@@ -1,8 +1,12 @@
-import { Avatar, Stack, Typography, useTheme } from "@mui/material";
+import { Avatar, Box, Stack, Typography, useTheme } from "@mui/material";
 import { ReactNode } from "react";
+import logout from "../../../../utils/logout";
+import DialogButton from "../../../Navigation/DialogButton/DialogButton";
 import { DropdownMenu } from "../../../Navigation/DropDownMenu/DropDownMenu";
 import { DropdownMenuItem } from "../../../Navigation/DropDownMenu/DropdownMenuItem";
+import { StyledMenuItem } from "../../../Navigation/DropDownMenu/styles";
 import { Icons } from "../../../export";
+import SwitchInstitution from "./SwitchInstitution";
 
 const getStartingLetters = (text: string) => {
   if (!text) return "";
@@ -18,12 +22,14 @@ export default function UserBox({
   actions,
   profileUrl,
   profileSx = {},
+  institutionsData,
   avatar = true, // Make avatar optional, default to true
   navigationIcon = true, // Make navigationIcon optional, default to true
   showActiveDevices = true, // Make active devices optional, default to true
 }: {
   fullName: string;
   designation?: string;
+  institutionsData?: any[];
   actions: {
     label: ReactNode;
     icon?: ReactNode;
@@ -39,75 +45,102 @@ export default function UserBox({
   const theme = useTheme();
 
   return (
-    <DropdownMenu
-      anchor={({ open }) => (
-        <Avatar src={profileUrl ?? ""} onClick={open} sx={profileSx}>
-          {getStartingLetters(fullName)}
-        </Avatar>
-      )}
-      menuListProps={{
-        sx: {
-          width: "300px",
-          borderRadius: "5px",
-        },
-      }}
-      menu={[
-        <DropdownMenuItem
-          label={
-            <Stack gap={0.5} sx={{ width: "100%" }}>
-              <Typography variant="subtitle3">Account</Typography>
-              <Stack
-                direction={"row"}
-                alignItems={"center"}
-                justifyContent={"space-between"}
-              >
-                {avatar && (
-                  <Stack direction={"row"} gap={1}>
-                    <Avatar src={profileUrl ?? ""} sx={profileSx}>
-                      {getStartingLetters(fullName)}
-                    </Avatar>
-                    <Stack direction={"row"} justifyContent={"space-between"}>
-                      <Stack>
-                        <Typography variant="subtitle3">{fullName}</Typography>
-                        <Typography variant="caption">{designation}</Typography>
+    <>
+      <DropdownMenu
+        anchor={({ open }) => (
+          <Avatar src={profileUrl ?? ""} onClick={open} sx={profileSx}>
+            {getStartingLetters(fullName)}
+          </Avatar>
+        )}
+        menuListProps={{
+          sx: {
+            width: "300px",
+            borderRadius: "5px",
+          },
+        }}
+        menu={[
+          <DropdownMenuItem
+            label={
+              <Stack gap={0.5} sx={{ width: "100%" }}>
+                <Typography variant="subtitle3">Account</Typography>
+                <Stack
+                  direction={"row"}
+                  alignItems={"center"}
+                  justifyContent={"space-between"}
+                >
+                  {avatar && (
+                    <Stack direction={"row"} gap={1}>
+                      <Avatar src={profileUrl ?? ""} sx={profileSx}>
+                        {getStartingLetters(fullName)}
+                      </Avatar>
+                      <Stack direction={"row"} justifyContent={"space-between"}>
+                        <Stack>
+                          <Typography variant="subtitle3">
+                            {fullName}
+                          </Typography>
+                          <Typography variant="caption">
+                            {designation}
+                          </Typography>
+                        </Stack>
                       </Stack>
                     </Stack>
-                  </Stack>
-                )}
-                {navigationIcon && <Icons.NavigationIcon />}
+                  )}
+                  {navigationIcon && <Icons.NavigationIcon />}
+                </Stack>
               </Stack>
-            </Stack>
-          }
-          onClick={() => alert("Action 1 clicked")}
-        />,
-        showActiveDevices && (
+            }
+            onClick={() => console.log("Action 1 clicked")}
+          />,
+          showActiveDevices && (
+            <DropdownMenuItem
+              label={
+                <Stack gap={0.5}>
+                  <Typography variant="subtitle3">Active Devices</Typography>
+                </Stack>
+              }
+              onClick={() => alert("Action 1 clicked")}
+            />
+          ),
+          <Box>
+            <DialogButton
+              anchor={({ open }) => (
+                <StyledMenuItem
+                  onClick={() => {
+                    open();
+                  }}
+                >
+                  Change Institution
+                </StyledMenuItem>
+              )}
+              content={({ close }) => (
+                <SwitchInstitution
+                  close={close}
+                  institutions={institutionsData}
+                />
+              )}
+              title=""
+            />
+          </Box>,
+
           <DropdownMenuItem
             label={
-              <Stack gap={0.5}>
-                <Typography variant="subtitle3">Active Devices</Typography>
+              <Stack
+                gap={0.5}
+                direction={"row"}
+                justifyContent={"space-between"}
+                width={"100%"}
+              >
+                <Typography variant="subtitle3">Logout</Typography>
+                <Icons.LogoutIcon
+                  hoverColor={theme.palette.tertiary.main}
+                  size={20}
+                />
               </Stack>
             }
-            onClick={() => alert("Action 1 clicked")}
-          />
-        ),
-        <DropdownMenuItem
-          label={
-            <Stack
-              gap={0.5}
-              direction={"row"}
-              justifyContent={"space-between"}
-              width={"100%"}
-            >
-              <Typography variant="subtitle3">Logout</Typography>
-              <Icons.LogoutIcon
-                hoverColor={theme.palette.tertiary.main}
-                size={20}
-              />
-            </Stack>
-          }
-          onClick={() => alert("Action 1 clicked")}
-        />,
-      ]}
-    />
+            onClick={logout}
+          />,
+        ]}
+      />
+    </>
   );
 }

package/src/utils/constants.ts

@@ -1,9 +1,6 @@
 import Cookies from "js-cookie";
 
-export const isDevelopment: boolean =
-  process.env.NODE_ENV === "development" ||
-  window.location.origin.split("campx")[1] === ".dev";
-
+export const isDevelopment: boolean = process.env.NODE_ENV === "development";
 export const urlTenantKey = window.location.pathname.split("/")[1];
 export const institutionKey = window.location.pathname.split("/")[2];
 export const sessionKey = Cookies.get("campx_session_key");

package/src/utils/logout.ts

@@ -0,0 +1,22 @@
+// import axios, {
+//   axiosErrorToast,
+// } from "@campxdev/campx-web-utils/src/config/axios";
+import { axios } from "@campxdev/campx-web-utils";
+import Cookies from "js-cookie";
+
+export default function logout() {
+  axios({
+    method: "POST",
+    baseURL: process.env.REACT_APP_API_HOST,
+    url: "/auth-server/auth/logout",
+  })
+    .then((res) => {
+      Cookies.remove("campx_tenant");
+      Cookies.remove("campx_session_key");
+      Cookies.remove("campx_institution");
+      window.location.href = "/";
+    })
+    .catch((err) => {
+      // toast("Unable To Logout.");
+    });
+}