Skip to content

Commit dcee8a0

Browse files
jaronsgitjaronsgit
committed
Add product image to send page and connect send page to shop page
1 parent d18c7c3 commit dcee8a0

File tree

4 files changed

+211
-158
lines changed

4 files changed

+211
-158
lines changed

‎pages/send.js

+117-66
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,136 @@
11
import { useForm } from "react-hook-form";
2-
import "react"
2+
import "react";
33
import { addTransactionData } from "../firebase/auth";
44
import { Alert, AlertIcon, AlertTitle } from "@chakra-ui/react";
5-
import {useAuth } from "../firebase/auth";
5+
import { useAuth } from "../firebase/auth";
66
import {
7-
Button,
8-
Input,
9-
useToast,
10-
Textarea,
11-
FormControl,
12-
FormErrorMessage,
13-
ErrorMessage,
14-
FormLabel,
15-
Stack,
16-
Text,
17-
Center
18-
} from "@chakra-ui/react";
19-
7+
Button,
8+
Input,
9+
useToast,
10+
Textarea,
11+
FormControl,
12+
FormErrorMessage,
13+
ErrorMessage,
14+
FormLabel,
15+
Stack,
16+
Text,
17+
Center,
18+
Image,
19+
Flex,
20+
} from "@chakra-ui/react";
2021

2122
export default function send() {
22-
const auth = useAuth();
23-
const { handleSubmit, register, errors } = useForm();
24-
const toast = useToast()
25-
async function onSubmit(data){
26-
27-
let transactionID = await addTransactionData(0,data.message, data.receivers_name, data.email, data.your_name, auth.user.email);
28-
if (transactionID == null){
29-
toast({
30-
title: "Payment Error...",
31-
status: "error",
32-
duration: 4000,
33-
});
34-
}
35-
else{
36-
toast({
37-
title: "Payment Aprroved!",
38-
status: "success",
39-
duration: 4000,
40-
});
41-
}
42-
};
23+
const auth = useAuth();
24+
const { handleSubmit, register, errors } = useForm();
25+
const toast = useToast();
26+
async function onSubmit(data) {
27+
let transactionID = await addTransactionData(
28+
0,
29+
data.message,
30+
data.receivers_name,
31+
data.email,
32+
data.your_name,
33+
auth.user.email
34+
);
35+
if (transactionID == null) {
36+
toast({
37+
title: "Payment Error...",
38+
status: "error",
39+
duration: 4000,
40+
});
41+
} else {
42+
toast({
43+
title: "Payment Aprroved!",
44+
status: "success",
45+
duration: 4000,
46+
});
47+
}
48+
}
4349

44-
function AlertPop (props) {
45-
return (
46-
<Alert status="error">
47-
{/* <AlertIcon /> */}
48-
<AlertTitle mr={2} fontSize="xs">{props.title}</AlertTitle>
49-
</Alert>
50-
);
51-
}
52-
53-
50+
function AlertPop(props) {
5451
return (
55-
<form onSubmit={handleSubmit(onSubmit)}>
56-
<Center>
57-
<Stack>
52+
<Alert status="error">
53+
{/* <AlertIcon /> */}
54+
<AlertTitle mr={2} fontSize="xs">
55+
{props.title}
56+
</AlertTitle>
57+
</Alert>
58+
);
59+
}
60+
61+
return (
62+
<form onSubmit={handleSubmit(onSubmit)}>
63+
<Center>
64+
<Flex direction="column">
65+
<Image
66+
src="/linen-flower.png"
67+
alt="product to send"
68+
boxSize="200px"
69+
/>
70+
<Stack>
5871
<FormControl>
59-
<FormLabel htmlFor="your_name_label">Your Name</FormLabel>
60-
<Input name="your_name" placeholder="Claire" ref={register({ required: "Your name is required." })}/>
61-
{errors.your_name && <AlertPop title={errors.your_name.message} />}
72+
<FormLabel htmlFor="your_name_label">Your Name</FormLabel>
73+
<Input
74+
name="your_name"
75+
placeholder="Claire"
76+
ref={register({ required: "Your name is required." })}
77+
/>
78+
{errors.your_name && (
79+
<AlertPop title={errors.your_name.message} />
80+
)}
6281
</FormControl>
6382

6483
<FormControl>
65-
<FormLabel htmlFor="receivers_name_label">Receiver's Name</FormLabel>
66-
<Input name="receivers_name" placeholder="Joe" ref={register({ required: "The receiver's name is required." })}/>
67-
{errors.receivers_name && <AlertPop title={errors.receivers_name.message} />}
84+
<FormLabel htmlFor="receivers_name_label">
85+
Receiver's Name
86+
</FormLabel>
87+
<Input
88+
name="receivers_name"
89+
placeholder="Joe"
90+
ref={register({ required: "The receiver's name is required." })}
91+
/>
92+
{errors.receivers_name && (
93+
<AlertPop title={errors.receivers_name.message} />
94+
)}
6895
</FormControl>
6996

7097
<FormControl>
71-
<FormLabel htmlFor="email_label">Receiver Email</FormLabel>
72-
<Input name="email" placeholder="[email protected]" ref={register({required: "The receiver's name is required.", pattern: {value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: "Please enter a valid email for the receiver."}})} />
73-
{errors.email && <AlertPop title={errors.email.message} />}
98+
<FormLabel htmlFor="email_label">Receiver Email</FormLabel>
99+
<Input
100+
name="email"
101+
placeholder="[email protected]"
102+
ref={register({
103+
required: "The receiver's name is required.",
104+
pattern: {
105+
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
106+
message: "Please enter a valid email for the receiver.",
107+
},
108+
})}
109+
/>
110+
{errors.email && <AlertPop title={errors.email.message} />}
74111
</FormControl>
75112

76113
<FormControl>
77-
<FormLabel htmlFor="message_label">Message</FormLabel>
78-
<Textarea name="message" placeholder='"Have a great day!"' ref={register({ required: false })} />
114+
<FormLabel htmlFor="message_label">Message</FormLabel>
115+
<Textarea
116+
name="message"
117+
placeholder='"Have a great day!"'
118+
ref={register({ required: false })}
119+
/>
79120
</FormControl>
80-
<Button type='submit' color='white' bg='gray.900' width='100%' h={55} mt={5}>Proceed to Payment</Button>
81-
</Stack>
82-
</Center>
83-
</form>
84-
);
85-
}
121+
<Button
122+
type="submit"
123+
color="white"
124+
bg="gray.900"
125+
width="100%"
126+
h={55}
127+
mt={5}
128+
>
129+
Proceed to Payment
130+
</Button>
131+
</Stack>
132+
</Flex>
133+
</Center>
134+
</form>
135+
);
136+
}

0 commit comments

Comments
 (0)