Amber Shopify Project created using ReactJS+React-Redux with GraphQL API integration. Storefront Shopify API: https://github.com/Shopify/shopify-app-js/tree/main/packages/api-clients/storefront-api-client#readme
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

ConfirmOrder.jsx 8.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. import React, { useState } from 'react';
  2. import {
  3. Box,
  4. Button,
  5. Typography,
  6. Link,
  7. } from '@mui/material';
  8. import Table from '@mui/material/Table';
  9. import TableBody from '@mui/material/TableBody';
  10. import TableCell from '@mui/material/TableCell';
  11. import TableContainer from '@mui/material/TableContainer';
  12. import TableHead from '@mui/material/TableHead';
  13. import TableRow from '@mui/material/TableRow';
  14. import Grid from '@mui/material/Grid2';
  15. import ProductSuggestion from '../../components/ProductSuggestion';
  16. import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
  17. const ConfirmOrder = () => {
  18. const rows = [
  19. {
  20. img_src: 'https://via.placeholder.com/300',
  21. name: 'MELUR',
  22. description: 'Atma Sari New Raya Collection 2024',
  23. colour: 'black',
  24. quantity: 1,
  25. price: 335.50
  26. }
  27. ];
  28. const [shippingMethod, setShippingMethod] = useState('COD');
  29. const handleSubmit = (e) => {
  30. e.preventDefault();
  31. // Handle form submission logic
  32. console.log('Form submitted');
  33. };
  34. const FieldContainer = ({ label, children }) => (
  35. <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
  36. <Typography variant="body1" sx={{ fontWeight: 500, minWidth: 120 }}>
  37. {label}
  38. </Typography>
  39. {children}
  40. </Box>
  41. );
  42. return (
  43. <Box
  44. onSubmit={handleSubmit}
  45. sx={{
  46. width: '100%',
  47. }}
  48. >
  49. <Box sx={{ mt: 5, mb: 3 }}>
  50. <Typography variant='body1' sx={{ fontWeight: "500", mb: 3 }}>THANK YOU MR. OLSON</Typography>
  51. <Typography variant='body2'>Thank you for your order. Your order number is 347982. <br />A confirmation email has also been sent to the email address provided.</Typography>
  52. </Box>
  53. {/* Product TableList */}
  54. <Typography variant='body1' sx={{ fontWeight: "500", my: 5 }}>ORDER CONFIRMATION</Typography>
  55. <TableContainer>
  56. <Table sx={{ minWidth: 650, backgroundColor: "#F7FBFF" }}>
  57. <TableHead>
  58. <TableRow>
  59. <TableCell width={150}>
  60. <Typography variant='body1'>Item</Typography>
  61. </TableCell>
  62. <TableCell width={150}>
  63. {/* This is just for table offset */}
  64. <Typography variant='body1'></Typography>
  65. </TableCell>
  66. <TableCell align='center'>
  67. <Typography variant='body1'>Colour</Typography>
  68. </TableCell>
  69. <TableCell align='center'>
  70. <Typography variant='body1'>Quantity</Typography>
  71. </TableCell>
  72. <TableCell align='center'>
  73. <Typography variant='body1'>Unit Price</Typography>
  74. </TableCell>
  75. <TableCell align='center'>
  76. <Typography variant='body1'>Shipping</Typography>
  77. </TableCell>
  78. <TableCell align='center'>
  79. <Typography variant='body1'>Tax</Typography>
  80. </TableCell>
  81. <TableCell align='center'>
  82. <Typography variant='body1'>Duties</Typography>
  83. </TableCell>
  84. </TableRow>
  85. </TableHead>
  86. <TableBody>
  87. {rows.map((row) => (
  88. <TableRow
  89. key={row.id}
  90. sx={{
  91. '& td, & th': { border: 0 },
  92. '&:last-child td, &:last-child th': { border: 0 }
  93. }}
  94. >
  95. <TableCell component="th" scope="row">
  96. <img
  97. src={row.img_src}
  98. alt={row.img_src}
  99. style={{
  100. width: 100,
  101. height: 100,
  102. aspectRatio: '4 / 4',
  103. objectFit: 'cover',
  104. }}
  105. />
  106. </TableCell>
  107. <TableCell>
  108. <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{row.name}</Typography>
  109. <Typography variant='body2'>{row.description}</Typography>
  110. </TableCell>
  111. <TableCell align='center'>
  112. <Typography variant='body1' sx={{ fontWeight: "bold" }} >{row.colour}</Typography>
  113. </TableCell>
  114. <TableCell align='center'>
  115. <Typography variant='body1' sx={{ fontWeight: "bold" }}>{row.quantity}</Typography>
  116. </TableCell>
  117. <TableCell align='center'>
  118. <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
  119. </TableCell>
  120. <TableCell align='center'>
  121. <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
  122. </TableCell>
  123. <TableCell align='center'>
  124. <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
  125. </TableCell>
  126. <TableCell align='center'>
  127. <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
  128. </TableCell>
  129. </TableRow>
  130. ))}
  131. </TableBody>
  132. </Table>
  133. <Box sx={{
  134. backgroundColor: "#F7FBFF",
  135. borderTop: "1px solid rgba(0,0,0,0.1)",
  136. borderBottom: "1px solid rgba(0,0,0,0.1)",
  137. pl: 2,
  138. pr: 6,
  139. py: 2,
  140. mb: 5,
  141. display: "flex",
  142. justifyContent: "space-between"
  143. }}>
  144. <Link variant='body2' sx={{ textDecoration: "underline", color: "#000", fontWeight: "200", letterSpacing: 1 }}>ADD A GIFT CARD OR PROMOTION CODE</Link>
  145. <Typography variant='body2'> Total <span style={{ fontWeight: "bold" }}>{`RM ${parseFloat(250).toFixed(2)}`}</span> </Typography>
  146. </Box>
  147. </TableContainer>
  148. <Box>
  149. <Grid container>
  150. <Grid size={{xs:12, md:6}} sx={{ borderRight: "1px solid rgba(0,0,0,0.2)", mb:{xs:2, md:0} }}>
  151. <Typography variant='body1' sx={{ fontWeight: "500", mb: 5 }}>PAYMENT METHOD</Typography>
  152. <Box sx={{ display: "flex", flexDirection: {xs:"column", md:"row"} }}>
  153. <Typography variant='body2' sx={{ mr: 5 }}>Credit Card Number</Typography>
  154. <Typography variant="body2" sx={{ display: 'flex' }}>
  155. {[...Array(12)].map((_, index) => (
  156. <FiberManualRecordIcon sx={{ fontSize: 'inherit', verticalAlign: 'middle', mr: ((index + 1) % 4 == 0) ? 2 : 0 }} />
  157. ))}
  158. <span>0046</span>
  159. </Typography>
  160. </Box>
  161. </Grid>
  162. <Grid size={{xs:12, md:6}} sx={{pl:{xs:0, md:2}, pb:2}}>
  163. <Typography variant='body1' sx={{ fontWeight: "500", mb: 5 }}>SHIPPING DETAILS</Typography>
  164. <Typography variant='body2' sx={{mb:3}}>Your will receive your order in 3-4 business days</Typography>
  165. <Button
  166. variant="contained"
  167. color="common.black"
  168. onClick={() => { window.location.href = "/checkout" }}
  169. sx={{
  170. backgroundColor: (theme) => theme.palette.common.black,
  171. color: "white",
  172. textTransform: "none",
  173. px: 8,
  174. py: 2,
  175. width: "fit-content",
  176. "&:hover": {
  177. backgroundColor: (theme) => theme.palette.grey[900],
  178. },
  179. }}>TRACK ORDER</Button>
  180. </Grid>
  181. </Grid>
  182. </Box>
  183. <Box sx={{
  184. width: "100%",
  185. borderTop: "1px solid rgba(0,0,0,0.2)",
  186. borderBottom: "1px solid rgba(0,0,0,0.2)",
  187. py: 4,
  188. textAlign: "center"
  189. }}>
  190. <Typography variant='body1' sx={{ fontWeight: "500", mb: 4 }}>
  191. THE ESSENTIALS BASED ON YOUR LAST PURCHASE
  192. </Typography>
  193. <ProductSuggestion />
  194. </Box>
  195. <Typography variant='body2' sx={{ mb: 4, color: "#AEAEAE", letterSpacing: 1, textAlign:"center", mt:3, mb:6 }}>
  196. <span style={{ color: "#000", fontWeight: "bold" }}>NEED HELP?</span> CALL US: +44 (0)10 2345 6789 | EMAIL CUSTOMER CARE | SHIPPING INFORMATION | RETURNS & EXCHANGES
  197. </Typography>
  198. </Box>
  199. );
  200. };
  201. export default ConfirmOrder;