diff --git a/packages/components/src/CommentItem/CommentItem.tsx b/packages/components/src/CommentItem/CommentItem.tsx
index e96cbb1d42..3e58ed0441 100644
--- a/packages/components/src/CommentItem/CommentItem.tsx
+++ b/packages/components/src/CommentItem/CommentItem.tsx
@@ -85,6 +85,7 @@ export const CommentItem = (props: IProps) => {
{
countryCode={countryCode}
svg={true}
title={countryCode}
+ data-cy={`country:${countryCode}`}
/>
) : (
diff --git a/packages/cypress/src/integration/howto/discussions.spec.ts b/packages/cypress/src/integration/howto/discussions.spec.ts
index 061a619d3a..b94e6659f4 100644
--- a/packages/cypress/src/integration/howto/discussions.spec.ts
+++ b/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)
diff --git a/packages/cypress/src/integration/settings.spec.ts b/packages/cypress/src/integration/settings.spec.ts
index ebc0d92f27..a2ba383a9f 100644
--- a/packages/cypress/src/integration/settings.spec.ts
+++ b/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')
diff --git a/shared/mocks/data/discussions.ts b/shared/mocks/data/discussions.ts
index cc2611db33..5462806a3b 100644
--- a/shared/mocks/data/discussions.ts
+++ b/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...',
diff --git a/src/pages/UserSettings/content/sections/UserInfos.section.tsx b/src/pages/UserSettings/content/sections/UserInfos.section.tsx
index 950e06e0fb..8ead800c3a 100644
--- a/src/pages/UserSettings/content/sections/UserInfos.section.tsx
+++ b/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,7 +111,7 @@ export const UserInfosSection = ({ formValues }: IProps) => {
{(field) => (
({
- label: countries[country].name,
+ label: `${countries[country].emoji} ${countries[country].native}`,
value: countries[country].name,
}))}
placeholder="Select your country..."
@@ -110,6 +119,19 @@ export const UserInfosSection = ({ formValues }: IProps) => {
/>
)}
+
+
+ Preview:
+
+
+
)}
diff --git a/src/stores/User/user.store.test.tsx b/src/stores/User/user.store.test.tsx
index d8d55a39a9..d9bee4c822 100644
--- a/src/stores/User/user.store.test.tsx
+++ b/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', () => {
diff --git a/src/stores/User/user.store.ts b/src/stores/User/user.store.ts
index dac5732fc6..c05f4a231b 100644
--- a/src/stores/User/user.store.ts
+++ b/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