Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Shipping labels] Handle country and state selection for origin addresses #14867

Merged
merged 7 commits into from
Jan 15, 2025

Conversation

rachelmcr
Copy link
Contributor

Part of: #13781
⚠️ Depends on #14866 ⚠️

Description

This adds support for selecting a country and state when editing an origin address in the Woo Shipping label flow.

Apologies for the slightly large PR; many of the lines of changes are from unit tests. I thought this was preferable to splitting the PR, given that it's hard to test the fetching behavior without the corresponding selection UI.

Updated behavior:

  • The address form now fetches a list of countries from remote/storage to use for selecting a new country and state.
  • You can now tap on the country in the address form to open a list of countries and select a new country.
  • When editing an origin address, the list of countries is filtered to USPS-approved countries. (This matches the legacy behavior and extension behavior; it is hardcoded because there isn't a list of supported countries available from the API.)
  • When you select a new country, it clears the previous state selection. (If you keep the same country selection, the state won't change.)
  • If you select a country with a list of states, you can tap on the state in the address form to open the list and select a new state.
  • If you select a country that doesn't have a list of states, the state field becomes an optional text field. (This matches the web behavior.)

Testing information

  1. Ensure the Woo Shipping extension is installed, activated, and set up on your store.
  2. Create or open an order with at least one physical product and the processing status.
  3. Tap "Create Shipping Label" in order details.
  4. Open the "Shipment details" bottom sheet.
  5. Tap the "Ship from" origin address.
  6. Tap the edit (pencil) icon on one of the origin addresses.
  7. Confirm the country and state fields show the expected values for the selected address.
  8. Tap the country and confirm it opens the list of USPS-approved countries.
  9. Confirm you can filter the list and select a new country.
  10. Confirm that if you select a new country, the state field is cleared.
  11. Select a country that includes states (i.e. the US) and confirm you can tap the state field to open a list of states to select form. Confirm your new selection is reflected in the form.
  12. Select a country without states and confirm the state field becomes a text field that you can edit.

Screenshots

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-14.at.18.14.01.mp4

  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

  • The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
  • Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
  • Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on all devices (phone/tablet) and no regressions are added.

@rachelmcr rachelmcr added the feature: shipping labels Related to creating, ordering, or printing shipping labels. label Jan 14, 2025
@rachelmcr rachelmcr added this to the 21.5 milestone Jan 14, 2025
@rachelmcr rachelmcr requested a review from toupper January 14, 2025 18:15
@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Jan 14, 2025

WooCommerce iOS📲 You can test the changes from this Pull Request in WooCommerce iOS by scanning the QR code below to install the corresponding build.

App NameWooCommerce iOS WooCommerce iOS
Build Numberpr14867-9f0e01e
Version21.4
Bundle IDcom.automattic.alpha.woocommerce
Commit9f0e01e
App Center BuildWooCommerce - Prototype Builds #12543
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@toupper
Copy link
Contributor

toupper commented Jan 15, 2025

Good work @rachelmcr! It looks good to me. One minor thing, I noticed that in the Country/State selector we don't have any Cancel/Done button, but the user has to pull down the screen after selecting an item. I wonder if you consider adding buttons to make the selection more intuitive?

Copy link
Contributor

@toupper toupper left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, I just left a minor conmment regarding UI. 🚀 🚢

Base automatically changed from issue/13781-reuse-address-form to trunk January 15, 2025 10:16
@rachelmcr
Copy link
Contributor Author

I noticed that in the Country/State selector we don't have any Cancel/Done button, but the user has to pull down the screen after selecting an item. I wonder if you consider adding buttons to make the selection more intuitive?

Good point. I had considered adding those nav buttons, but since we use the same view for editing addresses elsewhere (in an order) I decided to keep using it as-is for consistency. However, I see now that where it's used for order addresses the selection view is automatically popped when the selection is made. As far as I can tell that's not actually the intended behavior, and I'm not sure we want it in this context, but it does mean the user interaction is a bit different.

After thinking it over, I decided to add a Done button here for ease of dismissing the view; that is updated in 9f0e01e. I'm not adding a Cancel button because the view changes the selection immediately, so adding a cancel action would require more involved updates to the view that I think are not worth the effort. Let me know if you have other thoughts/suggestions about that. :)

Country State
Simulator Screenshot - iPhone 16 Pro - 2025-01-15 at 10 18 38 Simulator Screenshot - iPhone 16 Pro - 2025-01-15 at 10 20 55

@rachelmcr rachelmcr enabled auto-merge January 15, 2025 10:22
@rachelmcr rachelmcr merged commit e66c465 into trunk Jan 15, 2025
12 checks passed
@rachelmcr rachelmcr deleted the issue/13781-fetch-countries branch January 15, 2025 10:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature: shipping labels Related to creating, ordering, or printing shipping labels.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants