From 91e209b6ab13de25a4ab29d41b38843be888c80c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= Date: Wed, 9 Feb 2022 15:09:31 +0000 Subject: [PATCH] feat: add SMS preview component --- .../OperatorInfo/SMSNotices/SMSNotices.js | 69 +++++++++++++++++-- .../SMSNotices/SMSNotices.styles.js | 29 ++++++++ .../{CustomSMSModal.js => SMSNoticesModal.js} | 67 ++++++++++++------ .../src/routing/lamassu.routes.js | 10 +-- new-lamassu-admin/src/routing/pazuz.routes.js | 10 +-- .../src/styling/icons/menu/logo-white.svg | 20 ++++++ 6 files changed, 169 insertions(+), 36 deletions(-) rename new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/{CustomSMSModal.js => SMSNoticesModal.js} (68%) create mode 100644 new-lamassu-admin/src/styling/icons/menu/logo-white.svg diff --git a/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.js b/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.js index edbc8ec3..2692a471 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.js +++ b/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.js @@ -1,5 +1,6 @@ import { useQuery, useMutation } from '@apollo/react-hooks' -import { makeStyles } from '@material-ui/core' +import { makeStyles, Paper } from '@material-ui/core' +import { format } from 'date-fns/fp' import gql from 'graphql-tag' import * as R from 'ramda' import React, { useState } from 'react' @@ -8,11 +9,12 @@ import { DeleteDialog } from 'src/components/DeleteDialog' import { IconButton } from 'src/components/buttons' import { Switch } from 'src/components/inputs' import DataTable from 'src/components/tables/DataTable' -import { H4 } from 'src/components/typography' +import { H4, P, Label3 } from 'src/components/typography' import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg' +import { ReactComponent as WhiteLogo } from 'src/styling/icons/menu/logo-white.svg' -import CustomSMSModal from './CustomSMSModal' import styles from './SMSNotices.styles' +import CustomSMSModal from './SMSNoticesModal' const useStyles = makeStyles(styles) @@ -53,12 +55,45 @@ const DISABLE_SMS_NOTICE = gql` } ` +const multiReplace = (str, obj) => { + var re = new RegExp(Object.keys(obj).join('|'), 'gi') + + return str.replace(re, function(matched) { + return obj[matched.toLowerCase()] + }) +} + +const SMSPreview = ({ sms, coords }) => { + const classes = useStyles(coords) + + const matches = { + '#code': 123, + '#timestamp': format('HH:mm', new Date()) + } + + return ( +
+
+
+ +
+ +

{multiReplace(sms?.message, matches)}

