@vtex/faststore-plugin-buyer-portal 1.3.41 → 1.3.43

package/CHANGELOG.md

@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.43] - 2025-12-16
+
+### Fixed
+- Update maskPhoneNumber to include country DDI
+- Send only phone digits to API in Users and Recipients pages
+- Show masked phone in layout and forms in Users and Recipients pages
+
+## [1.3.42] - 2025-12-11
+
+### Fixed
+
+- Improve error handling in the payment methods
+- Show error details on error boundary only in development environment
+
 ## [1.3.41] - 2025-12-09
 
 ### Changed
@@ -50,10 +64,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.3.34] - 2025-12-01
 
+- Add generic `SettingsDrawer` component with `ListType` subcomponent for scope configuration
+- Add Scope Config API integration (`useGetScopeConfig`, `useSetScopeConfig` hooks)
+- Integrate Settings Drawer with Address Settings page
+
 ### Added
 
 - Add DK Docs
 
+### Fixed
+
+- Fix address ID mapping in default address service to use correct `id` field
+
 ## [1.3.33] - 2025-11-25
 
 ### Changed
@@ -362,7 +384,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.41...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.43...HEAD
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
 [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -411,3 +433,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [1.3.37]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.36...v1.3.37
 [1.3.36]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.35...v1.3.36
 [1.3.35]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.35
+
+[1.3.43]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.42...v1.3.43
+[1.3.42]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.42

package/package.json

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

package/src/features/addresses/components/AddressRecipientsList/AddressRecipientsList.tsx

@@ -19,6 +19,7 @@ import {
   usePageItems,
 } from "../../../shared/hooks/usePageItems";
 import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
+import { type CountryCodes } from "../../data/countries";
 import { useSearchAddressRecipients } from "../../hooks/useSearchAddressRecipients";
 import { RecipientData } from "../../types";
 import { DeleteRecipientAddressDrawer } from "../DeleteRecipientAddressDrawer/DeleteRecipientAddressDrawer";
@@ -33,7 +34,7 @@ export type AddressRecipientsListProps = {
   total: number;
   search: string;
   page: number;
-  countryCode?: string;
+  countryCode?: CountryCodes;
 };
 
 export const AddressRecipientsList = forwardRef<
@@ -46,7 +47,7 @@ export const AddressRecipientsList = forwardRef<
       search,
       total,
       page = 1,
-      countryCode = "",
+      countryCode,
     }: AddressRecipientsListProps,
     ref
   ) => {

package/src/features/addresses/components/CreateAddressSettingsDrawer/CreateAddressSettingsDrawer.tsx

@@ -7,11 +7,14 @@ import { useUI, Skeleton } from "@faststore/ui";
 import {
   type BasicDrawerProps,
   AutocompleteDropdown,
-  BasicDrawer,
+  DEFAULT_LIST_TYPE_OPTIONS,
   Icon,
+  ListTypeOption,
+  SettingsDrawer,
 } from "../../../shared/components";
 import { OptionSelected } from "../../../shared/components/OptionSelected/OptionSelected";
 import { SearchHighlight } from "../../../shared/components/SearchHighlight/SearchHighlight";
+import { useSetScopeConfig, SCOPE_KEYS } from "../../../shared/hooks";
 import { ADDRESS_MESSAGES } from "../../constants/messages";
 import { useDebouncedSearchAddressByUnitId } from "../../hooks/useDebouncedSearchAddressByUnitId";
 import { useGetDefaultAddress } from "../../hooks/useGetDefaultAddresses";
@@ -28,14 +31,27 @@ export type CreateAddressSettingsDrawerProps = Omit<
   onUpdate?: () => void;
 };
 
