@mundogamernetwork/shared-ui 1.1.3 → 1.1.7

package/composables/useMgCheckout.ts

@@ -1,85 +1,111 @@
-import { ref, reactive, provide, inject, computed } from "vue";
-import type { AxiosInstance } from "axios";
+import { ref, computed, watch, nextTick, provide, inject } from "vue";
+import { storeToRefs } from "pinia";
 import { usePaymentMethods } from "./usePaymentMethods";
-import type { PaymentMethod } from "./usePaymentMethods";
+import type { AxiosInstance } from "axios";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
 
 export interface CartItem {
   id: number;
   item_id: number;
   item_type: string;
   quantity: number;
-  price: number;
-  price_with_discount: number;
-  discount: number;
-  currency_id: number;
-  item: {
+  price: number | string;
+  price_with_discount?: number | string;
+  discount?: number;
+  currency_id?: number;
+  item?: {
     id: number;
-    name: string;
+    name?: string;
+    localized_name?: string;
     description?: string;
     slug?: string;
     image_url?: string;
+    products?: any[];
   };
 }
 
 export interface CartData {
-  items: CartItem[];
-  original_total: number;
-  total_with_discount: number;
+  items?: { data?: CartItem[] } | CartItem[];
+  original_total?: number;
+  total_with_discount?: number;
   total_discount?: number;
   formatted_original_total?: string;
   formatted_total_with_discount?: string;
+  formatted_total?: string;
   formatted_total_discount?: string;
-  discount_coupon?: any;
+  discount_coupon?: { code: string; discount?: number };
   discount_coupon_code?: string;
+  currency?: { data?: { code?: string; symbol?: string } };
+  user_email?: string;
+  [key: string]: any;
 }
 
-export interface CheckoutResponse {
-  order: { id: string; status: string };
-  payer_action: string;
-  payment_type: "redirect" | "pix" | "free";
-  pix_data?: {
-    qr_code: string;
-    qr_code_base64: string;
-    expires_at: string;
-  };
+export interface PlanSelection {
+  id: number;
+  name?: string;
+  slug?: string;
+  [key: string]: any;
+}
+
+export interface PlanPricingSelection {
+  id: number;
+  value?: number;
+  payment_period_id?: number;
+  [key: string]: any;
 }
 
 const CHECKOUT_KEY = "mg-checkout-instance";
 
-export function useMgCheckout(httpService: AxiosInstance) {
-  // Payment methods (dynamic from backend)
+export function provideMgCheckout(instance: ReturnType<typeof useMgCheckout>) {
+  provide(CHECKOUT_KEY, instance);
+}
+
+export function injectMgCheckout(): ReturnType<typeof useMgCheckout> | undefined {
+  return inject<ReturnType<typeof useMgCheckout>>(CHECKOUT_KEY);
+}
+
+// ─── Composable ───────────────────────────────────────────────────────────────
+
+export function useMgCheckout(httpService: AxiosInstance, options?: {
+  buyerPageName?: string;
+  successPath?: string;  // e.g. "/confirmation"
+  cancelPath?: string;   // e.g. "/pricing"
+}) {
+  const nuxtApp = useNuxtApp();
+  const { locale } = useI18n();
+  const router = useRouter();
+  const authStore = useAuthStore();
+  const { signedIn } = storeToRefs(authStore);
   const paymentMethods = usePaymentMethods(httpService);
 
-  // Cart state
-  const cart = ref<CartData | null>(null);
+  const buyerPageName = options?.buyerPageName ?? "";
+  const successPath = options?.successPath ?? "/confirmation";
+  const cancelPath = options?.cancelPath ?? "/pricing";
+
+  // ── Cart ──────────────────────────────────────────────────────────────────
+
+  const cart = ref<CartData>({});
   const cartLoading = ref(false);
   const cartError = ref<string | null>(null);
 
-  // Checkout state
-  const checkoutLoading = ref(false);
-  const checkoutResponse = ref<CheckoutResponse | null>(null);
-  const checkoutError = ref<string | null>(null);
+  const getCartItems = computed((): CartItem[] => {
+    const items = cart.value?.items;
+    if (!items) return [];
+    if (Array.isArray(items)) return items;
+    return items.data ?? [];
+  });
 
-  // Guest state
-  const guestEmail = ref("");
-  const emailError = ref("");
+  const hasItems = computed(() => getCartItems.value.length > 0 || !!selectedPlan.value);
+  const hasDiscount = computed(() => !!cart.value?.total_discount && cart.value.total_discount !== 0);
 
-  // Terms
-  const termsAccepted = ref(false);
-
-  // Coupon
-  const couponCode = ref("");
-  const couponLoading = ref(false);
-  const couponError = ref<string | null>(null);
-  const couponInfo = ref<any>(null);
-
-  // Cart operations
   async function fetchCart() {
     cartLoading.value = true;
     cartError.value = null;
     try {
-      const res = await httpService.get("/shopping-cart");
-      cart.value = res.data?.data ?? null;
+      const res = await httpService.get("api/v1/shopping-cart");
+      cart.value = res.data?.data ?? {};
+      _syncCartState(cart.value);
     } catch (e: any) {
       cartError.value = e?.message ?? "Failed to load cart";
     } finally {
@@ -87,58 +113,85 @@ export function useMgCheckout(httpService: AxiosInstance) {
     }
   }
 
+  function _syncCartState(data: CartData) {
+    const items = Array.isArray(data.items) ? data.items : (data.items?.data ?? []);
+    orderCart.value = [...items].sort((a: any, b: any) => {
+      if (a.item_type < b.item_type) return -1;
+      if (a.item_type > b.item_type) return 1;
+      return (a.item_id ?? 0) - (b.item_id ?? 0);
+    });
+    orderCartDiscount.value = data.formatted_original_total ?? "";
+    orderCartTotal.value = data.formatted_total_with_discount ?? data.formatted_total ?? "";
+    hasDiscountFlag.value = (data.total_discount ?? 0) !== 0;
+    if (data.discount_coupon) couponInfo.value = data.discount_coupon;
+  }
+
+  // Raw ordered cart for display
+  const orderCart = ref<CartItem[]>([]);
+  const orderCartTotal = ref<string | number>(0);
+  const orderCartDiscount = ref<string | number>(0);
+  const hasDiscountFlag = ref(false);
+
   async function addItem(itemId: number, itemType: string, quantity = 1) {
+    if (cartLoading.value) return;
+    // Clear plan if adding product (different flows)
+    if (selectedPlan.value) { selectedPlan.value = null; selectedPlanPricing.value = null; }
     cartLoading.value = true;
     try {
-      const res = await httpService.post("/shopping-cart/add", {
-        item_id: itemId,
-        item_type: itemType,
-        quantity,
-      });
-      cart.value = res.data?.data ?? cart.value;
+      await httpService.post("api/v1/shopping-cart/add", { item_id: itemId, item_type: itemType, quantity });
+      await fetchCart();
     } finally {
       cartLoading.value = false;
     }
   }
 
   async function removeItem(itemId: number, itemType: string, quantity = 1) {
+    if (cartLoading.value) return;
     cartLoading.value = true;
     try {
-      const res = await httpService.post("/shopping-cart/remove", {
-        item_id: itemId,
-        item_type: itemType,
-        quantity,
-      });
-      cart.value = res.data?.data ?? cart.value;
+      await httpService.post("api/v1/shopping-cart/remove", { item_id: itemId, item_type: itemType, quantity });
+      await fetchCart();
     } finally {
       cartLoading.value = false;
     }
   }
 
-  async function clearCart() {
+  async function clearCartItems() {
+    if (cartLoading.value) return;
     cartLoading.value = true;
     try {
-      await httpService.post("/shopping-cart/clear");
-      cart.value = null;
+      await httpService.post("api/v1/shopping-cart/clear");
+      cart.value = {};
+      orderCart.value = [];
+      orderCartTotal.value = 0;
+      orderCartDiscount.value = 0;
+      hasDiscountFlag.value = false;
     } finally {
       cartLoading.value = false;
     }
   }
 
-  // Coupon
-  async function applyCoupon(code: string) {
+  // ── Coupon ────────────────────────────────────────────────────────────────
+
+  const couponCode = ref("");
+  const couponLoading = ref(false);
+  const couponError = ref<string | null>(null);
+  const couponInfo = ref<any>(null);
+
+  async function applyCoupon(code?: string) {
+    const codeToApply = (code ?? couponCode.value).toUpperCase().trim();
+    if (!codeToApply) return;
     couponLoading.value = true;
     couponError.value = null;
     try {
-      const res = await httpService.post("/shopping-cart/apply-coupon", {
-        code: code.toUpperCase(),
-      });
+      const res = await httpService.post("api/v1/shopping-cart/apply-coupon", { code: codeToApply });
       const data = res.data?.data ?? res.data;
       if (res.data?.warnings?.length) {
         couponError.value = res.data.warnings[0]?.message ?? "Invalid coupon";
       } else {
         cart.value = data;
-        couponInfo.value = data?.discount_coupon ?? null;
+        _syncCartState(data);
+        couponInfo.value = data?.discount_coupon ?? { code: codeToApply };
       }
     } catch (e: any) {
       couponError.value = e?.response?.data?.message ?? "Invalid coupon code";
@@ -150,8 +203,10 @@ export function useMgCheckout(httpService: AxiosInstance) {
   async function removeCoupon() {
     couponLoading.value = true;
     try {
-      const res = await httpService.post("/shopping-cart/remove-coupon");
-      cart.value = res.data?.data ?? cart.value;
+      const res = await httpService.post("api/v1/shopping-cart/remove-coupon");
+      const data = res.data?.data ?? res.data;
+      cart.value = data;
+      _syncCartState(data);
       couponInfo.value = null;
       couponCode.value = "";
     } finally {
@@ -159,110 +214,279 @@ export function useMgCheckout(httpService: AxiosInstance) {
     }
   }
 
-  // Checkout
-  async function checkout(successUrl: string, cancelUrl: string) {
-    if (!termsAccepted.value) {
-      checkoutError.value = "You must accept the terms of use";
-      return null;
+  // ── Plan / Subscription ────────────────────────────────────────────────────
+
+  const selectedPlan = ref<PlanSelection | null>(null);
+  const selectedPlanPricing = ref<PlanPricingSelection | null>(null);
+  const hasPlanInCart = computed(() => !!selectedPlan.value);
+
+  const isSubscriber = computed(() => {
+    const sub = (authStore as any).user?.subscription ?? (authStore as any).subscription;
+    return sub?.is_subscriber === true || sub?.active === true;
+  });
+
+  async function selectPlan(plan: PlanSelection, pricing: PlanPricingSelection) {
+    selectedPlan.value = plan;
+    selectedPlanPricing.value = pricing;
+    // Clear product cart when selecting a plan
+    if (orderCart.value.length > 0) {
+      try {
+        await httpService.post("api/v1/shopping-cart/clear");
+        orderCart.value = [];
+        orderCartTotal.value = 0;
+        orderCartDiscount.value = 0;
+        hasDiscountFlag.value = false;
+      } catch { /* silent */ }
     }
+  }
 
-    // Guest email validation
-    if (guestEmail.value && !isValidEmail(guestEmail.value)) {
-      emailError.value = "Please enter a valid email";
-      return null;
-    }
+  function removePlan() {
+    selectedPlan.value = null;
+    selectedPlanPricing.value = null;
+  }
+
+  // ── Payment / Gateway ──────────────────────────────────────────────────────
+
+  const selectedPaymentGateway = ref<string>("");
+  const checkoutError = ref<string | null>(null);
+  const loading = ref(false);
 
-    checkoutLoading.value = true;
+  function selectPaymentType(value: string) {
+    selectedPaymentGateway.value = value;
     checkoutError.value = null;
+  }
 
-    try {
-      const params: Record<string, string> = {
-        payment_method: paymentMethods.selectedMethod.value,
-        success_url: successUrl,
-        cancel_url: cancelUrl,
-      };
-
-      if (guestEmail.value) {
-        params.email = guestEmail.value;
-      }
+  // ── Terms & Confirm Modal ──────────────────────────────────────────────────
+
+  const termUseAccepted = ref(false);
+  const sendError = ref(false);
+  const openConfirmModal = ref(false);
+
+  function changeTerm(value: boolean) {
+    termUseAccepted.value = value;
+    sendError.value = false;
+  }
+
+  // ── Guest Checkout ─────────────────────────────────────────────────────────
+
+  const offlineEmail = ref("");
+  const emailError = ref("");
+  const isInvalid = ref(false);
+
+  function isValidEmail(email: string): boolean {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  }
 
-      const res = await httpService.post("/shopping-cart/checkout", params);
-      const data = res.data;
-
-      checkoutResponse.value = {
-        order: data.order,
-        payer_action: data.payer_action,
-        payment_type: data.payment_type ?? "redirect",
-        pix_data: data.pix_data ?? undefined,
-      };
-
-      // Free order (100%-off coupon): the backend already marked the invoice
-      // paid and returns payer_action: null (NO gateway). Send the user to the
-      // confirmation/success URL with the invoice id appended, so the
-      // confirmation page can read it — never redirect to a null payer_action.
-      if (checkoutResponse.value.payment_type === "free") {
-        const invId =
-          (data.order?.invoice_id ?? data.order?.reference ?? "") as string;
-        if (successUrl) {
-          const sep = successUrl.includes("?") ? "&" : "?";
-          window.location.href = invId
-            ? `${successUrl}${sep}invoice_id=${encodeURIComponent(invId)}`
-            : successUrl;
-        }
-      } else if (
-        checkoutResponse.value.payment_type === "redirect" &&
-        checkoutResponse.value.payer_action
-      ) {
-        // Stripe / PayPal — redirect to the gateway.
-        window.location.href = checkoutResponse.value.payer_action;
+  // ── handlePurchase: gate check before opening modal ───────────────────────
+
+  function handlePurchase() {
+    if (!signedIn.value) {
+      if (!offlineEmail.value || !isValidEmail(offlineEmail.value)) {
+        emailError.value = _t("wallet.offline_order.error", "Please enter a valid email.");
+        isInvalid.value = true;
+        nextTick(() => {
+          document.getElementById("offlineEmail")?.scrollIntoView({ behavior: "smooth", block: "center" });
+        });
+        return;
       }
+    }
+    if (!selectedPaymentGateway.value) {
+      checkoutError.value = _t("checkout.select_payment_method", "Please select a payment method.");
+      return;
+    }
+    if (!termUseAccepted.value) {
+      sendError.value = true;
+      return;
+    }
+    openConfirmModal.value = true;
+  }
 
-      // For Pix, the component will show the QR code
-      return checkoutResponse.value;
-    } catch (e: any) {
-      checkoutError.value =
-        e?.response?.data?.message ?? "Checkout failed. Please try again.";
-      return null;
+  function _t(key: string, fallback: string): string {
+    try { return (nuxtApp.$i18n as any).t(key) || fallback; } catch { return fallback; }
+  }
+
+  // ── startValidation: the actual checkout submission ────────────────────────
+
+  async function startValidation() {
+    if (loading.value) return;
+    try {
+      loading.value = true;
+      if (buyerPageName) localStorage.setItem("buyerPage", buyerPageName);
+
+      const gatewayStr = selectedPaymentGateway.value || "stripe";
+      const baseUrl = typeof window !== "undefined" ? window.location.origin : "";
+      const localeStr = locale.value || "en";
+
+      if (hasPlanInCart.value && selectedPlanPricing.value) {
+        // ── Subscription / plan flow ──────────────────────────────────────
+        await _doSubscriptionCheckout(gatewayStr, baseUrl, localeStr, false);
+
+      } else {
+        // ── Product / cart flow ────────────────────────────────────────────
+        await _doCartCheckout(gatewayStr, baseUrl, localeStr);
+      }
+    } catch (error: any) {
+      openConfirmModal.value = false;
+      await _handleCheckoutError(error, gatewayStr());
     } finally {
-      checkoutLoading.value = false;
+      loading.value = false;
     }
   }
 
-  // Computed
-  const hasItems = computed(
-    () => (cart.value?.items?.length ?? 0) > 0
-  );
+  // helpers captured for error handler closure
+  let _lastGateway = "";
+  function gatewayStr() { return _lastGateway || selectedPaymentGateway.value || "stripe"; }
+
+  async function _doSubscriptionCheckout(gateway: string, baseUrl: string, loc: string, isUpgrade: boolean) {
+    _lastGateway = gateway;
+    const endpoint = isUpgrade
+      ? "api/v1/plans/subscriptions/upgrade"
+      : "api/v1/plans/subscriptions";
+
+    const payload: Record<string, any> = {
+      mg_network_plan_pricing_id: selectedPlanPricing.value!.id,
+      success_url: `${baseUrl}/${loc}${successPath}`,
+      cancel_url: `${baseUrl}/${loc}${cancelPath}`,
+      payment_gateway: gateway,
+    };
+    if (couponInfo.value?.code) payload.discount_coupon_code = couponInfo.value.code;
+    if (!signedIn.value && offlineEmail.value) payload.email = offlineEmail.value;
+
+    const res = await httpService.post(endpoint, payload);
+    const meta = res.data?.meta ?? res.data ?? {};
+    const payerAction = meta.payer_action ?? meta.checkout_url ?? null;
+    const invoiceId = meta.invoice_id ?? meta.id;
+
+    if (invoiceId) {
+      localStorage.setItem("invoiceUuid", String(invoiceId));
+    }
+    localStorage.setItem("paymentGateway", gateway);
+    localStorage.removeItem("checkoutType");
+    localStorage.removeItem("subscriptionId");
+
+    openConfirmModal.value = false;
+    removePlan();
+
+    if (payerAction) {
+      window.location.href = payerAction;
+    } else {
+      // Free / immediate — go straight to confirmation
+      router.push(`/${loc}${successPath}${invoiceId ? `?invoice_id=${invoiceId}` : ""}`);
+    }
+  }
 
-  const hasDiscount = computed(
-    () =>
-      cart.value != null &&
-      cart.value.original_total !== cart.value.total_with_discount
-  );
+  async function _doCartCheckout(gateway: string, baseUrl: string, loc: string) {
+    _lastGateway = gateway;
+    localStorage.setItem("paymentGateway", gateway);
 
-  const cartTotal = computed(() => cart.value?.total_with_discount ?? 0);
-  const cartOriginalTotal = computed(() => cart.value?.original_total ?? 0);
+    const payload: Record<string, any> = {
+      payment_method: gateway,
+      success_url: `${baseUrl}/${loc}${successPath}`,
+      cancel_url: `${baseUrl}/${loc}${cancelPath}`,
+    };
+    if (!signedIn.value && offlineEmail.value) payload.email = offlineEmail.value;
 
-  // Helpers
-  function isValidEmail(email: string): boolean {
-    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    const res = await httpService.post("api/v1/shopping-cart/checkout", payload);
+    const data = res.data ?? {};
+    const payerAction = data.payer_action ?? data.checkout_url ?? null;
+    const invoiceId = data.order?.invoice_id ?? data.invoice_id;
+
+    if (invoiceId) localStorage.setItem("invoiceUuid", String(invoiceId));
+
+    openConfirmModal.value = false;
+
+    if (!payerAction) {
+      // Free order — confirmation directly
+      router.push(`/${loc}${successPath}${invoiceId ? `?invoice_id=${invoiceId}` : ""}`);
+    } else {
+      window.location.href = payerAction;
+    }
   }
 
-  const instance = {
-    // Payment methods
-    paymentMethods,
+  async function _handleCheckoutError(error: any, currentGateway: string) {
+    openConfirmModal.value = false;
+    const status = error?.response?.status ?? 0;
+    const msg: string = error?.response?.data?.message ?? "";
+    const code: string = error?.response?.data?.code ?? "";
+
+    // 409 — already has subscription → auto-retry as upgrade
+    const isAlreadySubscribed =
+      status === 409 &&
+      (code === "ALREADY_SUBSCRIBED" ||
+        msg.toLowerCase().includes("already have an active") ||
+        msg.toLowerCase().includes("already subscribed"));
+
+    if (isAlreadySubscribed && !isSubscriber.value && hasPlanInCart.value && selectedPlanPricing.value) {
+      try {
+        const baseUrl = typeof window !== "undefined" ? window.location.origin : "";
+        await _doSubscriptionCheckout(currentGateway, baseUrl, locale.value || "en", true);
+        return;
+      } catch (upgradeErr: any) {
+        checkoutError.value =
+          upgradeErr?.response?.data?.message ??
+          _t("pricing.error_upgrade_failed", "Unable to upgrade plan. Please contact support.");
+        return;
+      }
+    }
 
+    const isGatewayError =
+      msg.includes("GatewayPlan") ||
+      msg.includes("No payment credential") ||
+      status === 404;
+
+    // Auto-fallback to other gateway
+    if (isGatewayError && hasPlanInCart.value) {
+      const fallback = currentGateway === "paypal" ? "stripe" : "paypal";
+      const fallbackLabel = fallback === "paypal" ? "PayPal" : "Stripe";
+      checkoutError.value = _t("pricing.error_gateway_fallback", `Trying ${fallbackLabel}...`).replace("{gateway}", fallbackLabel);
+      selectedPaymentGateway.value = fallback;
+      setTimeout(() => {
+        checkoutError.value = null;
+        handlePurchase();
+      }, 2000);
+      return;
+    }
+
+    if (isGatewayError) {
+      checkoutError.value = _t("pricing.error_gateway_not_available", "Payment method unavailable. Please try another.");
+    } else if (msg.includes(".")) {
+      const translated = _t(`errors.${msg}`, msg);
+      checkoutError.value = translated;
+    } else if (msg) {
+      checkoutError.value = msg;
+    } else {
+      checkoutError.value = _t("checkout.generic_error", "Checkout failed. Please try again.");
+    }
+  }
+
+  // ── Watchers ───────────────────────────────────────────────────────────────
+
+  watch(offlineEmail, (val) => {
+    if (val && isValidEmail(val)) { emailError.value = ""; isInvalid.value = false; }
+  });
+
+  watch(sendError, (v) => {
+    if (v) openConfirmModal.value = false;
+  });
+
+  // ── Return ─────────────────────────────────────────────────────────────────
+
+  return {
     // Cart
     cart,
     cartLoading,
     cartError,
+    orderCart,
+    orderCartTotal,
+    orderCartDiscount,
+    hasDiscountFlag,
+    hasItems,
+    hasDiscount,
     fetchCart,
     addItem,
     removeItem,
-    clearCart,
-    hasItems,
-    hasDiscount,
-    cartTotal,
-    cartOriginalTotal,
+    clearCartItems,
+    getCartItems,
 
     // Coupon
     couponCode,
@@ -272,29 +496,37 @@ export function useMgCheckout(httpService: AxiosInstance) {
     applyCoupon,
     removeCoupon,
 
-    // Guest
-    guestEmail,
-    emailError,
+    // Plan
+    selectedPlan,
+    selectedPlanPricing,
+    hasPlanInCart,
+    isSubscriber,
+    selectPlan,
+    removePlan,
 
-    // Terms
-    termsAccepted,
-
-    // Checkout
-    checkout,
-    checkoutLoading,
-    checkoutResponse,
+    // Payment
+    paymentMethods,
+    selectedPaymentGateway,
     checkoutError,
-  };
+    loading,
+    selectPaymentType,
 
-  return instance;
-}
+    // Terms & modal
+    termUseAccepted,
+    sendError,
+    openConfirmModal,
+    changeTerm,
 
-export type MgCheckoutInstance = ReturnType<typeof useMgCheckout>;
+    // Guest
+    signedIn,
+    offlineEmail,
+    emailError,
+    isInvalid,
 
-export function provideMgCheckout(instance: MgCheckoutInstance) {
-  provide(CHECKOUT_KEY, instance);
+    // Actions
+    handlePurchase,
+    startValidation,
+  };
 }
 
-export function injectMgCheckout(): MgCheckoutInstance | undefined {
-  return inject<MgCheckoutInstance>(CHECKOUT_KEY);
-}
+export type MgCheckoutInstance = ReturnType<typeof useMgCheckout>;