feat: twilio api data confirmation dialog

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

@@ -1,3 +1,4 @@
+import { DialogActions, DialogContent, Dialog } from '@material-ui/core'
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
 import { parse, format } from 'date-fns/fp'
@@ -7,9 +8,9 @@ import { useState, React } from 'react'
 import * as Yup from 'yup'
 
 import ImagePopper from 'src/components/ImagePopper'
-import { FeatureButton } from 'src/components/buttons'
+import { FeatureButton, Button, IconButton } from 'src/components/buttons'
 import { TextInput } from 'src/components/inputs/formik'
-import { H3, Info3 } from 'src/components/typography'
+import { H3, Info3, H2 } from 'src/components/typography'
 import {
   OVERRIDE_AUTHORIZED,
   OVERRIDE_REJECTED
@@ -17,6 +18,7 @@ import {
 import { ReactComponent as CardIcon } from 'src/styling/icons/ID/card/comet.svg'
 import { ReactComponent as PhoneIcon } from 'src/styling/icons/ID/phone/comet.svg'
 import { ReactComponent as CrossedCameraIcon } from 'src/styling/icons/ID/photo/crossed-camera.svg'
+import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
 import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/comet.svg'
 import { ReactComponent as CustomerListViewReversedIcon } from 'src/styling/icons/circle buttons/customer-list-view/white.svg'
 import { ReactComponent as CustomerListViewIcon } from 'src/styling/icons/circle buttons/customer-list-view/zodiac.svg'
@@ -71,10 +73,12 @@ const CustomerData = ({
   deleteEditedData,
   updateCustomRequest,
   authorizeCustomRequest,
-  updateCustomEntry
+  updateCustomEntry,
+  retrieveAditionalData
 }) => {
   const classes = useStyles()
   const [listView, setListView] = useState(false)
+  const [retrieve, setRetrieve] = useState(false)
 
   const idData = R.path(['idCardData'])(customer)
   const rawExpirationDate = R.path(['expirationDate'])(idData)
@@ -162,10 +166,11 @@ const CustomerData = ({
       authorize: () => {},
       reject: () => {},
       save: () => {},
+      retrieveAditionalData: () => setRetrieve(true),
       validationSchema: customerDataSchemas.smsData,
       initialValues: initialValues.smsData,
       isAvailable: !_.isNil(phone),
-      isDeletable: !_.isNil(smsData) || !_.isEmpty(smsData.result)
+      hasAditionalData: !_.isNil(smsData) && !_.isEmpty(smsData.result)
     },
     {
       title: 'Name',
@@ -341,10 +346,12 @@ const CustomerData = ({
       fields,
       save,
       deleteEditedData,
+      retrieveAditionalData,
       children,
       validationSchema,
       initialValues,
-      hasImage
+      hasImage,
+      hasAditionalData
     },
     idx
   ) => {
@@ -357,12 +364,14 @@ const CustomerData = ({
         state={state}
         titleIcon={titleIcon}
         hasImage={hasImage}
+        hasAditionalData={hasAditionalData}
         fields={fields}
         children={children}
         validationSchema={validationSchema}
         initialValues={initialValues}
         save={save}
-        deleteEditedData={deleteEditedData}></EditableCard>
+        deleteEditedData={deleteEditedData}
+        retrieveAditionalData={retrieveAditionalData}></EditableCard>
     )
   }
 
@@ -441,8 +450,67 @@ const CustomerData = ({
           </div>
         )}
       </div>
+      <RetrieveDataDialog
+        setRetrieve={setRetrieve}
+        retrieveAditionalData={retrieveAditionalData}
+        open={retrieve}></RetrieveDataDialog>
     </div>
   )
 }
 
+const RetrieveDataDialog = ({
+  setRetrieve,
+  retrieveAditionalData,
+  open,
+  props
+}) => {
+  const classes = useStyles()
+
+  return (
+    <Dialog
+      open={open}
+      aria-labelledby="form-dialog-title"
+      PaperProps={{
+        style: {
+          borderRadius: 8,
+          minWidth: 656,
+          bottom: 125,
+          right: 7
+        }
+      }}
+      {...props}>
+      <div className={classes.closeButton}>
+        <IconButton
+          size={16}
+          aria-label="close"
+          onClick={() => setRetrieve(false)}>
+          <CloseIcon />
+        </IconButton>
+      </div>
+      <H2 className={classes.dialogTitle}>{'Retrieve API data from Twilio'}</H2>
+      <DialogContent className={classes.dialogContent}>
+        <Info3>{`With this action you'll be using Twilio's API to retrieve additional
+  data from this user. This includes name and address, if available.\n`}</Info3>
+        <Info3>{` There is a small cost from Twilio for each retrieval. Would you like
+  to proceed?`}</Info3>
+      </DialogContent>
+      <DialogActions className={classes.dialogActions}>
+        <Button
+          backgroundColor="grey"
+          className={classes.cancelButton}
+          onClick={() => setRetrieve(false)}>
+          Cancel
+        </Button>
+        <Button
+          onClick={() => {
+            retrieveAditionalData()
+            setRetrieve(false)
+          }}>
+          Confirm
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
 export default CustomerData