التقسيط
تقسيط إجمالي الطلب على 3 أو 4 أو 6 دفعات شهرية: كل خطة بطاقة اختيار بقسطها وكلفتها، وتحت الخطة المختارة جدول دفعاتها وإجماليها.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add installment-plan-pickerويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/installment-plan-pickerالاعتماديات التي يضيفها
priceradio-cardأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { InstallmentPlanPicker } from "@/components/ui/installment-plan-picker";<InstallmentPlanPicker total={1200} currency="SAR" onValueChange={setPayments} shariaCompliant />مرجع الخصائص
InstallmentPlanPicker
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
total | number | لا يوجد | إجمالي الطلب بالوحدة الكبرى. |
currency / fractionDigits | string / number | "SAR" / 2 | كما في Price. |
plans | { payments, feeRate? }[] | 3, 4, 6 (3% fee) | خاصية Plan: عدد الدفعات، وكلفة الخطة نسبةً من الإجمالي (0 تعني ربح 0%). |
value / defaultValue / onValueChange | number | لا يوجد | الخطة المختارة بعدد دفعاتها. |
start | Date | today | تاريخ الدفعة الأولى؛ البقية بفارق شهر. |
shariaCompliant | boolean | false | سطر التوافق مع الشريعة. أظهره فقط إن كانت خطط المزوّد معتمدة. |
name | string | لا يوجد | اسم الحقل في النموذج. |
installmentSchedule
الدفعات نفسها لحسابها في الخادم: installmentSchedule(total, plan, start)؛ الدفعة الأخيرة تأخذ فرق التقريب فيصح المجموع دائمًا.
| الخاصية | النوع | الافتراضي | الوصف |
|---|
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| ArrowDownArrowUp | بين الخطط. |
ARIA
- مجموعة اختيار باسم «ادفع على أقساط»، وكل خطة بطاقة اختيار يُقرأ قسطها وكلفتها وصفًا لها.
- الجدول قائمة مرتّبة تُعلن بأدب حين تتغير الخطة.
تجنّب
- لا تكتب «بلا فوائد» إن كانت للخطة رسوم: الكلفة تُكتب صراحةً لكل خطة.
ملاحظات العربية والاتجاه
ينعكس
- البطاقة كلها تنعكس: الاختيار والنقاط والمبالغ تنتقل إلى الجهة الأخرى.
لا ينعكس
- كل مبلغ وحدة واحدة معزولة: «400.00 ر.س».
- الأرقام
- المبالغ والتواريخ تتبع
numerals، والتقويم ميلادي بأسماء الشهور بلغة القارئ. - الخط العربي
body-16Semibold للعنوان،body-14للجدول، وbody-12لسطر الشريعة.