@vtex/faststore-plugin-buyer-portal 1.3.64 → 1.3.66

package/CHANGELOG.md

@@ -7,17 +7,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.66] - 2026-02-13
+
+### Fixed
+
+- Disable "Remove from Unit" actions in sync mode instead of hiding them across Addresses, Payment Methods, Product Assortment, and Custom Fields
+- Fix address settings drawer to allow saving when only changing list type without requiring default address selection
+- Fix automatic UI refresh after switching between Synchronized List and Custom List modes (no F5 needed)
+- Fix stale sync mode state after scope config changes by refetching scope config on updates
+- Fix Product Assortment remove button sizing to remain square when disabled
+
+## [1.3.65] - 2026-02-11
+
+### Fixed
+
+- Fix cookie encoding on string transformation
+
 ## [1.3.64] - 2026-02-11
 
 ### Fixed
-- Fix build error on import invalid type in `OrgUnitBreadcrumbDropdown` 
+
+- Fix build error on import invalid type in `OrgUnitBreadcrumbDropdown`
 
 ## [1.3.63] - 2026-02-10
 
 ### Added
+
 - Include `Super Buyer Admin` role validation on mount breadcrumb path
 
 ### Changed
+
 - Remove unused `person` property from Layout components
 
 ## [1.3.62] - 2026-02-06
@@ -468,7 +487,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/1.3.64...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.66...HEAD
 [1.3.55]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.54...v1.3.55
 [1.3.54]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.53...v1.3.54
 [1.3.53]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.52...v1.3.53
@@ -531,5 +550,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [1.3.60]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.59...v1.3.60
 [1.3.59]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.58...v1.3.59
 [1.3.58]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.58
-
+[1.3.66]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.65...v1.3.66
+[1.3.65]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.64...v1.3.65
 [1.3.64]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.64

package/package.json

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

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

@@ -23,12 +23,14 @@ export type AddressDropdownMenuProps = {
   onOpen?: () => void;
   onCreate?: () => void;
   isComplete?: boolean;
+  isSyncMode?: boolean;
 };
 
 export const AddressDropdownMenu = ({
   currentAddress,
   onUpdate,
   onOpen,
+  isSyncMode = false,
 }: AddressDropdownMenuProps) => {
   const router = useRouter();
   const { pushToast } = useUI();
@@ -179,7 +181,10 @@ export const AddressDropdownMenu = ({
         )}
 
         <BasicDropdownMenu.Separator />
-        <DropdownItem onClick={openRemoveAddressDrawer}>
+        <DropdownItem
+          onClick={openRemoveAddressDrawer}
+          data-fs-bp-dropdown-menu-item-disabled={isSyncMode}
+        >
           <UIIcon name="MinusCircle" {...sizeProps} />
           Remove from Unit
         </DropdownItem>

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

@@ -123,10 +123,6 @@ export const CreateAddressSettingsDrawer = ({
     },
   });
 
