@mundogamernetwork/shared-ui 1.0.0

package/components/PressKit/VideoPlayer.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+interface Video {
+	id: number;
+	title: string;
+	url: string;
+	type?: string;
+	is_primary?: boolean;
+	sort_order?: number;
+}
+
+interface Props {
+	videos: Video[];
+}
+
+const props = defineProps<Props>();
+
+const activeVideo = ref<Video | null>(null);
+
+onMounted(() => {
+	const primary = props.videos.find(v => v.is_primary);
+	activeVideo.value = primary || props.videos[0] || null;
+});
+
+function getEmbedUrl(url: string) {
+	const ytMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/);
+	if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}`;
+	const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
+	if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
+	return url;
+}
+
+function formatType(type?: string) {
+	if (!type) return '';
+	return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+}
+</script>
+
+<template>
+	<div v-if="videos.length" class="video-player">
+		<h3 class="section-title">{{ $t('press_kit.videos') }}</h3>
+
+		<div v-if="activeVideo" class="video-embed">
+			<iframe
+				:src="getEmbedUrl(activeVideo.url)"
+				frameborder="0"
+				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+				allowfullscreen
+			/>
+		</div>
+
+		<div v-if="videos.length > 1" class="video-list">
+			<div
+				v-for="video in videos"
+				:key="video.id"
+				:class="['video-item', { active: activeVideo?.id === video.id }]"
+				@click="activeVideo = video"
+			>
+				<MGIcon icon="play-circle" />
+				<div class="video-meta">
+					<span class="video-title">{{ video.title }}</span>
+					<span v-if="video.type" class="video-type">{{ formatType(video.type) }}</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.video-player {
+	.section-title {
+		font-size: 1.2rem;
+		font-weight: 700;
+		color: #fff;
+		margin-bottom: 16px;
+	}
+
+	.video-embed {
+		position: relative;
+		width: 100%;
+		aspect-ratio: 16 / 9;
+		overflow: hidden;
+		background: #000;
+		margin-bottom: 16px;
+
+		iframe {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.video-list {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.video-item {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 12px 16px;
+		background: #191B20;
+		border: 1px solid #1e2028;
+		cursor: pointer;
+		transition: background 0.2s;
+		color: #aaa;
+
+		&:hover {
+			background: #22252b;
+		}
+
+		&.active {
+			background: #22252b;
+			border-left: 3px solid var(--color-primary, #FDB215);
+			color: #fff;
+		}
+	}
+
+	.video-meta {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.video-title {
+		font-size: 0.9rem;
+		font-weight: 500;
+	}
+
+	.video-type {
+		font-size: 0.75rem;
+		color: #888;
+	}
+}
+</style>

package/components/checkout/MgCartItemList.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import type { CartItem } from "../../composables/useMgCheckout";
+
+defineProps<{
+  items: CartItem[];
+  loading?: boolean;
+  editable?: boolean;
+  currencySymbol?: string;
+}>();
+
+const emit = defineEmits<{
+  "add-item": [id: number, type: string];
+  "remove-item": [id: number, type: string];
+  "clear-all": [];
+}>();
+</script>
+
+<template>
+  <div class="mg-cart-items">
+    <div class="mg-cart-items__header">
+      <span class="col-item">{{ $t?.("checkout.cart.item") ?? "Item" }}</span>
+      <span class="col-qty">{{ $t?.("checkout.cart.qty") ?? "Qty" }}</span>
+      <span class="col-value">{{ $t?.("checkout.cart.value") ?? "Value" }}</span>
+    </div>
+
+    <div v-if="loading" class="mg-cart-items__loading">
+      <div v-for="i in 2" :key="i" class="skeleton-row">
+        <div class="skeleton-block" style="width: 60%; height: 14px"></div>
+        <div class="skeleton-block" style="width: 20%; height: 14px"></div>
+      </div>
+    </div>
+
+    <div v-else-if="items.length === 0" class="mg-cart-items__empty">
+      <p>{{ $t?.("checkout.cart.empty") ?? "Your cart is empty" }}</p>
+    </div>
+
+    <template v-else>
+      <div
+        v-for="item in items"
+        :key="`${item.item_type}-${item.item_id}`"
+        class="mg-cart-item"
+      >
+        <div class="col-item">
+          <img
+            v-if="item.item?.image_url"
+            :src="item.item.image_url"
+            :alt="item.item?.name"
+            class="mg-cart-item__img"
+          />
+          <span class="mg-cart-item__name">{{ item.item?.name ?? "Product" }}</span>
+        </div>
+
+        <div class="col-qty">
+          <template v-if="editable">
+            <button class="qty-btn" @click="emit('remove-item', item.item_id, item.item_type)">-</button>
+            <span class="qty-value">{{ item.quantity }}</span>
+            <button class="qty-btn" @click="emit('add-item', item.item_id, item.item_type)">+</button>
+          </template>
+          <span v-else class="qty-value">{{ item.quantity }}</span>
+        </div>
+
+        <div class="col-value">
+          <span v-if="item.discount > 0" class="original-price">
+            {{ currencySymbol ?? "$" }}{{ (item.price * item.quantity).toFixed(2) }}
+          </span>
+          <span class="final-price">
+            {{ currencySymbol ?? "$" }}{{ (item.price_with_discount * item.quantity).toFixed(2) }}
+          </span>
+        </div>
+      </div>
+
+      <div v-if="editable" class="mg-cart-items__footer">
+        <button class="clear-btn" @click="emit('clear-all')">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+          </svg>
+          {{ $t?.("checkout.cart.clear") ?? "Clear all" }}
+        </button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mg-cart-items {
+  width: 100%;
+
+  &__header {
+    display: flex;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--inactive, #e5e7eb);
+    margin-bottom: 8px;
+
+    span {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: var(--inactive, #6b7280);
+      letter-spacing: 0.5px;
+    }
+  }
+
+  &__loading {
+    padding: 16px 0;
+
+    .skeleton-row {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 12px;
+    }
+  }
+
+  &__empty {
+    padding: 24px 0;
+    text-align: center;
+    color: var(--inactive, #6b7280);
+    font-size: 14px;
+  }
+
+  &__footer {
+    padding-top: 8px;
+    border-top: 1px solid var(--inactive, #e5e7eb);
+  }
+}
+
+.col-item { flex: 5; display: flex; align-items: center; gap: 8px; }
+.col-qty  { flex: 3; display: flex; align-items: center; justify-content: center; gap: 6px; }
+.col-value { flex: 4; display: flex; flex-direction: column; align-items: flex-end; }
+
+.mg-cart-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--inactive, #f3f4f6);
+
+  &__img {
+    width: 36px;
+    height: 36px;
+    object-fit: contain;
+    border-radius: 4px;
+  }
+
+  &__name {
+    font-size: 13px;
+    color: var(--active, #111827);
+    line-height: 1.3;
+  }
+}
+
+.qty-btn {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--inactive, #d1d5db);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--active, #111827);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+
+  &:hover {
+    border-color: #4f46e5;
+    color: #4f46e5;
+  }
+}
+
+.qty-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--active, #111827);
+  min-width: 20px;
+  text-align: center;
+}
+
+.original-price {
+  font-size: 11px;
+  color: var(--inactive, #9ca3af);
+  text-decoration: line-through;
+}
+
+.final-price {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--active, #111827);
+}
+
+.clear-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  color: #ee3831;
+  font-size: 12px;
+  cursor: pointer;
+  padding: 4px 0;
+
+  &:hover { opacity: 0.8; }
+}
+
+.skeleton-block {
+  background: var(--inactive, #e5e7eb);
+  border-radius: 4px;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>

package/components/checkout/MgCartSummary.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps<{
+  total: number | string;
+  originalTotal?: number | string;
+  hasDiscount?: boolean;
+  currencySymbol?: string;
+  couponInfo?: { name: string; discount: number; code: string } | null;
+  couponLoading?: boolean;
+  couponError?: string | null;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "apply-coupon": [code: string];
+  "remove-coupon": [];
+}>();
+
+const couponInput = ref("");
+
+function handleApply() {
+  if (couponInput.value.trim()) {
+    emit("apply-coupon", couponInput.value.trim());
+  }
+}
+</script>
+
+<template>
+  <div class="mg-cart-summary">
+    <!-- Coupon Input -->
+    <div class="mg-cart-summary__coupon">
+      <div v-if="couponInfo" class="coupon-applied">
+        <span class="coupon-badge">
+          {{ couponInfo.code }} (-{{ couponInfo.discount }}%)
+        </span>
+        <button class="coupon-remove" @click="emit('remove-coupon')">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+      <div v-else class="coupon-form">
+        <input
+          v-model="couponInput"
+          type="text"
+          :placeholder="$t?.('checkout.coupon.placeholder') ?? 'Discount code'"
+          :disabled="disabled || couponLoading"
+          class="coupon-input"
+          @keyup.enter="handleApply"
+        />
+        <button
+          class="coupon-btn"
+          :disabled="!couponInput.trim() || disabled || couponLoading"
+          @click="handleApply"
+        >
+          <span v-if="couponLoading" class="spinner"></span>
+          <template v-else>{{ $t?.("checkout.coupon.apply") ?? "Apply" }}</template>
+        </button>
+      </div>
+      <small v-if="couponError" class="coupon-error">{{ couponError }}</small>
+    </div>
+
+    <!-- Totals -->
+    <div class="mg-cart-summary__totals">
+      <div v-if="hasDiscount" class="total-row">
+        <span>{{ $t?.("checkout.summary.original") ?? "Subtotal" }}</span>
+        <span class="original-total">{{ currencySymbol ?? "$" }}{{ Number(originalTotal).toFixed(2) }}</span>
+      </div>
+      <div v-if="hasDiscount" class="total-row discount-row">
+        <span>{{ $t?.("checkout.summary.discount") ?? "Discount" }}</span>
+        <span class="discount-value">-{{ currencySymbol ?? "$" }}{{ (Number(originalTotal) - Number(total)).toFixed(2) }}</span>
+      </div>
+      <div class="total-row total-row--final">
+        <span>{{ $t?.("checkout.summary.total") ?? "Total" }}</span>
+        <span class="final-total">{{ currencySymbol ?? "$" }}{{ Number(total).toFixed(2) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mg-cart-summary {
+  width: 100%;
+
+  &__coupon {
+    margin-bottom: 16px;
+  }
+
+  &__totals {
+    border-top: 1px solid var(--inactive, #e5e7eb);
+    padding-top: 12px;
+  }
+}
+
+.coupon-form {
+  display: flex;
+  gap: 8px;
+}
+
+.coupon-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid var(--inactive, #d1d5db);
+  border-radius: 6px;
+  font-size: 13px;
+  background: transparent;
+  color: var(--active, #111827);
+
+  &::placeholder { color: var(--inactive, #9ca3af); }
+  &:focus { outline: none; border-color: #4f46e5; }
+}
+
+.coupon-btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  background: #4f46e5;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+  &:hover:not(:disabled) { background: #4338ca; }
+}
+
+.coupon-applied {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.coupon-badge {
+  display: inline-flex;
+  padding: 4px 10px;
+  border-radius: 4px;
+  background: rgba(79, 70, 229, 0.1);
+  color: #4f46e5;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.coupon-remove {
+  background: none;
+  border: none;
+  color: var(--inactive, #6b7280);
+  cursor: pointer;
+  padding: 2px;
+
+  &:hover { color: #ee3831; }
+}
+
+.coupon-error {
+  display: block;
+  color: #ee3831;
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.total-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 0;
+  font-size: 13px;
+  color: var(--inactive, #6b7280);
+
+  &--final {
+    padding-top: 10px;
+    margin-top: 4px;
+    border-top: 1px solid var(--inactive, #e5e7eb);
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--active, #111827);
+  }
+}
+
+.original-total {
+  text-decoration: line-through;
+}
+
+.discount-value {
+  color: #22c55e;
+  font-weight: 500;
+}
+
+.final-total {
+  color: var(--active, #111827);
+}
+
+.spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  display: inline-block;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+</style>