Merge branch 'fix/MRM-4475' into 'release/v0.14'

fix: [MRM-4475] Hide street/building if empty

See merge request mashroom/frontend/admin!77

src/entities/platform-users/UserDetails/HomeAddress.tsx

@@ -32,35 +32,35 @@ const HomeAddress: FC<Props> = ({ location }) => {
     country,
   } = location;
 
+  const homeAddress = [address1, address2, address3, address4]
+    .filter(Boolean)
+    .join(", ");
+
   return (
     <Group>
       <FormRow>
         <Name>Home address</Name>
-        <Value>
-          {[address1, address2, address3, address4].filter(Boolean).join(", ")}
-        </Value>
+        <Value>{homeAddress !== "" ? homeAddress : "N/A"}</Value>
       </FormRow>
       <FormRow>
         <Row>
+          {((street && street !== "") || (building && building !== "")) && (
             <Col>
               <Name>Street / Building</Name>
               <Value>{[street, building].filter(Boolean).join(", ")}</Value>
             </Col>
+          )}
           <Col>
             <Name>City / Town</Name>
-            <Value>{city || "N/A"}</Value>
+            <Value>{city && city !== "" ? city : "N/A"}</Value>
           </Col>
-        </Row>
-      </FormRow>
-      <FormRow>
-        <Row>
           <Col>
             <Name>Postcode</Name>
-            <Value>{postcode || "N/A"}</Value>
+            <Value>{postcode && postcode !== "" ? postcode : "N/A"}</Value>
           </Col>
           <Col>
             <Name>Country</Name>
-            <Value>{country || "N/A"}</Value>
+            <Value>{country && country !== "" ? country : "N/A"}</Value>
           </Col>
         </Row>
       </FormRow>

src/ui/atoms/UserCard.tsx

@@ -24,11 +24,12 @@ export const UserAvatarSmall = styled.img`
   margin: 0 20px 0 0;
   background: ${theme.colors.main.midGrey};
   border-radius: 50%;
-  object-fix: cover;
+  object-fit: cover;
 `;
 
 export const UserDetails = styled.div`
   width: calc(50% - 15px);
+  margin-bottom: 4px;
 `;
 
 export const UserItem = styled.div`
@@ -69,6 +70,7 @@ export const UserLastUpdate = styled.div`
 export const UserFlexRow = styled.div`
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
 `;
 export const StatusDanger = styled.span`
   color: ${theme.colors.main.red};