Text

<h1 style="white-space:pre-line">Até R$ 450 por indicação</h1>
<h3 style="white-space:pre-line">O bônus é pago em 3 meses — R$ 150 por mês enquanto o cliente permanecer ativo.</h3>

Embed

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes, viewport-fit=cover">
  <title>Bônus por Indicação – Financeiro</title>
  <style>
    :root {
      --bg:#F1F8F4; --card:#ffffff; --muted:#6b7368; --text:#3F473C;
      --accent:#567861; --accent-2:#619B75; --danger:#c14254; --ok:#2e8053;
      --ink-weak:#3F473C22; --ring:#619B7533;
    }
    *{box-sizing:border-box; margin:0; padding:0}
    body{
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--text);
      background:var(--bg);
    }
    main{min-width:70%; max-width:600px; margin:0 auto; padding:20px;}
    h1{text-align:center; margin-bottom:20px}

    .card{
      background:var(--card);
      border:1px solid var(--ink-weak);
      border-radius:16px;
      padding:20px;
      margin-bottom:20px;
      box-shadow:0 6px 22px rgba(63,71,60,.08);
    }

    .shifts-header{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      margin-bottom:16px;
    }
    .shifts-header h2{
      font-size:18px;
      margin:0;
    }
    .shifts-header span{
      font-size:13px;
      color:var(--muted);
    }

    .shifts-list{
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .shift-row{
      display:flex;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-radius:12px;
      border:1px solid var(--ink-weak);
      background:#fff;
    }

    .shift-main{
      flex:1;
      min-width:0;
    }

    .shift-date{
      font-size:12px;
      color:var(--muted);
      margin-bottom:4px;
    }

    .shift-client{
      font-size:15px;
      font-weight:600;
      margin-bottom:2px;
    }

    .shift-hours{
      font-size:13px;
      color:var(--muted);
    }

    .shift-amount{
      font-size:16px;
      font-weight:700;
      white-space:nowrap;
      align-self:center;
      color:var(--accent-2);
    }

    .shifts-footer{
      margin-top:16px;
      padding-top:12px;
      border-top:1px solid var(--ink-weak);
      display:flex;
      justify-content:space-between;
      font-size:14px;
    }
    .shifts-footer span:last-child{
      font-weight:700;
      color:var(--accent-2);
    }
  </style>
</head>
<script>
  // 👇 escopo global
  window.AUTH_TOKEN = null;

  document.addEventListener("DOMContentLoaded", () => {
    const params = new URLSearchParams(window.location.search);
    const token = params.get("token");

    if (!token) {
      alert("Sessão inválida. Faça login novamente.");
      window.location.href = "/caregivers/login";
      return;
    }

    // salva globalmente
    window.AUTH_TOKEN = token;
  });
</script>
<body>
<main>
  <div class="card">
  <h2>Seu QR Code de Indicação</h2>
  <p style="margin:20px auto";>
    Este QR Code é exclusivo para você.<br>
    Imprima e compartilhe com clientes para indicar os serviços da Vital Assist.
  </p>

  <img
    id="qrImage"
    class="qr-image"
    alt="QR Code de Indicação"
  />

  <div class="share-link">
    <input
      id="shareUrl"
      type="text"
      readonly
    />
    <button id="copyShareBtn" style="margin-top: 20px; font-weight: bolder; color: #619B75; font-size: x-large; margin-bottom: 20px;">Copiar</button>
    <p>Copie e envie por mensagem</p>
  </div>
</div>
<div class="card">
  <div class="shifts-header">
    <h2>Bônus por Indicação</h2>
    <span id="lastUpdated"></span>
  </div>

  <div id="emptyCommissionState" class="shift-row" style="display:none; text-align:center;">
    <div class="shift-main">
      <div class="shift-client">Ainda não existem valores a receber</div>
      <div class="shift-hours">
        Os valores a receber aparecerão aqui.
      </div>
    </div>
  </div>

  <div class="shifts-list" id="commissionList">

      
      <div class="shift-row">
        <div class="shift-main">
          <div class="shift-date">Pagamento: 20/11/2025</div>
          <div class="shift-client">Indicação: Família Oliveira</div>
          <div class="shift-hours">1º mês ativo</div>
        </div>
        <div class="shift-amount">R$ 150,00</div>
      </div>

      
      <div class="shift-row">
        <div class="shift-main">
          <div class="shift-date">Pagamento: 20/12/2025</div>
          <div class="shift-client">Indicação: Família Oliveira</div>
          <div class="shift-hours">2º mês ativo</div>
        </div>
        <div class="shift-amount">R$ 150,00</div>
      </div>

      
      <div class="shift-row">
        <div class="shift-main">
          <div class="shift-date">Pagamento: 20/01/2026</div>
          <div class="shift-client">Indicação: Família Oliveira</div>
          <div class="shift-hours">3º mês ativo</div>
        </div>
        <div class="shift-amount">R$ 150,00</div>
      </div>

    </div>

    <div class="shifts-footer" id="commissionFooter">
      <span>Total previsto</span>
      <span>R$ 450,00</span>
    </div>
  </div>

</main>
</body>

<script>
const BASE = "https://api.vitalassisthomecare.com.br/lifeassist/v1";
function getCommissionUrl() {
  return `${BASE}/caregivers/comissions/${encodeURIComponent(window.AUTH_TOKEN)}`;
}

document.addEventListener("DOMContentLoaded", () => {
  setTodayDate();
  loadCommissionData();
});

function setTodayDate() {
  const el = document.getElementById("lastUpdated");
  if (!el) return;

  const today = new Date();
  const formatted = today.toLocaleDateString("pt-BR");

  el.textContent = `Atualizado em ${formatted}`;
}

async function loadCommissionData() {
  try {
    if (!window.AUTH_TOKEN) {
      throw new Error("Token não disponível");
    }

    const res = await fetch(getCommissionUrl());

    // 🔐 Sessão expirada
    if (res.status === 401) {
      alert("Sua sessão expirou. Faça login novamente.");
      sessionStorage.clear();
      localStorage.clear();
      window.location.href = "/caregivers/login";
      return;
    }

    // ❌ Outros erros
    if (!res.ok) {
      throw new Error("Erro ao carregar comissões");
    }
    const raw = await res.json();

    const data = {
      qrCodeUrl: raw.qrCodeUrl,
      shareUrl: raw.shareUrl, // normalização
      comissions: raw.comissions ?? []
    };

    bindHeader(data);
    handleCommissions(data.comissions);

  } catch (err) {
    console.error("Erro ao carregar dados de comissão", err);
  }
}
function bindHeader({ qrCodeUrl, shareUrl }) {
  if (!qrCodeUrl || !shareUrl) {
    console.warn("QR Code ou Share URL ausente", { qrCodeUrl, shareUrl });
    return;
  }

  document.getElementById("qrImage").src = qrCodeUrl;
  document.getElementById("shareUrl").value = shareUrl;

  document.getElementById("copyShareBtn").onclick = () => {
    copyShareLink(shareUrl);
  };
}

function copyShareLink(text) {
  // Clipboard API moderna
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(text)
      .then(() => showCopyFeedback())
      .catch(() => fallbackCopy(text));
  } else {
    fallbackCopy(text);
  }
}

