Add CI/CD workflow for Vercel deployment and E2E testing; remove old …

.github/workflows/e2e-without-release.yml

@@ -0,0 +1,88 @@
+name: CI/CD Workflow --> Deploy and Run E2E Tests
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy-staging:
+    name: Deploy to Vercel Staging
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+
+      - name: Pull Vercel Environment Information
+        run: |
+          vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN_MY_PROJECT }}
+
+      - name: Build Project Artifacts
+        run: |
+          vercel build --token=${{ secrets.VERCEL_TOKEN_MY_PROJECT }}
+
+      - name: Deploy to Staging
+        id: deploy
+        run: |
+          DEPLOY_URL=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN_MY_PROJECT }} | tail -1)
+          echo "DEPLOYMENT_URL=${DEPLOY_URL}" >> $GITHUB_ENV
+          echo "Deployed to: $DEPLOY_URL"
+
+    env:
+      VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+
+  e2e-tests:
+    name: Run E2E Tests on Staging
+    runs-on: ubuntu-latest
+    needs: deploy-staging
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Install Playwright
+        run: pnpm playwright install
+
+      - name: Run Playwright Tests
+        run: pnpm playwright test
+        env:
+          BASE_URL: ${{ env.DEPLOYMENT_URL }}
+
+  deploy-prod:
+    name: Deploy to Vercel Production
+    runs-on: ubuntu-latest
+    needs: e2e-tests
+    if: github.ref == 'refs/heads/main'
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+
+      - name: Pull Vercel Environment Information
+        run: |
+          vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN_MY_PROJECT }}
+
+      - name: Build Project Artifacts
+        run: |
+          vercel build --prod --token=${{ secrets.VERCEL_TOKEN_MY_PROJECT }}
+
+      - name: Deploy to Production
+        run: |
+          vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN_MY_PROJECT }}
+
+    env:
+      VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}

src/app/form/page.tsx

@@ -1,85 +1,16 @@
-// 'use client';
-
-// import { useState } from 'react';
-
-// export default function Form() {
-//   const [name, setName] = useState('');
-//   const [email, setEmail] = useState('');
-//   const [message, setMessage] = useState('');
-//   const [loading, setLoading] = useState(false);
-//   const [error, setError] = useState('');
-
-//   const handleSubmit = async (e: React.FormEvent) => {
-//     e.preventDefault();
-//     setLoading(true);
-//     setMessage('');
-//     setError('');
-
-//     try {
-//       const res = await fetch('/api/submit', {
-//         method: 'POST',
-//         headers: { 'Content-Type': 'application/json' },
-//         body: JSON.stringify({ name, email }),
-//       });
-
-//       if (!res.ok) throw new Error('Failed to submit');
-//       const data = await res.json();
-//       setMessage(data.message);
-//     } catch {
-//       setError('Submission failed. Please try again.');
-//     } finally {
-//       setLoading(false);
-//     }
-//   };
-
-//   const handleReset = () => {
-//     setName('');
-//     setEmail('');
-//     setMessage('');
-//     setError('');
-//   };
-
-//   return (
-//     <div>
-//       <h1>Form Page</h1>
-//       <form onSubmit={handleSubmit}>
-//         <input
-//           type="text"
-//           placeholder="Enter your name"
-//           value={name}
-//           onChange={(e) => setName(e.target.value)}
-//         />
-//         <input
-//           type="email"
-//           placeholder="Enter your email"
-//           value={email}
-//           onChange={(e) => setEmail(e.target.value)}
-//         />
-//         <button type="submit" disabled={loading}>
-//           {loading ? 'Submitting...' : 'Submit'}
-//         </button>
-//         <button type="button" onClick={handleReset}>Reset</button>
-//       </form>
-//       {message && <p style={{ color: 'green' }}>{message}</p>}
-//       {error && <p style={{ color: 'red' }}>{error}</p>}
-//     </div>
-//   );
-// }
-
-
 'use client';
 
 import { useState } from 'react';
 
 export default function Form() {
-  const [formData, setFormData] = useState({ name: '', email: '' });
+  const [formData, setFormData] = useState({ name: '', email: '', phone: '' });
   const [message, setMessage] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
 
   const validateInputs = () => {
-    if (!formData.name.trim() || !formData.email.trim()) {
-      setError('Both Name and Email are required');
+    if (!formData.name.trim() || !formData.email.trim() || !formData.phone.trim()) {
+      setError('All fields are required');
       return false;
     }
     if (formData.name.length > 50) {
@@ -90,6 +21,10 @@ export default function Form() {
       setError('Invalid email format');
       return false;
     }
+    if (!/^\d{10}$/.test(formData.phone)) {
+      setError('Phone number must be exactly 10 digits');
+      return false;
+    }
     return true;
   };
 
@@ -116,8 +51,8 @@ export default function Form() {
       });
 
       if (!res.ok) throw new Error('Failed to submit');
-      const data = await res.json();
-      setMessage(data.message);
+      await res.json();
+      setMessage(`✅ Hello ${formData.name}, your form has been submitted successfully!`);
     } catch {
       setError('Submission failed. Please try again.');
     } finally {
@@ -126,7 +61,7 @@ export default function Form() {
   };
 
   const handleReset = () => {
-    setFormData({ name: '', email: '' });
+    setFormData({ name: '', email: '', phone: '' });
     setMessage('');
     setError('');
   };
@@ -135,25 +70,21 @@ export default function Form() {
     <div style={{ maxWidth: '400px', margin: 'auto', padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
       <h1>Form Page</h1>
       <form onSubmit={handleSubmit} noValidate>
-        <input
-          type="text"
-          name="name"
-          placeholder="Enter your name"
-          value={formData.name}
-          onChange={handleChange}
-        />
-        <input
-          type="email"
-          name="email"
-          placeholder="Enter your email"
-          value={formData.email}
-          onChange={handleChange}
-        />
-        <button type="submit">{loading ? 'Submitting...' : 'Submit'}</button>
+        <label htmlFor="name">Name:</label>
+        <input type="text" id="name" name="name" placeholder="Enter your name" value={formData.name} onChange={handleChange} />
+
+        <label htmlFor="email">Email:</label>
+        <input type="email" id="email" name="email" placeholder="Enter your email" value={formData.email} onChange={handleChange} />
+
+        <label htmlFor="phone">Phone:</label>
+        <input type="tel" id="phone" name="phone" placeholder="Enter your phone number" value={formData.phone} onChange={handleChange} />
+
+        <button type="submit" disabled={loading}>{loading ? 'Submitting...' : 'Submit'}</button>
         <button type="button" onClick={handleReset}>Reset</button>
       </form>
+
       <p id="error" style={{ color: 'red', visibility: error ? 'visible' : 'hidden' }}>{error}</p>
-      <p id="message" style={{ color: 'purple', visibility: message ? 'visible' : 'hidden' }}>{message}</p>
+      <p id="message" style={{ color: 'green', visibility: message ? 'visible' : 'hidden' }}>{message}</p>
     </div>
   );
 }