ENT-11429: Add billing address capture and fix tracking event issue

src/components/ErrorPage/ErrorPage.tsx

@@ -68,6 +68,22 @@ function getErrorMessage(err: unknown): string | undefined {
     return err;
   }
 
+  // Plain object (e.g. raw API error, Stripe error object) – avoid "[object Object]"
+  if (err !== null && typeof err === 'object') {
+    const errObj = err as Record<string, unknown>;
+    if (typeof errObj.message === 'string') {
+      return errObj.message;
+    }
+    if (typeof errObj.detail === 'string') {
+      return errObj.detail;
+    }
+    try {
+      return JSON.stringify(errObj, null, 2);
+    } catch {
+      return '[Unknown error]';
+    }
+  }
+
   return undefined;
 }
 

src/components/ErrorPage/tests/ErrorPage.test.tsx

@@ -127,4 +127,26 @@ describe('ErrorPage', () => {
     renderComponent();
     validateText("We're sorry, something went wrong");
   });
+
+  it('displays error detail from plain object route error', () => {
+    (useRouteError as jest.Mock).mockReturnValue({ detail: 'Detailed object error' });
+    renderComponent();
+    validateText('Detailed object error');
+  });
+
+  it('displays JSON string when plain object has no message or detail', () => {
+    (useRouteError as jest.Mock).mockReturnValue({ code: 'E_SOMETHING' });
+    renderComponent();
+    validateText('"code": "E_SOMETHING"', { exact: false });
+  });
+
+  it('falls back to provided message when route error processing throws', () => {
+    const fallbackMessage = 'Fallback prop message';
+    (isRouteErrorResponse as unknown as jest.Mock).mockImplementation(() => {
+      throw new Error('route parsing failed');
+    });
+    (useRouteError as jest.Mock).mockReturnValue({ status: 500, statusText: 'Boom' });
+    renderComponent({ message: fallbackMessage });
+    validateText(fallbackMessage);
+  });
 });

src/components/FormFields/BillingFormFields.tsx

@@ -1,8 +1,18 @@
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Form } from '@openedx/paragon';
 import { AddressElement, PaymentElement } from '@stripe/react-stripe-js';
-import { StripeAddressElementOptions } from '@stripe/stripe-js';
+import { StripeAddressElementChangeEvent, StripeAddressElementOptions } from '@stripe/stripe-js';
+import { useCallback } from 'react';
 
 import { FieldContainer } from '@/components/FieldContainer';
+import { DataStoreKey } from '@/constants/checkout';
+import { useCheckoutFormStore } from '@/hooks/useCheckoutFormStore';
+
+import type { UseFormReturn } from 'react-hook-form';
+
+interface BillingFormFieldsProps {
+  form: UseFormReturn<BillingDetailsData>;
+}
 
 const BillingAddressTitle = () => (
   <h3 className="mb-3">
@@ -33,31 +43,72 @@ const BillingPaymentTitle = () => (
   </>
 );
 
-const BillingFormFields = () => {
-  /**
-   * Stripe AddressElement configured for collecting the cardholder’s billing address.
-   *
-   * The `mode: "billing"` option ensures the address is tied to the payment method
-   * and used for fraud checks and payment authorization.
-   *
-   * Docs: https://docs.stripe.com/elements/address-element
-   */
+/**
+ * BillingFormFields component
+ *
+ * Renders the billing address form and payment element for the billing details page.
+ * Uses Stripe AddressElement and PaymentElement.
+ * AddressElement provides autocomplete/manual entry and returns
+ * normalized address fields (line1, line2, city, state, postal code).
+ */
+const BillingFormFields = ({ form }: BillingFormFieldsProps) => {
+  const billingDetailsData = useCheckoutFormStore(
+    (state) => state.formData[DataStoreKey.BillingDetails],
+  );
+  const setFormData = useCheckoutFormStore((state) => state.setFormData);
+
+  const onAddressChange = useCallback((event: StripeAddressElementChangeEvent) => {
+    const name = event.value?.name || '';
+    const country = event.value?.address?.country || '';
+    const line1 = event.value?.address?.line1 || '';
+    const line2 = event.value?.address?.line2 || '';
+    const city = event.value?.address?.city || '';
+    const state = event.value?.address?.state || '';
+    const zip = event.value?.address?.postal_code || '';
+
+    form.setValue('fullName', name, { shouldValidate: true, shouldDirty: true, shouldTouch: true });
+    form.setValue('country', country, { shouldValidate: true, shouldDirty: true, shouldTouch: true });
+    form.setValue('line1', line1, { shouldValidate: true, shouldDirty: true, shouldTouch: true });
+    form.setValue('line2', line2, { shouldValidate: true, shouldDirty: true, shouldTouch: true });
+    form.setValue('city', city, { shouldValidate: true, shouldDirty: true, shouldTouch: true });
+    form.setValue('state', state, { shouldValidate: true, shouldDirty: true, shouldTouch: true });
+    form.setValue('zip', zip, { shouldValidate: true, shouldDirty: true, shouldTouch: true });
+
+    setFormData(DataStoreKey.BillingDetails, {
+      ...billingDetailsData,
+      fullName: name,
+      country,
+      line1,
+      line2,
+      city,
+      state,
+      zip,
+    });
+  }, [billingDetailsData, form, setFormData]);
+
   const addressElementOptions: StripeAddressElementOptions = {
     mode: 'billing',
   };
+
   return (
     <>
       <FieldContainer>
         <BillingAddressTitle />
         <AddressElement
           options={addressElementOptions}
+          onChange={onAddressChange}
         />
+        {form.formState.errors?.fullName?.message && (
+          <Form.Control.Feedback type="invalid" hasIcon={false} className="d-block mt-2">
+            {form.formState.errors.fullName.message}
+          </Form.Control.Feedback>
+        )}
       </FieldContainer>
       <FieldContainer>
         <BillingPaymentTitle />
         <PaymentElement
           options={{
-            layout: 'tabs', // or 'accordion'
+            layout: 'tabs',
           }}
         />
       </FieldContainer>