Skip to content

Commit

Permalink
Merge pull request #161 from adyen-examples/afp-transactions-component
Browse files Browse the repository at this point in the history 
Integration of AfP Transactions component
  • Loading branch information
@gcatanese
gcatanese authored Oct 14, 2024
2 parents 7a8a884 + 7471148 commit 66b2876
Show file tree
Hide file tree
Showing 16 changed files with 557 additions and 137 deletions.
13 changes: 12 additions & 1 deletion config/application.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,18 @@ ADYEN_LEM_API_KEY=
## HMAC key to validate incoming webhook requests
ADYEN_HMAC_KEY=

## URL of the Session Authentication API to create the session token required by Adyen AfP web components
## https://docs.adyen.com/platforms/build-user-dashboards/
##
## Default: https://test.adyen.com/authe/api/v1/sessions
ADYEN_SESSION_AUTHENTICATION_API_URL=https://test.adyen.com/authe/api/v1/sessions

## (Optional) Id of the Hosted Onboarding Theme created in the Customer Area
# When undefined the default theme will be used
## When undefined the default theme will be used
ADYEN_HOSTED_ONBOARDING_THEME_ID=

## URL where the AfP components will appear
## Examples: https://www.example.com | https://*.example.com | http://localhost
##
ADYEN_COMPONENTS_ALLOW_ORIGIN=

34 changes: 31 additions & 3 deletions react-app/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions react-app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@adyen/adyen-platform-experience-web": "^1.1.1",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^5.1.0",
Expand Down
1 change: 0 additions & 1 deletion react-app/src/dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import Grid from "@mui/material/Grid";
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import BarChartIcon from '@mui/icons-material/BarChart';

import { useNavigate } from 'react-router-dom';

Expand Down
182 changes: 64 additions & 118 deletions react-app/src/dashboard/Transactions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,131 +8,77 @@ import Divider from '@mui/material/Divider';
import { useNavigate } from 'react-router-dom';

import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';

import DashboardHeader from "./DashboardHeader.js";
import DashboardDrawer from "./DashboardDrawer.js";

import { AdyenPlatformExperience, TransactionsOverview } from '@adyen/adyen-platform-experience-web';
import "@adyen/adyen-platform-experience-web/adyen-platform-experience-web.css";

export default function Products() {

const navigate = useNavigate()

const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [rows, setRows] = useState([]);

const handleChangePage = (event, newPage) => {
setPage(newPage);
};

const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};

useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.post('/api/dashboard/getTransactions');
setRows(response.data);
} catch (error) {
console.error('API request error:', error);
navigate('/');
}
};

fetchData();
}, []);

return (
<Box sx={{ display: 'flex' }}>

<DashboardHeader/>

<DashboardDrawer/>

<Box
display="flex"
flexDirection="column"
alignItems="center"
width="100%"
sx={{ p: 3 }}
>

<Toolbar />

<Divider sx={{ padding: 1 }}>
<Chip label="My Transactions" variant="elevated" sx={{ minWidth: 100, fontSize: "20px", backgroundColor: "#0abf53", color: "white" }}/>
</Divider>
<Paper sx={{ width: '100%' }}>
<TableContainer>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.id}
align={column.align}
style={{ minWidth: column.minWidth }}
sx={{ fontSize: "18px", fontWeight: "bold" }}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row) => {
return (
<TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
{columns.map((column) => {
const value = row[column.id];
return (
<TableCell key={column.id} align={column.align}
sx={{ fontSize: "15px",
color: value === 'Outgoing' ? '#1573C1' : value === 'Incoming' ? '#0A912E' : 'black',
fontWeight: value === 'Outgoing' ? 'bold' : value === 'Incoming' ? 'bold' : 'normal'
}}
>
{column.format && typeof value === 'number'? column.format(value) : value}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10, 25]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>


</Box>
</Box>
async function sessionRequest() {
try {
const response = await fetch('/api/dashboard/getTransactions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});

if (!response.ok) {
throw new Error(`Error: ${response.status} ${response.statusText}`);
}

return await response.json();
} catch (error) {
console.error("sessionRequest error: ", error);
throw error;
}
}

async function initializeCore() {
const core = await AdyenPlatformExperience({
environment: 'test', // test or live
locale: 'en-US',
async onSessionCreate() {
const session = await sessionRequest();
return session;
}
});
const transactionsOverview = new TransactionsOverview({ core: core, preferredLimit: 10, allowLimitSelection: true });

transactionsOverview.mount('#transactions-overview-container');
}

initializeCore();

return (
<Box sx={{ display: 'flex' }}>

<DashboardHeader/>
<DashboardDrawer/>

<Box
display="flex"
flexDirection="column"
alignItems="center"
width="100%"
sx={{ p: 3 }}>

<Toolbar />

<Divider sx={{ padding: 1 }}>
<Chip label="My Transactions" variant="elevated" sx={{ minWidth: 100, fontSize: "20px", backgroundColor: "#0abf53", color: "white" }}/>
</Divider>

<Paper sx={{ width: '100%' }}>
<div id="transactions-overview-container"></div>
</Paper>

</Box>
</Box>
);
}

const columns = [
{ id: 'id', label: 'ID', minWidth: 100 },
{ id: 'status', label: 'Status', minWidth: 120 },
{ id: 'type', label: 'Type', minWidth: 120 },
{ id: 'created', label: 'Created', minWidth: 220 },
{ id: 'amount', label: 'Amount', minWidth: 150 },
];
Loading

0 comments on commit 66b2876

Please sign in to comment.