@mundogamernetwork/shared-ui 1.0.0

package/components/indie-wall/StepPackage.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+const props = defineProps<{
+	tiers: any[]
+	selectedTierId: number | null
+	customQuantity: number
+	pixelPrice: number
+	currency: string
+}>()
+
+const emit = defineEmits<{
+	(e: 'select-tier', tierId: number | null, pixelCount: number): void
+	(e: 'set-custom', qty: number): void
+	(e: 'next'): void
+}>()
+
+const localQty = ref(props.customQuantity || 1)
+
+watch(() => props.customQuantity, (v) => { localQty.value = v })
+
+function pickTier(tier: any) {
+	emit('select-tier', tier.id, tier.pixel_count)
+	emit('next')
+}
+
+function pickCustom() {
+	const qty = Math.max(1, Math.floor(localQty.value || 1))
+	emit('set-custom', qty)
+	emit('select-tier', null, qty)
+	emit('next')
+}
+
+function tierUnavailable(tier: any) {
+	return tier.max_quantity && tier.sold_count >= tier.max_quantity
+}
+</script>
+
+<template>
+	<div class="sw-step">
+		<h3 class="sw-step-title">{{ $t('tv.dashboard.indie_wall.step_package_title') }}</h3>
+		<p class="sw-step-help">{{ $t('tv.dashboard.indie_wall.step_package_help') }}</p>
+
+		<div class="sw-grid">
+			<button
+				v-for="tier in tiers"
+				:key="tier.id"
+				class="sw-card"
+				type="button"
+				:class="{ active: selectedTierId === tier.id }"
+				:disabled="tierUnavailable(tier)"
+				@click="pickTier(tier)"
+			>
+				<img v-if="tier.image_url" :src="tier.image_url" alt="" class="sw-tier-img" />
+				<span class="sw-card-title">{{ tier.name }}</span>
+				<span class="sw-card-price">{{ currency }} {{ Number(tier.price).toFixed(2) }}</span>
+				<span class="sw-card-pixels">{{ tier.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
+				<p v-if="tier.description" class="sw-card-desc">{{ tier.description }}</p>
+				<span v-if="tier.max_quantity" class="sw-card-stock">
+					{{ tier.sold_count }}/{{ tier.max_quantity }} {{ $t('tv.dashboard.indie_wall.sold') }}
+				</span>
+			</button>
+
+			<div class="sw-card sw-custom" :class="{ active: selectedTierId === null && customQuantity > 0 }">
+				<span class="sw-card-title">{{ $t('tv.dashboard.indie_wall.step_package_custom_title') }}</span>
+				<p class="sw-card-desc">{{ $t('tv.dashboard.indie_wall.step_package_custom_desc') }}</p>
+				<div class="sw-custom-row">
+					<input v-model.number="localQty" type="number" min="1" class="sw-custom-input" />
+					<span class="sw-custom-x">×</span>
+					<span class="sw-custom-price">{{ currency }} {{ Number(pixelPrice).toFixed(2) }}</span>
+				</div>
+				<div class="sw-custom-total">
+					= {{ currency }} {{ (Math.max(1, localQty) * pixelPrice).toFixed(2) }}
+				</div>
+				<button type="button" class="sw-custom-cta" @click="pickCustom">
+					{{ $t('tv.dashboard.indie_wall.step_package_custom_cta') }}
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.sw-step { display: flex; flex-direction: column; gap: 12px; }
+.sw-step-title { font-size: 1.05rem; font-weight: 600; color: var(--title-fg, #fff); margin: 0; }
+.sw-step-help { font-size: 0.82rem; color: var(--secondary-info-fg, #aaa); margin: 0 0 4px; }
+
+.sw-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	gap: 8px;
+}
+
+.sw-card {
+	background: #191B20;
+	border: 1px solid #1e2028;
+	padding: 14px;
+	text-align: left;
+	cursor: pointer;
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	color: inherit;
+	font-family: inherit;
+	transition: border-color 0.15s, background 0.15s;
+
+	&:hover:not(:disabled) {
+		border-color: var(--chip-text, #D297FF);
+		background: #1e2028;
+	}
+
+	&.active { border-color: var(--chip-text, #D297FF); background: #1e2028; }
+	&:disabled { opacity: 0.45; cursor: not-allowed; }
+}
+
+.sw-tier-img { width: 100%; height: 80px; object-fit: cover; }
+.sw-card-title { font-size: 0.95rem; font-weight: 600; color: var(--title-fg, #fff); }
+.sw-card-price { font-size: 1.1rem; font-weight: 700; color: var(--chip-text, #D297FF); }
+.sw-card-pixels { font-size: 0.75rem; color: var(--secondary-info-fg, #888); }
+.sw-card-desc { color: var(--secondary-info-fg, #888); font-size: 0.78rem; margin: 0; line-height: 1.4; }
+.sw-card-stock { color: var(--secondary-info-fg, #888); font-size: 0.7rem; }
+
+.sw-custom { border-style: dashed; }
+.sw-custom-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
+.sw-custom-input {
+	width: 70px; height: 32px;
+	background: #13161C; border: 1px solid #272930; color: var(--title-fg, #fff);
+	text-align: center; font-size: 0.85rem;
+	-moz-appearance: textfield;
+	&::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+	&:focus { border-color: var(--chip-text, #D297FF); outline: none; }
+}
+.sw-custom-x { color: var(--secondary-info-fg, #555); }
+.sw-custom-price { color: var(--secondary-info-fg, #888); font-size: 0.85rem; }
+.sw-custom-total { color: var(--chip-text, #D297FF); font-weight: 700; font-size: 0.95rem; }
+.sw-custom-cta {
+	background: var(--chip-text, #D297FF);
+	color: #13161C;
+	border: none;
+	padding: 8px 12px;
+	font-weight: 700;
+	font-size: 0.82rem;
+	cursor: pointer;
+	margin-top: 4px;
+	&:hover { opacity: 0.88; }
+}
+</style>

package/components/indie-wall/StepPay.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+const props = defineProps<{
+	wall: any
+	selectedGoal: any | null
+	selectedTier: any | null
+	selection: { x: number; y: number; w: number; h: number } | null
+	form: {
+		title: string
+		message: string
+		background_color: string
+		image_url: string
+		link: string
+		is_anonymous: boolean
+	}
+	pixelCount: number
+	gatewayProvider: 'stripe' | 'paypal'
+	processing: boolean
+	errorMsg: string
+}>()
+
+const emit = defineEmits<{
+	(e: 'set-gateway', provider: 'stripe' | 'paypal'): void
+	(e: 'confirm'): void
+	(e: 'cancel'): void
+}>()
+
+const total = computed(() => {
+	if (props.selectedTier) return Number(props.selectedTier.price ?? 0)
+	return props.pixelCount * Number(props.wall?.pixel_price ?? 0)
+})
+const agreed = ref(false)
+const agreedRights = ref(false)
+</script>
+
+<template>
+	<div class="sw-step">
+		<h3 class="sw-step-title">{{ $t('tv.dashboard.indie_wall.step_pay_title') }}</h3>
+
+		<div class="sw-summary">
+			<div class="sw-summary-row">
+				<span class="sw-summary-label">{{ $t('tv.dashboard.indie_wall.goals') }}</span>
+				<span class="sw-summary-val">{{ selectedGoal ? selectedGoal.title : $t('tv.dashboard.indie_wall.step_goal_skip_title') }}</span>
+			</div>
+			<div class="sw-summary-row">
+				<span class="sw-summary-label">{{ $t('tv.dashboard.indie_wall.tiers') }}</span>
+				<span class="sw-summary-val">
+					{{ selectedTier ? selectedTier.name : $t('tv.dashboard.indie_wall.step_package_custom_title') }}
+					· {{ pixelCount }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}
+				</span>
+			</div>
+			<div v-if="selection" class="sw-summary-row">
+				<span class="sw-summary-label">{{ $t('tv.dashboard.indie_wall.mural_position') }}</span>
+				<span class="sw-summary-val">({{ selection.x }}, {{ selection.y }}) — {{ selection.w }}×{{ selection.h }}</span>
+			</div>
+			<div class="sw-summary-row sw-summary-preview">
+				<div class="sw-swatch" :style="form.image_url ? '' : { background: form.background_color }">
+					<img v-if="form.image_url" :src="form.image_url" alt="" />
+				</div>
+				<div class="sw-preview-text">
+					<strong>{{ form.is_anonymous ? $t('tv.dashboard.indie_wall.anonymous') : (form.title || '—') }}</strong>
+					<span v-if="form.message">"{{ form.message }}"</span>
+				</div>
+			</div>
+		</div>
+
+		<fieldset class="sw-pay-fieldset">
+			<legend>{{ $t('tv.dashboard.indie_wall.step_pay_method') }}</legend>
+			<label class="sw-pay-option" :class="{ active: gatewayProvider === 'stripe' }">
+				<input
+					type="radio"
+					name="gateway"
+					value="stripe"
+					:checked="gatewayProvider === 'stripe'"
+					@change="emit('set-gateway', 'stripe')"
+				/>
+				<span class="sw-pay-name">{{ $t('tv.dashboard.indie_wall.pay_stripe') }}</span>
+				<span class="sw-pay-meta">{{ $t('tv.dashboard.indie_wall.pay_stripe_meta') }}</span>
+			</label>
+			<label class="sw-pay-option" :class="{ active: gatewayProvider === 'paypal' }">
+				<input
+					type="radio"
+					name="gateway"
+					value="paypal"
+					:checked="gatewayProvider === 'paypal'"
+					@change="emit('set-gateway', 'paypal')"
+				/>
+				<span class="sw-pay-name">{{ $t('tv.dashboard.indie_wall.pay_paypal') }}</span>
+				<span class="sw-pay-meta">{{ $t('tv.dashboard.indie_wall.pay_paypal_meta') }}</span>
+			</label>
+			<label class="sw-pay-option sw-pay-disabled">
+				<input type="radio" name="gateway" value="pix" disabled />
+				<span class="sw-pay-name">{{ $t('tv.dashboard.indie_wall.pay_pix') }}</span>
+				<span class="sw-pay-meta">{{ $t('tv.dashboard.indie_wall.pay_pix_soon') }}</span>
+			</label>
+		</fieldset>
+
+		<div class="sw-total">
+			<span>{{ $t('tv.dashboard.indie_wall.step_pay_total') }}</span>
+			<strong>{{ wall?.currency }} {{ total.toFixed(2) }}</strong>
+		</div>
+
+		<label class="sw-agree">
+			<input v-model="agreed" type="checkbox" />
+			<span>{{ $t('tv.dashboard.indie_wall.pay_agree') }}</span>
+		</label>
+
+		<label class="sw-agree">
+			<input v-model="agreedRights" type="checkbox" />
+			<span>{{ $t('tv.dashboard.indie_wall.pay_agree_rights') }}</span>
+		</label>
+
+		<div v-if="errorMsg" class="sw-error">{{ errorMsg }}</div>
+
+		<div class="sw-actions">
+			<button type="button" class="sw-cancel" :disabled="processing" @click="emit('cancel')">
+				{{ $t('tv.dashboard.indie_wall.cancel') }}
+			</button>
+			<button
+				type="button"
+				class="sw-confirm"
+				:disabled="processing || !agreed || !agreedRights"
+				@click="emit('confirm')"
+			>
+				{{ processing ? '…' : $t('tv.dashboard.indie_wall.confirm_support') }}
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.sw-step { display: flex; flex-direction: column; gap: 10px; }
+.sw-step-title { font-size: 1.05rem; font-weight: 600; color: var(--title-fg, #fff); margin: 0; }
+
+.sw-summary {
+	background: #13161C; border: 1px solid #1e2028;
+	padding: 12px; display: flex; flex-direction: column; gap: 6px;
+}
+.sw-summary-row { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; }
+.sw-summary-label { color: var(--secondary-info-fg, #777); }
+.sw-summary-val { color: var(--title-fg, #fff); }
+.sw-summary-preview { align-items: center; gap: 10px; padding-top: 6px; border-top: 1px solid #1e2028; }
+.sw-swatch {
+	width: 32px; height: 32px; flex-shrink: 0; overflow: hidden;
+	img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
+}
+.sw-preview-text { display: flex; flex-direction: column; flex: 1; }
+.sw-preview-text strong { color: var(--title-fg, #fff); font-size: 0.85rem; }
+.sw-preview-text span { color: var(--secondary-info-fg, #888); font-size: 0.78rem; font-style: italic; }
+
+.sw-pay-fieldset {
+	border: none; padding: 0; margin: 0;
+	display: flex; flex-direction: column; gap: 6px;
+	legend {
+		font-size: 0.78rem; color: var(--secondary-info-fg, #aaa);
+		padding: 0; margin-bottom: 6px;
+	}
+}
+.sw-pay-option {
+	display: grid;
+	grid-template-columns: 18px 1fr auto;
+	align-items: center;
+	gap: 10px;
+	background: #1e2028; border: 1px solid #272930;
+	padding: 10px 12px; cursor: pointer;
+	transition: border-color 0.15s, background 0.15s;
+	&:hover:not(.sw-pay-disabled) { border-color: var(--chip-text, #D297FF); }
+	&.active {
+		border-color: var(--chip-text, #D297FF);
+		background: #272930;
+	}
+	&.sw-pay-disabled { opacity: 0.5; cursor: not-allowed; }
+	input { accent-color: var(--chip-text, #D297FF); }
+}
+.sw-pay-name { font-size: 0.88rem; color: var(--title-fg, #fff); font-weight: 600; }
+.sw-pay-meta { font-size: 0.72rem; color: var(--secondary-info-fg, #888); }
+
+.sw-total {
+	display: flex; justify-content: space-between; align-items: center;
+	padding: 10px 12px; background: #1e2028; border: 1px solid #272930;
+	font-size: 0.85rem; color: var(--secondary-info-fg, #888);
+	strong { color: var(--chip-text, #D297FF); font-size: 1.2rem; }
+}
+
+.sw-error {
+	background: rgba(255,59,48,0.07);
+	border: 1px solid rgba(255,59,48,0.25);
+	color: #ff6b6b; padding: 8px 10px; font-size: 0.8rem;
+}
+
+.sw-agree {
+	display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
+	font-size: 0.78rem; color: var(--secondary-info-fg, #aaa); line-height: 1.4;
+	input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; accent-color: var(--chip-text, #D297FF); }
+}
+
+.sw-actions { display: flex; gap: 8px; }
+.sw-cancel {
+	flex: 1; background: #1e2028; color: var(--secondary-info-fg, #888);
+	border: 1px solid #272930; padding: 10px; cursor: pointer; font-size: 0.85rem;
+	&:hover { color: var(--title-fg, #fff); }
+}
+.sw-confirm {
+	flex: 1; background: var(--chip-text, #D297FF);
+	color: #13161C; border: none; padding: 10px;
+	font-weight: 700; font-size: 0.85rem; cursor: pointer;
+	&:hover { opacity: 0.88; }
+	&:disabled { opacity: 0.4; cursor: not-allowed; }
+}
+</style>