@croacroa/react-native-template 2.0.1 → 3.2.0

package/services/media/compression.ts

@@ -0,0 +1,91 @@
+/**
+ * @fileoverview Image compression using expo-image-manipulator
+ * Provides a simple API to resize and compress images before upload.
+ * @module services/media/compression
+ */
+
+import { ImageManipulator, SaveFormat } from "expo-image-manipulator";
+
+/**
+ * Options for image compression
+ */
+export interface CompressionOptions {
+  /** Maximum width in pixels (default: 1080) */
+  maxWidth?: number;
+  /** Maximum height in pixels (default: 1080) */
+  maxHeight?: number;
+  /** Compression quality 0-1 (default: 0.7) */
+  quality?: number;
+  /** Output format (default: 'jpeg') */
+  format?: "jpeg" | "png" | "webp";
+}
+
+/**
+ * Result of image compression
+ */
+export interface CompressionResult {
+  /** URI to the compressed image */
+  uri: string;
+  /** Width of the compressed image */
+  width: number;
+  /** Height of the compressed image */
+  height: number;
+}
+
+/** Maps format strings to SaveFormat enum values */
+const formatMap: Record<string, SaveFormat> = {
+  jpeg: SaveFormat.JPEG,
+  png: SaveFormat.PNG,
+  webp: SaveFormat.WEBP,
+};
+
+/**
+ * Compress and optionally resize an image.
+ * Uses expo-image-manipulator to resize the image within the specified
+ * maximum dimensions while preserving aspect ratio, then saves it
+ * with the specified compression quality.
+ *
+ * @param uri - Local file URI of the image to compress
+ * @param options - Compression configuration
+ * @returns The compressed image result with URI and dimensions
+ *
+ * @example
+ * ```ts
+ * const result = await compressImage(photo.uri, {
+ *   maxWidth: 800,
+ *   maxHeight: 800,
+ *   quality: 0.6,
+ * });
+ * console.log('Compressed:', result.uri, result.width, result.height);
+ * ```
+ */
+export async function compressImage(
+  uri: string,
+  options: CompressionOptions = {}
+): Promise<CompressionResult> {
+  const {
+    maxWidth = 1080,
+    maxHeight: _maxHeight = 1080,
+    quality = 0.7,
+    format = "jpeg",
+  } = options;
+
+  const context = ImageManipulator.manipulate(uri);
+
+  // Resize within max dimensions while preserving aspect ratio.
+  // Only pass width so the height scales proportionally, avoiding distortion.
+  context.resize({ width: maxWidth });
+
+  const imageRef = await context.renderAsync();
+
+  const result = await imageRef.saveAsync({
+    compress: quality,
+    format: formatMap[format] ?? SaveFormat.JPEG,
+  });
+
+  return {
+    uri: result.uri,
+    width: result.width,
+    height: result.height,
+  };
+}

package/services/media/media-picker.ts

