refactor: styling improvements and add custom carousel component

lib/new-admin/services/transactions.js

@@ -285,4 +285,12 @@ function updateTxCustomerPhoto (customerId, txId, direction, data) {
     : db.oneOrNone(cashOutSql, [formattedData.tx_customer_photo_at, formattedData.tx_customer_photo_path, customerId, txId])
 }
 
-module.exports = { batch, single, cancel, getCustomerTransactionsBatch, getTx, getTxAssociatedData, updateTxCustomerPhoto }
+module.exports = {
+  batch,
+  single,
+  cancel,
+  getCustomerTransactionsBatch,
+  getTx,
+  getTxAssociatedData,
+  updateTxCustomerPhoto
+}

lib/routes/customerRoutes.js

@@ -108,7 +108,7 @@ function updateTxCustomerPhoto (req, res, next) {
 
   Promise.all([customers.getById(customerId), txs.getTx(txId, direction)])
     .then(([customer, tx]) => {
-      if (!customer || !tx) { throw httpError('Not Found', 404) }
+      if (!customer || !tx) return
       return customers.updateTxCustomerPhoto(tcPhotoData)
         .then(newPatch => txs.updateTxCustomerPhoto(customerId, txId, direction, newPatch))
     })

migrations/1627563019030-add-customer-tc-photo-path.js

@@ -2,8 +2,8 @@ const db = require('./db')
 
 exports.up = function (next) {
   const sql = [
-    'ALTER TABLE cash_in_txs ADD COLUMN tx_customer_photo_at timestamptz, ADD COLUMN tx_customer_photo_path text',
-    'ALTER TABLE cash_out_txs ADD COLUMN tx_customer_photo_at timestamptz, ADD COLUMN tx_customer_photo_path text'
+    'ALTER TABLE cash_in_txs ADD COLUMN tx_customer_photo_at TIMESTAMPTZ, ADD COLUMN tx_customer_photo_path TEXT',
+    'ALTER TABLE cash_out_txs ADD COLUMN tx_customer_photo_at TIMESTAMPTZ, ADD COLUMN tx_customer_photo_path TEXT'
   ]
   db.multi(sql, next)
 }

new-lamassu-admin/src/components/Carousel.js

@@ -0,0 +1,57 @@
+import { makeStyles } from '@material-ui/core/styles'
+import React, { memo } from 'react'
+import ReactCarousel from 'react-material-ui-carousel'
+
+import { URI } from 'src/utils/apollo'
+
+const useStyles = makeStyles({
+  imgWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    width: 550,
+    height: 550
+  },
+  imgInner: {
+    objectFit: 'cover',
+    objectPosition: 'center',
+    width: 550,
+    height: 550,
+    marginBottom: 40
+  }
+})
+
+export const Carousel = memo(({ photosData, slidePhoto }) => {
+  const classes = useStyles()
+
+  return (
+    <>
+      <ReactCarousel
+        navButtonsProps={{
+          style: {
+            backgroundColor: 'transparent',
+            borderRadius: 0,
+            fontSize: 100
+          }
+        }}
+        className={classes.slideButtons}
+        autoPlay={false}
+        indicators={false}
+        navButtonsAlwaysVisible={true}
+        next={activeIndex => slidePhoto(activeIndex)}
+        prev={activeIndex => slidePhoto(activeIndex)}>
+        {photosData.map((item, i) => (
+          <div>
+            <div className={classes.imgWrapper}>
+              <img
+                className={classes.imgInner}
+                src={`${URI}/${item?.photoDir}/${item?.path}`}
+                alt=""
+              />
+            </div>
+          </div>
+        ))}
+      </ReactCarousel>
+    </>
+  )
+})

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

@@ -3,8 +3,8 @@ import Paper from '@material-ui/core/Card'
 import { makeStyles } from '@material-ui/core/styles'
 import * as R from 'ramda'
 import React, { memo, useState } from 'react'
-import Carousel from 'react-material-ui-carousel'
 
+import { Carousel } from 'src/components/Carousel'
 import { InformativeDialog } from 'src/components/InformativeDialog'
 import { Info2, Label1 } from 'src/components/typography'
 import { ReactComponent as CrossedCameraIcon } from 'src/styling/icons/ID/photo/crossed-camera.svg'
@@ -27,8 +27,7 @@ const PhotosCard = memo(({ frontCameraData, txPhotosData }) => {
   const [photosDialog, setPhotosDialog] = useState(false)
 
   const mapKeys = pair => {
-    const key = R.head(pair)
-    const value = R.last(pair)
+    const [key, value] = pair
     if (key === 'txCustomerPhotoPath' || key === 'frontCameraPath') {
       return ['path', value]
     }
@@ -59,15 +58,11 @@ const PhotosCard = memo(({ frontCameraData, txPhotosData }) => {
 
   const singlePhoto = R.head(photosData)
 
-  const isPhotoRollAvailable = () => {
-    return !singlePhoto
-  }
-
   return (
     <>
       <Paper className={classes.photo} elevation={0}>
         <ButtonBase
-          disabled={isPhotoRollAvailable()}
+          disabled={!singlePhoto}
           className={classes.button}
           onClick={() => {
             setPhotosDialog(true)
@@ -112,32 +107,7 @@ export const PhotosCarousel = memo(({ photosData }) => {
 
   return (
     <>
-      <Carousel
-        navButtonsProps={{
-          style: {
-            backgroundColor: 'transparent',
-            borderRadius: 0,
-            fontSize: 100
-          }
-        }}
-        className={classes.slideButtons}
-        autoPlay={false}
-        indicators={false}
-        navButtonsAlwaysVisible={true}
-        next={activeIndex => slidePhoto(activeIndex)}
-        prev={activeIndex => slidePhoto(activeIndex)}>
-        {photosData.map((item, i) => (
-          <div>
-            <div className={classes.imgWrapper}>
-              <img
-                className={classes.imgInner}
-                src={`${URI}/${item?.photoDir}/${item?.path}`}
-                alt=""
-              />
-            </div>
-          </div>
-        ))}
-      </Carousel>
+      <Carousel photosData={photosData} slidePhoto={slidePhoto} />
       {!isFaceCustomerPhoto && (
         <div className={classes.firstRow}>
           <Label>Session ID</Label>