LG-8264 po search frontend updates

[svalexander]

🎫 Ticket

Lg-8264

🛠 Summary of changes

Updates to the location page so it reflects the figma design. These changes should only be visible when arcgis is enabled.

📜 Testing Plan

Provide a checklist of steps to confirm the changes.

• Make changes to these lines in the application.yml file:
  arcgis_api_username: arcgis_api_password: arcgis_search_enabled: platform_auth_set_up_enabled:
• replace code in index function of usps_locations_controller.rb file and replace with: render json: proofer.request_pilot_facilities.to_json
• Navigate through ipp flow w/ failing address
• enter a location in search bar, 10421 Motor City Dr, Bethesda, MD 20817 works
• Make sure location changes are present
• Update url by appending ?locale=fr and make sure french translations are correct
• [ ] Update url by appending ?locale=es and make sure spanish translations are correct

👀 Screenshots

If relevant, include a screenshot or screen capture of the changes.

En:

Es:

Fr:

[aduth]

The JavaScript implementation of t has support for how pluralization works in Rails, so if you change the keys from to one and other, you could do something like...

t('in_person_proofing.body.location.distance', { count: numericDistance[0] });

in_person_proofing:
  body:
    location:
      distance:
        one: %{count} mile away
        other: %{count} miles away

[kellular]

@svalexander This LGTM!

Adding one note for awareness: For French, we don't want to convert/translate the distance and will be fixing this in https://cm-jira.usa.gov/browse/LG-8357

[sheldon-b]

Few minor comments otherwise looks good to me!

[sheldon-b]

Any reason not to merge this test with the one above? They're very similar already

[svalexander]

not really, i'll adjust it so its one test

[svalexander]

oh wait, they do have to be separate as locationCollectionItem can display either name or distance but not both. when the po search page goes into production though we should remove the above test as we'd just display the distance and not the po name.

[sheldon-b]

Mostly just curious: does this need to be parsed to a float? Perhaps to make the i18n count logic work? Rather than just passing the distance in as a string

[svalexander]

yes, it's to make the count work w/ i18n

[sheldon-b]

This is kind of confusing because numericDistance will have a value like ['0.1', 'mi'] which isn't numeric. Would prefer pulling out the numeric piece here instead of in the rendering logic

Suggested change

	const numericDistance = distance?.split(' ');
	// distance is a string like '0.1 mi'. Split out the numeric piece
	const numericDistance = distance?.split(' ')[0];

[svalexander]

good point

[sheldon-b]

Slight preference for && instead of ternary operator, so you don't have to specify the empty string

Suggested change

	{phone || tty ? (
	<div>
	<h4>{t('in_person_proofing.body.location.contact_info_heading')}</h4>
	<div>{`${t('in_person_proofing.body.location.phone')} ${phone}`}</div>
	<div>{`${t('in_person_proofing.body.location.tty')} ${tty}`}</div>
	</div>
	) : (
	''
	)}
	{(phone || tty) && (
	<div>
	<h4>{t('in_person_proofing.body.location.contact_info_heading')}</h4>
	<div>{`${t('in_person_proofing.body.location.phone')} ${phone}`}</div>
	<div>{`${t('in_person_proofing.body.location.tty')} ${tty}`}</div>
	</div>
	)}

[svalexander]

that's definitely a lot neater!