-  const isConfirmButtonEnabled = Boolean(
-    shippingAddress?.id || billingAddress?.id
-  );
-
   function getFormData() {
     const data = [];
     if (shippingAddress?.id) {
@@ -153,12 +149,19 @@ export const CreateAddressSettingsDrawer = ({
       type: listType,
     });
 
-    // Set default addresses
-    setDefaultAddresses({
-      orgUnitId: router.query.orgUnitId as string,
-      customerId: router.query.contractId as string,
-      data: getFormData(),
-    });
+    // Set default addresses only if at least one is selected
+    const formData = getFormData();
+    if (formData.length > 0) {
+      setDefaultAddresses({
+        orgUnitId: router.query.orgUnitId as string,
+        customerId: router.query.contractId as string,
+        data: formData,
+      });
+    } else {
+      // Close drawer and trigger update when only list type changed
+      onUpdate?.();
+      close();
+    }
   };
 
   return (
@@ -170,7 +173,6 @@ export const CreateAddressSettingsDrawer = ({
       isPrimaryButtonLoading={
         isSetDefaultAddressesLoading || isSetScopeConfigLoading
       }
-      isPrimaryButtonDisabled={!isConfirmButtonEnabled}
       scopeName={SCOPE_KEYS.ADDRESSES}
       onDismiss={close}
       data-fs-bp-create-address-settings-drawer

package/src/features/addresses/layouts/AddressesLayout/AddressesLayout.tsx

@@ -11,7 +11,12 @@ import {
 import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
 import { Table } from "../../../shared/components/Table/Table";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
-import { useBuyerPortal, useDrawerProps } from "../../../shared/hooks";
+import {
+  useBuyerPortal,
+  useDrawerProps,
+  useGetScopeConfig,
+  SCOPE_KEYS,
+} from "../../../shared/hooks";
 import { usePageItems } from "../../../shared/hooks/usePageItems";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
@@ -74,6 +79,7 @@ export const AddressLayout = ({
 
   const handleRefetchAddresses = () => {
     setIsLoading(true);
+    refetchScopeConfig();
     refetchSearchedAddresses();
   };
 
@@ -92,6 +98,17 @@ export const AddressLayout = ({
   const { currentOrgUnit: orgUnit, currentContract: contract } =
     useBuyerPortal();
 
+  const { isSyncMode, refetchScopeConfig } = useGetScopeConfig(
+    {
+      customerId: router.query.contractId as string,
+      unitId: router.query.orgUnitId as string,
+      scopeName: SCOPE_KEYS.ADDRESSES,
+    },
+    {
+      lazy: !router.query.contractId || !router.query.orgUnitId,
+    }
+  );
+
   const columns = getTableColumns({
     nameColumnSize: "18.125rem",
     actionsLength: 2,
@@ -184,6 +201,7 @@ export const AddressLayout = ({
                                   id,
                                   ...address,
                                 }}
+                                isSyncMode={isSyncMode}
                                 onUpdate={handleRefetchAddresses}
                                 onOpen={() => {
                                   const url = buyerPortalRoutes.addressDetails({

package/src/features/custom-fields/layouts/CustomFieldsLayout/CustomFieldsLayout.tsx

@@ -10,6 +10,7 @@ import {
   useBuyerPortal,
   useDebounce,
   useDrawerProps,
+  useGetScopeConfig,
 } from "../../../shared/hooks";
 import {
   useAddDefaultValue,
@@ -63,6 +64,18 @@ export const CustomFieldsLayout = ({
   const unitId = orgUnit?.id ?? "";
   const cookie = clientContext?.cookie ?? "";
   const debouncedSearchValue = useDebounce(filter.search, 500);
+  const customFieldScopeName = `custom-fields/${customField}`;
+
+  const { isSyncMode, refetchScopeConfig } = useGetScopeConfig(
+    {
+      customerId: contractId,
+      unitId: unitId,
+      scopeName: customFieldScopeName,
+    },
+    {
+      lazy: !contractId || !unitId,
+    }
+  );
 
   useEffect(() => {
     const isNewSearchValue = lastSearchValue.current !== filter.search;
@@ -188,6 +201,7 @@ export const CustomFieldsLayout = ({
   function restartRequest() {
     setIsRefetchingAfterMutation(true);
     setCustomFieldValuesOnUnitScope([]);
+    refetchScopeConfig();
 
     if (filter.page !== 1) {
       return setFilter((curr) => ({ ...curr, page: 1 }));
@@ -224,6 +238,7 @@ export const CustomFieldsLayout = ({
             data={customFieldValuesOnUnitScope ?? []}
             customFieldlabel={customField}
             isLoading={loadingTable || isRefetchingAfterMutation}
+            isSyncMode={isSyncMode}
             onSearch={(value) =>
               setFilter((curr) => ({ ...curr, search: value }))
             }

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

@@ -16,6 +16,7 @@ export type PaymentMethodSettingsDrawerProps = Omit<
   "children"
 > & {
   readonly?: boolean;
+  onUpdate?: () => void;
 };
 
 const PAYMENT_METHOD_LIST_TYPE_OPTIONS =
@@ -23,6 +24,7 @@ const PAYMENT_METHOD_LIST_TYPE_OPTIONS =
 
 export const PaymentMethodSettingsDrawer = ({
   close,
+  onUpdate,
   ...otherProps
 }: PaymentMethodSettingsDrawerProps) => {
   const { pushToast } = useUI();
@@ -36,6 +38,7 @@ export const PaymentMethodSettingsDrawer = ({
         message: "Scope configuration updated successfully",
         status: "INFO",
       });
+      onUpdate?.();
       close();
     },
     onError: () => {

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

@@ -7,12 +7,14 @@ import { Icon } from "../../../shared/components";
 export type RemoveMethodButtonProps = {
   isLoading: boolean;
   disabled: boolean;
+  disabledTooltipContent?: string;
   onClick?: () => void;
 } & ComponentProps<"button">;
 
 export const RemoveMethodButton = ({
   isLoading,
   disabled,
+  disabledTooltipContent,
   onClick,
   ...props
 }: RemoveMethodButtonProps) => {
@@ -22,7 +24,8 @@ export const RemoveMethodButton = ({
       placement={disabled ? "left-center" : "top-center"}
       content={
         disabled
-          ? "This payment method can't be removed. Each unit must have at least one active payment method. Add another one to proceed with the removal."
+          ? disabledTooltipContent ??
+            "This payment method can't be removed. Each unit must have at least one active payment method. Add another one to proceed with the removal."
           : "Remove from unit"
       }
     >

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

@@ -1,5 +1,7 @@
 import { useState } from "react";
 
+import { useRouter } from "next/router";
+
 import {
   HeaderInside,
   InternalSearch,
@@ -13,6 +15,8 @@ import {
   useBuyerPortal,
   useDrawerProps,
   usePageItems,
+  useGetScopeConfig,
+  SCOPE_KEYS,
 } from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import {
@@ -38,6 +42,7 @@ export const PaymentMethodsLayout = ({
   totalPaymentMethods,
   page = 1,
 }: PaymentMethodsLayoutProps) => {
+  const router = useRouter();
   const [selectedMethod, setSelectedMethod] = useState<
     PaymentMethodData | undefined
   >(undefined);
@@ -61,6 +66,17 @@ export const PaymentMethodsLayout = ({
     page,
   });
 
+  const { isSyncMode, refetchScopeConfig } = useGetScopeConfig(
+    {
+      customerId: router.query.contractId as string,
+      unitId: router.query.orgUnitId as string,
+      scopeName: SCOPE_KEYS.PAYMENT_SYSTEMS,
+    },
+    {
+      lazy: !router.query.contractId || !router.query.orgUnitId,
+    }
+  );
+
   const {
     open: openAddDrawer,
     isOpen: isAddPaymentMethodDrawerOpen,
@@ -83,6 +99,8 @@ export const PaymentMethodsLayout = ({
     useBuyerPortal();
 
   const isSinglePaymentMethod = paymentMethods.length <= 1;
+  const isRemoveDisabled =
+    isSyncMode || isSinglePaymentMethod || isRemovingPaymentMethod;
   const allPaymentMethodsSelected =
     paymentMethods.length === totalPaymentMethods;
 
@@ -105,6 +123,11 @@ export const PaymentMethodsLayout = ({
     />
   );
 
+  const handleScopeConfigUpdate = () => {
+    refetchScopeConfig();
+    router.replace(router.asPath);
+  };
+
   const renderTableRows = () =>
     paymentMethods.map((method) => (
       <Table.Row
@@ -117,7 +140,12 @@ export const PaymentMethodsLayout = ({
           <RemoveMethodButton
             isLoading={isRemovingPaymentMethod}
             onClick={() => onRemoveClick(method)}
-            disabled={isSinglePaymentMethod || isRemovingPaymentMethod}
+            disabled={isRemoveDisabled}
+            disabledTooltipContent={
+              isSyncMode
+                ? "Cannot remove items while using synchronized list"
+                : undefined
+            }
           />
         }
       />
@@ -234,6 +262,7 @@ export const PaymentMethodsLayout = ({
           {isPaymentMethodSettingsDrawerOpen && (
             <PaymentMethodSettingsDrawer
               isOpen={isPaymentMethodSettingsDrawerOpen}
+              onUpdate={handleScopeConfigUpdate}
               {...paymentMethodSettingsDrawerProps}
             />
           )}

package/src/features/payment-methods/layouts/PaymentMethodsLayout/payment-methods-layout.scss

@@ -106,6 +106,7 @@
     justify-content: space-between;
     align-items: center;
     height: 2.5rem;
+    margin-bottom: var(--fs-spacing-3);
 
     @include media("<=tablet") {
       [data-fs-buyer-portal-internal-search] {

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

@@ -16,12 +16,14 @@ export type CollectionsSettingsDrawerProps = Omit<
   "children"
 > & {
   readonly?: boolean;
+  onUpdate?: () => void;
 };
 
 const COLLECTIONS_LIST_TYPE_OPTIONS = createListTypeOptions("collections");
 
 export const CollectionsSettingsDrawer = ({
   close,
+  onUpdate,
   ...otherProps
 }: CollectionsSettingsDrawerProps) => {
   const { pushToast } = useUI();
@@ -35,6 +37,7 @@ export const CollectionsSettingsDrawer = ({
         message: "Scope configuration updated successfully",
         status: "INFO",
       });
+      onUpdate?.();
       close();
     },
     onError: () => {

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

@@ -16,8 +16,10 @@ import type {
 
 export function ProductAssortmentTable({
   productAssortment,
+  isSyncMode = false,
 }: {
   productAssortment: ProductAssortmentWithAdditionalInformation[];
+  isSyncMode?: boolean;
 }) {
   const [assortmentSelected, setAssortmentSelected] =
     useState<ProductAssortmentSelectedProps | null>();
@@ -66,14 +68,18 @@ export function ProductAssortmentTable({
               searchTerm={searchTerm ?? undefined}
               actionIcons={
                 <Tooltip
-                  content={removeTooltipContent}
+                  content={
+                    isSyncMode
+                      ? "Cannot remove items while using synchronized list"
+                      : removeTooltipContent
+                  }
                   placement={"left-center"}
                 >
                   <IconButton
                     data-fs-product-assortment-row-action-button
                     icon={<Icon name={"MinusCircle"} width={20} height={20} />}
                     aria-label="Remove product assortment"
-                    disabled={removeDisabled}
+                    disabled={isSyncMode || removeDisabled}
                     onClick={() =>
                       handleRemoveSelectedAssortment({
                         id: item.id,

package/src/features/product-assortment/components/ProductAssortmentTable/product-assortment-table.scss

@@ -1,45 +1,51 @@
 [data-fs-bp-product-assortment-table] {
-	@import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
-	@import "../AddProductAssortmentDrawer/add-product-assortment-drawer.scss";
-	@import "../../../shared/components/Table/table.scss";
+  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
+  @import "../AddProductAssortmentDrawer/add-product-assortment-drawer.scss";
+  @import "../../../shared/components/Table/table.scss";
 
-	width: 100%;
+  width: 100%;
 
-	[data-fs-tooltip] {
-		--fs-tooltip-background: #1f1f1f;
-		border-bottom: none;
-		text-wrap: balance;
-		text-align: justify;
+  [data-fs-tooltip] {
+    --fs-tooltip-background: #1f1f1f;
+    border-bottom: none;
+    text-wrap: balance;
+    text-align: justify;
 
-		[data-fs-tooltip-placement="left-center"] {
-			[data-fs-tooltip-indicator="true"] {
-				margin-left: -0.1%;
-			}
-		}
-		[data-fs-tooltip-placement="top-center"] {
-			[data-fs-tooltip-indicator="true"] {
-				margin-top: -1%;
-			}
-		}
-	}
+    [data-fs-tooltip-placement="left-center"] {
+      [data-fs-tooltip-indicator="true"] {
+        margin-left: -0.1%;
+      }
+    }
+    [data-fs-tooltip-placement="top-center"] {
+      [data-fs-tooltip-indicator="true"] {
+        margin-top: -1%;
+      }
+    }
+  }
 
-	[data-fs-product-assortment-row-action-button] {
-		width: var(--fs-spacing-6);
-		height: var(--fs-spacing-6);
-		display: inline-flex;
-		border-radius: var(--fs-border-radius-pill);
-		justify-content: center;
-		align-items: center;
+  [data-fs-product-assortment-row-action-button] {
+    width: var(--fs-spacing-6);
+    height: var(--fs-spacing-6);
+    padding: 0;
+    display: inline-flex;
+    border-radius: var(--fs-border-radius-pill);
+    justify-content: center;
+    align-items: center;
 
-		&:hover:not(:disabled) {
-			background-color: #ebebeb;
-			cursor: pointer;
-		}
+    &:hover:not(:disabled) {
+      background-color: #ebebeb;
+      cursor: pointer;
+    }
 
-		[data-fs-button-icon] {
-			display: block;
-			width: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
-			height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
-		}
-	}
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    [data-fs-button-icon] {
+      display: block;
+      width: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+      height: calc(var(--fs-spacing-4) - var(--fs-spacing-0));
+    }
+  }
 }

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

@@ -12,6 +12,8 @@ import {
   useBuyerPortal,
   useDrawerProps,
   usePageItems,
+  useGetScopeConfig,
+  SCOPE_KEYS,
 } from "../../../shared/hooks";
 import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
 import {
@@ -36,7 +38,21 @@ export const ProductAssortmentLayout = ({
   const { currentOrgUnit: orgUnit, currentContract: contract } =
     useBuyerPortal();
 
-  const { data: drawerProductAssortment } = useGetProductAssortment({
+  const { isSyncMode, refetchScopeConfig } = useGetScopeConfig(
+    {
+      customerId: contractId ?? "",
+      unitId: orgUnitId ?? "",
+      scopeName: SCOPE_KEYS.COLLECTIONS,
+    },
+    {
+      lazy: !contractId || !orgUnitId,
+    }
+  );
+
+  const {
+    data: drawerProductAssortment,
+    refetchProductAssortment: refetchDrawerAssortment,
+  } = useGetProductAssortment({
     contractId,
     orgUnitId,
   });
@@ -44,14 +60,23 @@ export const ProductAssortmentLayout = ({
     contractId,
     orgUnitId,
   });
-  const { data: initialProductAssortment, isProductAssortmentLoading } =
-    useGetProductAssortment({
-      filterByScope: true,
-      contractId,
-      orgUnitId,
-      search,
-      page,
-    });
+  const {
+    data: initialProductAssortment,
+    isProductAssortmentLoading,
+    refetchProductAssortment,
+  } = useGetProductAssortment({
+    filterByScope: true,
+    contractId,
+    orgUnitId,
+    search,
+    page,
+  });
+
+  const handleScopeConfigUpdate = () => {
+    refetchScopeConfig();
+    refetchProductAssortment();
+    refetchDrawerAssortment();
+  };
 
   const isContractEmpty = !contractAssortment || contractAssortment.total === 0;
 
@@ -178,6 +203,7 @@ export const ProductAssortmentLayout = ({
                 <section>
                   <ProductAssortmentTable
                     productAssortment={productAssortment}
+                    isSyncMode={isSyncMode}
                   />
 
                   <div data-fs-bp-product-assortment-paginator>
@@ -231,6 +257,7 @@ export const ProductAssortmentLayout = ({
         {isCollectionsSettingsDrawerOpen && (
           <CollectionsSettingsDrawer
             isOpen={isCollectionsSettingsDrawerOpen}
+            onUpdate={handleScopeConfigUpdate}
             {...collectionsSettingsDrawerProps}
           />
         )}

package/src/features/shared/components/BasicDropdownMenu/basic-dropdown-menu.scss

@@ -11,15 +11,16 @@
   &:hover {
     background-color: var(--fs-bp-color-transparent-0);
   }
-  
-  &:active, &[aria-expanded="true"] {
+
+  &:active,
+  &[aria-expanded="true"] {
     background-color: var(--fs-bp-color-transparent-1);
   }
 }
 
 [data-fs-dropdown-menu] {
   &[data-fs-bp-basic-dropdown-menu] {
-	  --fs-dropdown-menu-box-shadow: var(--fs-bp-elevation-dropdown);
+    --fs-dropdown-menu-box-shadow: var(--fs-bp-elevation-dropdown);
     width: auto;
     background-color: #fff;
     padding: var(--fs-spacing-1) 0;
@@ -53,6 +54,12 @@
         }
       }
 
+      &[data-fs-bp-dropdown-menu-item-disabled="true"] {
+        opacity: 0.4;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
       &[data-fs-bp-dropdown-menu-item-mode="danger"] {
         color: #d31a15;
 

package/src/features/shared/components/CustomField/table/CustomFieldTable.tsx

@@ -32,6 +32,7 @@ interface CustomFieldTableProps {
   data: CustomFieldData[];
   actions: TableActions;
   searchTerm?: string;
+  isSyncMode?: boolean;
 }
 
 export const CustomFieldTable = ({
@@ -40,6 +41,7 @@ export const CustomFieldTable = ({
   loading,
   actions,
   searchTerm,
+  isSyncMode = false,
 }: CustomFieldTableProps) => {
   const { pushToast } = useUI();
 
@@ -122,9 +124,11 @@ export const CustomFieldTable = ({
                         actions.itemToSelect(option);
                         actions.isOnlyDeleting(false);
                       }}
+                      data-fs-bp-dropdown-menu-item-disabled={isSyncMode}
                     >
                       <Icon name="CircleRemove" /> <span>Remove from unit</span>
                     </DropdownItem>
+                    <BasicDropdownMenu.Separator />
                     <DropdownItem
                       data-fs-bp-dropdown-menu-item-mode="danger"
                       onClick={() => {

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

@@ -22,8 +22,11 @@ export const useGetScopeConfig = (
     options
   );
 
+  const isSyncMode = data?.type === "sync";
+
   return {
     scopeConfig: data,
+    isSyncMode,
     isScopeConfigLoading: isLoading,
     hasScopeConfigError: error,
     refetchScopeConfig: refetch,

package/src/features/shared/layouts/CustomFieldLayout/CustomFieldLayout.tsx

@@ -13,6 +13,7 @@ import {
 export interface CustomFieldLayoutProps {
   data: CustomFieldData[];
   isLoading?: boolean;
+  isSyncMode?: boolean;
   tableActions: TableActions;
   customFieldlabel: string;
   pagination: {
@@ -27,6 +28,7 @@ export interface CustomFieldLayoutProps {
 export const CustomFieldLayout = ({
   data,
   isLoading,
+  isSyncMode = false,
   tableActions,
   customFieldlabel,
   pagination,
@@ -88,6 +90,7 @@ export const CustomFieldLayout = ({
               actions={tableActions}
               loading={isLoading}
               searchTerm={searchValue}
+              isSyncMode={isSyncMode}
             />
             <Pagination
               data-fs-bp-custom-field-bottom-pagination

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.64";
+export const CURRENT_VERSION = "1.3.66";

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

@@ -36,7 +36,7 @@ export function getCookieWithoutSessionObjects(cookie: string) {
   const newCookie: Record<string, string> = {};
 
   for (const key in mappedCookie) {
-    if (!valuesToRemove.includes(key)) {
+    if (!valuesToRemove.includes(key.toLocaleLowerCase())) {
       newCookie[key] = mappedCookie[key];
     }
   }
@@ -80,14 +80,12 @@ export function getUserIdFromCookieServerSide(data: LoaderData): string {
 }
 
 export function getCookieAsString(cookie: Record<string, string>): string {
-  return (
-    JSON.stringify(cookie)
-      .replace(/[{}]/g, "")
-      .replace(/[{}]/g, "")
-      .replace(/"/g, "") // Remove all quotes
-      .replace(/:/g, "=") // Replace all colons with equals
-      .replace(/,/g, ";") ?? ""
-  );
+  let cookieString = "";
+  Object.keys(cookie).forEach((cookieKey) => {
+    cookieString += `${cookieKey}=${encodeURIComponent(cookie[cookieKey])};`;
+  });
+
+  return cookieString.slice(0, cookieString.length - 1);
 }
 
 function parseJwt(token: string): ParsedCookie {