$Najjar\NajjarV02$ Najjar\NajjarV02 05b540997e

CI/CD / test-and-build (push) Waiting to run

Details

CI/CD / deploy (push) Blocked by required conditions

Details

feat: add admin authentication and management features

- Implemented Prisma schema with models for AdminUser, AppSettings, and Snapshot.
- Created seed script to initialize the database with an admin user and JWT secret.
- Developed admin login page with form handling and error management.
- Added API routes for admin login, logout, change password, and JWT verification.
- Integrated Stripe for payment intent management in admin orders.
- Established middleware for protecting admin routes with JWT authentication.
- Created Zustand stores for managing persona and snapshot states.

2026-04-13 17:57:59 +04:00

3.3 KiB

Raw Blame History

Stripe Payment Integration

ملخص التعديلات

تم استبدال نظام الدفع التجريبي (Demo) بتكامل حقيقي مع Stripe لمعالجة المدفوعات.

الملفات الجديدة

1. `src/app/api/create-payment-intent/route.ts`

API Route على السيرفر لإنشاء Stripe PaymentIntent
يستقبل المبلغ بالدرهم (AED) ويحوله لأصغر وحدة (فلس)
يرسل metadata تشمل الـ persona واللون وإيميل العميل

2. `.env.example`

ملف مرجعي يحتوي على أسماء المتغيرات المطلوبة لمفاتيح Stripe

الملفات المعدّلة

3. `src/store/useOrderStore.ts`

قبل:

export interface PaymentInfo {
  cardNumber: string;
  expiry: string;
  cvv: string;
  nameOnCard: string;
}

بعد:

export interface PaymentInfo {
  paymentIntentId: string;
  clientSecret: string;
  status: 'idle' | 'processing' | 'succeeded' | 'failed';
  errorMessage: string;
}

تمت إضافة action جديد: createPaymentIntent() — يستدعي الـ API Route وينشئ PaymentIntent
تم تعديل setPayment() ليقبل Partial<PaymentInfo> للتحديث التدريجي

4. `src/components/checkout/PaymentStep.tsx`

قبل: فورم يدوي يجمع بيانات البطاقة (رقم، تاريخ انتهاء، CVV، اسم) — بدون معالجة حقيقية

بعد: يستخدم <PaymentElement> من Stripe Elements — يعرض واجهة دفع آمنة تدعم:

بطاقات الائتمان/الخصم
Apple Pay
Google Pay
طرق دفع أخرى حسب إعدادات حساب Stripe

5. `src/components/checkout/ReviewStep.tsx`

قبل: زر "Place Order" كان يعمل setTimeout(1500) فقط (محاكاة)

بعد: يستدعي stripe.confirmPayment() لتأكيد الدفع الحقيقي عبر Stripe، مع عرض رسائل الخطأ إذا فشل الدفع

6. `src/components/CheckoutOverlay.tsx`

تم تحميل Stripe.js عبر loadStripe()
يتم إنشاء PaymentIntent تلقائياً عند الدخول لخطوة الدفع
يتم تغليف خطوتي Payment و Review بـ <Elements> provider من Stripe

7. `src/store/useOrderStore.test.ts`

تم تحديث الـ tests لتتوافق مع الـ PaymentInfo الجديد

الحزم المضافة

stripe                  — Stripe SDK (سيرفر)
@stripe/stripe-js       — Stripe.js loader (كلاينت)
@stripe/react-stripe-js — React components (Elements, PaymentElement)

الإعداد

أنشئ ملف .env.local في root المشروع:

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxxxxxxxxxxxxx
STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxx

احصل على المفاتيح من: https://dashboard.stripe.com/apikeys
للتجربة استخدم مفاتيح الـ test (pk_test_ / sk_test_)

تدفق الدفع الجديد

Config → Shipping → [Payment Intent Created] → Payment (Stripe Elements) → Review → confirmPayment() → Confirmed

3.3 KiB Raw Blame History

Stripe Payment Integration

ملخص التعديلات

الملفات الجديدة

1. src/app/api/create-payment-intent/route.ts

2. .env.example