@@ -0,0 +1,151 @@
+/**
+ * @fileoverview Image/video selection wrapper around expo-image-picker
+ * Provides a unified interface for picking media from library or camera.
+ * @module services/media/media-picker
+ */
+
+import * as ImagePicker from "expo-image-picker";
+
+/**
+ * Represents a media item selected by the user
+ */
+export interface PickedMedia {
+  /** Local file URI */
+  uri: string;
+  /** Type of media */
+  type: "image" | "video";
+  /** Width in pixels */
+  width: number;
+  /** Height in pixels */
+  height: number;
+  /** File size in bytes */
+  fileSize?: number;
+  /** Original file name */
+  fileName?: string;
+  /** Duration in milliseconds (video only) */
+  duration?: number;
+}
+
+/**
+ * Options for picking media
+ */
+export interface PickOptions {
+  /** Type of media to allow */
+  mediaTypes?: "images" | "videos" | "all";
+  /** Allow editing/cropping */
+  allowsEditing?: boolean;
+  /** Image quality (0-1) */
+  quality?: number;
+  /** Aspect ratio for cropping [width, height] */
+  aspect?: [number, number];
+  /** Allow multiple selection (library only) */
+  allowsMultipleSelection?: boolean;
+  /** Maximum number of items to select */
+  selectionLimit?: number;
+}
+
+/**
+ * Maps our simplified media type strings to ImagePicker.MediaTypeOptions
+ */
+const mediaTypeMap: Record<string, ImagePicker.MediaTypeOptions> = {
+  images: ImagePicker.MediaTypeOptions.Images,
+  videos: ImagePicker.MediaTypeOptions.Videos,
+  all: ImagePicker.MediaTypeOptions.All,
+};
+
+/**
+ * Convert an ImagePickerAsset to our PickedMedia interface
+ */
+function mapAsset(asset: ImagePicker.ImagePickerAsset): PickedMedia {
+  return {
+    uri: asset.uri,
+    type: asset.type === "video" ? "video" : "image",
+    width: asset.width,
+    height: asset.height,
+    fileSize: asset.fileSize ?? undefined,
+    fileName: asset.fileName ?? undefined,
+    duration: asset.duration ?? undefined,
+  };
+}
+
+/**
+ * Pick media from the device photo library.
+ * Returns an empty array if the user cancels.
+ *
+ * @param options - Configuration for the picker
+ * @returns Array of picked media items (empty if cancelled)
+ *
+ * @example
+ * ```ts
+ * const images = await pickFromLibrary({ mediaTypes: 'images', quality: 0.8 });
+ * if (images.length > 0) {
+ *   console.log('Selected:', images[0].uri);
+ * }
+ * ```
+ */
+export async function pickFromLibrary(
+  options: PickOptions = {}
+): Promise<PickedMedia[]> {
+  const {
+    mediaTypes = "images",
+    allowsEditing = false,
+    quality = 0.8,
+    aspect,
+    allowsMultipleSelection = false,
+    selectionLimit,
+  } = options;
+
+  const result = await ImagePicker.launchImageLibraryAsync({
+    mediaTypes: mediaTypeMap[mediaTypes] ?? ImagePicker.MediaTypeOptions.Images,
+    allowsEditing: allowsMultipleSelection ? false : allowsEditing,
+    quality,
+    aspect,
+    allowsMultipleSelection,
+    selectionLimit,
+  });
+
+  if (result.canceled) {
+    return [];
+  }
+
+  return result.assets.map(mapAsset);
+}
+
+/**
+ * Take a photo or video using the device camera.
+ * Returns null if the user cancels.
+ *
+ * @param options - Configuration for the camera
+ * @returns The captured media or null if cancelled
+ *
+ * @example
+ * ```ts
+ * const photo = await pickFromCamera({ quality: 0.7, allowsEditing: true });
+ * if (photo) {
+ *   console.log('Captured:', photo.uri);
+ * }
+ * ```
+ */
+export async function pickFromCamera(
+  options: PickOptions = {}
+): Promise<PickedMedia | null> {
+  const {
+    mediaTypes = "images",
+    allowsEditing = false,
+    quality = 0.8,
+    aspect,
+  } = options;
+
+  const result = await ImagePicker.launchCameraAsync({
+    mediaTypes: mediaTypeMap[mediaTypes] ?? ImagePicker.MediaTypeOptions.Images,
+    allowsEditing,
+    quality,
+    aspect,
+  });
+
+  if (result.canceled) {
+    return null;
+  }
+
+  return mapAsset(result.assets[0]);
+}

package/services/media/media-upload.ts

