Add banned user support to Avatar

src/components/Avatar/Avatar.css

@@ -80,3 +80,8 @@
   font-weight: var(--fontWeightSemiBold);
   padding-bottom: 6px;
 }
+
+.bannedUserIcon {
+  width: 100%;
+  height: 100%;
+}

src/components/Avatar/Avatar.example.js

@@ -0,0 +1,171 @@
+import Avatar, { AvatarMedium, AvatarLarge } from './Avatar';
+import { types } from '../../util/sdkLoader';
+import { fakeIntl } from '../../util/test-data';
+
+const { UUID } = types;
+
+const bannedUser = {
+  id: new UUID('banned-user'),
+  type: 'user',
+  attributes: {
+    banned: true,
+  },
+};
+
+const userWithoutProfileImage = {
+  id: new UUID('user-without-profile-image'),
+  type: 'user',
+  attributes: {
+    profile: {
+      displayName: 'No Profile',
+      abbreviatedName: 'NP',
+    },
+  },
+};
+
+const userWithProfileImage = {
+  id: new UUID('user-with-profile-image'),
+  type: 'user',
+  attributes: {
+    profile: {
+      displayName: 'Has Profile',
+      abbreviatedName: 'HP',
+    },
+  },
+  profileImage: {
+    id: new UUID('profile-image'),
+    type: 'image',
+    attributes: {
+      sizes: [
+        {
+          name: 'square-xlarge2x',
+          width: 240,
+          height: 240,
+          url: 'https://lorempixel.com/240/240/people/',
+        },
+        {
+          name: 'square-xlarge4x',
+          width: 480,
+          height: 480,
+          url: 'https://lorempixel.com/480/480/people/',
+        },
+      ],
+    },
+  },
+};
+
+// ================ Empty user ================ //
+
+export const EmptyUser = {
+  component: Avatar,
+  props: {
+    user: null,
+    intl: fakeIntl,
+  },
+  group: 'avatar',
+};
+
+export const EmptyUserMedium = {
+  component: AvatarMedium,
+  props: {
+    user: null,
+    intl: fakeIntl,
+  },
+  group: 'avatar',
+};
+
+export const EmptyUserLarge = {
+  component: AvatarLarge,
+  props: {
+    user: null,
+    intl: fakeIntl,
+  },
+  group: 'avatar',
+};
+
+// ================ Banned user ================ //
+
+export const BannedUser = {
+  component: Avatar,
+  props: {
+    user: bannedUser,
+    intl: fakeIntl,
+  },
+  group: 'avatar',
+};
+
+export const BannedUserMedium = {
+  component: AvatarMedium,
+  props: {
+    user: bannedUser,
+    intl: fakeIntl,
+  },
+  group: 'avatar',
+};
+
+export const BannedUserLarge = {
+  component: AvatarLarge,
+  props: {
+    user: bannedUser,
+    intl: fakeIntl,
+  },
+  group: 'avatar',
+};
+
+// ================ No profile image ================ //
+
+export const WithoutProfileImageUser = {
+  component: Avatar,
+  props: {
+    user: userWithoutProfileImage,
+    intl: fakeIntl,
+  },
+  group: 'avatar',
+};
+
+export const WithoutProfileImageUserMedium = {
+  component: AvatarMedium,
+  props: {
+    user: userWithoutProfileImage,
+    intl: fakeIntl,
+  },
+  group: 'avatar',
+};
+
+export const WithoutProfileImageUserLarge = {
+  component: AvatarLarge,
+  props: {
+    user: userWithoutProfileImage,
+    intl: fakeIntl,
+  },
+  group: 'avatar',
+};
+
+// ================ Full user with profile image ================ //
+
+export const WithProfileImageUser = {
+  component: Avatar,
+  props: {
+    user: userWithProfileImage,
+    intl: fakeIntl,
+  },
+  group: 'avatar',
+};
+
+export const WithProfileImageUserMedium = {
+  component: AvatarMedium,
+  props: {
+    user: userWithProfileImage,
+    intl: fakeIntl,
+  },
+  group: 'avatar',
+};
+
+export const WithProfileImageUserLarge = {
+  component: AvatarLarge,
+  props: {
+    user: userWithProfileImage,
+    intl: fakeIntl,
+  },
+  group: 'avatar',
+};

