Prachi: First batch of pages created for frontend.

src/pages/Checkout/index.tsx

@@ -0,0 +1,147 @@
+import './style.module.css'
+import PageContainer from 'components/PageContainer'
+import type React from 'react'
+import { useState } from 'react'
+import { Form, Button, Col, Row, Alert, Accordion } from 'react-bootstrap'
+import { useNavigate } from 'react-router-dom'
+
+const RegistrationForm = () => {
+  const navigate = useNavigate()
+  const [error, setError] = useState('')
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setError('TODO: Implement Checkout')
+    navigate('/OrderConfirmation')
+  }
+
+  return (
+    <>
+      <div className='text-center'>
+        <h1>Checkout</h1>
+      </div>
+      <Col className='mx-auto mt-3'>
+        <Form onSubmit={handleSubmit} validated>
+          <Row className='mb-3'>
+
+            <Form.Group as={Col} controlId='formGridName'>
+              <Form.Label className='required'>First Name</Form.Label>
+              <Form.Control required />
+            </Form.Group>
+
+            <Form.Group as={Col} controlId='formGridName'>
+              <Form.Label className='required'>Last Name</Form.Label>
+              <Form.Control required />
+            </Form.Group>
+
+          </Row>
+          <Row className='mb-3'>
+
+          <Form.Group as={Col} controlId='formGridEmail'>
+              <Form.Label className='required'>Email</Form.Label>
+              <Form.Control type='email' placeholder='Enter email' required />
+            </Form.Group>
+
+            <Form.Group as={Col} controlId='formGridPhone'>
+              <Form.Label className='required'>Phone</Form.Label>
+              <Form.Control required />
+            </Form.Group>
+          </Row>
+          <Form.Group className='mb-3' controlId='formGridAddress1'>
+            <Form.Label className='required'>Address</Form.Label>
+            <Form.Control placeholder='1234 Main St' required />
+          </Form.Group>
+          <Form.Group className='mb-3' controlId='formGridAddress2'>
+            <Form.Label className='required'>Address 2</Form.Label>
+            <Form.Control placeholder='Apartment, studio, or floor' required />
+          </Form.Group>
+          <Row className='mb-3'>
+            <Form.Group as={Col} controlId='formGridCity'>
+              <Form.Label className='required'>City</Form.Label>
+              <Form.Control required />
+            </Form.Group>
+            <Form.Group as={Col} controlId='formGridState'>
+              <Form.Label className='required'>State</Form.Label>
+              <Form.Select defaultValue='Choose...' required>
+                <option>Choose...</option>
+                <option>...</option>
+              </Form.Select>
+            </Form.Group>
+            <Form.Group as={Col} md={3} controlId='formGridZip'>
+              <Form.Label className='required'>Zip</Form.Label>
+              <Form.Control required />
+            </Form.Group>
+          </Row>
+          <Accordion>
+            <Accordion.Item eventKey='0'>
+              <Accordion.Header>Payment Information</Accordion.Header>
+              <Accordion.Body>
+                <Row className='mb-3'>
+                  <Form.Group as={Col} md={3} controlId='formGridEmail'>
+                    <Form.Label>Card Type</Form.Label>
+                    <Form.Select>
+                      <option value=''>Select card type</option>
+                      <option value='Visa'>Visa</option>
+                      <option value='MasterCard'>MasterCard</option>
+                      <option value='American Express'>American Express</option>
+                      <option value='Discover'>Discover</option>
+                    </Form.Select>
+                  </Form.Group>
+
+                  <Form.Group as={Col} md={6} controlId='formGridCardNumber'>
+                    <Form.Label>Card Number</Form.Label>
+                    <Form.Control />
+                  </Form.Group>
+                  <Form.Group as={Col} md={3} controlId='formGridCardExp'>
+                    <Form.Label>Card Expiration</Form.Label>
+                    <Form.Control type='text' placeholder='01/28' />
+                  </Form.Group>
+                </Row>
+                <Form.Group className='mb-3' controlId='formGridAddress1'>
+                  <Form.Label>Address</Form.Label>
+                  <Form.Control placeholder='1234 Main St' />
+                </Form.Group>
+                <Form.Group className='mb-3' controlId='formGridAddress2'>
+                  <Form.Label>Address 2</Form.Label>
+                  <Form.Control placeholder='Apartment, studio, or floor' />
+                </Form.Group>
+                <Row className='mb-3'>
+                  <Form.Group as={Col} controlId='formGridCity'>
+                    <Form.Label>City</Form.Label>
+                    <Form.Control />
+                  </Form.Group>
+                  <Form.Group as={Col} controlId='formGridState'>
+                    <Form.Label>State</Form.Label>
+                    <Form.Select defaultValue='Choose...'>
+                      <option>Choose...</option>
+                      <option>...</option>
+                    </Form.Select>
+                  </Form.Group>
+                  <Form.Group as={Col} md={3} controlId='formGridZip'>
+                    <Form.Label>Zip</Form.Label>
+                    <Form.Control />
+                  </Form.Group>
+                </Row>
+              </Accordion.Body>
+            </Accordion.Item>
+          </Accordion>
+
+          <Form.Group as={Row} className='mt-3'>
+            <Button variant='primary' type='submit'>
+              Confirm Order
+            </Button>
+          </Form.Group>
+        </Form>
+        {error ? <Alert variant='danger'>{error}</Alert> : null}
+      </Col>
+    </>
+  )
+}
+
+const Index: React.FC = () => (
+  <PageContainer>
+    <RegistrationForm />
+  </PageContainer>
+)
+
+export default Index

