@vtex/faststore-plugin-buyer-portal 1.3.17 → 1.3.18

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

@@ -0,0 +1,150 @@
+import React, { useEffect, useMemo, useState } from "react";
+
+import { Icon, IconButton, Input } from "@faststore/ui";
+
+interface QuantitySelectorWithPercentageParams {
+  testId?: string;
+  max?: number;
+  min?: number;
+  initial?: number;
+  unitMultiplier?: number;
+  useUnitMultiplier?: boolean;
+  disabled?: boolean;
+  onChange?: (value: number) => void;
+  onValidateBlur?: (min: number, maxValue: number, quantity: number) => void;
+
+  formatAsPercent?: boolean;
+  allowPercentToggle?: boolean;
+  onFormatToggle?: (formatAsPercent: boolean) => void;
+}
+
+const QuantitySelectorWithPercentage = ({
+  max,
+  min = 1,
+  unitMultiplier = 1,
+  useUnitMultiplier,
+  initial,
+  disabled = false,
+  onChange,
+  onValidateBlur,
+  testId = "fs-quantity-selector",
+  formatAsPercent = true,
+  ...otherProps
+}: QuantitySelectorWithPercentageParams) => {
+  const [quantity, setQuantity] = useState<number>(initial ?? min);
+  const [multipliedUnit, setMultipliedUnit] = useState<number>(
+    quantity * unitMultiplier
+  );
+
+  const [showPercent, setShowPercent] = useState<boolean>(formatAsPercent);
+
+  useEffect(() => {
+    if (initial) setQuantity(initial);
+  }, [initial]);
+
+  useEffect(() => {
+    setShowPercent(formatAsPercent);
+  }, [formatAsPercent]);
+
+  const roundUpQuantityIfNeeded = (q: number) => {
+    if (!useUnitMultiplier) return q;
+    return Math.ceil(q / unitMultiplier) * unitMultiplier;
+  };
+
+  const isLeftDisabled = quantity === min;
+  const isRightDisabled = quantity === max;
+
+  const validateQuantityBounds = (n: number): number => {
+    const maxValue = min ? Math.max(n, min) : n;
+    return max
+      ? Math.min(maxValue, useUnitMultiplier ? max * unitMultiplier : max)
+      : maxValue;
+  };
+
+  const increase = () => changeQuantity(1);
+  const decrease = () => changeQuantity(-1);
+
+  const changeQuantity = (delta: number) => {
+    const next = validateQuantityBounds(quantity + delta);
+    onChange?.(next);
+    setQuantity(next);
+    setMultipliedUnit(next * unitMultiplier);
+  };
+
+  const validateBlur = () => {
+    const q = validateQuantityBounds(quantity);
+    const rounded = roundUpQuantityIfNeeded(q);
+
+    const maxValue = max ?? (min ? Math.max(quantity, min) : quantity);
+    const isOut = quantity > maxValue || quantity < min;
+    if (isOut) {
+      onValidateBlur?.(min, maxValue, rounded);
+    }
+
+    setQuantity(() => {
+      setMultipliedUnit(rounded);
+      onChange?.(rounded / unitMultiplier);
+      return rounded / unitMultiplier;
+    });
+  };
+
+  const changeInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value.replace(/\s+/g, "").replace(/[^\d]/g, "");
+
+    const numeric = Number(raw || "0");
+    setQuantity(numeric);
+  };
+
+  const displayValue = useMemo(() => {
+    const base = useUnitMultiplier ? multipliedUnit : quantity;
+    if (showPercent) return `${base}%`;
+    return String(base);
+  }, [showPercent, useUnitMultiplier, multipliedUnit, quantity]);
+
+  return (
+    <div
+      data-fs-quantity-selector={disabled ? "disabled" : "true"}
+      data-testid={testId}
+      {...otherProps}
+      style={{ display: "inline-flex", alignItems: "center", gap: 8 }}
+    >
+      <IconButton
+        data-quantity-selector-button="left"
+        icon={<Icon name="Minus" width={16} height={16} weight="bold" />}
+        aria-label="Decrement Quantity"
+        aria-controls="quantity-selector-input"
+        disabled={isLeftDisabled || disabled}
+        onClick={decrease}
+        testId={`${testId}-left-button`}
+        size="small"
+      />
+
+      <Input
+        data-quantity-selector-input
+        id="quantity-selector-input"
+        aria-label={showPercent ? "Quantity (percent)" : "Quantity"}
+        value={displayValue}
+        onChange={changeInputValue}
+        onBlur={validateBlur}
+        onInput={(event: React.FormEvent<HTMLInputElement>) => {
+          const input = event.currentTarget;
+          input.value = input.value.replace(/[^0-9%]/g, "");
+        }}
+        disabled={disabled}
+      />
+
+      <IconButton
+        data-quantity-selector-button="right"
+        aria-controls="quantity-selector-input"
+        aria-label="Increment Quantity"
+        disabled={isRightDisabled || disabled}
+        icon={<Icon name="Plus" width={16} height={16} weight="bold" />}
+        onClick={increase}
+        testId={`${testId}-right-button`}
+        size="small"
+      />
+    </div>
+  );
+};
+
+export default QuantitySelectorWithPercentage;

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

