@mundogamernetwork/shared-ui 1.1.7 → 1.1.14

package/components/checkout/MgCartSummary.vue

@@ -32,6 +32,8 @@ const props = defineProps<{
   autoWire?: boolean;
   /** Show coupon input section */
   showCoupon?: boolean;
+  /** Coupons unavailable for this flow (e.g. subscriptions) — shows disabled + notice */
+  couponUnavailable?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -101,6 +103,7 @@ const showCoupon = computed(() => props.showCoupon !== false);
         :error="couponError"
         :disabled="disabled"
         :auto-wire="autoWire"
+        :unavailable="couponUnavailable || (autoWire && checkout?.hasPlanInCart?.value)"
         @apply-coupon="(code) => emit('apply-coupon', code)"
         @remove-coupon="emit('remove-coupon')"
       />

package/components/checkout/MgCheckoutSidebar.vue

@@ -6,7 +6,6 @@ import MgCartItemList from "./MgCartItemList.vue";
 import MgCartSummary from "./MgCartSummary.vue";
 import MgPaymentMethodSelector from "./MgPaymentMethodSelector.vue";
 import MgGuestEmailForm from "./MgGuestEmailForm.vue";
-import MgPixQRCode from "./MgPixQRCode.vue";
 
 const props = defineProps<{
   checkout?: MgCheckoutInstance;
@@ -24,7 +23,7 @@ const emit = defineEmits<{
 }>();
 
 // Use injected checkout or prop
-const co = props.checkout ?? injectMgCheckout();
+const co = (props.checkout ?? injectMgCheckout())!;
 if (!co) {
   throw new Error("MgCheckoutSidebar: No checkout instance provided. Use provideMgCheckout() or pass checkout prop.");
 }
@@ -33,11 +32,10 @@ onMounted(() => {
   co.fetchCart();
 });
 
-async function handleCheckout() {
-  const res = await co.checkout(props.successUrl, props.cancelUrl);
-  if (res) {
-    emit("checkout-complete", res);
-  }
+function handleCheckout() {
+  // handlePurchase validates (email/gateway/terms) then opens the confirm modal;
+  // startValidation performs the actual submit. Consumers can also call directly.
+  co.handlePurchase();
 }
 </script>
 
@@ -49,28 +47,29 @@ async function handleCheckout() {
         {{ $t?.("checkout.sidebar.cart") ?? "Your Cart" }}
       </h3>
       <MgCartItemList
-        :items="co.cart.value?.items ?? []"
+        :items="co.orderCart.value"
         :loading="co.cartLoading.value"
         :editable="editable ?? true"
         :currency-symbol="currencySymbol"
         @add-item="(id, type) => co.addItem(id, type)"
         @remove-item="(id, type) => co.removeItem(id, type)"
-        @clear-all="co.clearCart()"
+        @clear-all="co.clearCartItems()"
       />
     </div>
 
-    <!-- Cart Summary -->
+    <!-- Cart Summary (coupon auto-disabled when a plan is in cart) -->
     <div v-if="co.hasItems.value" class="mg-checkout-sidebar__section">
       <MgCartSummary
-        :total="co.cartTotal.value"
-        :original-total="co.cartOriginalTotal.value"
-        :has-discount="co.hasDiscount.value"
+        :formatted-total="String(co.orderCartTotal.value)"
+        :formatted-original-total="String(co.orderCartDiscount.value)"
+        :has-discount="co.hasDiscountFlag.value"
         :currency-symbol="currencySymbol"
         :coupon-info="co.couponInfo.value"
         :coupon-loading="co.couponLoading.value"
         :coupon-error="co.couponError.value"
-        :disabled="co.checkoutLoading.value"
-        @apply-coupon="(code) => co.applyCoupon(code)"
+        :coupon-unavailable="co.hasPlanInCart.value"
+        :disabled="co.loading.value"
+        @apply-coupon="(code: string) => co.applyCoupon(code)"
         @remove-coupon="co.removeCoupon()"
       />
     </div>
@@ -78,9 +77,9 @@ async function handleCheckout() {
     <!-- Guest Email -->
     <div v-if="co.hasItems.value" class="mg-checkout-sidebar__section">
       <MgGuestEmailForm
-        v-model="co.guestEmail.value"
+        v-model="co.offlineEmail.value"
         :error="co.emailError.value"
-        :is-authenticated="isAuthenticated"
+        :is-authenticated="isAuthenticated ?? co.signedIn.value"
       />
     </div>
 
@@ -90,29 +89,15 @@ async function handleCheckout() {
         {{ $t?.("checkout.sidebar.payment") ?? "Payment Method" }}
       </h3>
       <MgPaymentMethodSelector
-        v-model="co.paymentMethods.selectedMethod.value"
-        :http-service="(co as any).paymentMethods.methods.value.length ? undefined : undefined"
+        v-model="co.selectedPaymentGateway.value"
         :context="paymentContext ?? 'checkout'"
       />
     </div>
 
-    <!-- Pix QR Code (shown after checkout if Pix) -->
-    <div v-if="co.checkoutResponse.value?.payment_type === 'pix'" class="mg-checkout-sidebar__section">
-      <MgPixQRCode
-        :qr-code="co.checkoutResponse.value.pix_data!.qr_code"
-        :qr-code-base64="co.checkoutResponse.value.pix_data!.qr_code_base64"
-        :expires-at="co.checkoutResponse.value.pix_data!.expires_at"
-        @paid="emit('checkout-complete', co.checkoutResponse.value)"
-      />
-    </div>
-
     <!-- Terms & Checkout Button -->
-    <div v-if="co.hasItems.value && !co.checkoutResponse.value" class="mg-checkout-sidebar__section mg-checkout-sidebar__actions">
+    <div v-if="co.hasItems.value" class="mg-checkout-sidebar__section mg-checkout-sidebar__actions">
       <label class="terms-check">
-        <input
-          type="checkbox"
-          v-model="co.termsAccepted.value"
-        />
+        <input type="checkbox" v-model="co.termUseAccepted.value" />
         <span>
           {{ $t?.("checkout.terms.accept") ?? "I accept the" }}
           <a v-if="termsUrl" :href="termsUrl" target="_blank" class="terms-link">
@@ -124,10 +109,10 @@ async function handleCheckout() {
 
       <button
         class="checkout-btn"
-        :disabled="!co.hasItems.value || !co.termsAccepted.value || co.checkoutLoading.value"
+        :disabled="!co.hasItems.value || !co.termUseAccepted.value || co.loading.value"
         @click="handleCheckout"
       >
-        <span v-if="co.checkoutLoading.value" class="spinner"></span>
+        <span v-if="co.loading.value" class="spinner"></span>
         <template v-else>
           {{ $t?.("checkout.sidebar.buy") ?? "Complete Purchase" }}
         </template>
@@ -154,7 +139,6 @@ async function handleCheckout() {
     padding: 16px;
     background: var(--body-bg-card, #fff);
     border: 1px solid var(--inactive, #f3f4f6);
-    border-radius: 8px;
   }
 
   &__actions {
@@ -198,7 +182,6 @@ async function handleCheckout() {
   width: 100%;
   height: 48px;
   border: none;
-  border-radius: 8px;
   background: #4f46e5;
   color: #fff;
   font-size: 15px;

package/components/checkout/MgCouponInput.vue

@@ -18,6 +18,14 @@ const props = defineProps<{
   disabled?: boolean;
   /** If true, the component manages its own state via injectMgCheckout */
   autoWire?: boolean;
+  /**
+   * When true, coupons are not available for this flow (e.g. subscriptions —
+   * the backend does not apply coupon discounts to plans yet). Shows the input
+   * disabled with an informational notice instead of accepting a code.
+   */
+  unavailable?: boolean;
+  /** Override the default "coupons unavailable" notice text. */
+  unavailableText?: string;
 }>();
 
 const emit = defineEmits<{
@@ -41,7 +49,7 @@ const isLoading = computed(() =>
 const couponError = computed(() =>
   props.autoWire ? checkout?.couponError.value : (props.error ?? _localError.value)
 );
-const isDisabled = computed(() => props.disabled || isLoading.value);
+const isDisabled = computed(() => props.disabled || props.unavailable || isLoading.value);
 
 async function handleApply() {
   const code = couponInput.value.trim().toUpperCase();
@@ -112,6 +120,11 @@ watch(
       </button>
     </div>
 
+    <!-- Unavailable notice (e.g. subscriptions: backend doesn't apply coupons yet) -->
+    <p v-if="unavailable" class="mg-coupon__notice">
+      {{ unavailableText ?? $t?.('checkout.coupon.unavailable_subscription') ?? 'Coupons are not available for subscriptions yet.' }}
+    </p>
+
     <p v-if="couponError" class="mg-coupon__error">{{ couponError }}</p>
   </div>
 </template>
@@ -196,6 +209,13 @@ watch(
     margin-top: 4px;
   }
 
+  &__notice {
+    color: var(--secondary-info-fg, #9ca3af);
+    font-size: 12px;
+    margin-top: 6px;
+    font-style: italic;
+  }
+
   &__spinner {
     display: inline-block;
     width: 14px;

package/components/checkout/MgGuestEmailForm.vue

@@ -41,7 +41,6 @@ function handleInput(e: Event) {
   width: 100%;
   padding: 16px;
   border: 1px solid #f59e0b;
-  border-radius: 8px;
   background: rgba(245, 158, 11, 0.05);
 
   &__info {
@@ -76,7 +75,6 @@ function handleInput(e: Event) {
       width: 100%;
       padding: 10px 12px;
       border: 1px solid var(--inactive, #d1d5db);
-      border-radius: 6px;
       font-size: 14px;
       background: var(--body-bg-card, #fff);
       color: var(--active, #111827);

package/components/checkout/MgPaymentMethodSelector.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { onMounted, watch } from "vue";
 import { usePaymentMethods } from "../../composables/usePaymentMethods";
+import MgPaymentMethods from "../ui/MgPaymentMethods.vue";
 import type { AxiosInstance } from "axios";
 
 const props = defineProps<{
-  httpService: AxiosInstance;
+  // Optional now — gateways are fixed (PayPal/Stripe), no HTTP fetch needed.
+  httpService?: AxiosInstance;
   context?: "checkout" | "subscription";
   modelValue?: string;
+  theme?: string;
 }>();
 
 const emit = defineEmits<{
@@ -38,28 +41,31 @@ watch(selectedMethod, (val) => {
   emit("update:modelValue", val);
 });
 
-function select(name: string) {
-  selectedMethod.value = name.toLowerCase();
+// Resolve the canonical gateway key (paypal|stripe) from a method.
+// `name` is translatable on the backend, so fall back to the canonical id
+// (PayPal = 2, Stripe = 3) when the name doesn't match.
+function gatewayKey(m: { id: number; name: string }): string {
+  const n = (m.name ?? "").trim().toLowerCase();
+  if (n === "paypal" || m.id === 2) return "paypal";
+  if (n === "stripe" || m.id === 3) return "stripe";
+  return n;
 }
 
-function getLogoSrc(name: string): string {
-  const key = name.toLowerCase();
-  const logos: Record<string, string> = {
-    paypal: "/imgs/payments/paypal.svg",
-    stripe: "/imgs/payments/stripe.svg",
-    mercadopago: "/imgs/payments/pix.svg",
-  };
-  return logos[key] ?? "/imgs/payments/default.svg";
+function select(m: { id: number; name: string }) {
+  selectedMethod.value = gatewayKey(m);
 }
 
-function getLabel(name: string): string {
-  const key = name.toLowerCase();
-  const labels: Record<string, string> = {
-    paypal: "PayPal",
-    stripe: "Stripe",
-    mercadopago: "Pix",
-  };
-  return labels[key] ?? name;
+// Canonical numeric ids consumed by <MgPaymentMethods> inline SVG logos.
+function getMethodId(m: { id: number; name: string }): number {
+  const key = gatewayKey(m);
+  if (key === "paypal") return 2;
+  if (key === "stripe") return 3;
+  return m.id;
+}
+
+function getLabel(m: { id: number; name: string }): string {
+  const labels: Record<string, string> = { paypal: "PayPal", stripe: "Stripe" };
+  return labels[gatewayKey(m)] ?? m.name;
 }
 </script>
 
@@ -79,15 +85,13 @@ function getLabel(name: string): string {
         :key="method.id"
         type="button"
         class="mg-payment-method"
-        :class="{ 'mg-payment-method--active': selectedMethod === method.name.toLowerCase() }"
-        @click="select(method.name)"
+        :class="{ 'mg-payment-method--active': selectedMethod === gatewayKey(method) }"
+        @click="select(method)"
       >
-        <img
-          :src="getLogoSrc(method.name)"
-          :alt="getLabel(method.name)"
-          class="mg-payment-method__logo"
-        />
-        <span class="mg-payment-method__label">{{ getLabel(method.name) }}</span>
+        <span class="mg-payment-method__logo">
+          <MgPaymentMethods :method="getMethodId(method)" :theme="theme" />
+        </span>
+        <span class="mg-payment-method__label">{{ getLabel(method) }}</span>
       </button>
     </div>
   </div>
@@ -119,7 +123,6 @@ function getLabel(name: string): string {
   gap: 8px;
   padding: 12px 16px;
   border: 2px solid var(--inactive, #e5e7eb);
-  border-radius: 8px;
   background: transparent;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -151,7 +154,6 @@ function getLabel(name: string): string {
 
 .skeleton-block {
   background: var(--inactive, #e5e7eb);
-  border-radius: 8px;
   animation: pulse 1.5s ease-in-out infinite;
 }
 

package/components/checkout/MgPixQRCode.vue

@@ -143,7 +143,6 @@ onUnmounted(() => {
   align-items: center;
   padding: 24px;
   border: 1px solid var(--inactive, #e5e7eb);
-  border-radius: 12px;
   background: var(--body-bg-card, #fff);
 
   &__header {
@@ -191,7 +190,6 @@ onUnmounted(() => {
     gap: 8px;
     padding: 10px 20px;
     border: 1px solid #4f46e5;
-    border-radius: 8px;
     background: transparent;
     color: #4f46e5;
     font-size: 14px;

package/composables/usePaymentMethods.ts

@@ -6,56 +6,43 @@ export interface PaymentMethod {
   name: string;
 }
 
-export function usePaymentMethods(httpService: AxiosInstance) {
-  const methods = ref<PaymentMethod[]>([]);
+/**
+ * Payment gateways shown in the checkout UI.
+ *
+ * These are FIXED to PayPal + Stripe — the only gateways live across the
+ * ecosystem. We do NOT read the `payment_methods` table: that table holds
+ * generic legacy methods (Cash, Credit Card, Transfer, Bitcoin...) and has no
+ * notion of PayPal/Stripe.
+ *
+ * The actual gateway *account* (which api_credential to charge) is resolved by
+ * the backend at checkout time, honouring the existing active / default /
+ * production flags on `api_credentials`. That lets admins switch accounts
+ * without any frontend change. The frontend only sends
+ * `payment_gateway: 'paypal' | 'stripe'`.
+ *
+ * The numeric `id` here (PayPal = 2, Stripe = 3) is the convention used by
+ * <MgPaymentMethods> to pick which inline SVG logo to render. It is unrelated
+ * to the payment_methods table ids and to api ids (PayPal = 4, Stripe = 5).
+ */
+const GATEWAYS: PaymentMethod[] = [
+  { id: 2, name: "paypal" },
+  { id: 3, name: "stripe" },
+];
+
+export function usePaymentMethods(_httpService?: AxiosInstance) {
+  const methods = ref<PaymentMethod[]>([...GATEWAYS]);
   const selectedMethod = ref<string>("");
   const loading = ref(false);
   const error = ref<string | null>(null);
 
-  async function fetchMethods(
-    context: "checkout" | "subscription" = "checkout"
-  ) {
-    loading.value = true;
-    error.value = null;
-    try {
-      const endpoint =
-        context === "subscription"
-          ? "/payment-methods/subscriptions"
-          : "/payment-methods";
-      const res = await httpService.get(endpoint);
-      methods.value = res.data?.data ?? [];
-
-      // Auto-select if only one method available
-      if (methods.value.length === 1) {
-        selectedMethod.value = methods.value[0].name.toLowerCase();
-      }
-    } catch (e: any) {
-      // Fallback: if endpoint doesn't exist yet (404), provide default methods
-      console.warn("[usePaymentMethods] Endpoint not available, using fallback:", e?.response?.status);
-      methods.value = [
-        { id: 0, name: "paypal" },
-        { id: 1, name: "Stripe" },
-      ];
-      if (methods.value.length > 0 && !selectedMethod.value) {
-        selectedMethod.value = methods.value[0].name.toLowerCase();
-      }
-      error.value = null;
-    } finally {
-      loading.value = false;
-    }
+  // No HTTP call. Kept async + the context arg for call-site compatibility.
+  async function fetchMethods(_context: "checkout" | "subscription" = "checkout") {
+    methods.value = [...GATEWAYS];
   }
 
-  const isPix = computed(
-    () => selectedMethod.value.toLowerCase() === "mercadopago"
-  );
-
-  const isStripe = computed(
-    () => selectedMethod.value.toLowerCase() === "stripe"
-  );
-
-  const isPaypal = computed(
-    () => selectedMethod.value.toLowerCase() === "paypal"
-  );
+  const isStripe = computed(() => selectedMethod.value.toLowerCase() === "stripe");
+  const isPaypal = computed(() => selectedMethod.value.toLowerCase() === "paypal");
+  const isPix = computed(() => false); // Pix not enabled yet
 
   function selectMethod(name: string) {
     selectedMethod.value = name.toLowerCase();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.1.7",
+  "version": "1.1.14",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",