src/pages/Checkout/style.module.css

@@ -0,0 +1,5 @@
+.required::after {
+    content: ' *';
+    color: red;
+  }
+

src/pages/EditProfile/index.tsx

@@ -0,0 +1,144 @@
+import PageContainer from 'components/PageContainer'
+import { useState } from 'react'
+import Button from 'react-bootstrap/Button'
+
+interface UserProfile {
+  username: string
+  password: string
+  email: string
+  birthday: string
+}
+
+const UserProfileForm: React.FC = () => {
+  const [userProfile, setUserProfile] = useState<UserProfile>({
+    username: 'user',
+    password: '12345',
+    email: '[email protected]',
+    birthday: '2001-01-01'
+  })
+
+  // Controls whether or not user can edit data
+  const [editingUser, setEditingUser] = useState(false)
+  const [editingPass, setEditingPass] = useState(false)
+  const [editingEmail, setEditingEmail] = useState(false)
+  const [editingBday, setEditingBday] = useState(false)
+
+  const handleInputChange = (field: keyof UserProfile, value: string) => {
+    setUserProfile(prevProfile => ({
+      ...prevProfile,
+      [field]: value
+    }))
+  }
+
+  // Function to handle Saving all values at once
+  const handleSaveALL = () => {
+    setEditingUser(false)
+    setEditingPass(false)
+    setEditingEmail(false)
+    setEditingBday(false)
+  }
+
+  return (
+    <div
+      style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
+    >
+      <h1 style={{ marginBottom: '30px' }}> User Profile</h1>
+      <h1 style={{ marginBottom: '30px' }}> 🎥</h1>
+      <div style={{ marginBottom: '20px' }}>
+        <label style={{ marginRight: '40px' }}>Username: </label>
+        <input
+          type='text'
+          value={userProfile.username}
+          onChange={e => handleInputChange('username', e.target.value)}
+          readOnly={!editingUser}
+        />
+        {editingUser ? <button onClick={() => setEditingUser(false)}>
+            <span role='img' aria-label='Save'>
+              ✅
+            </span>
+          </button> : null}
+        {!editingUser && (
+          <button onClick={() => setEditingUser(true)}>
+            <span role='img' aria-label='Edit'>
+              ✏️
+            </span>
+          </button>
+        )}
+      </div>
+      <div style={{ marginBottom: '20px' }}>
+        <label style={{ marginRight: '40px' }}>Password:</label>
+        <input
+          type='text'
+          value={userProfile.password}
+          onChange={e => handleInputChange('password', e.target.value)}
+          readOnly={!editingPass}
+        />
+        {editingPass ? <button onClick={() => setEditingPass(false)}>
+            <span role='img' aria-label='Save'>
+              ✅
+            </span>
+          </button> : null}
+        {!editingPass && (
+          <button onClick={() => setEditingPass(true)}>
+            <span role='img' aria-label='Edit'>
+              ✏️
+            </span>
+          </button>
+        )}
+      </div>
+      <div style={{ marginBottom: '20px' }}>
+        <label style={{ marginRight: '65px' }}>Email:</label>
+        <input
+          type='text'
+          value={userProfile.email}
+          onChange={e => handleInputChange('email', e.target.value)}
+          readOnly={!editingEmail}
+        />
+        {editingEmail ? <button onClick={() => setEditingEmail(false)}>
+            <span role='img' aria-label='Save'>
+              ✅
+            </span>
+          </button> : null}
+        {!editingEmail && (
+          <button onClick={() => setEditingEmail(true)}>
+            <span role='img' aria-label='Edit'>
+              ✏️
+            </span>
+          </button>
+        )}
+      </div>
+      <div style={{ marginBottom: '20px' }}>
+        <label style={{ marginRight: '40px' }}>Birthday:</label>
+        <input
+          type='text'
+          value={userProfile.birthday}
+          onChange={e => handleInputChange('birthday', e.target.value)}
+          readOnly={!editingBday}
+        />
+        {editingBday ? <button onClick={() => setEditingBday(false)}>
+            <span role='img' aria-label='Save'>
+              ✅
+            </span>
+          </button> : null}
+        {!editingBday && (
+          <button onClick={() => setEditingBday(true)}>
+            <span role='img' aria-label='Edit'>
+              ✏️
+            </span>
+          </button>
+        )}
+      </div>
+      <Button variant='primary' type='submit' onClick={handleSaveALL}>
+        Save All
+      </Button>
+    </div>
+  )
+}
+
+const Index: React.FC = () => (
+  <PageContainer>
+    <UserProfileForm />
+  </PageContainer>
+)
+
+export default Index

