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

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/hooks/usePageItems.ts

@@ -37,6 +37,8 @@ export const usePageItems = <T>({
   const [searchTerm, setSearchTerm] = useState(search ?? "");
   const [isLoading, setIsLoading] = useState(false);
 
+  const { setQueryStrings, setQueryString } = useQueryParams();
+
   useDebounce(searchTerm, DEBOUNCE_TIMEOUT, {
     onDebounce: (value) => {
       setIsLoading(true);
@@ -54,8 +56,6 @@ export const usePageItems = <T>({
     },
   });
 
-  const { setQueryStrings, setQueryString } = useQueryParams();
-
   useEffect(() => {
     setItems([]);
   }, [search]);

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

@@ -18,6 +18,7 @@ export type ContractTabsLayoutProps = {
     image?: ReactNode;
     name: string;
     role?: string;
+    id?: string;
   };
   loading?: boolean;
   children?: ReactNode;

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.48";

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: "",
     });
   };
 

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

@@ -0,0 +1,20 @@
+import { useBuyerPortal } from "../../../shared/hooks";
+import {
+  CreateUserDrawer,
+  type CreateUserDrawerProps,
+} from "../CreateUserDrawer/CreateUserDrawer";
+import { CreateUserDrawerWithUsername } from "../CreateUserDrawerWithUsername/CreateUserDrawerWithUsername";
+
+export type CreateUserDrawerSelectorProps = CreateUserDrawerProps;
+
+export const CreateUserDrawerSelector = (
+  props: CreateUserDrawerSelectorProps
+) => {
+  const { featureFlags } = useBuyerPortal();
+
+  if (featureFlags?.enableUsernameCreation) {
+    return <CreateUserDrawerWithUsername {...props} />;
+  }
+
+  return <CreateUserDrawer {...props} />;
+};