src/components/Avatar/Avatar.js

@@ -1,16 +1,25 @@
 import React, { PropTypes } from 'react';
+import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';
-import { ensureUser } from '../../util/data';
-import { ResponsiveImage } from '../../components/';
+import { ensureUser, userDisplayName, userAbbreviatedName } from '../../util/data';
+import { ResponsiveImage, IconBannedUser } from '../../components/';
 
 import css from './Avatar.css';
 
-const Avatar = props => {
-  const { rootClassName, className, user } = props;
+export const AvatarComponent = props => {
+  const { rootClassName, className, user, intl } = props;
   const classes = classNames(rootClassName || css.root, className);
   const avatarUser = ensureUser(user);
-  const { displayName, abbreviatedName } = avatarUser.attributes.profile;
+  const isBannedUser = avatarUser.attributes.banned;
+
+  const bannedUserDisplayName = intl.formatMessage({
+    id: 'Avatar.bannedUserDisplayName',
+  });
+  const bannedUserAbbreviatedName = '';
+
+  const displayName = userDisplayName(avatarUser, bannedUserDisplayName);
+  const abbreviatedName = userAbbreviatedName(avatarUser, bannedUserAbbreviatedName);
 
   if (avatarUser.profileImage && avatarUser.profileImage.id) {
     return (
@@ -26,6 +35,12 @@ const Avatar = props => {
         />
       </div>
     );
+  } else if (isBannedUser) {
+    return (
+      <div className={classes} title={displayName}>
+        <IconBannedUser className={css.bannedUserIcon} />
+      </div>
+    );
   } else {
     // Placeholder avatar (initials)
     return (
@@ -38,18 +53,23 @@ const Avatar = props => {
 
 const { string, oneOfType } = PropTypes;
 
-Avatar.defaultProps = {
+AvatarComponent.defaultProps = {
   className: null,
   rootClassName: null,
   user: null,
 };
 
-Avatar.propTypes = {
+AvatarComponent.propTypes = {
   rootClassName: string,
   className: string,
   user: oneOfType([propTypes.user, propTypes.currentUser]),
+
+  // from injectIntl
+  intl: intlShape.isRequired,
 };
 
+const Avatar = injectIntl(AvatarComponent);
+
 export default Avatar;
 
 export const AvatarMedium = props => <Avatar rootClassName={css.mediumAvatar} {...props} />;

src/examples.js

@@ -1,5 +1,6 @@
 // components
 import * as AddImages from './components/AddImages/AddImages.example';
+import * as Avatar from './components/Avatar/Avatar.example';
 import * as BirthdayInputField from './components/BirthdayInputField/BirthdayInputField.example';
 import * as BookingBreakdown from './components/BookingBreakdown/BookingBreakdown.example';
 import * as Button from './components/Button/Button.example';
@@ -52,6 +53,7 @@ import * as Typography from './containers/StyleguidePage/Typography.example';
 
 export {
   AddImages,
+  Avatar,
   BirthdayInputField,
   BookingBreakdown,
   BookingDatesForm,

src/translations/en.json

@@ -17,6 +17,7 @@
   "AuthenticationPage.verifyEmailClose": "LATER",
   "AuthenticationPage.verifyEmailText": "Thanks for signing up! There's one quick step left. To be able to contact you, we need you to verify your email address. Please click the link we sent to {email}.",
   "AuthenticationPage.verifyEmailTitle": "{name}, check your inbox to verify your email",
+  "Avatar.bannedUserDisplayName": "Banned user",
   "BookingBreakdown.bookingPeriod": "{bookingStart} – {bookingEnd}",
   "BookingBreakdown.commission": "Saunatime fee",
   "BookingBreakdown.nightCount": "{count, number} {count, plural, one {night} other {nights}}",