Блок Rewards

Блок Rewards показывает индикатор прогресса к уровням вознаграждений (бесплатная доставка, скидка на заказ или бесплатный подарок), которые покупатели разблокируют, добавляя больше товаров в корзину, мотивируя более крупные корзины, показывая покупателям, насколько они близки к следующему вознаграждению, и автоматически предоставляя заработанные вознаграждения. Уровни могут различаться по рынку, стране и валюте.

• Прогресс исключает из суммы позиции подарков-вознаграждений, позиции product add-on, позиции защиты доставки и подарочные карты, чтобы эти товары не приближали покупателя к вознаграждению искусственно.
• Сообщение показывает оставшуюся сумму или количество до следующего уровня, либо сообщение о завершении, когда все уровни достигнуты.
• Бесплатные подарки предоставляются автоматически. Когда покупатель достигает уровня с подарком, подарок добавляется в корзину; если он опускается ниже, подарок удаляется. При выключенном суммировании вознаграждений предоставляется только подарок наивысшего достигнутого уровня.
• Add back removed free gifts контролирует, что происходит, когда покупатель вручную удаляет автоматически предоставленный подарок. Если включено (по умолчанию), подарок автоматически добавляется снова при следующем обновлении корзины. Если выключено, удаление учитывается, и подарок остаётся вне корзины до конца этой сессии, чтобы покупатели не боролись с корзиной, отказываясь от подарка.

• Регион: любой (верх, тело или низ).
• Максимум: 1 на состояние корзины — заполненная и пустая корзина получают каждая свой.
• Состояние: и заполненная, и пустая корзина.
• Не добавляется по умолчанию. Не заблокирован, поэтому вы можете удалить или скрыть его.

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