@mundogamernetwork/shared-ui 1.0.0

package/pages/careers.vue

@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+definePageMeta({ layout: "default" });
+
+const institutionalStore = useInstitutionalStore();
+const { career, country, department } = storeToRefs(institutionalStore);
+
+const config = useRuntimeConfig();
+const systemId = config.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID;
+
+const selectedCountry = ref("");
+const selectedDepartment = ref("");
+const currentPage = ref(1);
+const perPage = 10;
+
+const showModal = ref(false);
+const modalMessage = ref("");
+const closeModal = () => {
+	showModal.value = false;
+};
+
+async function fetchCareers() {
+	try {
+		const params: any = {
+			filter: {
+				status: 1,
+				platform_id: systemId,
+			},
+			sort: "created_at",
+			order: "desc",
+			per_page: perPage,
+			page: currentPage.value,
+		};
+		if (selectedCountry.value) params.filter.country_id = selectedCountry.value;
+		if (selectedDepartment.value) params.filter.operational_area_id = selectedDepartment.value;
+
+		await institutionalStore.fetchCareer(params);
+	} catch (error: any) {
+		modalMessage.value = error.response?.data?.message ?? "Could not load careers";
+		showModal.value = true;
+	}
+}
+
+async function fetchFilters() {
+	try {
+		await Promise.all([
+			institutionalStore.fetchCountry({ per_page: "all" }),
+			institutionalStore.fetchDepartment({ per_page: "all" }),
+		]);
+	} catch {
+		// silent
+	}
+}
+
+function applyFilters() {
+	currentPage.value = 1;
+	fetchCareers();
+}
+
+function changePage(page: number) {
+	currentPage.value = page;
+	fetchCareers();
+}
+
+onMounted(async () => {
+	fetchCareers();
+	fetchFilters();
+});
+</script>
+
+<template>
+	<div id="careers" class="container careers">
+		<section>
+			<div class="header">
+				<div>
+					<h1 class="title-4">{{ $t("more.careers.title") }}</h1>
+					<p>{{ $t("more.careers.subtitle") }}</p>
+				</div>
+			</div>
+			<div class="container">
+				<div class="row">
+					<div class="col-8 offset-2">
+						<div class="filters">
+							<select v-model="selectedCountry" @change="applyFilters">
+								<option value="">{{ $t("more.careers.all_countries") }}</option>
+								<option
+									v-for="c in country?.data?.data"
+									:key="c.id"
+									:value="c.id"
+								>
+									{{ c.localized_name || c.name }}
+								</option>
+							</select>
+							<select v-model="selectedDepartment" @change="applyFilters">
+								<option value="">{{ $t("more.careers.all_departments") }}</option>
+								<option
+									v-for="d in department?.data?.data"
+									:key="d.id"
+									:value="d.id"
+								>
+									{{ d.localized_name || d.name }}
+								</option>
+							</select>
+						</div>
+
+						<div v-if="career.status === 'pending'" class="loading">
+							<p>{{ $t("components.loading") }}</p>
+						</div>
+
+						<div v-else-if="career.data && career.data.length > 0">
+							<div
+								v-for="item in career.data"
+								:key="item.id"
+								class="career-card"
+							>
+								<div class="career-card__header">
+									<h3>{{ item.localized_title }}</h3>
+									<div class="career-card__tags">
+										<span v-if="item.methodology" class="tag">{{ item.methodology }}</span>
+										<span v-if="item.type" class="tag">{{ item.type }}</span>
+										<span v-if="item.category" class="tag">{{ item.category }}</span>
+									</div>
+								</div>
+								<p class="career-card__description">{{ item.localized_short_description }}</p>
+								<div class="career-card__footer">
+									<span v-if="item.country">{{ item.country.localized_name || item.country.name }}</span>
+									<span v-if="item.operational_area">{{ item.operational_area.localized_name || item.operational_area.name }}</span>
+								</div>
+							</div>
+
+							<div v-if="career.data.meta" class="pagination-controls">
+								<button
+									:disabled="currentPage <= 1"
+									@click="changePage(currentPage - 1)"
+								>
+									{{ $t("components.previous") }}
+								</button>
+								<span>{{ currentPage }} / {{ career.data.meta.last_page || 1 }}</span>
+								<button
+									:disabled="currentPage >= (career.data.meta.last_page || 1)"
+									@click="changePage(currentPage + 1)"
+								>
+									{{ $t("components.next") }}
+								</button>
+							</div>
+						</div>
+
+						<div v-else class="no-data">
+							{{ $t("more.careers.no_data") }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+			<div class="modal-content">
+				<p class="modal-message">{{ modalMessage }}</p>
+				<button class="modal-close-btn" @click="closeModal">
+					{{ $t("more.contact.message_popup.btn_close") }}
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.careers {
+	color: var(--inactive);
+	font-size: 0.875rem;
+
+	.header {
+		position: relative;
+		height: 200px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 0.875rem;
+		margin-bottom: 2rem;
+
+		& > div {
+			width: 480px;
+			text-align: center;
+		}
+
+		&:before {
+			content: " ";
+			display: block;
+			position: absolute;
+			background: url("@/assets/images/bg-careers.png") no-repeat center center / cover;
+			width: 100%;
+			height: 100%;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: -1;
+		}
+	}
+
+	.filters {
+		display: flex;
+		gap: 16px;
+		margin-bottom: 24px;
+
+		select {
+			flex: 1;
+			height: 40px;
+			padding: 0 12px;
+			border: 1px solid var(--search-bar-border-color);
+			background: var(--search-bar-bg);
+			color: var(--search-bar-fg);
+			font-size: 14px;
+			outline: none;
+		}
+	}
+
+	.career-card {
+		background-color: var(--chip-background-2);
+		padding: 16px;
+		margin-bottom: 16px;
+
+		&__header {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+			margin-bottom: 8px;
+
+			h3 {
+				font-size: 16px;
+				font-weight: 600;
+				color: var(--card-cover-title);
+			}
+		}
+
+		&__tags {
+			display: flex;
+			gap: 8px;
+
+			.tag {
+				font-size: 12px;
+				padding: 2px 8px;
+				background: var(--chip-text);
+				color: var(--chip-background-2);
+			}
+		}
+
+		&__description {
+			font-size: 14px;
+			line-height: 20px;
+			margin-bottom: 12px;
+		}
+
+		&__footer {
+			display: flex;
+			gap: 16px;
+			font-size: 12px;
+			color: var(--secondary-info-fg);
+		}
+	}
+
+	.no-data {
+		text-align: center;
+		padding: 32px;
+		color: var(--secondary-info-fg);
+	}
+
+	.pagination-controls {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: 20px;
+		gap: 16px;
+
+		button {
+			padding: 8px 15px;
+			background-color: var(--chip-background-2);
+			color: var(--card-cover-title);
+			border: 1px solid var(--search-bar-border-color);
+			cursor: pointer;
+			font-size: 14px;
+
+			&:disabled {
+				opacity: 0.5;
+				cursor: default;
+			}
+		}
+	}
+}
+
+.modal-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1000;
+
+	.modal-content {
+		background-color: #0a0a0a;
+		padding: 2rem;
+		max-width: 500px;
+		border-radius: 8px;
+		text-align: center;
+	}
+
+	.modal-message {
+		margin-bottom: 1.5rem;
+		font-size: 1.1rem;
+		color: #ffffff;
+	}
+
+	.modal-close-btn {
+		padding: 0.5rem 1rem;
+		border: 1px solid #060606;
+		border-radius: 4px;
+		background-color: #060606;
+		color: #ffffff;
+		cursor: pointer;
+
+		&:hover {
+			border-color: cyan;
+		}
+	}
+}
+</style>

