Rewards ブロック

Rewards ブロックは、買い物客がカートに商品を追加することでアンロックできるリワードティア（送料無料、注文割引、無料ギフト）への進捗バーを表示します。次のリワードまであとどれくらいかを買い物客に示すことでカートの拡大を促し、条件を満たしたリワードは自動的に付与されます。ティアはマーケット、国、通貨ごとに変えられます。

• 進捗の計算では、リワードギフトのライン、商品アドオンのライン、配送保護のライン、ギフトカードが合計から除外されます。これらのアイテムが買い物客のリワード達成度を水増しすることはありません。
• メッセージには、次のティアまでの残り金額または残り個数が表示され、すべてのティアを達成すると完了メッセージが表示されます。
• 無料ギフトは自動的に付与されます。 買い物客がギフトのティアに到達するとギフトがカートに追加され、下回るとギフトは削除されます。リワードのスタックがオフの場合、達成した最上位ティアのギフトのみが付与されます。
• Add back removed free gifts は、買い物客が自動付与されたギフトを手動で削除した場合の動作を制御します。有効（デフォルト）の場合、次のカート更新時にギフトが自動的に再追加されます。無効の場合、削除が尊重され、そのセッションの間はギフトがカートに戻らないため、買い物客はギフトを断るためにカートと格闘する必要がありません。

• 領域: どこでも（上部、ボディ、下部）。
• 最大数: カート状態ごとに 1 つ。商品が入ったカートと空のカートで、それぞれ 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>
  );
}