@mundogamernetwork/shared-ui 1.0.0

package/components/ui/MgPromotionBanner.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+const promotionStore = usePromotionStore();
+const { t } = useI18n();
+
+onMounted(async () => {
+	await promotionStore.fetchBanner();
+});
+
+const { banner, isVisible } = storeToRefs(promotionStore);
+
+const resolvedLinkText = computed(() => {
+	if (!banner.value?.link_url) return '';
+	if (banner.value.link_text) return banner.value.link_text;
+	return t('announcementBanner.learnMore', 'Learn more');
+});
+
+// Inline colors override the type-based CSS vars when set
+const bannerStyle = computed(() => {
+	if (!banner.value) return {};
+	const style: Record<string, string> = {};
+	if (banner.value.bg_color) style.backgroundColor = banner.value.bg_color;
+	if (banner.value.text_color) style.color = banner.value.text_color;
+	return style;
+});
+
+function onLinkClick() {
+	promotionStore.recordClick();
+}
+
+function dismiss() {
+	promotionStore.dismiss();
+}
+</script>
+
+<template>
+	<Transition name="mg-promotion-slide">
+		<div
+			v-if="isVisible && banner && banner.message"
+			class="mg-promotion-banner"
+			:class="`mg-promotion-banner--${banner.type}`"
+		>
+			<img
+				v-if="banner.image_url"
+				:src="banner.image_url"
+				class="mg-promotion-banner__image"
+				:alt="banner.title || ''"
+			/>
+
+			<div class="mg-promotion-banner__content">
+				<strong v-if="banner.title" class="mg-promotion-banner__title">
+					{{ banner.title }}
+				</strong>
+				<span class="mg-promotion-banner__message">{{ banner.message }}</span>
+			</div>
+
+			<a
+				v-if="banner.link_url"
+				:href="banner.link_url"
+				class="mg-promotion-banner__link"
+				target="_blank"
+				rel="noopener noreferrer"
+				@click="onLinkClick"
+			>{{ resolvedLinkText }}</a>
+
+			<button
+				class="mg-promotion-banner__close"
+				:aria-label="t('announcementBanner.close', 'Close')"
+				@click="dismiss"
+			>&times;</button>
+		</div>
+	</Transition>
+</template>
+
+<style lang="scss" scoped>
+.mg-promotion-banner {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.75rem;
+	padding: 0.5rem 3rem 0.5rem 1rem;
+	width: 100%;
+	font-size: 0.875rem;
+	font-weight: 500;
+	position: relative;
+	z-index: 99; // below announcement banner (z-index: 100)
+
+	&--info {
+		background: var(--promotion-info-bg, #1a6ea8);
+		color: var(--promotion-info-fg, #ffffff);
+	}
+
+	&--warning {
+		background: var(--promotion-warning-bg, #92400e);
+		color: var(--promotion-warning-fg, #ffffff);
+	}
+
+	&--success {
+		background: var(--promotion-success-bg, #166534);
+		color: var(--promotion-success-fg, #ffffff);
+	}
+
+	&--danger {
+		background: var(--promotion-danger-bg, #991b1b);
+		color: var(--promotion-danger-fg, #ffffff);
+	}
+
+	&--promo {
+		background: var(--promotion-promo-bg, #5b21b6);
+		color: var(--promotion-promo-fg, #ffffff);
+	}
+
+	&__image {
+		flex-shrink: 0;
+		height: 28px;
+		width: auto;
+		object-fit: contain;
+	}
+
+	&__content {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		flex: 0 1 auto;
+		text-align: center;
+	}
+
+	&__title {
+		font-weight: 700;
+		white-space: nowrap;
+	}
+
+	&__message {
+		flex: 0 1 auto;
+	}
+
+	&__link {
+		flex-shrink: 0;
+		font-weight: 700;
+		text-decoration: underline;
+		color: inherit;
+		white-space: nowrap;
+
+		&:hover {
+			opacity: 0.85;
+		}
+	}
+
+	&__close {
+		position: absolute;
+		right: 0.75rem;
+		top: 50%;
+		transform: translateY(-50%);
+		background: transparent;
+		border: none;
+		color: inherit;
+		font-size: 1.25rem;
+		line-height: 1;
+		cursor: pointer;
+		padding: 0 0.25rem;
+		opacity: 0.8;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+}
+
+.mg-promotion-slide-enter-active,
+.mg-promotion-slide-leave-active {
+	transition: max-height 0.25s ease, opacity 0.25s ease;
+	overflow: hidden;
+}
+
+.mg-promotion-slide-enter-from,
+.mg-promotion-slide-leave-to {
+	max-height: 0;
+	opacity: 0;
+}
+
+.mg-promotion-slide-enter-to,
+.mg-promotion-slide-leave-from {
+	max-height: 60px;
+	opacity: 1;
+}
+</style>

package/composables/useLogout.ts

@@ -0,0 +1,42 @@
+import { default as AuthService } from "../services/authService";
+
+export function useLogout() {
+	const authStore = useAuthStore();
+	const runtimeConfig = useRuntimeConfig();
+	const accountsBaseUrl = runtimeConfig.public.mgSharedUi?.accountsBaseUrl || runtimeConfig.public.accountsBaseUrl;
+
+	const performLogout = async (redirectTo?: string) => {
+		try {
+			await AuthService.logout();
+		} catch {
+			// continue with cleanup even if server call fails
+		}
+
+		// Clear auth state
+		authStore.clearUser();
+		authStore.$reset();
+
+		// Clear cookies client-side
+		if (typeof document !== "undefined") {
+			const cookiesToClear = ["oauth_token", "browser_id", "mundo_gamer_network_session", "XSRF-TOKEN"];
+			cookiesToClear.forEach((name) => {
+				document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+				document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=${window.location.hostname};`;
+				document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.${window.location.hostname};`;
+			});
+		}
+
+		// Clear localStorage auth data
+		if (typeof localStorage !== "undefined") {
+			["accessToken", "userData", "userAbility"].forEach((key) => {
+				localStorage.removeItem(key);
+			});
+		}
+
+		// Redirect
+		const target = redirectTo || `${accountsBaseUrl}/login`;
+		window.location.href = target;
+	};
+
+	return { performLogout };
+}

package/composables/useMgCheckout.ts

@@ -0,0 +1,287 @@
+import { ref, reactive, provide, inject, computed } from "vue";
+import type { AxiosInstance } from "axios";
+import { usePaymentMethods } from "./usePaymentMethods";
+import type { PaymentMethod } from "./usePaymentMethods";
+
+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: {
+    id: number;
+    name: string;
+    description?: string;
+    slug?: string;
+    image_url?: string;
+  };
+}
+
+export interface CartData {
+  items: CartItem[];
+  original_total: number;
+  total_with_discount: number;
+  total_discount?: number;
+  formatted_original_total?: string;
+  formatted_total_with_discount?: string;
+  formatted_total_discount?: string;
+  discount_coupon?: any;
+  discount_coupon_code?: string;
+}
+
+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;
+  };
+}
+
+const CHECKOUT_KEY = "mg-checkout-instance";
+
+export function useMgCheckout(httpService: AxiosInstance) {
+  // Payment methods (dynamic from backend)
+  const paymentMethods = usePaymentMethods(httpService);
+
+  // Cart state
+  const cart = ref<CartData | null>(null);
+  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);
+
+  // Guest state
+  const guestEmail = ref("");
+  const emailError = ref("");
+
+  // 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;
+    } catch (e: any) {
+      cartError.value = e?.message ?? "Failed to load cart";
+    } finally {
+      cartLoading.value = false;
+    }
+  }
+
+  async function addItem(itemId: number, itemType: string, quantity = 1) {
+    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;
+    } finally {
+      cartLoading.value = false;
+    }
+  }
+
+  async function removeItem(itemId: number, itemType: string, quantity = 1) {
+    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;
+    } finally {
+      cartLoading.value = false;
+    }
+  }
+
+  async function clearCart() {
+    cartLoading.value = true;
+    try {
+      await httpService.post("/shopping-cart/clear");
+      cart.value = null;
+    } finally {
+      cartLoading.value = false;
+    }
+  }
+
+  // Coupon
+  async function applyCoupon(code: string) {
+    couponLoading.value = true;
+    couponError.value = null;
+    try {
+      const res = await httpService.post("/shopping-cart/apply-coupon", {
+        code: code.toUpperCase(),
+      });
+      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;
+      }
+    } catch (e: any) {
+      couponError.value = e?.response?.data?.message ?? "Invalid coupon code";
+    } finally {
+      couponLoading.value = false;
+    }
+  }
+
+  async function removeCoupon() {
+    couponLoading.value = true;
+    try {
+      const res = await httpService.post("/shopping-cart/remove-coupon");
+      cart.value = res.data?.data ?? cart.value;
+      couponInfo.value = null;
+      couponCode.value = "";
+    } finally {
+      couponLoading.value = false;
+    }
+  }
+
+  // Checkout
+  async function checkout(successUrl: string, cancelUrl: string) {
+    if (!termsAccepted.value) {
+      checkoutError.value = "You must accept the terms of use";
+      return null;
+    }
+
+    // Guest email validation
+    if (guestEmail.value && !isValidEmail(guestEmail.value)) {
+      emailError.value = "Please enter a valid email";
+      return null;
+    }
+
+    checkoutLoading.value = true;
+    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;
+      }
+
+      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,
+      };
+
+      // For redirect-based payments (Stripe, PayPal, free), redirect immediately
+      if (
+        checkoutResponse.value.payment_type === "redirect" ||
+        checkoutResponse.value.payment_type === "free"
+      ) {
+        window.location.href = checkoutResponse.value.payer_action;
+      }
+
+      // 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;
+    } finally {
+      checkoutLoading.value = false;
+    }
+  }
+
+  // Computed
+  const hasItems = computed(
+    () => (cart.value?.items?.length ?? 0) > 0
+  );
+
+  const hasDiscount = computed(
+    () =>
+      cart.value != null &&
+      cart.value.original_total !== cart.value.total_with_discount
+  );
+
+  const cartTotal = computed(() => cart.value?.total_with_discount ?? 0);
+  const cartOriginalTotal = computed(() => cart.value?.original_total ?? 0);
+
+  // Helpers
+  function isValidEmail(email: string): boolean {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  }
+
+  const instance = {
+    // Payment methods
+    paymentMethods,
+
+    // Cart
+    cart,
+    cartLoading,
+    cartError,
+    fetchCart,
+    addItem,
+    removeItem,
+    clearCart,
+    hasItems,
+    hasDiscount,
+    cartTotal,
+    cartOriginalTotal,
+
+    // Coupon
+    couponCode,
+    couponLoading,
+    couponError,
+    couponInfo,
+    applyCoupon,
+    removeCoupon,
+
+    // Guest
+    guestEmail,
+    emailError,
+
+    // Terms
+    termsAccepted,
+
+    // Checkout
+    checkout,
+    checkoutLoading,
+    checkoutResponse,
+    checkoutError,
+  };
+
+  return instance;
+}
+
+export type MgCheckoutInstance = ReturnType<typeof useMgCheckout>;
+
+export function provideMgCheckout(instance: MgCheckoutInstance) {
+  provide(CHECKOUT_KEY, instance);
+}
+
+export function injectMgCheckout(): MgCheckoutInstance | undefined {
+  return inject<MgCheckoutInstance>(CHECKOUT_KEY);
+}

