@vtex/faststore-plugin-buyer-portal 1.0.25 → 1.0.26

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
-  "dependencies": {},
+  "dependencies": {
+    "@types/react-dom": "^19.0.3",
+    "react-dom": "^19.0.0"
+  },
   "devDependencies": {
     "@faststore/core": "^3.0.147",
     "@faststore/ui": "^3.0.147",
     "@types/react": "^18.2.42",
-    "next": "13.5.6",
+    "next": "13.5.7",
     "typescript": "4.7.3"
   },
   "peerDependencies": {

package/plugin.config.js

@@ -5,12 +5,16 @@ module.exports = {
       path: "/buyer-portal/[[...contractMode]]",
       appLayout: false,
     },
+    "org-unit-details": {
+      path: "/org-unit/[orgUnitId]",
+      appLayout: false,
+    },
     "org-units": {
-      path: "/org-units",
+      path: "/org-units/[[...orgUnitId]]",
       appLayout: false,
     },
     contracts: {
-      path: "/contracts",
+      path: "/contracts/[[...orgUnitId]]",
       appLayout: false,
     },
     addresses: {
@@ -18,7 +22,7 @@ module.exports = {
       appLayout: false,
     },
     "address-details": {
-      path: "/address/[id]",
+      path: "/address/[addressId]",
       appLayout: false,
     },
     users: {
@@ -26,7 +30,7 @@ module.exports = {
       appLayout: false,
     },
     "user-details": {
-      path: "/user/[id]",
+      path: "/user/[userId]",
       appLayout: false,
     },
     profile: {

package/public/buyer-portal-icons.svg

@@ -62,6 +62,13 @@
       stroke-linejoin="round"></polyline>
   </symbol>
 
+  <symbol id="Check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 10"
+    fill="currentColor">
+    <path
+      d="M4.10417 9.4375L0.0625 5.41667L1.125 4.33333L4.10417 7.3125L10.875 0.5625L11.9375 1.625L4.10417 9.4375Z"
+      fill="currentColor" />
+  </symbol>
+
 
   <symbol
     id="Delete" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
@@ -183,6 +190,16 @@
       d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z" />
   </symbol>
 
+  <symbol
+    id="Close"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+    fill="none">
+    <path
+      d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
+      fill="currentColor" />
+  </symbol>
+
 
   <symbol
     id="OpenInNew"
@@ -216,4 +233,11 @@
     <path
       d="M154-128q-43.72 0-74.86-31.14Q48-190.27 48-234v-492q0-43.72 31.14-74.86T154-832h220l106 106h326q43.72 0 74.86 31.14T912-620v386q0 43.73-31.14 74.86Q849.72-128 806-128H154Zm339.67-136 104.16-79.68L702-264l-38-130 104-84H638l-40-126-40 126H428l104.17 84.23L493.67-264Z" />
   </symbol>
+
+  <symbol id="LoadingIndicator" xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 18 18" fill="none">
+    <path
+      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>
 </svg>

package/src/clients/BuyerPortalClient.ts

@@ -0,0 +1,128 @@
+import type { AddressData } from "../types/AddressData";
+import type { ContractData } from "../types/ContractData";
+import type { OrgUnitData } from "../types/OrgUnitsData";
+import type { OrgUnitSummaryData } from "../types/OrgUnitSummaryData";
+import { getApiUrl } from "../utils/api";
+import Client from "./Client";
+
+class BuyerPortalClient extends Client {
+  constructor() {
+    super(getApiUrl());
+  }
+
+  // Contracts
+  getContractsByCustomerId(customerId: string, cookie: string) {
+    return this.get<{ data: { contracts: ContractData[]; total: number } }>(
+      `contracts/${customerId}`,
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  getContracts(
+    cookie: string,
+    params?: {
+      salesRepresentative?: string;
+      isActive?: boolean;
+      page?: number;
+      sort?: "Asc" | "Desc";
+    }
+  ) {
+    return this.get<ContractData[]>("contracts/filter", {
+      headers: {
+        Cookie: cookie,
+      },
+      params,
+    });
+  }
+
+  //Addresses
+  getAddressesByCustomerId(customerId: string, cookie: string) {
+    return this.get<{ addresses: AddressData[] }>(`addresses/${customerId}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  // Users
+  // getUsersByOrgUnitId(orgUnitId: string, cookie: string) {
+  //   return this.get<ContractData[]>(`getUsers/${orgUnitId}`, {
+  //     headers: {
+  //       Cookie: cookie,
+  //     },
+  //   });
+  // }
+
+  //Org Units
+  getOrgUnitSummary(id: string, cookie: string) {
+    return this.get<OrgUnitSummaryData>(`units/summary/${id}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  getRootOrgUnitByCustomerId(customerId: string, cookie: string) {
+    return this.get<{ organizationalUnits: OrgUnitData[]; total: number }>(
+      `units/root/${customerId}`,
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  createOrgUnit(
+    {
+      parentId,
+      ...data
+    }: { name: string; parentId: string | null; customerId: string[] },
+    cookie: string
+  ) {
+    return this.post(
+      "units",
+      { ...data, ...(parentId && { parentId }) },
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  updateOrgUnit(
+    { id, ...data }: { name?: string; id: string },
+    cookie: string
+  ) {
+    return this.patch(`units/${id}`, data, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  deleteOrgUnit(orgUnitId: string, cookie: string) {
+    return this.delete(`units/${orgUnitId}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  // getChildrenByOrgUnitId(orgUnitId: string, cookie: string) {
+  //   return this.get<ContractData[]>(`getChildren/${orgUnitId}`, {
+  //     headers: {
+  //       Cookie: cookie,
+  //     },
+  //   });
+  // }
+}
+
+const buyerPortalClient = new BuyerPortalClient();
+
+export { buyerPortalClient };

package/src/clients/Client.ts

@@ -0,0 +1,95 @@
+import { toQueryParams } from "../utils/toQueryParams";
+
+interface RequestConfig<T> {
+  url: string;
+  method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
+  data?: T;
+  headers?: Record<string, string>;
+  params?: Record<string, string | number | boolean>;
+}
+
+class Client {
+  private baseURL: string;
+
+  constructor(baseURL = "") {
+    this.baseURL = baseURL;
+  }
+
+  async request<T>({
+    url,
+    method,
+    data,
+    headers = {},
+    params = {},
+  }: RequestConfig<T>): Promise<T> {
+    const config: RequestInit = {
+      method,
+      headers: {
+        "Content-Type": "application/json",
+        ...headers,
+      },
+    };
+
+    const paramsString = toQueryParams(params);
+
+    if (data) {
+      config.body = JSON.stringify(data);
+    }
+
+    try {
+      const response = await fetch(this.baseURL + url + paramsString, config);
+      let responseData: T | null = null;
+
+      const contentType = response.headers.get("Content-Type");
+      if (contentType?.includes("application/json")) {
+        responseData = await response.json();
+      }
+
+      if (!response.ok) {
+        throw new Error(
+          responseData
+            ? (responseData as unknown as { message: string }).message
+            : "Request failed"
+        );
+      }
+
+      return responseData as T;
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }
+
+  get<T>(url: string, config: Partial<RequestConfig<T>> = {}): Promise<T> {
+    return this.request<T>({ url, method: "GET", ...config });
+  }
+
+  post<T>(
+    url: string,
+    data: T,
+    config: Partial<RequestConfig<T>> = {}
+  ): Promise<T> {
+    return this.request<T>({ url, method: "POST", data, ...config });
+  }
+
+  put<T>(
+    url: string,
+    data: T,
+    config: Partial<RequestConfig<T>> = {}
+  ): Promise<T> {
+    return this.request<T>({ url, method: "PUT", data, ...config });
+  }
+
+  patch<T>(
+    url: string,
+    data: T,
+    config: Partial<RequestConfig<T>> = {}
+  ): Promise<T> {
+    return this.request<T>({ url, method: "PATCH", data, ...config });
+  }
+
+  delete<T>(url: string, config: Partial<RequestConfig<T>> = {}): Promise<T> {
+    return this.request<T>({ url, method: "DELETE", ...config });
+  }
+}
+
+export default Client;

package/src/components/AddressLine/address-line.scss

@@ -27,8 +27,8 @@
 
   [data-fs-addresses-line-icon] {
     color: #0068d7;
-    margin: 10px;
-    margin-right: 20px;
+    margin: calc(var(--fs-spacing-2) - var(--fs-spacing-0));
+    margin-right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
   }
 
   [data-fs-addresses-line-name] {
@@ -52,9 +52,9 @@
 
   [data-fs-addresses-dropdown-trigger] {
     cursor: pointer;
-    height: 40px;
-    width: 40px;
-    border-radius: 1000px;
+    height: var(--fs-spacing-6);
+    width: var(--fs-spacing-6);
+    border-radius: var(--fs-border-radius-pill);
     &:hover {
       background-color: #e0e0e0;
     }

package/src/components/AddressesCard/AddressesCard.tsx

@@ -8,7 +8,7 @@ import {
 import { Tag } from "../Tag/Tag";
 import { AddressData } from "../../types/AddressData";
 import { Icon } from "../Icon";
-import { HomeCard } from "../HomeCard/HomeCard";
+import { BasicCard } from "../BasicCard/BasicCard";
 
 type AddressesCardProps = {
   addresses: AddressData[];
@@ -16,7 +16,7 @@ type AddressesCardProps = {
 
 export default function AddressesCard({ addresses }: AddressesCardProps) {
   return (
-    <HomeCard
+    <BasicCard
       footerLink="/addresses"
       footerMessage="Manage addresses"
       title="Addresses"
@@ -74,7 +74,7 @@ export default function AddressesCard({ addresses }: AddressesCardProps) {
                         />{" "}
                         Delete
                       </DropdownItem>
-                      <DropdownItem>
+                      <DropdownItem dismissOnClick={false}>
                         <div data-fs-dropdown-active-item>
                           <div data-fs-dropdown-active-item-label>
                             <Icon
@@ -99,6 +99,6 @@ export default function AddressesCard({ addresses }: AddressesCardProps) {
             </div>
           );
         })}
-    </HomeCard>
+    </BasicCard>
   );
 }

package/src/components/AutocompleteDropdown/AutocompleteDropdown.tsx

@@ -0,0 +1,175 @@
+import { InputText } from "../InputText/InputText";
+import {
+  useRef,
+  useState,
+  KeyboardEvent,
+  ComponentProps,
+  useEffect,
+  ReactNode,
+  createContext,
+  useContext,
+} from "react";
+import { createPortal } from "react-dom";
+import { useAutocompletePosition } from "./useAutocompletePosition";
+import { Icon } from "../Icon";
+import { AutocompleteDropdownItem } from "./AutocompleteDropdownItem";
+
+export type AutocompleteDropdownContextProps = {
+  focusedItemIndex: number;
+  setFocusedItemIndex: (index: number) => void;
+  close: () => void;
+};
+
+const AutocompleteDropdownContext =
+  createContext<AutocompleteDropdownContextProps | null>(null);
+
+export const useAutocompleteDropdownContext = () => {
+  const context = useContext(AutocompleteDropdownContext);
+
+  if (!context) {
+    throw new Error(
+      "AutocompleteDropdown compound components cannot be rendered outside the AutocompleteDropdown component"
+    );
+  }
+
+  return context;
+};
+
+export type AutocompleteDropdownProps<T> = ComponentProps<"input"> & {
+  label: string;
+  options?: T[];
+  renderOption?: (option: T, index: number) => ReactNode;
+  onConfirmKeyPress?: (option: T) => void;
+  hasError?: boolean;
+};
+
+export const AutocompleteDropdown = <T,>({
+  label,
+  options = [],
+  onChange,
+  renderOption,
+  onInput,
+  disabled,
+  onConfirmKeyPress,
+  hasError,
+  ...props
+}: AutocompleteDropdownProps<T>) => {
+  const [isOpened, setIsOpened] = useState(false);
+
+  const [focusedItemIndex, setFocusedItemIndex] = useState(0);
+
+  const autocompleteMenuRef = useRef<HTMLDivElement>(null);
+  const wrapperAutocompleteRef = useRef<HTMLDivElement>(null);
+
+  const positionStyle = useAutocompletePosition(
+    "left",
+    isOpened,
+    wrapperAutocompleteRef
+  );
+
+  const handleClick = () => {
+    !disabled && setIsOpened((old) => !old);
+  };
+
+  const handleBackdropKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.defaultPrevented || event.key === " ") {
+      return;
+    }
+
+    event.preventDefault();
+
+    switch (event.key) {
+      case "Enter":
+        onConfirmKeyPress?.(options[focusedItemIndex]);
+        break;
+      case "ArrowDown":
+        focusedItemIndex < options.length - 1 &&
+          setFocusedItemIndex(focusedItemIndex + 1);
+        break;
+      case "ArrowUp":
+        focusedItemIndex > 0 && setFocusedItemIndex(focusedItemIndex - 1);
+        break;
+      case "Home":
+        setFocusedItemIndex(0);
+        break;
+      case "End":
+        setFocusedItemIndex(options.length - 1);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const close = () => {
+    setIsOpened(false);
+  };
+
+  useEffect(() => {
+    const event = (e: MouseEvent) => {
+      const target = e.target as Node;
+      const wasSomeItemClicked =
+        autocompleteMenuRef.current === target ||
+        autocompleteMenuRef.current?.contains(target) ||
+        wrapperAutocompleteRef.current?.contains(target);
+      !wasSomeItemClicked && close();
+    };
+
+    const overlayRef = document.querySelector(
+      "[data-fs-overlay]"
+    ) as HTMLElement;
+
+    document.addEventListener("click", event);
+    overlayRef?.addEventListener("click", event);
+
+    return () => {
+      document.removeEventListener("click", event);
+      overlayRef.removeEventListener("click", event);
+    };
+  }, []);
+
+  return (
+    <AutocompleteDropdownContext.Provider
+      value={{
+        close,
+        focusedItemIndex,
+        setFocusedItemIndex: (index: number) => setFocusedItemIndex(index),
+      }}
+    >
+      <div
+        data-fs-bp-autocomplete-dropdown
+        data-fs-bp-autocomplete-dropdown-only-select={!onChange}
+        ref={wrapperAutocompleteRef}
+        onClick={handleClick}
+      >
+        <InputText
+          label={label}
+          onKeyDown={handleBackdropKeyDown}
+          icon={<Icon name="ArrowDropDown" width={20} height={20} />}
+          onChange={onChange}
+          disabled={disabled}
+          hasError={hasError}
+          {...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}
+      </div>
+    </AutocompleteDropdownContext.Provider>
+  );
+};
+
+AutocompleteDropdown.Item = AutocompleteDropdownItem;

package/src/components/AutocompleteDropdown/AutocompleteDropdownItem.tsx

@@ -0,0 +1,39 @@
+import { ComponentProps, ReactNode } from "react";
+import { useAutocompleteDropdownContext } from "./AutocompleteDropdown";
+
+export type AutocompleteDropdownItemProps = ComponentProps<"li"> & {
+  isSelected: boolean;
+  children: ReactNode;
+  index: number;
+  closeOnClick?: boolean;
+  key: string | number;
+};
+
+export const AutocompleteDropdownItem = ({
+  isSelected,
+  children,
+  index,
+  onClick,
+  closeOnClick = false,
+  ...props
+}: AutocompleteDropdownItemProps) => {
+  const { focusedItemIndex, setFocusedItemIndex, close } =
+    useAutocompleteDropdownContext();
+  return (
+    <li
+      data-fs-bp-autocomplete-dropdown-option
+      data-fs-bp-autocomplete-dropdown-option-focused={
+        focusedItemIndex === index
+      }
+      data-fs-bp-autocomplete-dropdown-option-selected={isSelected}
+      onMouseEnter={() => setFocusedItemIndex(index)}
+      onClick={(e) => {
+        closeOnClick && close();
+        onClick?.(e);
+      }}
+      {...props}
+    >
+      {children}
+    </li>
+  );
+};

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

@@ -0,0 +1,45 @@
+@import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
+
+[data-fs-bp-autocomplete-dropdown] {
+  &[data-fs-bp-autocomplete-dropdown-only-select="true"] {
+    [data-fs-bp-input-text-input] {
+      caret-color: transparent;
+      background-color: #ffffff;
+    }
+  }
+}
+
+[data-fs-bp-autocomplete-dropdown-menu] {
+  padding: var(--fs-spacing-1) 0;
+  background-color: #fff;
+  box-shadow: 0rem 0.5rem 0.625rem 0rem #00000014;
+
+  border-radius: calc(var(--fs-border-radius) * 2);
+
+  [data-fs-bp-autocomplete-dropdown-option] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+
+    font-size: var(--fs-text-size-1);
+    font-weight: 500;
+    line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+
+    color: #3d3d3d;
+
+    padding: var(--fs-spacing-1) calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+
+    cursor: pointer;
+
+    &[data-fs-bp-autocomplete-dropdown-option-focused="true"] {
+      background-color: #f5f5f5;
+      color: #3d3d3d;
+    }
+
+    &[data-fs-bp-autocomplete-dropdown-option-selected="true"] {
+      color: #0366dd;
+    }
+  }
+}