Bloque Rewards

El bloque Rewards muestra una barra de progreso hacia niveles de recompensa (envío gratis, un descuento en el pedido o un regalo gratis) que los compradores desbloquean agregando más a su carrito, motivando carritos más grandes al mostrar a los compradores qué tan cerca están de la próxima recompensa y otorgando automáticamente las recompensas que califican. Los niveles pueden variar por mercado, país y moneda.

• El progreso excluye del total las líneas de regalos de recompensa, las líneas de product add-on, las líneas de protección de envío y las tarjetas de regalo, para que esos artículos no inflen el avance del comprador hacia una recompensa.
• El mensaje muestra el monto o la cantidad restante hasta el siguiente nivel, o el mensaje de completado una vez que se alcanzan todos los niveles.
• Los regalos gratis se otorgan automáticamente. Cuando un comprador alcanza un nivel de regalo, el regalo se agrega al carrito; si cae por debajo, el regalo se elimina. Con las recompensas acumulables desactivadas, solo se otorga el regalo del nivel más alto alcanzado.
• Add back removed free gifts controla qué sucede cuando un comprador elimina manualmente un regalo otorgado automáticamente. Cuando está habilitado (el valor predeterminado), el regalo se vuelve a agregar automáticamente en la siguiente actualización del carrito. Cuando está deshabilitado, la eliminación se respeta y el regalo permanece fuera del carrito durante el resto de esa sesión, para que los compradores no tengan que pelear con el carrito para rechazar un regalo.

• Región: cualquiera (parte superior, cuerpo o parte inferior).
• Máximo: 1 por estado del carrito. El carrito con artículos y el carrito vacío tienen cada uno el suyo.
• Estado: tanto carrito con artículos como carrito vacío.
• No se agrega de forma predeterminada. No está bloqueado, así que puedes eliminarlo u ocultarlo.

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>
  );
}