@mundogamernetwork/shared-ui 1.0.0

package/components/checkout/MgCheckoutSidebar.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { injectMgCheckout } from "../../composables/useMgCheckout";
+import type { MgCheckoutInstance } from "../../composables/useMgCheckout";
+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;
+  successUrl: string;
+  cancelUrl: string;
+  termsUrl?: string;
+  isAuthenticated?: boolean;
+  currencySymbol?: string;
+  editable?: boolean;
+  paymentContext?: "checkout" | "subscription";
+}>();
+
+const emit = defineEmits<{
+  "checkout-complete": [response: any];
+}>();
+
+// Use injected checkout or prop
+const co = props.checkout ?? injectMgCheckout();
+if (!co) {
+  throw new Error("MgCheckoutSidebar: No checkout instance provided. Use provideMgCheckout() or pass checkout prop.");
+}
+
+onMounted(() => {
+  co.fetchCart();
+});
+
+async function handleCheckout() {
+  const res = await co.checkout(props.successUrl, props.cancelUrl);
+  if (res) {
+    emit("checkout-complete", res);
+  }
+}
+</script>
+
+<template>
+  <div class="mg-checkout-sidebar">
+    <!-- Cart Items -->
+    <div class="mg-checkout-sidebar__section">
+      <h3 class="section-title">
+        {{ $t?.("checkout.sidebar.cart") ?? "Your Cart" }}
+      </h3>
+      <MgCartItemList
+        :items="co.cart.value?.items ?? []"
+        :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()"
+      />
+    </div>
+
+    <!-- Cart Summary -->
+    <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"
+        :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)"
+        @remove-coupon="co.removeCoupon()"
+      />
+    </div>
+
+    <!-- Guest Email -->
+    <div v-if="co.hasItems.value" class="mg-checkout-sidebar__section">
+      <MgGuestEmailForm
+        v-model="co.guestEmail.value"
+        :error="co.emailError.value"
+        :is-authenticated="isAuthenticated"
+      />
+    </div>
+
+    <!-- Payment Method -->
+    <div v-if="co.hasItems.value" class="mg-checkout-sidebar__section">
+      <h3 class="section-title">
+        {{ $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"
+        :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">
+      <label class="terms-check">
+        <input
+          type="checkbox"
+          v-model="co.termsAccepted.value"
+        />
+        <span>
+          {{ $t?.("checkout.terms.accept") ?? "I accept the" }}
+          <a v-if="termsUrl" :href="termsUrl" target="_blank" class="terms-link">
+            {{ $t?.("checkout.terms.link") ?? "Terms of Use" }}
+          </a>
+          <template v-else>{{ $t?.("checkout.terms.link") ?? "Terms of Use" }}</template>
+        </span>
+      </label>
+
+      <button
+        class="checkout-btn"
+        :disabled="!co.hasItems.value || !co.termsAccepted.value || co.checkoutLoading.value"
+        @click="handleCheckout"
+      >
+        <span v-if="co.checkoutLoading.value" class="spinner"></span>
+        <template v-else>
+          {{ $t?.("checkout.sidebar.buy") ?? "Complete Purchase" }}
+        </template>
+      </button>
+
+      <p v-if="co.checkoutError.value" class="checkout-error">
+        {{ co.checkoutError.value }}
+      </p>
+    </div>
+
+    <slot name="footer" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mg-checkout-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: sticky;
+  top: 80px;
+
+  &__section {
+    padding: 16px;
+    background: var(--body-bg-card, #fff);
+    border: 1px solid var(--inactive, #f3f4f6);
+    border-radius: 8px;
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--active, #111827);
+  margin: 0 0 12px;
+}
+
+.terms-check {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--active, #111827);
+
+  input[type="checkbox"] {
+    margin-top: 2px;
+    accent-color: #4f46e5;
+  }
+}
+
+.terms-link {
+  color: #4f46e5;
+  text-decoration: underline;
+}
+
+.checkout-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 48px;
+  border: none;
+  border-radius: 8px;
+  background: #4f46e5;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover:not(:disabled) { background: #4338ca; }
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+}
+
+.checkout-error {
+  color: #ee3831;
+  font-size: 13px;
+  text-align: center;
+  margin: 0;
+}
+
+.spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+</style>

package/components/checkout/MgGuestEmailForm.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: string;
+  error?: string;
+  isAuthenticated?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+function handleInput(e: Event) {
+  emit("update:modelValue", (e.target as HTMLInputElement).value);
+}
+</script>
+
+<template>
+  <div v-if="!isAuthenticated" class="mg-guest-email">
+    <div class="mg-guest-email__info">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" />
+      </svg>
+      <p>{{ $t?.("checkout.guest.info") ?? "You are purchasing as a guest. Enter your email to receive your invoice and product access." }}</p>
+    </div>
+    <div class="mg-guest-email__field">
+      <label>{{ $t?.("checkout.guest.email_label") ?? "Email" }} *</label>
+      <input
+        type="email"
+        :value="modelValue"
+        :placeholder="$t?.('checkout.guest.email_placeholder') ?? 'your@email.com'"
+        :class="{ 'has-error': error }"
+        @input="handleInput"
+      />
+      <small v-if="error" class="error-text">{{ error }}</small>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mg-guest-email {
+  width: 100%;
+  padding: 16px;
+  border: 1px solid #f59e0b;
+  border-radius: 8px;
+  background: rgba(245, 158, 11, 0.05);
+
+  &__info {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 12px;
+
+    svg {
+      flex-shrink: 0;
+      color: #f59e0b;
+      margin-top: 2px;
+    }
+
+    p {
+      font-size: 13px;
+      color: var(--active, #111827);
+      line-height: 1.5;
+      margin: 0;
+    }
+  }
+
+  &__field {
+    label {
+      display: block;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--active, #111827);
+      margin-bottom: 4px;
+    }
+
+    input {
+      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);
+
+      &::placeholder { color: var(--inactive, #9ca3af); }
+      &:focus { outline: none; border-color: #4f46e5; }
+      &.has-error { border-color: #ee3831; }
+    }
+
+    .error-text {
+      display: block;
+      color: #ee3831;
+      font-size: 12px;
+      margin-top: 4px;
+    }
+  }
+}
+</style>

package/components/checkout/MgPaymentMethodSelector.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { onMounted, watch } from "vue";
+import { usePaymentMethods } from "../../composables/usePaymentMethods";
+import type { AxiosInstance } from "axios";
+
+const props = defineProps<{
+  httpService: AxiosInstance;
+  context?: "checkout" | "subscription";
+  modelValue?: string;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const {
+  methods,
+  selectedMethod,
+  loading,
+  fetchMethods,
+} = usePaymentMethods(props.httpService);
+
+onMounted(() => {
+  fetchMethods(props.context ?? "checkout");
+});
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val && val !== selectedMethod.value) {
+      selectedMethod.value = val.toLowerCase();
+    }
+  },
+  { immediate: true }
+);
+
+watch(selectedMethod, (val) => {
+  emit("update:modelValue", val);
+});
+
+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";
+}
+
+function getLabel(name: string): string {
+  const key = name.toLowerCase();
+  const labels: Record<string, string> = {
+    paypal: "PayPal",
+    stripe: "Stripe",
+    mercadopago: "Pix",
+  };
+  return labels[key] ?? name;
+}
+</script>
+
+<template>
+  <div class="mg-payment-methods">
+    <div v-if="loading" class="mg-payment-methods__loading">
+      <div class="skeleton-block" style="width: 100%; height: 48px"></div>
+    </div>
+
+    <div v-else-if="methods.length === 0" class="mg-payment-methods__empty">
+      <small>{{ $t?.("checkout.no_payment_methods") ?? "No payment methods available" }}</small>
+    </div>
+
+    <div v-else class="mg-payment-methods__list">
+      <button
+        v-for="method in methods"
+        :key="method.id"
+        type="button"
+        class="mg-payment-method"
+        :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__label">{{ getLabel(method.name) }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mg-payment-methods {
+  width: 100%;
+
+  &__list {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  &__loading,
+  &__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 48px;
+    color: var(--inactive, #6b7280);
+  }
+}
+
+.mg-payment-method {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: 2px solid var(--inactive, #e5e7eb);
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex: 1;
+  min-width: 120px;
+  justify-content: center;
+
+  &:hover {
+    border-color: var(--active, #9ca3af);
+  }
+
+  &--active {
+    border-color: #4f46e5;
+    background-color: rgba(79, 70, 229, 0.05);
+  }
+
+  &__logo {
+    height: 20px;
+    width: auto;
+    object-fit: contain;
+  }
+
+  &__label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--active, #111827);
+  }
+}
+
+.skeleton-block {
+  background: var(--inactive, #e5e7eb);
+  border-radius: 8px;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>

package/components/checkout/MgPixQRCode.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+
+const props = defineProps<{
+  qrCode: string;
+  qrCodeBase64: string;
+  expiresAt: string;
+  pollingUrl?: string;
+  pollingInterval?: number;
+  httpService?: any;
+}>();
+
+const emit = defineEmits<{
+  paid: [];
+  expired: [];
+}>();
+
+const copied = ref(false);
+const remainingSeconds = ref(0);
+let countdownTimer: ReturnType<typeof setInterval> | null = null;
+let pollingTimer: ReturnType<typeof setInterval> | null = null;
+
+const formattedTime = computed(() => {
+  const mins = Math.floor(remainingSeconds.value / 60);
+  const secs = remainingSeconds.value % 60;
+  return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+});
+
+const isExpired = computed(() => remainingSeconds.value <= 0);
+
+async function copyCode() {
+  try {
+    await navigator.clipboard.writeText(props.qrCode);
+    copied.value = true;
+    setTimeout(() => (copied.value = false), 3000);
+  } catch {
+    // Fallback
+    const input = document.createElement("input");
+    input.value = props.qrCode;
+    document.body.appendChild(input);
+    input.select();
+    document.execCommand("copy");
+    document.body.removeChild(input);
+    copied.value = true;
+    setTimeout(() => (copied.value = false), 3000);
+  }
+}
+
+function startCountdown() {
+  const expiresDate = new Date(props.expiresAt).getTime();
+  const updateRemaining = () => {
+    const now = Date.now();
+    const diff = Math.max(0, Math.floor((expiresDate - now) / 1000));
+    remainingSeconds.value = diff;
+    if (diff <= 0) {
+      if (countdownTimer) clearInterval(countdownTimer);
+      if (pollingTimer) clearInterval(pollingTimer);
+      emit("expired");
+    }
+  };
+  updateRemaining();
+  countdownTimer = setInterval(updateRemaining, 1000);
+}
+
+function startPolling() {
+  if (!props.pollingUrl || !props.httpService) return;
+  const interval = props.pollingInterval ?? 5000;
+  pollingTimer = setInterval(async () => {
+    try {
+      const res = await props.httpService.get(props.pollingUrl);
+      const status = res.data?.data?.status ?? res.data?.status;
+      if (status === "paid" || status === "approved") {
+        if (pollingTimer) clearInterval(pollingTimer);
+        if (countdownTimer) clearInterval(countdownTimer);
+        emit("paid");
+      }
+    } catch {
+      // Silent retry
+    }
+  }, interval);
+}
+
+onMounted(() => {
+  startCountdown();
+  startPolling();
+});
+
+onUnmounted(() => {
+  if (countdownTimer) clearInterval(countdownTimer);
+  if (pollingTimer) clearInterval(pollingTimer);
+});
+</script>
+
+<template>
+  <div class="mg-pix">
+    <div class="mg-pix__header">
+      <img src="/imgs/payments/pix.svg" alt="Pix" class="mg-pix__logo" />
+      <span class="mg-pix__title">{{ $t?.("checkout.pix.title") ?? "Pay with Pix" }}</span>
+    </div>
+
+    <div v-if="!isExpired" class="mg-pix__body">
+      <div class="mg-pix__qr">
+        <img :src="`data:image/png;base64,${qrCodeBase64}`" alt="QR Code Pix" />
+      </div>
+
+      <div class="mg-pix__timer">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
+        </svg>
+        <span>{{ formattedTime }}</span>
+      </div>
+
+      <button class="mg-pix__copy" @click="copyCode">
+        <template v-if="copied">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+          {{ $t?.("checkout.pix.copied") ?? "Copied!" }}
+        </template>
+        <template v-else>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+          </svg>
+          {{ $t?.("checkout.pix.copy_code") ?? "Copy Pix code" }}
+        </template>
+      </button>
+
+      <p class="mg-pix__instructions">
+        {{ $t?.("checkout.pix.instructions") ?? "Open your banking app, choose Pix, and scan the QR code or paste the code above." }}
+      </p>
+    </div>
+
+    <div v-else class="mg-pix__expired">
+      <p>{{ $t?.("checkout.pix.expired") ?? "This Pix code has expired. Please try again." }}</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mg-pix {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px;
+  border: 1px solid var(--inactive, #e5e7eb);
+  border-radius: 12px;
+  background: var(--body-bg-card, #fff);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 20px;
+  }
+
+  &__logo {
+    height: 24px;
+  }
+
+  &__title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--active, #111827);
+  }
+
+  &__qr {
+    width: 200px;
+    height: 200px;
+    margin-bottom: 16px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  &__timer {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--active, #111827);
+    margin-bottom: 16px;
+  }
+
+  &__copy {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    border: 1px solid #4f46e5;
+    border-radius: 8px;
+    background: transparent;
+    color: #4f46e5;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    margin-bottom: 16px;
+
+    &:hover {
+      background: rgba(79, 70, 229, 0.05);
+    }
+  }
+
+  &__instructions {
+    font-size: 12px;
+    color: var(--inactive, #6b7280);
+    text-align: center;
+    max-width: 280px;
+    line-height: 1.5;
+  }
+
+  &__expired {
+    text-align: center;
+    color: #ee3831;
+    font-size: 14px;
+  }
+}
+</style>