package/pages/contact.vue

@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { createMessage } from "../services/contactService";
+
+definePageMeta({ layout: "default" });
+
+const locale = useNuxtApp().$i18n.locale;
+const config = useRuntimeConfig();
+const systemId = config.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID;
+
+const contactStore = useContactStore();
+const { country, subject } = storeToRefs(contactStore);
+
+onMounted(async () => {
+	contactStore.fetchCountry({ filter: { enabled: 1 }, sort: "name", order: "asc", per_page: "all", lang: locale.value });
+	contactStore.fetchSubject({ sort: "id", order: "asc", per_page: "all", lang: locale.value });
+});
+
+const initialFormData = {
+	name: "",
+	email: "",
+	subject_id: "",
+	language_slug: locale.value,
+	country_id: "",
+	message: "",
+	privacy_policy: 1,
+	origin_network_id: systemId,
+	status: 0,
+};
+const formData = ref({ ...initialFormData });
+
+const maxChars = 1200;
+const remainingChars = computed(() => maxChars - formData.value.message.length);
+const handleMessageInput = (event: Event) => {
+	const target = event.target as HTMLTextAreaElement;
+	if (target.value.length >= maxChars) {
+		target.value = target.value.substring(0, maxChars);
+		formData.value.message = target.value;
+	}
+};
+
+const showModal = ref(false);
+const modalMessage = ref("");
+const closeModal = () => {
+	showModal.value = false;
+};
+
+interface InputError {
+	status: boolean;
+	error: string;
+}
+
+const inputErrors = ref<Record<string, InputError>>({
+	email: { status: false, error: "" },
+	name: { status: false, error: "" },
+	message: { status: false, error: "" },
+	subject_id: { status: false, error: "" },
+	country_id: { status: false, error: "" },
+});
+
+watchEffect(() => { if (formData.value.email) inputErrors.value.email.status = false; });
+watchEffect(() => { if (formData.value.name) inputErrors.value.name.status = false; });
+watchEffect(() => { if (formData.value.message) inputErrors.value.message.status = false; });
+watchEffect(() => { if (formData.value.subject_id) inputErrors.value.subject_id.status = false; });
+watchEffect(() => { if (formData.value.country_id) inputErrors.value.country_id.status = false; });
+
+const submitForm = async () => {
+	try {
+		const data = {
+			...formData.value,
+			subject_id: Number(formData.value.subject_id),
+			country_id: Number(formData.value.country_id),
+		};
+
+		await createMessage(data);
+		formData.value = { ...initialFormData };
+		modalMessage.value = String($t("more.contact.message_popup.success") || "Your message was successfully sent!");
+		showModal.value = true;
+		for (const key in inputErrors.value) {
+			inputErrors.value[key] = { status: false, error: "" };
+		}
+	} catch (error: any) {
+		if (error.response?.status === 422) {
+			for (const key in inputErrors.value) {
+				inputErrors.value[key] = { status: false, error: "" };
+			}
+			const errors = error.response.data.errors;
+			for (const key in errors) {
+				if (key in inputErrors.value) {
+					inputErrors.value[key] = { status: true, error: errors[key].join(", ") };
+				}
+			}
+		} else {
+			modalMessage.value = String($t("more.contact.message_popup.error") || "There was an error sending your message. Please try again.");
+			showModal.value = true;
+		}
+	}
+};
+
+const { $t } = useNuxtApp().$i18n;
+</script>
+
+<template>
+	<div class="container contact" id="contact">
+		<section>
+			<div class="header">
+				<div>
+					<h1 class="title-4">{{ $t("more.contact.title") }}</h1>
+					<p>{{ $t("more.contact.subtitle") }}</p>
+				</div>
+			</div>
+			<div class="container">
+				<div class="row">
+					<div class="col-12">
+						<h6 class="title-section">{{ $t("more.contact.subtitle_2") }}</h6>
+					</div>
+					<div class="col-12 col-md-6 offset-md-3">
+						<form class="contact-form" @submit.prevent="submitForm">
+							<div class="form-group" :class="{ error: inputErrors.name.status }">
+								<label>{{ $t("more.contact.name") }}</label>
+								<input v-model="formData.name" type="text" :placeholder="$t('more.contact.name')" />
+								<span v-if="inputErrors.name.status" class="error-msg">{{ inputErrors.name.error }}</span>
+							</div>
+
+							<div class="form-group" :class="{ error: inputErrors.email.status }">
+								<label>{{ $t("more.contact.email") }}</label>
+								<input v-model="formData.email" type="email" :placeholder="$t('more.contact.email')" />
+								<span v-if="inputErrors.email.status" class="error-msg">{{ inputErrors.email.error }}</span>
+							</div>
+
+							<div class="form-group" :class="{ error: inputErrors.subject_id.status }">
+								<label>{{ $t("more.contact.subject") }}</label>
+								<select v-model="formData.subject_id">
+									<option value="">{{ $t("more.contact.select_subject") }}</option>
+									<option
+										v-for="s in subject?.data?.data"
+										:key="s.id"
+										:value="s.id"
+									>
+										{{ s.localized_name || s.name }}
+									</option>
+								</select>
+								<span v-if="inputErrors.subject_id.status" class="error-msg">{{ inputErrors.subject_id.error }}</span>
+							</div>
+
+							<div class="form-group" :class="{ error: inputErrors.country_id.status }">
+								<label>{{ $t("more.contact.country") }}</label>
+								<select v-model="formData.country_id">
+									<option value="">{{ $t("more.contact.select_country") }}</option>
+									<option
+										v-for="c in country?.data?.data"
+										:key="c.id"
+										:value="c.id"
+									>
+										{{ c.localized_name || c.name }}
+									</option>
+								</select>
+								<span v-if="inputErrors.country_id.status" class="error-msg">{{ inputErrors.country_id.error }}</span>
+							</div>
+
+							<div class="form-group" :class="{ error: inputErrors.message.status }">
+								<label>{{ $t("more.contact.message_title") }}</label>
+								<textarea
+									v-model="formData.message"
+									:placeholder="$t('more.contact.message_title')"
+									rows="5"
+									@input="handleMessageInput"
+								></textarea>
+								<div class="char-counter">{{ remainingChars }} {{ $t("more.contact.characters_remaining") }}</div>
+								<span v-if="inputErrors.message.status" class="error-msg">{{ inputErrors.message.error }}</span>
+							</div>
+
+							<button type="submit" class="btn-contact">
+								{{ $t("more.contact.btn_send_message") }}
+							</button>
+						</form>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+			<div class="modal-content">
+				<p class="modal-message">{{ modalMessage }}</p>
+				<button class="modal-close-btn" @click="closeModal">
+					{{ $t("more.contact.message_popup.btn_close") }}
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.contact {
+	color: var(--inactive);
+	font-size: 0.875rem;
+
+	.header {
+		position: relative;
+		height: 200px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-bottom: 2rem;
+
+		& > div {
+			width: 480px;
+			text-align: center;
+		}
+
+		&:before {
+			content: " ";
+			display: block;
+			position: absolute;
+			background: url("@/assets/images/bg-contact.png") no-repeat center center / cover;
+			width: 100%;
+			height: 100%;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: -1;
+		}
+	}
+
+	.title-section {
+		text-align: center;
+		font-size: 16px;
+		font-weight: 600;
+		color: var(--card-cover-title);
+		margin-bottom: 24px;
+	}
+
+	.contact-form {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+		.form-group {
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+
+			label {
+				font-size: 14px;
+				font-weight: 500;
+				color: var(--card-cover-title);
+			}
+
+			input, select, textarea {
+				padding: 8px 12px;
+				border: 1px solid var(--search-bar-border-color);
+				background: var(--search-bar-bg);
+				color: var(--search-bar-fg);
+				font-size: 14px;
+				outline: none;
+
+				&:focus {
+					border-color: var(--chip-text);
+				}
+			}
+
+			textarea {
+				resize: vertical;
+			}
+
+			&.error input,
+			&.error select,
+			&.error textarea {
+				border-color: #d9534f;
+			}
+
+			.error-msg {
+				font-size: 12px;
+				color: #d9534f;
+			}
+
+			.char-counter {
+				font-size: 12px;
+				color: var(--secondary-info-fg);
+				text-align: right;
+			}
+		}
+
+		.btn-contact {
+			padding: 10px 24px;
+			background: var(--chip-text);
+			color: var(--chip-background-2);
+			border: none;
+			font-size: 14px;
+			font-weight: 600;
+			cursor: pointer;
+			align-self: flex-start;
+
+			&:hover {
+				opacity: 0.9;
+			}
+		}
+	}
+}
+
+.modal-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1000;
+
+	.modal-content {
+		background-color: #0a0a0a;
+		padding: 2rem;
+		max-width: 500px;
+		border-radius: 8px;
+		text-align: center;
+	}
+
+	.modal-message {
+		margin-bottom: 1.5rem;
+		font-size: 1.1rem;
+		color: #ffffff;
+	}
+
+	.modal-close-btn {
+		padding: 0.5rem 1rem;
+		border: 1px solid #060606;
+		border-radius: 4px;
+		background-color: #060606;
+		color: #ffffff;
+		cursor: pointer;
+
+		&:hover {
+			border-color: cyan;
+		}
+	}
+}
+</style>