المكونات

بطاقة المادة

أهمّ مكوّن في ميركاتو B2B: الصفّ الذي تُعرض به كل مادة داخل متجر المورّد. يجمع الصورة والاسم والاسم العلمي، وشارات المخزون والبونص، والسعر (وقد يحجبه المورّد)، ونجمة قائمة النواقص، وزر الإضافة الذي يتحوّل إلى مضاعِف كمية. الإضافة تتم من البطاقة مباشرة دون فتح نافذة.

جاهز، مؤكّد من فيغماعرض بياناتترتيب ثابت

النضج: جاهز
الإصدار: 1.0
المالك: كلاود ماركتس
المنصّة: جوال

نظرة عامة

جرّبه

Convulex Retard 500MG 50TAB

كمية محدودة (1-50)المزيد20+310+1

Paracitamol

7,800 د.ع7,800 د.ع

الحالة

خيارات

الاسم

خارج متجر المورّد — تظهر المادة نفسها عبر أكثر من سلة

مذخر الناقوس الفضي

Convulex Retard 500MG 50TAB

كمية محدودة (1-50)المزيد20+310+1

Paracitamol

7,800 د.ع7,800 د.ع

1+10

بطاقة المادة هي فم قِمع الطلب: من شاشة المورّد يتصفّح الصيدلي المواد ويقرّر ويضيف إلى السلة. تعيش داخل متجر مورّد واحد، فالمورّد يظهر في ترويسة الشاشة لا في كل بطاقة، إلا في صيغة "مع المورّد" حين تظهر المادة نفسها عبر سلال متعددة.

الحالات

أربع حالات جوهرية، إضافة إلى مبدّلات مستقلة (مفضّل، قائمة النواقص، اشتُري سابقا، سعر محجوب).

الحالة	الوصف
افتراضي	قابلة للإضافة: زر + وعلامة "اشتُري سابقا" والسعر ظاهر.
في السلة	المضاعِف (− العدد +) وزر حذف بدل علامة الشراء السابق.
سعر محجوب	بعض المورّدين يحجبون السعر خلف "عرض السعر"، مبدّل مستقل.
غير متوفر	لا إضافة؛ جرس "أبلغني عند التوفّر" (يتحوّل للون المميّز عند التفعيل).

التركيب

كل جزء مبني من طبقات الأساس أو من مكوّن مشترك: الشارات من Badge، أزرار الأيقونات من IconButton، والمضاعِف من Stepper.

الجزء	المصدر
الصف	Color · bg.base.canvas + Border · hairline (0.5px bottom)
الصورة	Radius · control.base (8px) + Color · black-oud.200 border
المفضّلة	Component · IconButton (plain, favorite)
الاسم	Typography · 14 Regular + Color · fg.base.primary
اشتُري سابقا / حذف	TitleMark · fixed 20px slot, reserved even when empty
شارة المخزون	Component · Badge (StockChip, info)
شارات البونص	Component · Badge (BonusChips, graded amber)
الاسم العلمي	Typography · 11 Regular + Color · fg.base.tertiary
السعر	Typography · 12 SemiBold + struck 10 (fg.tertiary)
عرض السعر	Color · fg.intent.positive + ≥44px target
نجمة النواقص	Color · blaze-orange.50 / .500 · star_rate
المضاعِف	Component · Stepper (primary blue)
جرس التوفّر	Color · accent (purple) when armed · notifications

السلوك

الإضافة تتم من البطاقة مباشرة: زر + يتحوّل إلى مضاعِف كمية دون فتح نافذة المادة. هذا مقصود، إذ يُظهر السلوك الفعلي أن نافذة المادة تُستخدم للاطّلاع السريع لا للإضافة، وأن أكبر تسرّب في القِمع يقع بين النافذة والسلة.

زر عرض السعر حرِج

حين يحجب المورّد السعر، يكون "عرض السعر" لحظة القرار نفسها. في التطبيق الحيّ نُقر عليه بلا استجابة ما يقارب 199,051 مرة لأنه صغير وبطيء. لذا هنا هو هدف لمس 44 بكسل يستجيب فورا.

