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

package/CHANGELOG.md

@@ -7,9 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.51] - 2026-01-05
+
+### Added
+
+- Add Settings Drawers for Credit Cards, Payment Methods and Collections
+  - Implement `CreditCardSettingsDrawer` component for credit cards scope configuration
+  - Implement `PaymentMethodSettingsDrawer` component for payment methods scope configuration
+  - Implement `CollectionsSettingsDrawer` component for product assortment scope configuration
+  - Integrate settings drawers with respective layout pages
+
 ## [1.3.50] - 2025-12-19
 
 ### Changed
+
 - Introduces several improvements and refactorings to the budget notification drawer, focusing on user experience.
 
 ## [1.3.49] - 2025-12-19
@@ -28,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Alternative Login Keys:
   - Add auth setup drawer
   - Update AddUserDrawer to support username
-  
+
 ## [1.3.46] - 2025-12-19
 
 ### Fixed
@@ -38,16 +49,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.3.45] - 2025-12-17
 
 ### Fixed
+
 - Remove AwaitedType imports
 
 ## [1.3.44] - 2025-12-16
 
 ### Fixed
+
 - Remove AwaitedType export that was breaking the application build
 
 ## [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
@@ -67,6 +81,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.3.40] - 2025-12-09
 
+### Fixed
+
 - Fix e2e auth flow
 
 ## [1.3.39] - 2025-12-09
@@ -84,7 +100,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.3.37] - 2025-12-04
 
-## Changed
+### Changed
 
 - Allow Credit Card CVV to accept 4 digits
 
@@ -102,12 +118,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.3.34] - 2025-12-01
 
+### Added
+
 - 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
@@ -311,6 +326,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.3.4] - 2025-10-16
 
+### Fixed
+
 - Error boundary:
   - Updating the authentication loader to provide detailed error context.
 
