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

package/CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [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 +57,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 +377,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/1.3.42...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 +426,5 @@ 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.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.42",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

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/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/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.42";

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/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,