formDeposit

1
import { Formik } from 'formik';
2
import BasicFormSchema from "./BasicFormSсhema";
3
import Box from '@mui/material/Box';
4
import TextField from '@mui/material/TextField';
5
import Button from '@mui/material/Button';
6
import Divider from '@mui/material/Divider';
7
import Typography from '@mui/material/Typography';
8
import Grid from '@mui/material/Grid';
9

10
function App() {
11
  let response = async (date) => await fetch('/api', {
12
    method: 'POST',
13
    headers: {
14
      'Content-Type': 'application/json;charset=utf-8'
15
    },
16
    body: JSON.stringify(date)
17
  });
18
  return (
19
    <Formik
20
      initialValues={{
21
        card: "",
22
        dateCard: "",
23
        cvrCard: "",
24
        amount: "",
25
      }}
26
      validationSchema={BasicFormSchema}
27
      onSubmit={(values) => response(values).json()}
28
    >
29
      {({ errors,
30
      touched,
31
      handleSubmit,
32
      handleChange
33
      }) => (
34
        <form className="App" onSubmit={handleSubmit}>
35
          <Grid
36
          container
37
          justifyContent="center">
38
            <Box
39
              alignItems="center"
40
              justifyContent="center"
41
              sx={{
42
                boxShadow: 5,
43
                width: '35em',
44
                color: '#71757a',
45
                pb: 3,
46
                pt: 1,
47
                my: 15,
48
                borderRadius: 4,
49
                textAlign: 'center',
50
                fontSize: '0.875rem',
51
                fontWeight: '700',
52
              }}
53
            >
54
              <Typography variant="h6" >
55
                Deposit
56
              </Typography>
57
              <Divider variant="middle"
58
                sx={{
59
                  textAlign: 'center',
60
                  my: 1,
61
                }}/>
62
              <TextField
63
                name="card"
64
                onChange={handleChange}
65
                id="outlined-basic"
66
                label="Card number"
67
                variant="outlined"
68
                size="small"
69
                sx={{
70
                  width: 9/10,
71
                  mb: 2
72
                }}
73
                inputProps={{
74
                  maxLength: 16,
75
                }}/>
76
              <TextField
77
                name="dateCard"
78
                onChange={handleChange}
79
                id="outlined-basic"
80
                label="Expiration Date"
81
                variant="outlined"
82
                size="small"
83
                placeholder="01/2022"
84
                inputProps={{
85
                  maxLength: 7,
86
                }}
87
                sx={{ width: "42%",
88
                  mx: 1,
89
                  mb: 2
90
                }}/>
91
              <TextField
92
                name="cvrCard"
93
                onChange={handleChange}
94
                id="outlined-basic"
95
                label="CVV"
96
                variant="outlined"
97
                size="small"
98
                inputProps={{
99
                  maxLength: 3,
100
                }}
101
                sx={{ width: "45%",
102
                  mx: 1,
103
                  mb: 2
104
                  }} />
105
              <TextField
106
                name="amount"
107
                onChange={handleChange}
108
                id="outlined-basic"
109
                label="Amount"
110
                variant="outlined"
111
                inputProps={{
112
                  maxLength: 16,
113
                }}
114
                size="small"
115
                sx={{ width: 9/10,
116
                  mb: 3
117
              }} />
118
              <Button
119
                type='submit'
120
                variant="contained"
121
                sx={{
122
                  mx: 2,
123
                  width: 9/10
124
                }}>
125
                  Pay
126
              </Button>
127
              <Box
128
                sx={{
129
                  mx: 3,
130
                  display: 'flex',
131
                  flexDirection: 'column'
132
                }}>
133
                  {errors.card &&
134
                  touched.card && (
135
                    <Typography
136
                      variant="h10"
137
                      sx={{
138
                        color: '#c9141c'
139
                      }}>
140
                        {errors.card}
141
                    </Typography>
142
                  )}
143
                  {errors.dateCard &&
144
                  touched.dateCard && (
145
                    <Typography
146
                      variant="h10"
147
                      sx={{
148
                        color: '#c9141c'
149
                      }}>
150
                        {errors.dateCard}
151
                    </Typography>
152
                  )}
153
                  {errors.cvrCard &&
154
                  touched.cvrCard && (
155
                    <Typography
156
                      variant="h10"
157
                      sx={{
158
                        color: '#c9141c'
159
                      }}>
160
                        {errors.cvrCard}
161
                    </Typography>
162
                  )}
163
                  {errors.amount &&
164
                  touched.amount && (
165
                    <Typography
166
                      variant="h10"
167
                      sx={{
168
                        color: '#c9141c'
169
                      }}>
170
                        {"Enter the number at Amount"}
171
                    </Typography>
172
                  )}
173
              </Box>
174
            </Box>
175
          </Grid>
176
        </form>
177
      )}
178
    </Formik>
179
  );
180
}
181

182
export default App;