Openfoodnetwork: States don't update dynamically when you change country

[myriamboure]

Description

If I create an entreprise in the back office / modify a profile and want to use an address which is not in the main instance country, the list of states doesn't update.

Expected Behavior

When I change the country, the states list update automatically to those corresponding to that country.

Actual Behavior

When I change the country, the states list available remains the one of the previous country selected.

Steps to Reproduce

1. Make sure you use an instance where you have localization files for at least two countries, with associated states.
2. Create an entreprise, you will see by default the country and state proposed are the one of country 1 (the country by default of the instance I guess)
3. Try to change the country to country 2, you will see the state doesn't uptade.
4. Save: you get the error message but now the states have been updated and you can select the right state.
5. Save again, now that works, no error message.

Animated Gif/Screenshot

https://www.useloom.com/share/c036bde11ccc4e59ba47b2e5f53c805c

If I save, I get an error message:

But then I realize the states list have been updated and I can set up the right state.

Context

In France we have a user running a hub based in Spain with Spanish producers, he hit this issue each time he creates a new entreprise (new producer for instance)

Severity

S4

Your Environment

• Version used: 1.10.1
• Browser name and version: Chrome 53.0.2785.116 (64-bit)
• Operating System and version (desktop or mobile): Ubuntu 16.04 LTS

Possible Fix

RAS

[myriamboure]

@pacodelaluna do you think Claire could work on that ?

[HugsDaniel]

@myriamboure, is someone working on this one yet ?

[sauloperez]

This is annoying me also in the public site, when placing an order as a customer.

[myriamboure]

Nop, no one is working on it, go for it @HugsDaniel !!! :-)
I'll update the issue description to follow the template right now, so that you have all the info you need.

[luisramos0]

Hey, I had a look at this one. This is not so straight forward, at least for me :-)

Possible Tech solutions:

We could just reload the page when the country is changed so that the correct states would be reloaded but some other data may be unsaved at that point, for example, when creating the enterprise. I don't think this viable.

The data is not available on the browser: the page is loaded with the list of states of the default (or selected), country, when the user changes the country, the list of states for that new country is not there. So, to fix this we need to fetch the list of states for the new country from the server. I see two options for this:

• some form of async call to server (api?) to fetch the list of states of the selected country
• (maybe easier?) make the initial data provided to the form include all the states of the system, not just the states of the default (or selected) country and make the UI handle the correct list of states to display according to what country is selected.

There are way to many things I don't know about the project and specially the technologies, so I need feedback :-)
Thanks,
Luís

[luisramos0]

On the checkout state selector, for example in katuma: https://alpha.katuma.org/checkout?locale=pt
After selecting country Portugal, I don't think the user can select Portuguese states. The states are the Spanish ones. I don't see a workaround for the Portuguese user in this case to select a portuguese states (regions).

[myriamboure]

:point_up: @mkllnk @oeoeaio @Matt-Yorkley ?
I guess the solution you find might be the same for https://github.com/openfoodfoundation/openfoodnetwork/issues/2106 by the way.

[luisramos0]

ah, nice hint @myriamboure! The address management on the consumers screen (#2106) is totally different from enterprises and checkout. It's done with angular (not rails). It's basically the "maybe easier?" solution I mention above.
So, on the consumers screen the data is already there, we only need to fix the behaviour. Should be straight forward.
On the enterprises and also checkout screens, we need to move the data to the browser and manage it with angular as it'ss done on the consumers screen.

I think I can handle this but it will take me some time. I am still learning rails...

[luisramos0]

As a reference, there are 3 related open issues:

• this one (#1538) for enterprises management BO
• this one (#2106) for customers management BO
• and this one (#2105) for the checkout process FO

[Matt-Yorkley]

As we need to dynamically change the form content, I'd suggest we need an Angular solution, and it might not be an easy one for complete beginners...

[Matt-Yorkley]

On the upside, we can probably come up with a single solution to close all 3 of those issues.

[luisramos0]

Hi @Matt-Yorkley, thanks for your feedback.
I think I now understand the Injection Helper and how it injects the data into the HTML, I think I know what I need to do here. I'll start with fixing the checkout issue and to do this I can mimic the logic (hopefully extracting to a common service) used in the enterprise registration process (angular controller/service that handles the select boxes).
I'll give it a try...

[mkllnk]

Great @luisramos0. I agree it's not a simple task. But if you feel like you can solve it, even better. You are beyond the "good first issues" now. :-D :+1:

[myriamboure]

I invited you to the "community" team @luisramos0 so that you can assign you to issues :-) Tell me if any issue.

[luisramos0]

Hi @myriamboure, I dont think I am able to assign myself to issues yet.

Also, this issue is not just on enterprise creation, it's also on the edit screen.

[luisramos0]

Hi tech guys,
I have changed the country and state selectors to angular as I did for checkout and customers:
There is a difference here I need you guidance with: the angular model is not picking up the form value for country and state that come from the server (enterprise[address_attributes][country_id]), I believe I need to inject country and state in the model object Enterprise on the ng-controller. To do that I believe I need to change the inject_enterprise_ams method on the server side. How/where do I change the model of Enterprise to include the address country and state as needed?
Is this correct? Is there another way?
Thanks!
Luís

[sauloperez]

Is https://github.com/openfoodfoundation/openfoodnetwork/pull/2341 the PR where you had this problem @luisramos0 ?

[luisramos0]

Hi @sauloperez, I didn't put the PR because it's not ready, the build is broken and the question is related to the existing code: inject_enterprise_ams.
I created a PR now:
https://github.com/openfoodfoundation/openfoodnetwork/pull/2357