Merge pull request #3370 from Robert-LC/feat/profile/add-support-badge

feat: add support badge Username component

packages/components/src/ArticleCallToAction/ArticleCallToAction.stories.tsx

@@ -52,6 +52,7 @@ export const ArticleCallToActionSingleContributor: StoryFn<
         countryCode: faker.address.countryCode(),
         userName: faker.internet.userName(),
         isVerified: faker.datatype.boolean(),
+        isSupporter: faker.datatype.boolean(),
       },
     ]}
   >
@@ -63,6 +64,7 @@ const makeFakeUser = () => ({
   countryCode: faker.address.countryCode(),
   userName: faker.internet.userName(),
   isVerified: faker.datatype.boolean(),
+  isSupporter: faker.datatype.boolean(),
 })
 
 export const ArticleCallToActionMultipleContributors: StoryFn<

packages/components/src/ArticleCallToAction/ArticleCallToAction.tsx

@@ -5,14 +5,16 @@ import { Username } from '../Username/Username'
 
 import type { User } from '../types/common'
 
-export interface Props {
-  author: User & { isVerified: boolean }
+export interface IProps {
+  author: User
   children: React.ReactNode
-  contributors?: (User & { isVerified: boolean })[]
+  contributors?: User[]
 }
 
-export const ArticleCallToAction = (props: Props) => {
+export const ArticleCallToAction = (props: IProps) => {
+  const { author, children, contributors } = props
   const theme = useTheme() as any
+
   return (
     <Flex
       sx={{
@@ -22,24 +24,19 @@ export const ArticleCallToAction = (props: Props) => {
     >
       <Text variant="body" sx={{ fontSize: 2 }}>
         Made by
-        <Username
-          isVerified={props.author.isVerified}
-          user={props.author}
-          sx={{ ml: 1 }}
-        />
+        <Username user={author} sx={{ ml: 1 }} />
       </Text>
-      {props.contributors && props?.contributors.length ? (
+      {contributors && contributors.length ? (
         <Text
           data-testid="ArticleCallToAction: contributors"
           variant="quiet"
           sx={{ display: 'block', mt: 2, textAlign: 'center', fontSize: 2 }}
         >
           With contributions from:{' '}
-          {props.contributors.map((contributor, key) => (
+          {contributors.map((contributor, key) => (
             <Username
               key={key}
               user={contributor}
-              isVerified={contributor.isVerified}
               sx={{
                 mr: 1,
               }}
@@ -56,7 +53,7 @@ export const ArticleCallToAction = (props: Props) => {
           },
         }}
       >
-        {props.children}
+        {children}
       </Flex>
     </Flex>
   )

packages/components/src/CommentItem/CommentItem.tsx

@@ -40,6 +40,7 @@ export const CommentItem = (props: CommentItemProps) => {
     creatorName,
     creatorCountry,
     isUserVerified,
+    isUserSupporter,
     isEditable,
     _created,
     _edited,
@@ -86,8 +87,9 @@ export const CommentItem = (props: CommentItemProps) => {
               user={{
                 userName: creatorName,
                 countryCode: creatorCountry,
+                isVerified: !!isUserVerified,
+                isSupporter: !!isUserSupporter,
               }}
-              isVerified={!!isUserVerified}
             />
             {_edited && (
               <Text sx={{ fontSize: 0, color: 'grey' }}>(Edited)</Text>

packages/components/src/CommentItem/types.ts

@@ -1,6 +1,7 @@
 export interface IComment {
   text: string
   isUserVerified?: boolean
+  isUserSupporter?: boolean
   isEditable: boolean
   creatorCountry?: string | null
   creatorName: string

packages/components/src/MapMemberCard/MapMemberCard.stories.tsx

@@ -14,9 +14,10 @@ export const Default = {
     imageUrl: 'https://placekitten.com/450/450',
     description: `${faker.lorem.sentence()}`,
     user: {
-      username: faker.internet.userName(),
+      countryCode: faker.address.countryCode('alpha-2'),
+      userName: faker.internet.userName(),
+      isSupporter: faker.datatype.boolean(),
       isVerified: faker.datatype.boolean(),
-      country: faker.address.countryCode('alpha-2'),
     },
     heading: `${faker.lorem.word()}`,
     isEditable: false,
@@ -30,9 +31,10 @@ export const LoadingState = {
     imageUrl: 'https://placekitten.com/450/450',
     description: `${faker.lorem.sentence()}`,
     user: {
-      username: faker.internet.userName(),
+      countryCode: faker.address.countryCode('alpha-2'),
+      userName: faker.internet.userName(),
+      isSupporter: faker.datatype.boolean(),
       isVerified: faker.datatype.boolean(),
-      country: faker.address.countryCode('alpha-2'),
     },
     heading: `${faker.lorem.word()}`,
     isEditable: false,
@@ -45,9 +47,10 @@ export const ModerationComments = {
     description: `${faker.lorem.sentence()}`,
     comments: `${faker.lorem.sentence()}`,
     user: {
-      username: faker.internet.userName(),
+      countryCode: faker.address.countryCode('alpha-2'),
+      userName: faker.internet.userName(),
+      isSupporter: faker.datatype.boolean(),
       isVerified: faker.datatype.boolean(),
-      country: faker.address.countryCode('alpha-2'),
     },
     heading: `${faker.lorem.word()}`,
     isEditable: false,

packages/components/src/MapMemberCard/MapMemberCard.tsx

@@ -1,23 +1,20 @@
+import { keyframes } from '@emotion/react'
 import { Alert, AspectRatio, Box, Card, Image, Text } from 'theme-ui'
 
 import { Username } from '../Username/Username'
 
+import type { User } from '../types/common'
+
 export interface Props {
   loading?: boolean
   imageUrl: string
   description: string
   comments: string | null
-  user: {
-    isVerified: boolean
-    username: string
-    country: string | null
-  }
+  user: User
   heading: string
   isEditable: boolean
 }
 
-import { keyframes } from '@emotion/react'
-
 const wave = keyframes`
   from {
     background: lightgrey;
@@ -29,6 +26,7 @@ const wave = keyframes`
 
 export const MapMemberCard = (props: Props) => {
   const { imageUrl, description, user, heading, comments } = props
+
   return (
     <Card sx={{ maxWidth: '230px' }} data-cy="MapMemberCard">
       <Box>
@@ -62,13 +60,7 @@ export const MapMemberCard = (props: Props) => {
                 {heading}
               </Text>
               <div>
-                <Username
-                  isVerified={!!user.isVerified}
-                  user={{
-                    userName: user.username,
-                    countryCode: user.country,
-                  }}
-                />
+                <Username user={user} />
               </div>
               <Text
                 mb={2}

packages/components/src/UserStatistics/UserStatistics.tsx

@@ -12,7 +12,7 @@ export interface UserStatisticsProps {
   userName: string
   country?: string
   isVerified: boolean
-  isSupporter: boolean
+  isSupporter?: boolean
   howtoCount: number
   usefulCount: number
   researchCount: number
@@ -46,19 +46,6 @@ export const UserStatistics = (props: UserStatisticsProps) => {
           </Flex>
         )}
 
-        {hasLocation ? (
-          <InternalLink
-            to={'/map/#' + props.userName}
-            sx={{ color: 'black' }}
-            data-testid="location-link"
-          >
-            <Flex>
-              <Icon glyph="location-on" size={22} />
-              <Box ml={1}>{props.country || 'View on Map'}</Box>
-            </Flex>
-          </InternalLink>
-        ) : null}
-
         {props?.isSupporter ? (
           <Flex data-testid="supporter-stat">
             <Icon glyph={'supporter'} size={22} />
@@ -74,6 +61,19 @@ export const UserStatistics = (props: UserStatisticsProps) => {
           </Flex>
         ) : null}
 
+        {hasLocation ? (
+          <InternalLink
+            to={'/map/#' + props.userName}
+            sx={{ color: 'black' }}
+            data-testid="location-link"
+          >
+            <Flex>
+              <Icon glyph="location-on" size={22} />
+              <Box ml={1}>{props.country || 'View on Map'}</Box>
+            </Flex>
+          </InternalLink>
+        ) : null}
+
         {props.usefulCount ? (
           <Flex data-testid="useful-stat">
             <ElWithBeforeIcon icon={starActiveSVG} />

packages/components/src/Username/Username.stories.tsx

@@ -12,8 +12,9 @@ export const Verified = {
     user: {
       userName: 'a-username',
       countryCode: 'pt',
+      isSupporter: false,
+      isVerified: true,
     },
-    isVerified: true,
   },
 }
 
@@ -22,8 +23,31 @@ export const Unverified = {
     user: {
       countryCode: 'pt',
       userName: 'a-username',
+      isVerified: false,
+      isSupporter: false,
+    },
+  },
+}
+
+export const VerifiedSupporter = {
+  args: {
+    user: {
+      countryCode: 'pt',
+      userName: 'a-username',
+      isVerified: true,
+      isSupporter: true,
+    },
+  },
+}
+
+export const UnverifiedSupporter = {
+  args: {
+    user: {
+      countryCode: 'pt',
+      userName: 'a-username',
+      isVerified: false,
+      isSupporter: true,
     },
-    isVerified: false,
   },
 }
 
@@ -32,7 +56,6 @@ export const WithoutFlag = {
     user: {
       userName: 'a-username',
     },
-    isVerified: false,
   },
 }
 
@@ -42,7 +65,6 @@ export const InvalidCountryCode = {
       userName: 'a-username',
       countryCode: 'zz',
     },
-    isVerified: false,
   },
 }
 
@@ -54,6 +76,5 @@ export const InlineStyles = {
     sx: {
       outline: '10px solid red',
     },
-    isVerified: false,
   },
 }

packages/components/src/Username/Username.test.tsx

@@ -1,6 +1,12 @@
 import { render } from '../tests/utils'
 import { Username } from './Username'
-import { InvalidCountryCode, WithoutFlag } from './Username.stories'
+import {
+  InvalidCountryCode,
+  UnverifiedSupporter,
+  Verified,
+  VerifiedSupporter,
+  WithoutFlag,
+} from './Username.stories'
 
 describe('Username', () => {
   it('shows an unknown flag for empty value', () => {
@@ -14,4 +20,19 @@ describe('Username', () => {
 
     expect(getByTestId('Username: unknown flag')).toBeInTheDocument()
   })
+
+  it('shows a verified badge when the user is verified', () => {
+    const { getByTestId } = render(<Username {...Verified.args} />)
+    expect(getByTestId('Username: verified badge')).toBeInTheDocument()
+  })
+
+  it('shows a supporter badge when the user is a supporter and also unverified', () => {
+    const { getByTestId } = render(<Username {...UnverifiedSupporter.args} />)
+    expect(getByTestId('Username: supporter badge')).toBeInTheDocument()
+  })
+
+  it('shows a verified badge when the user is verified and also a supporter', () => {
+    const { getByTestId } = render(<Username {...VerifiedSupporter.args} />)
+    expect(getByTestId('Username: verified badge')).toBeInTheDocument()
+  })
 })