@@ -0,0 +1,160 @@
+/**
+ * @fileoverview File upload service with progress tracking
+ * Uses XMLHttpRequest for real-time upload progress reporting and abort support.
+ * @module services/media/media-upload
+ */
+
+/**
+ * Upload progress information
+ */
+export interface UploadProgress {
+  /** Bytes uploaded so far */
+  loaded: number;
+  /** Total bytes to upload */
+  total: number;
+  /** Upload percentage (0-100) */
+  percentage: number;
+}
+
+/**
+ * Options for file upload
+ */
+export interface UploadOptions {
+  /** Server URL to upload to */
+  url: string;
+  /** Local file URI to upload */
+  uri: string;
+  /** Form field name for the file (default: 'file') */
+  fieldName?: string;
+  /** MIME type of the file (default: 'image/jpeg') */
+  mimeType?: string;
+  /** Additional HTTP headers */
+  headers?: Record<string, string>;
+  /** Extra form fields to include */
+  extraFields?: Record<string, string>;
+  /** Progress callback */
+  onProgress?: (progress: UploadProgress) => void;
+}
+
+/**
+ * Upload result from the server
+ */
+export interface UploadResult {
+  /** HTTP status code */
+  status: number;
+  /** Response body as string */
+  body: string;
+}
+
+/**
+ * Upload a file to a server with progress tracking.
+ * Returns both a promise that resolves with the upload result and
+ * an abort function to cancel the upload.
+ *
+ * Uses XMLHttpRequest instead of fetch to support upload progress events.
+ *
+ * @param options - Upload configuration
+ * @returns Object with `promise` (resolves with UploadResult) and `abort` function
+ *
+ * @example
+ * ```ts
+ * const { promise, abort } = uploadFile({
+ *   url: 'https://api.example.com/upload',
+ *   uri: image.uri,
+ *   mimeType: 'image/jpeg',
+ *   headers: { Authorization: 'Bearer token' },
+ *   onProgress: ({ percentage }) => console.log(`${percentage}%`),
+ * });
+ *
+ * // Cancel if needed
+ * // abort();
+ *
+ * const result = await promise;
+ * console.log('Upload complete:', result.status, result.body);
+ * ```
+ */
+export function uploadFile(options: UploadOptions): {
+  promise: Promise<UploadResult>;
+  abort: () => void;
+} {
+  const {
+    url,
+    uri,
+    fieldName = "file",
+    mimeType = "image/jpeg",
+    headers = {},
+    extraFields = {},
+    onProgress,
+  } = options;
+
+  const xhr = new XMLHttpRequest();
+
+  const promise = new Promise<UploadResult>((resolve, reject) => {
+    // Build FormData
+    const formData = new FormData();
+
+    // Extract file name from URI
+    const uriParts = uri.split("/");
+    const fileName = uriParts[uriParts.length - 1] || "upload";
+
+    // Append the file — React Native's XMLHttpRequest accepts this format
+    formData.append(fieldName, {
+      uri,
+      type: mimeType,
+      name: fileName,
+    } as unknown as Blob);
+
+    // Append any extra form fields
+    for (const [key, value] of Object.entries(extraFields)) {
+      formData.append(key, value);
+    }
+
+    // Track upload progress
+    if (onProgress) {
+      xhr.upload.addEventListener("progress", (event) => {
+        if (event.lengthComputable) {
+          onProgress({
+            loaded: event.loaded,
+            total: event.total,
+            percentage: Math.round((event.loaded / event.total) * 100),
+          });
+        }
+      });
+    }
+
+    // Handle successful completion
+    xhr.addEventListener("load", () => {
+      resolve({
+        status: xhr.status,
+        body: xhr.responseText,
+      });
+    });
+
+    // Handle network errors
+    xhr.addEventListener("error", () => {
+      reject(new Error("Upload failed: network error"));
+    });
+
+    // Handle abort
+    xhr.addEventListener("abort", () => {
+      reject(new Error("Upload cancelled"));
+    });
+
+    // Open and configure the request
+    xhr.open("POST", url);
+
+    // Set custom headers
+    for (const [key, value] of Object.entries(headers)) {
+      xhr.setRequestHeader(key, value);
+    }
+
+    // Send the form data
+    xhr.send(formData);
+  });
+
+  const abort = () => {
+    xhr.abort();
+  };
+
+  return { promise, abort };
+}

