بلوك المكافآت

يعرض بلوك 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>
  );
}