Implement Logout on store front app

app/javascript/StorefrontApp/components/Wrapper.tsx

@@ -1,17 +1,20 @@
 import { HTMLAttributes, ReactNode } from "react";
 import { Box } from "@mui/system";
+import LogoutButton from "features/company/LogoutButton";
 
 type HTMLDIVElementTypes = HTMLAttributes<HTMLDivElement>;
 
 type WrapperTypes = {
   children: ReactNode | string | null;
   fullVH?: boolean;
   bgColor?: "primary.main" | "primary.white";
+  showLogout?: boolean
 } & HTMLDIVElementTypes;
 
 const Wrapper = ({
   children,
   fullVH = false,
+  showLogout = false,
   bgColor = "primary.main",
   ...props
 }: WrapperTypes) => {
@@ -23,12 +26,14 @@ const Wrapper = ({
         height: fullVH ? "100vh" : "100%",
         overflowX: "hidden",
         backgroundColor: bgColor,
+        position: "relative",
       }}
       {...props}
     >
       {children}
+      {showLogout ? <LogoutButton /> : <></>}
     </Box>
   );
 };
 
-export default Wrapper;
+export default Wrapper

app/javascript/StorefrontApp/features/company/LogoutButton.tsx

@@ -0,0 +1,23 @@
+import { useCompany } from './companySlice';
+import OffIcon from '@mui/icons-material/PowerSettingsNewRounded'
+import { IconButton } from '@mui/material';
+
+const LogoutButton = () => {
+  const { onLogout } = useCompany();
+
+  return (
+    <IconButton
+      style={{
+        position: 'absolute',
+        left: '1rem',
+        bottom: '1rem',
+      }}
+      aria-label="Log Out"
+      size='small'
+      onClick={() => onLogout()}
+    >
+      <OffIcon fontSize='inherit' />
+    </IconButton>
+  );
+};
+export default LogoutButton;

app/javascript/StorefrontApp/features/customer/Onboarding.tsx

@@ -48,7 +48,7 @@ export default function Onboarding() {
   });
 
   return (
-    <Wrapper fullVH>
+    <Wrapper fullVH showLogout>
       <Grid
         container
         direction="row"