@mundogamernetwork/shared-ui 1.1.96 → 1.2.1

package/components/playtest/moderated/JoinCallPanel.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+// Join-call panel for a scheduled/completed moderated session — surfaces
+// Meeting::meeting_link (eager-loaded server-side via
+// PlaytestModeratedSessionRepository::findWithRelations(), confirmed this
+// session), plus the confirm/no-show/cancel actions. NoShow is deliberately
+// NOT exposed here as a tester self-action — markNoShow() is a
+// moderator-facing action in the backend's own doc comments; kept in the
+// service for completeness (per the task list) but this panel only wires
+// confirm/cancel for the tester's own use.
+import { computed } from "vue";
+import type { PlaytestModeratedSession } from "../../../services/playtestTesterService";
+
+const props = defineProps<{
+	session: PlaytestModeratedSession | null;
+	acting?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: "confirm"): void
+	(e: "cancel"): void
+}>();
+
+const canJoin = computed(() => props.session?.status === "scheduled" && !!props.session?.meeting?.meeting_link);
+const canConfirm = computed(() => props.session?.status === "scheduled" && !props.session?.tester_confirmed_at);
+const canCancel = computed(() => props.session?.status === "scheduled");
+
+const scheduledAt = computed(() => (props.session?.scheduled_at ? new Date(props.session.scheduled_at) : null));
+</script>
+
+<template>
+	<div class="join-call-panel">
+		<template v-if="session">
+			<h3 class="join-call-panel__title">{{ session.campaign?.title ?? $t("playtest.moderated.session_title", "Moderated session") }}</h3>
+
+			<p class="join-call-panel__time">{{ scheduledAt?.toLocaleString() }}</p>
+
+			<div v-if="session.tester_confirmed_at" class="join-call-panel__confirmed-badge">
+				<i class="fa-solid fa-circle-check" />
+				{{ $t("playtest.moderated.you_confirmed", "You've confirmed attendance") }}
+			</div>
+
+			<a
+				v-if="canJoin"
+				:href="session.meeting!.meeting_link!"
+				target="_blank"
+				rel="noopener"
+				class="btn primary join-call-panel__join"
+			>
+				{{ $t("playtest.moderated.join_call", "Join call") }}
+			</a>
+			<p v-else-if="session.status === 'scheduled'" class="join-call-panel__no-link">
+				{{ $t("playtest.moderated.link_pending", "The call link will appear here closer to the session.") }}
+			</p>
+
+			<div class="join-call-panel__actions">
+				<button
+					v-if="canConfirm"
+					type="button"
+					class="btn secondary"
+					:disabled="acting"
+					@click="emit('confirm')"
+				>
+					{{ $t("playtest.moderated.confirm_attendance", "Confirm attendance") }}
+				</button>
+				<button
+					v-if="canCancel"
+					type="button"
+					class="btn secondary join-call-panel__cancel"
+					:disabled="acting"
+					@click="emit('cancel')"
+				>
+					{{ $t("playtest.moderated.cancel_session", "Cancel") }}
+				</button>
+			</div>
+		</template>
+
+		<p v-else class="join-call-panel__empty">
+			{{ $t("playtest.moderated.no_session", "No session selected.") }}
+		</p>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.join-call-panel {
+	padding: 20px;
+	border: 1px solid var(--button-secondary-default-bg, #2a2a2a);
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+
+	&__title {
+		font-size: 16px;
+		font-weight: 700;
+		color: var(--card-article-title, #fff);
+		margin: 0;
+	}
+
+	&__time {
+		font-size: 13px;
+		color: var(--secondary-info-fg, #aaa);
+		margin: 0;
+	}
+
+	&__confirmed-badge {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 12px;
+		color: #8ac53d;
+	}
+
+	&__join {
+		width: fit-content;
+	}
+
+	&__no-link {
+		font-size: 12px;
+		color: var(--secondary-info-fg, #888);
+	}
+
+	&__actions {
+		display: flex;
+		gap: 8px;
+	}
+
+	&__cancel {
+		color: var(--danger, #e53935);
+	}
+
+	&__empty {
+		font-size: 13px;
+		color: var(--secondary-info-fg, #888);
+	}
+}
+</style>

package/components/playtest/moderated/SessionCard.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+// Card for a single moderated slot (claimable) or an already-booked session
+// (status-aware actions: confirm/cancel/no-show). Dual-purpose by design —
+// consuming pages (slot browse vs. my-sessions list) pass whichever shape
+// they have; `variant` picks the right action set.
+import { computed } from "vue";
+import type { PlaytestModeratedSlot, PlaytestModeratedSession } from "../../../services/playtestTesterService";
+
+const props = defineProps<{
+	slot?: PlaytestModeratedSlot;
+	session?: PlaytestModeratedSession;
+	variant: "slot" | "session";
+	claiming?: boolean;
+	acting?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: "claim", slotId: number): void
+	(e: "confirm", sessionId: number): void
+	(e: "cancel", sessionId: number): void
+}>();
+
+const startsAt = computed(() => {
+	const raw = props.variant === "slot" ? props.slot?.starts_at : props.session?.scheduled_at;
+	return raw ? new Date(raw) : null;
+});
+
+const formattedDate = computed(() => startsAt.value?.toLocaleString() ?? "");
+
+const durationMinutes = computed(() =>
+	props.variant === "slot" ? props.slot?.duration_minutes : props.session?.duration_minutes
+);
+
+const statusLabel = computed(() => props.session?.status ?? null);
+
+const canConfirm = computed(() =>
+	props.variant === "session" &&
+	props.session?.status === "scheduled" &&
+	!props.session?.tester_confirmed_at
+);
+
+const canCancel = computed(() => props.variant === "session" && props.session?.status === "scheduled");
+</script>
+
+<template>
+	<div class="session-card">
+		<div class="session-card__header">
+			<span class="session-card__date">{{ formattedDate }}</span>
+			<span v-if="durationMinutes" class="session-card__duration">{{ durationMinutes }} min</span>
+		</div>
+
+		<div v-if="statusLabel" class="session-card__status" :class="`session-card__status--${statusLabel}`">
+			{{ statusLabel.replace('_', ' ') }}
+			<span v-if="session?.tester_confirmed_at" class="session-card__confirmed">
+				· {{ $t("playtest.moderated.confirmed", "confirmed") }}
+			</span>
+		</div>
+
+		<div class="session-card__actions">
+			<button
+				v-if="variant === 'slot'"
+				type="button"
+				class="btn primary"
+				:disabled="claiming"
+				@click="emit('claim', slot!.id)"
+			>
+				{{ $t("playtest.moderated.claim_slot", "Claim this slot") }}
+			</button>
+
+			<template v-else>
+				<button
+					v-if="canConfirm"
+					type="button"
+					class="btn primary"
+					:disabled="acting"
+					@click="emit('confirm', session!.id)"
+				>
+					{{ $t("playtest.moderated.confirm_attendance", "Confirm attendance") }}
+				</button>
+				<button
+					v-if="canCancel"
+					type="button"
+					class="btn secondary"
+					:disabled="acting"
+					@click="emit('cancel', session!.id)"
+				>
+					{{ $t("playtest.moderated.cancel_session", "Cancel") }}
+				</button>
+			</template>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.session-card {
+	padding: 14px 16px;
+	background: var(--bg-app-badge, #1a1a1a);
+	border: 1px solid var(--button-secondary-default-bg, #2a2a2a);
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+
+	&__header {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+	}
+
+	&__date {
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--text-primary, #fff);
+	}
+
+	&__duration {
+		font-size: 12px;
+		color: var(--secondary-info-fg, #aaa);
+	}
+
+	&__status {
+		display: inline-flex;
+		width: fit-content;
+		font-size: 11px;
+		font-weight: 700;
+		text-transform: uppercase;
+		padding: 2px 8px;
+		color: var(--secondary-info-fg, #aaa);
+		border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
+
+		&--scheduled { color: var(--primary, #D297FF); border-color: var(--primary, #D297FF); }
+		&--completed { color: #8ac53d; border-color: #8ac53d; }
+		&--no_show,
+		&--cancelled { color: var(--danger, #e53935); border-color: var(--danger, #e53935); }
+	}
+
+	&__confirmed {
+		text-transform: none;
+		font-weight: 400;
+	}
+
+	&__actions {
+		display: flex;
+		gap: 8px;
+	}
+}
+</style>