@@ -422,21 +439,24 @@ 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.50...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
-[1.3.2]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.2
-[1.3.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.3
-[1.3.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.4
-[1.3.5]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.5
-[1.3.6]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.6
-[1.3.9]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.8...v1.3.9
-[1.3.8]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.7...v1.3.8
-[1.3.7]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.7
-
-# <<<<<<< HEAD
-
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.51...HEAD
+[1.3.51]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.50...v1.3.51
+[1.3.50]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.49...v1.3.50
+[1.3.49]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.48...v1.3.49
+[1.3.48]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.47...v1.3.48
+[1.3.47]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.46...v1.3.47
+[1.3.46]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.45...v1.3.46
+[1.3.45]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.44...v1.3.45
+[1.3.44]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.43...v1.3.44
+[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
+[1.3.41]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.40...v1.3.41
+[1.3.40]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.39...v1.3.40
+[1.3.39]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.38...v1.3.39
+[1.3.38]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.37...v1.3.38
+[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.34]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.33...v1.3.34
 [1.3.33]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.32...v1.3.33
 [1.3.32]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.31...v1.3.32
@@ -460,24 +480,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [1.3.14]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.13...v1.3.14
 [1.3.13]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.12...v1.3.13
 [1.3.12]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.11...v1.3.12
-
-> > > > > > > main
-> > > > > > > [1.3.11]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.11
-
-[1.3.41]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.40...v1.3.41
-[1.3.40]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.39...v1.3.40
-[1.3.39]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.38...v1.3.39
-[1.3.38]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.37...v1.3.38
-[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.50]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.49...v1.3.50
-[1.3.49]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.48...v1.3.49
-[1.3.48]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.47...v1.3.48
-[1.3.47]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.46...v1.3.47
-[1.3.46]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.45...v1.3.46
-[1.3.45]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.44...v1.3.45
-[1.3.44]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.43...v1.3.44
-[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
+[1.3.11]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.11
+[1.3.9]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.8...v1.3.9
+[1.3.8]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.7...v1.3.8
+[1.3.7]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.7
+[1.3.6]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.6
+[1.3.5]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.5
+[1.3.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.4
+[1.3.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.3
+[1.3.2]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.2
+[1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
+[1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3

package/package.json

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

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

@@ -7,10 +7,9 @@ import { useUI, Skeleton } from "@faststore/ui";
 import {
   type BasicDrawerProps,
   AutocompleteDropdown,
-  DEFAULT_LIST_TYPE_OPTIONS,
   Icon,
-  ListTypeOption,
   SettingsDrawer,
+  createListTypeOptions,
 } from "../../../shared/components";
 import { OptionSelected } from "../../../shared/components/OptionSelected/OptionSelected";
 import { SearchHighlight } from "../../../shared/components/SearchHighlight/SearchHighlight";
@@ -31,17 +30,7 @@ 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 ADDRESS_LIST_TYPE_OPTIONS = createListTypeOptions("addresses");
 
 export const CreateAddressSettingsDrawer = ({
   close,

package/src/features/credit-cards/components/CreditCardSettingsDrawer/CreditCardSettingsDrawer.tsx

@@ -6,11 +6,10 @@ import { useUI } from "@faststore/ui";
 
 import {
   type BasicDrawerProps,
-  BasicDrawer,
-  InputText,
+  SettingsDrawer,
+  createListTypeOptions,
 } from "../../../shared/components";
-
-import type { CreditCard } from "../../types";
+import { useSetScopeConfig, SCOPE_KEYS } from "../../../shared/hooks";
 
 export type CreditCardSettingsDrawerProps = Omit<
   BasicDrawerProps,
@@ -19,70 +18,60 @@ export type CreditCardSettingsDrawerProps = Omit<
   readonly?: boolean;
 };
 
+const CREDIT_CARD_LIST_TYPE_OPTIONS = createListTypeOptions("credit cards");
+
 export const CreditCardSettingsDrawer = ({
   close,
-  ...props
+  ...otherProps
 }: CreditCardSettingsDrawerProps) => {
   const { pushToast } = useUI();
-
   const router = useRouter();
-  const [newCard, setNewCard] = useState<CreditCard>({} as CreditCard);
+
+  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 = () => {
-    pushToast({
-      message: "Credit card added successfully",
-      status: "INFO",
+    setScopeConfig({
+      customerId: router.query.contractId as string,
+      unitId: router.query.orgUnitId as string,
+      scopeName: SCOPE_KEYS.CREDIT_CARDS,
+      type: listType,
     });
-    router.reload();
-    close();
   };
 
-  const hasCardInformation = () => {
-    return (
-      newCard.cardholder &&
-      newCard.cardLabel &&
-      newCard.cvv &&
-      newCard.expirationDate &&
-      newCard.number
-    );
-  };
-
-  const isConfirmButtonEnabled = hasCardInformation();
-
   return (
-    <BasicDrawer
-      data-fs-bp-edit-credit-card-settings-drawer
+    <SettingsDrawer
+      title="Credit cards settings"
+      {...otherProps}
       close={close}
-      {...props}
+      onPrimaryAction={handleConfirmClick}
+      isPrimaryButtonLoading={isSetScopeConfigLoading}
+      scopeName={SCOPE_KEYS.CREDIT_CARDS}
+      onDismiss={close}
+      data-fs-bp-edit-credit-card-settings-drawer
     >
-      <BasicDrawer.Heading title="Credit card settings" onClose={close} />
-      <BasicDrawer.Body>
-        <div data-fs-bp-edit-credit-card-settings-drawer-section-label>
-          <span>Default credit card</span>
-        </div>
-        <InputText
-          label="Search Card nickname"
-          value={newCard.cardLabel}
-          wrapperProps={{ style: { marginTop: 16 } }}
-          onChange={(event) =>
-            setNewCard({ ...newCard, cardLabel: event.target.value })
-          }
-        />
-      </BasicDrawer.Body>
-
-      <BasicDrawer.Footer>
-        <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
-        </BasicDrawer.Button>
-        <BasicDrawer.Button
-          variant="confirm"
-          disabled={!isConfirmButtonEnabled}
-          onClick={handleConfirmClick}
-          isLoading={false}
-        >
-          Save
-        </BasicDrawer.Button>
-      </BasicDrawer.Footer>
-    </BasicDrawer>
+      <SettingsDrawer.ListType
+        title="List type"
+        name="credit-card-list-type"
+        value={listType}
+        onChange={setListType}
+        options={CREDIT_CARD_LIST_TYPE_OPTIONS}
+      />
+    </SettingsDrawer>
   );
 };

package/src/features/credit-cards/layouts/CreditCardsLayout/CreditCardLayout.tsx

@@ -19,6 +19,7 @@ import {
   CreateCreditCardDrawer,
   CreditCardDropdownMenu,
 } from "../../components";
+import { CreditCardSettingsDrawer } from "../../components/CreditCardSettingsDrawer/CreditCardSettingsDrawer";
 import { useChangeCardScope } from "../../hooks";
 import { useGetCreditCards } from "../../hooks/useGetCreditCards";
 
@@ -35,6 +36,12 @@ export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
     ...createDrawerProps
   } = useDrawerProps();
 
+  const {
+    open: openCreateCreditCardSettingsDrawer,
+    isOpen: isCreateCreditCardSettingsDrawerOpen,
+    ...createCreditCardSettingsDrawerProps
+  } = useDrawerProps();
+
   const {
     currentOrgUnit: orgUnit,
     currentUser: user,
@@ -137,6 +144,11 @@ export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
       >
         <section data-fs-credit-card-section>
           <HeaderInside title="Credit cards">
+            <HeaderInside.Button
+              iconName="EditSettings"
+              style={{ backgroundColor: "transparent", color: "#1f1f1f" }}
+              onClick={openCreateCreditCardSettingsDrawer}
+            />
             <HeaderInside.Button onClick={openCreateDrawer} />
           </HeaderInside>
           {data.length === 0 ? (
@@ -173,6 +185,12 @@ export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
               isOpen={isCreateCreditCardDrawerOpen}
             />
           )}
+          {isCreateCreditCardSettingsDrawerOpen && (
+            <CreditCardSettingsDrawer
+              isOpen={isCreateCreditCardSettingsDrawerOpen}
+              {...createCreditCardSettingsDrawerProps}
+            />
+          )}
         </section>
       </ContractTabsLayout>
     </GlobalLayout>

package/src/features/custom-fields/components/CustomFieldSettingsDrawer/CustomFieldSettingsDrawer.tsx

@@ -1,10 +1,19 @@
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
-import { useUI } from "@faststore/ui";
+import { RadioGroup, RadioOption, useUI } from "@faststore/ui";
 
-import { BasicDrawerProps } from "../../../shared/components";
-import { CustomFieldSettingsDrawer as CustomFieldSettingsDrawerComponent } from "../../../shared/components/CustomField";
-import { useBuyerPortal, useDebounce } from "../../../shared/hooks";
+import {
+  AutocompleteDropdown,
+  SettingsDrawer,
+  type BasicDrawerProps,
+  createListTypeOptions,
+} from "../../../shared/components";
+import { CustomFieldSelectedCardItem } from "../../../shared/components/CustomField/selected-card-item/CustomFieldSelectedCardItem";
+import {
+  useBuyerPortal,
+  useDebounce,
+  useSetScopeConfig,
+} from "../../../shared/hooks";
 import {
   useAddDefaultValue,
   useCustomFieldValues,
@@ -15,6 +24,12 @@ import {
 import { useCustomFieldSettings } from "../../../shared/hooks/custom-field/useCustomFieldSettings";
 import { CustomFieldData } from "../../types";
 
+type FormState = {
+  level: string;
+  required: boolean;
+  defaultValue: CustomFieldData | null;
+};
+
 export interface CustomFieldSettingsDrawerProps
   extends Omit<BasicDrawerProps, "children"> {
   contractId: string;
@@ -30,6 +45,8 @@ export function CustomFieldSettingsDrawer({
   unitId,
   close,
   refetch,
+  loading = false,
+  onDismiss,
   ...props
 }: CustomFieldSettingsDrawerProps) {
   const {
@@ -40,8 +57,23 @@ export function CustomFieldSettingsDrawer({
     CustomFieldData[]
   >([]);
   const [search, setSearch] = useState<string>("");
+  const [formData, setFormData] = useState<FormState>({
+    level: "",
+    required: false,
+    defaultValue: null,
+  });
+  const [autoCompleteValue, setAutocompleteValue] = useState<string>("");
+  const [listType, setListType] = useState<"sync" | "custom">("custom");
 
   const debouncedSearchValue = useDebounce(search, 200);
+  const customFieldScopeName = useMemo(
+    () => `custom-fields/${customField}`,
+    [customField]
+  );
+  const customFieldPlural = useMemo(
+    () => `${customField.toLowerCase()}s`,
+    [customField]
+  );
 
   const {
     data: customFieldSettings,
@@ -72,7 +104,7 @@ export function CustomFieldSettingsDrawer({
 
   const {
     mutate: updateCustomFieldSettings,
-    isLoading: isLoadginUpdateCustomFieldSettings,
+    isLoading: isLoadingUpdateCustomFieldSettings,
   } = useUpdateCustomFieldSettings({
     options: {
       onSuccess: () =>
@@ -114,6 +146,14 @@ export function CustomFieldSettingsDrawer({
       },
     });
 
+  const { setScopeConfig, isSetScopeConfigLoading } = useSetScopeConfig({
+    onError: () =>
+      pushToast({
+        status: "ERROR",
+        message: "Failed to update scope configuration",
+      }),
+  });
+
   useCustomFieldValues({
     keys: `default-values/options/${debouncedSearchValue}`,
     data: {
@@ -140,63 +180,199 @@ export function CustomFieldSettingsDrawer({
     },
   });
 
-  async function onSave(
-    level: string,
-    required: boolean,
-    defaulValue: CustomFieldData | null
-  ) {
-    if (defaulValue) {
+  const listTypeOptions = useMemo(
+    () => createListTypeOptions(customFieldPlural),
+    [customFieldPlural]
+  );
+
+  useEffect(() => {
+    setFormData({
+      level: customFieldSettings?.level ?? "",
+      required: !!customFieldSettings?.required,
+      defaultValue: defaultValueData
+        ? { ...defaultValueData, isDefault: true }
+        : null,
+    });
+  }, [customFieldSettings, defaultValueData]);
+
+  const handleClose = () => {
+    onDismiss?.();
+    close();
+    setSearch("");
+    setAutocompleteValue("");
+  };
+
+  const handleSave = async () => {
+    if (formData.defaultValue) {
       await updateDefaultValue({
         contractId,
         customField,
-        customFieldValueId: defaulValue.id,
+        customFieldValueId: formData.defaultValue.id,
         unitId,
       });
     } else {
       await removeDefaultValue({ contractId, customField, unitId });
     }
 
-    updateCustomFieldSettings({
-      cookie,
-      data: {
-        contractId,
+    await Promise.all([
+      updateCustomFieldSettings({
+        cookie,
+        data: {
+          contractId,
+          unitId,
+          customField,
+          level: formData.level,
+          required: formData.required,
+        },
+      }),
+      setScopeConfig({
+        customerId: contractId,
         unitId,
-        customField,
-        level,
-        required,
-      },
-    });
-  }
+        scopeName: customFieldScopeName,
+        type: listType,
+      }),
+    ]);
+
+    handleClose();
+    refetch();
+  };
+
+  const isSavingSettings =
+    isLoadingUpdateDefaultValue ||
+    isLoadingRemoveDefaultValue ||
+    isLoadingUpdateCustomFieldSettings ||
+    isSetScopeConfigLoading ||
+    loading;
+
+  const isPrimaryButtonDisabled =
+    (!formData.defaultValue?.id && !!autoCompleteValue) || isSavingSettings;
 
   if (isLoading || isLoadingDefaultValue || error) return null;
 
   return (
-    <CustomFieldSettingsDrawerComponent
-      initialValue={{
-        level: customFieldSettings?.level ?? "",
-        required: !!customFieldSettings?.required,
-        defaultValue: defaultValueData
-          ? { ...defaultValueData, isDefault: true }
-          : null,
-      }}
-      close={() => {
-        close();
-        setSearch("");
-      }}
-      onSave={async ({ level, required, defaultValue }) => {
-        await onSave(level, required, defaultValue);
-        close();
-        refetch();
-      }}
-      loading={
-        isLoadingUpdateDefaultValue ||
-        isLoadingRemoveDefaultValue ||
-        isLoadginUpdateCustomFieldSettings
-      }
-      onSearch={setSearch}
-      customFieldOptions={customFieldOptions}
-      customFieldLabel={customField}
+    <SettingsDrawer
+      title={`${customField} settings`}
+      close={close}
+      onPrimaryAction={handleSave}
+      onSecondaryAction={handleClose}
+      onDismiss={handleClose}
+      isPrimaryButtonLoading={isSavingSettings}
+      isPrimaryButtonDisabled={isPrimaryButtonDisabled}
+      scopeName={customFieldScopeName}
+      customerId={contractId}
+      unitId={unitId}
+      data-bp-custom-fields-settings-drawer
       {...props}
-    />
+    >
+      <div data-bp-settings-drawer-body>
+        <p>
+          Set how buyers in this unit should enter {customField}s during
+          checkout
+        </p>
+
+        <SettingsDrawer.ListType
+          title="List type"
+          name={`${customField}-list-type`}
+          value={listType}
+          onChange={setListType}
+          options={listTypeOptions}
+        />
+
+        <form data-bp-custom-fields-settings-drawer-form>
+          <div>
+            <h4>Input level</h4>
+            <RadioGroup
+              name="inputLevel"
+              selectedValue={formData.level}
+              onChange={(e) => {
+                setFormData((curr) => ({
+                  ...curr,
+                  level: e.target.value,
+                }));
+              }}
+            >
+              <RadioOption value="order" label="Order level" name="inputLevel">
+                Order level
+              </RadioOption>
+
+              <RadioOption value="item" label="Item level" name="inputLevel">
+                Item level
+              </RadioOption>
+            </RadioGroup>
+          </div>
+
+          <div>
+            <h4>Input requirement</h4>
+            <RadioGroup
+              name="requirement"
+              selectedValue={formData.required.toString()}
+              onChange={(e) => {
+                setFormData((curr) => ({
+                  ...curr,
+                  required: e.target.value === "true",
+                }));
+              }}
+            >
+              <RadioOption value="true" label="Required" name="requirement">
+                Required
+              </RadioOption>
+
+              <RadioOption value="false" label="Optional" name="requirement">
+                Optional
+              </RadioOption>
+            </RadioGroup>
+          </div>
+
+          <div data-bp-settings-drawer-autocomplete-dropdown-container>
+            <h4>Default {customField}</h4>
+            <span>Select the default {customField} for this unit.</span>
+
+            {formData.defaultValue?.id ? (
+              <CustomFieldSelectedCardItem
+                text={formData.defaultValue.value}
+                onCancel={() => {
+                  setFormData((curr) => ({
+                    ...curr,
+                    defaultValue: null,
+                  }));
+                  setAutocompleteValue("");
+                  setSearch("");
+                }}
+              />
+            ) : (
+              <AutocompleteDropdown
+                label=""
+                value={autoCompleteValue}
+                options={customFieldOptions}
+                shouldOpenOnFocus={false}
+                autoComplete="off"
+                shouldShowArrowDown={false}
+                onChange={(v) => {
+                  setAutocompleteValue(v.target.value);
+                  setSearch(v.target.value);
+                }}
+                placeholder={`Search by ${customField} name`}
+                renderOption={(option, index) => (
+                  <AutocompleteDropdown.Item
+                    key={option.id}
+                    closeOnClick
+                    index={index}
+                    isSelected={formData.defaultValue?.id === option?.id}
+                    onClick={() => {
+                      setFormData((curr) => ({
+                        ...curr,
+                        defaultValue: option,
+                      }));
+                    }}
+                  >
+                    {option?.value}
+                  </AutocompleteDropdown.Item>
+                )}
+              />
+            )}
+          </div>
+        </form>
+      </div>
+    </SettingsDrawer>
   );
 }

package/src/features/payment-methods/components/PaymentMethodSettingsDrawer/PaymentMethodSettingsDrawer.tsx

@@ -0,0 +1,78 @@
+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 PaymentMethodSettingsDrawerProps = Omit<
+  BasicDrawerProps,
+  "children"
+> & {
+  readonly?: boolean;
+};
+
+const PAYMENT_METHOD_LIST_TYPE_OPTIONS =
+  createListTypeOptions("payment methods");
+
+export const PaymentMethodSettingsDrawer = ({
+  close,
+  ...otherProps
+}: PaymentMethodSettingsDrawerProps) => {
+  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.PAYMENT_SYSTEMS,
+      type: listType,
+    });
+  };
+
+  return (
+    <SettingsDrawer
+      title="Payment method settings"
+      {...otherProps}
+      close={close}
+      onPrimaryAction={handleConfirmClick}
+      isPrimaryButtonLoading={isSetScopeConfigLoading}
+      scopeName={SCOPE_KEYS.PAYMENT_SYSTEMS}
+      onDismiss={close}
+      data-fs-bp-payment-method-settings-drawer
+    >
+      <SettingsDrawer.ListType
+        title="List type"
+        name="payment-method-list-type"
+        value={listType}
+        onChange={setListType}
+        options={PAYMENT_METHOD_LIST_TYPE_OPTIONS}
+      />
+    </SettingsDrawer>
+  );
+};

package/src/features/payment-methods/components/index.ts

@@ -2,3 +2,7 @@ export { AddPaymentMethodsDrawer } from "./AddPaymentMethodsDrawer/AddPaymentMet
 export { RemovePaymentMethodsDrawer } from "./RemovePaymentMethodsDrawer/RemovePaymentMethodsDrawer";
 export { RemoveMethodButton } from "./RemoveMethodButton/RemoveMethodButton";
 export { SearchPaymentMethods } from "./SearchPaymentMethods/SearchPaymentMethods";
+export {
+  PaymentMethodSettingsDrawer,
+  type PaymentMethodSettingsDrawerProps,
+} from "./PaymentMethodSettingsDrawer/PaymentMethodSettingsDrawer";

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

@@ -19,6 +19,7 @@ import {
   AddPaymentMethodsDrawer,
   RemoveMethodButton,
   RemovePaymentMethodsDrawer,
+  PaymentMethodSettingsDrawer,
 } from "../../components";
 import { useRemovePaymentMethod } from "../../hooks/useRemovePaymentMethodSubmit";
 
@@ -66,6 +67,12 @@ export const PaymentMethodsLayout = ({
     ...addDrawerProps
   } = useDrawerProps();
 
+  const {
+    open: openPaymentMethodSettingsDrawer,
+    isOpen: isPaymentMethodSettingsDrawerOpen,
+    ...paymentMethodSettingsDrawerProps
+  } = useDrawerProps();
+
   const {
     open: openRemoveDrawer,
     isOpen: isRemovePaymentMethodDrawerOpen,
@@ -153,6 +160,11 @@ export const PaymentMethodsLayout = ({
       >
         <section data-fs-payment-methods-section>
           <HeaderInside title="Payment methods">
+            <HeaderInside.Button
+              iconName="EditSettings"
+              style={{ backgroundColor: "transparent", color: "#1f1f1f" }}
+              onClick={openPaymentMethodSettingsDrawer}
+            />
             <ConditionalTooltip
               condition={allPaymentMethodsSelected}
               placement="left-center"
@@ -227,6 +239,13 @@ export const PaymentMethodsLayout = ({
             />
           )}
 
+          {isPaymentMethodSettingsDrawerOpen && (
+            <PaymentMethodSettingsDrawer
+              isOpen={isPaymentMethodSettingsDrawerOpen}
+              {...paymentMethodSettingsDrawerProps}
+            />
+          )}
+
           {isRemovePaymentMethodDrawerOpen && selectedMethod && (
             <RemovePaymentMethodsDrawer
               {...removeDrawerProps}

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/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/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.50";
+export const CURRENT_VERSION = "1.3.51";