@vtex/faststore-plugin-buyer-portal 1.3.45 → 1.3.47

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

@@ -11,8 +11,9 @@ import {
   InputText,
   type BasicDrawerProps,
 } from "../../../shared/components";
-import { useAnalytics } from "../../../shared/hooks";
+import { useBuyerPortal, useAnalytics } from "../../../shared/hooks";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { useGetUserByOrgUnitId } from "../../../users/hooks/useGetUserByOrgUnitId";
 import { useChildrenOrgUnits } from "../../hooks";
 import { useDeleteOrgUnit } from "../../hooks/useDeleteOrgUnit";
@@ -21,15 +22,18 @@ import { useDeleteOrgUnit } from "../../hooks/useDeleteOrgUnit";
 export type DeleteOrgUnitDrawerProps = Omit<BasicDrawerProps, "children"> & {
   id: string;
   name: string;
+  pathIds?: string;
 };
 
 export const DeleteOrgUnitDrawer = ({
   id,
   name,
+  pathIds,
   close,
   ...props
 }: DeleteOrgUnitDrawerProps) => {
   const router = useRouter();
+  const { currentOrgUnit } = useBuyerPortal();
   const { childrenOrgUnits } = useChildrenOrgUnits(id, name);
   const { users } = useGetUserByOrgUnitId(id);
   const { pushToast } = useUI();
@@ -58,14 +62,35 @@ export const DeleteOrgUnitDrawer = ({
       message: "Organizational unit deleted successfully",
       status: "INFO",
     });
-    close();
 
-    if (router.asPath === `/org-unit/${id}`) {
-      router.replace("/org-units/${id}");
-      return;
+    const currentPath = router.asPath;
+    const isOnDetailsPage = currentPath.includes(`/org-unit/${id}`);
+    const isOnListPageOfDeletedUnit =
+      currentPath === `/pvt/organization-account/org-units/${id}`;
+
+    const effectivePathIds =
+      pathIds ||
+      (id === currentOrgUnit?.id ? currentOrgUnit?.path?.ids : undefined);
+
+    if ((isOnDetailsPage || isOnListPageOfDeletedUnit) && effectivePathIds) {
+      const ids = effectivePathIds.split("/").filter(Boolean);
+
+      if (ids.length >= 2) {
+        const parentId = ids[ids.length - 2];
+        const redirectUrl = buyerPortalRoutes.orgUnitDetails({
+          orgUnitId: parentId,
+        });
+        router.replace(redirectUrl);
+      } else {
+        router.replace(`/pvt/organization-account`);
+      }
+    } else if (isOnDetailsPage || isOnListPageOfDeletedUnit) {
+      router.replace(`/pvt/organization-account`);
     } else {
       router.reload();
     }
+
+    close();
   };
 
   const { deleteOrgUnit, isDeleteOrgUnitLoading } = useDeleteOrgUnit({

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

@@ -0,0 +1,80 @@
+import { DropdownItem } from "@faststore/ui";
+
+import { BasicDropdownMenu, Icon } from "../../../shared/components";
+import { useDrawerProps } from "../../../shared/hooks";
+// TODO[2FA]: Uncomment when Authentication settings are ready
+// import { AuthSetupDrawer } from "../AuthSetupDrawer";
+import { UpdateOrgUnitDrawer } from "../UpdateOrgUnitDrawer/UpdateOrgUnitDrawer";
+
+// TODO[2FA]: Uncomment when Authentication settings are ready
+// import type { OrgUnitSettings } from "../../types";
+
+export type OrgUnitDetailsDropdownMenuProps = {
+  id: string;
+  name: string;
+  // TODO[2FA]: Uncomment when Authentication settings are ready
+  // settings: OrgUnitSettings;
+  onUpdate?: () => void;
+};
+
+export const OrgUnitDetailsDropdownMenu = ({
+  id,
+  name,
+  // TODO[2FA]: Uncomment when Authentication settings are ready
+  // settings,
+  onUpdate,
+}: OrgUnitDetailsDropdownMenuProps) => {
+  const {
+    open: openUpdateDrawerProps,
+    isOpen: isUpdateDrawerOpen,
+    ...updateDrawerProps
+  } = useDrawerProps();
+
+  // TODO[2FA]: Uncomment when Authentication settings are ready
+  // const {
+  //   open: openAuthSetupDrawerProps,
+  //   isOpen: isAuthSetupDrawerOpen,
+  //   ...authSetupDrawerProps
+  // } = useDrawerProps();
+
+  const sizeProps = { width: 20, height: 20 };
+
+  return (
+    <>
+      <BasicDropdownMenu>
+        <DropdownItem onClick={openUpdateDrawerProps}>
+          <Icon name="FormatSize" {...sizeProps} />
+          Rename
+        </DropdownItem>
+        {/* TODO[2FA]: Uncomment when 2FA settings are ready
+        <BasicDropdownMenu.Separator />
+        <DropdownItem onClick={openAuthSetupDrawerProps}>
+          <Icon name="Settings" {...sizeProps} />
+          Authentication
+        </DropdownItem>
+        */}
+      </BasicDropdownMenu>
+      {isUpdateDrawerOpen && (
+        <UpdateOrgUnitDrawer
+          readonly
+          id={id}
+          name={name}
+          onSuccess={onUpdate}
+          {...updateDrawerProps}
+          isOpen={isUpdateDrawerOpen}
+        />
+      )}
+      {/* TODO[2FA]: Uncomment when 2FA settings are ready
+      {isAuthSetupDrawerOpen && (
+        <AuthSetupDrawer
+          id={id}
+          name={name}
+          settings={settings}
+          {...authSetupDrawerProps}
+          isOpen={isAuthSetupDrawerOpen}
+        />
+      )}
+      */}
+    </>
+  );
+};

package/src/features/org-units/components/OrgUnitDetailsDropdownMenu/index.ts

@@ -0,0 +1,4 @@
+export {
+  OrgUnitDetailsDropdownMenu,
+  type OrgUnitDetailsDropdownMenuProps,
+} from "./OrgUnitDetailsDropdownMenu";

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

@@ -8,13 +8,14 @@ import {
 import { useGetRolesOptions } from "../../../roles/hooks";
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
 import { useDrawerProps } from "../../../shared/hooks";
-import { CreateUserDrawer } from "../../../users/components";
+import { CreateUserDrawerSelector } from "../../../users/components";
 
 export type OrgUnitsDropdownMenuProps = {
   id: string;
   name: string;
   onCreate?: () => void;
   isComplete?: boolean;
+  pathIds?: string;
 };
 
 export const OrgUnitsDropdownMenu = ({
@@ -22,6 +23,7 @@ export const OrgUnitsDropdownMenu = ({
   name,
   onCreate,
   isComplete = true,
+  pathIds,
 }: OrgUnitsDropdownMenuProps) => {
   const { rolesOptions } = useGetRolesOptions(id);
   const {
@@ -97,6 +99,7 @@ export const OrgUnitsDropdownMenu = ({
         <DeleteOrgUnitDrawer
           id={id}
           name={name}
+          pathIds={pathIds}
           {...deleteDrawerProps}
           isOpen={isDeleteDrawerOpen}
         />
@@ -111,7 +114,7 @@ export const OrgUnitsDropdownMenu = ({
         />
       )}
       {isCreateUserDrawerOpen && (
-        <CreateUserDrawer
+        <CreateUserDrawerSelector
           orgUnit={{ id, name }}
           rolesOptions={rolesOptions}
           {...createUserDrawerProps}

package/src/features/org-units/components/index.ts

@@ -28,3 +28,11 @@ export {
   type OrgUnitDetailsNavbarProps,
 } from "./OrgUnitDetailsNavbar/OrgUnitDetailsNavbar";
 export { OrgUnitBreadcrumb } from "./OrgUnitBreadcrumb/OrgUnitBreadcrumb";
+export {
+  AuthSetupDrawer,
+  type AuthSetupDrawerProps,
+} from "./AuthSetupDrawer/AuthSetupDrawer";
+export {
+  OrgUnitDetailsDropdownMenu,
+  type OrgUnitDetailsDropdownMenuProps,
+} from "./OrgUnitDetailsDropdownMenu/OrgUnitDetailsDropdownMenu";

package/src/features/org-units/hooks/index.ts

@@ -2,6 +2,8 @@ export { useCreateNewOrgUnit } from "./useCreateNewOrgUnit";
 export { useDeleteOrgUnit } from "./useDeleteOrgUnit";
 export { useOrgUnitStructure } from "./useOrgUnitStructure";
 export { useUpdateOrgUnit } from "./useUpdateOrgUnit";
+export { useUpdateOrgUnitSettings } from "./useUpdateOrgUnitSettings";
 export { useChildrenOrgUnits } from "./useChildrenOrgUnits";
 export { useOrgUnitByUser } from "./useOrgUnitByUser";
 export { useSearchOrgUnits } from "./useSearchOrgUnits";
+export { useGetOrgUnitSettings } from "./useGetOrgUnitSettings";

package/src/features/org-units/hooks/useGetOrgUnitSettings.ts

@@ -0,0 +1,20 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { getOrgUnitSettingsService } from "../services";
+
+export const useGetOrgUnitSettings = (
+  unitId: string,
+  options?: QueryOptions<AwaitedType<typeof getOrgUnitSettingsService>>
+) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `api/org-unit-settings/${unitId}`,
+    ({ cookie }) => getOrgUnitSettingsService({ cookie, unitId }),
+    options
+  );
+
+  return {
+    settings: data,
+    hasSettingsError: error,
+    isSettingsLoading: isLoading,
+    refetchSettings: refetch,
+  };
+};

package/src/features/org-units/hooks/useUpdateOrgUnitSettings.ts

@@ -0,0 +1,27 @@
+import { type MutationOptions, useMutation } from "../../shared/hooks";
+import {
+  updateOrgUnitSettingsService,
+  type UpdateOrgUnitSettingsServiceProps,
+} from "../services/update-org-unit-settings.service";
+
+export const useUpdateOrgUnitSettings = (
+  options?: MutationOptions<AwaitedType<typeof updateOrgUnitSettingsService>>
+) => {
+  const { mutate, isLoading, error } = useMutation<
+    null,
+    Omit<UpdateOrgUnitSettingsServiceProps, "cookie">
+  >(
+    (variables, clientContext) =>
+      updateOrgUnitSettingsService({
+        ...variables,
+        cookie: clientContext.cookie,
+      }),
+    options
+  );
+
+  return {
+    updateOrgUnitSettings: mutate,
+    isUpdateOrgUnitSettingsLoading: isLoading,
+    hasUpdateOrgUnitSettingsError: error,
+  };
+};

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

@@ -13,6 +13,7 @@ import {
   LetterHighlight,
   VerticalNav,
 } from "../../../shared/components";
+import { BasicDropdownMenuTrigger } from "../../../shared/components/BasicDropdownMenu/BasicDropdownMenuTrigger";
 import { useMediaQuery } from "../../../shared/hooks/useMediaQuery";
 import { GlobalLayout } from "../../../shared/layouts";
 import {
@@ -25,6 +26,7 @@ import {
   AddAllToOrgUnitDropdown,
   OrgUnitBreadcrumb,
   OrgUnitDetailsNavbar,
+  OrgUnitDetailsDropdownMenu,
 } from "../../components";
 import { useOrgUnitByUser } from "../../hooks";
 
@@ -43,12 +45,19 @@ export type OrgUnitsDetailsLayoutProps = {
     orgUnit: OrgUnitBasicData;
     contracts: ContractData[];
     user: UserData | null;
+    // TODO[2FA]: Uncomment when Authentication settings are ready
+    //  settings: OrgUnitSettings;
   };
   loading?: boolean;
 };
 
 export const OrgUnitsDetailsLayout = ({
-  data: { orgUnit, contracts, user },
+  data: {
+    orgUnit,
+    contracts,
+    user, // TODO[2FA]: Uncomment when Authentication settings are ready
+    // settings,
+  },
   loading = false,
 }: OrgUnitsDetailsLayoutProps) => {
   const isMobile = useMediaQuery(QUERY_TABLET);
@@ -104,15 +113,28 @@ export const OrgUnitsDetailsLayout = ({
             />
           )}
 
+          <Dropdown>
+            <BasicDropdownMenuTrigger />
+
+            <OrgUnitDetailsDropdownMenu
+              id={orgUnit?.id}
+              name={orgUnit?.name}
+              // TODO[2FA]: Uncomment when Authentication settings are ready
+              // settings={settings}
+            />
+          </Dropdown>
+
           <Dropdown>
             <DropdownButton asChild>
               <HeaderInside.Button />
             </DropdownButton>
+
             <AddAllToOrgUnitDropdown
               isSingleContract={isSingleContract}
               contractId={contracts[0]?.id}
               unitId={orgUnit?.id}
               unitName={orgUnit?.name}
+              pathIds={orgUnit?.path?.ids}
             />
           </Dropdown>
         </HeaderInside>

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

@@ -5,6 +5,7 @@
 @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";
+@import "../../components/AuthSetupDrawer/auth-setup-drawer.scss";
 
 [data-fs-org-units-details-section] {
   @import "../../../shared/components/BasicCard/basic-card.scss";

package/src/features/org-units/services/get-org-unit-settings.service.ts

@@ -0,0 +1,13 @@
+import { orgUnitClient } from "../clients/OrgUnitClient";
+
+export type GetOrgUnitSettingsServiceProps = {
+  unitId: string;
+  cookie: string;
+};
+
+export const getOrgUnitSettingsService = async ({
+  unitId,
+  cookie,
+}: GetOrgUnitSettingsServiceProps) => {
+  return orgUnitClient.getOrgUnitSettings(unitId, cookie);
+};

package/src/features/org-units/services/index.ts

@@ -19,3 +19,11 @@ export {
 } from "./update-org-unit.service";
 export { getOrgUnitByUserIdService } from "./get-org-unit-by-user-id.service";
 export { searchOrgUnitsByNameService } from "./search-org-units-by-name.service";
+export {
+  type GetOrgUnitSettingsServiceProps,
+  getOrgUnitSettingsService,
+} from "./get-org-unit-settings.service";
+export {
+  type UpdateOrgUnitSettingsServiceProps,
+  updateOrgUnitSettingsService,
+} from "./update-org-unit-settings.service";

package/src/features/org-units/services/update-org-unit-settings.service.ts

@@ -0,0 +1,17 @@
+import { orgUnitClient } from "../clients/OrgUnitClient";
+
+import type { OrgUnitSettings } from "../types";
+
+export type UpdateOrgUnitSettingsServiceProps = {
+  unitId: string;
+  data: OrgUnitSettings;
+  cookie: string;
+};
+
+export const updateOrgUnitSettingsService = async ({
+  unitId,
+  data,
+  cookie,
+}: UpdateOrgUnitSettingsServiceProps) => {
+  return orgUnitClient.updateOrgUnitSettings(unitId, data, cookie);
+};

package/src/features/org-units/types/OrgUnitSettings.ts

@@ -0,0 +1,25 @@
+export enum AuthenticationMethod {
+  PASSWORD = "PASSWORD",
+  SSO = "SSO",
+}
+
+export type OrgUnitSettings = {
+  userIdentification: {
+    userName: boolean;
+    email: boolean;
+    phone: boolean;
+  };
+  authenticationMethods: {
+    method: AuthenticationMethod;
+  };
+  "2FA": {
+    verificationCode: boolean;
+  };
+};
+
+export type Identifier = {
+  id: string;
+  name: string;
+  disabled: boolean;
+  defaultChecked?: boolean;
+};

package/src/features/org-units/types/index.ts

@@ -14,3 +14,5 @@ export type {
   OrgUnitSearchParams,
   OrgUnitSearchResponse,
 } from "./OrgUnitSearch";
+export { AuthenticationMethod } from "./OrgUnitSettings";
+export type { OrgUnitSettings, Identifier } from "./OrgUnitSettings";

package/src/features/shared/components/BuyerPortalProvider/BuyerPortalProvider.tsx

@@ -7,6 +7,10 @@ import type { ContractData } from "../../../contracts/types";
 import type { OrgUnitBasicData } from "../../../org-units/types";
 import type { ClientContext } from "../../utils";
 
+export type FeatureFlags = {
+  enableUsernameCreation?: boolean;
+};
+
 export type BuyerPortalContextType = {
   clientContext: ClientContext;
   currentOrgUnit?: OrgUnitBasicData | null;
@@ -16,6 +20,7 @@ export type BuyerPortalContextType = {
     name: string;
     role?: string;
   } | null;
+  featureFlags?: FeatureFlags;
 };
 
 export const BuyerPortalContext = createContext<

package/src/features/shared/components/Toast/Toast.tsx

@@ -4,6 +4,42 @@ import { useUI } from "@faststore/ui";
 
 import { Icon } from "../Icon";
 
+const LINK_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
+
+function parseMessageWithLinks(message: string): (string | JSX.Element)[] {
+  const parts: (string | JSX.Element)[] = [];
+  let lastIndex = 0;
+  let match;
+
+  while ((match = LINK_REGEX.exec(message)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(message.slice(lastIndex, match.index));
+    }
+
+    const [, linkText, url] = match;
+
+    parts.push(
+      <a
+        key={match.index}
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        data-fs-bp-toast-link
+      >
+        {linkText}
+      </a>
+    );
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < message.length) {
+    parts.push(message.slice(lastIndex));
+  }
+
+  return parts;
+}
+
 function Toast() {
   const { toasts, popToast } = useUI();
   const toast = toasts[toasts.length - 1];
@@ -39,9 +75,14 @@ function Toast() {
     >
       <div data-fs-bp-toast-content>
         {toast.title && <p data-fs-bp-toast-title>{toast.title}</p>}
-        <p data-fs-bp-toast-message>{toast.message}</p>
+        <p
+          data-fs-bp-toast-message
+          data-fs-bp-toast-message-has-title={!!toast.title}
+        >
+          {parseMessageWithLinks(toast.message)}
+        </p>
+        {!!toast.icon && toast.icon}
       </div>
-      {!!toast.icon && toast.icon}
       <button type="button" data-fs-bp-toast-dismiss onClick={popToast}>
         <Icon name="Close" width={10} height={10} />
       </button>

package/src/features/shared/components/Toast/toast.scss

@@ -16,7 +16,7 @@
   --fs-toast-border-color: transparent;
 
   --fs-toast-shadow: 0 0.063rem 0.188rem rgba(0, 0, 0, 0.1);
-  --fs-toast-bkg-color: #000000;
+  --fs-toast-bkg-color: #1f1f1f;
 
   --fs-toast-transition-property: var(--fs-transition-property);
   --fs-toast-transition-timing: var(--fs-transition-timing);
@@ -93,6 +93,7 @@
   [data-fs-bp-toast-content] {
     display: block;
     overflow: hidden;
+    padding: var(--fs-spacing-1) var(--fs-spacing-2);
   }
 
   [data-fs-icon] {
@@ -115,27 +116,44 @@
   }
 
   [data-fs-bp-toast-view-button] {
-    color: #ffffff;
+    color: var(--fs-bp-color-neutral-0);
     font-weight: var(--fs-text-weight-semibold);
     font-size: var(--fs-text-size-1);
     line-height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
     cursor: pointer;
+    padding: 0;
+    margin-top: var(--fs-spacing-1);
   }
 
   [data-fs-bp-toast-title] {
-    margin-left: var(--fs-toast-title-margin-left);
     overflow: hidden;
     font-size: var(--fs-toast-title-size);
     font-weight: var(--fs-toast-title-weight);
     line-height: var(--fs-toast-title-line-height);
+    margin-bottom: var(--fs-spacing-0);
   }
 
   [data-fs-bp-toast-message] {
-    margin-left: var(--fs-toast-message-margin-left);
     overflow: hidden;
-    font-weight: 400;
+    font-weight: var(--fs-bp-weight-regular);
     font-size: var(--fs-text-size-1);
     line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+    color: var(--fs-bp-color-neutral-0);
+
+    &[data-fs-bp-toast-message-has-title="true"] {
+      color: var(--fs-bp-color-neutral-5);
+    }
+
+    [data-fs-bp-toast-link] {
+      color: var(--fs-bp-color-neutral-0);
+      text-decoration: none;
+      transition: opacity var(--fs-toast-transition-timing)
+        var(--fs-toast-transition-function);
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
   }
 
   [data-fs-bp-toast-dismiss] {

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

@@ -23,6 +23,7 @@ export {
   BuyerPortalProvider,
   type BuyerPortalContextType,
   type BuyerPortalProviderProps,
+  type FeatureFlags,
 } from "./BuyerPortalProvider/BuyerPortalProvider";
 export { Card, CardBody, CardFooter, CardHeader } from "./Card";
 export {

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

@@ -124,6 +124,19 @@ export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
                 name: "",
               },
             },
+            settings: {
+              userIdentification: {
+                userName: false,
+                email: false,
+                phone: false,
+              },
+              authenticationMethods: {
+                method: "PASSWORD",
+              },
+              "2FA": {
+                verificationCode: false,
+              },
+            },
           }}
         />
       );

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

@@ -2,7 +2,7 @@ export const AUT_COOKIE_KEY = "VtexIdclientAutCookie";
 // PROD URL
 export const API_URL = (checkoutUrl: string, operation?: string) =>
   `${checkoutUrl}/_v/store-front/${operation}`;
-// DEV URL - CHANGE BEFORE MERGE
+// // DEV URL - CHANGE BEFORE MERGE
 // export const API_URL = (checkoutUrl?: string, operation?: string) =>
 //   `https://{{workspace}}--b2bfaststoredev.myvtex.com/_v/store-front/${operation}`;
 
@@ -22,4 +22,4 @@ export const SCOPE_KEYS = {
   CREDIT_CARDS: "creditCards",
 } as const;
 
-export const CURRENT_VERSION = "1.3.45";
+export const CURRENT_VERSION = "1.3.47";

package/src/features/shared/utils/withBuyerPortal.tsx

@@ -16,7 +16,10 @@ export const withBuyerPortal = <T extends Record<string, unknown>>(
     const { context, ...componentProps } = props;
 
     return (
-      <BuyerPortalProvider {...context}>
+      <BuyerPortalProvider
+        featureFlags={{ enableUsernameCreation: true }}
+        {...context}
+      >
         <Component {...(componentProps as unknown as T)} />
       </BuyerPortalProvider>
     );