paymentMethodsViewer/index.html at main · LauraCaa/paymentMethodsViewer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
    <head>
        <title>payment</title>
        <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
            function PaymentsTable(){
                const[data, setData]= React.useState(null);

                React.useEffect(() => {
                    fetch("payments.json")
                        .then((response) => {
                            if (!response.ok) {
                                throw new Error("Data wasn't found")
                            }
                            return response.json();
                        })
                        .then((jsonData) => setData(jsonData))
                        .catch((error) => console.error(error));
                }, [])
                if (!data) {
                    return (
                        <div> Waiting for data...</div>
                    );
                };

                return(
                    <div className="main-container">
                        <h1>Payment Methods</h1>
                        <div className="table-container">
                            <table>
                                <tbody>
                                    {data.paymentMethods.map((payment, index) => (
                                        <tr key={index}>
                                            <td>
                                                <img src="https://placehold.co/50x30" alt="bank_img"/>
                                            </td>
                                            <td>
                                                <h4>{payment.holderName} ••••{payment.lastFour} </h4>
                                                {payment.isPrimary && <div>Primary</div>}
                                                <span> Expired {payment.expirationDate}</span>
                                            </td>
                                            <td>
                                                <button>edit</button>
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    </div>

                )
            }
            const root = ReactDOM.createRoot(document.getElementById('root'));
            root.render(<PaymentsTable/>)
        </script>
    </body>
</html>