> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gifty.lat/llms.txt
> Use this file to discover all available pages before exploring further.

# Entender o saldo e o resgate parcial

> O valor emitido, o que já foi usado e o que ainda pode ser resgatado.

export const BalanceSequence = ({locale = "es-AR", fallback, fallbackHref}) => {
  const copy = ({
    "es-AR": {
      label: "Ejemplo de saldo",
      stages: ["Emitir", "Usar 30", "Usar 70"],
      issued: "EMITIDO",
      used: "USADO",
      available: "DISPONIBLE",
      unit: "unidades de ejemplo",
      play: "Reproducir",
      pause: "Pausar",
      reset: "Volver al inicio",
      detail: "Ver el ejemplo en texto",
      state: ["Todo el valor está disponible", "Queda saldo para otro canje", "El saldo se agotó"]
    },
    en: {
      label: "Balance example",
      stages: ["Issue", "Use 30", "Use 70"],
      issued: "ISSUED",
      used: "USED",
      available: "AVAILABLE",
      unit: "example units",
      play: "Play",
      pause: "Pause",
      reset: "Back to start",
      detail: "Read the text example",
      state: ["All value is available", "Value remains for another use", "The balance is exhausted"]
    },
    "pt-BR": {
      label: "Exemplo de saldo",
      stages: ["Emitir", "Usar 30", "Usar 70"],
      issued: "EMITIDO",
      used: "USADO",
      available: "DISPONÍVEL",
      unit: "unidades de exemplo",
      play: "Reproduzir",
      pause: "Pausar",
      reset: "Voltar ao início",
      detail: "Ver o exemplo em texto",
      state: ["Todo o valor está disponível", "Resta saldo para outro resgate", "O saldo se esgotou"]
    }
  })[locale] || null;
  const [step, setStep] = useState(0);
  const [playing, setPlaying] = useState(false);
  const [reduced, setReduced] = useState(false);
  useEffect(() => {
    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
    const sync = () => setReduced(query.matches);
    sync();
    query.addEventListener("change", sync);
    return () => query.removeEventListener("change", sync);
  }, []);
  useEffect(() => {
    if (!playing) return;
    if (step === 2) {
      setPlaying(false);
      return;
    }
    const timer = window.setTimeout(() => setStep(current => Math.min(2, current + 1)), 1800);
    return () => window.clearTimeout(timer);
  }, [playing, step]);
  if (!copy) return <p>{fallback}</p>;
  const balance = [100, 70, 0][step];
  const used = 100 - balance;
  const [unitFirst, ...unitRest] = copy.unit.split(" ");
  const select = index => {
    setPlaying(false);
    setStep(index);
  };
  return <figure className="gifty-balance" data-reduced-motion={reduced ? "true" : "false"} aria-label={copy.label}>
      <div className="gifty-sequence-stages" role="group" aria-label={copy.label}>
        {copy.stages.map((stage, index) => <button key={stage} type="button" onClick={() => select(index)} aria-pressed={step === index}>
            <span>{index + 1}</span>{stage}
          </button>)}
      </div>
      <svg viewBox="0 0 480 240" role="img" aria-label={`${copy.issued}: 100. ${copy.used}: ${used}. ${copy.available}: ${balance}.`}>
        <rect x="24" y="32" width="168" height="164" rx="16" className="gifty-svg-card" />
        <text x="44" y="67" className="gifty-svg-label">{copy.issued}</text>
        <text x="44" y="128" className="gifty-svg-number">100</text>
        <text className="gifty-svg-note"><tspan x="44" y="161">{unitFirst}</tspan><tspan x="44" y="181">{unitRest.join(" ")}</tspan></text>
        <path d="M208 111 H245 M236 102 L245 111 L236 120" className="gifty-svg-arrow" />
        <text x="266" y="65" className="gifty-svg-label">{copy.available}</text>
        <text x="266" y="128" className="gifty-svg-number gifty-svg-accent">{balance}</text>
        <rect x="266" y="147" width="190" height="8" rx="4" className="gifty-svg-track" />
        <g transform="translate(266 147)">
          <rect width="190" height="8" rx="4" className="gifty-svg-progress" style={{
    transform: `scaleX(${balance / 100})`
  }} />
        </g>
        <text x="266" y="185" className="gifty-svg-note">{copy.used}: {used}</text>
      </svg>
      <figcaption>
        <p className="gifty-sequence-state" aria-live="polite" aria-atomic="true">{copy.state[step]}</p>
        <div className="gifty-sequence-actions">
          <button type="button" onClick={() => {
    if (step === 2) setStep(0);
    setPlaying(value => !value);
  }}>
            <span aria-hidden="true">{playing ? "Ⅱ" : "▷"}</span> {playing ? copy.pause : copy.play}
          </button>
          <button type="button" onClick={() => select(0)}>{copy.reset}</button>
          <a href={fallbackHref}>{copy.detail}</a>
        </div>
      </figcaption>
    </figure>;
};

