Update: 2026-05-07 03:35:03

musadaq-app/lib/features/subscription/views/payment_receipt_view.dart

@@ -43,12 +43,15 @@ class PaymentReceiptView extends StatelessWidget {
             )),
 
             const SizedBox(height: 24),
-            Text('الخطوة التالية:', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: isDark ? Colors.white : Colors.black87)),
+            Text('الخطوات التالية:', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: isDark ? Colors.white : Colors.black87)),
+            const SizedBox(height: 12),
+            _buildStepRow('1', 'افتح تطبيق البنك أو المحفظة الإلكترونية الخاصة بك.', isDark),
             const SizedBox(height: 8),
-            Text(
-              'قم بتحويل المبلغ عبر تطبيق البنك الخاص بك إلى الاسم المستعار المذكور أعلاه (CliQ). بعد إتمام الحوالة بنجاح، ستصلك رسالة أو إشعار من البنك يحتوي على "رقم المرجع" للعملية. انسخه والصقه هنا.',
-              style: TextStyle(fontSize: 13, color: isDark ? Colors.white70 : Colors.grey.shade700, height: 1.5),
-            ),
+            _buildStepRow('2', 'اختر خدمة "كليك" (CliQ) للتحويل الفوري.', isDark),
+            const SizedBox(height: 8),
+            _buildStepRow('3', 'قم بالتحويل للاسم المستعار الموضح أعلاه.', isDark),
+            const SizedBox(height: 8),
+            _buildStepRow('4', 'بعد إتمام العملية، انسخ "رقم المرجع" من رسالة البنك أو الإشعار والصقه هنا.', isDark),
             const SizedBox(height: 24),
 
             // Reference Number Input Area
@@ -117,6 +120,35 @@ class PaymentReceiptView extends StatelessWidget {
     );
   }
 
+  Widget _buildStepRow(String number, String text, bool isDark) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Container(
+          width: 24,
+          height: 24,
+          decoration: BoxDecoration(
+            color: const Color(0xFF0F4C81).withOpacity(0.1),
+            shape: BoxShape.circle,
+          ),
+          child: Center(
+            child: Text(
+              number,
+              style: const TextStyle(color: Color(0xFF0F4C81), fontWeight: FontWeight.bold, fontSize: 12),
+            ),
+          ),
+        ),
+        const SizedBox(width: 12),
+        Expanded(
+          child: Text(
+            text,
+            style: TextStyle(fontSize: 13, color: isDark ? Colors.white70 : Colors.grey.shade700, height: 1.4),
+          ),
+        ),
+      ],
+    );
+  }
+
   Widget _buildInfoRow(String label, String value, bool isDark, {bool isHighlight = false}) {
     return Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,