@@ -1,8 +1,8 @@
 export {
   AutocompleteDropdown,
+  useAutocompleteDropdownContext,
   type AutocompleteDropdownContextProps,
   type AutocompleteDropdownProps,
-  useAutocompleteDropdownContext,
 } from "./AutocompleteDropdown/AutocompleteDropdown";
 export { useAutocompletePosition } from "./AutocompleteDropdown/useAutocompletePosition";
 export { BasicCard, type BasicCardProps } from "./BasicCard/BasicCard";
@@ -12,19 +12,19 @@ export {
   type BasicDropdownMenuProps,
 } from "./BasicDropdownMenu/BasicDropdownMenu";
 export {
-  BuyerPortalProvider,
-  type BuyerPortalProviderProps,
   BuyerPortalContext,
+  BuyerPortalProvider,
   type BuyerPortalContextType,
+  type BuyerPortalProviderProps,
 } from "./BuyerPortalProvider/BuyerPortalProvider";
 export { Card, CardBody, CardFooter, CardHeader } from "./Card";
 export {
   CustomerSwitchDrawer,
   CustomerSwitchOption,
-  type CustomerSwitchOptionProps,
   CustomerSwitchOptionsList,
-  type CustomerSwitchOptionsListProps,
   CustomerSwitchSearch,
+  type CustomerSwitchOptionProps,
+  type CustomerSwitchOptionsListProps,
   type CustomerSwitchSearchProps,
 } from "./CustomerSwitch";
 export { default as DropdownFilter } from "./DropdownFilter/DropdownFilter";
@@ -32,6 +32,10 @@ export {
   ErrorMessage,
   type ErrorMessageProps,
 } from "./ErrorMessage/ErrorMessage";
