Web: Fixed the display of the payer's avatar.

packages/client/src/pages/PortalSettings/categories/payments/PayerInformationContainer.js

@@ -147,13 +147,16 @@ const PayerInformationContainer = ({
     </Text>
   );
 
+  const avatarUrl = payerInfo ? { source: payerInfo.avatar } : {};
+
   return (
     <StyledContainer style={style} theme={theme}>
       <div className="payer-info_avatar">
         <Avatar
           size={"base"}
-          source={user.avatar}
-          userName={user.displayName}
+          {...avatarUrl}
+          isDefaultSource
+          userName={payerInfo?.displayName}
         />
       </div>
 
@@ -162,7 +165,6 @@ const PayerInformationContainer = ({
           {payerName}
 
           <Text as="span" className="payer-info">
-            {" "}
             {" (" + t("Payer") + ") "}
           </Text>
 
@@ -176,13 +178,14 @@ const PayerInformationContainer = ({
 };
 
 export default inject(({ auth, payments }) => {
-  const { userStore } = auth;
+  const { userStore, settingsStore } = auth;
   const { accountLink } = payments;
+  const { theme } = settingsStore;
 
   const { user } = userStore;
 
   return {
-    theme: auth.settingsStore.theme,
+    theme,
     user,
     accountLink,
   };

packages/components/avatar/index.js

@@ -55,7 +55,15 @@ Initials.propTypes = {
 // eslint-disable-next-line react/display-name
 const Avatar = (props) => {
   //console.log("Avatar render");
-  const { size, source, userName, role, editing, editAction } = props;
+  const {
+    size,
+    source,
+    userName,
+    role,
+    editing,
+    editAction,
+    isDefaultSource = false,
+  } = props;
   let isDefault = false,
     isIcon = false;
 
@@ -72,6 +80,8 @@ const Avatar = (props) => {
     )
   ) : userName ? (
     <Initials userName={userName} size={size} />
+  ) : isDefaultSource ? (
+    <StyledImage isDefault />
   ) : (
     <EmptyIcon size="scale" />
   );
@@ -109,6 +119,8 @@ Avatar.propTypes = {
   /** Provide this and leave `source` empty to display as initials */
   userName: PropTypes.string,
   editing: PropTypes.bool,
+  /** Provide this and leave `source` empty to display as default icon */
+  isDefaultSource: PropTypes.bool,
   /** Function called when the avatar change button is pressed */
   editAction: PropTypes.func,
   /** Accepts class */