# 🎓 خطة التوتوريال الكامل داخل الموقع — «كيف تستخدم Siro»

**الهدف:** صفحات شرح تفاعلية داخل siromove.com (وداخل التطبيق لاحقاً) تشرح للمستخدم الجديد
كل عملية خطوة بخطوة، مدعومة بلقطات شاشة حقيقية من التطبيق.

**قاعدة التسمية للقطات:** `tutorial/{القسم}/{رقم الخطوة}_{وصف}.png`
مثال: `tutorial/booking/03_select_car_type.png`

**مواصفات اللقطات:** جهاز حقيقي أو محاكي بدقة 1170×2532 (iPhone) أو 1080×2400 (Android)،
واجهة عربية، وضع فاتح (+ نسخة داكنة اختيارية)، بيانات وهمية (لا أرقام هواتف حقيقية).

---

## الوحدة 1: التسجيل وإنشاء الحساب (5 لقطات)

| # | الخطوة | الشاشة في الكود | اللقطة المطلوبة |
|---|---|---|---|
| 1 | تحميل التطبيق وفتحه | `splash_screen_page.dart` | شاشة البداية بشعار Siro |
| 2 | شاشات التعريف | `onbording_page.dart` | شريحة الـ Onboarding الأولى |
| 3 | إدخال رقم الهاتف | `login_page.dart` | حقل الهاتف مع اختيار الدولة (🇯🇴🇪🇬🇸🇾) |
| 4 | رمز التحقق OTP | `otp_page.dart` | شاشة إدخال الرمز (يصل واتساب/SMS) |
| 5 | إكمال البيانات | `register_page.dart` | الاسم + البريد (اختياري) ثم «ابدأ» |

**نص الشرح المرافق:** التسجيل يحتاج رقم هاتف فقط — لا بريد إلكتروني إجباري ولا بطاقة دفع.
أقل من دقيقة من التحميل حتى أول شاشة خريطة.

## الوحدة 2: طلب الرحلة (6 لقطات)

| # | الخطوة | الشاشة في الكود | اللقطة المطلوبة |
|---|---|---|---|
| 1 | الخريطة الرئيسية | `map_page_passenger.dart` | الخريطة مع السيارات القريبة تتحرك |
| 2 | تحديد الوجهة | `LocationSearchController` | شريط البحث + النتائج |
| 3 | تأكيد نقطة الانطلاق | — | دبوس الانطلاق قابل للسحب |
| 4 | اختيار فئة السيارة | — | قائمة الفئات التسع مع سعر كل فئة وشارة «توفّر X% عن المنافسين» |
| 5 | كود الخصم (اختياري) | `promos_passenger_page.dart` | حقل البرومو مطبّق على السعر |
| 6 | تأكيد الطلب | — | زر «اطلب الآن» مع السعر النهائي |

**نقطة مهمة للشرح:** السعر المعروض نهائي ومحسوب من الخادم — لا مفاجآت عند الدفع
(ما لم تتغير الوجهة أو يزد الانتظار).

## الوحدة 3: الانتظار والمطابقة (4 لقطات)

| # | الخطوة | الشاشة في الكود | اللقطة المطلوبة |
|---|---|---|---|
| 1 | البحث عن كابتن | `searching_captain_window.dart` | نافذة البحث مع المؤقّت |
| 2 | اقتراح المفاوض الذكي | `_showIncreaseFeeDialog()` | حوار «ارفع السعر 5% لنتائج أسرع» (يظهر بعد 90 ثانية) |
| 3 | قبول الكابتن | `driver_card_from_passenger.dart` | بطاقة الكابتن: الاسم، الصورة، التقييم، السيارة، اللوحة |
| 4 | الكابتن في الطريق | `driver_time_arrive_passenger.dart` | الخريطة مع مسار الكابتن الأصفر والوقت المتوقع |

**نص الشرح:** متوسط زمن المطابقة أقل من 90 ثانية. إذا لم يقبل أحد، النظام يقترح
تعديلاً بسيطاً على السعر بدل إلغاء طلبك.

## الوحدة 4: أثناء الرحلة والسلامة (5 لقطات)