package/services/payments/adapters/mock.ts

@@ -0,0 +1,159 @@
+/**
+ * @fileoverview Mock payment adapter for development
+ * Simulates in-app purchases with configurable delays and an in-memory store.
+ * Use this adapter during development to test purchase flows without real stores.
+ * @module services/payments/adapters/mock
+ */
+
+import type {
+  PaymentAdapter,
+  Product,
+  Purchase,
+  SubscriptionInfo,
+} from "../types";
+
+// ============================================================================
+// Mock Data
+// ============================================================================
+
+/** Pre-configured mock products for development */
+export const MOCK_PRODUCTS: Product[] = [
+  {
+    id: "premium_monthly",
+    title: "Premium Monthly",
+    description: "Unlock all premium features with a monthly subscription",
+    price: 9.99,
+    priceString: "$9.99",
+    currency: "USD",
+    type: "subscription",
+    subscriptionPeriod: "monthly",
+  },
+  {
+    id: "premium_yearly",
+    title: "Premium Yearly",
+    description: "Unlock all premium features — save 42% with yearly billing",
+    price: 69.99,
+    priceString: "$69.99",
+    currency: "USD",
+    type: "subscription",
+    subscriptionPeriod: "yearly",
+  },
+];
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+/** Simulate network/store latency */
+function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/** Random delay between min and max milliseconds */
+function randomDelay(min = 500, max = 1000): Promise<void> {
+  const ms = Math.floor(Math.random() * (max - min + 1)) + min;
+  return delay(ms);
+}
+
+// ============================================================================
+// Mock Adapter
+// ============================================================================
+
+/**
+ * Development adapter that simulates in-app purchases in memory.
+ * All purchases are stored in a local array and reset when the app restarts.
+ * Includes configurable artificial delays to mimic real store behaviour.
+ */
+export class MockPaymentAdapter implements PaymentAdapter {
+  /** In-memory record of completed purchases */
+  private purchases: Purchase[] = [];
+
+  async initialize(): Promise<void> {
+    await randomDelay();
+
+    if (__DEV__) {
+      console.log("[Payments] Initialized (mock adapter)");
+    }
+  }
+
+  async getProducts(ids: string[]): Promise<Product[]> {
+    await randomDelay();
+
+    const products = MOCK_PRODUCTS.filter((p) => ids.includes(p.id));
+
+    if (__DEV__) {
+      console.log(
+        `[Payments] getProducts: requested ${ids.length}, found ${products.length}`
+      );
+    }
+
+    return products;
+  }
+
+  async purchase(productId: string): Promise<Purchase> {
+    await randomDelay();
+
+    const product = MOCK_PRODUCTS.find((p) => p.id === productId);
+    if (!product) {
+      throw new Error(`Product not found: ${productId}`);
+    }
+
+    const purchase: Purchase = {
+      id: `mock_txn_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+      productId,
+      transactionDate: new Date().toISOString(),
+      transactionReceipt: `mock_receipt_${Date.now()}`,
+    };
+
+    this.purchases.push(purchase);
+
+    if (__DEV__) {
+      console.log(`[Payments] Purchase completed:`, purchase);
+    }
+
+    return purchase;
+  }
+
+  async restorePurchases(): Promise<Purchase[]> {
+    await randomDelay();
+
+    if (__DEV__) {
+      console.log(`[Payments] Restored ${this.purchases.length} purchase(s)`);
+    }
+
+    return [...this.purchases];
+  }
+
+  async getSubscriptionStatus(): Promise<SubscriptionInfo> {
+    await randomDelay();
+
+    // Check if the user has any premium purchase
+    const hasPremium = this.purchases.some(
+      (p) =>
+        p.productId === "premium_monthly" || p.productId === "premium_yearly"
+    );
+
+    const info: SubscriptionInfo = hasPremium
+      ? {
+          status: "active",
+          productId:
+            this.purchases[this.purchases.length - 1]?.productId ?? null,
+          expiresAt: new Date(
+            Date.now() + 30 * 24 * 60 * 60 * 1000
+          ).toISOString(),
+          willRenew: true,
+        }
+      : {
+          status: "none",
+          productId: null,
+          expiresAt: null,
+          willRenew: false,
+        };
+
+    if (__DEV__) {
+      console.log(`[Payments] Subscription status:`, info.status);
+    }
+
+    return info;
+  }
+}

package/services/payments/payment-adapter.ts

@@ -0,0 +1,118 @@
+/**
+ * @fileoverview Payment adapter manager
+ * Singleton-style module that delegates all payment calls to a pluggable
+ * adapter. Defaults to the mock adapter so purchase flows work out of the box
+ * in development without any extra setup.
+ *
+ * Usage:
+ *   import { Payments } from "@/services/payments/payment-adapter";
+ *
+ *   // Swap the adapter for production (e.g. RevenueCat)
+ *   Payments.setAdapter(new RevenueCatAdapter());
+ *
+ *   // Initialize at app start
+ *   await Payments.initialize();
+ *
+ *   // Fetch products
+ *   const products = await Payments.getProducts(["premium_monthly"]);
+ *
+ * @module services/payments/payment-adapter
+ */
+
+import type {
+  PaymentAdapter,
+  Product,
+  Purchase,
+  SubscriptionInfo,
+} from "./types";
+import { MockPaymentAdapter } from "./adapters/mock";
+
+// ============================================================================
+// Module-level state
+// ============================================================================
+
+/** The currently active payment adapter */
+let activeAdapter: PaymentAdapter = new MockPaymentAdapter();
+
+// ============================================================================
+// Public API
+// ============================================================================
+
+/**
+ * Central payments facade.
+ *
+ * Every method delegates to the active adapter so the underlying provider
+ * can be swapped without touching calling code.
+ */
+export const Payments = {
+  // --------------------------------------------------------------------------
+  // Configuration
+  // --------------------------------------------------------------------------
+
+  /**
+   * Replace the active payment adapter.
+   * Call this before `initialize()` to switch providers.
+   */
+  setAdapter(adapter: PaymentAdapter): void {
+    activeAdapter = adapter;
+
+    if (__DEV__) {
+      console.log("[Payments] Adapter set:", adapter.constructor.name);
+    }
+  },
+
+  // --------------------------------------------------------------------------
+  // Lifecycle
+  // --------------------------------------------------------------------------
+
+  /** Initialize the active adapter. Should be called once at app start. */
+  async initialize(): Promise<void> {
+    await activeAdapter.initialize();
+  },
+
+  // --------------------------------------------------------------------------
+  // Products & Purchases
+  // --------------------------------------------------------------------------
+
+  /**
+   * Fetch available products by their store IDs.
+   *
+   * @param ids - Array of product identifiers to fetch
+   * @returns Array of available products
+   */
+  async getProducts(ids: string[]): Promise<Product[]> {
+    return activeAdapter.getProducts(ids);
+  },
+
+  /**
+   * Initiate a purchase for the given product.
+   *
+   * @param productId - The product to purchase
+   * @returns The completed purchase record
+   */
+  async purchase(productId: string): Promise<Purchase> {
+    return activeAdapter.purchase(productId);
+  },
+
+  /**
+   * Restore previously completed purchases.
+   *
+   * @returns Array of restored purchases
+   */
+  async restorePurchases(): Promise<Purchase[]> {
+    return activeAdapter.restorePurchases();
+  },
+
+  // --------------------------------------------------------------------------
+  // Subscriptions
+  // --------------------------------------------------------------------------
+
+  /**
+   * Get the current subscription status for the user.
+   *
+   * @returns Current subscription information
+   */
+  async getSubscriptionStatus(): Promise<SubscriptionInfo> {
+    return activeAdapter.getSubscriptionStatus();
+  },
+};