Bloc Rewards

Le bloc Rewards affiche une barre de progression vers des paliers de récompenses (livraison gratuite, réduction sur la commande ou cadeau gratuit) que les acheteurs débloquent en ajoutant plus d’articles à leur panier, encourageant des paniers plus gros en montrant aux acheteurs à quel point ils sont proches de la prochaine récompense et en accordant automatiquement les récompenses obtenues. Les paliers peuvent varier selon le marché, le pays et la devise.

• La progression exclut du total les lignes de cadeaux de récompense, les lignes d’options complémentaires, les lignes de protection d’expédition et les cartes cadeaux, afin que ces articles ne gonflent pas la progression de l’acheteur vers une récompense.
• Le message affiche le montant ou le nombre restant jusqu’au prochain palier, ou le message de complétion une fois tous les paliers atteints.
• Les cadeaux gratuits sont accordés automatiquement. Lorsqu’un acheteur atteint un palier de cadeau, le cadeau est ajouté au panier ; s’il redescend en dessous, le cadeau est retiré. Avec les récompenses cumulables désactivées, seul le cadeau du palier le plus élevé atteint est accordé.
• Add back removed free gifts contrôle ce qui se passe lorsqu’un acheteur retire manuellement un cadeau accordé automatiquement. Lorsqu’il est activé (par défaut), le cadeau est automatiquement rajouté à la prochaine mise à jour du panier. Lorsqu’il est désactivé, la suppression est respectée et le cadeau reste hors du panier pour le reste de cette session, afin que les acheteurs ne se battent pas contre le panier pour refuser un cadeau.

• Région : n’importe laquelle (haut, corps ou bas).
• Maximum : 1 par état de panier. Le panier rempli et le panier vide ont chacun le leur.
• État : panier rempli et panier vide.
• Non ajouté par défaut. Non verrouillé, vous pouvez donc le supprimer ou le masquer.

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