belindas-closet-nextjs_9_495_update-contact-us-page-material-ui (#507)

* update contact us page with new look * "update jest test and contact page" * "updated jest test for contact page"
SeattleColleges · Jul 22, 2024 · e99eee8 · e99eee8
1 parent b629c35
commit e99eee8
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 58 deletions.
diff --git a/app/contact-page/page.tsx b/app/contact-page/page.tsx
@@ -15,63 +15,74 @@ import { Typography, Box, TextField, Button } from "@mui/material";
 
 const Contact = () => {
   return (
-    <Box sx={{ padding: 4 }}>
-      <Typography component="h1" variant="h3" gutterBottom>
-        Contact Us
-      </Typography>
-
-      <Typography component="h2" variant="h5" gutterBottom>
-        Address
-      </Typography>
-      <Typography variant="body1" paragraph>
-        9600 College Way N,<br />
-        Seattle, WA, 98103
-      </Typography>
-
-      <Typography component="h2" variant="h5" gutterBottom>
-        Email
-      </Typography>
-      <Typography variant="body1" paragraph>
-       Add belinda closet email info here
-      </Typography>
-
-      <Typography component="h2" variant="h5" gutterBottom>
-        Phone
-      </Typography>
-      <Typography variant="body1" paragraph>
-        (206) 934-3600
-      </Typography>
-
-      <Typography component="h2" variant="h5" gutterBottom>
-        Get in Touch With Us
-      </Typography>
-      <Box component="form" noValidate autoComplete="off" sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: 600 }}>
-        <TextField
-          label="Name"
-          variant="outlined"
-          required
-          fullWidth
-        />
-        <TextField
-          label="Email"
-          variant="outlined"
-          required
-          fullWidth
-        />
-        <TextField
-          label="Message"
-          variant="outlined"
-          required
-          fullWidth
-          multiline
-          rows={4}
-        />
-        <Button variant="contained" color="primary" type="submit">
-          Send Message
-        </Button>
+    <Box sx={{ padding: 4}}>
+      <Box sx={{ display: 'flex', justifyContent: 'center', mb: 4 }}>
+        <Typography component="h1" variant="h3" gutterBottom>
+          Contact Us
+        </Typography>
+      </Box>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+        <Box sx={{ flex: 1, minWidth: '500px', maxWidth: '40%' }}>
+
+
+          <Typography component="h2" variant="h5" gutterBottom sx={{ textAlign: 'left' }}>
+            Get in Touch With Us
+          </Typography>
+          <Box component="form" noValidate autoComplete="off" sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <TextField
+              label="Name"
+              variant="outlined"
+              required
+              fullWidth
+            />
+            <TextField
+              label="Email"
+              variant="outlined"
+              required
+              fullWidth
+            />
+            <TextField
+              label="Buisness (optional)"
+              variant="outlined"
+              fullWidth
+            />
+            <TextField
+              label="Message"
+              variant="outlined"
+              required
+              fullWidth
+              multiline
+              rows={4}
+            />
+            <Button variant="contained" color="primary" type="submit">
+              Send Message
+            </Button>
+
+            <Typography variant="body1" paragraph sx={{ textAlign: 'left' }}>
+              Email: [email protected]<br></br>
+              Phone: (206) 934-3719
+            </Typography>
+          </Box>
+        </Box>
+        <Box sx={{ flex: 2, minWidth: '550px', display: 'flex', justifyContent: 'center', alignItems: 'center', padding: 4 }}>
+          <Box sx={{ width: '100%', maxWidth: '800px', height: '100%', maxHeight: '600px' }}>
+            <iframe
+              title="contact-page-map"
+              src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10741.007374849207!2d-122.3326717!3d47.6989479!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5490140175955555%3A0x59c4d51ad68ba97!2sNorth%20Seattle%20College!5e0!3m2!1sen!2sus&hl=en"
+              width="100%"
+              height="400"
+              allowFullScreen
+              loading="lazy"
+              style={{ border: "none" }}
+              referrerPolicy="no-referrer-when-downgrade"
+              id={"contact-page-map"}
+            ></iframe>
+          </Box>
+        </Box>
       </Box>
     </Box>
   );
 };
 
-export default Contact;
+export default Contact;
+
diff --git a/tests/unit/contact-page/contactpage.test.tsx b/tests/unit/contact-page/contactpage.test.tsx
@@ -18,9 +18,9 @@ describe('Contact component', () => {
 
   test('renders correctly', () => {
     render(<Contact />);
-    expect(Typography).toHaveBeenCalledTimes(8);
-    expect(Box).toHaveBeenCalledTimes(3);
-    expect(TextField).toHaveBeenCalledTimes(4); // Adjusted the expectation to match the number of TextField components
+    expect(Typography).toHaveBeenCalledTimes(3);
+    expect(Box).toHaveBeenCalledTimes(8); // Adjusted the expectation to match the number of Box components
+    expect(TextField).toHaveBeenCalledTimes(5); // Adjusted the expectation to match the number of TextField components
     expect(Button).toHaveBeenCalledTimes(1);
   });
 });