shoc-frontend-new/src/lib/address/vendor-address.ts
Alexandre Brandizzi 80be702733
feat(vendors): structure the address into Street/City/State with autocomplete (#176)
* feat(vendors): structure the address into Street/City/State with autocomplete

The Vendor form carried one free-text "Address (optional)" line, with City,
State and Zip already present but hidden behind display:none, and a separate
"Google Maps URL" input someone had to paste into by hand.

Street Address, City and State are now three required fields. Typing three
characters in Street Address offers up to four candidates; picking one fills
all three at once, and typing without picking stays plain free text. The
Google Maps URL input is gone — the location is derived from the address, the
Street Address itself is the link in view mode, and a keyless map preview
renders once all three parts are present. Zip stays in the payload but out of
the form; the ticket scopes the visible set to three.

The suggestion algorithm, candidate cities and copy are ported from the
approved prototype rather than invented, so dev and design agree on what a
dispatcher sees. Suggestions are deterministic for a given input on purpose:
a reshuffling list moves a row out from under the pointer mid-click.

Test fixtures that predate the requirement now carry an address, so each test
still fails for the reason it is about. The two drawer tests asserting the
stored-URL "Open in Google Maps" row are rewritten to the behaviour that
replaced it.

Delivers SH-271.

* feat(work-orders): show the vendor location map in the Vendor dialog

The last of SH-271's five acceptance bullets. The Work Order Vendor dialog
gets one composed address line from the vendor dropdown payload, not the
structured parts the form and detail drawer hold, so the preview takes the
line directly — it is saved data either way, and the completeness rule exists
to stop a map of half-typed input, not to reject a stored address.

The dialog's hand-built maps URL now goes through the shared helper, so the
link and the preview cannot drift apart.

* test(vendors): update the browser specs and pixel baselines for the new address

`npm run verify` does not run Playwright, so the first push went out with the
browser suite still asserting the UI this ticket removes. Three assertions
were stale: the combined "Address (optional)" input, the "Google Maps URL
(optional)" input, and the detail drawer's separate "Open in Google Maps"
row — now replaced by the Street Address itself being the link, checked
against the derived href. A fourth test created a vendor without an address,
which the new requirement blocks; it fills one, so the test still fails only
for the reason it is about.

Baselines regenerated in mcr.microsoft.com/playwright:v1.61.1-noble, the image
CI uses — macOS font rendering produces different pixels. Exactly three of the
sixteen were rewritten (vendor add, edit, detail); the rest, including every
Work Orders shot, are byte-identical, which is the evidence that this change
stays inside the surfaces it claims.

* test(vendors): keep the map preview out of the pixel baselines

The visual suite mocks `**/api/**` and nothing else, so the address map
preview's iframe reached maps.google.com for real. Whether that frame paints,
and what it paints, depends on the network and on what Google serves that
minute — which is why `vendor-edit` failed in CI at 18178 differing pixels
while passing in a container that could not reach Google. Regenerating the
baseline would not have fixed it; it would have moved the flake.

Aborting the request pins the frame to a blank box, so the shot measures our
layout and nothing else. The committed baselines are unchanged by this — they
were already correct — and a second container run with no --update passes
16/16, which is the evidence the shot is now stable rather than merely green
once.

* fix(vendors): complete structured address map flows

* test(vendors): align add visual baseline with CI

---------

Co-authored-by: Codex Review Integration <codex-review@local.invalid>
2026-09-15 16:13:15 -03:00

135 lines
4.5 KiB
TypeScript

/**
* Structured address helpers shared by Vendors and, when it is built, Sites.
*
* The suggestion list is deliberately MOCKED — SH-271 asks for a real-feeling
* autocomplete with no Google Places call and no API key. The algorithm,
* candidate pool and copy are ported from the approved prototype so dev and
* design agree on what a dispatcher sees.
*/
export type AddressParts = {
street: string;
city: string;
state: string;
};
export type AddressSuggestion = AddressParts & {
/** What the option row reads as: "<typed street>, <city>, <state>". */
label: string;
};
/** Minimum characters before any suggestion appears. */
export const ADDRESS_SUGGESTION_MIN_LENGTH = 3;
/** How many candidates the field offers at most. */
export const ADDRESS_SUGGESTION_LIMIT = 4;
/**
* Candidate cities, ported verbatim from the prototype.
*
* These are plausible distribution-centre metros rather than a geocoder: the
* point is that a dispatcher sees a short, stable list to pick from, not that
* the address is real.
*/
const SUGGESTION_CITIES: ReadonlyArray<Omit<AddressParts, "street">> = [
{ city: "Dallas", state: "TX" },
{ city: "Indianapolis", state: "IN" },
{ city: "Memphis", state: "TN" },
{ city: "St. Louis", state: "MO" },
{ city: "Orlando", state: "FL" },
{ city: "Austin", state: "TX" },
{ city: "Huntsville", state: "AL" },
{ city: "Rockford", state: "IL" },
{ city: "Columbus", state: "OH" },
{ city: "Tampa", state: "FL" },
{ city: "Cleveland", state: "OH" },
{ city: "Atlanta", state: "GA" },
{ city: "Chicago", state: "IL" },
{ city: "Phoenix", state: "AZ" },
{ city: "Portland", state: "OR" },
{ city: "Jersey City", state: "NJ" },
{ city: "Denver", state: "CO" },
{ city: "Miami", state: "FL" },
];
/**
* Deterministic index from a seed string.
*
* Deterministic on purpose: the same typed text must offer the same candidates
* every keystroke and every render, or the list reshuffles under the pointer
* while someone is trying to click a row.
*/
function seededIndex(seed: string, size: number): number {
let hash = 0;
for (let index = 0; index < seed.length; index += 1) {
hash = (hash * 31 + seed.charCodeAt(index)) >>> 0;
}
return hash % size;
}
/**
* Up to four candidates for what the dispatcher has typed so far.
*
* The typed text is always kept as the street; only City and State are
* proposed. Selecting a candidate fills all three, and typing without selecting
* leaves plain free text — the field never locks the user out of their own
* input.
*/
export function suggestAddresses(input: string): AddressSuggestion[] {
const street = input.trim();
if (street.length < ADDRESS_SUGGESTION_MIN_LENGTH) return [];
const seen = new Set<string>();
const suggestions: AddressSuggestion[] = [];
for (
let attempt = 0;
suggestions.length < ADDRESS_SUGGESTION_LIMIT && attempt < SUGGESTION_CITIES.length;
attempt += 1
) {
const candidate =
SUGGESTION_CITIES[seededIndex(`${street}#${attempt}`, SUGGESTION_CITIES.length)];
if (!candidate) continue;
const key = `${candidate.city},${candidate.state}`;
if (seen.has(key)) continue;
seen.add(key);
suggestions.push({
label: `${street}, ${candidate.city}, ${candidate.state}`,
street,
city: candidate.city,
state: candidate.state,
});
}
return suggestions;
}
/** The single-line form Google is asked about. Empty when there is nothing to ask. */
export function buildAddressQuery(parts: Partial<AddressParts>): string {
return [parts.street, parts.city, parts.state]
.map((part) => part?.trim() ?? "")
.filter(Boolean)
.join(" ");
}
/** Link target for the clickable Street Address. Empty string when unmappable. */
export function mapsSearchUrl(parts: Partial<AddressParts>): string {
const query = buildAddressQuery(parts);
return query
? `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`
: "";
}
/**
* Embed URL for the inline preview.
*
* `output=embed` is the keyless form: it renders in an iframe with no API key,
* no billing account and no Places request, which is what SH-271 requires.
*/
export function mapsEmbedUrl(parts: Partial<AddressParts>): string {
const query = buildAddressQuery(parts);
return query ? `https://www.google.com/maps?q=${encodeURIComponent(query)}&output=embed` : "";
}
/** A preview is only meaningful once all three parts are present. */
export function hasCompleteAddress(parts: Partial<AddressParts>): boolean {
return Boolean(parts.street?.trim() && parts.city?.trim() && parts.state?.trim());
}