src/pages/OrderConfirmation/index.tsx

@@ -0,0 +1,69 @@
+import PageContainer from 'components/PageContainer'
+import { useState } from 'react'
+
+interface UserProfile {
+  username: string;
+  password: string;
+  email: string;
+  birthday: string;
+  movie: string;
+  date: string;
+  time: string;
+  price: string;
+  location: string;
+  address: string;
+}
+
+const OrderConfirmation: React.FC = () => {
+  const [userProfile] = useState<UserProfile>({
+    username: 'user',
+    password: '12345',
+    email: '[email protected]',
+    birthday: '2001-01-01',
+    movie: 'The Bee Movie',
+    date: '3/3/21',
+    time: '3:00pm',
+    price: '$12.00',
+    location: 'MovieLand ATL',
+    address: '1234 MovieWay, Atlanta, GA, 30602'
+  });
+
+
+
+  return (
+
+    <div style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh', // Adjust the height as needed
+    }}>
+        <div style={{
+            background: 'rgba(163, 255, 13, 0.03)',
+            borderRadius: '10px',  // Set border-radius for curved edges
+            padding: '20px',       // Adjust padding as needed
+            display: 'inline-block', // Make the background box inline with the content
+            border: '2px solid #A3FF0D' 
+        }}>
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                <h1 style={{marginBottom: '30px'}}> 🎉Congratulations!🎉</h1>
+                <h4 style={{marginBottom: '40px'}}> We've received your order!</h4>
+                <label style={{marginBottom:'40px'}}> Look out for your confirmation email at <strong>{userProfile.email}</strong> </label>
+                <h1 style={{marginBottom: '30px'}}> 🖼️</h1>
+                <h6 style={{marginBottom: '30px'}}> We can't wait to see you at  <strong>{userProfile.location}</strong> for 
+                                                <strong>{userProfile.movie}</strong> on <strong>{userProfile.date}</strong>! </h6>
+            </div>
+        </div>
+    </div>
+
+
+  );
+};
+
+const Index: React.FC = () => (
+  <PageContainer>
+    <OrderConfirmation />
+  </PageContainer>
+)
+
+export default Index;