BiryaniHubflaskhema

Runtime error

App Files Files Community

lokeshloki143 commited on Apr 24

Commit

7e5a743

verified ·

1 Parent(s): e89d19d

Update templates/customer_details.html

Browse files

Files changed (1) hide show

templates/customer_details.html +105 -85

templates/customer_details.html CHANGED Viewed

@@ -2,19 +2,19 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>User Profile</title>
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
   <style>
     body {
       background-color: #FDF4E3;
       margin: 0;
       padding: 0;
-      position: relative;
       min-height: 100vh;
     }
-    /* Top orange bar */
     .top-bar {
       background-color: #FF6F3C;
       width: 100%;
@@ -30,27 +30,21 @@
     }
     .back-arrow {
       font-size: 1.8rem;
-      color: #000; /* Dark black */
       font-weight: bold;
     }
     .back-label {
       margin-left: 10px;
       color: white;
       font-weight: bold;
-      font-size: 1rem;
     }
     h1 {
       color: #1C1C1C;
       font-size: 1.2rem;
-      margin: 30px 0 15px; /* Default margin for larger screens */
       text-align: center;
     }
-    /* For mobile view */
-    @media (max-width: 576px) {
-      h1 {
-        margin-top: 2px; /* Reduced top margin for mobile */
-      }
-    }
     .form-control {
       border: 1px solid #333;
       color: #808080;
@@ -60,7 +54,7 @@
       color: #000 !important;
     }
     .form-label {
-      color: #000 !important;
       font-size: 0.8rem;
     }
     input.form-control[readonly], textarea.form-control[readonly] {
@@ -76,53 +70,63 @@
     }
     .pen-icon {
       position: absolute;
-      right: 5px;
       top: 50%;
       transform: translateY(-50%);
       cursor: pointer;
-      font-size: 1.2rem;
       color: black;
     }
     .pen-icon.editing {
       color: #333;
     }
-    .button-container {
-      display: flex;
-      flex-direction: column;
-      margin-top: 10px;
-    }
-    /* Updated label button style */
-    .orange-label {
-      background-color: #ffffff;
       color: white;
-      padding: 8px 16px;
       border-radius: 5px;
       font-weight: bold;
-      text-align: center;
       margin-top: 20px;
-      width: 100%; /* Ensure the label is full width */
-      position: absolute;
-      bottom: 0;
     }
-    .update-btn {
-      background-color: #0FAA39; /* Green button */
       color: white;
       border: none;
-      border-radius: 5px;
-      padding: 5px 12px;
       font-size: 0.8rem;
-      font-weight: bold;
-      width: 60%; /* Full width inside orange label */
     }
