Banner

Register your WoW Rewards Card today to enjoy the convenience of a digital copy, ensuring you never miss out on collecting points.

Earn More with WoW Rewards

Close-up on the hands of the customer and saleswoman in the flower shop who make contactless payments

Face of beautiful mixed race woman smiling with white teeth.  Portrait of a woman's face with brown eyes and freckles posing with copy-space. Dental health and oral hygiene

Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration</title>
  <style>
    /* Make sure the body and html fill the entire screen */
    html, body {
      margin: 0 auto;
      padding: 0;
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #00234D;
    }

    /* Form Container Styles */
    .form-container {
      background-color: #00134D;
      width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
      overflow: hidden;
    }

    .form-container h1 {
      text-align: center;
      margin-bottom: 20px;
      color: #FFFFFF;  /* White for visibility */
    }

    .form-container label {
      display: block;
      margin-bottom: 10px;
      margin-top: 10px;
      font-size: 16px;
      color: #F0F0F0;  /* Light gray color for better contrast */
    }

    .form-container input {
      width: 100%;
      padding: 10px;
      margin-bottom: 20px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
    }

    .form-container button {
      background-color: #4CAF50;
      color: white;
      padding: 10px;
      margin-top: 25px;
      width: 100%;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
    }

    .form-container button:hover {
      background-color: #45a049;
    }

    /* Make Card Number Text Visible */
    #card-number {
      color: #FFFFFF; /* Set text color to white for visibility */
      font-size: 18px;
      font-weight: bold;
    }

    /* Spinner Styles */
    .spinner {
      border: 8px solid #f3f3f3; /* Light gray background */
      border-top: 8px solid #4CAF50; /* Green spinner color */
      border-radius: 50%;
      width: 40px;
      height: 40px;
      margin: 0 auto;
      animation: spin 2s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* Responsive Design */
    @media (max-width: 600px) {
      .form-container {
        padding: 15px;
        width: 100%; /* Ensure it fills the screen on small devices */
        box-sizing: border-box;
      }

      .form-container h1 {
        font-size: 20px;
      }

      .form-container input, .form-container button {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

  <div class="form-container">
    <h1>Registration Form</h1>

    
    <div>
      <span id="card-number"></span>
    </div>

    
    <form id="registration-form">
      <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
      </div>
      <div>
        <label for="phone">Phone Number (Optional):</label>
        <input type="text" id="phone" name="phone">
      </div>
      <button type="submit">Submit</button>
    </form>

    
    <div id="loading-message" style="display:none; text-align: center; color: white;">
      <div class="spinner"></div>
      <p>Please wait, processing your registration...</p>
    </div>
  </div>

  <script>
    const authToken = 'm3TRklTlfT0l0ga6Wkg467s45we60';  

    // Get the value of the "x" query parameter
    const urlParams = new URLSearchParams(window.location.search);
    const xValue = urlParams.get('x');

    // Display the card number on the page
    if (xValue) {
      document.getElementById('card-number').textContent = xValue;
    } else {
      document.getElementById('card-number').textContent = 'No Value';
    }

    // Form submission handler
    document.getElementById('registration-form').addEventListener('submit', function (event) {
      event.preventDefault();

      // Show the "Please wait" message with spinner
      document.getElementById('loading-message').style.display = 'block';

      // Get form data
      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;
      const phone = document.getElementById('phone').value;

      // Prepare the payload
      const payload = {
        cardNumber: xValue, // Card Number (x parameter)
        name: name,
        email: email,
        phone: phone || '', // Optional phone number
        customerAuthToken: authToken  // Attach the authToken to the payload
      };

      // Make the API request
      fetch('https://myrewards-e5ckgug9cta7b0fn.australiacentral-01.azurewebsites.net/api/Customer/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${authToken}`  // Correctly using backticks here
        },
        body: JSON.stringify(payload),
      })
      .then(response => {
        // Check if response is not OK (e.g., status code 4xx or 5xx)
        if (!response.ok) {
          return response.text().then(errorMessage => {
            throw new Error(errorMessage);
          });
        }
        return response.json();  // If response is OK, parse JSON
      })
      .then(data => {
        // Handle success
        console.log('Registration successful:', data);
        window.location.replace('/registration-success');  // Redirect to your success page
      })
      .catch(error => {
        // Handle error and display server error message
        console.error('Error:', error.message);  // Log the full error for debugging
        alert(error.message || 'An error occurred. Please try again.');  // Display error message from the server
      })
      .finally(() => {
        // Hide the "Please wait" message after the request finishes
        document.getElementById('loading-message').style.display = 'none';
      });
    });
  </script>

</body>
</html>

Wow Rewards

Customer loyalty program.  the concept is user has one card that they can scan at any of the Partner establishments. The system will record the user visits and based on the establistments "Reward Cofiguration" they will provide the rewards. Eg: A cafe can have 5th visit Free Coffee...  a Barber shop can say 25% off on 10th Visit, A customer can use the same wow rewards card at both these places... but thier counts are recorded separated, meaning that 3 vistits to the barber and 2 visits to the cafe doesn't mean the user can get a free coffee