@mundogamernetwork/shared-ui 1.0.0

package/components/indie-wall/SupportStepper.vue

@@ -0,0 +1,372 @@
+<script setup lang="ts">
+import StepGoal from './StepGoal.vue'
+import StepPackage from './StepPackage.vue'
+import StepBlock from './StepBlock.vue'
+import StepCustomize from './StepCustomize.vue'
+import StepPay from './StepPay.vue'
+import { supportIndieWall } from '../../services/indieWallService'
+
+const props = defineProps<{
+	wall: any
+	goals: any[]
+	tiers: any[]
+	supporters: any[]
+	mgcBalance: number
+	initialGoalId?: number | null
+	initialTierId?: number | null
+	initialSelection?: { x: number; y: number; w: number; h: number } | null
+	startStep?: 1 | 2 | 3 | 4 | 5
+	drawer?: boolean
+}>()
+
+const emit = defineEmits<{
+	(e: 'close'): void
+	(e: 'support-success'): void
+}>()
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+
+// ── Step state ─────────────────────────────────────────────────────────────
+const step = ref<1 | 2 | 3 | 4 | 5>(props.startStep ?? 1)
+
+// ── Selections ─────────────────────────────────────────────────────────────
+const selectedGoalId = ref<number | null>(props.initialGoalId ?? null)
+const selectedTierId = ref<number | null>(props.initialTierId ?? null)
+const customQuantity = ref<number>(1)
+const pixelCount = ref<number>(1)
+const selection = ref<{ x: number; y: number; w: number; h: number } | null>(props.initialSelection ?? null)
+
+const customForm = ref({
+	title: '',
+	message: '',
+	background_color: '#FDB215',
+	image_url: '',
+	link: '',
+	is_anonymous: false,
+	guest_email: '',
+	guest_name: '',
+})
+
+const gatewayProvider = ref<'stripe' | 'paypal'>('stripe')
+const processing = ref(false)
+const errorMsg = ref('')
+
+// ── Derived ────────────────────────────────────────────────────────────────
+const selectedGoal = computed(() => props.goals.find(g => g.id === selectedGoalId.value) || null)
+const selectedTier = computed(() => props.tiers.find(t => t.id === selectedTierId.value) || null)
+
+// If pre-set tier, ensure pixelCount matches
+watch(() => props.initialTierId, (id) => {
+	if (id) {
+		const t = props.tiers.find(t => t.id === id)
+		if (t) {
+			selectedTierId.value = id
+			pixelCount.value = t.pixel_count
+		}
+	}
+}, { immediate: true })
+
+// ── Navigation ─────────────────────────────────────────────────────────────
+function next() {
+	let nextStep = step.value + 1
+	// Skip goals step if there are no goals
+	if (nextStep === 2 && props.goals.length === 0) nextStep = 3
+	if (nextStep <= 5) step.value = nextStep as 1 | 2 | 3 | 4 | 5
+}
+
+function back() {
+	let prevStep = step.value - 1
+	// Skip goals step if there are no goals
+	if (prevStep === 2 && props.goals.length === 0) prevStep = 1
+	if (prevStep >= 1) step.value = prevStep as 1 | 2 | 3 | 4 | 5
+}
+
+function close() {
+	emit('close')
+}
+
+// ── Step 1 handlers ────────────────────────────────────────────────────────
+function selectGoal(goalId: number | null) {
+	selectedGoalId.value = goalId
+}
+
+// ── Step 2 handlers ────────────────────────────────────────────────────────
+function selectTier(tierId: number | null, pc: number) {
+	selectedTierId.value = tierId
+	pixelCount.value = pc
+	// Reset selection if size changed
+	if (selection.value && (selection.value.w * selection.value.h) !== pc) {
+		selection.value = null
+	}
+}
+
+function setCustomQuantity(qty: number) {
+	customQuantity.value = qty
+}
+
+function updatePixelCount(qty: number) {
+	const clamped = Math.max(1, Math.floor(qty || 1))
+	if (clamped === pixelCount.value) return
+	// Free quantity → drop tier link and reset position so step 3 re-suggests
+	selectedTierId.value = null
+	customQuantity.value = clamped
+	pixelCount.value = clamped
+	selection.value = null
+}
+
+// ── Step 3 handlers ────────────────────────────────────────────────────────
+function selectArea(rect: { x: number; y: number; w: number; h: number } | null) {
+	selection.value = rect
+}
+
+// ── Step 4 handlers ────────────────────────────────────────────────────────
+function updateCustomForm(form: typeof customForm.value) {
+	customForm.value = { ...form }
+}
+
+// ── Step 5 / submit ────────────────────────────────────────────────────────
+function setGateway(p: 'stripe' | 'paypal') {
+	gatewayProvider.value = p
+}
+
+async function confirm() {
+	if (!props.wall || !selection.value) return
+
+	errorMsg.value = ''
+	processing.value = true
+	try {
+		const isGuest = !authStore.signedIn
+		const popupSuffix = route.query.popup === '1' ? '&popup=1' : ''
+		// Always return to the mural public page so payment=success handling works
+		// regardless of which page (stream, embed, etc.) triggered the checkout.
+		const locale = useNuxtApp().$i18n.locale.value
+		const slug = props.wall.slug
+		const muralBase = `${window.location.origin}/${locale}/mural/${slug}`
+		const res = await supportIndieWall(props.wall.id, {
+			user_id: authStore.user?.id ?? undefined,
+			guest_email: isGuest ? customForm.value.guest_email : undefined,
+			guest_name: isGuest ? (customForm.value.guest_name || undefined) : undefined,
+			indie_wall_goal_id: selectedGoalId.value,
+			indie_wall_tier_id: selectedTierId.value,
+			pixel_count: pixelCount.value,
+			x: selection.value.x,
+			y: selection.value.y,
+			width: selection.value.w,
+			height: selection.value.h,
+			title: customForm.value.title,
+			message: customForm.value.message,
+			background_color: customForm.value.background_color,
+			image_url: customForm.value.image_url || undefined,
+			link: customForm.value.link || undefined,
+			is_anonymous: customForm.value.is_anonymous,
+			payment_method: 'gateway',
+			gateway_provider: gatewayProvider.value,
+			success_url: `${muralBase}?payment=success${popupSuffix}`,
+			cancel_url: `${muralBase}?payment=cancelled${popupSuffix}`,
+		})
+		const data = res.data?.data || res.data
+		if (data?.payer_action) {
+			try {
+				if (data?.pixel_id) {
+					sessionStorage.setItem('mgn-mural-pending-pixel', String(data.pixel_id))
+					sessionStorage.setItem('mgn-mural-pending-wall', String(props.wall.slug ?? props.wall.id))
+				}
+			} catch { /* sessionStorage may be unavailable */ }
+			window.location.href = data.payer_action
+			return
+		}
+		if (data?.status === 'pending_payment') {
+			errorMsg.value = t('tv.dashboard.indie_wall.error_gateway')
+			return
+		}
+		emit('support-success')
+		emit('close')
+	} catch (err: any) {
+		const apiError = err?.response?.data?.error
+		if (apiError === 'selected_area_occupied') {
+			errorMsg.value = t('tv.dashboard.indie_wall.error_area_occupied')
+			step.value = 3
+			selection.value = null
+		} else {
+			errorMsg.value = apiError
+				|| err?.response?.data?.errors?.pixel_count?.[0]
+				|| err?.response?.data?.errors?.indie_wall_tier_id?.[0]
+				|| err?.message
+				|| t('tv.dashboard.indie_wall.error_save')
+		}
+	} finally {
+		processing.value = false
+	}
+}
+</script>
+
+<template>
+	<div :class="['ss-overlay', { 'ss-overlay--drawer': drawer }]" @click.self="close">
+		<div :class="['ss-modal', { 'ss-modal--drawer': drawer }]">
+			<button class="ss-close" type="button" aria-label="Close" @click="close">×</button>
+
+			<div v-if="wall" class="ss-availability">
+				<span class="ss-availability-label">{{ $t('tv.dashboard.indie_wall.pixels_available') }}:</span>
+				<strong>
+					{{ Math.max(0, (wall.total_pixels || 0) - (wall.used_pixels || 0)) }}
+					/ {{ wall.total_pixels || 0 }}
+				</strong>
+			</div>
+
+			<div class="ss-stepper-bar">
+				<div v-for="n in 5" :key="n" :class="['ss-dot', { active: step >= n, current: step === n }]">
+					<span>{{ n }}</span>
+				</div>
+			</div>
+
+			<div class="ss-body">
+				<StepPackage
+					v-if="step === 1"
+					:tiers="tiers"
+					:selected-tier-id="selectedTierId"
+					:custom-quantity="customQuantity"
+					:pixel-price="Number(wall?.pixel_price || 0)"
+					:currency="wall?.currency || 'USD'"
+					@select-tier="selectTier"
+					@set-custom="setCustomQuantity"
+					@next="next"
+				/>
+
+				<StepGoal
+					v-else-if="step === 2"
+					:goals="goals"
+					:selected-goal-id="selectedGoalId"
+					:currency="wall?.currency || 'USD'"
+					@select="selectGoal"
+					@next="next"
+				/>
+
+				<StepBlock
+					v-else-if="step === 3"
+					:wall="wall"
+					:supporters="supporters"
+					:pixel-count="pixelCount"
+					:selection="selection"
+					@select="selectArea"
+					@update:pixel-count="updatePixelCount"
+					@next="next"
+				/>
+
+				<StepCustomize
+					v-else-if="step === 4"
+					:form="customForm"
+					:is-guest="!authStore.signedIn"
+					:pixel-w="selection?.w ?? 1"
+					:pixel-h="selection?.h ?? 1"
+					@update="updateCustomForm"
+					@next="next"
+				/>
+
+				<StepPay
+					v-else-if="step === 5"
+					:wall="wall"
+					:selected-goal="selectedGoal"
+					:selected-tier="selectedTier"
+					:selection="selection"
+					:form="customForm"
+					:pixel-count="pixelCount"
+					:gateway-provider="gatewayProvider"
+					:processing="processing"
+					:error-msg="errorMsg"
+					@set-gateway="setGateway"
+					@confirm="confirm"
+					@cancel="close"
+				/>
+			</div>
+
+			<div class="ss-footer">
+				<button v-if="step > 1" type="button" class="ss-back" @click="back">
+					← {{ $t('tv.dashboard.indie_wall.step_back') }}
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.ss-overlay {
+	position: fixed; inset: 0;
+	background: rgba(0,0,0,0.72);
+	display: flex; align-items: center; justify-content: center;
+	z-index: 300; padding: 16px;
+}
+
+.ss-modal {
+	background: #191B20; border: 1px solid #272930;
+	padding: 24px; width: 100%; max-width: 600px;
+	max-height: 92vh; overflow-y: auto; position: relative;
+	display: flex; flex-direction: column; gap: 16px;
+}
+
+.ss-close {
+	position: absolute; top: 10px; right: 10px;
+	background: #272930; border: none; color: var(--title-fg, #fff);
+	width: 28px; height: 28px;
+	display: flex; align-items: center; justify-content: center;
+	cursor: pointer; font-size: 1.1rem; line-height: 1;
+}
+
+.ss-availability {
+	display: flex; align-items: center; gap: 6px;
+	font-size: 0.78rem; color: var(--secondary-info-fg, #aaa);
+	background: #13161C; padding: 6px 10px; border: 1px solid #1e2028;
+	strong { color: var(--chip-text, #D297FF); font-weight: 600; }
+}
+
+.ss-stepper-bar { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
+.ss-dot {
+	flex: 1; height: 4px; background: #272930; position: relative;
+	span {
+		position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
+		font-size: 0.65rem; color: var(--secondary-info-fg, #555);
+	}
+	&.active { background: var(--chip-text, #D297FF); }
+	&.current span { color: var(--chip-text, #D297FF); font-weight: 700; }
+}
+
+.ss-body { display: flex; flex-direction: column; }
+.ss-footer { display: flex; justify-content: flex-start; }
+
+.ss-back {
+	background: none; border: none;
+	color: var(--secondary-info-fg, #888);
+	cursor: pointer; font-size: 0.82rem; padding: 6px 0;
+	&:hover { color: var(--title-fg, #fff); }
+}
+
+/* ── Drawer variant ─────────────────────────────────────────── */
+.ss-overlay--drawer {
+	align-items: flex-end;
+	background: rgba(0,0,0,0.5);
+
+	@media (min-width: 768px) {
+		align-items: stretch;
+		justify-content: flex-end;
+	}
+}
+
+.ss-modal--drawer {
+	max-width: 100%;
+	max-height: 88vh;
+	border-top: 2px solid rgba(107,21,172,0.5);
+	border-left: none;
+	border-right: none;
+	border-bottom: none;
+
+	@media (min-width: 768px) {
+		max-width: 440px;
+		max-height: 100vh;
+		height: 100%;
+		border-top: none;
+		border-left: 2px solid rgba(107,21,172,0.5);
+	}
+}
+</style>

package/components/invoices/MgInvoiceDownload.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{
+  invoiceId: string;
+  isPaid: boolean;
+  apiBaseUrl?: string;
+}>();
+
+function downloadPdf() {
+  if (!props.isPaid) return;
+  const base = props.apiBaseUrl ?? "";
+  window.open(`${base}/api/v1/invoices/${props.invoiceId}/pdf`, "_blank");
+}
+</script>
+
+<template>
+  <button
+    v-if="isPaid"
+    class="mg-invoice-download"
+    @click="downloadPdf"
+  >
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="7 10 12 15 17 10" />
+      <line x1="12" y1="15" x2="12" y2="3" />
+    </svg>
+    {{ $t?.("invoice.download") ?? "Download Invoice" }}
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.mg-invoice-download {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border: 1px solid var(--inactive, #d1d5db);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--active, #374151);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    border-color: #4f46e5;
+    color: #4f46e5;
+  }
+}
+</style>

package/components/pricing/MgBillingToggle.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: "monthly" | "annual";
+  yearlyDiscount?: number;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: "monthly" | "annual"];
+}>();
+</script>
+
+<template>
+  <div class="mg-billing-toggle">
+    <button
+      class="toggle-option"
+      :class="{ active: modelValue === 'monthly' }"
+      @click="emit('update:modelValue', 'monthly')"
+    >
+      {{ $t?.("pricing.monthly") ?? "Monthly" }}
+    </button>
+    <button
+      class="toggle-option"
+      :class="{ active: modelValue === 'annual' }"
+      @click="emit('update:modelValue', 'annual')"
+    >
+      {{ $t?.("pricing.annual") ?? "Annual" }}
+      <span v-if="yearlyDiscount" class="discount-badge">
+        -{{ yearlyDiscount }}%
+      </span>
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mg-billing-toggle {
+  display: inline-flex;
+  border: 1px solid var(--inactive, #e5e7eb);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.toggle-option {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  border: none;
+  background: transparent;
+  color: var(--inactive, #6b7280);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &.active {
+    background: #4f46e5;
+    color: #fff;
+  }
+
+  &:hover:not(.active) {
+    background: var(--body-bg-card, #f9fafb);
+  }
+}
+
+.discount-badge {
+  display: inline-flex;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: #22c55e;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+}
+</style>