Merge pull request #1114 from ubavic/fix-photos

fix: photos in customer profile

new-lamassu-admin/src/pages/Customers/CustomerPhotos.js

@@ -13,7 +13,7 @@ import PhotosCarousel from './components/PhotosCarousel'
 
 const useStyles = makeStyles(styles)
 
-const CustomerPhotos = ({ photosData }) => {
+const CustomerPhotos = ({ photosData, timezone }) => {
   const classes = useStyles()
 
   const [photosDialog, setPhotosDialog] = useState(false)
@@ -41,7 +41,9 @@ const CustomerPhotos = ({ photosData }) => {
       <InformativeDialog
         open={photosDialog}
         title={`Photo roll`}
-        data={<PhotosCarousel photosData={orderedPhotosData} />}
+        data={
+          <PhotosCarousel photosData={orderedPhotosData} timezone={timezone} />
+        }
         onDissmised={() => {
           setPhotosDialog(false)
           setPhotoClickIndex(null)
@@ -71,7 +73,7 @@ export const PhotoCard = ({
       <div className={classes.footer}>
         <CameraIcon />
         <Label2 className={classes.date}>
-          {format('yyyy-MM-dd', new Date(date))}
+          {date ? format('yyyy-MM-dd', new Date(date)) : 'ID card image'}
         </Label2>
       </div>
     </Paper>

new-lamassu-admin/src/pages/Customers/CustomerPhotos.styles.js

@@ -11,7 +11,8 @@ const styles = {
   photosChipList: {
     display: 'flex',
     flexDirection: 'row',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    gap: 14
   },
   image: {
     objectFit: 'cover',
@@ -22,7 +23,7 @@ const styles = {
     borderTopRightRadius: 4
   },
   photoCardChip: {
-    margin: [[0, 16, 0, 0]]
+    cursor: 'pointer'
   },
   footer: {
     display: 'flex',

new-lamassu-admin/src/pages/Customers/CustomerProfile.js

@@ -480,6 +480,14 @@ const CustomerProfile = memo(() => {
     )
 
   const photosData = formatPhotosData(R.append(frontCameraData, txPhotosData))
+  const IDphotoData = customerData.idCardPhotoPath
+    ? [
+        {
+          photoDir: 'id-card-photo',
+          path: customerData.idCardPhotoPath
+        }
+      ]
+    : []
 
   const loading = customerLoading || configLoading
 
@@ -607,6 +615,7 @@ const CustomerProfile = memo(() => {
                   photosData={photosData}
                   locale={locale}
                   setShowCompliance={() => setShowCompliance(!showCompliance)}
+                  timezone={timezone}
                 />
               </Box>
               <div>
@@ -646,7 +655,10 @@ const CustomerProfile = memo(() => {
           )}
           {isPhotos && (
             <div>
-              <CustomerPhotos photosData={photosData} />
+              <CustomerPhotos
+                photosData={R.concat(photosData, IDphotoData)}
+                timezone={timezone}
+              />
             </div>
           )}
         </div>

new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js

@@ -31,7 +31,8 @@ export default {
   },
   rightSidePanel: {
     display: 'block',
-    width: 1100
+    width: 1100,
+    marginBottom: 25
   },
   leftSidePanel: {
     width: 300,

new-lamassu-admin/src/pages/Customers/components/CustomerDetails.js

@@ -12,7 +12,7 @@ import PhotosCard from './PhotosCard'
 
 const useStyles = makeStyles(mainStyles)
 
-const CustomerDetails = memo(({ customer, photosData, locale }) => {
+const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => {
   const classes = useStyles()
 
   const idNumber = R.path(['idCardData', 'documentNumber'])(customer)
@@ -44,7 +44,7 @@ const CustomerDetails = memo(({ customer, photosData, locale }) => {
 
   return (
     <Box display="flex">
-      <PhotosCard photosData={photosData} />
+      <PhotosCard photosData={photosData} timezone={timezone} />
       <Box display="flex" flexDirection="column">
         <div className={classes.name}>
           <IdIcon className={classes.idIcon} />

new-lamassu-admin/src/pages/Customers/components/PhotosCard.js

@@ -14,12 +14,17 @@ import PhotosCarousel from './PhotosCarousel'
 
 const useStyles = makeStyles(styles)
 
-const PhotosCard = memo(({ photosData }) => {
+const PhotosCard = memo(({ photosData, timezone }) => {
   const classes = useStyles()
 
   const [photosDialog, setPhotosDialog] = useState(false)
 
-  const singlePhoto = R.head(photosData)
+  const sortedPhotosData = R.sortWith(
+    [(a, b) => R.has('id', a) - R.has('id', b), R.descend(R.prop('date'))],
+    photosData
+  )
+
+  const singlePhoto = R.head(sortedPhotosData)
 
   return (
     <>
@@ -39,7 +44,7 @@ const PhotosCard = memo(({ photosData }) => {
               />
               <circle className={classes.circle}>
                 <div>
-                  <Info2>{photosData.length}</Info2>
+                  <Info2>{sortedPhotosData.length}</Info2>
                 </div>
               </circle>
             </div>
@@ -51,7 +56,9 @@ const PhotosCard = memo(({ photosData }) => {
       <InformativeDialog
         open={photosDialog}
         title={`Photo roll`}
-        data={<PhotosCarousel photosData={photosData} />}
+        data={
+          <PhotosCarousel photosData={sortedPhotosData} timezone={timezone} />
+        }
         onDissmised={() => {
           setPhotosDialog(false)
         }}

new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.js

@@ -4,6 +4,7 @@ import React, { memo, useState } from 'react'
 
 import { Carousel } from 'src/components/Carousel'
 import { Label1 } from 'src/components/typography'
+import { formatDate } from 'src/utils/timezones'
 
 import CopyToClipboard from '../../Transactions/CopyToClipboard'
 
@@ -11,7 +12,7 @@ import styles from './PhotosCarousel.styles'
 
 const useStyles = makeStyles(styles)
 
-const PhotosCarousel = memo(({ photosData }) => {
+const PhotosCarousel = memo(({ photosData, timezone }) => {
   const classes = useStyles()
   const [currentIndex, setCurrentIndex] = useState(0)
 
@@ -37,10 +38,19 @@ const PhotosCarousel = memo(({ photosData }) => {
       )}
       <div className={classes.secondRow}>
         <div>
-          <div>
-            <Label>Date</Label>
-            <div>{photosData && photosData[currentIndex]?.date}</div>
-          </div>
+          {photosData[currentIndex].date && (
+            <>
+              <Label>Date</Label>
+              <div>
+                {photosData &&
+                  formatDate(
+                    photosData[currentIndex]?.date,
+                    timezone,
+                    'yyyy-MM-dd HH:mm'
+                  )}
+              </div>
+            </>
+          )}
         </div>
         <div>
           <Label>Taken by</Label>

new-lamassu-admin/src/pages/Customers/components/TransactionsList.js

@@ -120,7 +120,7 @@ const TransactionsList = ({ customer, data, loading, locale }) => {
     {
       header: 'Date',
       width: 100,
-      view: it => formatDate(it.created, timezone, 'yyyy-MM-dd')
+      view: it => formatDate(it.created, timezone, 'yyyy‑MM‑dd')
     },
     {
       header: 'Time (h:m:s)',