feat: add profile tags to members

packages/components/src/CardProfile/CardDetailsMemberProfile.tsx

@@ -1,7 +1,7 @@
 import { Avatar, Box, Flex } from 'theme-ui'
 
-import { Category } from '../Category/Category'
 import { MemberBadge } from '../MemberBadge/MemberBadge'
+import { ProfileTagsList } from '../ProfileTagsList/ProfileTagsList'
 import { Username } from '../Username/Username'
 
 import type { IProfileCreator } from 'oa-shared'
@@ -12,7 +12,7 @@ interface IProps {
 }
 
 export const CardDetailsMemberProfile = ({ creator, isLink }: IProps) => {
-  const { _id, badges, countryCode, profileType, userImage } = creator
+  const { _id, badges, countryCode, profileType, tags, userImage } = creator
 
   return (
     <Flex
@@ -58,14 +58,7 @@ export const CardDetailsMemberProfile = ({ creator, isLink }: IProps) => {
           sx={{ alignSelf: 'flex-start' }}
           isLink={isLink}
         />
-        <Category
-          category={{ label: 'Wants to get started' }}
-          sx={{
-            border: '1px solid #A72E5A',
-            backgroundColor: '#F7C7D9',
-            color: '#A72E5A',
-          }}
-        />
+        {tags && <ProfileTagsList tags={tags} />}
       </Flex>
     </Flex>
   )

packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx

@@ -1,6 +1,5 @@
 import { Box, Flex, Image, Text } from 'theme-ui'
 
-import { Category } from '../Category/Category'
 import { MemberBadge } from '../MemberBadge/MemberBadge'
 import { ProfileTagsList } from '../ProfileTagsList/ProfileTagsList'
 import { Username } from '../Username/Username'
@@ -13,22 +12,11 @@ interface IProps {
 }
 
 export const CardDetailsSpaceProfile = ({ creator, isLink }: IProps) => {
-  const {
-    _id,
-    about,
-    badges,
-    countryCode,
-    coverImage,
-    profileType,
-    tags,
-    workspaceType,
-  } = creator
+  const { _id, about, badges, countryCode, coverImage, profileType, tags } =
+    creator
 
   const aboutTextStart =
     about && about.length > 80 ? about.slice(0, 78) + '...' : false
-  const workspaceLabel = workspaceType
-    ? workspaceType.charAt(0).toUpperCase() + workspaceType.slice(1)
-    : ''
 
   return (
     <Flex sx={{ flexDirection: 'column', width: '100%' }}>
@@ -85,17 +73,6 @@ export const CardDetailsSpaceProfile = ({ creator, isLink }: IProps) => {
           />
         </Flex>
 
-        {workspaceType && profileType === 'workspace' && (
-          <Category
-            category={{ label: workspaceLabel }}
-            sx={{
-              border: '1px solid #0087B6',
-              backgroundColor: '#ECFAFF',
-              color: '#0087B6',
-            }}
-          />
-        )}
-
         {tags && <ProfileTagsList tags={tags} />}
 
         {about && (

packages/components/src/ProfileTagsList/ProfileTagsList.tsx

@@ -10,7 +10,7 @@ export interface IProps {
 
 export const ProfileTagsList = ({ tags }: IProps) => {
   return (
-    <Flex sx={{ gap: 2, flexWrap: 'wrap' }}>
+    <Flex data-cy="ProfileTagsList" sx={{ gap: 2, flexWrap: 'wrap' }}>
       {tags.map(
         (tag, index) =>
           tag?.label && (

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

@@ -77,7 +77,7 @@ describe('[Map]', () => {
     cy.get(`[data-cy=pin-${userId}]`).click()
     cy.get('[data-cy=PinProfile]').within(() => {
       cy.get('[data-cy=Username]').contains(userId)
-      cy.contains('Wants to get started')
+      cy.get('[data-cy=ProfileTagsList]').contains('Organise Meetups')
     })
     cy.url().should('include', `#${userId}`)
 

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

@@ -51,6 +51,7 @@ describe('[Settings]', () => {
       const description = "I'm a very active member"
       const mapPinDescription = 'Fun, vibrant and full of amazing people'
       const profileType = 'member'
+      const tag = 'Sewing'
       const user = generateNewUserDetails()
       const url = 'https://social.network'
 
@@ -79,6 +80,7 @@ describe('[Settings]', () => {
         country,
         description,
       })
+      cy.selectTag(tag, '[data-cy=tag-select]')
       cy.get('[data-cy="country:BO"]')
 
       cy.step('Errors if trying to upload invalid image')
@@ -242,6 +244,40 @@ describe('[Settings]', () => {
       cy.visit('/sign-in')
     })
 
+    it('Can create member', () => {
+      // Comprehensive member test above for FF,
+      // minimal spec here for PP specific functionality
+
+      const country = 'Bolivia'
+      const displayName = 'settings_member_new'
+      const description = "I'm a very active member"
+      const profileType = 'member'
+      const user = generateNewUserDetails()
+      const tag = 'Melting'
+
+      cy.signUpNewUser(user)
+      cy.get('[data-cy=complete-profile-button]').click()
+
+      cy.step('Can set the required fields')
+      cy.setSettingFocus(profileType)
+      cy.setSettingBasicUserInfo({
+        displayName,
+        country,
+        description,
+      })
+      cy.selectTag(tag, '[data-cy=tag-select]')
+      cy.setSettingAddContactLink({
+        index: 0,
+        label: ExternalLinkLabel.SOCIAL_MEDIA,
+        url: 'http://something.to.delete/',
+      })
+      cy.saveSettingsForm()
+
+      cy.step('Updated settings display on profile')
+      cy.visit(`u/${user.username}`)
+      cy.contains(tag)
+    })
+
     it('Can create space', () => {
       const coverImage = 'profile-cover-1-edited'
       const userImage = 'avatar'
@@ -365,10 +401,40 @@ describe('[Settings]', () => {
     })
 
     it('[Member]', () => {
+      // Comprehensive member test above for FF,
+      // minimal spec here for PK specific functionality
+
       cy.signUpNewUser()
       cy.visit('/settings')
       cy.contains('Infos')
       cy.get('[data-cy=FocusSection]').should('not.exist')
+
+      const country = 'Bolivia'
+      const displayName = 'settings_member_new'
+      const description = "I'm a very active member"
+      const tag = 'Landscaping'
+      const user = generateNewUserDetails()
+
+      cy.signUpNewUser(user)
+      cy.get('[data-cy=complete-profile-button]').click()
+
+      cy.step('Can set the required fields')
+      cy.setSettingBasicUserInfo({
+        displayName,
+        country,
+        description,
+      })
+      cy.selectTag(tag, '[data-cy=tag-select]')
+      cy.setSettingAddContactLink({
+        index: 0,
+        label: ExternalLinkLabel.SOCIAL_MEDIA,
+        url: 'http://something.to.delete/',
+      })
+      cy.saveSettingsForm()
+
+      cy.step('Updated settings display on profile')
+      cy.visit(`u/${user.username}`)
+      cy.contains(tag)
     })
   })
 })