Skip to content

Commit 923619a

Browse files
vijayg10vijayg10
authored
Feature/implement payee simulator (#119)
* Added payeeapp simulator * Some improvements * Added payee mobile simulator wrapper and notification style * Added brand icon to payee sim * Bumped up the version and postponed audits
1 parent b6fa54f commit 923619a

File tree

16 files changed

+7004
-6315
lines changed

16 files changed

+7004
-6315
lines changed

‎audit-resolve.json

Lines changed: 6321 additions & 6309 deletions
Large diffs are not rendered by default.

‎docker-compose.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ services:
1010
environment:
1111
- API_BASE_URL=http://localhost:5050
1212
- AUTH_ENABLED=FALSE
13+
# - PAYEE_SIM_BRAND_ICON=some_image
1314
command:
1415
- sh
1516
- /usr/share/nginx/start.sh

‎nginx/start.sh

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,7 @@ fi
44
if [[ ! -z "${AUTH_ENABLED}" ]]; then
55
find /usr/share/nginx/html -type f -name "*.*" -exec sed -i -e "s|TTK_AUTH_ENABLED|$AUTH_ENABLED|g" {} \;
66
fi
7+
if [[ ! -z "${PAYEE_SIM_BRAND_ICON}" ]]; then
8+
find /usr/share/nginx/html -type f -name "*.*" -exec sed -i -e "s|TTK_PAYEE_SIM_BRAND_ICON|$PAYEE_SIM_BRAND_ICON|g" {} \;
9+
fi
710
nginx -g "daemon off;"

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ml-testing-toolkit-ui",
3-
"version": "13.4.1",
3+
"version": "13.5.0",
44
"description": "Mojaloop Testing Toolkit Web User Interface",
55
"main": "index.js",
66
"repository": {

‎src/assets/img/mobile_plain.png

102 KB
Loading

‎src/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ import 'antd/dist/antd.css';
3535

3636
import Login from './views/login/Login.jsx';
3737
import MobileSimulator from "./views/demos/MobileSimulator/MobileSimulator.jsx";
38+
import PayeeAppSimulator from "./views/demos/PayeeAppSimulator/PayeeApp";
39+
import PayeeMobileSimulator from "./views/demos/PayeeAppSimulator/PayeeMobile";
3840
import DemoTestRunner from "./views/demos/DemoTestRunner/DemoTestRunner.jsx";
3941

4042

@@ -98,6 +100,8 @@ function App() {
98100
<Switch>
99101
<Route path="/admin" render={props => <AdminLayout {...props} handleLogout={handleLogout} />} />
100102
<Route exact path='/mobilesimulator' render={props => <MobileSimulator {...props} />} />
103+
<Route exact path='/payeeapp' render={props => <PayeeAppSimulator {...props} />} />
104+
<Route exact path='/payeemobile' render={props => <PayeeMobileSimulator {...props} />} />
101105
<Route exact path='/demotestrunner' render={props => <DemoTestRunner {...props} />} />
102106
<Redirect from='/' to='/admin/index' />
103107
</Switch>

‎src/services/demos/PayeeAppSimulator/payeeNotifications.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/*****
2+
License
3+
--------------
4+
Copyright © 2017 Bill & Melinda Gates Foundation
5+
The Mojaloop files are made available by the Bill & Melinda Gates Foundation under the Apache License, Version 2.0 (the "License") and you may not use these files except in compliance with the License. You may obtain a copy of the License at
6+
http://www.apache.org/licenses/LICENSE-2.0
7+
Unless required by applicable law or agreed to in writing, the Mojaloop files are distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
8+
Contributors
9+
--------------
10+
This is the official list of the Mojaloop project contributors for this file.
11+
Names of the original copyright holders (individuals or organizations)
12+
should be listed with a '*' in the first column. People who have
13+
contributed from an organization can be listed under the organization
14+
that actually holds the copyright for their contributions (see the
15+
Gates Foundation organization for an example). Those individuals should have
16+
their names indented and be marked with a '-'. Email address can be added
17+
optionally within square brackets <email>.
18+
* Gates Foundation
19+
20+
* ModusBox
21+
* Vijaya Kumar Guthi <[email protected]> (Original Author)
22+
--------------
23+
******/
24+
25+
import socketIOClient from "socket.io-client";
26+
import { getConfig } from '../../../utils/getConfig'
27+
28+
class NotificationService {
29+
30+
notificationEventFunction = () => {}
31+
32+
setNotificationEventListener (notificationEventFunction) {
33+
this.notificationEventFunction = notificationEventFunction
34+
}
35+
36+
apiBaseUrl = ''
37+
sessionId = ''
38+
socket = null
39+
socketTopic = 'pushMessage'
40+
41+
constructor (sessionId = null) {
42+
const { apiBaseUrl } = getConfig()
43+
this.apiBaseUrl = apiBaseUrl
44+
this.sessionId = sessionId
45+
46+
this.socket = socketIOClient(this.apiBaseUrl)
47+
this.socket.on(this.socketTopic + (this.sessionId ? '/' + this.sessionId : ''), message => {
48+
this.notificationEventFunction(message)
49+
})
50+
}
51+
52+
getSessionId () {
53+
return this.sessionId
54+
}
55+
56+
disconnect () {
57+
this.socket.disconnect()
58+
}
59+
60+
}
61+
62+
export default NotificationService

‎src/utils/getConfig.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,16 @@ export const getConfig = () => {
3636
// const AUTH_ENABLED = 'TRUE'
3737
const isAuthEnabled = AUTH_ENABLED ? AUTH_ENABLED.toUpperCase() === 'TRUE' : false
3838

39-
return { apiBaseUrl, isAuthEnabled }
39+
// Payee Sim Branding
40+
const payeeAppSimulatorBrandConfig = {
41+
icon: 'data:image/jpeg;base64,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'
42+
}
43+
const PAYEE_SIM_BRAND_ICON = 'TTK_PAYEE_SIM_BRAND_ICON'
44+
if (!PAYEE_SIM_BRAND_ICON.startsWith('TTK')) {
45+
payeeAppSimulatorBrandConfig.icon = PAYEE_SIM_BRAND_ICON
46+
}
47+
48+
return { apiBaseUrl, isAuthEnabled, payeeAppSimulatorBrandConfig }
4049
}
4150

4251
export const getServerConfig = async () => {

‎src/views/common/ArrayInputValues.jsx

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/*****
2+
License
3+
--------------
4+
Copyright © 2017 Bill & Melinda Gates Foundation
5+
The Mojaloop files are made available by the Bill & Melinda Gates Foundation under the Apache License, Version 2.0 (the "License") and you may not use these files except in compliance with the License. You may obtain a copy of the License at
6+
http://www.apache.org/licenses/LICENSE-2.0
7+
Unless required by applicable law or agreed to in writing, the Mojaloop files are distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
8+
Contributors
9+
--------------
10+
This is the official list of the Mojaloop project contributors for this file.
11+
Names of the original copyright holders (individuals or organizations)
12+
should be listed with a '*' in the first column. People who have
13+
contributed from an organization can be listed under the organization
14+
that actually holds the copyright for their contributions (see the
15+
Gates Foundation organization for an example). Those individuals should have
16+
their names indented and be marked with a '-'. Email address can be added
17+
optionally within square brackets <email>.
18+
* Gates Foundation
19+
20+
* ModusBox
21+
* Vijaya Kumar Guthi <[email protected]> (Original Author)
22+
--------------
23+
******/
24+
25+
import React from "react";
26+
import { Input, Row, Col, Button, Card } from 'antd';
27+
import { DeleteTwoTone } from '@ant-design/icons';
28+
import 'antd/dist/antd.css';
29+
30+
class ArrayInputValues extends React.Component {
31+
32+
state = {
33+
values: []
34+
};
35+
36+
componentDidMount = async () => {
37+
if (!this.props.values || !Array.isArray(this.props.values)) {
38+
this.props.onChange([])
39+
} else {
40+
this.setState({values: this.props.values})
41+
}
42+
}
43+
44+
handleDeleteClick = (itemIndex) => {
45+
this.state.values.splice(itemIndex,1)
46+
this.props.onChange(this.state.values)
47+
}
48+
49+
getInputItems = () => {
50+
let inputItems = []
51+
for (let i = 0; i < this.state.values.length; i++) {
52+
inputItems.push(
53+
<Row className='mb-2' key={i}>
54+
<Col span={24}>
55+
<Row gutter={8}>
56+
<Col span={23}>
57+
<Input
58+
value={this.state.values[i]}
59+
onChange={(e) => {
60+
this.state.values[i] = e.target.value
61+
this.props.onChange(this.state.values)
62+
}}
63+
/>
64+
</Col>
65+
<Col span={1}>
66+
<DeleteTwoTone key={i} type="delete" theme="filled"
67+
onClick={() => this.handleDeleteClick(i)}
68+
/>
69+
</Col>
70+
</Row>
71+
</Col>
72+
</Row>
73+
)
74+
}
75+
return inputItems
76+
}
77+
78+
handleAddInputValue = () => {
79+
this.state.values.push('')
80+
this.props.onChange(this.state.values)
81+
}
82+
83+
render() {
84+
return (
85+
<>
86+
<Row gutter={16}>
87+
<Col span={24}>
88+
<Card size='small'>
89+
<Row className='mb-2'>
90+
<Col span={24}>
91+
<Button
92+
className="text-right float-right"
93+
color="primary"
94+
size="sm"
95+
onClick={this.handleAddInputValue}
96+
>
97+
Add
98+
</Button>
99+
</Col>
100+
</Row>
101+
{this.getInputItems()}
102+
</Card>
103+
</Col>
104+
</Row>
105+
</>
106+
)
107+
}
108+
}
109+
110+
export default ArrayInputValues;

‎src/views/demos/Demos.jsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,20 @@ class Demos extends React.Component {
4343
</ul>
4444
</Col>
4545
</Row>
46+
<Row className='my-4'>
47+
<Col span={24}>
48+
<ul>
49+
<li>
50+
<a
51+
href="/payeemobile"
52+
target="_blank"
53+
>
54+
Payee App Simulator
55+
</a>
56+
</li>
57+
</ul>
58+
</Col>
59+
</Row>
4660
<Row className='my-4'>
4761
<Col span={24}>
4862
<ul>

‎src/views/demos/PayeeAppSimulator/BrandIcon.jsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/*****
2+
License
3+
--------------
4+
Copyright © 2017 Bill & Melinda Gates Foundation
5+
The Mojaloop files are made available by the Bill & Melinda Gates Foundation under the Apache License, Version 2.0 (the "License") and you may not use these files except in compliance with the License. You may obtain a copy of the License at
6+
http://www.apache.org/licenses/LICENSE-2.0
7+
Unless required by applicable law or agreed to in writing, the Mojaloop files are distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
8+
Contributors
9+
--------------
10+
This is the official list of the Mojaloop project contributors for this file.
11+
Names of the original copyright holders (individuals or organizations)
12+
should be listed with a '*' in the first column. People who have
13+
contributed from an organization can be listed under the organization
14+
that actually holds the copyright for their contributions (see the
15+
Gates Foundation organization for an example). Those individuals should have
16+
their names indented and be marked with a '-'. Email address can be added
17+
optionally within square brackets <email>.
18+
* Gates Foundation
19+
20+
* ModusBox
21+
* Vijaya Kumar Guthi <[email protected]> (Original Author)
22+
--------------
23+
******/
24+
import React from "react";
25+
import { Image } from 'antd';
26+
import { getConfig } from '../../../utils/getConfig'
27+
28+
29+
class BrandIcon extends React.Component {
30+
31+
state = {
32+
image: null
33+
}
34+
35+
constructor () {
36+
super()
37+
const { payeeAppSimulatorBrandConfig } = getConfig()
38+
this.state.image = payeeAppSimulatorBrandConfig.icon
39+
}
40+
41+
render() {
42+
return (
43+
<>
44+
{
45+
this.state.image
46+
? (
47+
<Image
48+
width={this.props.width || '150px'}
49+
src={this.state.image}
50+
/>
51+
)
52+
: null
53+
}
54+
</>
55+
);
56+
}
57+
}
58+
59+
export default BrandIcon

0 commit comments

Comments
 (0)