@vtex/faststore-plugin-buyer-portal 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "dependencies": {
@@ -9,13 +9,14 @@
   },
   "devDependencies": {
     "@faststore/core": "^3.0.147",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@faststore/ui": "^3.0.147",
+    "@types/react": "^18.2.42",
     "next": "13.5.6",
     "typescript": "4.7.3"
   },
   "peerDependencies": {
     "@faststore/core": "^3.0.147",
+    "@faststore/ui": "^3.0.147",
     "next": "13.5.6"
   },
   "license": "MIT"

package/src/components/CustomerSwitch/CustomerSwitchDrawer.tsx

@@ -4,7 +4,7 @@ import { CustomerSwitchSearch } from "./CustomerSwitchSearch";
 import { CustomerSwitchOptionsList } from "./CustomerSwitchOptionsList";
 import { useMemo, useState } from "react";
 import { CustomerSwitchOptionData } from "./CustomerSwitchOption";
-import { CustomerSwitchLoad } from "./CustomerSwitchLoad";
+import * as Icons from "../Icons";
 
 type CustomerSwitchDrawerProps = {
   isOpen: boolean;
@@ -42,10 +42,8 @@ const options = [
   "Lighthouse Consulting Group",
   "Stellar Synergy",
   "FinanceCore Solutions",
-  "Nova Finance Advisors"
-].map(
-  (name, index) => ({ name, id: `id-${index}` })
-);
+  "Nova Finance Advisors",
+].map((name, index) => ({ name, id: `id-${index}` }));
 
 export const CustomerSwitchDrawer = ({
   isOpen,
@@ -54,24 +52,24 @@ export const CustomerSwitchDrawer = ({
   const { fade, fadeOut } = useFadeEffect();
 
   const [option, setOption] = useState<CustomerSwitchOptionData>(options[0]);
-  const [loading, setLoading] = useState(false)
-  const [searchTerm, setSearchTerm] = useState("")
+  const [loading, setLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
 
   const filteredOptions = useMemo(() => {
     if (!searchTerm) {
       return options;
     }
-    return options.filter(currentOption =>
+    return options.filter((currentOption) =>
       currentOption.name?.toLowerCase().includes(searchTerm.toLowerCase())
     );
   }, [options, searchTerm]);
 
   const handleSubmitCustomer = () => {
     console.log(option);
-    setLoading(true)
+    setLoading(true);
     setTimeout(() => {
-      setLoading(false)
-      onCloseDrawer?.()
+      setLoading(false);
+      onCloseDrawer?.();
     }, 3000);
   };
 
@@ -107,11 +105,7 @@ export const CustomerSwitchDrawer = ({
           onClick={handleSubmitCustomer}
           disabled={option.id === options[0].id || loading}
         >
-          {
-            loading ?
-            <CustomerSwitchLoad /> :
-            "Confirm"
-          }
+          {loading ? <Icons.Load width={16} height={16} /> : "Confirm"}
         </Button>
       </footer>
     </SlideOver>

package/src/components/Icons/Link.tsx

@@ -0,0 +1,17 @@
+import { IconProps } from ".";
+
+export const Link = ({ ...props }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 10 10"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.75 1C1.75 0.585786 2.08579 0.25 2.5 0.25H9C9.41421 0.25 9.75 0.585786 9.75 1V7.5C9.75 7.91421 9.41421 8.25 9 8.25C8.58579 8.25 8.25 7.91421 8.25 7.5V2.81066L1.53033 9.53033C1.23744 9.82322 0.762563 9.82322 0.46967 9.53033C0.176777 9.23744 0.176777 8.76256 0.46967 8.46967L7.18934 1.75H2.5C2.08579 1.75 1.75 1.41421 1.75 1Z"
+      fill="#3D3D3D"
+    />
+  </svg>
+);

package/src/components/{CustomerSwitch/CustomerSwitchLoad.tsx → Icons/Load.tsx}

@@ -1,10 +1,7 @@
-export const CustomerSwitchLoad = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16px"
-    height="16px"
-    viewBox="0 0 24 24"
-  >
+import { IconProps } from ".";
+
+export const Load = ({ ...props }: IconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
     <g stroke="currentColor">
       <circle
         cx="12"

package/src/components/Icons/Profile.tsx

@@ -0,0 +1,15 @@
+import { IconProps } from ".";
+
+export const Profile = ({ ...props }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M7.00065 7.00114C6.08398 7.00114 5.29926 6.67475 4.64648 6.02197C3.99371 5.3692 3.66732 4.58447 3.66732 3.66781C3.66732 2.75114 3.99371 1.96642 4.64648 1.31364C5.29926 0.660862 6.08398 0.334473 7.00065 0.334473C7.91732 0.334473 8.70204 0.660862 9.35482 1.31364C10.0076 1.96642 10.334 2.75114 10.334 3.66781C10.334 4.58447 10.0076 5.3692 9.35482 6.02197C8.70204 6.67475 7.91732 7.00114 7.00065 7.00114ZM0.333984 13.6678V11.3345C0.333984 10.8623 0.455512 10.4282 0.698568 10.0324C0.941623 9.63656 1.26454 9.33447 1.66732 9.12614C2.52843 8.69559 3.40343 8.37267 4.29232 8.15739C5.18121 7.94211 6.08398 7.83447 7.00065 7.83447C7.91732 7.83447 8.8201 7.94211 9.70899 8.15739C10.5979 8.37267 11.4729 8.69559 12.334 9.12614C12.7368 9.33447 13.0597 9.63656 13.3027 10.0324C13.5458 10.4282 13.6673 10.8623 13.6673 11.3345V13.6678H0.333984Z"
+      fill="#0366DD"
+    />
+  </svg>
+);

package/src/components/Icons/index.ts

@@ -0,0 +1,8 @@
+export type IconProps = {
+  width: number;
+  height: number;
+};
+
+export { Profile } from "./Profile";
+export { Link } from "./Link";
+export { Load } from "./Load";

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,18 @@
+import { Image_unstable as Image } from "@faststore/core/experimental";
+
+const logoSrc =
+  "https://b2bfaststoredev.vtexassets.com/unsafe/1440x0/center/middle/https%3A%2F%2Fstoreframework.vtexassets.com%2Fassets%2Fvtex.file-manager-graphql%2Fimages%2Fab9997f4-8fd6-46f5-99d2-9d5af3ef5e34___6d75a203771d7408d8f0d1c660a076dd.png";
+
+export const Logo = () => (
+  <div data-fs-logo>
+    <Image
+      alt="Logo"
+      src={logoSrc}
+      width={0}
+      height={0}
+      sizes="15vw"
+      loading="lazy"
+      style={{ width: "100%", height: "auto" }}
+    />
+  </div>
+);

package/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,37 @@
+import * as Icons from "../Icons";
+import { Logo } from "../Logo/Logo";
+import Link from "next/link";
+
+import { Dropdown, DropdownMenu, DropdownButton } from "@faststore/ui";
+import { ProfileSummary } from "../ProfileSummary/ProfileSummary";
+import { doLogout } from "../../utils/logout";
+import { profileData } from "../../mock/profile-data";
+
+export const Navbar = () => {
+  return (
+    <header data-fs-buyer-portal-navbar>
+      <Logo />
+      <div data-fs-header-actions>
+        <Link href="/" data-fs-start-shopping-link>
+          <span>Start Shopping</span>
+          <Icons.Link width={10} height={10} />
+        </Link>
+        <Dropdown>
+          <DropdownButton asChild>
+            <button data-fs-profile-dropdown-trigger>
+              <Icons.Profile width={14} height={14} />
+            </button>
+          </DropdownButton>
+
+          <DropdownMenu align="right" data-fs-profile-dropdown-menu>
+            <ProfileSummary
+              data-fs-profile-dropdown-menu-profile-summary
+              onLogoutClick={doLogout}
+              {...profileData}
+            />
+          </DropdownMenu>
+        </Dropdown>
+      </div>
+    </header>
+  );
+};

package/src/components/Navbar/navbar.scss

@@ -0,0 +1,50 @@
+[data-fs-buyer-portal-navbar] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--fs-spacing-3) calc(var(--fs-spacing-8) + var(--fs-spacing-0));
+  background-color: #f5f5f5;
+
+  [data-fs-header-actions] {
+    display: flex;
+    align-items: center;
+  }
+
+  [data-fs-start-shopping-link] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    color: #3d3d3d;
+    font-weight: var(--fs-text-weight-semibold);
+    font-family: "Inter", sans-serif;
+    line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+    font-size: var(--fs-text-size-2);
+    text-decoration: none;
+    margin-right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+
+    span {
+      margin-right: var(--fs-spacing-0);
+    }
+  }
+
+  [data-fs-profile-dropdown-trigger] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--fs-border-radius-circle);
+    background-color: #cbe9ff;
+    width: var(--fs-spacing-5);
+    height: var(--fs-spacing-5);
+  }
+}
+
+[data-fs-profile-dropdown-menu] {
+  --fs-profile-dropdown-menu-width: 360px;
+
+  background-color: white;
+
+  [data-fs-profile-dropdown-menu-profile-summary] {
+    min-width: var(--fs-profile-dropdown-menu-width);
+  }
+}

package/src/components/ProfileSummary/ProfileSummary.tsx

@@ -0,0 +1,49 @@
+import { ReactNode } from "react";
+import { Button } from "@faststore/ui";
+import * as Icons from "../Icons";
+
+export type ProfileSummaryProps = {
+  onLogoutClick?: (storeConfig: any) => void;
+  orgName: string;
+  bordered?: boolean;
+  person: {
+    image?: ReactNode;
+    name: string;
+    role?: string;
+  };
+};
+
+export const ProfileSummary = ({
+  onLogoutClick,
+  person: { image, name, role },
+  orgName,
+  bordered = false,
+  ...otherProps
+}: ProfileSummaryProps) => {
+  return (
+    <section
+      data-fs-self-profile-summary
+      data-fs-self-profile-summary-bordered={bordered}
+      {...otherProps}
+    >
+      <h2 data-fs-self-profile-summary-org-name>{orgName}</h2>
+      <div data-fs-self-profile-summary-person-actions>
+        <div data-fs-self-profile-summary-person-image>
+          {image ?? <Icons.Profile width={14} height={14} />}
+        </div>
+        <div data-fs-self-profile-summary-person-data>
+          <h2>{name}</h2>
+          {role && <h3>{role}</h3>}
+        </div>
+        <Button
+          data-fs-self-profile-summary-logout-button
+          onClick={onLogoutClick}
+          variant="secondary"
+          size="small"
+        >
+          Logout
+        </Button>
+      </div>
+    </section>
+  );
+};

package/src/components/ProfileSummary/profile-summary.scss

@@ -0,0 +1,73 @@
+[data-fs-self-profile-summary] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &[data-fs-self-profile-summary-bordered="true"] {
+    border: var(--fs-border-width) solid #e0e0e0;
+    border-radius: var(--fs-border-radius);
+  }
+}
+
+[data-fs-self-profile-summary-org-name] {
+  font-size: var(--fs-text-size-legend);
+  color: #000000;
+  font-weight: var(--fs-text-weight-semibold);
+  padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+  border-bottom: var(--fs-border-width) solid #e0e0e0;
+}
+
+[data-fs-self-profile-summary-person-actions] {
+  display: flex;
+  justify-content: space-between;
+  padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+
+  [data-fs-self-profile-summary-person-image] {
+    width: var(--fs-spacing-6);
+    height: var(--fs-spacing-6);
+    border-radius: var(--fs-border-radius-pill);
+    background-color: #cbe9ff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    color: var(--fs-border-color-active);
+    margin-right: var(--fs-spacing-3);
+  }
+
+  [data-fs-self-profile-summary-person-data] {
+    flex: 1;
+    font-size: var(--fs-text-size-legend);
+
+    h2 {
+      color: var(--fs-color-text);
+      font-weight: var(--fs-text-weight-regular);
+    }
+
+    h3 {
+      color: var(--fs-color-text-light);
+      font-weight: var(--fs-text-weight-light);
+    }
+  }
+
+  [data-fs-self-profile-summary-logout-button] {
+    cursor: pointer;
+    color: #d31a15;
+    font-weight: var(--fs-text-weight-semibold);
+
+    [data-fs-button-wrapper] {
+      border-radius: var(--fs-border-radius-pill);
+      color: var(--fs-color-danger-text);
+      border: var(--fs-border-width) solid var(--fs-border-color-light);
+      padding: var(--fs-spacing-1) var(--fs-spacing-4);
+    }
+
+    [data-fs-button-wrapper]:hover {
+      color: var(--fs-color-danger-text);
+    }
+
+    [data-fs-icon] {
+      color: var(--fs-color-danger-text);
+    }
+  }
+}

package/src/components/SelfManagementDrawer/SelfManagementDrawer.tsx

@@ -1,11 +1,12 @@
 import { SlideOver, useFadeEffect } from "@faststore/ui";
 
 import { SelfManagementDrawerHeader } from "./SelfManagementDrawerHeader";
-import { SelfManagementDrawerFooter } from "./SelfManagementDrawerFooter";
 import { SelfManagementDrawerBody } from "./SelfManagementDrawerBody";
 import { doLogout } from "../../utils/logout";
 import { useState } from "react";
 import { CustomerSwitchDrawer } from "../CustomerSwitch/CustomerSwitchDrawer";
+import { ProfileSummary } from "../ProfileSummary/ProfileSummary";
+import { profileData } from "../../mock/profile-data";
 
 type SelfManagementDrawerProps = {
   isOpen: boolean;
@@ -37,13 +38,13 @@ export const SelfManagementDrawer = ({
           orgUrl="/self-management"
         />
         <SelfManagementDrawerBody />
-        <SelfManagementDrawerFooter
-          person={{
-            name: "Donald Green",
-            role: "Admin",
-          }}
-          onLogoutClick={doLogout}
-        />
+        <footer data-fs-self-management-drawer-footer-wrapper>
+          <ProfileSummary
+            bordered={true}
+            onLogoutClick={doLogout}
+            {...profileData}
+          />
+        </footer>
       </SlideOver>
       {openCustomerDrawer && (
         <CustomerSwitchDrawer

package/src/components/SelfManagementDrawer/SelfManagementDrawerHeader.tsx

@@ -1,7 +1,6 @@
 import { ReactNode } from "react";
-import {
-  Button, IconButton, SlideOverHeader, Link, Icon
-} from "@faststore/ui";
+import { Button, IconButton, SlideOverHeader, Link, Icon } from "@faststore/ui";
+import * as Icons from "../Icons";
 
 export type SelfManagementDrawerHeaderProps = {
   onCloseDrawer?: () => void;
@@ -22,38 +21,14 @@ export const SelfManagementDrawerHeader = ({
 }: SelfManagementDrawerHeaderProps) => {
   return (
     <>
-      <SlideOverHeader onClose={() => onCloseDrawer?.()} children={null}/>
+      <SlideOverHeader onClose={() => onCloseDrawer?.()} children={null} />
       <div data-fs-self-management-drawer-header>
         <Link data-fs-self-management-drawer-header-org-link href={orgUrl}>
           <div data-fs-self-management-drawer-header-org-image>
-            {orgImage ?? <Icon name="Bell" width={24} height={24} />}
+            {orgImage ?? <Icons.Profile width={24} height={24} />}
           </div>
-          <h1 data-fs-self-management-drawer-header-org-name>
-            {orgName}
-          </h1>
+          <h1 data-fs-self-management-drawer-header-org-name>{orgName}</h1>
         </Link>
-
-        <div data-fs-self-management-drawer-header-buttons-wrapper>
-          <Button
-            data-fs-self-management-drawer-header-switch-button
-            icon={<Icon name="Bell" />}
-            iconPosition="left"
-            onClick={() => onSwitchButtonClick?.()}
-            variant="secondary"
-            size="small"
-          >
-            Switch
-          </Button>
-
-          <IconButton
-            data-fs-self-management-drawer-header-config-button
-            icon={<Icon name="FadersHorizontal" />}
-            aria-label="Buy"
-            onClick={() => onConfigButtonClick?.()}
-            variant="secondary"
-            size="small"
-          />
-        </div>
       </div>
     </>
   );

package/src/components/SelfManagementDrawer/index.ts

@@ -1,4 +1,3 @@
 export { SelfManagementDrawer } from "./SelfManagementDrawer";
 export { SelfManagementDrawerHeader } from "./SelfManagementDrawerHeader";
 export { SelfManagementDrawerBody } from "./SelfManagementDrawerBody";
-export { SelfManagementDrawerFooter } from "./SelfManagementDrawerFooter";

package/src/components/SelfManagementDrawer/self-management-drawer.scss

@@ -0,0 +1,86 @@
+[data-fs-self-management-drawer] {
+  display: flex;
+  flex-direction: column;
+}
+
+// Header
+[data-fs-slide-over] [data-fs-slide-over-header] {
+  --fs-slide-over-header-height: 100px;
+
+  align-items: baseline;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  background-color: #0366dd;
+  height: var(--fs-slide-over-header-height);
+
+  button {
+    color: white;
+  }
+}
+
+[data-fs-self-management-drawer-header] {
+  padding: 0 var(--fs-spacing-8);
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+[data-fs-self-management-drawer-header-org-link] {
+  text-decoration: none;
+}
+
+[data-fs-self-management-drawer-header-org-name] {
+  font-weight: var(--fs-text-weight-bold);
+  font-size: var(--fs-text-size-3);
+  color: var(--fs-color-text);
+  text-transform: capitalize;
+  text-decoration: none;
+  padding: var(--fs-spacing-1) 0;
+}
+
+[data-fs-self-management-drawer-header-org-name]:hover {
+  text-decoration: underline;
+}
+
+[data-fs-self-management-drawer-header-org-image] {
+  width: var(--fs-spacing-8);
+  height: var(--fs-spacing-8);
+  border-radius: var(--fs-border-radius-pill);
+  background-color: #cbe9ff;
+  border: var(--fs-border-width-thick) solid white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--fs-spacing-1);
+  overflow: hidden;
+  color: var(--fs-border-color-active);
+
+  transform: translateY(-50%);
+}
+
+// Body
+[data-fs-self-management-drawer-body] {
+  flex: 1;
+
+  [data-fs-self-mamnagement-drawer-body-contents] {
+    padding: var(--fs-spacing-5) var(--fs-spacing-8) var(--fs-spacing-5);
+    display: grid;
+    row-gap: var(--fs-spacing-4);
+    width: 100%;
+
+    [data-fs-self-management-drawer-body-link] {
+      color: var(--fs-color-neutral-7);
+      text-decoration: none;
+    }
+
+    [data-fs-self-management-drawer-body-link]:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+// Footer
+[data-fs-self-management-drawer-footer-wrapper] {
+  padding: var(--fs-spacing-4) var(--fs-spacing-8);
+}

package/src/components/SelfManagementSignInButton/SelfManagementSignInButton.tsx

@@ -12,7 +12,8 @@ export const SelfManagementSignInButton = ({
   const { ...session } = useSession();
 
   const openDrawer = (event: any) => {
-    if (session.person) {
+    // if (session.person) {
+    if (true) {
       event.preventDefault();
 
       setIsOpen(true);
@@ -27,7 +28,7 @@ export const SelfManagementSignInButton = ({
     <>
       <LinkButton
         data-fs-button-signin-link
-        href={session.person?.id ? `/account` : `/login`}
+        // href={session.person?.id ? `/account` : `/login`}
         className="text__title-mini"
         variant="tertiary"
         icon={<Icon name={"User"} width={18} height={18} weight="bold" />}

package/src/mock/profile-data.ts

@@ -0,0 +1,7 @@
+export const profileData = {
+  person: {
+    name: "Donald Green",
+    role: "Admin",
+  },
+  orgName: "Bytech Inc.",
+};

package/src/pages/buyer-portal.tsx

@@ -1,3 +1,5 @@
+import { Navbar } from "../components/Navbar/Navbar";
+
 export type PageLoader = { page: string };
 
 export async function loader(): Promise<PageLoader> {
@@ -5,5 +7,5 @@ export async function loader(): Promise<PageLoader> {
 }
 
 export default function MyAccount(data: PageLoader) {
-  return <h1>Page: {data.page}</h1>;
+  return <Navbar />;
 }

package/src/themes/index.scss

@@ -1,180 +1,12 @@
 @import "@faststore/ui/src/components/atoms/Overlay/styles.scss";
+@import "@faststore/ui/src/components/atoms/Logo/styles.scss";
 @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+@import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
 @import "../components/CustomerSwitch/customer-switch.scss";
-
-[data-fs-self-management-section] {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-
-  [data-fs-self-management-title] {
-      text-align: center;
-      font-size: x-large;
-      font-weight: bold;
-  }
-
-  [data-fs-self-management-title], [data-fs-self-management-code] {
-      margin-bottom: 32px;
-  }
-}
-
-
-[data-fs-self-management-nav] {
-  padding: 8px;
-  background-color: var(--fs-border-color-light);
-  margin-bottom: 16px;
-
-  a {
-      margin-left: 8px;
-      text-decoration: none;
-      color: var(--fs-color-tertiary-text);
-      font-weight: bold;
-  }
-}
-
-[data-fs-self-management-drawer] {
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  display: flex;
-  flex-direction: column;
-
-
-  // Header
-  [data-fs-self-management-drawer-header] {
-    padding: 0 var(--fs-spacing-8) var(--fs-spacing-5);
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: flex-end;
-  }
-
-  [data-fs-self-management-drawer-header-org-link] {
-    text-decoration: none;
-  }
-
-  [data-fs-self-management-drawer-header-org-name] {
-    font-weight: var(--fs-text-weight-bold);
-    font-size: var(--fs-text-size-3);
-    color: var(--fs-color-text);
-    text-transform: capitalize;
-    text-decoration: none;
-    padding: var(--fs-spacing-1) 0;
-  }
-
-  [data-fs-self-management-drawer-header-org-name]:hover {
-    text-decoration: underline;
-  }
-
-  [data-fs-self-management-drawer-header-org-image] {
-    width: var(--fs-spacing-9);
-    height: var(--fs-spacing-9);
-    border-radius: var(--fs-border-radius-pill);
-    background-color: var(--fs-color-light);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: var(--fs-spacing-1);
-    overflow: hidden;
-    color: var(--fs-border-color-active);
-  }
-
-  [data-fs-self-management-drawer-header-buttons-wrapper] {
-    display: flex;
-  }
-
-  [data-fs-self-management-drawer-header-config-button] {
-    margin-right: calc(-1 * var(--fs-spacing-1));
-    border-radius: var(--fs-border-radius-full);
-  }
-
-  [data-fs-self-management-drawer-header-switch-button] {
-    [data-fs-button-wrapper] {
-      border-radius: var(--fs-border-radius-pill);
-    }
-  }
-
-  // Body
-  [data-fs-self-management-drawer-body] {
-    flex: 1;
-    border-top: var(--fs-border-radius-small) var(--fs-color-neutral-3);
-    border-top-style: solid;
-    border-bottom: var(--fs-border-radius-small) var(--fs-color-neutral-3);
-    border-bottom-style: solid;
-
-    [data-fs-self-mamnagement-drawer-body-contents] {
-      padding: var(--fs-spacing-5) var(--fs-spacing-8) var(--fs-spacing-5);
-      display: grid;
-      row-gap: var(--fs-spacing-4);
-      width: 100%;
-
-      [data-fs-self-management-drawer-body-link] {
-        color: var(--fs-color-neutral-7);
-        text-decoration: none;
-      }
-
-      [data-fs-self-management-drawer-body-link]:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-
-
-
-  // Footer
-  [data-fs-self-management-drawer-footer] {
-    padding: var(--fs-spacing-4) var(--fs-spacing-8);
-    display: flex;
-    justify-content: space-between;
-  }
-
-  [data-fs-self-management-drawer-footer-person-image] {
-    width: var(--fs-spacing-6);
-    height: var(--fs-spacing-6);
-    border-radius: var(--fs-border-radius-pill);
-    background-color: var(--fs-color-light);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    color: var(--fs-border-color-active);
-    margin-right: var(--fs-spacing-3);
-  }
-
-  [data-fs-self-management-drawer-footer-person-data] {
-    flex: 1;
-    font-size: var(--fs-text-size-legend);
-
-    h2 {
-      color: var(--fs-color-text);
-      font-weight: var(--fs-text-weight-regular);
-    }
-
-    h3 {
-      color: var(--fs-color-text-light);
-      font-weight: var(--fs-text-weight-light);
-    }
-  }
-
-  [data-fs-self-management-drawer-footer-logout-button] {
-    &[data-fs-self-management-drawer-footer-logout-button-color="danger"] {
-
-      [data-fs-button-wrapper] {
-        border-radius: var(--fs-border-radius-pill);
-        color: var(--fs-color-danger-text);
-        border-color: var(--fs-border-color-light);
-      }
-
-      [data-fs-button-wrapper]:hover {
-        color: var(--fs-color-danger-text);
-      }
-
-      [data-fs-icon] {
-        color: var(--fs-color-danger-text);
-      }
-    }
-  }
-}
+@import "../components/Navbar/navbar.scss";
+@import "../components/SelfManagementDrawer/self-management-drawer.scss";
+@import "../components/SelfManagementDrawer/self-management-drawer.scss";
+@import "../components/ProfileSummary/profile-summary.scss";
 
 // ----------------------------------------------------------
 // GLOBAL TOKENS

package/tsconfig.json

@@ -17,7 +17,7 @@
       "DOM.Iterable",
       "ES2016"
     ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
-    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
+    "jsx": "preserve" /* Specify what JSX code is generated. */,
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */

package/src/components/SelfManagementDrawer/SelfManagementDrawerFooter.tsx

@@ -1,44 +0,0 @@
-import { ReactNode } from "react";
-import { Button, Icon } from "@faststore/ui";
-
-export type SelfManagementDrawerFooterProps = {
-  onLogoutClick?: (storeConfig: any) => void;
-  person: {
-    image?: ReactNode;
-    name: string;
-    role?: string;
-  }
-};
-
-export const SelfManagementDrawerFooter = ({
-  onLogoutClick,
-  person: {
-    image,
-    name,
-    role,
-  }
-}: SelfManagementDrawerFooterProps) => {
-
-  return (
-    <footer data-fs-self-management-drawer-footer>
-      <div data-fs-self-management-drawer-footer-person-image>
-        {image ?? <Icon name="Bell" width={20} height={20} />}
-      </div>
-      <div data-fs-self-management-drawer-footer-person-data>
-        <h2>{name}</h2>
-        {role && <h3>{role}</h3>}
-      </div>
-      <Button
-        data-fs-self-management-drawer-footer-logout-button
-        data-fs-self-management-drawer-footer-logout-button-color="danger"
-        icon={<Icon name="Bell" weight="bold" />}
-        iconPosition="left"
-        onClick={onLogoutClick}
-        variant="secondary"
-        size="small"
-      >
-        Logout
-      </Button>
-    </footer>
-  );
-};