@mundogamernetwork/shared-ui 1.1.7 → 1.1.9

package/components/checkout/MgCheckoutSidebar.vue

@@ -154,7 +154,6 @@ async function handleCheckout() {
     padding: 16px;
     background: var(--body-bg-card, #fff);
     border: 1px solid var(--inactive, #f3f4f6);
-    border-radius: 8px;
   }
 
   &__actions {
@@ -198,7 +197,6 @@ async function handleCheckout() {
   width: 100%;
   height: 48px;
   border: none;
-  border-radius: 8px;
   background: #4f46e5;
   color: #fff;
   font-size: 15px;

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,14 @@
 <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;
   context?: "checkout" | "subscription";
   modelValue?: string;
+  theme?: string;
 }>();
 
 const emit = defineEmits<{
@@ -42,18 +44,21 @@ function select(name: string) {
   selectedMethod.value = name.toLowerCase();
 }
 
-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";
+// Canonical numeric ids consumed by <MgPaymentMethods> inline SVG logos.
+// PayPal = 2, Stripe = 3 (matches api-main + useConfirmation).
+function getMethodId(m: { id: number; name: string }): number {
+  const key = name2key(m.name);
+  if (key === "paypal") return 2;
+  if (key === "stripe") return 3;
+  return m.id;
+}
+
+function name2key(name: string): string {
+  return (name ?? "").toLowerCase();
 }
 
 function getLabel(name: string): string {
-  const key = name.toLowerCase();
+  const key = name2key(name);
   const labels: Record<string, string> = {
     paypal: "PayPal",
     stripe: "Stripe",
@@ -82,11 +87,9 @@ function getLabel(name: string): string {
         :class="{ 'mg-payment-method--active': selectedMethod === method.name.toLowerCase() }"
         @click="select(method.name)"
       >
-        <img
-          :src="getLogoSrc(method.name)"
-          :alt="getLabel(method.name)"
-          class="mg-payment-method__logo"
-        />
+        <span class="mg-payment-method__logo">
+          <MgPaymentMethods :method="getMethodId(method)" :theme="theme" />
+        </span>
         <span class="mg-payment-method__label">{{ getLabel(method.name) }}</span>
       </button>
     </div>
@@ -119,7 +122,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 +153,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

@@ -32,9 +32,10 @@ export function usePaymentMethods(httpService: AxiosInstance) {
     } 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);
+      // Canonical IDs (api-main): PayPal = 2, Stripe = 3
       methods.value = [
-        { id: 0, name: "paypal" },
-        { id: 1, name: "Stripe" },
+        { id: 2, name: "paypal" },
+        { id: 3, name: "stripe" },
       ];
       if (methods.value.length > 0 && !selectedMethod.value) {
         selectedMethod.value = methods.value[0].name.toLowerCase();

package/package.json

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