리워드 블록

리워드(Rewards) 블록은 쇼핑객이 장바구니에 더 많이 담아 잠금 해제하는 리워드 티어(무료 배송, 주문 할인, 무료 선물)를 향한 진행률 바를 표시해, 다음 리워드에 얼마나 가까운지 보여줌으로써 더 큰 장바구니를 유도하고 조건을 충족한 리워드를 자동으로 부여해요. 티어는 마켓, 국가, 통화별로 다르게 설정할 수 있어요.

• 진행률 계산에서 리워드 선물 라인, 상품 애드온 라인, 배송 보호 라인, 기프트 카드는 합계에서 제외되므로, 이러한 항목이 쇼핑객의 리워드 진행률을 부풀리지 않아요.
• 메시지는 다음 티어까지 남은 금액이나 수량을 표시하고, 모든 티어를 달성하면 완료 메시지를 표시해요.
• 무료 선물은 자동으로 부여돼요. 쇼핑객이 선물 티어에 도달하면 선물이 장바구니에 추가되고, 그 아래로 떨어지면 선물이 제거돼요. 리워드 중첩이 꺼져 있으면 달성한 최상위 티어의 선물만 부여돼요.
• 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>
  );
}