لا شيء يظهر على هذه البطاقة دون حركة: السعر يظهر بحركة "pop" لحظة كشفه (كما صُمّم في فيغما)، والمفضّلة وقائمة النواقص وجرس التوفّر تنبض بالحركة نفسها عند كل تبديل، وعلامة "اشتُري سابقا"/الحذف تدخل بحركة ظهور عند تبديل الحالة. الحركة كلها من مفردات الحركة الموحّدة في الموقع (mo-emphasize · mo-enter)، لا حركات مخصّصة لهذه البطاقة وحدها.

المحتوى

اسم المادة والاسم العلمي بيانات، لا نصّ محرّر؛ يُعرضان كما هما.
الأرقام (السعر، الكمية، البونص) بالأرقام الغربية دائما.
الشارات تحمل نصا دائما (كمية محدودة، 20+3)، لا لونا وحده.

إمكانية الوصول

كل زر (المفضّلة، النواقص، الحذف، عرض السعر، المضاعِف، الجرس) هدف لمس 44 بكسل على الأقل.
لكل زر أيقونة تسمية وصول عربية واضحة، والحالة المفعّلة تُعلَن بـ aria-pressed.
عدّاد المضاعِف يُعلَن حيّا (aria-live) عند تغيّره.
لا تعتمد الحالة على اللون وحده؛ المخزون والبونص نصّ، وغير المتوفّر يُخفت ويعرض الجرس.

الاتجاه

بخلاف معظم مكوّنات النظام، هذه البطاقة ترتيبها ثابت لا منطقي: الصورة يسارا، وعلامة "اشتُري سابقا" يسار الاسم، والحذف يمينه، وشارة المخزون يسار مجموعة البونص، والسعر يسار النجمة والمضاعِف — بالضبط كما في فيغما، في العربية والإنجليزية معا، دون أي انعكاس. هذا مقصود: اسم المادة لاتيني غالبا (اسم دواء)، والبطاقة قائمة تصفّح كثيفة تُقرأ بشكل أسرع بترتيب واحد ثابت لا يتغيّر. النصوص وحدها (الاسم والأرقام والتسميات) تتكيّف مع اللغة؛ الهيكل لا يتحرّك أبدا. القاعدة نفسها المستخدمة في الشريط السفلي.

افعل ولا تفعل

افعل

دع الإضافة تتم من البطاقة؛ زر + ثم مضاعِف.
أظهر السعر المشطوب حين يوجد عرض حقيقي.
اجعل المورّد في ترويسة الشاشة، لا في كل بطاقة (إلا صيغة مع المورّد).

لا تفعل

لا تفتح نافذة المادة كطريق وحيد للإضافة.
لا تُصغّر زر عرض السعر أو المضاعِف دون 44 بكسل.
لا تجعل البطاقة تطلب بياناتها بنفسها؛ الشاشة تجلب القائمة بنداء واحد.

الكود

البطاقة تُركّب المكونات المشتركة وتُمرّر بياناتها.

React

<ItemCard
  name="Convulex Retard 500MG 50TAB"
  generic="Paracitamol"
  price="7,800 د.ع"
  priceWas="7,800 د.ع"
  state="inCart"        /* default | inCart | unavailable */
  quantity={10}
  onQuantity={setQty}
  bonus="1+"
  stockChip="كمية محدودة (1-50)"
  bonusTiers={["المزيد", "20+3", "10+1"]}
  previouslyBought
  favorite={fav}
  onFavorite={toggleFav}
  missingListActive={onList}
  onMissingList={toggleList}
/>

المكونات المُركّبة

الشارات من Badge، الأزرار من IconButton، الكمية من Stepper، الجرس والنجمة بنغمات خاصة بالبطاقة.

الخطأ	ما يفسد	الصواب
زر إضافة يفتح نافذة المادة	يعيد إدخال أكبر تسرّب في القِمع	أضف من البطاقة عبر Stepper
عرض السعر كنص صغير	نقرات ميتة عند لحظة القرار	هدف 44 بكسل يستجيب فورا
لون البونص = لون التحذير	يقرأ البونص كتحذير	نغمات البونص الكهرمانية من Badge