@mundogamernetwork/shared-ui 1.0.0

package/components/pricing/MgPricingCard.vue

@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { Plan, PlanPricing } from "../../composables/useSubscription";
+
+const props = defineProps<{
+  plan: Plan;
+  billingPeriod: "monthly" | "annual";
+  currentPlanSlug?: string | null;
+  paymentGateway?: string;
+  monthlyPeriodId?: number;
+  annualPeriodId?: number;
+  currencySymbol?: string;
+  locale?: string;
+}>();
+
+const emit = defineEmits<{
+  subscribe: [pricingId: number, planSlug: string];
+  contact: [];
+}>();
+
+const MONTHLY_ID = props.monthlyPeriodId ?? 4;
+const ANNUAL_ID = props.annualPeriodId ?? 7;
+
+const pricing = computed<PlanPricing | undefined>(() => {
+  const pricings = props.plan.plan_pricings?.data ?? [];
+  const periodId = props.billingPeriod === "monthly" ? MONTHLY_ID : ANNUAL_ID;
+  return pricings.find(
+    (p) => (p.payment_period?.id ?? p.payment_period_id) === periodId
+  );
+});
+
+const isCurrentPlan = computed(
+  () => props.currentPlanSlug === props.plan.slug
+);
+
+const isEnterprise = computed(() => props.plan.trial_days === 0);
+
+const formattedPrice = computed(() => {
+  if (!pricing.value) return "";
+  const val = pricing.value.value;
+  if (isEnterprise.value && val === 0) return null;
+  const symbol = props.currencySymbol ?? pricing.value.currency?.symbol ?? "$";
+  return `${symbol}${Number(val).toFixed(2)}`;
+});
+
+const periodLabel = computed(() => {
+  if (props.billingPeriod === "annual") return "/yr";
+  return "/mo";
+});
+
+function handleCta() {
+  if (isEnterprise.value) {
+    emit("contact");
+    return;
+  }
+  if (pricing.value) {
+    emit("subscribe", pricing.value.id, props.plan.slug);
+  }
+}
+</script>
+
+<template>
+  <div
+    class="mg-pricing-card"
+    :class="{
+      'mg-pricing-card--popular': plan.popular,
+      'mg-pricing-card--current': isCurrentPlan,
+    }"
+  >
+    <div v-if="plan.popular" class="mg-pricing-card__badge">
+      {{ $t?.("pricing.popular") ?? "Most Popular" }}
+    </div>
+
+    <h3 class="mg-pricing-card__name">{{ plan.name }}</h3>
+
+    <p v-if="plan.description" class="mg-pricing-card__description">
+      {{ plan.description }}
+    </p>
+
+    <div class="mg-pricing-card__price">
+      <template v-if="formattedPrice">
+        <span class="price-value">{{ formattedPrice }}</span>
+        <span class="price-period">{{ periodLabel }}</span>
+      </template>
+      <template v-else>
+        <span class="price-custom">{{ $t?.("pricing.custom") ?? "Custom" }}</span>
+      </template>
+    </div>
+
+    <div v-if="plan.trial_days && plan.trial_days > 0" class="mg-pricing-card__trial">
+      {{ $t?.("pricing.trial", { days: plan.trial_days }) ?? `${plan.trial_days}-day free trial` }}
+    </div>
+
+    <button
+      class="mg-pricing-card__cta"
+      :class="{ 'mg-pricing-card__cta--current': isCurrentPlan }"
+      :disabled="isCurrentPlan"
+      @click="handleCta"
+    >
+      <template v-if="isCurrentPlan">
+        {{ $t?.("pricing.current_plan") ?? "Current Plan" }}
+      </template>
+      <template v-else-if="isEnterprise">
+        {{ $t?.("pricing.contact_sales") ?? "Contact Sales" }}
+      </template>
+      <template v-else>
+        {{ $t?.("pricing.subscribe") ?? "Subscribe Now" }}
+      </template>
+    </button>
+
+    <div v-if="plan.plan_benefits?.data?.length" class="mg-pricing-card__features">
+      <div
+        v-for="benefit in plan.plan_benefits.data"
+        :key="benefit.id"
+        class="feature-item"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.5">
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+        <span>{{ benefit.localized_name ?? benefit.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mg-pricing-card {
+  display: flex;
+  flex-direction: column;
+  padding: 32px 24px;
+  border: 1px solid var(--inactive, #e5e7eb);
+  border-radius: 12px;
+  background: var(--body-bg-card, #fff);
+  position: relative;
+  transition: border-color 0.2s;
+
+  &:hover {
+    border-color: var(--active, #9ca3af);
+  }
+
+  &--popular {
+    border-color: #4f46e5;
+    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.1);
+  }
+
+  &--current {
+    border-color: #22c55e;
+  }
+
+  &__badge {
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 4px 16px;
+    background: #4f46e5;
+    color: #fff;
+    font-size: 11px;
+    font-weight: 600;
+    border-radius: 12px;
+    white-space: nowrap;
+  }
+
+  &__name {
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--active, #111827);
+    margin: 0 0 8px;
+  }
+
+  &__description {
+    font-size: 13px;
+    color: var(--inactive, #6b7280);
+    line-height: 1.5;
+    margin: 0 0 20px;
+  }
+
+  &__price {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+    margin-bottom: 4px;
+  }
+
+  &__trial {
+    font-size: 12px;
+    color: #22c55e;
+    margin-bottom: 20px;
+  }
+
+  &__cta {
+    width: 100%;
+    height: 44px;
+    border: none;
+    border-radius: 8px;
+    background: #4f46e5;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+    margin-bottom: 24px;
+
+    &:hover:not(:disabled) { background: #4338ca; }
+    &:disabled { opacity: 0.5; cursor: not-allowed; }
+
+    &--current {
+      background: #22c55e;
+    }
+  }
+
+  &__features {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+
+.price-value {
+  font-size: 36px;
+  font-weight: 800;
+  color: var(--active, #111827);
+}
+
+.price-period {
+  font-size: 14px;
+  color: var(--inactive, #6b7280);
+}
+
+.price-custom {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--active, #111827);
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--active, #374151);
+
+  svg { flex-shrink: 0; }
+}
+</style>

package/components/ui/Header/MgMessageCard.vue

@@ -0,0 +1,147 @@
+<template>
+	<article class="message-card" :class="{ read: chat.unread_messages_count === 0 }">
+		<div class="infos">
+			<div class="align-circle" @click="openChat()">
+				<img :src="getUserAvatar" alt="" width="48" height="48" />
+				<div class="online-circle" :class="getShowStatus()"></div>
+			</div>
+			<div class="description" @click="openChat()">
+				<div class="title">{{ getName }}</div>
+				<p>
+					{{ isAuthor ? $t("message_component.message_time_ago_you") : $t("message_component.message_time_ago") }}
+					{{ getTimeAgo }}
+				</p>
+			</div>
+			<div class="action-bar">
+				<div class="unread-circle" v-if="chat.unread_messages_count > 0"></div>
+			</div>
+		</div>
+	</article>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import type { MgUserStatus } from "../../../types";
+
+const props = defineProps({
+	chat: {
+		type: Object,
+		required: true,
+		default: () => ({}),
+	},
+});
+
+const getUserAvatar = computed(() => {
+	return props.chat?.users?.[0]?.avatar_url || "/imgs/default.jpg";
+});
+
+const getName = computed(() => {
+	return props.chat?.users?.[0]?.nickname || "";
+});
+
+const getTimeAgo = computed(() => {
+	return props.chat?.last_message?.created_at_diff || "";
+});
+
+const isAuthor = computed(() => {
+	return props.chat?.last_message?.user_is_author || false;
+});
+
+const getShowStatus = (): string => {
+	const status: MgUserStatus | undefined = props.chat?.users?.[0]?.user_status?.[0];
+	if (!status || status.hiddenstatus) return "offline";
+	return status.online ? "online" : "offline";
+};
+
+const emit = defineEmits(["show-message"]);
+
+const openChat = () => {
+	emit("show-message", props.chat.id);
+};
+</script>
+
+<style lang="scss" scoped>
+.message-card {
+	display: flex;
+	padding: 8px;
+	align-items: center;
+	gap: 8px;
+	cursor: pointer;
+	background-color: var(--header-ui-config-hover);
+
+	&.read {
+		background-color: var(--chat-bg, var(--card-article-bg));
+	}
+
+	.infos {
+		display: flex;
+		gap: 8px;
+		flex: 1 0 0;
+		align-items: center;
+		padding: 8px;
+
+		.align-circle {
+			position: relative;
+
+			img {
+				max-width: 48px;
+				height: 48px;
+				object-fit: cover;
+				border-radius: 100%;
+			}
+
+			.online-circle {
+				width: 12px;
+				height: 12px;
+				border-radius: 100%;
+				position: absolute;
+				right: 4px;
+				bottom: 0;
+				border: 3px solid var(--body-bg-card);
+
+				&.online {
+					background-color: #42ff00;
+				}
+
+				&.offline {
+					background-color: #ff0000;
+				}
+			}
+		}
+
+		.description {
+			font-size: 14px;
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			padding: 8px;
+
+			.title {
+				font-size: 14px;
+				font-weight: 400;
+				color: var(--text-primary-color);
+			}
+
+			p {
+				font-size: 12px;
+				color: #aaa;
+				margin-bottom: 0;
+			}
+		}
+
+		.action-bar {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.unread-circle {
+				width: 8px;
+				height: 8px;
+				background-color: var(--highlight-color);
+				border-radius: 100%;
+				margin: 8px;
+			}
+		}
+	}
+}
+</style>