-    .update-btn:hover {
-      background-color: #0f8e29;
     }
     @media (max-width: 576px) {
       .container {
         padding: 10px;
       }
-      .update-btn {
-        width: 100%;
       }
       .form-label {
         font-size: 0.75rem;
@@ -130,14 +134,22 @@
       .form-control {
         font-size: 0.8rem;
       }
     }
   </style>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
     function toggleEditableField(fieldId, penIcon) {
-      var input = document.getElementById(fieldId);
-      var icon = document.getElementById(penIcon);
       if (input.hasAttribute('readonly')) {
         input.removeAttribute('readonly');
         input.classList.add('editable');
@@ -148,61 +160,70 @@
         icon.classList.remove('editing');
       }
     }
     function updateProfile(event) {
       event.preventDefault();
-      var formData = $('#profileForm').serialize();
       $.ajax({
-        type: "POST",
-        url: "/update_profile",  // Update this URL with your back-end processing URL
-        data: formData,
         success: function(response) {
-          if (response.status === "success") {
-            alert(response.message);
-            location.reload();
-          } else {
-            alert(response.message);
-          }
         },
-        error: function() {
-          alert("An error occurred while updating the profile.");
         }
       });
     }
-    function copyReferralCode() {
-      var referralInput = document.getElementById("referralCode");
-      referralInput.select();
-      referralInput.setSelectionRange(0, 99999);
-      document.execCommand("copy");
-      alert("Referral code copied: " + referralInput.value);
-    }
   </script>
 </head>
 <body>
-  <!-- Top Orange Label Bar -->
   <div class="top-bar">
     <a href="/menu" class="back-link">
-      <span class="back-arrow">&#10216;</span>
       <span class="back-label">Back to Menu</span>
     </a>
   </div>
   <!-- Main Container -->
-  <div class="container mt-4">
     <h1>User Profile</h1>
-    {% with messages = get_flashed_messages(with_categories=true) %}
-    {% if messages %}
-    <div class="alert alert-{{ messages[0][0] }}">
-      {{ messages[0][1] }}
-    </div>
-    {% endif %}
-    {% endwith %}
     <div class="card">
       <div class="card-body">
-        <form id="profileForm" method="POST" onsubmit="updateProfile(event)">
           <!-- Name -->
           <div class="mb-3">
             <label for="customerName" class="form-label"><strong>Name:</strong></label>
@@ -251,16 +272,15 @@
             <input type="text" id="rewardPoints" name="rewardPoints" class="form-control" value="{{ customer['reward_points'] }}" readonly>
           </div>
         </form>
       </div>
     </div>
   </div>
-  <!-- Orange Label with Update Profile Button at the Bottom -->
-  <div class="orange-label">
-    <button type="submit" class="update-btn" form="profileForm">Update Profile</button>
-  </div>
 </body>
-</html>

 <html lang="en">
 <head>
   <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>User Profile</title>
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
   <style>
     body {
       background-color: #FDF4E3;
       margin: 0;
       padding: 0;
       min-height: 100vh;
+      display: flex;
+      flex-direction: column;
     }
     .top-bar {
       background-color: #FF6F3C;
       width: 100%;
     }
     .back-arrow {
       font-size: 1.8rem;
+      color: #000;
       font-weight: bold;
     }
     .back-label {
       margin-left: 10px;
       color: white;
       font-weight: bold;
+      ruminant-size: 1rem;
     }
     h1 {
       color: #1C1C1C;
       font-size: 1.2rem;
+      margin: 15px 0;
       text-align: center;
     }
     .form-control {
       border: 1px solid #333;
       color: #808080;
       color: #000 !important;
     }
     .form-label {
+      color: #000;
       font-size: 0.8rem;
     }
     input.form-control[readonly], textarea.form-control[readonly] {
     }
     .pen-icon {
       position: absolute;
+      right: 10px;
       top: 50%;
       transform: translateY(-50%);
       cursor: pointer;
+      font-size: 1rem;
       color: black;
     }
     .pen-icon.editing {
       color: #333;
     }
+    .update-btn {
+      background-color: #0FAA39;
       color: white;
+      border: none;
       border-radius: 5px;
+      padding: 10px;
+      font-size: 0.9rem;
       font-weight: bold;
+      width: 100%;
       margin-top: 20px;
     }
+    .update-btn:hover {
+      background-color: #0f8e29;
+    }
+    .copy-btn {
+      background-color: #FF6F3C;
       color: white;
       border: none;
+      padding: 5px 10px;
+      cursor: pointer;
+    }
+    .copy-btn:hover {
+      background-color: #e65b2e;
+    }
+    .error-message {
+      color: red;
       font-size: 0.8rem;
+      margin-top: 10px;
+      display: none;
     }
+    .success-message {
+      color: green;
+      font-size: 0.8rem;
+      margin-top: 10px;
+      display: none;
     }
     @media (max-width: 576px) {
+      body {
+        padding-top: 0;
+      }
       .container {
         padding: 10px;
+        margin-top: 0;
       }
+      h1 {
+        margin: 10px 0;
+        font-size: 1.1rem;
       }
       .form-label {
         font-size: 0.75rem;
       .form-control {
         font-size: 0.8rem;
       }
+      .top-bar {
+        padding: 8px 10px;
+      }
+      .back-arrow {
+        font-size: 1.5rem;
+      }
+      .back-label {
+        font-size: 0.9rem;
+      }
     }
   </style>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
     function toggleEditableField(fieldId, penIcon) {
+      const input = document.getElementById(fieldId);
+      const icon = document.getElementById(penIcon);
       if (input.hasAttribute('readonly')) {
         input.removeAttribute('readonly');
         input.classList.add('editable');
         icon.classList.remove('editing');
       }
     }
+    function copyReferralCode() {
+      const referralInput = document.getElementById('referralCode');
+      referralInput.select();
+      document.execCommand('copy');
+      showMessage('success', 'Referral code copied!');
+    }
+    function showMessage(type, message) {
+      const msgElement = document.getElementById(`${type}-message`);
+      msgElement.textContent = message;
+      msgElement.style.display = 'block';
+      setTimeout(() => {
+        msgElement.style.display = 'none';
+      }, 3000);
+    }
     function updateProfile(event) {
       event.preventDefault();
+      const formData = {
+        Id: '{{ customer["salesforce_id"] }}', // Salesforce record ID
+        Name: document.getElementById('customerName').value,
+        Email: document.getElementById('email').value,
+        Phone: document.getElementById('phone').value
+      };
+      // Salesforce REST API call
       $.ajax({
+        type: 'PATCH',
+        url: 'https://your-instance.salesforce.com/services/data/v52.0/sobjects/Contact/{{ customer["salesforce_id"] }}',
+        headers: {
+          'Authorization': 'Bearer YOUR_ACCESS_TOKEN', // Replace with your access token
+          'Content-Type': 'application/json'
+        },
+        data: JSON.stringify(formData),
         success: function(response) {
+          showMessage('success', 'Profile updated successfully!');
+          setTimeout(() => location.reload(), 1000);
         },
+        error: function(xhr) {
+          const errorMsg = xhr.responseJSON && xhr.responseJSON[0] && xhr.responseJSON[0].message
+            ? xhr.responseJSON[0].message
+            : 'Failed to update profile.';
+          showMessage('error', errorMsg);
         }
       });
     }
   </script>
 </head>
 <body>
+  <!-- Top Orange Bar -->
   <div class="top-bar">
     <a href="/menu" class="back-link">
+      <span class="back-arrow">⟨</span>
       <span class="back-label">Back to Menu</span>
     </a>
   </div>
   <!-- Main Container -->
+  <div class="container mt-2">
     <h1>User Profile</h1>
     <div class="card">
       <div class="card-body">
+        <form id="profileForm" onsubmit="updateProfile(event)">
           <!-- Name -->
           <div class="mb-3">
             <label for="customerName" class="form-label"><strong>Name:</strong></label>
             <input type="text" id="rewardPoints" name="rewardPoints" class="form-control" value="{{ customer['reward_points'] }}" readonly>
           </div>
+          <!-- Messages -->
+          <div id="success-message" class="success-message"></div>
+          <div id="error-message" class="error-message"></div>
+          <!-- Update Button -->
+          <button type="submit" class="update-btn">Update Profile</button>
         </form>
       </div>
     </div>
   </div>
 </body>
+</html>