feat: add verified flag to map and user profile

ONEARMY · Apr 28, 2021 · 4b39feb · 4b39feb
1 parent 26c214d
commit 4b39feb
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 9 deletions.
diff --git a/src/assets/images/verified.png b/src/assets/images/verified.png
diff --git a/src/components/Icons/VerifiedIcon.tsx b/src/components/Icons/VerifiedIcon.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import PngVerifiedIcon from '../../assets/images/verified.png'
+
+export const VerifiedIcon: React.FC<{}> = () => (
+  <img alt="verified-icon" style={{ height: '100%' }} src={PngVerifiedIcon} />
+)
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
@@ -43,6 +43,7 @@ import { FaSignal, FaFacebookF, FaSlack, FaInstagram } from 'react-icons/fa'
 import { IconContext } from 'react-icons'
 import SVGs from './svgs'
 import { DownloadIcon } from './DownloadIcon'
+import { VerifiedIcon } from './VerifiedIcon'
 
 interface IGlyphProps {
   glyph: string
@@ -92,6 +93,7 @@ export type availableGlyphs =
   | 'chevron-right'
   | 'star'
   | 'star-active'
+  | 'verified'
 
 export type IGlyphs = { [k in availableGlyphs]: JSX.Element }
 
@@ -132,6 +134,7 @@ export const glyphs: IGlyphs = {
   'chevron-right': <MdChevronRight />,
   star: SVGs.star,
   'star-active': SVGs.starActive,
+  verified: <VerifiedIcon />,
 }
 
 type WrapperProps = IProps & VerticalAlignProps & SpaceProps

diff --git a/src/models/maps.models.tsx b/src/models/maps.models.tsx
@@ -38,6 +38,7 @@ export interface IMapPinDetail {
   profilePicUrl: string
   profileUrl: string
   heroImageUrl: string
+  verified?: boolean
 }
 
 export interface ILatLng {

diff --git a/src/pages/Maps/Content/View/Popup.tsx b/src/pages/Maps/Content/View/Popup.tsx
@@ -15,6 +15,7 @@ import { inject } from 'mobx-react'
 import { MapsStore } from 'src/stores/Maps/maps.store'
 import { MAP_GROUPINGS } from 'src/stores/Maps/maps.groupings'
 import Workspace from 'src/pages/User/workspace/Workspace'
+import Icon from 'src/components/Icons'
 
 interface IProps {
   activePin: IMapPin | IMapPinWithDetail
@@ -86,7 +87,13 @@ export class Popup extends React.Component<IProps> {
         ? g.subType === pin.subType && g.type === pin.type
         : g.type === pin.type
     })
-    const { lastActive, heroImageUrl, shortDescription, name } = pin.detail
+    const {
+      lastActive,
+      heroImageUrl,
+      shortDescription,
+      name,
+      verified,
+    } = pin.detail
     const description =
       shortDescription.length > 70
         ? shortDescription.substr(0, 70) + '...'
@@ -113,8 +120,9 @@ export class Popup extends React.Component<IProps> {
             <Text tags mb={2}>
               {group ? group.displayName : pin.type}
             </Text>
-            <Text medium mb={1}>
+            <Text large mb={1} display="flex">
               {name}
+              {verified && <Icon glyph="verified" size="25" />}
             </Text>
             <Text small mb={2} style={{ wordBreak: 'break-word' }}>
               {description}

diff --git a/src/pages/User/content/UserPage/UserPage.tsx b/src/pages/User/content/UserPage/UserPage.tsx
@@ -35,7 +35,6 @@ import PSIcon from 'src/assets/images/plastic-types/ps.svg'
 import PVCIcon from 'src/assets/images/plastic-types/pvc.svg'
 
 import EventsIcon from 'src/assets/icons/icon-events.svg'
-// import ExpertIcon from 'src/assets/icons/icon-expert.svg'
 import HowToCountIcon from 'src/assets/icons/icon-how-to.svg'
 // import V4MemberIcon from 'src/assets/icons/icon-v4-member.svg'
 
@@ -242,13 +241,12 @@ export class UserPage extends React.Component<
 
     return (
       <UserStatsBox>
-        {/* {isExpert && (
-          <UserStatsBoxItem>
-            <ElWithBeforeIcon IconUrl={ExpertIcon} height="25px">
-              Expert
-            </ElWithBeforeIcon>
+        {user.verified && (
+          <UserStatsBoxItem style={{ marginBottom: '15px' }}>
+            <Icon glyph="verified" size="25" />
+            <Box ml="5px">Pro</Box>
           </UserStatsBoxItem>
-        )} */}
+        )}
         {user.location && (
           <Link color={'black'} to={'/map/#' + user.userName}>
             <UserStatsBoxItem>

diff --git a/src/stores/Maps/maps.store.ts b/src/stores/Maps/maps.store.ts
@@ -228,6 +228,7 @@ export class MapsStore extends ModuleStore {
       shortDescription: u.mapPinDescription ? u.mapPinDescription : '',
       name: u.userName,
       profileUrl: `${window.location.origin}/u/${u.userName}`,
+      verified: u.verified,
     }
   }
   @action