@vtex/faststore-plugin-buyer-portal 1.0.32 → 1.0.34

package/package.json

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

package/public/buyer-portal-icons.svg

@@ -234,4 +234,17 @@
       d="M17.4643 5.99996L15.5245 6.51972C16.2578 8.40957 16.1575 10.6033 15.0625 12.4999C13.1275 15.8514 8.85184 16.9971 5.50032 15.0621C2.1488 13.1271 1.00314 8.85143 2.93814 5.49992C4.03314 3.60332 5.88283 2.41957 7.88249 2.09606L7.36639 0.169961C4.8613 0.628903 2.57609 2.12701 1.20609 4.49992C-1.27891 8.80406 0.196175 14.3091 4.50032 16.7941C8.80447 19.2791 14.3096 17.8041 16.7946 13.4999C18.1646 11.127 18.3193 8.3989 17.4643 5.99996Z"
       fill="currentColor" />
   </symbol>
+
+  <symbol id="DriveFileMove" xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 12" fill="none">
+    <path
+      d="M8.125 7.75L6.9375 8.9375L8 10L11 7L8 4L6.9375 5.0625L8.125 6.25H5V7.75H8.125ZM1.5 12C1.09722 12 0.746528 11.8507 0.447917 11.5521C0.149306 11.2535 0 10.9028 0 10.5V1.5C0 1.0875 0.149306 0.734376 0.447917 0.440626C0.746528 0.146876 1.09722 0 1.5 0H6L8 2H14.5C14.9125 2 15.2656 2.14688 15.5594 2.44063C15.8531 2.73438 16 3.0875 16 3.5V10.5C16 10.9028 15.8531 11.2535 15.5594 11.5521C15.2656 11.8507 14.9125 12 14.5 12H1.5ZM1.5 10.5H14.5V3.5H7.375L5.375 1.5H1.5V10.5Z"
+      fill="currentColor" />
+  </symbol>
+
+  <symbol id="Trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 18" fill="none">
+    <path
+      d="M3 18C2.45 18 1.97917 17.8042 1.5875 17.4125C1.19583 17.0208 1 16.55 1 16V3H0V1H5V0H11V1H16V3H15V16C15 16.55 14.8042 17.0208 14.4125 17.4125C14.0208 17.8042 13.55 18 13 18H3ZM13 3H3V16H13V3ZM5 14H7V5H5V14ZM9 14H11V5H9V14Z"
+      fill="currentColor" />
+  </symbol>
 </svg>

package/src/features/addresses/types/index.ts

@@ -1 +1 @@
-export { AddressData, AddressSummaryData } from "./AddressData";
+export type { AddressData, AddressSummaryData } from "./AddressData";

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