O saldo é o valor emitido menos o valor resgatado. **Esta documentação não conhece o saldo do seu código**: para conferir um caso real, abra o detalhe no gifty com acesso à loja correspondente.

## Um exemplo, passo a passo

O diagrama usa unidades de exemplo, não uma moeda ou um saldo real. Escolha uma etapa ou reproduza a sequência. A tabela abaixo contém as mesmas informações.

<BalanceSequence locale="pt-BR" fallback="Exemplo: são emitidas 100 unidades, 30 são resgatadas e restam 70; ao usar as outras 70, o saldo chega a 0." fallbackHref="#exemplo-completo" />

## Exemplo completo

| Momento                  | Emitido | Total resgatado | Saldo |
| ------------------------ | ------- | --------------- | ----- |
| Emissão                  | 100     | 0               | 100   |
| Primeiro resgate parcial | 100     | 30              | 70    |
| Resgate do restante      | 100     | 100             | 0     |

O valor a descontar deve ser maior que zero e não pode superar o saldo disponível. Ao esgotar o saldo, o vale-presente fica resgatado; se houver saldo após um uso parcial, fica parcialmente resgatado.

## Quando o resgate parcial é permitido

A loja precisa habilitar o resgate parcial e o vale-presente deve ser elegível. A preferência vem desativada por padrão. Ela se aplica a vales-presente nativos do gifty, inclusive os já emitidos que continuem elegíveis; os migrados ficam fora desse fluxo.

Se a preferência for desativada, os vales-presente já usados parcialmente conservam o uso do saldo restante até esgotar ou vencer. Os que não tiveram uso parcial voltam ao comportamento de resgate completo. Ativar a opção não recupera valor que já tenha sido perdido.

## Se o saldo mudar durante a confirmação

Outra compra pode consumir saldo antes da confirmação. Leia o saldo atualizado e ajuste o valor; não repita o valor anterior sem conferir. A confirmação valida o saldo novamente.

## Se um resgate ficar incompleto

O resgate no balcão coordena o cupom da loja e o saldo. Se a operação ficar pendente, use as opções de concluir ou cancelar oferecidas pelo gifty. Cancelar uma tentativa pendente não desfaz um resgate já concluído.

Após um resgate parcial, a atualização do cupom continua de forma durável. **Não suponha que o código possa ser usado novamente de forma instantânea**: acompanhe o estado da operação.

## O que este exemplo não decide

O diagrama não valida códigos, não altera preferências e não realiza resgates. Consulte as condições reais na loja do vale-presente. Ele não pressupõe uso em outra loja.

[Emitir e verificar uma entrega](/pt-BR/issue-and-deliver) · [Ver o ciclo completo](/pt-BR/gift-lifecycle)

[Ler esta página em Markdown](/exports/pt-BR/balance.md)