Ensuring Global Compatibility: Resolving Decimal-Comma Input Challenges in ESHOPMAN Admin Gift Cards

Ensuring Global Compatibility: Resolving Decimal-Comma Input Challenges in ESHOPMAN Admin Gift Cards

As an e-commerce platform built for global reach, ESHOPMAN empowers merchants to manage their storefronts and operations seamlessly within HubSpot. This includes critical functions like creating loyalty gift cards. However, a recent community insight highlighted a specific challenge affecting ESHOPMAN Admin UI users in regions where decimal numbers are represented with a comma (e.g., France, Poland).

This technical discussion sheds light on an "Invalid input" error encountered when attempting to create loyalty gift cards with decimal-comma amounts, illustrating the importance of robust localization in headless commerce platforms like ESHOPMAN.

The Challenge: "Invalid Input" for Localized Amounts

Merchants operating in locales that use a comma as the decimal separator (e.g., '14,13 EUR') would find their attempts to create a gift card in the ESHOPMAN Admin UI blocked. The system would display an "Invalid input" message directly below the Value field, preventing the gift card from being created.

This issue was observed within the ESHOPMAN Loyalty Plugin's gift card creation form, a key component for managing customer loyalty programs from your HubSpot application.

Unpacking the Root Cause: String vs. Float Conversion

The core of the problem lies in how the ESHOPMAN Admin UI's form components handle localized input and subsequent validation. Specifically, in the loyalty plugin's gift card creation form, the CurrencyInput component was configured to pass the raw, localized string value (e.g., "14,13") directly to the form's state via its onChange callback:

field.onChange(values?.value ? values?.value : "")

While this preserves the user's input for display, the validation schema, which utilizes z.coerce.number().positive(), expects a standard numeric format (i.e., using a decimal point). When z.coerce.number() attempts to convert a string like "14,13", it results in NaN (Not a Number), causing the validation to fail. This behavior can be isolated and reproduced:

import { z } from "zod"

const valueSchema = z.coerce.number().positive()
valueSchema.safeParse("14,13").success // false
valueSchema.safeParse(14.13).success   // true

This highlights a common pitfall in internationalized applications built with Node.js/TypeScript, where UI components and backend validation schemas must be perfectly aligned on data format expectations.

The ESHOPMAN Solution: Leveraging Numeric Floats for Validation

The solution proposed and implemented focuses on distinguishing between the display value (localized string) and the actual numeric value (float) for validation and API submission. The CurrencyInput component already provides both in its payload (e.g., { value: "14,13", float: 14.13 }).

The fix ensures that while the localized string is maintained for user experience, the numeric float value is used for internal validation and ultimately, for submission to the ESHOPMAN Admin API. This prevents the z.coerce.number() schema from failing and allows the form to correctly process localized amounts.

This approach ensures that the ESHOPMAN platform, with its robust Node.js/TypeScript backend and HubSpot CMS storefront deployment capabilities, remains globally compatible and user-friendly, regardless of regional numeric formatting conventions.

Impact and Best Practices for ESHOPMAN Developers

This insight is crucial for ESHOPMAN developers and merchants, emphasizing:

• Localization Best Practices: Always consider internationalization (i18n) from the ground up, especially for currency and number inputs.
• Robust Form Validation: Ensure that your validation logic correctly handles different input formats while maintaining a consistent internal data representation.
• Component Awareness: Understand the full payload and capabilities of UI components like CurrencyInput to leverage both display and semantic values effectively.

By addressing such nuances, ESHOPMAN continues to enhance its capabilities as a leading headless commerce platform, offering a seamless experience for storefront management within the HubSpot ecosystem.