Connect Registration/Profile Page Improvements

[RishiRajSahu]

• Mark Required Fields Registration Pages: *Required Indication on Screen 1 #3262

• Split First Name & Last Name into 2 Fields

• On the registration page for Connect, there should now be two fields for name: First Name and Last Name.

• On the profile page for Connect, there should now be two fields for name: First Name and Last Name.

• Update Business Number in Profile Settings

• Update 'Business phone' on the profile page in Connect to match the registration page, where the requirement for country code is called out and the dropdown of codes by country is available.

• Country List Alphabetization

• Ensure the registration page's country list in the dropdown menu is in descending alphabetical order

• Ensure the profile page's country list in the dropdown menu is in descending alphabetical order

• Country List Responsive Typing

• Enable responsive typing/selection for country selection on the registration page.

• Enable responsive typing/selection for country selection on the profile page.

[RishiRajSahu]

@vigneshTheDev are you available to take up this issue ?

[vigneshTheDev]

Hi @RishiRajSahu, is registration page part of the connect-app?

[RishiRajSahu]

@vigneshTheDev Its part of accounts app https://github.com/appirio-tech/accounts-app

[vikasrohit]

It might save some time from you investigation @vigneshTheDev, registration page is part of accounts-app (angular app) as Rishi said, however, it is using a React component which is coded in https://github.com/appirio-tech/react-components/tree/feature/connectv2/components/RegistrationScreen. Angular provides props to the component and the component has the logic of UI control and then it calls the callbacks defined in the angular model.

[vigneshTheDev]

Thanks @vikasrohit. That's helpful.

[vigneshTheDev]

Hi @RishiRajSahu, could you please clarify these:

Enable responsive typing/selection for country selection

Here, are we looking for replacing the existing control with another one that allows typing on mobile devices? Like this one: https://ibb.co/T1Rps9J?

registration page's country list

We don't have the country list on the registration page right? we're deriving country name from the country code of business phone. Should we add the country list?

[vigneshTheDev]

Split First Name & Last Name into 2 Fields

I see 2 traits (basic_info & connect_info) are getting updated whenever we save the profile settings. In the backend, it looks like basic info modal directly supports 'firstName' and 'lastName' fields. But connect_info model supports only 'firstNLastName' field. Check these files in member service repo service/src/main/java/com/appirio/service/member/api/MemberProfileBasicInfo.java & service/src/main/java/com/appirio/service/member/api/MemberProfileConnectInfo.java.

Should we keep it that way or should we modify the connect_info model to support firstName and lastName? If we need to modify the connect_info model, please provide me access to the member service repo.

[vigneshTheDev]

Ensure the country list in the dropdown menu is in descending alphabetical order

I'm curious why we want to display the country list in descending order instead of ascending order. Just want to understand the requirement clearly. We want to display Zimbabwe to Afghanistan instead of Afghanistan to Zimbabwe right?

[vigneshTheDev]

Mark Required Fields #3262

Registration page has two more required fields: username & password. Should we mark them as well?

[RishiRajSahu]

@vigneshTheDev

1. Yes we want responsive suggestion on the field while typing for the country names for both web/mobile.
2. Regarding country list, I have check it once myself the ultimate goal is to make registration/profile page behave similar, still I will get back to you on that. Where does country code for phone is coming ?
3. Keep connect_info model as it is, but we should be able to render it correctly on profile page of Connect as separate
4. I think its A -> Z, A being the biggest.
5. Yes mark username & password too.

[vigneshTheDev]

Thanks for the clarifications @RishiRajSahu

2. Country code is coming from the business phone number input. Please look at these lines:

• https://github.com/appirio-tech/react-components/blob/feature/connectv2/components/RegistrationScreen/index.jsx#L153
• https://github.com/appirio-tech/react-components/blob/feature/connectv2/components/RegistrationScreen/index.jsx#L66
• https://github.com/appirio-tech/react-components/blob/feature/connectv2/components/RegistrationScreen/index.jsx#L90

[RishiRajSahu]

@vigneshTheDev so we are implicitly picking country as per phone country selected. So we can have same behaviour profile page as well, the difference would be the country filed will be populated similar to phone country codes, ref this issue #3245 , if the country list suggest in this issue is the one used for phone number country.

Another thing, we need to take care of country update after updating our profile page because -

1. changing the phone number code will update the country selected as well
2. changing the country will also affect phone number code

should we show some alert like changing the phone country code would result in change of selected country as well below ?

[vigneshTheDev]

@RishiRajSahu, we may not be able to use https://github.com/appirio-tech/ng-iso-constants/blob/dev/src/ng-iso-constants/services/iso-3166.js in connect-app directly, as it's inside an angular service. Shall we use this instead: https://github.com/appirio-tech/connect-app/blob/dev/src/helpers/ISOCountries.js? It's exactly the same as the list in ng-iso-constants/services/iso-3166.js.

About the country update,
We can tie the country code of business phone with the country input. But if there is a scenario, where we should allow different values for country code of business phone and country selection, it'll negatively impact the UX.
Shall we provide an option to update the country code / country selection instead of automatically changing? The flow I'm suggesting is like this:

• When the user changes the country code of business phone
• we show a hint below the business phone field asking if the user wants to update country selection as well.
• If he confirms, we update the country selection. Otherwise, we leave it intact.

We can handle the change of country selection in a similar way.

If you don't see such scenario, we can go with automatic update as well (like you suggested). But in that case, the country selection is redundant. We can remove it and go with the registration page way of handling.