@mundogamernetwork/shared-ui 1.16.27 → 1.17.0

package/components/checkout/MgBillingProfileFields.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue";
+import type { AxiosInstance } from "axios";
+import { useMgBillingProfile } from "../../composables/useMgBillingProfile";
+
+/**
+ * "I need an invoice with company details" — the fiscal block every checkout
+ * needs.
+ *
+ * The data is stored once on the customer's profile and snapshotted onto every
+ * document issued afterwards, so asking here covers the purchase being made,
+ * every renewal of it, and every later one-off purchase too.
+ */
+const props = defineProps<{
+  httpService: AxiosInstance;
+  /** Start expanded regardless of whether a profile already exists. */
+  defaultOpen?: boolean;
+}>();
+
+const emit = defineEmits<{ (e: "change", wanted: boolean): void }>();
+
+const billing = useMgBillingProfile(props.httpService);
+const wanted = ref(props.defaultOpen ?? false);
+
+// A customer who already gave us their details should see them, ticked — not
+// an empty box that reads as the platform having forgotten.
+watch(
+  () => billing.hasData.value,
+  (hasData) => {
+    if (hasData) wanted.value = true;
+  }
+);
+
+watch(wanted, (value) => emit("change", value));
+
+onMounted(billing.load);
+
+/**
+ * Persist the details, if the customer asked for them.
+ *
+ * @returns false only when a requested save actually failed, so a caller can
+ *          hold back the gateway redirect instead of sending the customer off
+ *          with details that were never stored.
+ */
+async function save(): Promise<boolean> {
+  if (!wanted.value) return true;
+  return billing.save();
+}
+
+defineExpose({ save, wanted, profile: billing.profile, hasData: billing.hasData });
+</script>
+
+<template>
+  <div class="mg-billing-profile">
+    <label class="mg-billing-profile__toggle">
+      <input v-model="wanted" type="checkbox" />
+      <span>{{ $t?.("billing_profile.toggle") ?? "I need an invoice with company details" }}</span>
+    </label>
+
+    <div v-show="wanted" class="mg-billing-profile__body">
+      <p class="mg-billing-profile__hint">{{ $t?.("billing_profile.hint") ?? "Saved to your account and used on every invoice from now on, including each renewal." }}</p>
+
+      <div class="mg-billing-profile__grid">
+        <label class="mg-billing-profile__field mg-billing-profile__field--wide">
+          <span>{{ $t?.("billing_profile.company_name") ?? "Company name" }}</span>
+          <input v-model="billing.profile.value.company_name" type="text" />
+        </label>
+        <label class="mg-billing-profile__field mg-billing-profile__field--wide">
+          <span>{{ $t?.("billing_profile.legal_name") ?? "Legal name" }}</span>
+          <input v-model="billing.profile.value.legal_name" type="text" />
+        </label>
+        <label class="mg-billing-profile__field">
+          <span>{{ $t?.("billing_profile.vat_number") ?? "VAT number" }}</span>
+          <input v-model="billing.profile.value.vat_number" type="text" />
+        </label>
+        <label class="mg-billing-profile__field">
+          <span>{{ $t?.("billing_profile.tax_id") ?? "Tax ID" }}</span>
+          <input v-model="billing.profile.value.tax_id" type="text" />
+        </label>
+        <label class="mg-billing-profile__field">
+          <span>{{ $t?.("billing_profile.registration_number") ?? "Registration number" }}</span>
+          <input v-model="billing.profile.value.registration_number" type="text" />
+        </label>
+        <label class="mg-billing-profile__field">
+          <span>{{ $t?.("billing_profile.represented_by") ?? "Represented by (director)" }}</span>
+          <input v-model="billing.profile.value.represented_by" type="text" />
+        </label>
+        <label class="mg-billing-profile__field mg-billing-profile__field--wide">
+          <span>{{ $t?.("billing_profile.address") ?? "Address" }}</span>
+          <input v-model="billing.profile.value.address_line_1" type="text" />
+        </label>
+        <label class="mg-billing-profile__field">
+          <span>{{ $t?.("billing_profile.city") ?? "City" }}</span>
+          <input v-model="billing.profile.value.city" type="text" />
+        </label>
+        <label class="mg-billing-profile__field">
+          <span>{{ $t?.("billing_profile.postal_code") ?? "Postal code" }}</span>
+          <input v-model="billing.profile.value.postal_code" type="text" />
+        </label>
+        <label class="mg-billing-profile__field">
+          <span>{{ $t?.("billing_profile.country") ?? "Country" }}</span>
+          <input v-model="billing.profile.value.country" type="text" />
+        </label>
+      </div>
+
+      <p v-if="billing.error.value" class="mg-billing-profile__error">
+        {{ billing.error.value || $t?.("billing_profile.save_error") ?? "Could not save your billing details. Please try again." }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mg-billing-profile {
+  margin-top: 16px;
+  border-top: 1px solid var(--inactive, #ececec);
+  padding-top: 16px;
+}
+
+.mg-billing-profile__toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.mg-billing-profile__body {
+  margin-top: 14px;
+}
+
+.mg-billing-profile__hint {
+  font-size: 13px;
+  color: var(--inactive-text, #666);
+  margin: 0 0 12px;
+}
+
+.mg-billing-profile__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.mg-billing-profile__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.mg-billing-profile__field--wide {
+  grid-column: 1 / -1;
+}
+
+.mg-billing-profile__field input {
+  border: 1px solid var(--inactive, #d5d5d5);
+  padding: 8px 10px;
+  font-size: 14px;
+  background: var(--bg, #fff);
+  color: var(--active, #111);
+}
+
+.mg-billing-profile__error {
+  margin: 10px 0 0;
+  color: var(--error, #ee3831);
+  font-size: 13px;
+}
+
+@media (max-width: 620px) {
+  .mg-billing-profile__grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/components/keys/KeyBrowser.vue

@@ -69,7 +69,7 @@ async function loadPools() {
   loadingPools.value = true
   try {
     const res = await fetchAvailablePools(queryParams())
-    pools.value = (res as any)?.data ?? []
+    pools.value = (res as any)?.data?.data ?? []
     pools.value.forEach(p => {
       if (!requestForms.value[p.id]) {
         requestForms.value[p.id] = { platform_ids: [], description: '' }
@@ -88,7 +88,7 @@ async function loadMyRequests() {
   loadingRequests.value = true
   try {
     const res = await fetchMyRequests()
-    myRequests.value = (res as any)?.data ?? []
+    myRequests.value = (res as any)?.data?.data ?? []
   } catch (err: any) {
     if (err?.response?.status === 401) isAuthenticated.value = false
   } finally {
@@ -99,7 +99,7 @@ async function loadMyRequests() {
 async function loadPlatformsData() {
   try {
     const res = await fetchPlatforms()
-    platforms.value = (res as any)?.data ?? []
+    platforms.value = (res as any)?.data?.data ?? []
   } catch {}
 }
 
@@ -218,7 +218,7 @@ async function revealCode(reqId: number) {
     const body: Record<string, any> = {}
     if (props.accessToken) body.access_token = props.accessToken
     const res = await apiRevealKey(reqId, body)
-    revealResult.value = (res as any)?.data ?? null
+    revealResult.value = (res as any)?.data?.data ?? null
   } catch (err: any) {
     if (err?.response?.status === 401) isAuthenticated.value = false
   } finally {

package/composables/useMgBillingProfile.ts

@@ -0,0 +1,99 @@
+import { ref, computed } from "vue";
+import type { AxiosInstance } from "axios";
+
+/**
+ * The customer's fiscal identity — company name, tax ids, address, the person
+ * who signs for the company.
+ *
+ * It is stored once per customer and snapshotted onto every document the
+ * platform issues them afterwards (api-main does that on Invoice and on
+ * PlanSubscriptionPayment creation). Collecting it at checkout is what stops a
+ * subscription from producing an unusable receipt every single billing cycle:
+ * the payment record is created on the way back from the gateway, so anything
+ * asked for afterwards misses at least the first document.
+ */
+const BILLING_PROFILE_URL = "api/v1/public/user/billing-profile";
+
+export interface MgBillingProfile {
+  name: string;
+  company_name: string;
+  legal_name: string;
+  vat_number: string;
+  tax_id: string;
+  registration_number: string;
+  represented_by: string;
+  address_line_1: string;
+  address_line_2: string;
+  city: string;
+  state: string;
+  postal_code: string;
+  country: string;
+}
+
+export function emptyMgBillingProfile(): MgBillingProfile {
+  return {
+    name: "",
+    company_name: "",
+    legal_name: "",
+    vat_number: "",
+    tax_id: "",
+    registration_number: "",
+    represented_by: "",
+    address_line_1: "",
+    address_line_2: "",
+    city: "",
+    state: "",
+    postal_code: "",
+    country: "",
+  };
+}
+
+export function useMgBillingProfile(httpService: AxiosInstance) {
+  const profile = ref<MgBillingProfile>(emptyMgBillingProfile());
+  const loading = ref(false);
+  const saving = ref(false);
+  const error = ref<string | null>(null);
+
+  /** Whether the customer has given us anything worth printing on a document. */
+  const hasData = computed(() =>
+    Object.values(profile.value).some((value) => String(value ?? "").trim() !== "")
+  );
+
+  async function load() {
+    loading.value = true;
+    try {
+      const res = await httpService.get(BILLING_PROFILE_URL);
+      const data = res?.data?.data ?? {};
+      (Object.keys(profile.value) as Array<keyof MgBillingProfile>).forEach((key) => {
+        profile.value[key] = data[key] ?? "";
+      });
+    } catch {
+      // A profile that cannot be read just starts empty — never a reason to
+      // block a checkout the customer is in the middle of.
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * @returns whether the save succeeded, so a caller can hold back a gateway
+   *          redirect rather than sending the customer off with details that
+   *          were never stored.
+   */
+  async function save(): Promise<boolean> {
+    if (saving.value) return false;
+    saving.value = true;
+    error.value = null;
+    try {
+      await httpService.put(BILLING_PROFILE_URL, profile.value);
+      return true;
+    } catch (err: any) {
+      error.value = err?.response?.data?.message ?? null;
+      return false;
+    } finally {
+      saving.value = false;
+    }
+  }
+
+  return { profile, loading, saving, error, hasData, load, save };
+}

package/composables/useMgCheckout.ts

@@ -307,12 +307,37 @@ export function useMgCheckout(httpService: AxiosInstance, options?: {
 
   // ── startValidation: the actual checkout submission ────────────────────────
 
+  // ── Fiscal data ────────────────────────────────────────────────────────────
+  // A checkout page registers its MgBillingProfileFields here; the details are
+  // then saved before the gateway redirect. That ordering is the whole point:
+  // the payment record is created on the way back and snapshots whatever the
+  // profile holds at that moment, so anything collected afterwards misses the
+  // document the customer is buying right now — and on a subscription it
+  // misses every cycle until somebody notices.
+  const billingProfileFields = ref<{ save: () => Promise<boolean> } | null>(null);
+
+  function registerBillingProfileFields(instance: { save: () => Promise<boolean> } | null) {
+    billingProfileFields.value = instance;
+  }
+
   async function startValidation() {
     if (loading.value) return;
     try {
       loading.value = true;
       if (buyerPageName) localStorage.setItem("buyerPage", buyerPageName);
 
+      if (billingProfileFields.value) {
+        const saved = await billingProfileFields.value.save();
+        if (!saved) {
+          checkoutError.value = _t(
+            "billing_profile.save_error",
+            "Could not save your billing details. Please try again."
+          );
+          loading.value = false;
+          return;
+        }
+      }
+
       const gatewayStr = selectedPaymentGateway.value || "stripe";
       const baseUrl = typeof window !== "undefined" ? window.location.origin : "";
       const localeStr = locale.value || "en";
@@ -523,6 +548,10 @@ export function useMgCheckout(httpService: AxiosInstance, options?: {
     emailError,
     isInvalid,
 
+    // Fiscal data
+    billingProfileFields,
+    registerBillingProfileFields,
+
     // Actions
     handlePurchase,
     startValidation,

package/locales/de.json

@@ -449,6 +449,7 @@
       "required_fields": "Fill in all required fields",
       "url_error": "Invalid URL",
       "submit_error": "Error submitting. Try again.",
+      "duplicate_url_error": "Du hast diesen Link für diese Anfrage bereits gesendet.",
       "sending": "Sending...",
       "finish": "Submit",
       "submitted_title": "Material submitted!",
@@ -586,5 +587,20 @@
         "tiers": "Packages"
       }
     }
+  },
+  "billing_profile": {
+    "toggle": "Ich benötige eine Rechnung mit Firmendaten",
+    "hint": "Wird in Ihrem Konto gespeichert und ab sofort auf jeder Rechnung verwendet, auch bei jeder Verlängerung.",
+    "company_name": "Firmenname",
+    "legal_name": "Rechtlicher Name",
+    "vat_number": "USt-IdNr.",
+    "tax_id": "Steuernummer",
+    "registration_number": "Registernummer",
+    "represented_by": "Vertreten durch (Geschäftsführer)",
+    "address": "Anschrift",
+    "city": "Stadt",
+    "postal_code": "Postleitzahl",
+    "country": "Land",
+    "save_error": "Ihre Rechnungsdaten konnten nicht gespeichert werden. Bitte versuchen Sie es erneut."
   }
 }

package/locales/en.json

@@ -449,6 +449,7 @@
       "required_fields": "Fill in all required fields",
       "url_error": "Invalid URL",
       "submit_error": "Error submitting. Try again.",
+      "duplicate_url_error": "You already sent this link for this request.",
       "sending": "Sending...",
       "finish": "Submit",
       "submitted_title": "Material submitted!",
@@ -586,5 +587,20 @@
         "tiers": "Packages"
       }
     }
+  },
+  "billing_profile": {
+    "toggle": "I need an invoice with company details",
+    "hint": "Saved to your account and used on every invoice from now on, including each renewal.",
+    "company_name": "Company name",
+    "legal_name": "Legal name",
+    "vat_number": "VAT number",
+    "tax_id": "Tax ID",
+    "registration_number": "Registration number",
+    "represented_by": "Represented by (director)",
+    "address": "Address",
+    "city": "City",
+    "postal_code": "Postal code",
+    "country": "Country",
+    "save_error": "Could not save your billing details. Please try again."
   }
 }

package/locales/es.json

@@ -449,6 +449,7 @@
       "required_fields": "¡Por favor, completa todos los campos obligatorios!",
       "url_error": "Introduce URLs válidas (deben comenzar con http:// o https://)",
       "submit_error": "Hubo un error al procesar tu material.",
+      "duplicate_url_error": "Ya enviaste este enlace para esta solicitud.",
       "sending": "Enviando...",
       "finish": "Finalizar",
       "submitted_title": "Material Enviado",
@@ -586,5 +587,20 @@
         "tiers": "Paquetes de Apoyo"
       }
     }
+  },
+  "billing_profile": {
+    "toggle": "Necesito factura con datos de empresa",
+    "hint": "Se guarda en tu cuenta y aparece en todas las facturas a partir de ahora, incluidas las renovaciones.",
+    "company_name": "Razón social",
+    "legal_name": "Nombre legal",
+    "vat_number": "Número de VAT",
+    "tax_id": "Identificación fiscal",
+    "registration_number": "Número de registro",
+    "represented_by": "Representada por (director)",
+    "address": "Dirección",
+    "city": "Ciudad",
+    "postal_code": "Código postal",
+    "country": "País",
+    "save_error": "No se pudieron guardar tus datos de facturación. Inténtalo de nuevo."
   }
 }

package/locales/pt-BR.json

@@ -449,6 +449,7 @@
       "required_fields": "Fill in all required fields",
       "url_error": "Invalid URL",
       "submit_error": "Error submitting. Try again.",
+      "duplicate_url_error": "Você já enviou esse link para este pedido.",
       "sending": "Sending...",
       "finish": "Submit",
       "submitted_title": "Material submitted!",
@@ -586,5 +587,20 @@
         "tiers": "Pacotes"
       }
     }
+  },
+  "billing_profile": {
+    "toggle": "Preciso de nota com dados da empresa",
+    "hint": "Fica salvo na sua conta e sai em todas as próximas faturas, inclusive nas renovações.",
+    "company_name": "Razão social",
+    "legal_name": "Nome legal",
+    "vat_number": "CNPJ / VAT",
+    "tax_id": "Inscrição fiscal",
+    "registration_number": "Número de registro",
+    "represented_by": "Representada por (diretor)",
+    "address": "Endereço",
+    "city": "Cidade",
+    "postal_code": "CEP",
+    "country": "País",
+    "save_error": "Não foi possível salvar seus dados de faturamento. Tente novamente."
   }
 }

package/locales/ro.json

@@ -449,6 +449,7 @@
       "required_fields": "Fill in all required fields",
       "url_error": "Invalid URL",
       "submit_error": "Error submitting. Try again.",
+      "duplicate_url_error": "Ai trimis deja acest link pentru această solicitare.",
       "sending": "Sending...",
       "finish": "Submit",
       "submitted_title": "Material submitted!",
@@ -586,5 +587,20 @@
         "tiers": "Packages"
       }
     }
+  },
+  "billing_profile": {
+    "toggle": "Am nevoie de factură cu datele firmei",
+    "hint": "Se salvează în contul tău și apare pe toate facturile de acum înainte, inclusiv la reînnoiri.",
+    "company_name": "Denumirea firmei",
+    "legal_name": "Denumire legală",
+    "vat_number": "Cod TVA",
+    "tax_id": "Identificator fiscal",
+    "registration_number": "Număr de înregistrare",
+    "represented_by": "Reprezentată de (director)",
+    "address": "Adresă",
+    "city": "Oraș",
+    "postal_code": "Cod poștal",
+    "country": "Țară",
+    "save_error": "Nu am putut salva datele tale de facturare. Încearcă din nou."
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.16.27",
+  "version": "1.17.0",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/key-campaigns/key-materials.vue

@@ -352,19 +352,33 @@ const submitForm = async () => {
 		}
 
 		for (const form of forms.value) {
-			await submitMaterial({
-				key_request_id: requestId.value,
-				user_id: unref(currentUserId),
-				// Slugs, not guessed ids. article/video/stream/web/print already
-				// match content_types.slug (Spatie\Sluggable on the model's own
-				// `name`) — the backend resolves them, which is what makes this
-				// work regardless of what numeric ids that table happens to hold
-				// in a given environment.
-				content_types: form.content_types,
-				material_url: form.material_url,
-				description: form.description,
-				submitted_at: new Date(form.submitted_at).toISOString(),
-			})
+			try {
+				await submitMaterial({
+					key_request_id: requestId.value,
+					user_id: unref(currentUserId),
+					// Slugs, not guessed ids. article/video/stream/web/print already
+					// match content_types.slug (Spatie\Sluggable on the model's own
+					// `name`) — the backend resolves them, which is what makes this
+					// work regardless of what numeric ids that table happens to hold
+					// in a given environment.
+					content_types: form.content_types,
+					material_url: form.material_url,
+					description: form.description,
+					submitted_at: new Date(form.submitted_at).toISOString(),
+				})
+			} catch (submitError: any) {
+				// Returning to this page later (or double-submitting) used to
+				// silently create a second identical row — the backend now
+				// rejects the exact link a second time per key request, but
+				// without catching this specific code here it fell through to
+				// the generic "something went wrong" below, leaving the person
+				// no wiser that it's the SAME link they already sent.
+				if (submitError?.response?.data?.error === "DUPLICATE_MATERIAL_URL") {
+					formError.value = t("keys.materials.duplicate_url_error")
+					return
+				}
+				throw submitError
+			}
 		}
 
 		// Reload submitted list