@vtex/faststore-plugin-buyer-portal 1.3.9 → 1.3.11

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.11] - 2025-10-23
+
+### Added
+
+- Add About drawer to check app's version and it's dependencies.
+
 ## [1.3.9] - 2025-10-21
 
 ### Added
@@ -159,7 +165,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.9...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/1.3.11...HEAD
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
 [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -171,3 +177,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [1.3.9]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.8...v1.3.9
 [1.3.8]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.7...v1.3.8
 [1.3.7]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.7
+
+[1.3.11]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.3.9",
+  "version": "1.3.11",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/src/features/org-units/components/OrgUnitDetailsNavbar/OrgUnitDetailsNavbar.tsx

@@ -7,13 +7,17 @@ import {
   DropdownButton,
   DropdownMenu,
   Skeleton,
+  IconButton,
 } from "@faststore/ui";
 
 import { ProfileSummary } from "../../../profile/components";
 import { Icon } from "../../../shared/components";
+import { useDrawerProps } from "../../../shared/hooks";
+import { AboutDrawer } from "../../../shared/layouts/BaseTabsLayout/about-drawer/AboutDrawer";
 import { doLogout } from "../../../shared/utils";
 
 export type OrgUnitDetailsNavbarProps = {
+  orgId: string;
   orgName: string;
   person: {
     image?: string;
@@ -26,8 +30,15 @@ export type OrgUnitDetailsNavbarProps = {
 export const OrgUnitDetailsNavbar = ({
   person,
   orgName,
+  orgId,
   loading = false,
 }: OrgUnitDetailsNavbarProps) => {
+  const {
+    open: openAboutMenu,
+    isOpen: isOpenAboutMenu,
+    ...aboutMenuDrawerProps
+  } = useDrawerProps();
+
   return (
     <header data-fs-bp-org-unit-details-navbar>
       <Link href="/" data-fs-bp-org-unit-details-navbar-link>
@@ -37,6 +48,21 @@ export const OrgUnitDetailsNavbar = ({
         <Link href="/" data-fs-bp-org-unit-details-navbar-start-shopping-link>
           Start shopping
         </Link>
+
+        <IconButton
+          data-fs-bp-nav-about-trigger
+          icon={
+            <Icon
+              name="CircleQuestionMark"
+              width={24}
+              height={24}
+              weight="regular"
+            />
+          }
+          aria-label={"open about menu"}
+          onClick={openAboutMenu}
+        />
+
         {loading ? (
           <Skeleton size={{ width: "2.5rem", height: "2.5rem" }} />
         ) : (
@@ -58,6 +84,13 @@ export const OrgUnitDetailsNavbar = ({
           </Dropdown>
         )}
       </div>
+      {isOpenAboutMenu && (
+        <AboutDrawer
+          {...aboutMenuDrawerProps}
+          isOpen={isOpenAboutMenu}
+          unitId={orgId}
+        />
+      )}
     </header>
   );
 };

package/src/features/org-units/components/OrgUnitDetailsNavbar/org-unit-details-navbar.scss

@@ -54,6 +54,16 @@
     height: var(--fs-spacing-6);
     cursor: pointer;
   }
+
+  [data-fs-bp-nav-about-trigger] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--fs-spacing-6);
+    height: var(--fs-spacing-6);
+    cursor: pointer;
+    margin-top: 0.2rem;
+  }
 }
 
 [data-fs-bp-org-unit-details-navbar-menu] {

package/src/features/org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout.tsx

@@ -76,6 +76,7 @@ export const OrgUnitsDetailsLayout = ({
     <GlobalLayout>
       {/* TODO: Add person here */}
       <OrgUnitDetailsNavbar
+        orgId={orgUnit.id}
         orgName={orgUnit.name}
         person={{
           name: user?.name ?? "",

package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss

@@ -2,6 +2,7 @@
 @import "@faststore/ui/src/components/molecules/Breadcrumb/styles.scss";
 @import "../../../shared/components/BasicDropdownMenu/basic-dropdown-menu.scss";
 @import "../../components/OrgUnitDetailsNavbar/org-unit-details-navbar.scss";
+@import "../../../shared/layouts/BaseTabsLayout/about-drawer/about-drawer.scss";
 @import "../../../credit-cards/components/CreateCreditCardDrawer/create-credit-card-drawer.scss";
 @import "../../components/OrgUnitBreadcrumb/org-unit-breadcrumb.scss";
 
@@ -10,13 +11,22 @@
   @import "../../../shared/components/VerticalNav/vertical-nav.scss";
   @import "../../../shared/components/LetterHighlight/letter-highlight.scss";
   @import "../../../shared/components/HeaderInside/header-inside.scss";
-  
-  
-  $fs-spacing-3-0: calc(var(--fs-spacing-3) + var(--fs-spacing-0)); // 1.25rem, 20px
-  $fs-spacing-3-2: calc(var(--fs-spacing-3) + var(--fs-spacing-2)); // 1.75rem, 28px
-  $fs-spacing-7-2: calc(var(--fs-spacing-7) + var(--fs-spacing-2)); // 3.75rem, 52px
-  $fs-spacing-9-0: calc(var(--fs-spacing-9) + var(--fs-spacing-0)); // 4.25rem, 68px
-  $fs-spacing-13-4: calc(var(--fs-spacing-13) + var(--fs-spacing-4)); // 7.5rem, 120px
+
+  $fs-spacing-3-0: calc(
+    var(--fs-spacing-3) + var(--fs-spacing-0)
+  ); // 1.25rem, 20px
+  $fs-spacing-3-2: calc(
+    var(--fs-spacing-3) + var(--fs-spacing-2)
+  ); // 1.75rem, 28px
+  $fs-spacing-7-2: calc(
+    var(--fs-spacing-7) + var(--fs-spacing-2)
+  ); // 3.75rem, 52px
+  $fs-spacing-9-0: calc(
+    var(--fs-spacing-9) + var(--fs-spacing-0)
+  ); // 4.25rem, 68px
+  $fs-spacing-13-4: calc(
+    var(--fs-spacing-13) + var(--fs-spacing-4)
+  ); // 7.5rem, 120px
 
   padding: 0 $fs-spacing-7-2 $fs-spacing-13-4 $fs-spacing-7-2;
 

package/src/features/shared/clients/AboutClient.ts

@@ -0,0 +1,30 @@
+import { getApiUrl } from "../utils";
+
+import { Client } from "./Client";
+
+type BuyerPortalApp = {
+  appName: string;
+  appVersion: string;
+};
+
+type AppVersionInformation = {
+  buyerPortalApps: BuyerPortalApp[];
+};
+
+export default class AboutClient extends Client {
+  constructor() {
+    super(getApiUrl());
+  }
+
+  getVersionInformation(unitId: string, cookie: string) {
+    return this.get<AppVersionInformation>(`units/${unitId}/about`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+}
+
+const aboutClient = new AboutClient();
+
+export { aboutClient };

package/src/features/shared/hooks/index.ts

@@ -12,3 +12,4 @@ export { useAddToScope } from "./useAddToScope";
 export { useRemoveFromScope } from "./useRemoveFromScope";
 export { usePageItems, type UsePageItemsProps } from "./usePageItems";
 export { useRouterLoading } from "./useRouterLoading";
+export { useGetDependenciesVersion } from "./useGetDependenciesVersion";

package/src/features/shared/hooks/useGetDependenciesVersion.ts

@@ -0,0 +1,21 @@
+import { getDependenciesVersionService } from "../services";
+
+import { type QueryOptions, useQuery } from "./useQuery";
+
+export const useGetDependenciesVersion = (
+  unitId: string,
+  options?: QueryOptions<AwaitedType<typeof getDependenciesVersionService>>
+) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `api/about/${unitId}`,
+    ({ cookie }) => getDependenciesVersionService({ unitId, cookie }),
+    options
+  );
+
+  return {
+    dependenciesVersion: data,
+    hasDependenciesVersionError: error,
+    isDependenciesVersionLoading: isLoading,
+    refetchDependenciesVersion: refetch,
+  };
+};

package/src/features/shared/layouts/BaseTabsLayout/Navbar.tsx

@@ -18,6 +18,7 @@ import { useDrawerProps } from "../../hooks";
 import { doLogout } from "../../utils";
 import { buyerPortalRoutes } from "../../utils/buyerPortalRoutes";
 
+import { AboutDrawer } from "./about-drawer/AboutDrawer";
 import { SidebarDrawer } from "./sidebar-drawer/SidebarDrawer";
 
 import type { OrgUnitBasicData } from "../../../org-units/types";
@@ -47,6 +48,12 @@ export const Navbar = ({
     ...deleteOpenSidebarMenuDrawerProps
   } = useDrawerProps();
 
+  const {
+    open: openAboutMenu,
+    isOpen: isOpenAboutMenu,
+    ...aboutMenuDrawerProps
+  } = useDrawerProps();
+
   const { orgUnit: userUnit } = useOrgUnitByUser(person.id);
 
   const orgUnitList = orgUnit?.path.ids.split("/").slice(1) ?? [];
@@ -89,6 +96,13 @@ export const Navbar = ({
             Start shopping
           </Link>
 
+          <IconButton
+            data-fs-bp-nav-about-trigger
+            icon={<Icon name="CircleQuestionMark" width={24} height={24} />}
+            aria-label={"open about menu"}
+            onClick={openAboutMenu}
+          />
+
           {loading ? (
             <Skeleton size={{ width: "2.5rem", height: "2.5rem" }} />
           ) : (
@@ -121,6 +135,13 @@ export const Navbar = ({
           isOpen={isOpenSidebarMenuDrawerOpen}
         />
       )}
+      {isOpenAboutMenu && (
+        <AboutDrawer
+          {...aboutMenuDrawerProps}
+          unitId={orgUnit?.id ?? ""}
+          isOpen={isOpenAboutMenu}
+        />
+      )}
     </>
   );
 };

package/src/features/shared/layouts/BaseTabsLayout/about-drawer/AboutDrawer.tsx

@@ -0,0 +1,59 @@
+import { Skeleton } from "@faststore/ui";
+
+import { BasicDrawer, type BasicDrawerProps } from "../../../components";
+import { useGetDependenciesVersion } from "../../../hooks";
+import { CURRENT_VERSION } from "../../../utils/constants";
+
+export type AboutDrawerProps = Omit<BasicDrawerProps, "children"> & {
+  unitId: string;
+  close: () => void;
+};
+
+export const AboutDrawer = ({ unitId, close, ...props }: AboutDrawerProps) => {
+  const { dependenciesVersion, isDependenciesVersionLoading } =
+    useGetDependenciesVersion(unitId);
+
+  return (
+    <BasicDrawer
+      data-bp-about-menu
+      close={close}
+      {...props}
+      data-fs-slide-over-direction="rightSide"
+    >
+      <BasicDrawer.Heading title="About" onClose={close} />
+      <BasicDrawer.Body data-bp-about-menu-drawer-body>
+        Version details
+        {isDependenciesVersionLoading && (
+          <div data-fs-bp-basic-buying-policy-drawer-skeleton>
+            <Skeleton size={{ width: "100%", height: "3.5rem" }} />
+          </div>
+        )}
+        {!isDependenciesVersionLoading && (
+          <div data-fs-bp-about-information>
+            <div data-fs-bp-about-row>
+              <span data-fs-bp-about-row-label>Organization Account</span>
+              <span data-fs-bp-about-row-value>{CURRENT_VERSION}</span>
+            </div>
+            <hr data-fs-bp-about-divider />
+            {dependenciesVersion &&
+              dependenciesVersion.buyerPortalApps.map((buyerPortalApp) => {
+                return (
+                  <div key={buyerPortalApp.appName}>
+                    <div data-fs-bp-about-row>
+                      <span data-fs-bp-about-row-label>
+                        {buyerPortalApp.appName}
+                      </span>
+                      <span data-fs-bp-about-row-value>
+                        {buyerPortalApp.appVersion}
+                      </span>
+                    </div>
+                    <hr data-fs-bp-about-divider />
+                  </div>
+                );
+              })}
+          </div>
+        )}
+      </BasicDrawer.Body>
+    </BasicDrawer>
+  );
+};

package/src/features/shared/layouts/BaseTabsLayout/about-drawer/about-drawer.scss

@@ -0,0 +1,57 @@
+[data-bp-about-menu] {
+  @import "../../../../shared/components/BasicDrawer/basic-drawer.scss";
+
+  @include media(">=tablet") {
+    width: 30rem !important;
+    min-width: 30rem !important;
+    max-width: 30rem !important;
+  }
+
+  @include media("<=tablet") {
+    width: 19rem !important;
+    min-width: 19rem !important;
+    max-width: 19rem !important;
+    height: 100% !important;
+    border-radius: 0 !important;
+  }
+  [data-fs-bp-basic-drawer-body] [data-fs-bp-basic-drawer-body-wrapper] {
+    padding-top: 2.5rem !important;
+  }
+
+  [data-fs-bp-basic-drawer-heading] {
+    [data-fs-bp-basic-drawer-heading-title] {
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 28px;
+      color: #1f1f1f;
+    }
+  }
+
+  [data-fs-bp-about-row] {
+    display: flex;
+    padding: 1.375rem 0;
+    font-weight: var(--fs-text-weight-medium);
+    size: var(--fs-text-size-1);
+    line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+
+    [data-fs-bp-about-row-label] {
+      width: 12.5rem;
+      color: #707070;
+      font-size: var(--fs-text-size-1);
+      font-weight: 500;
+    }
+
+    [data-fs-bp-about-row-details] {
+      color: #000;
+      font-size: var(--fs-text-size-1);
+      font-weight: 500;
+    }
+  }
+
+  [data-fs-bp-about-divider] {
+    border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
+  }
+  [data-fs-bp-about-information] {
+    padding-top: 1rem;
+  }
+}

package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss

@@ -24,11 +24,11 @@
       [data-fs-bp-breadcrumb-current],
       [data-fs-bp-breadcrumb-dropdown-trigger] {
         font-size: var(--fs-text-size-2);
-  
+
         @include media("<=phonemid") {
           font-size: var(--fs-text-size-1);
         }
-      }      
+      }
     }
 
     [data-fs-bp-nav-menu-btn-container] {
@@ -63,6 +63,14 @@
       line-height: var(--fs-text-size-5);
     }
 
+    [data-fs-bp-nav-about-trigger] {
+      cursor: pointer;
+    }
+
+    [data-fs-bp-nav-account-menu-trigger] {
+      cursor: pointer;
+    }
+
     [data-fs-bp-nav-menu] {
       --fs-profile-dropdown-menu-width: 22.5rem;
       width: auto;

package/src/features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout.tsx

@@ -106,6 +106,7 @@ export const ErrorTabsLayout = ({ children, error }: ErrorTabsLayoutProps) => {
       return (
         <div data-fs-bp-create-user-error-state>
           <OrgUnitDetailsNavbar
+            orgId={orgUnit?.id ?? ""}
             orgName={orgUnit?.name ?? ""}
             person={{
               name: user?.name ?? "",

package/src/features/shared/services/get-dependencies-version.service.ts

@@ -0,0 +1,13 @@
+import { aboutClient } from "../clients/AboutClient";
+
+export type GetDependenciesVersionProps = {
+  unitId: string;
+  cookie: string;
+};
+
+export const getDependenciesVersionService = async ({
+  cookie,
+  unitId,
+}: GetDependenciesVersionProps) => {
+  return aboutClient.getVersionInformation(unitId, cookie);
+};

package/src/features/shared/services/index.ts

@@ -10,3 +10,7 @@ export {
   validateAccessService,
   type ValidateAccessServiceProps,
 } from "./validate-access.service";
+export {
+  getDependenciesVersionService,
+  type GetDependenciesVersionProps,
+} from "./get-dependencies-version.service";

package/src/features/shared/utils/constants.ts

@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
 export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
   "bp_hide_edit_recipient_confirm";
 
-export const CURRENT_VERSION = "1.3.9";
+export const CURRENT_VERSION = "1.3.11";