Embed

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

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

    * {
      box-sizing: border-box;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .assistant-shell {
      width: min(100%, 1120px);
      min-height: 100vh;
      margin: 0 auto;
      padding: 20px;
      background-color: #00134D;
      color: #FFFFFF;
    }

    .assistant-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }

    .title-group h1 {
      margin: 0 0 6px 0;
      color: #FFFFFF;
      font-size: 30px;
      line-height: 1.15;
    }

    .title-group p {
      max-width: 720px;
      margin: 0;
      color: #E8EEF8;
      font-size: 15px;
      line-height: 1.45;
    }

    .clear-button {
      flex: 0 0 auto;
      min-height: 38px;
      padding: 9px 12px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      border-radius: 6px;
      background-color: transparent;
      color: #FFFFFF;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
    }

    .clear-button:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .suggested-topics {
      margin-bottom: 16px;
    }

    .suggested-label {
      margin: 0 0 10px 0;
      color: #D7D7D7;
      font-size: 13px;
      font-weight: bold;
      text-transform: uppercase;
    }

    .topic-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .topic-button {
      min-height: 40px;
      padding: 9px 12px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 6px;
      background-color: #FFFFFF;
      color: #00134D;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
    }

    .topic-button:hover {
      background-color: #F0F0F0;
    }

    .topic-button:disabled,
    .clear-button:disabled,
    .send-button:disabled {
      cursor: not-allowed;
      opacity: 0.65;
    }

    .chat-panel {
      display: flex;
      flex-direction: column;
      min-height: 560px;
      height: calc(100vh - 205px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 8px;
      overflow: hidden;
      background-color: #F7F9FC;
    }

    .messages {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 20px;
      background-color: #F7F9FC;
    }

    .message-row {
      display: flex;
      margin-bottom: 14px;
    }

    .message-row.user {
      justify-content: flex-end;
    }

    .message-row.assistant {
      justify-content: flex-start;
    }

    .message-bubble {
      max-width: min(720px, 86%);
      padding: 12px 14px;
      border-radius: 8px;
      font-size: 15px;
      line-height: 1.5;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .message-row.user .message-bubble {
      background-color: #4CAF50;
      color: #FFFFFF;
    }

    .message-row.assistant .message-bubble {
      background-color: #FFFFFF;
      color: #102033;
      border: 1px solid #DDE5F0;
    }

    .message-row.assistant.error .message-bubble {
      border-color: #F2B8B8;
      background-color: #FFF3F3;
      color: #7A1F1F;
    }

    .message-name {
      display: block;
      margin-bottom: 4px;
      font-size: 12px;
      font-weight: bold;
      color: inherit;
      opacity: 0.78;
    }

    .typing {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-height: 22px;
    }

    .typing-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #6B778C;
      animation: typingPulse 1.2s infinite ease-in-out;
    }

    .typing-dot:nth-child(2) {
      animation-delay: 0.15s;
    }

    .typing-dot:nth-child(3) {
      animation-delay: 0.3s;
    }

    @keyframes typingPulse {
      0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0);
      }
      40% {
        opacity: 1;
        transform: translateY(-3px);
      }
    }

    .composer {
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      padding: 14px;
      border-top: 1px solid #DDE5F0;
      background-color: #FFFFFF;
    }

    .composer textarea {
      width: 100%;
      min-height: 48px;
      max-height: 140px;
      padding: 12px;
      border: 1px solid #C7D2E1;
      border-radius: 6px;
      color: #102033;
      font-size: 15px;
      line-height: 1.4;
      resize: vertical;
      font-family: Arial, Helvetica, sans-serif;
    }

    .composer textarea:focus {
      outline: 3px solid rgba(76, 175, 80, 0.28);
      border-color: #4CAF50;
    }

    .send-button {
      min-width: 92px;
      min-height: 48px;
      padding: 0 18px;
      border: none;
      border-radius: 6px;
      background-color: #4CAF50;
      color: #FFFFFF;
      font-size: 15px;
      font-weight: bold;
      cursor: pointer;
    }

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

    .privacy {
      margin: 14px 0 0 0;
      color: #D7D7D7;
      font-size: 12px;
      line-height: 1.45;
      text-align: center;
    }

    .status {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    footer,
    [data-section="footer"],
    [data-testid="footer"],
    .footer,
    #footer,
    .site-footer {
      display: none !important;
    }

    @media (min-width: 900px) {
      body {
        padding: 24px;
      }

      .assistant-shell {
        min-height: calc(100vh - 48px);
        border-radius: 8px;
        padding: 28px;
      }

      .chat-panel {
        height: calc(100vh - 270px);
      }
    }

    @media (max-width: 640px) {
      .assistant-shell {
        padding: 14px;
      }

      .assistant-header {
        display: block;
        margin-bottom: 14px;
      }

      .title-group h1 {
        font-size: 22px;
      }

      .title-group p {
        font-size: 14px;
      }

      .clear-button {
        width: 100%;
        margin-top: 12px;
      }

      .suggested-label {
        font-size: 12px;
      }

      .topic-list {
        display: grid;
        grid-template-columns: 1fr;
      }

      .topic-button {
        width: 100%;
      }

      .chat-panel {
        min-height: 520px;
        height: calc(100vh - 275px);
      }

      .messages {
        padding: 14px;
      }

      .message-bubble {
        max-width: 92%;
        font-size: 14px;
      }

      .composer {
        grid-template-columns: 1fr;
      }

      .send-button {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <main class="assistant-shell">
    <header class="assistant-header">
      <div class="title-group">
        <h1>WoW Rewards Business Help</h1>
        <p>Ask about rewards, scanning, manual entry, visit history, self check-in, subscriptions, and staff security.</p>
      </div>

      <button id="clearButton" class="clear-button" type="button">Clear Chat</button>
    </header>

    <section class="suggested-topics" aria-label="Suggested topics">
      <p class="suggested-label">Suggested topics</p>
      <div class="topic-list">
        <button class="topic-button" type="button" data-question="How can I check if a customer's phone number has been used at our business?">
          Check phone visit history
        </button>
        <button class="topic-button" type="button" data-question="How do I set up my first reward?">
          Set up rewards
        </button>
        <button class="topic-button" type="button" data-question="Why was a customer visit not recorded?">
          Visit not recorded
        </button>
        <button class="topic-button" type="button" data-question="How does self check-in work?">
          Self check-in
        </button>
      </div>
    </section>

    <section class="chat-panel" aria-label="WoW Rewards help chat">
      <div id="messages" class="messages" aria-live="polite"></div>

      <form id="chatForm" class="composer">
        <textarea
          id="question"
          maxlength="1000"
          rows="2"
          placeholder="Type your question..."></textarea>
        <button id="sendButton" class="send-button" type="submit">Send</button>
      </form>
    </section>

    <p class="privacy">
      Do not enter private customer details unless you are using the authenticated WoW Rewards app. For live customer visit history, use Manual Entry &gt; View History in the app.
    </p>

    <div id="status" class="status" role="status" aria-live="polite"></div>
  </main>

  <script>
    const HELP_API_URL = "https://myrewards-e5ckgug9cta7b0fn.australiacentral-01.azurewebsites.net/api/help/ask";

    const chatForm = document.getElementById("chatForm");
    const questionInput = document.getElementById("question");
    const sendButton = document.getElementById("sendButton");
    const clearButton = document.getElementById("clearButton");
    const statusBox = document.getElementById("status");
    const messagesBox = document.getElementById("messages");
    const topicButtons = document.querySelectorAll("[data-question]");

    let isLoading = false;
    let typingMessage = null;

    const welcomeMessage = "Hi, I can help with WoW Rewards business questions. Try one of the suggested topics above, or ask your own question.";

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

    chatForm.addEventListener("submit", function (event) {
      event.preventDefault();
      submitQuestion(questionInput.value);
    });

    questionInput.addEventListener("keydown", function (event) {
      if (event.key === "Enter" && !event.shiftKey) {
        event.preventDefault();
        submitQuestion(questionInput.value);
      }
    });

    clearButton.addEventListener("click", function () {
      resetChat();
      questionInput.focus();
    });

    topicButtons.forEach(function (button) {
      button.addEventListener("click", function () {
        const question = button.getAttribute("data-question") || "";
        submitQuestion(question);
      });
    });

    async function submitQuestion(question) {
      if (isLoading) {
        return;
      }

      question = (question || "").trim();

      if (!question) {
        showStatus("Please enter a question.");
        questionInput.focus();
        return;
      }

      questionInput.value = "";
      appendMessage("user", question);
      setLoading(true);
      showTypingMessage();

      try {
        const response = await fetch(HELP_API_URL, {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            audience: "business",
            question: question
          })
        });

        const responseText = await response.text();
        const data = parseJsonOrNull(responseText);

        if (!response.ok) {
          const message = data && data.message
            ? data.message
            : "The help assistant could not answer right now. Please try again later.";
          throw new Error(message);
        }

        removeTypingMessage();
        appendMessage(
          "assistant",
          data && data.answer
            ? data.answer
            : "I could not find an answer for that question. Please try rewording it or contact WoW Rewards support."
        );
        showStatus("Answered");
      } catch (error) {
        console.error(error);
        removeTypingMessage();
        appendMessage(
          "assistant",
          error.message || "The help assistant could not answer right now. Please try again later.",
          true
        );
        showStatus("Please try again shortly.");
      } finally {
        setLoading(false);
        questionInput.focus();
      }
    }

    function resetChat() {
      messagesBox.innerHTML = "";
      appendMessage("assistant", welcomeMessage);
      showStatus("");
    }

    function appendMessage(sender, text, isError) {
      const row = document.createElement("div");
      row.className = "message-row " + sender + (isError ? " error" : "");

      const bubble = document.createElement("div");
      bubble.className = "message-bubble";

      const name = document.createElement("span");
      name.className = "message-name";
      name.textContent = sender === "user" ? "You" : "WoW Rewards Help";

      const content = document.createElement("span");
      content.textContent = text;

      bubble.appendChild(name);
      bubble.appendChild(content);
      row.appendChild(bubble);
      messagesBox.appendChild(row);
      scrollMessagesToBottom();

      return row;
    }

    function showTypingMessage() {
      const row = document.createElement("div");
      row.className = "message-row assistant";

      const bubble = document.createElement("div");
      bubble.className = "message-bubble";

      const name = document.createElement("span");
      name.className = "message-name";
      name.textContent = "WoW Rewards Help";

      const typing = document.createElement("span");
      typing.className = "typing";
      typing.setAttribute("aria-label", "Thinking");

      for (let i = 0; i < 3; i++) {
        const dot = document.createElement("span");
        dot.className = "typing-dot";
        typing.appendChild(dot);
      }

      bubble.appendChild(name);
      bubble.appendChild(typing);
      row.appendChild(bubble);
      messagesBox.appendChild(row);
      typingMessage = row;
      scrollMessagesToBottom();
    }

    function removeTypingMessage() {
      if (typingMessage && typingMessage.parentNode) {
        typingMessage.parentNode.removeChild(typingMessage);
      }

      typingMessage = null;
    }

    function setLoading(loading) {
      isLoading = loading;
      sendButton.disabled = loading;
      clearButton.disabled = loading;
      sendButton.textContent = loading ? "Sending" : "Send";

      topicButtons.forEach(function (button) {
        button.disabled = loading;
      });
    }

    function showStatus(message) {
      statusBox.textContent = message || "";
    }

    function parseJsonOrNull(value) {
      if (!value) {
        return null;
      }

      try {
        return JSON.parse(value);
      } catch {
        return null;
      }
    }

    function scrollMessagesToBottom() {
      messagesBox.scrollTop = messagesBox.scrollHeight;
    }
  </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