@mundogamernetwork/shared-ui 1.17.0 → 1.17.2

package/components/checkout/MgBillingProfileFields.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
+import { computed, ref, watch, onMounted } from "vue";
 import type { AxiosInstance } from "axios";
 import { useMgBillingProfile } from "../../composables/useMgBillingProfile";
 
@@ -15,11 +15,14 @@ const props = defineProps<{
   httpService: AxiosInstance;
   /** Start expanded regardless of whether a profile already exists. */
   defaultOpen?: boolean;
+  /** Override the endpoint when the instance's baseURL is an unusual shape. */
+  path?: string;
 }>();
 
 const emit = defineEmits<{ (e: "change", wanted: boolean): void }>();
 
-const billing = useMgBillingProfile(props.httpService);
+const nuxtApp = typeof useNuxtApp === "function" ? useNuxtApp() : null;
+const billing = useMgBillingProfile(props.httpService, { path: props.path });
 const wanted = ref(props.defaultOpen ?? false);
 
 // A customer who already gave us their details should see them, ticked — not
@@ -47,6 +50,16 @@ async function save(): Promise<boolean> {
   return billing.save();
 }
 
+const saveFailed = computed(() => billing.error.value !== null);
+
+const saveErrorMessage = computed(() => {
+  if (billing.error.value) return billing.error.value;
+  const translated = (nuxtApp?.$i18n as any)?.t?.("billing_profile.save_error");
+  return translated && translated !== "billing_profile.save_error"
+    ? translated
+    : "Could not save your billing details. Please try again.";
+});
+
 defineExpose({ save, wanted, profile: billing.profile, hasData: billing.hasData });
 </script>
 
@@ -103,8 +116,8 @@ defineExpose({ save, wanted, profile: billing.profile, hasData: billing.hasData
         </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 v-if="saveFailed" class="mg-billing-profile__error">
+        {{ saveErrorMessage }}
       </p>
     </div>
   </div>

package/composables/useMgBillingProfile.ts

@@ -12,7 +12,25 @@ import type { AxiosInstance } from "axios";
  * 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";
+const BILLING_PROFILE_PATH = "public/user/billing-profile";
+
+/**
+ * Resolve the endpoint for whichever axios instance the app hands us.
+ *
+ * Instances across the platform disagree about their baseURL: useMgCheckout's
+ * is origin-only (so it writes "api/v1/shopping-cart"), while most apps'
+ * api-main instance already ends in "/api/v1". Hardcoding either shape would
+ * force a wrapper service in every app that happens to use the other one.
+ */
+function resolveBillingProfileUrl(httpService: AxiosInstance, override?: string): string {
+  if (override) return override;
+
+  const baseUrl = String(httpService?.defaults?.baseURL ?? "");
+
+  return /\/api\/v1\/?$/.test(baseUrl)
+    ? BILLING_PROFILE_PATH
+    : `api/v1/${BILLING_PROFILE_PATH}`;
+}
 
 export interface MgBillingProfile {
   name: string;
@@ -48,7 +66,9 @@ export function emptyMgBillingProfile(): MgBillingProfile {
   };
 }
 
-export function useMgBillingProfile(httpService: AxiosInstance) {
+export function useMgBillingProfile(httpService: AxiosInstance, options?: { path?: string }) {
+  const url = resolveBillingProfileUrl(httpService, options?.path);
+
   const profile = ref<MgBillingProfile>(emptyMgBillingProfile());
   const loading = ref(false);
   const saving = ref(false);
@@ -62,7 +82,7 @@ export function useMgBillingProfile(httpService: AxiosInstance) {
   async function load() {
     loading.value = true;
     try {
-      const res = await httpService.get(BILLING_PROFILE_URL);
+      const res = await httpService.get(url);
       const data = res?.data?.data ?? {};
       (Object.keys(profile.value) as Array<keyof MgBillingProfile>).forEach((key) => {
         profile.value[key] = data[key] ?? "";
@@ -85,7 +105,7 @@ export function useMgBillingProfile(httpService: AxiosInstance) {
     saving.value = true;
     error.value = null;
     try {
-      await httpService.put(BILLING_PROFILE_URL, profile.value);
+      await httpService.put(url, profile.value);
       return true;
     } catch (err: any) {
       error.value = err?.response?.data?.message ?? null;

package/package.json

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