@vtex/faststore-plugin-buyer-portal 1.3.49 → 1.3.51

package/src/features/product-assortment/components/CollectionsSettingsDrawer/CollectionsSettingsDrawer.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { useUI } from "@faststore/ui";
+
+import {
+  type BasicDrawerProps,
+  SettingsDrawer,
+  createListTypeOptions,
+} from "../../../shared/components";
+import { useSetScopeConfig, SCOPE_KEYS } from "../../../shared/hooks";
+
+export type CollectionsSettingsDrawerProps = Omit<
+  BasicDrawerProps,
+  "children"
+> & {
+  readonly?: boolean;
+};
+
+const COLLECTIONS_LIST_TYPE_OPTIONS = createListTypeOptions("collections");
+
+export const CollectionsSettingsDrawer = ({
+  close,
+  ...otherProps
+}: CollectionsSettingsDrawerProps) => {
+  const { pushToast } = useUI();
+  const router = useRouter();
+
+  const [listType, setListType] = useState<"sync" | "custom">("custom");
+
+  const { setScopeConfig, isSetScopeConfigLoading } = useSetScopeConfig({
+    onSuccess: () => {
+      pushToast({
+        message: "Scope configuration updated successfully",
+        status: "INFO",
+      });
+      close();
+    },
+    onError: () => {
+      pushToast({
+        message: "Failed to update scope configuration",
+        status: "ERROR",
+      });
+    },
+  });
+
+  const handleConfirmClick = () => {
+    setScopeConfig({
+      customerId: router.query.contractId as string,
+      unitId: router.query.orgUnitId as string,
+      scopeName: SCOPE_KEYS.COLLECTIONS,
+      type: listType,
+    });
+  };
+
+  return (
+    <SettingsDrawer
+      title="Collections settings"
+      {...otherProps}
+      close={close}
+      onPrimaryAction={handleConfirmClick}
+      isPrimaryButtonLoading={isSetScopeConfigLoading}
+      scopeName={SCOPE_KEYS.COLLECTIONS}
+      onDismiss={close}
+      data-fs-bp-collections-settings-drawer
+    >
+      <SettingsDrawer.ListType
+        title="List type"
+        name="collections-list-type"
+        value={listType}
+        onChange={setListType}
+        options={COLLECTIONS_LIST_TYPE_OPTIONS}
+      />
+    </SettingsDrawer>
+  );
+};

package/src/features/product-assortment/components/index.tsx

@@ -1,2 +1,6 @@
 export { AddProductAssortmentDrawer } from "./AddProductAssortmentDrawer/AddProductAssortmentDrawer";
 export { AddProductAssortmentDrawerTable } from "./table/AddProductAssortmentDrawerTable";
+export {
+  CollectionsSettingsDrawer,
+  type CollectionsSettingsDrawerProps,
+} from "./CollectionsSettingsDrawer/CollectionsSettingsDrawer";

package/src/features/product-assortment/layouts/ProductAssortmentLayout/ProductAssortmentLayout.tsx

@@ -14,7 +14,10 @@ import {
   usePageItems,
 } from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
-import { AddProductAssortmentDrawer } from "../../components";
+import {
+  AddProductAssortmentDrawer,
+  CollectionsSettingsDrawer,
+} from "../../components";
 import { ProductAssortmentTable } from "../../components/ProductAssortmentTable/ProductAssortmentTable";
 import { useGetProductAssortment } from "../../hooks/useGetProductAssortment";
 import { useGetProductAssortmentFromContract } from "../../hooks/useGetProductAssortmentFromContract";
