fix: APM phone field — required validation + { dialing_code, number } alignment

[roshan-gorasia-cko]

Fixes two related defects in the embedded APM (client.apm.authorization / apm.tokenization) phone field, both stemming from an inconsistent value shape.

Background

The phone parameter is submitted as an object keyed by { dialing_code, number }. The SDK was inconsistent about the digits key: the initial seed, prefill, and the public InitialData.phone_number type used value, while the Phone component emits number after the shopper interacts.

Bug 1 — required validation stops working

If a required phone number is entered and then removed, "required" validation stops firing and the field can be submitted empty. After interaction the value is { number: "" }, but validateField only read the value key, so it saw a non-empty object and passed.

• getComparableFieldValue() (src/apm/utils.ts) normalises a field value to its scalar (prefers number, still reads value); used in validateField (src/apm/views/utils/form.ts).
• The Phone component emits oninput when the number is cleared back into the dialing-code prefix (src/apm/elements/phone.ts), so a full clear propagates to the form instead of leaving a stale value.

Bug 2 — prefilled phone number sent under the wrong key (and not displayed)

A initialData.phone_number prefill left untouched was submitted as { dialing_code, value } rather than { dialing_code, number }, and was not rendered in the input.

• normalizePhoneValue() (src/apm/utils.ts) coerces a string / number / number / legacy value into { dialing_code, number }.
• Seed and prefill (src/apm/views/NextSteps.ts) normalise through it.
• The prefilled value is now passed to the Phone component via the prop it reads, so it renders in the input; the redundant mount-time update that would otherwise re-render in a loop was removed.
• InitialData.phone_number accepts number and keeps value as a deprecated alias, so existing prefills keep working.

Tests

• Adds Vitest with coverage for value normalisation, the required rule in both shapes, the { dialing_code, number } coercion, and an end-to-end shape check that a merchant { dialing_code, value } prefill is submitted as { dialing_code, number }.
• Tests live under a top-level test/ directory, outside the SDK build, so no test code ships in the bundle.
• yarn test is wired into the existing lint/build CI workflow.

[Copilot]

Pull request overview

This PR fixes inconsistent APM phone field value shapes by standardizing on { dialing_code, number }, ensuring required validation works after the user clears the input, and preventing prefills from being submitted under the legacy value key. It also introduces a Vitest-based test harness to exercise the real (namespace-style) TypeScript sources without shipping test code in the SDK bundle.

Changes:

• Add getComparableFieldValue() and normalizePhoneValue() utilities to normalize phone values for validation and submission.
• Update form validation, phone element behavior, and NextSteps seeding/prefill to use the canonical { dialing_code, number } shape.
• Add Vitest + Node test support and CI wiring, with regression tests covering normalization and required validation.

Reviewed changes

Copilot reviewed 12 out of 13 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
yarn.lock	Adds Vitest and its transitive dependencies to the lockfile.
vitest.config.ts	Configures Vitest to run Node-based TypeScript tests under test/**/*.test.ts.
test/support/loadNamespace.ts	Provides a harness to transpile and execute namespace-style SDK sources for testing.
test/apm/phone-value-shape.test.ts	Adds coverage for normalizePhoneValue() coercion into { dialing_code, number }.
test/apm/phone-validation.test.ts	Adds regression coverage for required validation across value vs number shapes.
src/apm/views/utils/form.ts	Switches validation to normalize values via getComparableFieldValue().
src/apm/views/NextSteps.ts	Normalizes phone seed/prefill values via normalizePhoneValue().
src/apm/utils.ts	Introduces utilities for comparable validation values and canonical phone normalization.
src/apm/types.ts	Updates InitialData.phone_number typing to prefer number and keep value as deprecated alias.
src/apm/elements/phone.ts	Aligns Phone element value shape to { dialing_code, number } and propagates clears for validation.
package.json	Adds vitest and test scripts; includes tests in verify.
eslint.config.mjs	Marks tests and Vitest config as Node-global (not browser-global).
.github/workflows/build-lint-test.yml	Runs yarn test in CI.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 12 out of 13 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (1)

src/apm/views/utils/form.ts:33

• The required validation still checks typeof value === "undefined" instead of the normalised actualValue. If a phone value comes through as an object with { number: undefined } (or { value: undefined }), getComparableFieldValue() returns undefined but the required rule will not fire, allowing an empty required phone to pass.

    switch (true) {
      case validation.required &&
        (typeof value === "undefined" || (typeof actualValue === "string" && actualValue.length === 0)): {
        return "Missing required value"
      }