+export {
+  HeaderInside,
+  type HeaderInsideProps,
+} from "./HeaderInside/HeaderInside";
 export {
   HierarchyTree,
   type HierarchyTreeLevelProps,
@@ -42,37 +46,34 @@ export { Icon } from "./Icon";
 export { InputText, type InputTextProps } from "./InputText/InputText";
 export { default as InternalSearch } from "./InternalSearch/InternalSearch";
 export { InternalTopBar } from "./InternalTopbar/InternalTopbar";
+export {
+  LetterHighlight,
+  type LetterHighlightProps,
+} from "./LetterHighlight/LetterHighlight";
+export {
+  LevelDivider,
+  type LevelDividerProps,
+} from "./LevelDivider/LevelDivider";
 export { Logo } from "./Logo/Logo";
 export { MainLinksDropdownMenu } from "./MainLinksDropdownMenu/MainLinksDropdownMenu";
+export { Pagination } from "./Pagination/Pagination";
 export { default as SortFilter } from "./SortFilter/SortFilter";
-export { Tab, type TabProps, useTab } from "./Tab/Tab";
+export { Tab, useTab, type TabProps } from "./Tab/Tab";
+export { Table, type TableProps } from "./Table/Table";
 export { Tag, type TagProps } from "./Tag/Tag";
 export { default as Toast } from "./Toast/Toast";
 export {
   VerticalNav,
   type VerticalNavMenuProps,
 } from "./VerticalNav/VerticalNavMenu";
-export {
-  LetterHighlight,
-  type LetterHighlightProps,
-} from "./LetterHighlight/LetterHighlight";
-export {
-  HeaderInside,
-  type HeaderInsideProps,
-} from "./HeaderInside/HeaderInside";
-export { Pagination } from "./Pagination/Pagination";
-export { Table, type TableProps } from "./Table/Table";
-export {
-  LevelDivider,
-  type LevelDividerProps,
-} from "./LevelDivider/LevelDivider";
 
-export { Paginator } from "./Paginator/Paginator";
 export type { CounterProps as PaginatorCounterProps } from "./Paginator/Counter";
 export type { NextPageButtonProps as PaginatorNextPageButtonProps } from "./Paginator/NextPageButton";
+export { Paginator } from "./Paginator/Paginator";
 
 export { EmptyState, type EmptyStateProps } from "./EmptyState/EmptyState";
-export { ErrorBoundary } from "./ErrorBoundary/ErrorBoundary";
-export { withErrorBoundary } from "./withErrorBoundary/withErrorBoundary";
 export { default as Error } from "./Error/Error";
+export { ErrorBoundary } from "./ErrorBoundary/ErrorBoundary";
 export { IconBookmarked } from "./IconBookmarked/IconBookmarked";
+export { default as QuantitySelectorWithPercentage } from "./QuantitySelectorWithPercentage/QuantitySelectorWithPercentage";
+export { withErrorBoundary } from "./withErrorBoundary/withErrorBoundary";

package/src/features/shared/types/CurrencyType.d.ts

@@ -0,0 +1,4 @@
+type CurrencyType = "USD" | "BRL";
+type LocaleType = "en-US" | "pt-BR";
+
+export type { CurrencyType, LocaleType };

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

@@ -1,10 +1,11 @@
+export { type AuthRouteProps } from "./AuthRouteProps";
 export type { BreadcrumbData } from "./BreadcrumbData";
+export type { CurrencyType, LocaleType } from "./CurrencyType";
 export type { LoaderData } from "./LoaderData";
 export type { IPagination } from "./Pagination";
-export type { ScopeInput } from "./ScopeInput";
 export type {
-  PaymentMethodsIdArray,
   PaymentMethodResponse,
+  PaymentMethodsIdArray,
   PaymentMethodsReqCommonParams,
 } from "./PaymentMethodsClientTypes";
-export { type AuthRouteProps } from "./AuthRouteProps";
+export type { ScopeInput } from "./ScopeInput";

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

@@ -0,0 +1,24 @@
+export const parseAmount = (raw?: string) => {
+  if (!raw) return 0;
+  const cleaned = raw
+    .toString()
+    .replace(/[^\d.,-]/g, "")
+    .trim();
+
+  const lastComma = cleaned.lastIndexOf(",");
+  const lastDot = cleaned.lastIndexOf(".");
+  let normalized = cleaned;
+
+  if (lastComma > -1 && lastDot > -1) {
+    if (lastComma > lastDot) {
+      normalized = cleaned.replace(/\./g, "").replace(",", ".");
+    } else {
+      normalized = cleaned.replace(/,/g, "");
+    }
+  } else if (lastComma > -1) {
+    normalized = cleaned.replace(",", ".");
+  }
+
+  const n = Number(normalized);
+  return Number.isFinite(n) ? n : 0;
+};

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

@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
 export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
   "bp_hide_edit_recipient_confirm";
 
-export const CURRENT_VERSION = "1.3.17";
+export const CURRENT_VERSION = "1.3.18";