fix: setting countryCode when updating country

packages/components/src/CommentItem/CommentItem.tsx

@@ -85,6 +85,7 @@ export const CommentItem = (props: IProps) => {
           <Flex sx={{ gap: 2, flexGrow: 1 }}>
             <Box data-cy="commentAvatar" data-testid="commentAvatar">
               <Avatar
+                data-cy="commentAvatarImage"
                 src={creatorImage ?? defaultProfileImage}
                 sx={{
                   objectFit: 'cover',

packages/components/src/Username/Username.tsx

@@ -37,6 +37,7 @@ export const Username = ({ user, sx, isLink = true }: IProps) => {
               countryCode={countryCode}
               svg={true}
               title={countryCode}
+              data-cy={`country:${countryCode}`}
             />
           </Flex>
         ) : (

packages/cypress/src/integration/howto/discussions.spec.ts

@@ -36,6 +36,30 @@ describe('[Howto.Discussions]', () => {
     cy.contains(`${howtoDiscussion.comments.length + 1} comments`)
     cy.contains(newComment)
 
+    // The following step isn't possible to test atm due to the relationship between
+    // the functions listen for changes and how cypress creates new document collections
+    // for each test run.
+    // cy.step('Updating user settings shows on comments')
+    // cy.visit('/settings')
+    // cy.setSettingBasicUserInfo({
+    //     country: 'Saint Lucia',
+    //     description: "I'm a commenter",
+    //     displayName: visitor.username,
+    //   })
+    // cy.setSettingImage('avatar', 'userImage')
+    // cy.setSettingAddContactLink({
+    //   index: 0,
+    //   label: ExternalLinkLabel.SOCIAL_MEDIA,
+    //   url: 'http://something.to.delete/',
+    // })
+    // cy.saveSettingsForm()
+
+    // cy.visit(`/how-to/${item.slug}`)
+    // cy.get('[data-cy="country:lc"]')
+    // cy.get('[data-cy="commentAvatarImage"]')
+    //   .should('have.attr', 'src')
+    //   .and('include', 'avatar')
+
     cy.step('Can edit their comment')
     cy.editDiscussionItem('CommentItem', updatedNewComment)
     cy.contains(updatedNewComment)

packages/cypress/src/integration/settings.spec.ts

@@ -44,7 +44,7 @@ describe('[Settings]', () => {
     })
 
     it('[Edit a new profile]', () => {
-      const country = 'Brazil'
+      const country = 'Bolivia'
       const userImage = 'avatar'
       const displayName = 'settings_member_new'
       const description = "I'm a very active member"
@@ -78,6 +78,7 @@ describe('[Settings]', () => {
         country,
         description,
       })
+      cy.get('[data-cy="country:BO"]')
 
       cy.step('Errors if trying to upload invalid image')
       cy.get(`[data-cy=userImage]`)
@@ -126,6 +127,8 @@ describe('[Settings]', () => {
       cy.contains(user.username)
       cy.contains(displayName)
       cy.contains(description)
+      cy.contains(country)
+      cy.get('[data-cy="country:bo"]')
       cy.get(`[data-cy="MemberBadge-${profileType}"]`)
       cy.get('[data-cy="profile-avatar"]')
         .should('have.attr', 'src')

shared/mocks/data/discussions.ts

@@ -198,7 +198,7 @@ export const discussions = {
         _creatorId: 'demo_admin',
         _edited: '2022-03-27T22:10:12.271Z',
         _id: 'm324vysdq71',
-        creatorCountry: 'uk',
+        creatorCountry: 'bo',
         creatorName: 'demo_admin',
         parentCommentId: null,
         text: "Thanks for this how-to, it's taught me loads.",
@@ -207,7 +207,7 @@ export const discussions = {
         _created: '2022-03-29T22:10:12.271Z',
         _creatorId: 'benfurber',
         _id: 'sgdfjk67123dx',
-        creatorCountry: 'uk',
+        creatorCountry: 'gb',
         creatorName: 'ben',
         parentCommentId: 'm324vysdq71',
         text: 'Same!',
@@ -216,7 +216,7 @@ export const discussions = {
         _created: '2022-03-30T22:10:12.271Z',
         _creatorId: 'benfurber',
         _id: 'jk67123dx',
-        creatorCountry: 'uk',
+        creatorCountry: 'gb',
         creatorName: 'ben',
         parentCommentId: null,
         text: 'The third step confused me a bit...',

src/pages/UserSettings/content/sections/UserInfos.section.tsx

@@ -1,7 +1,13 @@
 import { Field } from 'react-final-form'
 import { FieldArray } from 'react-final-form-arrays'
 import { countries } from 'countries-list'
-import { Button, FieldInput, FieldTextarea, InternalLink } from 'oa-components'
+import {
+  Button,
+  FieldInput,
+  FieldTextarea,
+  InternalLink,
+  Username,
+} from 'oa-components'
 import { ProfileTypeList } from 'oa-shared'
 import { SelectField } from 'src/common/Form/Select.field'
 import { isModuleSupported, MODULE } from 'src/modules'
@@ -27,6 +33,9 @@ export const UserInfosSection = ({ formValues }: IProps) => {
   const isMemberProfile = profileType === ProfileTypeList.MEMBER
   const { about, country, displayName, userName } = fields
 
+  const countryCode = Object.keys(countries).find(
+    (key) => countries[key].name === formValues.location?.country,
+  )
   const noMapPin = !location?.latlng
 
   return (
@@ -102,14 +111,27 @@ export const UserInfosSection = ({ formValues }: IProps) => {
               {(field) => (
                 <SelectField
                   options={Object.keys(countries).map((country) => ({
-                    label: countries[country].name,
+                    label: `${countries[country].emoji} ${countries[country].native}`,
                     value: countries[country].name,
                   }))}
                   placeholder="Select your country..."
                   {...field}
                 />
               )}
             </Field>
+            <Flex sx={{ gap: 1, alignItems: 'center' }}>
+              <Text sx={{ fontSize: 1 }} variant="quiet">
+                Preview:
+              </Text>
+              <Username
+                user={{
+                  userName: formValues.userName || '',
+                  countryCode,
+                  isSupporter: false,
+                  isVerified: false,
+                }}
+              />
+            </Flex>
           </Flex>
         )}
 

src/stores/User/user.store.test.tsx

@@ -8,6 +8,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { UserStore } from './user.store'
 
+import type { ILocation } from 'src/models'
+
 vi.mock('../common/module.store')
 vi.mock('../Aggragations/aggregations.store')
 
@@ -427,6 +429,31 @@ describe('userStore', () => {
         }),
       )
     })
+
+    it('updates the location country code along with the country name', async () => {
+      const userProfile = FactoryUser()
+      store.activeUser = userProfile
+
+      const updateValues = {
+        _id: userProfile._id,
+        location: {
+          country: 'Nigeria',
+        } as ILocation,
+      }
+
+      await store.updateUserProfile(updateValues, 'test-b')
+
+      // Assert
+      expect(store.db.update).toHaveBeenCalledWith(
+        expect.objectContaining({
+          _id: updateValues._id,
+          location: {
+            country: 'Nigeria',
+            countryCode: 'NG',
+          },
+        }),
+      )
+    })
   })
 
   describe('updateUserNotificationSettings', () => {

src/stores/User/user.store.ts

@@ -1,3 +1,4 @@
+import { countries } from 'countries-list'
 import {
   createUserWithEmailAndPassword,
   onAuthStateChanged,
@@ -192,7 +193,7 @@ export class UserStore extends ModuleStore {
   }
 
   public async updateUserProfile(values: PartialUser, trigger: string) {
-    const { _id, coverImages, userImage } = values
+    const { _id, coverImages, location, userImage } = values
 
     if (!_id) throw new Error(`User not found`)
     if (_id !== this.activeUser?._id) {
@@ -218,6 +219,17 @@ export class UserStore extends ModuleStore {
       )
     }
 
+    if (location && location.country) {
+      const countryCode = Object.keys(countries).find(
+        (key) => countries[key].name === location.country,
+      )
+      updatedUserProfile.location = {
+        ...location,
+        country: location.country,
+        countryCode: countryCode || '',
+      }
+    }
+
     await this._updateUserRequest(_id, updatedUserProfile)
     await this.refreshActiveUserDetails()
     return this.activeUser