Skip to content

Commit bf4643c

Browse files
qurbenqurben
authored
React hooks (#11)
* React hooks * Also updates all deps to the latest version.
1 parent 62396eb commit bf4643c

File tree

13 files changed

+13283
-31363
lines changed

13 files changed

+13283
-31363
lines changed

‎package-lock.json

Lines changed: 12979 additions & 31076 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@adyen/adyen-web": "^5.2.1",
6+
"@adyen/adyen-web": "^5.2.2",
77
"@adyen/api-library": "^10.1.0",
8-
"@reduxjs/toolkit": "^1.1.0",
9-
"dotenv": "^8.2.0",
10-
"dotenv-cli": "^4.0.0",
8+
"@reduxjs/toolkit": "^1.6.2",
9+
"dotenv": "^10.0.0",
10+
"dotenv-cli": "^4.1.0",
1111
"express": "^4.17.1",
1212
"morgan": "^1.10.0",
13-
"react": "^16.13.1",
14-
"react-dom": "^16.13.1",
15-
"react-redux": "^7.1.3",
16-
"react-router": "^5.1.2",
17-
"react-router-dom": "^5.1.2",
18-
"uuidv4": "^6.1.1"
13+
"react": "^17.0.2",
14+
"react-dom": "^17.0.2",
15+
"react-redux": "^7.2.6",
16+
"react-router": "^6.0.2",
17+
"react-router-dom": "^6.0.2",
18+
"uuidv4": "^6.2.12"
1919
},
2020
"scripts": {
2121
"start": "dotenv -e .env react-scripts start",
@@ -42,11 +42,11 @@
4242
},
4343
"proxy": "http://localhost:8080",
4444
"devDependencies": {
45-
"@types/jest": "^25.1.4",
46-
"nodemon": "^2.0.2",
47-
"react-scripts": "3.4.0",
48-
"@testing-library/jest-dom": "^4.2.4",
49-
"@testing-library/react": "^9.3.2",
50-
"@testing-library/user-event": "^7.1.2"
45+
"@testing-library/jest-dom": "^5.15.0",
46+
"@testing-library/react": "^12.1.2",
47+
"@testing-library/user-event": "^7.1.2",
48+
"@types/jest": "^25.2.3",
49+
"nodemon": "^2.0.15",
50+
"react-scripts": "4.0.3"
5151
}
5252
}

‎public/index.html

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,7 @@
2626
</head>
2727
<body>
2828
<noscript>You need to enable JavaScript to run this app.</noscript>
29-
<header id="header">
30-
<a href="/">
31-
<img src="/images/mystore-logo.svg" alt="" />
32-
</a>
33-
</header>
34-
<div class="container">
35-
<div id="root"></div>
36-
</div>
29+
<div id="root"></div>
3730
<!--
3831
This HTML file is a template.
3932
If you open it directly in the browser, you will see an empty page.

‎src/App.js

Lines changed: 26 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,31 @@
11
import React from "react";
2-
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
3-
import { Payment } from "./features/payment/Payment";
4-
import { ConnectedRedirectContainer } from "./features/redirect/Redirect";
5-
import { Preview } from "./features/preview/Preview";
6-
import { Status } from "./features/status/Status";
7-
import { Cancel } from "./features/cancel/Cancel";
2+
import { Routes, Route, Link } from "react-router-dom";
3+
import { PaymentContainer } from "./features/payment/Payment";
4+
import { RedirectContainer } from "./features/redirect/Redirect";
5+
import { PreviewContainer } from "./features/preview/Preview";
6+
import { StatusContainer } from "./features/status/Status";
7+
import { CancelContainer } from "./features/cancel/Cancel";
88
import "./App.css";
9+
import { Home } from "./features/home/Home";
910

