Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Registration Successful</title>

  <style>
    html, body {
      margin: 0 auto;
      padding: 0;
      min-height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #00234D;
      font-family: Arial, Helvetica, sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    .form-container {
      background-color: #00134D;
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      padding: 24px;
      box-sizing: border-box;
      overflow: hidden;
      text-align: center;
    }

    .form-container h1 {
      text-align: center;
      margin: 0 0 16px 0;
      color: #FFFFFF;
      font-size: 24px;
    }

    .message {
      color: #F0F0F0;
      font-size: 16px;
      line-height: 1.5;
      margin: 0 0 20px 0;
    }

    .card-code-label {
      color: #D7D7D7;
      font-size: 14px;
      margin-bottom: 8px;
    }

    #customerCode {
      color: #FFFFFF;
      font-size: 18px;
      font-weight: bold;
      word-break: break-all;
      background-color: rgba(255, 255, 255, 0.08);
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 20px;
    }

    button {
      background-color: #4CAF50;
      color: white;
      padding: 12px;
      margin-top: 16px;
      width: 100%;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
    }

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

    #googleWalletButton {
      display: none;
      background-color: #FFFFFF;
      color: #00134D;
      border: 1px solid #D7D7D7;
    }

    #googleWalletButton:hover {
      background-color: #F0F0F0;
    }

    .note {
      color: #D7D7D7;
      font-size: 13px;
      line-height: 1.4;
      margin-top: 14px;
    }

    .error {
      color: #ffb3b3;
      font-size: 14px;
      margin-top: 14px;
      min-height: 20px;
      text-align: center;
      word-break: break-word;
      white-space: pre-wrap;
    }

    .spinner {
      display: none;
      border: 8px solid #f3f3f3;
      border-top: 8px solid #4CAF50;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      margin: 18px auto 0 auto;
      animation: spin 2s linear infinite;
    }

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

    /* Hide Durable footer */
    footer,
    [data-section="footer"],
    [data-testid="footer"],
    .footer,
    #footer,
    .site-footer,
    [class*="footer"],
    [id*="footer"] {
      display: none !important;
    }

    @media (max-width: 600px) {
      html, body {
        align-items: flex-start;
      }

      .form-container {
        padding: 18px 15px;
        width: 100%;
        max-width: none;
        min-height: 100vh;
      }

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

      button {
        font-size: 14px;
      }
    }
  </style>
</head>

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

    <p class="message">
      Your WoW Rewards card has been registered successfully.
    </p>

    <div id="cardCodeSection">
      <div class="card-code-label">Your WoW Rewards card code</div>
      <div id="customerCode"></div>
    </div>

    <button id="googleWalletButton" type="button" onclick="saveToGoogleWallet()">
      Save to Google Wallet
    </button>

    <div id="spinner" class="spinner"></div>

    <div id="note" class="note">
      You can now use your WoW Rewards card at participating businesses.
    </div>

    <div id="error" class="error"></div>
  </div>

  <script>
    const GOOGLE_WALLET_URL =
      "https://myrewards-e5ckgug9cta7b0fn.australiacentral-01.azurewebsites.net/api/wallet/google-save-url";

    const urlParams = new URLSearchParams(window.location.search);
    const customerCode = urlParams.get("customerCode");

    document.addEventListener("DOMContentLoaded", function () {
      initialisePage();
    });

    function initialisePage() {
      const customerCodeElement = document.getElementById("customerCode");
      const cardCodeSection = document.getElementById("cardCodeSection");
      const googleWalletButton = document.getElementById("googleWalletButton");
      const note = document.getElementById("note");

      if (!customerCode) {
        cardCodeSection.style.display = "none";
        googleWalletButton.style.display = "none";
        note.textContent = "Your registration was successful.";
        return;
      }

      customerCodeElement.textContent = customerCode;

      if (getWalletPlatform() === "android") {
        googleWalletButton.style.display = "block";
        note.textContent = "You can also save your WoW Rewards card to Google Wallet.";
      } else {
        googleWalletButton.style.display = "none";
        note.textContent = "You can now use your WoW Rewards card at participating businesses.";
      }
    }

    function getWalletPlatform() {
      const userAgent = navigator.userAgent || navigator.vendor || window.opera || "";
      const isAndroid = /Android/i.test(userAgent);

      if (isAndroid) {
        return "android";
      }

      return "other";
    }

    async function saveToGoogleWallet() {
      clearError();
      showLoading(true);

      if (!customerCode) {
        showLoading(false);
        showError("Card code was not found. Please try scanning your WoW Rewards card again.");
        return;
      }

      try {
        const response = await fetch(
          `${GOOGLE_WALLET_URL}?customerCode=${encodeURIComponent(customerCode)}`
        );

        if (!response.ok) {
          const errorText = await response.text();
          showError(`Google Wallet API error ${response.status}: ${errorText}`);
          showLoading(false);
          return;
        }

        const data = await response.json();

        if (!data.saveUrl) {
          showError("Google Wallet API error: saveUrl was not returned.");
          showLoading(false);
          return;
        }

        window.location.href = data.saveUrl;
      } catch (error) {
        console.error(error);
        showError(`Google Wallet API error: ${error.message || error}`);
        showLoading(false);
      }
    }

    function showLoading(show) {
      document.getElementById("spinner").style.display = show ? "block" : "none";
    }

    function showError(message) {
      document.getElementById("error").textContent = message;
    }

    function clearError() {
      document.getElementById("error").textContent = "";
    }
  </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