Abdel add home country option to user setup

[abdel-lall]

Description

a. (PRIORITY MEDIUM) Jae: Later PR/AFTER ABOVE: Create option for “home country”(WIP Abdel)
i. When people fill out their own Onboarding details (see PR 1073), I’d like them to have an option to represent their home country if it is different from the country they are currently residing in. If they choose that option, it should update the map with their details for their country option instead of their location input for timezone purposes.
ii. Field: “Do you represent a country other than your current residence?”
iii. “i”: One Community is a global effort and international team that has had volunteers volunteering from and/or representing <# (currently 60)> countries around the world. Complete this field if you are currently residing in a country other than your own and wish to be represented on our global contributors map with your birth country instead of your current country or residence.
iv. This option also needs a “Read the requirements” box AND a followup confirmation popup:

1. Box mouseover of the “Read the requirements” text: Please only choose this option if you were born and lived for a fair amount of time (10+ years) in the country you are stating you represent.
   a. Please make this editable by Owners using the already existing code for this
2. Popup: Thank you for representing our global community! By stating you are a native of a country other than the one you are currently living in, you certify you were born and/or lived the majority of your life and call it “home”.
   a. Yes option: input is accepted and it says: Thank you!
   b. No option: input is cleared and it says: No problem, thank you!
3. Please add the popup field in # 2 to the Other Links>Popup Management too
   v. ALSO: Request they add a photo, see below.

Related PRS (if any):

This frontend PR is related to the #628 backend PR.

How to test:

1. check into current branch

Screenshots or videos of changes:

Untitled.video.14.mp4

[sucheta90]

Hello @abdel-lall, I started the local branch and tried to login as ADMIN, however it keeps throwing a CORS error. I am not sure if it's just my user profile. I would be happy to take a look again, once someone confirms it. Please refer to the video.

PR.1608+628.mov

[Alforoan]

It doesn't seem to be able to send a new link to the user.

pr.review.1608.mp4

[ljrirene]

Hi Abdel, when logged in as an admin, I didn't get the correct response after clicking the "send link" button. Here is my recording.

Screen.Recording.2023-12-02.at.21.47.51.mov

[this-journey]

Hello @abdel-lall! When logged in as admin it will not allow me to send a setup link.

I tried to log in as owner as well and got the same response.

[abdel-lall]

Hello team,
@sucheta90 the error you're getting might be because of frontend environment variables. Ensure this line is included in the .env file:
REACT_APP_APIENDPOINT="http://localhost:4500/api"

@this-journey , @ljrirene , @Alforoan to enable email sending, you first need to set up the backend environment variables. Please refer to the video below it shows how to get the client ID, client secret, and refresh token:

https://www.youtube.com/watch?v=-rcRf7yswfM&t=10s&ab_channel=MafiaCodes

REACT_APP_EMAIL =<your_test_email>
REACT_APP_EMAIL_CLIENT_ID =<follow the video for instructions>
REACT_APP_EMAIL_CLIENT_SECRET =<follow the video for instructions>
REACT_APP_EMAIL_REFRESH_TOKEN =<follow the video for instructions>
REACT_APP_EMAIL_CLIENT_REDIRECT_URI = https://developers.google.com/oauthplayground
sendEmail = TRUE

[DragonSlayer2401]

I was unable to send a setup link to the specified email. I checked my junk mail as well. There doesn't appear to be any console errors. But the link-sending feature is definitely not working. Please watch the demo video below for more details:

2023-12-03.12-22-25.mov

[sucheta90]

Hey @abdel-lall thank you so much for sharing the link to set up the backend environment variables. I was able to login as Admin and was able to send the email link successfully.

PR1608+628_sent_email_link.mov

The only challenge I had was the Geolocation API key. I did create one for myself to test , however couldn't make it work.

PR1608+628_checked_link.mov

Otherwise, well done with the code.

[ljrirene]

Hi Abdel, I can successfully send the setup email to a new user from the admin user. However, I got an error when set the time zone.
Here is the error I got:

Screen.Recording.2023-12-09.at.00.15.08.mov

You can find that I got Geocoding API missing error here at 1'50''.

[abdel-lall]

Hi @ljrirene,
To solve the error message you're getting, you need obtain free API key from https://opencagedata.com/pricing
and add it to the env variables (backend).

TIMEZONE_PREMIUM_KEY=<API Key>
TIMEZONE_COMMON_KEY=<API Key>

[pika-chu11]

Hi @abdel-lall , I have tested your PR. You did a good job!

• The 'Send Setup Link' button is functional
  • I was able to send a link to create a new user
• I have checked that I need to agree with the requirement before setting Home Country.
• I was able to find my home country and set it with a Popuo asking "Do you want to represent [city], [country]?" ([your can fill in whatever city you like])
  • Yes potion: input message "Thank you" did show up.
  • No option: input message "No Proble, thank you!" did show up.

However,
I cannot create a new user after I fill in all the information that required. I am not sure what happened.

Please watch the video for more detail:

PR.1608.+.628.mp4

[cvtqx]

I was able to set up the email sending and started filling out the form. All the form functionality (the popup window, the info modal on hover) works as described. However, I had an issue with geolocation, that feature did not work even though I obtained the API key as you noted in one of your comments.
Can you please include the instructions in the PR description on how to set up this API?

See video of my test:

Screen.Recording.2023-12-20.at.1.05.21.PM.mov

[keyunhuangg]

I tried to send link to a email that is not on the system and the page seem to be stuck. However the system does detect sending set up link to user email that is already in the system.

[abdel-lall]

@cvtqx The issue should now be resolved. Please take a moment to test it when you have a chance.

[abdel-lall]

@keyunhuangg Please use the updated instructions for the backend. to setup the env variables.

[cvtqx]

Thanks for updating the instructions! Everything works as described. Great work! One thing to consider - and this is the reason why I wasn't able to find my location yesterday - you need to enter a city name not a country name to be able to locate yourself. If you only enter a country name, it does not work. Perhaps this needs to be added as a placeholder or something. see video for clarification:

Adding location:

Screen.Recording.2023-12-21.at.1.05.13.PM.mov

Map:

Screen.Recording.2023-12-21.at.1.12.51.PM.mov

[abdel-lall]

@cvtqx The changes I pushed yesterday were aimed at enabling the input of country names, not just city names. Please ensure you update your local branch before testing to incorporate these updates. Thank you!

Recording.2023-12-21.233844.mp4

[cvtqx]

Awesome job! I've been able to set my location with just a country name.

[one-community]

Thank you all, merging!