10-
function App() {
11-
return (
12-
<Router>
13-
<Switch>
14-
<Route path="/preview/:type">
15-
<Preview />
16-
</Route>
17-
<Route path="/checkout/:type">
18-
<Payment />
19-
</Route>
20-
<Route path="/status/:type">
21-
<Status />
22-
</Route>
23-
<Route path="/cancel">
24-
<Cancel />
25-
</Route>
26-
<Route path="/redirect">
27-
<ConnectedRedirectContainer />
28-
</Route>
29-
<Route path="/">
30-
<div className="main-container">
31-
<div className="info">
32-
<h1>Select a demo</h1>
33-
<p>Click to view an interactive example of a PCI-compliant React UI integration for online payments.</p>
34-
<p>
35-
Make sure the payment method you want to use are enabled for your account. Refer{" "}
36-
<a href="https://docs.adyen.com/payment-methods#add-payment-methods-to-your-account">the documentation</a> to add missing
37-
payment methods.
38-
</p>
39-
<p>
40-
To learn more about client-side integration solutions, check out{" "}
41-
<a href="https://docs.adyen.com/checkout">Online payments.</a>
42-
</p>
43-
</div>
44-
<ul className="integration-list">
45-
<li className="integration-list-item">
46-
<Link to="/preview/dropin" className="integration-list-item-link">
47-
<div className="title-container">
48-
<p className="integration-list-item-title">Drop-in</p>
49-
</div>
50-
</Link>
51-
</li>
52-
<li className="integration-list-item">
53-
<Link to="/preview/card" className="integration-list-item-link">
54-
<div className="title-container">
55-
<p className="integration-list-item-title">Card</p>
56-
</div>
57-
</Link>
58-
</li>
59-
<li className="integration-list-item">
60-
<Link to="/preview/ideal" className="integration-list-item-link">
61-
<div className="title-container">
62-
<p className="integration-list-item-title">iDEAL</p>
63-
</div>
64-
</Link>
65-
</li>
66-
<li className="integration-list-item">
67-
<Link to="/preview/giropay" className="integration-list-item-link">
68-
<div className="title-container">
69-
<p className="integration-list-item-title">giropay</p>
70-
</div>
71-
</Link>
72-
</li>
73-
<li className="integration-list-item">
74-
<Link to="/preview/dotpay" className="integration-list-item-link">
75-
<div className="title-container">
76-
<p className="integration-list-item-title">Dotpay</p>
77-
</div>
78-
</Link>
79-
</li>
80-
<li className="integration-list-item">
81-
<Link to="/preview/eps" className="integration-list-item-link">
82-
<div className="title-container">
83-
<p className="integration-list-item-title">EPS</p>
84-
</div>
85-
</Link>
86-
</li>
87-
<li className="integration-list-item">
88-
<Link to="/preview/directEbanking" className="integration-list-item-link">
89-
<div className="title-container">
90-
<p className="integration-list-item-title">Sofort</p>
91-
</div>
92-
</Link>
93-
</li>
94-
<li className="integration-list-item">
95-
<Link to="/preview/bcmc" className="integration-list-item-link">
96-
<div className="title-container">
97-
<p className="integration-list-item-title">Bancontact card</p>
98-
</div>
99-
</Link>
100-
</li>
101-
<li className="integration-list-item">
102-
<Link to="/preview/paysafecard" className="integration-list-item-link">
103-
<div className="title-container">
104-
<p className="integration-list-item-title">PaySafe card</p>
105-
</div>
106-
</Link>
107-
</li>
108-
</ul>
109-
<div className="mt-5">
110-
<Link to="/cancel" className="button text-light">
111-
Cancel and Refund a payment
112-
</Link>
113-
</div>
114-
</div>
115-
</Route>
116-
</Switch>
117-
</Router>
118-
);
119-
}
11+
const App = () => (
12+
<>
13+
<header id="header">
14+
<Link to="/">
15+
<img src="/images/mystore-logo.svg" alt="" />
16+
</Link>
17+
</header>
18+
<div className="container">
19+
<Routes>
20+
<Route path="/preview/:type" element={<PreviewContainer />} />
21+
<Route path="/checkout/:type" element={<PaymentContainer />} />
22+
<Route path="/status/:type" element={<StatusContainer />} />
23+
<Route path="/cancel" element={<CancelContainer />} />
24+
<Route path="/redirect" element={<RedirectContainer />} />
25+
<Route path="/" element={<Home />} />
26+
</Routes>
27+
</div>
28+
</>
29+
);
12030