@@ -92,6 +95,12 @@ export const ProductAssortmentLayout = ({
     ...addProductAssortmentDrawerProps
   } = useDrawerProps();
 
+  const {
+    open: openCollectionsSettingsDrawer,
+    isOpen: isCollectionsSettingsDrawerOpen,
+    ...collectionsSettingsDrawerProps
+  } = useDrawerProps();
+
   const hasAllAssortment = drawerProductAssortment.items.length === 0;
   const isEmpty = productAssortment.length === 0;
 
@@ -123,6 +132,11 @@ export const ProductAssortmentLayout = ({
       >
         <section data-fs-bp-product-assortment-container>
           <HeaderInside title="Product assortment">
+            <HeaderInside.Button
+              iconName="EditSettings"
+              style={{ backgroundColor: "transparent", color: "#1f1f1f" }}
+              onClick={openCollectionsSettingsDrawer}
+            />
             {!isContractEmpty &&
               (hasAllAssortment ? (
                 <Tooltip
@@ -222,6 +236,13 @@ export const ProductAssortmentLayout = ({
             {...addProductAssortmentDrawerProps}
           />
         )}
+
+        {isCollectionsSettingsDrawerOpen && (
+          <CollectionsSettingsDrawer
+            isOpen={isCollectionsSettingsDrawerOpen}
+            {...collectionsSettingsDrawerProps}
+          />
+        )}
       </ContractTabsLayout>
     </GlobalLayout>
   );

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

@@ -43,6 +43,7 @@ export type AutocompleteDropdownProps<T> = ComponentProps<typeof InputText> & {
   renderOption?: (option: T, index: number) => ReactNode;
   onConfirmKeyPress?: (option: T) => void;
   hasError?: boolean;
+  isLoading?: boolean;
   shouldOpenOnFocus?: boolean;
   shouldShowArrowDown?: boolean;
   shouldCloseOnSelect?: boolean;
@@ -57,6 +58,7 @@ export const AutocompleteDropdown = <T,>({
   disabled,
   onConfirmKeyPress,
   hasError,
+  isLoading = false,
   value,
   helperLabel,
   shouldOpenOnFocus = true,
@@ -138,6 +140,25 @@ export const AutocompleteDropdown = <T,>({
     setIsOpened(false);
   }, []);
 
+  const getIconElement = () => {
+    if (shouldShowArrowDown) {
+      return <Icon name="ArrowDropDown" width={20} height={20} />;
+    }
+
+    if (isLoading) {
+      return (
+        <Icon
+          name="LoadingIndicator"
+          width={20}
+          height={20}
+          data-fs-icon-loading="true"
+        />
+      );
+    }
+
+    return undefined;
+  };
+
   useEffect(() => {
     const event = (e: MouseEvent) => {
       const target = e.target as Node;
@@ -215,11 +236,7 @@ export const AutocompleteDropdown = <T,>({
         <InputText
           label={label}
           onKeyDown={handleBackdropKeyDown}
-          icon={
-            shouldShowArrowDown ? (
-              <Icon name="ArrowDropDown" width={20} height={20} />
-            ) : null
-          }
+          icon={getIconElement()}
           onChange={onChange}
           disabled={disabled}
           hasError={hasError}
@@ -229,7 +246,7 @@ export const AutocompleteDropdown = <T,>({
           {...props}
         />
 
-        {isOpened && options.length > 0 ? (
+        {!isLoading && isOpened && options.length > 0 ? (
           <div
             style={{ width: positionStyle.width }}
             data-fs-bp-autocomplete-dropdown-menu={position}

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

@@ -1,9 +1,9 @@
-@import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
+@import '@faststore/ui/src/components/molecules/Dropdown/styles.scss';
 
 [data-fs-bp-autocomplete-dropdown] {
   position: relative;
-  
-  &[data-fs-bp-autocomplete-dropdown-only-select="true"] {
+
+  &[data-fs-bp-autocomplete-dropdown-only-select='true'] {
     [data-fs-bp-input-text-input] {
       caret-color: transparent;
       background-color: #ffffff;
@@ -11,6 +11,20 @@
   }
 }
 
+[data-fs-icon-loading] {
+  &[data-fs-icon-loading='true'] {
+    @keyframes rotate {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    animation: rotate 2s linear infinite;
+  }
+}
+
 [data-fs-bp-autocomplete-dropdown-menu] {
   padding: var(--fs-spacing-1) 0;
   background-color: #fff;
@@ -22,11 +36,11 @@
 
   border-radius: calc(var(--fs-border-radius) * 2);
 
-  &[data-fs-bp-autocomplete-dropdown-menu="bottom"] {
+  &[data-fs-bp-autocomplete-dropdown-menu='bottom'] {
     top: calc(100% + var(--fs-spacing-0));
   }
 
-  &[data-fs-bp-autocomplete-dropdown-menu="top"] {
+  &[data-fs-bp-autocomplete-dropdown-menu='top'] {
     bottom: calc(100% + var(--fs-spacing-0));
   }
 
@@ -59,12 +73,12 @@
       color: var(--fs-color-neutral-7);
     }
 
-    &[data-fs-bp-autocomplete-dropdown-option-focused="true"] {
+    &[data-fs-bp-autocomplete-dropdown-option-focused='true'] {
       background-color: #f5f5f5;
       color: #3d3d3d;
     }
 
-    &[data-fs-bp-autocomplete-dropdown-option-selected="true"] {
+    &[data-fs-bp-autocomplete-dropdown-option-selected='true'] {
       color: #0366dd;
     }
 

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

@@ -19,6 +19,7 @@ export type BuyerPortalContextType = {
     id: string;
     name: string;
     role?: string;
+    email?: string;
   } | null;
   featureFlags?: FeatureFlags;
 };

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

@@ -12,10 +12,11 @@ interface QuantitySelectorWithPercentageParams {
   disabled?: boolean;
   onChange?: (value: number) => void;
   onValidateBlur?: (min: number, maxValue: number, quantity: number) => void;
-
   formatAsPercent?: boolean;
   allowPercentToggle?: boolean;
   onFormatToggle?: (formatAsPercent: boolean) => void;
+  increaseQuantityBy?: number;
+  decreaseQuantityBy?: number;
 }
 
 const QuantitySelectorWithPercentage = ({
@@ -29,6 +30,8 @@ const QuantitySelectorWithPercentage = ({
   onValidateBlur,
   testId = "fs-quantity-selector",
   formatAsPercent = true,
+  increaseQuantityBy = 1,
+  decreaseQuantityBy = 1,
   ...otherProps
 }: QuantitySelectorWithPercentageParams) => {
   const [quantity, setQuantity] = useState<number>(initial ?? min);
@@ -61,8 +64,8 @@ const QuantitySelectorWithPercentage = ({
       : maxValue;
   };
 
-  const increase = () => changeQuantity(1);
-  const decrease = () => changeQuantity(-1);
+  const increase = () => changeQuantity(increaseQuantityBy);
+  const decrease = () => changeQuantity(-decreaseQuantityBy);
 
   const changeQuantity = (delta: number) => {
     const next = validateQuantityBounds(quantity + delta);

package/src/features/shared/components/SettingsDrawer/SettingsDrawerListType.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import { RadioGroup, RadioOption } from "@faststore/ui";
+import { RadioGroup, RadioOption, Skeleton } from "@faststore/ui";
 
 import { useGetScopeConfig } from "../../hooks";
 
@@ -80,21 +80,33 @@ export const SettingsDrawerListType = ({
   return (
     <div data-fs-bp-settings-drawer-list-type>
       <h4 data-fs-bp-settings-drawer-list-type-title>{title}</h4>
-      <RadioGroup name={name} selectedValue={value} onChange={handleChange}>
-        {options.map((option) => (
-          <div key={option.value} data-fs-bp-settings-drawer-list-type-option>
-            <RadioOption
-              value={option.value}
-              label={option.label}
-              name={name}
-              disabled={disabled || isLoading}
-            />
-            <p data-fs-bp-settings-drawer-list-type-description>
-              {option.description}
-            </p>
-          </div>
-        ))}
-      </RadioGroup>
+      {isLoading ? (
+        <div data-fs-bp-settings-drawer-list-type-skeleton>
+          {options.map((option) => (
+            <div key={option.value} data-fs-bp-settings-drawer-list-type-option>
+              <Skeleton size={{ width: "100%", height: "3.5rem" }} />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <RadioGroup name={name} selectedValue={value} onChange={handleChange}>
+          {options.map((option) => (
+            <div key={option.value} data-fs-bp-settings-drawer-list-type-option>
+              <RadioOption
+                value={option.value}
+                label={option.label}
+                name={name}
+                disabled={disabled || isLoading}
+              >
+                {option.label}
+              </RadioOption>
+              <p data-fs-bp-settings-drawer-list-type-description>
+                {option.description}
+              </p>
+            </div>
+          ))}
+        </RadioGroup>
+      )}
     </div>
   );
 };

package/src/features/shared/components/SettingsDrawer/listTypeOptions.ts

@@ -0,0 +1,23 @@
+import {
+  DEFAULT_LIST_TYPE_OPTIONS,
+  type ListTypeOption,
+} from "./SettingsDrawerListType";
+
+export const getCustomListDescription = (entityPlural: string) =>
+  `Manage a unique list of ${entityPlural} for this organization.`;
+
+export const getSharedListDescription = (entityPlural: string) =>
+  `Use the shared list of ${entityPlural} defined by the contract. Updates are automatic.`;
+
+export const createListTypeOptions = (
+  entityPlural: string
+): ListTypeOption[] => [
+  {
+    ...DEFAULT_LIST_TYPE_OPTIONS[0],
+    description: getCustomListDescription(entityPlural),
+  },
+  {
+    ...DEFAULT_LIST_TYPE_OPTIONS[1],
+    description: getSharedListDescription(entityPlural),
+  },
+];

package/src/features/shared/components/Table/TableRow/table-row.scss

@@ -98,6 +98,10 @@
 			align-items: center;
 			gap: var(--fs-spacing-1);
 			justify-content: flex-end;
+			
+			svg {
+				cursor: pointer;
+			}
 
 			&:empty {
 				padding: 0;

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

@@ -14,6 +14,11 @@ export {
   type SettingsDrawerListTypeProps,
   DEFAULT_LIST_TYPE_OPTIONS,
 } from "./SettingsDrawer/SettingsDrawer";
+export {
+  createListTypeOptions,
+  getCustomListDescription,
+  getSharedListDescription,
+} from "./SettingsDrawer/listTypeOptions";
 export {
   BasicDropdownMenu,
   type BasicDropdownMenuProps,

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

@@ -22,4 +22,4 @@ export const SCOPE_KEYS = {
   CREDIT_CARDS: "creditCards",
 } as const;
 
-export const CURRENT_VERSION = "1.3.49";
+export const CURRENT_VERSION = "1.3.51";