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

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,7 +8,7 @@ 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;
@@ -114,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,10 +113,22 @@ 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}

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.46";
+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>
     );

package/src/features/users/clients/UsersClient.ts

@@ -57,8 +57,9 @@ class UsersClient extends Client {
     props: {
       orgUnitId: string;
       role: number[];
-      email: string;
-      name: string;
+      email?: string;
+      name?: string;
+      userName: string;
     },
     cookie: string
   ) {
@@ -78,8 +79,9 @@ class UsersClient extends Client {
       {
         orgUnitId: string;
         role: number[];
-        email: string;
-        name: string;
+        email?: string;
+        name?: string;
+        userName: string;
       }
     >(
       `units/${orgUnitId}/users`,
@@ -96,6 +98,54 @@ class UsersClient extends Client {
     );
   }
 
+  addUserToOrgUnitV2(
+    props: {
+      orgUnitId: string;
+      role: number[];
+      email?: string;
+      name?: string;
+      phone?: string;
+      userName: string;
+    },
+    cookie: string
+  ) {
+    const { orgUnitId, ...data } = props;
+
+    return this.post<
+      {
+        message:
+          | "User already exists and is attached to a unit"
+          | "User Created, Sucessfully attached to Org Unit";
+        user: {
+          id: string;
+          email: string;
+          name: string;
+        };
+        accessToken?: string;
+      },
+      {
+        orgUnitId: string;
+        role: number[];
+        email?: string;
+        name?: string;
+        phone?: string;
+        userName: string;
+      }
+    >(
+      `v2/units/${orgUnitId}/users`,
+      {
+        ...data,
+        orgUnitId,
+      },
+      {
+        headers: {
+          Cookie: cookie,
+        },
+        ignoreContentType: true,
+      }
+    );
+  }
+
   removeUserFromOrgUnit(
     props: {
       orgUnitId: string;
@@ -169,6 +219,57 @@ class UsersClient extends Client {
       }
     );
   }
+
+  validateUsername(
+    props: {
+      orgUnitId: string;
+      userName: string;
+    },
+    cookie: string
+  ) {
+    const { orgUnitId, userName } = props;
+
+    return this.post<
+      {
+        valid: boolean;
+        userNameSuggestions?: string[];
+      },
+      {
+        userName: string;
+      }
+    >(
+      `units/${orgUnitId}/users/validate`,
+      {
+        userName,
+      },
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  resetPassword(
+    props: {
+      orgUnitId: string;
+      userId: string;
+    },
+    cookie: string
+  ) {
+    const { orgUnitId, userId } = props;
+
+    return this.post<
+      {
+        accessCode: string;
+      },
+      null
+    >(`units/${orgUnitId}/users/${userId}/reset-password`, null, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
 }
 
 const usersClient = new UsersClient();

package/src/features/users/components/CreateUserDrawer/CreateUserDrawer.tsx

@@ -166,13 +166,13 @@ export const CreateUserDrawer = ({
       return;
     }
 
-    // Create User
     addUserToOrgUnit({
       name,
       email,
       phone: phone ?? "",
       roles,
       orgUnitId,
+      userName: "",
     });
   };