@mundogamernetwork/shared-ui 1.1.4 → 1.1.9

package/components/checkout/MgCouponInput.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+/**
+ * MgCouponInput — standalone coupon input component.
+ *
+ * Can be used in two modes:
+ * 1. Wired mode: inject useMgCheckout context (call provideMgCheckout in parent)
+ * 2. Prop/event mode: pass couponInfo, couponLoading, couponError as props
+ *    and listen to apply-coupon / remove-coupon events.
+ */
+import { ref, computed } from "vue";
+import { injectMgCheckout } from "../../composables/useMgCheckout";
+
+const props = defineProps<{
+  /** Applied coupon object (prop mode). If null, shows the input. */
+  couponInfo?: { code: string; discount?: number; name?: string } | null;
+  loading?: boolean;
+  error?: string | null;
+  disabled?: boolean;
+  /** If true, the component manages its own state via injectMgCheckout */
+  autoWire?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "apply-coupon": [code: string];
+  "remove-coupon": [];
+}>();
+
+// Try to auto-wire to parent checkout context
+const checkout = injectMgCheckout();
+
+const couponInput = ref("");
+const _localLoading = ref(false);
+const _localError = ref<string | null>(null);
+
+const activeCoupon = computed(() =>
+  props.autoWire ? checkout?.couponInfo.value : props.couponInfo
+);
+const isLoading = computed(() =>
+  props.autoWire ? checkout?.couponLoading.value : (props.loading ?? _localLoading.value)
+);
+const couponError = computed(() =>
+  props.autoWire ? checkout?.couponError.value : (props.error ?? _localError.value)
+);
+const isDisabled = computed(() => props.disabled || isLoading.value);
+
+async function handleApply() {
+  const code = couponInput.value.trim().toUpperCase();
+  if (!code || isDisabled.value) return;
+
+  if (props.autoWire && checkout) {
+    checkout.couponCode.value = code;
+    await checkout.applyCoupon(code);
+  } else {
+    emit("apply-coupon", code);
+  }
+}
+
+async function handleRemove() {
+  if (props.autoWire && checkout) {
+    await checkout.removeCoupon();
+    couponInput.value = "";
+  } else {
+    couponInput.value = "";
+    emit("remove-coupon");
+  }
+}
+
+// Clear input after coupon applied successfully
+watch(
+  () => activeCoupon.value,
+  (v) => { if (v) couponInput.value = ""; }
+);
+</script>
+
+<template>
+  <div class="mg-coupon">
+    <!-- Applied state -->
+    <div v-if="activeCoupon" class="mg-coupon__applied">
+      <span class="mg-coupon__badge">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+        {{ activeCoupon.code }}
+        <span v-if="activeCoupon.discount">(-{{ activeCoupon.discount }}%)</span>
+      </span>
+      <button class="mg-coupon__remove" :disabled="isLoading" @click="handleRemove" :title="$t?.('checkout.coupon.remove') ?? 'Remove coupon'">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Input state -->
+    <div v-else class="mg-coupon__form">
+      <input
+        v-model="couponInput"
+        type="text"
+        class="mg-coupon__input"
+        :class="{ 'mg-coupon__input--error': couponError }"
+        :placeholder="$t?.('checkout.coupon.placeholder') ?? 'Discount code'"
+        :disabled="isDisabled"
+        style="text-transform: uppercase"
+        @keyup.enter="handleApply"
+      />
+      <button
+        class="mg-coupon__btn"
+        :disabled="!couponInput.trim() || isDisabled"
+        @click="handleApply"
+      >
+        <span v-if="isLoading" class="mg-coupon__spinner" />
+        <template v-else>{{ $t?.('checkout.coupon.apply') ?? 'Apply' }}</template>
+      </button>
+    </div>
+
+    <p v-if="couponError" class="mg-coupon__error">{{ couponError }}</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mg-coupon {
+  width: 100%;
+
+  &__form {
+    display: flex;
+    gap: 8px;
+  }
+
+  &__input {
+    flex: 1;
+    padding: 10px 12px;
+    border: 1px solid var(--inactive, #808080);
+    background: transparent;
+    color: var(--active, #fff);
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.15s;
+
+    &::placeholder { color: var(--inactive, #9ca3af); text-transform: none; }
+    &:focus { border-color: var(--highlight-color, #4f46e5); }
+    &:disabled { opacity: 0.5; cursor: not-allowed; }
+    &--error { border-color: #ee3831; }
+  }
+
+  &__btn {
+    padding: 10px 18px;
+    background: var(--highlight-color, #4f46e5);
+    color: #fff;
+    border: none;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: opacity 0.15s;
+
+    &:disabled { opacity: 0.4; cursor: not-allowed; }
+    &:hover:not(:disabled) { opacity: 0.85; }
+  }
+
+  &__applied {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 6px 12px;
+    background: rgba(34, 197, 94, 0.12);
+    color: #22c55e;
+    font-size: 13px;
+    font-weight: 600;
+    border: 1px solid rgba(34, 197, 94, 0.3);
+
+    svg { flex-shrink: 0; }
+  }
+
+  &__remove {
+    background: none;
+    border: none;
+    color: var(--inactive, #6b7280);
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    transition: color 0.15s;
+
+    &:hover { color: #ee3831; }
+    &:disabled { opacity: 0.4; cursor: not-allowed; }
+  }
+
+  &__error {
+    color: #ee3831;
+    font-size: 12px;
+    margin-top: 4px;
+  }
+
+  &__spinner {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border: 2px solid rgba(255,255,255,0.3);
+    border-top-color: #fff;
+    border-radius: 50%;
+    animation: mg-coupon-spin 0.6s linear infinite;
+  }
+}
+
+@keyframes mg-coupon-spin { to { transform: rotate(360deg); } }
+</style>

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;