From e1d700cb396284eaf629066f8a992934f318ad29 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Thu, 17 Feb 2022 17:32:10 +0100
Subject: [PATCH 1/3] fix: format date in PhotoCarousel

fix: photo card chip gap and cursor

fix: sort photos in overview by date
---
 .../src/pages/Customers/CustomerPhotos.js         |  6 ++++--
 .../src/pages/Customers/CustomerPhotos.styles.js  |  5 +++--
 .../src/pages/Customers/CustomerProfile.js        |  3 ++-
 .../pages/Customers/components/CustomerDetails.js |  4 ++--
 .../src/pages/Customers/components/PhotosCard.js  | 15 +++++++++++----
 .../pages/Customers/components/PhotosCarousel.js  | 12 ++++++++++--
 6 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Customers/CustomerPhotos.js b/new-lamassu-admin/src/pages/Customers/CustomerPhotos.js
index 6bb8a19c..f9b45156 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerPhotos.js
+++ b/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)
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerPhotos.styles.js b/new-lamassu-admin/src/pages/Customers/CustomerPhotos.styles.js
index a7fdffe4..93d8637f 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerPhotos.styles.js
+++ b/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',
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
index 1d44c02c..6057c6db 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
@@ -607,6 +607,7 @@ const CustomerProfile = memo(() => {
                   photosData={photosData}
                   locale={locale}
                   setShowCompliance={() => setShowCompliance(!showCompliance)}
+                  timezone={timezone}
                 />
               </Box>
               <div>
@@ -646,7 +647,7 @@ const CustomerProfile = memo(() => {
           )}
           {isPhotos && (
             <div>
-              <CustomerPhotos photosData={photosData} />
+              <CustomerPhotos photosData={photosData} timezone={timezone} />
             </div>
           )}
         </div>
diff --git a/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.js b/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.js
index 8aebf62f..a03728f4 100644
--- a/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.js
+++ b/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} />
diff --git a/new-lamassu-admin/src/pages/Customers/components/PhotosCard.js b/new-lamassu-admin/src/pages/Customers/components/PhotosCard.js
index 0181fdca..d3c56133 100644
--- a/new-lamassu-admin/src/pages/Customers/components/PhotosCard.js
+++ b/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)
         }}
diff --git a/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.js b/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.js
index e0d6f2e0..2e63dc69 100644
--- a/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.js
+++ b/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)
 
@@ -39,7 +40,14 @@ const PhotosCarousel = memo(({ photosData }) => {
         <div>
           <div>
             <Label>Date</Label>
-            <div>{photosData && photosData[currentIndex]?.date}</div>
+            <div>
+              {photosData &&
+                formatDate(
+                  photosData[currentIndex]?.date,
+                  timezone,
+                  'yyyy-MM-dd HH:mm'
+                )}
+            </div>
           </div>
         </div>
         <div>

From 18c92d25363a8420357ab7472601a3c7317ebc6b Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Mon, 21 Feb 2022 12:58:42 +0100
Subject: [PATCH 2/3] fix: add bottom margin to right side panel

fix: date break in transactions list
---
 .../src/pages/Customers/CustomerProfile.styles.js              | 3 ++-
 .../src/pages/Customers/components/TransactionsList.js         | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js b/new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js
index a486abee..4fa08597 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js
+++ b/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,
diff --git a/new-lamassu-admin/src/pages/Customers/components/TransactionsList.js b/new-lamassu-admin/src/pages/Customers/components/TransactionsList.js
index ea8d765e..881da134 100644
--- a/new-lamassu-admin/src/pages/Customers/components/TransactionsList.js
+++ b/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)',

From f8ca83921cb6725c3dd525969d9ff903a218a216 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Mon, 21 Feb 2022 14:36:14 +0100
Subject: [PATCH 3/3] fix: add ID photo to Photos & files

---
 .../src/pages/Customers/CustomerPhotos.js     |  2 +-
 .../src/pages/Customers/CustomerProfile.js    | 13 +++++++++-
 .../Customers/components/PhotosCarousel.js    | 24 ++++++++++---------
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Customers/CustomerPhotos.js b/new-lamassu-admin/src/pages/Customers/CustomerPhotos.js
index f9b45156..526da25d 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerPhotos.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerPhotos.js
@@ -73,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>
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
index 6057c6db..ff1f183b 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
+++ b/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
 
@@ -647,7 +655,10 @@ const CustomerProfile = memo(() => {
           )}
           {isPhotos && (
             <div>
-              <CustomerPhotos photosData={photosData} timezone={timezone} />
+              <CustomerPhotos
+                photosData={R.concat(photosData, IDphotoData)}
+                timezone={timezone}
+              />
             </div>
           )}
         </div>
diff --git a/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.js b/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.js
index 2e63dc69..72635092 100644
--- a/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.js
+++ b/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.js
@@ -38,17 +38,19 @@ const PhotosCarousel = memo(({ photosData, timezone }) => {
       )}
       <div className={classes.secondRow}>
         <div>
-          <div>
-            <Label>Date</Label>
-            <div>
-              {photosData &&
-                formatDate(
-                  photosData[currentIndex]?.date,
-                  timezone,
-                  'yyyy-MM-dd HH:mm'
-                )}
-            </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>