@ma7moudsalama/falak-app 1.0.0

package/template/src/composables/usePaymob.js

@@ -0,0 +1,392 @@
+/**
+ * usePaymob — Paymob Payment Gateway Composable
+ * ───────────────────────────────────────────────
+ * Handles:
+ *  • Authentication token retrieval
+ *  • Order registration
+ *  • Payment key generation
+ *  • iFrame rendering
+ *  • HMAC signature verification
+ *  • User subscription management in RTDB
+ *
+ * Docs: https://developers.paymob.com
+ *
+ * Usage:
+ *   const paymob = usePaymob()
+ *   await paymob.initPayment({ amountCents: 10000, ... })
+ *   // opens Paymob iframe
+ *
+ *   const sub = useSubscription()
+ *   await sub.subscribe(userId, 'premium', planDetails)
+ */
+
+import { ref, readonly, computed } from 'vue'
+import axios from 'axios'
+import { useDatabase } from './useDatabase.js'
+import { useCrypto } from './useCrypto.js'
+import { serverTimestamp } from 'firebase/database'
+
+const PAYMOB_API_KEY      = import.meta.env.VITE_PAYMOB_API_KEY      || ''
+const PAYMOB_INTEGRATION  = import.meta.env.VITE_PAYMOB_INTEGRATION_ID || ''
+const PAYMOB_IFRAME_ID    = import.meta.env.VITE_PAYMOB_IFRAME_ID    || ''
+const PAYMOB_HMAC_SECRET  = import.meta.env.VITE_PAYMOB_HMAC_SECRET  || ''
+const PAYMOB_BASE_URL     = 'https://accept.paymob.com/api'
+
+// ── Subscription Plans ─────────────────────────
+export const PLANS = {
+  FREE: {
+    id:          'free',
+    name:        'Free',
+    amountCents: 0,
+    durationDays: 0,        // unlimited
+    features:    ['basic_access']
+  },
+  BASIC: {
+    id:           'basic',
+    name:         'Basic',
+    amountCents:  4900,     // 49.00 EGP
+    durationDays: 30,
+    features:     ['basic_access', 'priority_support']
+  },
+  PRO: {
+    id:           'pro',
+    name:         'Pro',
+    amountCents:  14900,    // 149.00 EGP
+    durationDays: 30,
+    features:     ['basic_access', 'priority_support', 'advanced_features', 'api_access']
+  },
+  ENTERPRISE: {
+    id:           'enterprise',
+    name:         'Enterprise',
+    amountCents:  49900,
+    durationDays: 30,
+    features:     ['basic_access', 'priority_support', 'advanced_features', 'api_access', 'custom_integrations', 'dedicated_support']
+  }
+}
+
+// ── Paymob Core ────────────────────────────────
+export function usePaymob() {
+  const isLoading  = ref(false)
+  const lastError  = ref(null)
+  const authToken  = ref(null)
+  const orderId    = ref(null)
+  const paymentKey = ref(null)
+  const iframeUrl  = ref(null)
+
+  // ── Step 1: Get auth token ─────────────────
+  async function authenticate() {
+    const { data } = await axios.post(`${PAYMOB_BASE_URL}/auth/tokens`, {
+      api_key: PAYMOB_API_KEY
+    })
+    authToken.value = data.token
+    return data.token
+  }
+
+  // ── Step 2: Register order ─────────────────
+  async function registerOrder(token, { amountCents, currency = 'EGP', items = [] }) {
+    const { data } = await axios.post(`${PAYMOB_BASE_URL}/ecommerce/orders`, {
+      auth_token:          token,
+      delivery_needed:     false,
+      amount_cents:        amountCents,
+      currency,
+      merchant_order_id:   `falak_${Date.now()}`,
+      items
+    })
+    orderId.value = data.id
+    return data.id
+  }
+
+  // ── Step 3: Get payment key ────────────────
+  async function getPaymentKey(token, orderIdVal, { amountCents, currency = 'EGP', billingData }) {
+    const { data } = await axios.post(`${PAYMOB_BASE_URL}/acceptance/payment_keys`, {
+      auth_token:     token,
+      amount_cents:   amountCents,
+      expiration:     3600,
+      order_id:       orderIdVal,
+      billing_data:   billingData || {
+        apartment:    'NA',
+        email:        'customer@example.com',
+        floor:        'NA',
+        first_name:   'Customer',
+        street:       'NA',
+        building:     'NA',
+        phone_number: '+20xxxxxxxxxx',
+        shipping_method: 'NA',
+        postal_code:  'NA',
+        city:         'NA',
+        country:      'EG',
+        last_name:    'User',
+        state:        'NA'
+      },
+      currency,
+      integration_id: Number(PAYMOB_INTEGRATION),
+      lock_order_when_paid: true
+    })
+    paymentKey.value = data.token
+    return data.token
+  }
+
+  // ── Full flow ──────────────────────────────
+  /**
+   * Initialize a payment session and return the iframe URL.
+   * Optionally opens it in a new tab or embeds it.
+   *
+   * @param {object} paymentData
+   * @param {number} paymentData.amountCents - Amount in smallest unit (piasters)
+   * @param {string} [paymentData.currency]
+   * @param {object} [paymentData.billingData]
+   * @param {Array}  [paymentData.items]
+   * @returns {{ success: boolean, iframeUrl: string, paymentKey: string, orderId: number }}
+   */
+  async function initPayment(paymentData) {
+    isLoading.value = true
+    lastError.value = null
+    try {
+      const token = await authenticate()
+      const oId   = await registerOrder(token, paymentData)
+      const pKey  = await getPaymentKey(token, oId, paymentData)
+
+      const url = `https://accept.paymob.com/api/acceptance/iframes/${PAYMOB_IFRAME_ID}?payment_token=${pKey}`
+      iframeUrl.value = url
+
+      return {
+        success:    true,
+        iframeUrl:  url,
+        paymentKey: pKey,
+        orderId:    oId
+      }
+    } catch (err) {
+      lastError.value = err.response?.data?.message || err.message
+      return { success: false, error: lastError.value }
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  /**
+   * Open payment in a new tab.
+   */
+  async function openPaymentTab(paymentData) {
+    const result = await initPayment(paymentData)
+    if (result.success) {
+      window.open(result.iframeUrl, '_blank')
+    }
+    return result
+  }
+
+  // ── HMAC Verification ──────────────────────
+  /**
+   * Verify Paymob callback HMAC signature.
+   * Call this in your webhook handler.
+   */
+  function verifyHmac(callbackData) {
+    const { hmac: receivedHmac, ...params } = callbackData
+    const { hmac: computeHmac } = useCrypto()
+
+    // Paymob HMAC fields (in specific order)
+    const fields = [
+      'amount_cents', 'created_at', 'currency', 'error_occured',
+      'has_parent_transaction', 'id', 'integration_id', 'is_3d_secure',
+      'is_auth', 'is_capture', 'is_refunded', 'is_standalone_payment',
+      'is_voided', 'order', 'owner', 'pending', 'source_data.pan',
+      'source_data.sub_type', 'source_data.type', 'success'
+    ]
+
+    const message = fields
+      .map(f => {
+        const val = f.includes('.')
+          ? f.split('.').reduce((o, k) => o?.[k], params)
+          : params[f]
+        return String(val ?? '')
+      })
+      .join('')
+
+    const expected = computeHmac(message, PAYMOB_HMAC_SECRET)
+    return expected === receivedHmac
+  }
+
+  return {
+    isLoading: readonly(isLoading),
+    lastError: readonly(lastError),
+    authToken: readonly(authToken),
+    orderId:   readonly(orderId),
+    paymentKey: readonly(paymentKey),
+    iframeUrl: readonly(iframeUrl),
+
+    initPayment,
+    openPaymentTab,
+    authenticate,
+    registerOrder,
+    getPaymentKey,
+    verifyHmac,
+    PLANS
+  }
+}
+
+// ── Subscription Manager ───────────────────────
+/**
+ * useSubscription — Manage user subscriptions in RTDB
+ *
+ * Data structure in RTDB:
+ *   /subscriptions/{userId} = {
+ *     planId, planName, status, features,
+ *     startedAt, expiresAt, paymobOrderId,
+ *     autoRenew, paymentHistory: [...]
+ *   }
+ */
+export function useSubscription() {
+  const db        = useDatabase()
+  const isLoading = ref(false)
+  const lastError = ref(null)
+
+  /**
+   * Get current subscription for a user.
+   */
+  async function getSubscription(userId) {
+    return db.get(`subscriptions/${userId}`)
+  }
+
+  /**
+   * Listen to subscription changes in real-time.
+   */
+  function listenSubscription(userId) {
+    return db.listen(`subscriptions/${userId}`)
+  }
+
+  /**
+   * Check if a user's subscription is active.
+   */
+  async function isActive(userId) {
+    const sub = await getSubscription(userId)
+    if (!sub) return false
+    if (sub.planId === 'free') return true
+    if (sub.status !== 'active') return false
+    return Date.now() < sub.expiresAt
+  }
+
+  /**
+   * Check if a user has a specific feature.
+   */
+  async function hasFeature(userId, feature) {
+    const sub = await getSubscription(userId)
+    if (!sub) return false
+    return sub.features?.includes(feature) || false
+  }
+
+  /**
+   * Activate / upgrade a subscription after successful payment.
+   * Call this from your Paymob webhook handler.
+   *
+   * @param {string} userId
+   * @param {string} planId - key from PLANS
+   * @param {object} paymentInfo - { paymobOrderId, amountCents, ... }
+   */
+  async function activateSubscription(userId, planId, paymentInfo = {}) {
+    isLoading.value = true
+    const plan = PLANS[planId.toUpperCase()]
+    if (!plan) {
+      lastError.value = `Unknown plan: ${planId}`
+      return { success: false, error: lastError.value }
+    }
+    try {
+      const now       = Date.now()
+      const expiresAt = plan.durationDays > 0
+        ? now + plan.durationDays * 24 * 60 * 60 * 1000
+        : null
+
+      const existing  = await getSubscription(userId) || {}
+      const history   = existing.paymentHistory || []
+
+      await db.set(`subscriptions/${userId}`, {
+        planId:        plan.id,
+        planName:      plan.name,
+        status:        'active',
+        features:      plan.features,
+        startedAt:     now,
+        expiresAt,
+        autoRenew:     true,
+        updatedAt:     now,
+        paymentHistory: [
+          ...history,
+          {
+            planId,
+            amountCents: paymentInfo.amountCents || plan.amountCents,
+            paymobOrderId: paymentInfo.paymobOrderId || null,
+            paidAt: now
+          }
+        ].slice(-20)  // keep last 20
+      })
+
+      return { success: true }
+    } catch (err) {
+      lastError.value = err.message
+      return { success: false, error: err.message }
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  /**
+   * Cancel a subscription (mark inactive, keep data).
+   */
+  async function cancelSubscription(userId) {
+    return db.update(`subscriptions/${userId}`, {
+      status:    'cancelled',
+      autoRenew: false
+    })
+  }
+
+  /**
+   * Expire a subscription (typically called by a server cron).
+   */
+  async function expireSubscription(userId) {
+    return db.update(`subscriptions/${userId}`, {
+      status: 'expired'
+    })
+  }
+
+  /**
+   * Initialize free plan for a new user.
+   */
+  async function initFreeplan(userId) {
+    const existing = await getSubscription(userId)
+    if (existing) return { success: true }  // already set
+
+    return db.set(`subscriptions/${userId}`, {
+      planId:    'free',
+      planName:  'Free',
+      status:    'active',
+      features:  PLANS.FREE.features,
+      startedAt: Date.now(),
+      expiresAt: null,
+      autoRenew: false,
+      paymentHistory: []
+    })
+  }
+
+  /**
+   * Get all users with a specific plan (admin use).
+   */
+  function listenPlanUsers(planId) {
+    return db.listen('subscriptions', {
+      orderBy: 'planId',
+      equalTo: planId
+    })
+  }
+
+  return {
+    isLoading: readonly(isLoading),
+    lastError: readonly(lastError),
+    PLANS,
+
+    getSubscription,
+    listenSubscription,
+    isActive,
+    hasFeature,
+    activateSubscription,
+    cancelSubscription,
+    expireSubscription,
+    initFreeplan,
+    listenPlanUsers
+  }
+}

package/template/src/firebase/index.js

@@ -0,0 +1,87 @@
+/**
+ * Firebase Configuration & Service Exports
+ * ─────────────────────────────────────────
+ * All Firebase services used across the app are initialized here.
+ * Import what you need from this file — not directly from firebase/x.
+ */
+
+import { initializeApp, getApps, getApp } from 'firebase/app'
+import {
+  getAuth,
+  setPersistence,
+  browserLocalPersistence,
+  connectAuthEmulator
+} from 'firebase/auth'
+import {
+  getDatabase,
+  connectDatabaseEmulator
+} from 'firebase/database'
+import {
+  getStorage,
+  connectStorageEmulator
+} from 'firebase/storage'
+import {
+  getFirestore,
+  connectFirestoreEmulator
+} from 'firebase/firestore'
+import { getAnalytics, isSupported } from 'firebase/analytics'
+import { getMessaging, isSupported as messagingSupported } from 'firebase/messaging'
+
+// ── Firebase Config from .env ──────────────────
+const firebaseConfig = {
+  apiKey:            import.meta.env.VITE_FIREBASE_API_KEY,
+  authDomain:        import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+  databaseURL:       import.meta.env.VITE_FIREBASE_DATABASE_URL,
+  projectId:         import.meta.env.VITE_FIREBASE_PROJECT_ID,
+  storageBucket:     import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+  appId:             import.meta.env.VITE_FIREBASE_APP_ID,
+  measurementId:     import.meta.env.VITE_FIREBASE_MEASUREMENT_ID
+}
+
+// ── Initialize App (singleton safe) ───────────
+const firebaseApp = getApps().length ? getApp() : initializeApp(firebaseConfig)
+
+// ── Auth ───────────────────────────────────────
+const auth = getAuth(firebaseApp)
+setPersistence(auth, browserLocalPersistence).catch(console.error)
+
+// ── Realtime Database ──────────────────────────
+const rtdb = getDatabase(firebaseApp)
+
+// ── Firestore ──────────────────────────────────
+const firestore = getFirestore(firebaseApp)
+
+// ── Storage ────────────────────────────────────
+const storage = getStorage(firebaseApp)
+
+// ── Analytics (browser only) ───────────────────
+let analytics = null
+isSupported().then((yes) => {
+  if (yes) analytics = getAnalytics(firebaseApp)
+})
+
+// ── Messaging (browser only) ───────────────────
+let messaging = null
+messagingSupported().then((yes) => {
+  if (yes) messaging = getMessaging(firebaseApp)
+})
+
+// ── Emulators (dev only) ───────────────────────
+if (import.meta.env.VITE_APP_ENV === 'emulator') {
+  connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true })
+  connectDatabaseEmulator(rtdb, 'localhost', 9000)
+  connectFirestoreEmulator(firestore, 'localhost', 8080)
+  connectStorageEmulator(storage, 'localhost', 9199)
+  console.info('🔥 Firebase Emulators connected')
+}
+
+export {
+  firebaseApp,
+  auth,
+  rtdb,
+  firestore,
+  storage,
+  analytics,
+  messaging
+}

package/template/src/i18n/index.js

@@ -0,0 +1,66 @@
+/**
+ * Vue I18n Configuration
+ * ───────────────────────
+ * Supports: English (en) and Arabic (ar)
+ * Automatically applies RTL direction for Arabic.
+ * Persists selected locale to localStorage.
+ */
+
+import { createI18n } from 'vue-i18n'
+import en from './locales/en.json'
+import ar from './locales/ar.json'
+
+const LOCALE_KEY = 'falak_locale'
+
+// Detect saved or browser locale
+function detectLocale() {
+  const saved    = localStorage.getItem(LOCALE_KEY)
+  const browser  = navigator.language?.split('-')[0]
+  const supported = ['en', 'ar']
+  return supported.includes(saved)   ? saved
+       : supported.includes(browser) ? browser
+       : 'en'
+}
+
+export const i18n = createI18n({
+  legacy:        false,         // Composition API mode
+  globalInjection: true,        // $t available in templates
+  locale:        detectLocale(),
+  fallbackLocale: 'en',
+  messages: { en, ar },
+  datetimeFormats: {
+    en: {
+      short:  { year: 'numeric', month: 'short',  day: 'numeric' },
+      long:   { year: 'numeric', month: 'long',   day: 'numeric', weekday: 'long' },
+      time:   { hour: '2-digit', minute: '2-digit' }
+    },
+    ar: {
+      short:  { year: 'numeric', month: 'short',  day: 'numeric', calendar: 'gregory' },
+      long:   { year: 'numeric', month: 'long',   day: 'numeric', weekday: 'long', calendar: 'gregory' },
+      time:   { hour: '2-digit', minute: '2-digit', hour12: true }
+    }
+  },
+  numberFormats: {
+    en: {
+      currency: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },
+      egp:      { style: 'currency', currency: 'EGP', minimumFractionDigits: 2 }
+    },
+    ar: {
+      currency: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },
+      egp:      { style: 'currency', currency: 'EGP', minimumFractionDigits: 2 }
+    }
+  }
+})
+
+// ── Locale switcher ────────────────────────────
+export function setLocale(locale) {
+  i18n.global.locale.value = locale
+  localStorage.setItem(LOCALE_KEY, locale)
+  document.documentElement.lang = locale
+  document.documentElement.dir  = locale === 'ar' ? 'rtl' : 'ltr'
+}
+
+// Apply direction on init
+setLocale(detectLocale())
+
+export default i18n