package/composables/useMgUserNotifications.ts

@@ -0,0 +1,122 @@
+import { ref } from "vue";
+import {
+	getAllNotifications,
+	markNotificationAsRead,
+	markAllNotificationsAsRead,
+	deleteNotification,
+} from "../services/notificationsService";
+import type { MgNotification } from "../types";
+
+export function useMgUserNotifications() {
+	const notifications = ref<MgNotification[]>([]);
+	const error = ref<string | null>(null);
+	const loading = ref<boolean>(false);
+	const totalNotifications = ref<number>(0);
+	const page = ref<number>(1);
+	const notificationCount = ref(0);
+
+	const getSystemId = () => {
+		const config = useRuntimeConfig();
+		return config.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID;
+	};
+
+	const getNotifications = async (p: number = 1) => {
+		loading.value = true;
+		try {
+			if (p === 1) {
+				notifications.value = [];
+			}
+
+			const response = await getAllNotifications({
+				"filter[mg_network_system_id]": getSystemId(),
+				sort: "created_at",
+				order: "desc",
+				per_page: 6,
+				page: p,
+			});
+
+			totalNotifications.value = response.data.meta.pagination.total;
+			page.value = response.data.meta.pagination.current_page;
+			notifications.value.push(
+				...response.data.data.map((notification: any) => ({
+					notification_id: notification.data.notification_id || notification.id || null,
+					type: notification.mg_network_system_id,
+					object: notification.data.object || null,
+					id: notification.id || null,
+					slug: notification.data.slug || null,
+					url: notification.data.url || null,
+					title: notification.data.title,
+					message: notification.data.message,
+					image: notification.data.image,
+					read_at: notification.read_at,
+					created_at: notification.created_at_diff,
+				})),
+			);
+
+			getNotificationsUnreadCount();
+		} catch {
+			error.value = "Failed to fetch notifications";
+		} finally {
+			loading.value = false;
+		}
+	};
+
+	const getNotificationsUnreadCount = async () => {
+		const response = await getAllNotifications({
+			"filter[mg_network_system_id]": getSystemId(),
+			"filter[read]": 0,
+			total: 1,
+		});
+		notificationCount.value = response.data.total;
+	};
+
+	const markAsRead = async (notificationId: string) => {
+		try {
+			await markNotificationAsRead(notificationId);
+			notifications.value = notifications.value.map((notification: any) =>
+				notification.id === notificationId
+					? { ...notification, read_at: new Date().toISOString() }
+					: notification,
+			);
+			getNotificationsUnreadCount();
+		} catch {
+			error.value = "Failed to mark notification as read";
+		}
+	};
+
+	const readAll = async () => {
+		try {
+			await markAllNotificationsAsRead();
+			notificationCount.value = 0;
+			notifications.value = notifications.value.map((notification) => ({
+				...notification,
+				read_at: new Date().toISOString(),
+			}));
+		} catch {
+			error.value = "Failed to mark all notifications as read";
+		}
+	};
+
+	const deleteNotificationFunc = async (notificationId: string) => {
+		try {
+			await deleteNotification(notificationId);
+			notifications.value = notifications.value.filter((notification: any) => notification.id !== notificationId);
+			getNotificationsUnreadCount();
+		} catch {
+			error.value = "Failed to delete notification";
+		}
+	};
+
+	return {
+		notifications,
+		error,
+		loading,
+		getNotifications,
+		markAsRead,
+		readAll,
+		totalNotifications,
+		page,
+		notificationCount,
+		deleteNotification: deleteNotificationFunc,
+	};
+}

package/composables/usePaymentMethods.ts

@@ -0,0 +1,75 @@
+import { ref, computed } from "vue";
+import type { AxiosInstance } from "axios";
+
+export interface PaymentMethod {
+  id: number;
+  name: string;
+}
+
+export function usePaymentMethods(httpService: AxiosInstance) {
+  const methods = ref<PaymentMethod[]>([]);
+  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;
+    }
+  }
+
+  const isPix = computed(
+    () => selectedMethod.value.toLowerCase() === "mercadopago"
+  );
+
+  const isStripe = computed(
+    () => selectedMethod.value.toLowerCase() === "stripe"
+  );
+
+  const isPaypal = computed(
+    () => selectedMethod.value.toLowerCase() === "paypal"
+  );
+
+  function selectMethod(name: string) {
+    selectedMethod.value = name.toLowerCase();
+  }
+
+  return {
+    methods,
+    selectedMethod,
+    loading,
+    error,
+    fetchMethods,
+    selectMethod,
+    isPix,
+    isStripe,
+    isPaypal,
+  };
+}