12131
export default App;

‎src/App.test.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,15 @@ import { render } from "@testing-library/react";
33
import { Provider } from "react-redux";
44
import store from "./app/store";
55
import App from "./App";
6+
import { BrowserRouter } from "react-router-dom";
67

78
// @ts-ignore
89
test("renders Select a demo", () => {
910
const { getByText } = render(
1011
<Provider store={store}>
11-
<App />
12+
<BrowserRouter>
13+
<App />
14+
</BrowserRouter>
1215
</Provider>
1316
);
1417

‎src/features/cancel/Cancel.js

Lines changed: 51 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,18 @@ import React, { useEffect } from "react";
22
import { useDispatch, useSelector } from "react-redux";
33
import { getPaymentDataStore, cancelOrRefundPayment } from "../../app/paymentSlice";
44

5-
export function Cancel() {
5+
export const CancelContainer = () => (
6+
<main className="preview-page">
7+
<section className="cart">
8+
<h2>Payment Transactions</h2>
9+
<div className="order-summary">
10+
<CancelList />
11+
</div>
12+
</section>
13+
</main>
14+
);
15+
16+
const CancelList = () => {
617
const dispatch = useDispatch();
718

819
useEffect(() => {
@@ -11,36 +22,43 @@ export function Cancel() {
1122

1223
const paymentDataStore = useSelector((state) => state.payment.paymentDataStoreRes);
1324

25+
if (!paymentDataStore) {
26+
return (
27+
<p className="m-5">Loading</p>
28+
);
29+
}
30+
31+
const validPayments = paymentDataStore ? Object.values(paymentDataStore).filter(val => val.paymentRef) : []
32+
33+
if (validPayments.length === 0) {
34+
return (
35+
<p className="m-5">Please make a payment first</p>
36+
)
37+
}
38+
39+
return (
40+
<ul className="order-summary-list">
41+
{validPayments.map((val) => <CancelItem payment={val} />)}
42+
</ul>
43+
)
44+
};
45+
46+
const CancelItem = ({ payment }) => {
47+
const dispatch = useDispatch();
48+
1449
return (
15-
<main className="preview-page">
16-
<section className="cart">
17-
<h2>Payment Transactions</h2>
18-
<div className="order-summary">
19-
<ul className="order-summary-list">
20-
{paymentDataStore && Object.values(paymentDataStore).length > 0 ? (
21-
Object.values(paymentDataStore).map((val) =>
22-
val.paymentRef ? (
23-
<li className="order-summary-list-list-item" key={val.reference}>
24-
<p className="m-auto">Ref: {val.paymentRef}</p>
25-
<p className="m-auto">{val.status}</p>
26-
<p className="m-auto">
27-
{val.amount.value / 100} {/* adjust for minor units */}
28-
{val.amount.currency}
29-
</p>
30-
{val.status === "Authorised" ? (
31-
<button className="button btn-info w-25 my-4" onClick={() => dispatch(cancelOrRefundPayment(val.reference))}>
32-
Cancel
33-
</button>
34-
) : null}
35-
</li>
36-
) : null
37-
)
38-
) : (
39-
<p className="m-5">Please make a payment first</p>
40-
)}
41-
</ul>
42-
</div>
43-
</section>
44-
</main>
45-
);
46-
}
50+
<li className="order-summary-list-list-item" key={payment.reference}>
51+
<p className="m-auto">Ref: {payment.paymentRef}</p>
52+
<p className="m-auto">{payment.status}</p>
53+
<p className="m-auto">
54+
{payment.amount.value / 100} {/* adjust for minor units */}
55+
{payment.amount.currency}
56+
</p>
57+
{payment.status === "Authorised" ? (
58+
<button className="button btn-info w-25 my-4" onClick={() => dispatch(cancelOrRefundPayment(payment.reference))}>
59+
Cancel
60+
</button>
61+
) : null}
62+
</li>
63+
)
64+
};

0 commit comments

Comments
 (0)