Bloco Rewards

O bloco Rewards mostra uma barra de progresso rumo a níveis de recompensa (frete grátis, um desconto no pedido ou um brinde) que os compradores desbloqueiam adicionando mais itens ao carrinho, incentivando carrinhos maiores ao mostrar aos compradores o quão perto eles estão da próxima recompensa e concedendo recompensas qualificadas automaticamente. Os níveis podem variar por mercado, país e moeda.

• O progresso exclui do total as linhas de brindes de recompensa, linhas de product add-on, linhas de shipping protection e cartões-presente, para que esses itens não inflem o progresso do comprador rumo a uma recompensa.
• A mensagem mostra o valor ou a quantidade restante até o próximo nível, ou a mensagem de conclusão quando todos os níveis são atingidos.
• Os brindes são concedidos automaticamente. Quando um comprador atinge um nível de brinde, o brinde é adicionado ao carrinho; se ele cair abaixo desse nível, o brinde é removido. Com recompensas acumuláveis desativadas, apenas o brinde do nível mais alto atingido é concedido.
• Add back removed free gifts controla o que acontece quando um comprador remove manualmente um brinde concedido automaticamente. Quando habilitado (o padrão), o brinde é readicionado automaticamente na próxima atualização do carrinho. Quando desabilitado, a remoção é respeitada e o brinde fica fora do carrinho pelo resto daquela sessão, para que os compradores não fiquem lutando contra o carrinho para recusar um brinde.

• Região: qualquer (top, body ou bottom).
• Máximo: 1 por estado do carrinho — o carrinho cheio e o carrinho vazio têm cada um o seu.
• Estado: tanto carrinho cheio quanto vazio.
• Não é adicionado por padrão. Não é fixo, então você pode removê-lo ou ocultá-lo.

function Rewards(props) {
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: props.rewardsMessageHtml }} />

      {props.milestones.map((milestone) => (
        // Each tier gets its own track; positionPercent (0-100) fills that track.
        <div key={milestone.id}>
          <div style={{ background: '#E9E9E9', height: 5 }}>
            <div style={{ width: `${milestone.positionPercent}%`, background: '#000', height: 5 }} />
          </div>
          {props.showIcons && milestone.icon ? milestone.icon : null}
          {props.showTierLabels && milestone.label !== '' ? milestone.label : null}
        </div>
      ))}
    </div>
  );
}