+ + {format('HH:mm', new Date())} +
+
+ ) +} + const SMSNotices = () => { const classes = useStyles() const [deleteDialog, setDeleteDialog] = useState(false) const [showModal, setShowModal] = useState(false) const [selectedSMS, setSelectedSMS] = useState(null) + const [previewOpen, setPreviewOpen] = useState(false) + const [previewCoords, setPreviewCoords] = useState({ x: 0, y: 0 }) const [errorMsg, setErrorMsg] = useState('') const { data: messagesData, loading: messagesLoading } = useQuery( @@ -88,8 +123,6 @@ const SMSNotices = () => { setDeleteDialog(false) } - console.log(messagesData) - const elements = [ { header: 'Message name', @@ -106,6 +139,7 @@ const SMSNotices = () => { view: it => ( { + setPreviewOpen(false) setSelectedSMS(it) setShowModal(true) }}> @@ -129,13 +163,35 @@ const SMSNotices = () => { checked={it.enabled} /> ) + }, + { + header: '', + width: 100, + size: 'sm', + textAlign: 'center', + view: it => ( + { + setSelectedSMS(it) + setPreviewCoords({ + x: e.currentTarget.getBoundingClientRect().right + 50, + y: + window.innerHeight - + 5 - + e.currentTarget.getBoundingClientRect().bottom + }) + setPreviewOpen(true) + }}> + + + ) } ] return ( <>
-

SMS Notices

+

SMS notices

{showModal && ( { }} errorMessage={errorMsg} /> + {previewOpen && } x, + bottom: ({ y }) => y, + width: 350, + overflow: 'visible' + }, + smsPreviewContainer: { + display: 'flex', + flexDirection: 'row', + alignItems: 'flex-end', + '& > *': { + marginRight: 10 + } + }, + smsPreviewIcon: { + display: 'flex', + width: 36, + height: 36, + borderRadius: 18, + backgroundColor: '#16D6D3', + alignItems: 'center', + justifyContent: 'center' + }, + smsPreviewContent: { + width: 225, + padding: 15, + borderRadius: '15px 15px 15px 0px' } } diff --git a/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/CustomSMSModal.js b/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNoticesModal.js similarity index 68% rename from new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/CustomSMSModal.js rename to new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNoticesModal.js index cf76bb5d..a5f17d9c 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/CustomSMSModal.js +++ b/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNoticesModal.js @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/core' +import { makeStyles, Chip } from '@material-ui/core' import { Form, Formik, Field } from 'formik' import * as R from 'ramda' import React from 'react' @@ -27,14 +27,14 @@ const prefill = { .required('The message content is required!') .trim() .test({ - name: 'has-code-tag', - message: 'A #code tag is missing from the message!', + name: 'has-code', + message: 'The confirmation code is missing from the message!', exclusive: false, test: value => value?.match(/#code/g || [])?.length > 0 }) .test({ - name: 'has-single-code-tag', - message: 'There should be a single #code tag!', + name: 'has-single-code', + message: 'There should be a single confirmation code!', exclusive: false, test: value => value?.match(/#code/g || [])?.length === 1 }) @@ -43,22 +43,33 @@ const prefill = { validator: Yup.string() .required('The message content is required!') .trim() - .test({ - name: 'has-timestamp-tag', - message: 'A #timestamp tag is missing from the message!', - exclusive: false, - test: value => value?.match(/#timestamp/g || [])?.length > 0 - }) - .test({ - name: 'has-single-timestamp-tag', - message: 'There should be a single #timestamp tag!', - exclusive: false, - test: value => value?.match(/#timestamp/g || [])?.length === 1 - }) + // .test({ + // name: 'has-timestamp-tag', + // message: 'A #timestamp tag is missing from the message!', + // exclusive: false, + // test: value => value?.match(/#timestamp/g || [])?.length > 0 + // }) + // .test({ + // name: 'has-single-timestamp-tag', + // message: 'There should be a single #timestamp tag!', + // exclusive: false, + // test: value => value?.match(/#timestamp/g || [])?.length === 1 + // }) } } -const CustomSMSModal = ({ showModal, onClose, sms, creationError, submit }) => { +const chips = { + smsCode: [{ code: '#code', display: 'Confirmation code', removable: false }], + cashOutDispenseReady: [] +} + +const SMSNoticesModal = ({ + showModal, + onClose, + sms, + creationError, + submit +}) => { const classes = useStyles() const initialValues = { @@ -111,7 +122,7 @@ const CustomSMSModal = ({ showModal, onClose, sms, creationError, submit }) => { onSubmit={(values, errors, touched) => handleSubmit(values, errors, touched) }> - {({ values, errors, touched }) => ( + {({ values, errors, touched, setFieldValue }) => (
{ rows={6} component={TextInput} /> + {R.map( + it => ( + { + R.includes(it.code, values.message) + ? setFieldValue('message', values.message) + : setFieldValue( + 'message', + values.message.concat(' ', it.code, ' ') + ) + }} + /> + ), + chips[sms?.event] + )}
{getErrorMsg(errors, touched, creationError) && ( @@ -143,4 +170,4 @@ const CustomSMSModal = ({ showModal, onClose, sms, creationError, submit }) => { ) } -export default CustomSMSModal +export default SMSNoticesModal diff --git a/new-lamassu-admin/src/routing/lamassu.routes.js b/new-lamassu-admin/src/routing/lamassu.routes.js index 7573c955..e33d690c 100644 --- a/new-lamassu-admin/src/routing/lamassu.routes.js +++ b/new-lamassu-admin/src/routing/lamassu.routes.js @@ -17,7 +17,7 @@ import Notifications from 'src/pages/Notifications/Notifications' import CoinAtmRadar from 'src/pages/OperatorInfo/CoinATMRadar' import ContactInfo from 'src/pages/OperatorInfo/ContactInfo' import ReceiptPrinting from 'src/pages/OperatorInfo/ReceiptPrinting' -import CustomSMS from 'src/pages/OperatorInfo/SMSNotices/SMSNotices' +import SMSNotices from 'src/pages/OperatorInfo/SMSNotices/SMSNotices' import TermsConditions from 'src/pages/OperatorInfo/TermsConditions' import ServerLogs from 'src/pages/ServerLogs' import Services from 'src/pages/Services/Services' @@ -174,11 +174,11 @@ const getLamassuRoutes = () => [ component: ReceiptPrinting }, { - key: 'custom-sms', - label: 'Custom SMS', - route: '/settings/operator-info/custom-sms', + key: 'sms-notices', + label: 'SMS notices', + route: '/settings/operator-info/sms-notices', allowedRoles: [ROLES.USER, ROLES.SUPERUSER], - component: CustomSMS + component: SMSNotices }, { key: 'coin-atm-radar', diff --git a/new-lamassu-admin/src/routing/pazuz.routes.js b/new-lamassu-admin/src/routing/pazuz.routes.js index 301c8fa9..8789a1d1 100644 --- a/new-lamassu-admin/src/routing/pazuz.routes.js +++ b/new-lamassu-admin/src/routing/pazuz.routes.js @@ -20,7 +20,7 @@ import Notifications from 'src/pages/Notifications/Notifications' import CoinAtmRadar from 'src/pages/OperatorInfo/CoinATMRadar' import ContactInfo from 'src/pages/OperatorInfo/ContactInfo' import ReceiptPrinting from 'src/pages/OperatorInfo/ReceiptPrinting' -import CustomSMS from 'src/pages/OperatorInfo/SMSNotices/SMSNotices' +import SMSNotices from 'src/pages/OperatorInfo/SMSNotices/SMSNotices' import TermsConditions from 'src/pages/OperatorInfo/TermsConditions' import ServerLogs from 'src/pages/ServerLogs' import Services from 'src/pages/Services/Services' @@ -169,11 +169,11 @@ const getPazuzRoutes = () => [ component: ReceiptPrinting }, { - key: 'custom-sms', - label: 'Custom SMS', - route: '/settings/operator-info/custom-sms', + key: 'sms-notices', + label: 'SMS notices', + route: '/settings/operator-info/sms-notices', allowedRoles: [ROLES.USER, ROLES.SUPERUSER], - component: CustomSMS + component: SMSNotices }, { key: 'coin-atm-radar', diff --git a/new-lamassu-admin/src/styling/icons/menu/logo-white.svg b/new-lamassu-admin/src/styling/icons/menu/logo-white.svg new file mode 100644 index 00000000..7de68c79 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/menu/logo-white.svg @@ -0,0 +1,20 @@ + + + + Created with Sketch. + + + + + + + + + \ No newline at end of file