+export const ADDRESS_LIST_TYPE_OPTIONS: ListTypeOption[] = [
+  {
+    ...DEFAULT_LIST_TYPE_OPTIONS[0],
+    description: "Manage a unique list of addresses for this organization.",
+  },
+  {
+    ...DEFAULT_LIST_TYPE_OPTIONS[1],
+    description:
+      "Use the shared list of addresses defined by the contract. Updates are automatic.",
+  },
+];
+
 export const CreateAddressSettingsDrawer = ({
   close,
   onUpdate,
-  ...props
+  ...otherProps
 }: CreateAddressSettingsDrawerProps) => {
   const { pushToast } = useUI();
   const router = useRouter();
 
+  const [listType, setListType] = useState<"sync" | "custom">("custom");
   const [searchValue, setSearchValue] = useState("");
   const [activeField, setActiveField] = useState<"Shipping" | "Billing" | null>(
     "Shipping"
@@ -103,6 +119,21 @@ export const CreateAddressSettingsDrawer = ({
       },
     });
 
+  const { setScopeConfig, isSetScopeConfigLoading } = useSetScopeConfig({
+    onSuccess: () => {
+      pushToast({
+        message: "Scope configuration updated successfully",
+        status: "INFO",
+      });
+    },
+    onError: () => {
+      pushToast({
+        message: "Failed to update scope configuration",
+        status: "ERROR",
+      });
+    },
+  });
+
   const isConfirmButtonEnabled = Boolean(
     shippingAddress?.id || billingAddress?.id
   );
@@ -125,6 +156,15 @@ export const CreateAddressSettingsDrawer = ({
   }
 
   const handleConfirmClick = () => {
+    // Update scope config if listType changed
+    setScopeConfig({
+      customerId: router.query.contractId as string,
+      unitId: router.query.orgUnitId as string,
+      scopeName: SCOPE_KEYS.ADDRESSES,
+      type: listType,
+    });
+
+    // Set default addresses
     setDefaultAddresses({
       orgUnitId: router.query.orgUnitId as string,
       customerId: router.query.contractId as string,
@@ -133,16 +173,29 @@ export const CreateAddressSettingsDrawer = ({
   };
 
   return (
-    <BasicDrawer
-      data-fs-bp-create-address-settings-drawer
+    <SettingsDrawer
+      title="Address settings"
+      {...otherProps}
       close={close}
-      {...props}
+      onPrimaryAction={handleConfirmClick}
+      isPrimaryButtonLoading={
+        isSetDefaultAddressesLoading || isSetScopeConfigLoading
+      }
+      isPrimaryButtonDisabled={!isConfirmButtonEnabled}
+      scopeName={SCOPE_KEYS.ADDRESSES}
+      onDismiss={close}
+      data-fs-bp-create-address-settings-drawer
     >
-      <BasicDrawer.Heading title="Address settings" onClose={close} />
+      <SettingsDrawer.ListType
+        title="List type"
+        name="listType"
+        value={listType}
+        onChange={setListType}
+        options={ADDRESS_LIST_TYPE_OPTIONS}
+      />
 
-      <BasicDrawer.Body>
-        <h3>Default addresses</h3>
-        <h4>Select the default addresses for this unit</h4>
+      <div data-fs-bp-default-addresses-section>
+        <h4 data-fs-bp-default-addresses-title>Default addresses</h4>
 
         <p data-fs-bp-default-address-label>
           Default shipping address (optional)
@@ -248,21 +301,7 @@ export const CreateAddressSettingsDrawer = ({
             )}
           />
         )}
-      </BasicDrawer.Body>
-
-      <BasicDrawer.Footer>
-        <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
-        </BasicDrawer.Button>
-        <BasicDrawer.Button
-          variant="confirm"
-          disabled={!isConfirmButtonEnabled}
-          onClick={handleConfirmClick}
-          isLoading={isSetDefaultAddressesLoading}
-        >
-          Save
-        </BasicDrawer.Button>
-      </BasicDrawer.Footer>
-    </BasicDrawer>
+      </div>
+    </SettingsDrawer>
   );
 };

package/src/features/addresses/components/CreateAddressSettingsDrawer/create-address-settings-drawer.scss

@@ -1,9 +1,10 @@
-@import "../../../shared/components/BasicDrawer/basic-drawer.scss";
+@import "../../../shared/components/SettingsDrawer/settings-drawer.scss";
 
 [data-fs-bp-create-address-settings-drawer] {
   @import "../../../shared/components/InputText/input-text.scss";
   @import "../../../shared/components/ErrorMessage/error-message.scss";
   @import "../../../shared/components/SearchHighlight/search-highlight.scss";
+
   @import "../ExistingAddress/existing-address.scss";
   @import "../LocationForm/location-form.scss";
   @import "../RecipientsForm/recipients-form.scss";
@@ -12,33 +13,32 @@
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
 
-  [data-fs-bp-basic-drawer-body] {
+  [data-fs-bp-settings-drawer-body] {
     padding-bottom: 90px;
 
-    h3 {
-      font-weight: var(--fs-text-weight-semibold);
-      font-size: var(--fs-text-size-2);
-      line-height: var(--fs-spacing-4);
-      margin-top: var(--fs-spacing-6);
-
-      &:first-of-type {
+    [data-fs-bp-default-addresses-section] {
+      [data-fs-bp-default-addresses-title] {
+        font-weight: var(--fs-text-weight-semibold);
+        font-size: var(--fs-text-size-1);
+        line-height: 1.25rem;
+        letter-spacing: -0.01em;
+        margin-bottom: var(--fs-spacing-4);
         margin-top: 0;
+        color: #000000;
       }
-    }
 
-    h4 {
-      font-weight: var(--fs-text-weight-regular);
-      font-size: var(--fs-text-size-1);
-      line-height: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
-      margin-bottom: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
-    }
+      [data-fs-bp-default-address-label] {
+        font-weight: var(--fs-text-weight-regular);
+        font-size: var(--fs-text-size-1);
+        line-height: 1.5;
+        color: #1f1f1f;
+        margin-bottom: var(--fs-spacing-1);
+        margin-top: var(--fs-spacing-4);
 
-    [data-fs-bp-default-address-label] {
-      font-weight: var(--fs-text-weight-regular);
-      font-size: var(--fs-text-size-0);
-      line-height: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
-      color: #1f1f1f;
-      margin-bottom: var(--fs-spacing-0);
+        &:first-of-type {
+          margin-top: 0;
+        }
+      }
     }
   }
 

package/src/features/addresses/components/RecipientsForm/RecipientItem/RecipientItem.tsx

@@ -1,5 +1,8 @@
 import { Icon, InputText } from "../../../../shared/components";
-import { maskPhoneNumber } from "../../../../shared/utils/phoneNumber";
+import {
+  maskPhoneNumber,
+  normalizePhoneNumber,
+} from "../../../../shared/utils/phoneNumber";
 
 import type { RecipientInput } from "../../../types";
 
@@ -48,7 +51,7 @@ export const RecipientItem = ({
     <InputText
       label="Phone Number"
       className="recipients-phone"
-      value={recipient.recipientPhone}
+      value={maskPhoneNumber(recipient.recipientPhone, "USA")}
       wrapperProps={{
         style: {
           borderTopLeftRadius: 0,
@@ -59,7 +62,7 @@ export const RecipientItem = ({
         onChange(
           index,
           "recipientPhone",
-          maskPhoneNumber(event.target.value, "USA")
+          normalizePhoneNumber(event.target.value)
         )
       }
     />

package/src/features/addresses/data/countries.ts

@@ -1,5 +1,5 @@
 export type CountryOption = {
-  id: string;
+  id: CountryCodes;
   name: string;
 };
 
@@ -9,3 +9,5 @@ export const CountryOptions: CountryOption[] = [
   { id: "CAN", name: "Canada" },
   { id: "MEX", name: "Mexico" },
 ];
+
+export type CountryCodes = "USA" | "MEX" | "BRA" | "CAN";

package/src/features/addresses/services/default-values/get-default-address.service.ts

@@ -13,7 +13,7 @@ const mapDefaultAddressToAddressData = (
   response: DefaultAddressResponse
 ): AddressData => {
   return {
-    id: response.userId || "",
+    id: response.id,
     name: response.addressLabel,
     types: [response.addressType],
     isActive: response.isActive,

package/src/features/addresses/services/recipients/get-address-recipients.service.ts

@@ -1,3 +1,4 @@
+import { normalizePhoneNumber } from "../../../shared/utils/phoneNumber";
 import { recipientsClient } from "../../clients/RecipientsClient";
 
 import type { RecipientsResponse } from "../../types/AddressData";
@@ -34,7 +35,13 @@ export const getAddressRecipientsService = async ({
         page
       );
 
-    return recipients;
+    return {
+      ...recipients,
+      data: recipients.data.map((recipient) => ({
+        ...recipient,
+        phone: normalizePhoneNumber(recipient.phone),
+      })),
+    };
   } catch (err) {
     console.error("Failed to get address recipients", err);
     return { data: [], total: 0 };

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

@@ -184,4 +184,5 @@ export type DefaultAddressResponse = Pick<
     geoCoordinate: string | null;
     isActive: boolean;
     userId?: string;
+    id: string;
   };

package/src/features/payment-methods/layouts/PaymentMethodsLayout/PaymentMethodsLayout.tsx

@@ -45,7 +45,7 @@ export const PaymentMethodsLayout = ({
     setSelectedMethod(undefined);
   });
 
-  const isLastPage = data.paging.pages === page || data.paging.pages === 0;
+  const isLastPage = data.paging?.pages === page || data.paging?.pages === 0;
 
   const {
     isLoading,
@@ -171,9 +171,9 @@ export const PaymentMethodsLayout = ({
               textSearch={setSearchTerm}
             />
             <Paginator.Counter
-              total={data.paging.total}
+              total={data.paging?.total ?? 0}
               itemsLength={
-                isLastPage ? data.paging.total : page * data.paging.perPage
+                isLastPage ? data.paging?.total : page * data.paging?.perPage
               }
             />
           </div>
@@ -182,7 +182,7 @@ export const PaymentMethodsLayout = ({
 
           {!isLoading && paymentMethods.length > 0 && (
             <div data-fs-bp-payment-methods-paginator>
-              {data.paging.page > 1 ? (
+              {(data.paging?.page ?? 1) > 1 ? (
                 <Paginator.NextPageButton
                   onClick={decreasePage}
                   disabled={isLoading}
@@ -204,9 +204,11 @@ export const PaymentMethodsLayout = ({
               )}
 
               <Paginator.Counter
-                total={data.paging.total}
+                total={data.paging?.total ?? 0}
                 itemsLength={
-                  isLastPage ? data.paging.total : page * data.paging.perPage
+                  isLastPage
+                    ? data.paging?.total ?? 0
+                    : page * (data.paging?.perPage ?? 0)
                 }
               />
             </div>

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

@@ -1,4 +1,4 @@
-import { getApiUrl } from "../../shared/utils";
+import { getApiUrl, SCOPE_KEYS } from "../../shared/utils";
 
 import { Client } from "./Client";
 
@@ -32,8 +32,44 @@ export default class ScopeClient extends Client {
       }
     );
   }
+
+  getScopeConfig(
+    customerId: string,
+    unitId: string,
+    scopeName: string,
+    cookie: string
+  ) {
+    return this.get<{ type: "sync" | "custom" }>(
+      `customers/${customerId}/units/${unitId}/scopes/configs`,
+      {
+        params: { scopeName },
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  setScopeConfig(
+    customerId: string,
+    unitId: string,
+    scopeName: string,
+    type: "sync" | "custom",
+    cookie: string
+  ) {
+    return this.post<{ message: string }, { type: "sync" | "custom" }>(
+      `customers/${customerId}/units/${unitId}/scopes/configs`,
+      { type },
+      {
+        params: { scopeName },
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
 }
 
 const scopesClient = new ScopeClient();
 
-export { scopesClient };
+export { scopesClient, SCOPE_KEYS };

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

@@ -1,4 +1,4 @@
-// import { isDevelopment } from "../../utils/environment";
+import { isDevelopment } from "../../utils/environment";
 import { Icon } from "../Icon";
 
 export type ErrorProps = {
@@ -20,18 +20,20 @@ export default function Error({ error }: ErrorProps) {
       <button data-fs-bp-error-button onClick={() => window.location.reload()}>
         Try again
       </button>
-      <div data-fs-bp-error-details>
-        <span data-fs-bp-error-details-type>{error?.tags?.errorType}</span>
-        <h2 data-fs-bp-error-details-title>Error Details</h2>
-        <p data-fs-bp-error-details-message>{error?.error.message}</p>
-        <p data-fs-bp-error-details-stack>Stack: {error?.error.stack}</p>
-        <p data-fs-bp-error-details-component>
-          Component: {error?.tags?.component}
-        </p>
-        <p data-fs-bp-error-details-query>
-          Query: {JSON.stringify(error?.query)}
-        </p>
-      </div>
+      {isDevelopment() && (
+        <div data-fs-bp-error-details>
+          <span data-fs-bp-error-details-type>{error?.tags?.errorType}</span>
+          <h2 data-fs-bp-error-details-title>Error Details</h2>
+          <p data-fs-bp-error-details-message>{error?.error.message}</p>
+          <p data-fs-bp-error-details-stack>Stack: {error?.error.stack}</p>
+          <p data-fs-bp-error-details-component>
+            Component: {error?.tags?.component}
+          </p>
+          <p data-fs-bp-error-details-query>
+            Query: {JSON.stringify(error?.query)}
+          </p>
+        </div>
+      )}
     </div>
   );
 }

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

@@ -0,0 +1,106 @@
+import React from "react";
+
+import { useBuyerPortal } from "../../hooks";
+import { BasicDrawer, type BasicDrawerProps } from "../BasicDrawer/BasicDrawer";
+
+import {
+  SettingsDrawerContext,
+  type SettingsDrawerContextType,
+} from "./SettingsDrawerContext";
+import {
+  SettingsDrawerListType,
+  type ListTypeOption,
+  type SettingsDrawerListTypeProps,
+  DEFAULT_LIST_TYPE_OPTIONS,
+} from "./SettingsDrawerListType";
+
+export type { ListTypeOption, SettingsDrawerListTypeProps };
+export { DEFAULT_LIST_TYPE_OPTIONS };
+
+export type SettingsDrawerProps = Omit<BasicDrawerProps, "children"> & {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  primaryButtonLabel?: string;
+  secondaryButtonLabel?: string;
+  onPrimaryAction?: () => void;
+  onSecondaryAction?: () => void;
+  isPrimaryButtonLoading?: boolean;
+  isPrimaryButtonDisabled?: boolean;
+  isSecondaryButtonDisabled?: boolean;
+  scopeName?: string;
+  customerId?: string;
+  unitId?: string;
+  onScopeConfigChange?: (type: "sync" | "custom") => void;
+};
+
+export const SettingsDrawer = ({
+  title,
+  subtitle,
+  children,
+  primaryButtonLabel = "Save",
+  secondaryButtonLabel = "Cancel",
+  onPrimaryAction,
+  onSecondaryAction,
+  isPrimaryButtonLoading = false,
+  isPrimaryButtonDisabled = false,
+  isSecondaryButtonDisabled = false,
+  scopeName,
+  customerId,
+  unitId,
+  onScopeConfigChange,
+  onDismiss,
+  ...otherProps
+}: SettingsDrawerProps) => {
+  const { clientContext, currentOrgUnit, currentContract } = useBuyerPortal();
+
+  const resolvedCustomerId =
+    customerId || currentContract?.id || clientContext.customerId;
+  const resolvedUnitId = unitId || currentOrgUnit?.id || "";
+
+  const handleClose = () => {
+    onDismiss?.();
+  };
+
+  const contextValue: SettingsDrawerContextType = {
+    scopeName,
+    customerId: resolvedCustomerId,
+    unitId: resolvedUnitId,
+    onScopeConfigChange,
+  };
+
+  return (
+    <SettingsDrawerContext.Provider value={contextValue}>
+      <BasicDrawer
+        data-fs-bp-settings-drawer
+        onDismiss={handleClose}
+        {...otherProps}
+      >
+        <BasicDrawer.Heading title={title} onClose={handleClose} />
+        <BasicDrawer.Body data-fs-bp-settings-drawer-body>
+          {subtitle && <p data-fs-bp-settings-drawer-subtitle>{subtitle}</p>}
+          {children}
+        </BasicDrawer.Body>
+        <BasicDrawer.Footer>
+          <BasicDrawer.Button
+            variant="ghost"
+            onClick={onSecondaryAction || handleClose}
+            disabled={isSecondaryButtonDisabled}
+          >
+            {secondaryButtonLabel}
+          </BasicDrawer.Button>
+          <BasicDrawer.Button
+            variant="confirm"
+            onClick={onPrimaryAction}
+            isLoading={isPrimaryButtonLoading}
+            disabled={isPrimaryButtonDisabled}
+          >
+            {primaryButtonLabel}
+          </BasicDrawer.Button>
+        </BasicDrawer.Footer>
+      </BasicDrawer>
+    </SettingsDrawerContext.Provider>
+  );
+};
+
+SettingsDrawer.ListType = SettingsDrawerListType;

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

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+
+export type SettingsDrawerContextType = {
+  scopeName?: string;
+  customerId?: string;
+  unitId?: string;
+  onScopeConfigChange?: (type: "sync" | "custom") => void;
+};
+
+export const SettingsDrawerContext = createContext<
+  SettingsDrawerContextType | undefined
+>(undefined);
+
+export const useSettingsDrawerContext = (): SettingsDrawerContextType => {
+  const context = useContext(SettingsDrawerContext);
+  return context || {};
+};

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

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+
+import { RadioGroup, RadioOption } from "@faststore/ui";
+
+import { useGetScopeConfig } from "../../hooks";
+
+import { useSettingsDrawerContext } from "./SettingsDrawerContext";
+
+export type ListTypeOption = {
+  value: string;
+  label: string;
+  description: string;
+};
+
+export const DEFAULT_LIST_TYPE_OPTIONS: ListTypeOption[] = [
+  {
+    value: "custom",
+    label: "Custom list",
+    description: "Manage a unique for this organization.",
+  },
+  {
+    value: "sync",
+    label: "Synchronized List",
+    description:
+      "Use the shared list defined by the contract. Updates are automatic.",
+  },
+];
+
+export type SettingsDrawerListTypeProps = {
+  title: string;
+  name: string;
+  value?: "sync" | "custom";
+  options?: ListTypeOption[];
+  onChange?: (value: "sync" | "custom") => void;
+  disabled?: boolean;
+};
+
+export const SettingsDrawerListType = ({
+  title,
+  name,
+  value: controlledValue,
+  options = DEFAULT_LIST_TYPE_OPTIONS,
+  onChange: controlledOnChange,
+  disabled = false,
+}: SettingsDrawerListTypeProps) => {
+  const { scopeName, customerId, unitId } = useSettingsDrawerContext();
+  const [internalValue, setInternalValue] = useState<"sync" | "custom">(
+    "custom"
+  );
+
+  const { isScopeConfigLoading } = useGetScopeConfig(
+    {
+      customerId: customerId ?? "",
+      unitId: unitId ?? "",
+      scopeName: scopeName ?? "",
+    },
+    {
+      lazy: !scopeName || !customerId || !unitId,
+      onSuccess: (data) => {
+        if (data?.type) {
+          setInternalValue(data.type);
+          controlledOnChange?.(data.type);
+        }
+      },
+    }
+  );
+
+  const value = controlledValue ?? internalValue;
+  const isLoading = isScopeConfigLoading;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value as "sync" | "custom";
+    setInternalValue(newValue);
+
+    if (controlledOnChange) {
+      controlledOnChange(newValue);
+    }
+  };
+
+  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>
+    </div>
+  );
+};

package/src/features/shared/components/SettingsDrawer/settings-drawer.scss

@@ -0,0 +1,61 @@
+[data-fs-bp-settings-drawer] {
+  @import "@faststore/ui/src/components/atoms/Radio/styles.scss";
+
+  [data-fs-bp-settings-drawer-body] {
+    color: #1f1f1f;
+    font-size: var(--fs-text-size-1);
+
+    [data-fs-bp-settings-drawer-subtitle] {
+      margin-bottom: var(--fs-spacing-5);
+      color: #1f1f1f;
+    }
+
+    [data-fs-bp-settings-drawer-list-type] {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: var(--fs-spacing-4);
+
+      h4[data-fs-bp-settings-drawer-list-type-title] {
+        color: #000000;
+        font-weight: var(--fs-text-weight-semibold);
+        font-size: var(--fs-text-size-1);
+        line-height: 1.25rem;
+        letter-spacing: -0.01em;
+        margin-bottom: var(--fs-spacing-4);
+        margin-top: 0;
+      }
+
+      [data-fs-bp-settings-drawer-list-type-option] {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: var(--fs-spacing-4);
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        [data-fs-radio-group-option] {
+          display: flex;
+          align-items: flex-start;
+          gap: var(--fs-spacing-2);
+
+          label {
+            font-weight: var(--fs-text-weight-regular);
+            font-size: var(--fs-text-size-1);
+            color: #1f1f1f;
+          }
+        }
+
+        [data-fs-bp-settings-drawer-list-type-description] {
+          margin-left: var(--fs-spacing-5);
+          margin-bottom: 0;
+          color: #707070;
+          font-weight: var(--fs-text-weight-regular);
+          font-size: var(--fs-bp-text-size-0);
+          line-height: var(--fs-bp-text-size-2);
+          letter-spacing: 0;
+        }
+      }
+    }
+  }
+}

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

@@ -7,6 +7,13 @@ export {
 export { useAutocompletePosition } from "./AutocompleteDropdown/useAutocompletePosition";
 export { BasicCard, type BasicCardProps } from "./BasicCard/BasicCard";
 export { BasicDrawer, type BasicDrawerProps } from "./BasicDrawer/BasicDrawer";
+export {
+  SettingsDrawer,
+  type SettingsDrawerProps,
+  type ListTypeOption,
+  type SettingsDrawerListTypeProps,
+  DEFAULT_LIST_TYPE_OPTIONS,
+} from "./SettingsDrawer/SettingsDrawer";
 export {
   BasicDropdownMenu,
   type BasicDropdownMenuProps,

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

@@ -15,3 +15,5 @@ export { useRouterLoading } from "./useRouterLoading";
 export { useLogger } from "./useLogger";
 export { useGetDependenciesVersion } from "./useGetDependenciesVersion";
 export { useAnalytics } from "./analytics/useAnalytics";
+export { useGetScopeConfig, SCOPE_KEYS } from "./useGetScopeConfig";
+export { useSetScopeConfig } from "./useSetScopeConfig";

package/src/features/shared/hooks/useGetScopeConfig.ts

@@ -0,0 +1,35 @@
+import {
+  getScopeConfigService,
+  type GetScopeConfigServiceProps,
+  SCOPE_KEYS,
+} from "../services";
+
+import { useQuery, type QueryOptions } from "./useQuery";
+
+import type { AwaitedType } from "../types";
+
+export const useGetScopeConfig = (
+  props: Omit<GetScopeConfigServiceProps, "cookie">,
+  options?: QueryOptions<AwaitedType<typeof getScopeConfigService>>
+) => {
+  const { data, error, isLoading, refetch } = useQuery<
+    AwaitedType<typeof getScopeConfigService>
+  >(
+    `scope-config-${props.customerId}-${props.unitId}-${props.scopeName}`,
+    (clientContext) =>
+      getScopeConfigService({
+        ...props,
+        cookie: clientContext.cookie,
+      }),
+    options
+  );
+
+  return {
+    scopeConfig: data,
+    isScopeConfigLoading: isLoading,
+    hasScopeConfigError: error,
+    refetchScopeConfig: refetch,
+  };
+};
+
+export { SCOPE_KEYS };

package/src/features/shared/hooks/useSetScopeConfig.ts

@@ -0,0 +1,30 @@
+import {
+  setScopeConfigService,
+  type SetScopeConfigServiceProps,
+  SCOPE_KEYS,
+} from "../services";
+
+import { type MutationOptions, useMutation } from "./useMutation";
+
+import type { AwaitedType } from "../types";
+
+export const useSetScopeConfig = (
+  options?: MutationOptions<AwaitedType<typeof setScopeConfigService>>
+) => {
+  const { mutate, isLoading, error } = useMutation<
+    AwaitedType<typeof setScopeConfigService>,
+    Omit<SetScopeConfigServiceProps, "cookie">
+  >(
+    (variables, clientContext) =>
+      setScopeConfigService({ ...variables, cookie: clientContext.cookie }),
+    options
+  );
+
+  return {
+    setScopeConfig: mutate,
+    isSetScopeConfigLoading: isLoading,
+    hasSetScopeConfigError: error,
+  };
+};
+
+export { SCOPE_KEYS };

package/src/features/shared/services/get-scope-config.service.ts

@@ -0,0 +1,19 @@
+import { scopesClient, SCOPE_KEYS } from "../clients/ScopeClient";
+
+export type GetScopeConfigServiceProps = {
+  customerId: string;
+  unitId: string;
+  scopeName: string;
+  cookie: string;
+};
+
+export const getScopeConfigService = async ({
+  customerId,
+  unitId,
+  scopeName,
+  cookie,
+}: GetScopeConfigServiceProps) => {
+  return scopesClient.getScopeConfig(customerId, unitId, scopeName, cookie);
+};
+
+export { SCOPE_KEYS };

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

@@ -15,3 +15,12 @@ export {
   getDependenciesVersionService,
   type GetDependenciesVersionProps,
 } from "./get-dependencies-version.service";
+export {
+  getScopeConfigService,
+  type GetScopeConfigServiceProps,
+  SCOPE_KEYS,
+} from "./get-scope-config.service";
+export {
+  setScopeConfigService,
+  type SetScopeConfigServiceProps,
+} from "./set-scope-config.service";

package/src/features/shared/services/set-scope-config.service.ts

@@ -0,0 +1,27 @@
+import { scopesClient, SCOPE_KEYS } from "../clients/ScopeClient";
+
+export type SetScopeConfigServiceProps = {
+  customerId: string;
+  unitId: string;
+  scopeName: string;
+  type: "sync" | "custom";
+  cookie: string;
+};
+
+export const setScopeConfigService = async ({
+  customerId,
+  unitId,
+  scopeName,
+  type,
+  cookie,
+}: SetScopeConfigServiceProps) => {
+  return scopesClient.setScopeConfig(
+    customerId,
+    unitId,
+    scopeName,
+    type,
+    cookie
+  );
+};
+
+export { SCOPE_KEYS };

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

@@ -9,3 +9,4 @@ export type {
   PaymentMethodsReqCommonParams,
 } from "./PaymentMethodsClientTypes";
 export type { ScopeInput } from "./ScopeInput";
+export type { AwaitedType } from "./AwaitedType";

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

@@ -13,4 +13,13 @@ 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.41";
+export const SCOPE_KEYS = {
+  CONTRACTS: "contractIds",
+  ADDRESSES: "addresses",
+  CUSTOM_FIELDS: "customFields",
+  COLLECTIONS: "collectionIds",
+  PAYMENT_SYSTEMS: "paymentSystemIds",
+  CREDIT_CARDS: "creditCards",
+} as const;
+
+export const CURRENT_VERSION = "1.3.43";

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

@@ -1,7 +1,12 @@
 export { addressLabelToPropMapping } from "./addresLabelToPropMapping";
 export { getApiUrl, getPostalCodeApiUrl, getTokenizationUrl } from "./api";
 export { compareItems } from "./compareItems";
-export { API_URL, AUT_COOKIE_KEY, DEBOUNCE_TIMEOUT } from "./constants";
+export {
+  API_URL,
+  AUT_COOKIE_KEY,
+  DEBOUNCE_TIMEOUT,
+  SCOPE_KEYS,
+} from "./constants";
 export {
   getAuthCookie,
   getCookieAsString,

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

@@ -1,18 +1,34 @@
+import { type CountryCodes } from "../../addresses/data/countries";
+
 import mask from "./mask";
 
-export function maskPhoneNumber(phoneNumber: string, country?: string) {
-  if (!phoneNumber) return phoneNumber;
+type MaskType = {
+  mask: string;
+  length: number;
+  ddi: string;
+};
+
+const MASK_MAP: Record<CountryCodes, MaskType> = {
+  USA: { mask: "(999) 999-9999", length: 14, ddi: "1" },
+  MEX: { mask: "(999) 999-9999", length: 14, ddi: "52" },
+  BRA: { mask: "(99) 99999-9999", length: 15, ddi: "55" },
+  CAN: { mask: "(999) 999-9999", length: 14, ddi: "1" },
+};
+
+export function maskPhoneNumber(phoneNumber: string, country?: CountryCodes) {
+  if (!phoneNumber || !country || !MASK_MAP[country]) return phoneNumber;
+
+  const { mask: phoneMask, length, ddi } = MASK_MAP[country];
 
-  switch (country) {
-    case "USA":
-      return mask(phoneNumber, "(999) 999-9999").substring(0, 14);
-    case "MEX":
-      return mask(phoneNumber, "(999) 999-9999").substring(0, 14);
-    case "BRA":
-      return mask(phoneNumber, "(99) 99999-9999").substring(0, 15);
-    case "CAN":
-      return mask(phoneNumber, "(999) 999-9999").substring(0, 14);
-    default:
-      return phoneNumber;
-  }
+  const normalizedPhone = normalizePhoneNumber(phoneNumber);
+  const phoneWithoutDdi = normalizedPhone.startsWith(ddi)
+    ? normalizedPhone.slice(ddi.length)
+    : normalizedPhone;
+
+  return `+${ddi} ${mask(phoneWithoutDdi, phoneMask).substring(0, length)}`;
+}
+
+export function normalizePhoneNumber(phoneNumber: string) {
+  if (!phoneNumber) return phoneNumber;
+  return phoneNumber.replace(/\D/g, "");
 }

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

@@ -15,7 +15,10 @@ import {
 import { useAnalytics } from "../../../shared/hooks";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
-import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
+import {
+  maskPhoneNumber,
+  normalizePhoneNumber,
+} from "../../../shared/utils/phoneNumber";
 import { useAddUserToOrgUnit } from "../../hooks";
 
 export type CreateUserDrawerProps = Omit<BasicDrawerProps, "children"> & {
@@ -256,12 +259,12 @@ export const CreateUserDrawer = ({
 
                 <InputText
                   label="Phone number (optional)"
-                  value={phone}
+                  value={maskPhoneNumber(phone, "USA")}
                   onChange={(event) =>
                     // TODO: Update this when implementing i18n
                     updateField(
                       "phone",
-                      maskPhoneNumber(event.target.value, "USA")
+                      normalizePhoneNumber(event.target.value)
                     )
                   }
                 />

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

@@ -12,7 +12,10 @@ import {
 } from "../../../shared/components";
 import { useAnalytics } from "../../../shared/hooks";
 import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
-import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
+import {
+  maskPhoneNumber,
+  normalizePhoneNumber,
+} from "../../../shared/utils/phoneNumber";
 import { useGetUserById, useUpdateUser } from "../../hooks";
 
 export type UpdateUserDrawerProps = Omit<BasicDrawerProps, "children"> & {
@@ -174,7 +177,7 @@ export const UpdateUserDrawer = ({
     updateUser({
       userId,
       name,
-      phone,
+      phone: phone ?? "",
       roles,
       orgUnitId,
     });
@@ -245,10 +248,10 @@ export const UpdateUserDrawer = ({
         ) : (
           <InputText
             label="Phone number (optional)"
-            value={phone}
+            value={maskPhoneNumber(phone, "USA")}
             onChange={(event) =>
               // TODO: Update this when implementing i18n
-              updateField("phone", maskPhoneNumber(event.target.value, "USA"))
+              updateField("phone", normalizePhoneNumber(event.target.value))
             }
           />
         )}

package/src/features/users/layouts/UserDetailsLayout/UserDetailsLayout.tsx

@@ -9,6 +9,7 @@ import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
 import { GlobalLayout } from "../../../shared/layouts";
 import { OrgUnitTabsLayout } from "../../../shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
 import { ReassignOrgUnitDrawer, UpdateUserDrawer } from "../../components";
 import { UserDropdownMenu } from "../../components/UserDropdownMenu/UserDropdownMenu";
 
@@ -82,7 +83,9 @@ export const UserDetailsLayout = ({
 
             <div data-fs-user-details-row>
               <span data-fs-user-details-row-label>Phone number</span>
-              <span data-fs-user-details-row-value>{user?.phone}</span>
+              <span data-fs-user-details-row-value>
+                {maskPhoneNumber(user?.phone ?? "", "USA")}
+              </span>
             </div>
 
             <hr data-fs-user-details-divider />

package/src/features/users/services/get-user-by-id.service.ts

@@ -1,3 +1,4 @@
+import { normalizePhoneNumber } from "../../shared/utils/phoneNumber";
 import { usersClient } from "../clients/UsersClient";
 
 import type { UserData } from "../types";
@@ -23,7 +24,7 @@ export const getUserByIdService = async ({
       roles: role ? role : [],
       id: userId,
       email: email ?? "",
-      phone: phone ?? "",
+      phone: normalizePhoneNumber(phone ?? ""),
       orgUnit: {
         name: orgUnit,
       },

package/src/pages/payment-methods.tsx

@@ -82,7 +82,7 @@ const loaderFunction = async (
     return {
       data: paymentMethods,
       search: search ?? "",
-      totalPaymentMethods: contractPaymentMethods.paging.total,
+      totalPaymentMethods: contractPaymentMethods?.paging?.total ?? 0,
       context: {
         clientContext: { cookie, userId, ...clientContext },
         currentOrgUnit,