| # | الخطوة | الشاشة في الكود | اللقطة المطلوبة |
|---|---|---|---|
| 1 | وصول الكابتن | `driverArrivePassengerDialoge()` | إشعار «الكابتن وصل» + مهلة انتظار 5 دقائق |
| 2 | بدء الرحلة | `ride_begin_passenger.dart` | المسار الأزرق + العداد الحي |
| 3 | مشاركة الرحلة | شاشة المراقبة الحية | رابط متابعة لطرف ثالث (للأهل) |
| 4 | زر الطوارئ SOS | — | زر SOS + شرح «هزّ الهاتف 5 مرات» |
| 5 | الاتصال بالكابتن | WebRTC داخلي | شاشة المكالمة داخل التطبيق (بدون كشف رقمك) |

## الوحدة 5: الإلغاء (3 لقطات)

| # | الخطوة | الشاشة في الكود | اللقطة المطلوبة |
|---|---|---|---|
| 1 | زر الإلغاء | `timer_for_cancell_trip_from_passenger.dart` | مكان الزر أثناء البحث/الانتظار |
| 2 | اختيار السبب | `cancelRide/add.php` | قائمة أسباب الإلغاء |
| 3 | تأكيد الإلغاء | — | رسالة التأكيد + سياسة الرسوم |

**نقاط يجب شرحها بوضوح:**
- الإلغاء قبل قبول الكابتن: مجاني دائماً.
- الإلغاء بعد وصول الكابتن أو تجاوز المهلة: قد تُطبَّق رسوم.
- سياسة السائق: 3 إلغاءات متتالية = إيقاف مؤقت (شفافية للطرفين).

## الوحدة 6: الدفع والتقييم (6 لقطات)

| # | الخطوة | الشاشة في الكود | اللقطة المطلوبة |
|---|---|---|---|
| 1 | نهاية الرحلة | `processRideFinished()` | شاشة الفاتورة النهائية |
| 2 | اختيار طريقة الدفع | `payment_method.page.dart` | القائمة: كاش/محفظة/بطاقة/MTN/Syriatel/Cliq |
| 3 | الدفع كاش | `cash_confirm_bottom_page.dart` | حوار تأكيد الكاش |
| 4 | الدفع بالمحفظة | `passenger_wallet.dart` | الخصم من الرصيد + شاشة الشحن بمكافأة («ادفع 20 خذ 21») |
| 5 | تقييم الكابتن | `rate_captain.dart` | النجوم + الإكرامية (Tip) |
| 6 | سجل الرحلات | `order_history.dart` | قائمة الرحلات السابقة والفواتير |

## الوحدة 7: مواصلاتي — للطلاب (5 لقطات)

| # | الخطوة | الشاشة | اللقطة المطلوبة |
|---|---|---|---|
| 1 | تبويب مواصلاتي | `siro_rider` تبويب Transit | اختيار الجامعة |
| 2 | تفعيل العضوية | — | إدخال الرقم الجامعي (تفعيل فوري إذا كان بالكشف) |
| 3 | استعراض الخطوط | — | قائمة الخطوط المعتمدة وجداولها |
| 4 | التتبع الحي | خريطة الخط | الباص يتحرك على المسار + المحطات |
| 5 | «فاتك الباص؟» | زر التحويل | الزر البارز لطلب سيارة بديلة |

---

## خطة التنفيذ على الموقع

1. **الصفحة:** `siromove.com/tutorial` — صفحة واحدة بتبويبات (وحدة لكل تبويب)، RTL،
   بنفس هوية تقرير الإرث الرقمي البصرية.
2. **العرض:** لكل خطوة سطر شرح + لقطة شاشة داخل إطار هاتف (CSS phone frame) —
   حتى تجهز اللقطات، توضع صور Placeholder رمادية بنفس اسم الملف المطلوب.
3. **التصوير:** جلسة واحدة (~ساعتان) بحساب تجريبي على بيئة staging تنتج الـ 34 لقطة
   المذكورة أعلاه دفعة واحدة، بالترتيب أعلاه.
4. **لاحقاً:** تحويل كل وحدة إلى فيديو قصير (30-60 ثانية) بنفس اللقطات، ودمج
   التوتوريال داخل التطبيق كـ Coach Marks عند أول استخدام.

**إجمالي اللقطات المطلوبة: 34 لقطة** (5+6+4+5+3+6+5)