add locale to context provider

[pbennett1-godaddy]

Summary

Overview

This PR adds locale support to the GoDaddyProvider and updates the currency formatting system to automatically use the locale from context throughout the application.

Changes

1. GoDaddyProvider Enhancement

• Added locale prop to GoDaddyProvider component (packages/react/src/godaddy-provider.tsx)
  • New optional locale?: string prop in GoDaddyProviderProps interface
  • Locale value is stored in the GoDaddy context and made available to all child components
  • Defaults to 'en-US' if not provided

2. Currency Formatting Improvements

• Created useFormatCurrency hook (packages/react/src/components/checkout/utils/format-currency.ts)
  • New hook that automatically retrieves locale from GoDaddyProvider context
  • Returns a formatCurrency function that uses the context locale as default
  • Maintains backward compatibility - locale can still be overridden per call
  • Preserves existing formatCurrency function for direct usage

3. Component Updates

Updated 10 components to use the new useFormatCurrency hook:

Checkout Components

• line-items/line-items.tsx - Product line items display
• totals/totals.tsx - Order totals and summary
• tips/tips-form.tsx - Tip selection form
• shipping/shipping-method.tsx - Shipping method selection
• payment/payment-form.tsx - Payment form
• payment/checkout-buttons/express/godaddy.tsx - Express checkout button
• payment/utils/use-build-payment-request.ts - Payment request builder
• form/checkout-form.tsx - Main checkout form

Storefront Components

• storefront/product-card.tsx - Product card display
• storefront/product-details.tsx - Product details page

4. Code Cleanup

• Removed deprecated function from lib/utils.ts
  • Deleted old formatCurrency function that didn't support context
  • All usage migrated to new hook-based approach

Usage Example

  import { GoDaddyProvider } from '@godaddy/react';

  function App() {
    return (
      <GoDaddyProvider
        locale="fr-FR"  // New prop - sets locale for all currency formatting
        clientId="your-client-id"
        storeId="your-store-id"
      >
        <YourApp />
      </GoDaddyProvider>
    );
  }

Changeset

• Changeset added (docs)

Test Plan

[changeset-bot]

🦋 Changeset detected

Latest commit: b0868f9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@godaddy/react	Patch
nextjs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[wcole1-godaddy]

Code Review Findings

After reviewing this branch, I've identified a few issues that should be addressed:

1. Default Locale Issue (Critical)

File: packages/react/src/godaddy-provider.tsx (line 123)

The default locale is set to 'fr-FR':

locale = 'fr-FR',

This should be 'en-US' to match the default enUs localization and avoid breaking existing behavior with unexpected French formatting.

2. Missing Runtime Fallback

File: packages/react/src/components/checkout/utils/format-currency.ts

The currency formatter should wrap Intl.NumberFormat in a try/catch to handle invalid locales gracefully:

try {
  const formatter = new Intl.NumberFormat(locale, options);
  return formatter.format(amount);
} catch (error) {
  // Fallback to en-US for invalid locales
  const formatter = new Intl.NumberFormat('en-US', options);
  return formatter.format(amount);
}

3. Parameter Naming Clarity

The isInCents parameter would be clearer as inputInMinorUnits since it's more generic and not specific to cent-based currencies (e.g., JPY, KWD have different precision). This makes the API more intuitive when working with various currencies.

Suggested refactor:

export function formatCurrency({
  amount,
  currency,
  locale,
  inputInMinorUnits = true,
  returnRaw = false,
}: {
  amount: number;
  currency: string;
  locale?: string;
  inputInMinorUnits?: boolean;
  returnRaw?: boolean;
}): string