@mundogamernetwork/shared-ui 1.1.16 → 1.1.18

package/components/ui/MgAppInstallBanner.vue

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+const colorMode = useColorMode();
+const store = useAppInstallBannerStore();
+const locale = useNuxtApp().$i18n.locale;
+
+onMounted(async () => {
+	await store.fetchBanner();
+});
+
+const banner = computed(() => store.banner);
+const isVisible = computed(() => store.isVisible);
+
+const logoUrl = computed(() => {
+	if (!banner.value) return null;
+	return colorMode.preference === "light"
+		? banner.value.logo_light_url
+		: (banner.value.logo_dark_url ?? banner.value.logo_light_url);
+});
+
+const qrCodeUrl = computed(() => {
+	if (!banner.value) return null;
+	return colorMode.preference === "light"
+		? (banner.value.qr_code_url ?? banner.value.qr_code_url_dark)
+		: (banner.value.qr_code_url_dark ?? banner.value.qr_code_url);
+});
+
+const hasLogo = computed(() => !!logoUrl.value);
+const hasQrCode = computed(() => !!qrCodeUrl.value);
+
+function handleClose() {
+	store.dismiss();
+}
+</script>
+
+<template>
+	<div v-if="isVisible && banner" class="mg-app-install-banner">
+		<div class="mg-app-install-banner__container" :class="colorMode.preference">
+			<div v-if="hasLogo" class="mg-app-install-banner__logo" :class="colorMode.preference">
+				<img :src="logoUrl!" :alt="$t('more.app.modal_popup.title')" />
+			</div>
+
+			<div class="mg-app-install-banner__content">
+				<p class="mg-app-install-banner__title">{{ $t("more.app.modal_popup.title") }}</p>
+				<p class="mg-app-install-banner__text">{{ $t("more.app.modal_popup.text") }}</p>
+				<div class="mg-app-install-banner__actions">
+					<nuxt-link :href="`/${locale}/app`" class="mg-app-install-banner__link">
+						<span class="mg-app-install-banner__link-big">{{ $t("more.app.modal_popup.action") }}</span>
+						<span class="mg-app-install-banner__link-small">{{ $t("more.app.modal_popup.action") }}</span>
+					</nuxt-link>
+
+					<!-- Apple App Store icon -->
+					<a v-if="banner.ios_url" :href="banner.ios_url" target="_blank" rel="noopener" aria-label="App Store">
+						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
+							<g clip-path="url(#mg-app-banner-apple)">
+								<path d="M9.78425 0.507006C9.7545 0.473756 8.68262 0.520131 7.74987 1.53251C6.81712 2.54401 6.96062 3.70426 6.98162 3.73401C7.00262 3.76376 8.31162 3.81013 9.14725 2.63326C9.98287 1.45638 9.814 0.541131 9.78425 0.507006ZM12.684 10.7734C12.642 10.6894 10.6496 9.69363 10.8351 7.77913C11.0206 5.86376 12.3007 5.33876 12.3209 5.28188C12.341 5.22501 11.7985 4.59063 11.2236 4.26951C10.8015 4.0431 10.3344 3.91339 9.856 3.88976C9.7615 3.88713 9.43337 3.80663 8.75875 3.99126C8.31425 4.11288 7.31237 4.50663 7.03675 4.52238C6.76025 4.53813 5.93775 4.06563 5.05312 3.94051C4.487 3.83113 3.88675 4.05513 3.45712 4.22751C3.02837 4.39901 2.21287 4.88726 1.64237 6.18488C1.07187 7.48163 1.37025 9.53613 1.58375 10.1749C1.79725 10.8128 2.13062 11.8584 2.69762 12.6214C3.20162 13.4824 3.87012 14.08 4.14925 14.283C4.42837 14.486 5.21587 14.6208 5.76187 14.3416C6.20112 14.0721 6.99387 13.9173 7.30712 13.9286C7.6195 13.94 8.2355 14.0634 8.86637 14.4003C9.366 14.5726 9.8385 14.5009 10.3119 14.3084C10.7852 14.115 11.4704 13.3818 12.2701 11.8951C12.5737 11.2039 12.712 10.8303 12.684 10.7734Z" :fill="colorMode.preference === 'light' ? '#0D0D0D' : 'white'" />
+							</g>
+							<defs>
+								<clipPath id="mg-app-banner-apple"><rect width="14" height="14" fill="white" transform="translate(0 0.5)" /></clipPath>
+							</defs>
+						</svg>
+					</a>
+
+					<!-- Google Play icon -->
+					<a v-if="banner.android_url" :href="banner.android_url" target="_blank" rel="noopener" aria-label="Google Play">
+						<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
+							<g clip-path="url(#mg-app-banner-play)">
+								<path d="M8.85047 8.46295C10.372 7.62749 11.5255 6.99088 11.6249 6.94138C11.943 6.77226 12.2714 6.3246 11.6249 5.97688C11.4162 5.86753 10.2923 5.25074 8.85047 4.45532L6.85162 6.47399L8.85047 8.4629V8.46295Z" fill="#FFD900" />
+								<path d="M6.85173 6.47388L0.487183 12.8884C0.636573 12.9082 0.805229 12.8686 1.00407 12.7593C1.42154 12.5307 5.84711 10.1139 8.85057 8.4633L6.85173 6.47388Z" fill="#3378DD" />
+								<path d="M6.85167 6.47393L8.85052 4.4652C8.85052 4.4652 1.45167 0.427338 1.00402 0.188978C0.835359 0.0890876 0.646359 0.0594157 0.477234 0.0890876L6.85167 6.47393Z" fill="#00EE76" />
+								<path d="M6.85177 6.47396L0.477328 0.0891113C0.218625 0.148924 0 0.377486 0 0.844924V12.1327C0 12.5605 0.169172 12.8686 0.487219 12.8984L6.85177 6.47396Z" fill="#00D3FF" />
+							</g>
+							<defs>
+								<clipPath id="mg-app-banner-play"><rect width="12" height="12.8438" fill="white" transform="translate(0 0.078125)" /></clipPath>
+							</defs>
+						</svg>
+					</a>
+				</div>
+			</div>
+
+			<img
+				v-if="hasQrCode"
+				class="mg-app-install-banner__qrcode"
+				:src="qrCodeUrl!"
+				width="70"
+				height="70"
+				alt="QR Code"
+			/>
+
+			<button
+				type="button"
+				class="mg-app-install-banner__close"
+				@click="handleClose"
+				:aria-label="$t('common.close')"
+			>
+				<MGIcon icon="close" />
+			</button>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.mg-app-install-banner {
+	position: absolute;
+	bottom: 0.5rem;
+	right: 2rem;
+	z-index: 10;
+
+	@media (max-width: 430px) {
+		left: 0;
+		right: 0;
+		bottom: 0;
+		width: 100vw;
+		padding: 0 1rem;
+	}
+}
+
+.mg-app-install-banner__container {
+	min-height: 8rem;
+	border: 1px solid var(--banner-border-color);
+	border-bottom: none;
+	background: var(--banner-bg);
+	display: flex;
+	position: relative;
+	transition: border ease 0.3s, background ease 0.3s;
+
+	@media (max-width: 430px) {
+		min-height: 6.25rem;
+	}
+}
+
+.mg-app-install-banner__logo {
+	height: 8rem;
+	width: 8rem;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: background ease 0.3s;
+
+	&.light {
+		background: linear-gradient(135deg, #eaedf0 0%, #c9d2dd 100%);
+	}
+
+	&.dark {
+		background: linear-gradient(135deg, rgba(28, 57, 92, 0.1) 0%, #1c395c 100%);
+	}
+
+	img {
+		width: 70%;
+		height: auto;
+		object-fit: contain;
+	}
+
+	@media (max-width: 430px) {
+		width: 5rem;
+		height: 5rem;
+		margin: 0.63rem 0;
+		margin-left: 0.88rem;
+	}
+}
+
+.mg-app-install-banner__content {
+	display: flex;
+	flex-direction: column;
+	padding: 1.25rem 1.5rem 1.25rem 1rem;
+	flex: 1;
+
+	@media (max-width: 430px) {
+		padding-top: 1rem;
+		padding-bottom: 1.12rem;
+	}
+}
+
+.mg-app-install-banner__title {
+	margin: 0;
+	font-size: 0.875rem;
+	color: var(--section-title-fg);
+	transition: color ease 0.3s;
+}
+
+.mg-app-install-banner__text {
+	margin: 0.5rem 0 0;
+	color: var(--text-secondary-color);
+	font-size: 0.75rem;
+
+	@media (max-width: 430px) {
+		margin-top: 0;
+	}
+}
+
+.mg-app-install-banner__actions {
+	display: flex;
+	align-items: center;
+	column-gap: 0.5rem;
+	margin-top: 0.75rem;
+
+	@media (max-width: 430px) {
+		margin-top: 1rem;
+	}
+}
+
+.mg-app-install-banner__link {
+	font-size: 0.75rem;
+	color: var(--banner-link-color);
+	transition: color ease 0.3s;
+
+	.mg-app-install-banner__link-big {
+		display: block;
+	}
+
+	.mg-app-install-banner__link-small {
+		display: none;
+	}
+
+	@media (max-width: 430px) {
+		.mg-app-install-banner__link-big {
+			display: none;
+		}
+
+		.mg-app-install-banner__link-small {
+			display: block;
+		}
+	}
+}
+
+.mg-app-install-banner__qrcode {
+	margin: 0.88rem 1.25rem 0.88rem 0;
+	height: 6.25rem;
+	width: 6.25rem;
+	object-fit: contain;
+
+	@media (max-width: 430px) {
+		display: none;
+	}
+}
+
+.mg-app-install-banner__close {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 2.125rem;
+	height: 2.125rem;
+	border-radius: 100%;
+	background: var(--banner-button-bg);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transform: translate(50%, -50%);
+	border: none;
+	cursor: pointer;
+	transition: background ease 0.3s;
+
+	i {
+		color: var(--section-title-fg);
+		transition: color ease 0.3s;
+	}
+}
+</style>

package/components/ui/MgCampaignBannerCarousel.vue

@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import { fetchCampaignBanners, clickCampaignBanner } from "../../services/campaignBannersService";
+
+const props = withDefaults(
+	defineProps<{
+		platform: string;
+		page: string;
+		interval?: number;
+	}>(),
+	{ interval: 5000 },
+);
+
+const { locale } = useI18n();
+const isMobile = ref(false);
+const currentIndex = ref(0);
+let timer: ReturnType<typeof setInterval> | null = null;
+
+const { data: banners } = await useAsyncData(
+	`mg-campaign-banners-${props.platform}-${props.page}-${locale.value}`,
+	() => fetchCampaignBanners(props.platform, props.page, locale.value),
+	{ default: () => [], lazy: true, server: false },
+);
+
+const hasBanners = computed(() => (banners.value?.length ?? 0) > 0);
+const currentBanner = computed(() => banners.value?.[currentIndex.value] ?? null);
+
+const imageUrl = computed(() => {
+	if (!currentBanner.value) return "";
+	return isMobile.value && currentBanner.value.url_image_mobile
+		? currentBanner.value.url_image_mobile
+		: currentBanner.value.url_image;
+});
+
+const startCarousel = () => {
+	if ((banners.value?.length ?? 0) <= 1) return;
+	timer = setInterval(() => {
+		currentIndex.value = (currentIndex.value + 1) % (banners.value?.length ?? 1);
+	}, props.interval);
+};
+
+const handleClick = () => {
+	if (!currentBanner.value) return;
+	clickCampaignBanner(currentBanner.value.id);
+	window.open(currentBanner.value.link, "_blank");
+};
+
+const goTo = (index: number) => {
+	currentIndex.value = index;
+	if (timer) clearInterval(timer);
+	startCarousel();
+};
+
+const checkMobile = () => {
+	isMobile.value = window.innerWidth < 768;
+};
+
+onMounted(() => {
+	checkMobile();
+	window.addEventListener("resize", checkMobile);
+	startCarousel();
+});
+
+onUnmounted(() => {
+	if (timer) clearInterval(timer);
+	window.removeEventListener("resize", checkMobile);
+});
+</script>
+
+<template>
+	<div v-if="hasBanners" class="mg-campaign-banner-carousel mb-4">
+		<div
+			class="mg-campaign-banner-slide"
+			role="button"
+			tabindex="0"
+			@click="handleClick"
+			@keydown.enter="handleClick"
+		>
+			<img
+				:src="imageUrl"
+				:alt="currentBanner?.title || ''"
+				class="mg-campaign-banner-img img-fluid"
+				loading="eager"
+				decoding="async"
+			/>
+		</div>
+		<div v-if="(banners?.length ?? 0) > 1" class="mg-campaign-banner-indicators">
+			<button
+				v-for="(_, i) in banners"
+				:key="i"
+				type="button"
+				:class="{ active: i === currentIndex }"
+				@click.stop="goTo(i)"
+			/>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.mg-campaign-banner-carousel {
+	position: relative;
+	width: 100%;
+	overflow: hidden;
+}
+
+.mg-campaign-banner-slide {
+	cursor: pointer;
+	display: block;
+	width: 100%;
+}
+
+.mg-campaign-banner-img {
+	display: block;
+	width: 100%;
+	height: auto;
+	object-fit: cover;
+}
+
+.mg-campaign-banner-indicators {
+	position: absolute;
+	bottom: 8px;
+	left: 50%;
+	transform: translateX(-50%);
+	display: flex;
+	gap: 6px;
+	align-items: center;
+
+	button {
+		width: 8px;
+		height: 8px;
+		padding: 0;
+		border: 0;
+		background: rgba(255, 255, 255, 0.5);
+		cursor: pointer;
+		transition: background 0.2s;
+
+		&.active {
+			background: #fff;
+		}
+	}
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -40,4 +40,4 @@
     "nuxt": "^3.15.4",
     "typescript": "^5.0.0"
   }
-}
+}