function fallbackCopy(text) {
  const tempInput = document.createElement("input");
  tempInput.value = text;
  document.body.appendChild(tempInput);
  tempInput.select();
  tempInput.setSelectionRange(0, 99999); // compatibilidade iOS
  document.execCommand("copy");
  document.body.removeChild(tempInput);
  showCopyFeedback();
}

function showCopyFeedback() {
  alert("Link copiado com sucesso!");
}

function handleCommissions(comissions) {
  const listEl = document.getElementById("commissionList");
  const footerEl = document.getElementById("commissionFooter");
  const emptyEl = document.getElementById("emptyCommissionState");

  if (!Array.isArray(comissions) || comissions.length === 0) {
    // Hide list and footer
    if (listEl) listEl.style.display = "none";
    if (footerEl) footerEl.style.display = "none";

    // Show friendly empty state
    if (emptyEl) emptyEl.style.display = "flex";
    return;
  }

  // If there are commissions, ensure everything is visible
  if (emptyEl) emptyEl.style.display = "none";
  if (listEl) listEl.style.display = "flex";
  if (footerEl) footerEl.style.display = "flex";

  // (Future) Aqui você poderá renderizar comissões dinamicamente
}
</script>
</html>

Vital Assist - Home Care

We offer a new standard in care: we find, train, and empower the best caregivers, supported by a system that records all tasks in real time and generates transparent reports.

All to provide comfort, care, and safety for those receiving care—and peace of mind for those accompanying care.