package/template/src/i18n/locales/ar.json

@@ -0,0 +1,121 @@
+{
+  "app": {
+    "name": "فلك",
+    "tagline": "مبني بـ Vue 3 و Firebase"
+  },
+  "nav": {
+    "home": "الرئيسية",
+    "dashboard": "لوحة التحكم",
+    "profile": "الملف الشخصي",
+    "admin": "الإدارة",
+    "login": "تسجيل الدخول",
+    "register": "إنشاء حساب",
+    "logout": "تسجيل الخروج",
+    "settings": "الإعدادات"
+  },
+  "auth": {
+    "email": "البريد الإلكتروني",
+    "password": "كلمة المرور",
+    "confirmPassword": "تأكيد كلمة المرور",
+    "displayName": "الاسم الكامل",
+    "forgotPassword": "نسيت كلمة المرور؟",
+    "rememberMe": "تذكرني",
+    "noAccount": "ليس لديك حساب؟",
+    "hasAccount": "لديك حساب بالفعل؟",
+    "orContinueWith": "أو تابع عبر",
+    "signInWithGoogle": "الدخول بحساب Google",
+    "signInWithFacebook": "الدخول بحساب Facebook",
+    "resetPassword": "إعادة تعيين كلمة المرور",
+    "resetPasswordDesc": "سنرسل لك رابطاً لإعادة تعيين كلمة المرور.",
+    "backToLogin": "العودة لتسجيل الدخول",
+    "emailVerification": "يرجى تأكيد بريدك الإلكتروني. تحقق من صندوق الوارد.",
+    "passwordMismatch": "كلمتا المرور غير متطابقتين.",
+    "weakPassword": "يجب أن تتكون كلمة المرور من 8 أحرف على الأقل.",
+    "loginSuccess": "مرحباً بعودتك!",
+    "logoutSuccess": "تم تسجيل الخروج بنجاح.",
+    "registerSuccess": "تم إنشاء الحساب! يرجى تأكيد بريدك الإلكتروني."
+  },
+  "user": {
+    "role": "الصلاحية",
+    "roles": {
+      "super_admin": "المدير العام",
+      "admin": "مدير",
+      "user": "مستخدم",
+      "guest": "زائر"
+    },
+    "profile": "الملف الشخصي",
+    "editProfile": "تعديل الملف",
+    "changePassword": "تغيير كلمة المرور",
+    "deleteAccount": "حذف الحساب",
+    "deleteAccountConfirm": "هل أنت متأكد من حذف حسابك؟ هذا الإجراء لا يمكن التراجع عنه.",
+    "avatar": "الصورة الشخصية",
+    "memberSince": "عضو منذ"
+  },
+  "subscription": {
+    "title": "الاشتراك",
+    "currentPlan": "الخطة الحالية",
+    "upgradePlan": "ترقية الخطة",
+    "cancelPlan": "إلغاء الاشتراك",
+    "renewPlan": "تجديد",
+    "expiresOn": "تنتهي في",
+    "status": {
+      "active": "نشط",
+      "expired": "منتهي",
+      "cancelled": "ملغي",
+      "pending": "قيد الانتظار"
+    },
+    "plans": {
+      "free": "مجاني",
+      "basic": "أساسي",
+      "pro": "احترافي",
+      "enterprise": "مؤسسي"
+    },
+    "payNow": "ادفع الآن",
+    "paymentSuccess": "تمت عملية الدفع! تم ترقية خطتك.",
+    "paymentFailed": "فشلت عملية الدفع. يرجى المحاولة مجدداً."
+  },
+  "common": {
+    "save": "حفظ",
+    "cancel": "إلغاء",
+    "delete": "حذف",
+    "edit": "تعديل",
+    "confirm": "تأكيد",
+    "close": "إغلاق",
+    "back": "رجوع",
+    "next": "التالي",
+    "loading": "جارٍ التحميل...",
+    "search": "بحث",
+    "filter": "تصفية",
+    "reset": "إعادة تعيين",
+    "submit": "إرسال",
+    "yes": "نعم",
+    "no": "لا",
+    "or": "أو",
+    "and": "و",
+    "error": "حدث خطأ",
+    "success": "تمت العملية بنجاح",
+    "noData": "لا توجد بيانات",
+    "required": "هذا الحقل مطلوب",
+    "darkMode": "الوضع الداكن",
+    "lightMode": "الوضع الفاتح"
+  },
+  "offline": {
+    "title": "أنت غير متصل بالإنترنت",
+    "message": "البيانات للقراءة فقط في وضع عدم الاتصال. ستستأنف التغييرات عند إعادة الاتصال.",
+    "reconnected": "عدت متصلاً! يمكنك إجراء التغييرات مجدداً."
+  },
+  "errors": {
+    "404": "الصفحة غير موجودة",
+    "403": "ليس لديك صلاحية لعرض هذه الصفحة.",
+    "500": "حدث خطأ من جانبنا.",
+    "network": "خطأ في الشبكة. يرجى التحقق من اتصالك.",
+    "unknown": "حدث خطأ غير متوقع."
+  },
+  "ai": {
+    "title": "المساعد الذكي",
+    "placeholder": "اسألني أي شيء...",
+    "thinking": "جارٍ التفكير...",
+    "clearChat": "مسح المحادثة",
+    "send": "إرسال"
+  }
+}