@@ -10,7 +10,7 @@ export {
 
 export {
   updateContractStatusService,
-  UpdateContractStatusServiceProps,
+  type UpdateContractStatusServiceProps,
 } from "./update-contract-status.service";
 
 export { getContractDetailsService } from "./get-contract-details.service";

package/src/features/org-units/clients/OrgUnitClient.ts

@@ -95,11 +95,15 @@ export class OrgUnitClient extends Client {
   }
 
   deleteOrgUnit(orgUnitId: string, cookie: string) {
-    return this.delete(`units/${orgUnitId}`, {
-      headers: {
-        Cookie: cookie,
-      },
-    });
+    return this.delete(
+      `units/${orgUnitId}`,
+      {},
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
   }
 
   getOrgUnitChildren(orgUnitId: string, cookie: string) {

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

@@ -5,17 +5,15 @@ import { useRouter } from "next/router";
 import { useDeleteOrgUnit } from "../../hooks/useDeleteOrgUnit";
 import { OrgUnitsHierarchyTree } from "..";
 import { useChildrenOrgUnits } from "../../hooks";
-import { useUsersByOrgUnit } from "../../../users/hooks";
 import {
   BasicDrawer,
   ErrorMessage,
-  Icon,
   InputText,
-  Tab,
   type BasicDrawerProps,
 } from "../../../shared/components";
 import { useState } from "react";
 
+//TODO: rever aqui quando acabar a integracao e users
 export type DeleteOrgUnitDrawerProps = Omit<BasicDrawerProps, "children"> & {
   id: string;
   name: string;

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

@@ -7,6 +7,7 @@ import {
 } from "..";
 import { useDrawerProps } from "../../../shared/hooks";
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
+import { CreateUserDrawer } from "../../../users/components";
 
 export type OrgUnitsDropdownMenuProps = {
   id: string;
@@ -23,14 +24,29 @@ export const OrgUnitsDropdownMenu = ({
   onCreate,
   isComplete = true,
 }: OrgUnitsDropdownMenuProps) => {
-  const { open: openCreateDrawerProps, ...createDrawerProps } =
-    useDrawerProps();
+  const {
+    open: openCreateDrawerProps,
+    isOpen: isCreateDrawerOpen,
+    ...createDrawerProps
+  } = useDrawerProps();
 
-  const { open: openDeleteDrawerProps, ...deleteDrawerProps } =
-    useDrawerProps();
+  const {
+    open: openDeleteDrawerProps,
+    isOpen: isDeleteDrawerOpen,
+    ...deleteDrawerProps
+  } = useDrawerProps();
 
-  const { open: openUpdateDrawerProps, ...updateDrawerProps } =
-    useDrawerProps();
+  const {
+    open: openUpdateDrawerProps,
+    isOpen: isUpdateDrawerOpen,
+    ...updateDrawerProps
+  } = useDrawerProps();
+
+  const {
+    open: openCreateUserDrawerProps,
+    isOpen: isCreateUserDrawerOpen,
+    ...createUserDrawerProps
+  } = useDrawerProps();
 
   const sizeProps = { width: 20, height: 20 };
 
@@ -44,7 +60,7 @@ export const OrgUnitsDropdownMenu = ({
         <BasicDropdownMenu.Separator />
         {isComplete && (
           <>
-            <DropdownItem>
+            <DropdownItem onClick={openCreateUserDrawerProps}>
               <Icon name="Profile" {...sizeProps} />
               Add User
             </DropdownItem>
@@ -65,20 +81,39 @@ export const OrgUnitsDropdownMenu = ({
           Delete
         </DropdownItem>
       </BasicDropdownMenu>
-      <CreateOrgUnitDrawer
-        readonly
-        initialParentOrgUnit={{ id, name }}
-        onCreate={onCreate}
-        {...createDrawerProps}
-      />
-      <DeleteOrgUnitDrawer id={id} name={name} {...deleteDrawerProps} />
-      <UpdateOrgUnitDrawer
-        readonly
-        id={id}
-        name={name}
-        onSuccess={onUpdate}
-        {...updateDrawerProps}
-      />
+      {isCreateDrawerOpen && (
+        <CreateOrgUnitDrawer
+          readonly
+          initialParentOrgUnit={{ id, name }}
+          onCreate={onCreate}
+          {...createDrawerProps}
+          isOpen={isCreateDrawerOpen}
+        />
+      )}
+      {isDeleteDrawerOpen && (
+        <DeleteOrgUnitDrawer
+          id={id}
+          name={name}
+          {...deleteDrawerProps}
+          isOpen={isDeleteDrawerOpen}
+        />
+      )}
+      {isUpdateDrawerOpen && (
+        <UpdateOrgUnitDrawer
+          readonly
+          id={id}
+          name={name}
+          onSuccess={onUpdate}
+          {...updateDrawerProps}
+          isOpen={isUpdateDrawerOpen}
+        />
+      )}
+      {isCreateUserDrawerOpen && (
+        <CreateUserDrawer
+          {...createUserDrawerProps}
+          isOpen={isCreateUserDrawerOpen}
+        />
+      )}
     </>
   );
 };

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

@@ -51,7 +51,7 @@ export const UpdateOrgUnitDrawer = ({
       ),
     });
     close();
-    onSuccess?.() ?? router.reload();
+    onSuccess ? onSuccess() : router.reload();
   };
 
   const { updateOrgUnit, isUpdateOrgUnitLoading } = useUpdateOrgUnit({

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

@@ -4,3 +4,5 @@ export { useOrgUnitStructure } from "./useOrgUnitStructure";
 export { useRootOrgUnitByCustomerId } from "./useRootOrgUnitByCustomer";
 export { useUpdateOrgUnit } from "./useUpdateOrgUnit";
 export { useChildrenOrgUnits } from "./useChildrenOrgUnits";
+export { useOrgUnitByUser } from "./useOrgUnitByUser";
+export { useSearchOrgUnits } from "./useSearchOrgUnits";

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

@@ -0,0 +1,19 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { getOrgUnitByUserIdService } from "../services";
+
+export const useOrgUnitByUser = (
+  userId: string,
+  options?: QueryOptions<AwaitedType<typeof getOrgUnitByUserIdService>>
+) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `api/org-unit-by-user-id/${userId}`,
+    ({ cookie }) => getOrgUnitByUserIdService({ cookie, userId }),
+    options
+  );
+  return {
+    orgUnit: data,
+    hasOrgUnitError: error,
+    isOrgUnitLoading: isLoading,
+    refetchOrgUnit: refetch,
+  };
+};

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

@@ -0,0 +1,19 @@
+import { type QueryOptions, useQuery } from "../../shared/hooks";
+import { searchOrgUnistByNameService } from "../services";
+
+export const useSearchOrgUnits = (
+  name: string,
+  options?: QueryOptions<AwaitedType<typeof searchOrgUnistByNameService>>
+) => {
+  const { data, error, isLoading, refetch } = useQuery(
+    `api/serach-org-unit/${name}`,
+    ({ cookie }) => searchOrgUnistByNameService({ name }, cookie),
+    options
+  );
+  return {
+    searchedOrgUnits: data,
+    hasSearchedOrgUnitsError: error,
+    isSearchedOrgUnitsLoading: isLoading,
+    refetchSearchedOrgUnits: refetch,
+  };
+};

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

@@ -65,7 +65,7 @@ export const OrgUnitsLayout = ({ data, search }: OrgUnitsLayoutProps) => {
         {data && (
           <CreateOrgUnitDrawer
             readonly
-            initialParentOrgUnit={currentOrgUnit ?? undefined}
+            initialParentOrgUnit={currentOrgUnit}
             {...drawerProps}
           />
         )}

package/src/features/org-units/services/search-org-units-by-name.service.ts

@@ -9,6 +9,13 @@ export const searchOrgUnistByNameService = async (
   { name }: SearchOrgUnistByNameServiceProps,
   cookie: string
 ): Promise<{ organizationalUnits: OrgUnitData[]; total: number }> => {
+  if (!name) {
+    return {
+      organizationalUnits: [],
+      total: 0,
+    };
+  }
+
   const { orgUnits } = await orgUnitClient.searchOrgUnitsByName(name, cookie);
 
   return {

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

@@ -6,6 +6,7 @@ interface RequestConfig<Input = never> {
   data?: Input;
   headers?: Record<string, string>;
   params?: Record<string, string | number | boolean>;
+  ignoreContentType?: boolean;
 }
 
 class Client {
@@ -21,11 +22,12 @@ class Client {
     data,
     headers = {},
     params = {},
+    ignoreContentType = false,
   }: RequestConfig<Input>): Promise<Return> {
     const config: RequestInit = {
       method,
       headers: {
-        "Content-Type": "application/json",
+        ...(ignoreContentType ? {} : { "Content-Type": "application/json" }),
         ...headers,
       },
     };
@@ -100,11 +102,17 @@ class Client {
     });
   }
 
-  delete<Return>(
+  delete<Return, Input>(
     url: string,
-    config: Partial<RequestConfig<never>> = {}
+    data: Input,
+    config: Partial<RequestConfig<Input>> = {}
   ): Promise<Return> {
-    return this.request<Return>({ url, method: "DELETE", ...config });
+    return this.request<Return, Input>({
+      url,
+      method: "DELETE",
+      data,
+      ...config,
+    });
   }
 }
 

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

@@ -8,11 +8,12 @@ import {
   type ReactNode,
   createContext,
   useContext,
+  use,
+  useCallback,
 } from "react";
-import { createPortal } from "react-dom";
-import { useAutocompletePosition } from "./useAutocompletePosition";
 import { Icon } from "../Icon";
 import { AutocompleteDropdownItem } from "./AutocompleteDropdownItem";
+import { useAutocompletePosition } from "..";
 
 export type AutocompleteDropdownContextProps = {
   focusedItemIndex: number;
@@ -48,10 +49,10 @@ export const AutocompleteDropdown = <T,>({
   options = [],
   onChange,
   renderOption,
-  onInput,
   disabled,
   onConfirmKeyPress,
   hasError,
+  value,
   ...props
 }: AutocompleteDropdownProps<T>) => {
   const [isOpened, setIsOpened] = useState(false);
@@ -60,49 +61,66 @@ export const AutocompleteDropdown = <T,>({
 
   const autocompleteMenuRef = useRef<HTMLDivElement>(null);
   const wrapperAutocompleteRef = useRef<HTMLDivElement>(null);
-
   const positionStyle = useAutocompletePosition(
     "left",
     isOpened,
     wrapperAutocompleteRef
   );
-
   const handleClick = () => {
     !disabled && setIsOpened((old) => !old);
   };
 
+  const scrollToItem = (index: number) => {
+    setFocusedItemIndex(index);
+    const target = autocompleteMenuRef.current?.querySelector(
+      `[data-fs-bp-autocomplete-dropdown-option-index='${index}']`
+    ) as HTMLElement;
+    if (target) {
+      target.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  };
+
   const handleBackdropKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     if (event.defaultPrevented || event.key === " ") {
       return;
     }
 
-    event.preventDefault();
-
     switch (event.key) {
+      case "Escape":
+        event.preventDefault();
+        event.stopPropagation();
+        setIsOpened(false);
+        break;
       case "Enter":
+        event.stopPropagation();
         onConfirmKeyPress?.(options[focusedItemIndex]);
         break;
-      case "ArrowDown":
+      case "ArrowDown": {
         focusedItemIndex < options.length - 1 &&
-          setFocusedItemIndex(focusedItemIndex + 1);
+          scrollToItem(focusedItemIndex + 1);
+
         break;
-      case "ArrowUp":
-        focusedItemIndex > 0 && setFocusedItemIndex(focusedItemIndex - 1);
+      }
+      case "ArrowUp": {
+        focusedItemIndex > 0 && scrollToItem(focusedItemIndex - 1);
         break;
-      case "Home":
-        setFocusedItemIndex(0);
+      }
+      case "Home": {
+        scrollToItem(0);
         break;
-      case "End":
-        setFocusedItemIndex(options.length - 1);
+      }
+      case "End": {
+        scrollToItem(options.length - 1);
         break;
+      }
       default:
         break;
     }
   };
 
-  const close = () => {
+  const close = useCallback(() => {
     setIsOpened(false);
-  };
+  }, []);
 
   useEffect(() => {
     const event = (e: MouseEvent) => {
@@ -125,7 +143,13 @@ export const AutocompleteDropdown = <T,>({
       document.removeEventListener("click", event);
       overlayRef.removeEventListener("click", event);
     };
-  }, []);
+  }, [close]);
+
+  useEffect(() => {
+    if (value) {
+      setIsOpened(true);
+    }
+  }, [value]);
 
   return (
     <AutocompleteDropdownContext.Provider
@@ -140,6 +164,11 @@ export const AutocompleteDropdown = <T,>({
         data-fs-bp-autocomplete-dropdown-only-select={!onChange}
         ref={wrapperAutocompleteRef}
         onClick={handleClick}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            handleClick();
+          }
+        }}
       >
         <InputText
           label={label}
@@ -148,25 +177,22 @@ export const AutocompleteDropdown = <T,>({
           onChange={onChange}
           disabled={disabled}
           hasError={hasError}
+          value={value}
+          onFocus={() => setIsOpened(true)}
           {...props}
         />
 
-        {isOpened
-          ? createPortal(
-              <div
-                data-fs-bp-autocomplete-dropdown-menu
-                style={positionStyle}
-                ref={autocompleteMenuRef}
-              >
-                <ul>
-                  {options?.map((option, index) =>
-                    renderOption?.(option, index)
-                  )}
-                </ul>
-              </div>,
-              document.body
-            )
-          : null}
+        {isOpened ? (
+          <div
+            style={{ width: positionStyle.width }}
+            data-fs-bp-autocomplete-dropdown-menu
+            ref={autocompleteMenuRef}
+          >
+            <ul>
+              {options?.map((option, index) => renderOption?.(option, index))}
+            </ul>
+          </div>
+        ) : null}
       </div>
     </AutocompleteDropdownContext.Provider>
   );

package/src/features/shared/components/AutocompleteDropdown/AutocompleteDropdownItem.tsx

@@ -22,6 +22,7 @@ export const AutocompleteDropdownItem = ({
   return (
     <li
       data-fs-bp-autocomplete-dropdown-option
+      data-fs-bp-autocomplete-dropdown-option-index={index}
       data-fs-bp-autocomplete-dropdown-option-focused={
         focusedItemIndex === index
       }

package/src/features/shared/components/AutocompleteDropdown/autocomplete-dropdown.scss

@@ -13,6 +13,9 @@
   padding: var(--fs-spacing-1) 0;
   background-color: #fff;
   box-shadow: 0rem 0.5rem 0.625rem 0rem #00000014;
+  max-height: 15rem;
+  overflow-y: auto;
+  position: absolute;
 
   border-radius: calc(var(--fs-border-radius) * 2);
 

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

@@ -1,5 +1,5 @@
 import { SlideOver } from "@faststore/ui";
-import { DrawerProps } from "../../hooks/useDrawerProps";
+import type { DrawerProps } from "../../hooks/useDrawerProps";
 import { BasicDrawerHeading } from "./BasicDrawerHeading";
 import { BasicDrawerBody } from "./BasicDrawerBody";
 import { BasicDrawerFooter } from "./BasicDrawerFooter";

package/src/features/shared/components/BasicDrawer/BasicDrawerHeading.tsx

@@ -1,10 +1,10 @@
-import { ComponentProps } from "react";
+import type { ComponentProps } from "react";
 import { Icon } from "../Icon";
 
 export type BasicDrawerHeadingProps = {
   title: React.ReactNode;
   onClose?: () => void;
-} & ComponentProps<"header">;
+} & Omit<ComponentProps<"header">, "title">;
 
 export const BasicDrawerHeading = ({
   title,
@@ -14,7 +14,11 @@ export const BasicDrawerHeading = ({
   return (
     <header data-fs-bp-basic-drawer-heading {...props}>
       <h2 data-fs-bp-basic-drawer-heading-title>{title}</h2>
-      <button data-fs-bp-basic-drawer-heading-close-button onClick={onClose}>
+      <button
+        type="button"
+        data-fs-bp-basic-drawer-heading-close-button
+        onClick={onClose}
+      >
         <Icon
           data-fs-bp-basic-drawer-heading-close-icon
           name="Close"

package/src/features/shared/components/BasicDrawer/basic-drawer.scss

@@ -45,6 +45,16 @@
     flex: 1;
     min-height: auto;
 
+    p {
+      font-weight: 400;
+      font-size: var(--fs-text-size-1);
+      line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+    }
+    a {
+      color: #0366dd;
+      text-decoration: none;
+    }
+
     [data-fs-bp-basic-drawer-body-wrapper] {
       padding: var(--fs-spacing-8)
         calc(var(--fs-spacing-8) + var(--fs-spacing-0)) 0

package/src/features/shared/components/BasicDropdownMenu/basic-dropdown-menu.scss

@@ -3,6 +3,7 @@
     width: auto;
     background-color: #fff;
     padding: var(--fs-spacing-1) 0;
+    min-width: 15rem;
 
     [data-fs-dropdown-item] {
       display: flex;
@@ -22,6 +23,15 @@
       [data-fs-toggle] {
         margin-left: auto;
       }
+
+      &:hover {
+        background-color: #f5f5f5;
+        color: #000;
+
+        svg {
+          color: #000;
+        }
+      }
     }
 
     [data-fs-bp-basic-dropdown-menu-separator] {

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

@@ -4,7 +4,7 @@ import type { OrgUnitBasicData } from "../../../org-units/types";
 
 export type BuyerPortalContextType = {
   clientContext: ClientContext;
-  currentOrgUnit?: OrgUnitBasicData | null;
+  currentOrgUnit?: OrgUnitBasicData;
 };
 
 export const BuyerPortalContext = createContext<
@@ -13,7 +13,7 @@ export const BuyerPortalContext = createContext<
 
 export type BuyerPortalProviderProps = {
   clientContext: ClientContext;
-  currentOrgUnit?: OrgUnitBasicData | null;
+  currentOrgUnit?: OrgUnitBasicData;
   children: ReactNode;
 };
 

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

@@ -1,11 +1,11 @@
 export { CustomerSwitchDrawer } from "./CustomerSwitchDrawer";
 export {
   CustomerSwitchOption,
-  CustomerSwitchOptionProps,
+  type CustomerSwitchOptionProps,
 } from "./CustomerSwitchOption";
 export {
   CustomerSwitchOptionsList,
-  CustomerSwitchOptionsListProps,
+  type CustomerSwitchOptionsListProps,
 } from "./CustomerSwitchOptionsList";
 export {
   CustomerSwitchSearch,

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

@@ -7,6 +7,8 @@ import {
   useImperativeHandle,
   useRef,
   useState,
+  type KeyboardEvent,
+  type MouseEvent,
 } from "react";
 
 export type InputTextProps = ComponentProps<"input"> & {
@@ -44,7 +46,12 @@ export const InputText = forwardRef<HTMLInputElement, InputTextProps>(
 
     useImperativeHandle(ref, () => inputRef?.current!);
 
-    const handleWrapperClick = () => {
+    const handleWrapperClick = (
+      event?:
+        | MouseEvent<HTMLLabelElement, globalThis.MouseEvent>
+        | KeyboardEvent<HTMLLabelElement>
+    ) => {
+      event?.preventDefault();
       !disabled && setIsFocused(true);
     };
 
@@ -61,9 +68,14 @@ export const InputText = forwardRef<HTMLInputElement, InputTextProps>(
         data-fs-bp-input-text-is-disabled={disabled}
         data-fs-bp-input-text-has-error={hasError}
         {...wrapperProps}
-        onClick={handleWrapperClick}
+        onClick={() => handleWrapperClick()}
       >
-        <label data-fs-bp-input-text-label htmlFor={id}>
+        <label
+          data-fs-bp-input-text-label
+          htmlFor={id}
+          onClick={(event) => handleWrapperClick(event)}
+          onKeyDown={handleWrapperClick}
+        >
           {label}
         </label>
         {icon && <span data-fs-bp-input-text-icon>{icon}</span>}
@@ -75,6 +87,7 @@ export const InputText = forwardRef<HTMLInputElement, InputTextProps>(
           ref={inputRef}
           onBlur={handleBlur}
           disabled={disabled}
+          onFocus={() => setIsFocused(true)}
         />
       </div>
     );