@mundogamernetwork/shared-ui 1.17.0 → 1.17.4

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,18 +116,28 @@ 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>
 </template>
 
 <style lang="scss" scoped>
+/*
+ * Theme-agnostic on purpose. This block renders inside eight different
+ * checkouts, and they are not all light: agency's is near-black, and hardcoded
+ * light fallbacks turned the labels dark-on-dark and the inputs into glaring
+ * white boxes. Everything here inherits the host's own text colour and derives
+ * its lines from it, so the block reads correctly on any background without
+ * each app having to restyle it.
+ */
 .mg-billing-profile {
   margin-top: 16px;
-  border-top: 1px solid var(--inactive, #ececec);
+  border-top: 1px solid currentColor;
+  border-top-color: color-mix(in srgb, currentColor 18%, transparent);
   padding-top: 16px;
+  color: inherit;
 }
 
 .mg-billing-profile__toggle {
@@ -123,6 +146,7 @@ defineExpose({ save, wanted, profile: billing.profile, hasData: billing.hasData
   gap: 8px;
   font-size: 14px;
   cursor: pointer;
+  color: inherit;
 }
 
 .mg-billing-profile__body {
@@ -131,8 +155,8 @@ defineExpose({ save, wanted, profile: billing.profile, hasData: billing.hasData
 
 .mg-billing-profile__hint {
   font-size: 13px;
-  color: var(--inactive-text, #666);
   margin: 0 0 12px;
+  opacity: 0.7;
 }
 
 .mg-billing-profile__grid {
@@ -148,16 +172,28 @@ defineExpose({ save, wanted, profile: billing.profile, hasData: billing.hasData
   font-size: 12px;
 }
 
+.mg-billing-profile__field > span {
+  opacity: 0.7;
+}
+
 .mg-billing-profile__field--wide {
   grid-column: 1 / -1;
 }
 
 .mg-billing-profile__field input {
-  border: 1px solid var(--inactive, #d5d5d5);
+  border: 1px solid currentColor;
+  border-color: color-mix(in srgb, currentColor 30%, transparent);
   padding: 8px 10px;
   font-size: 14px;
-  background: var(--bg, #fff);
-  color: var(--active, #111);
+  /* Transparent, not white: the host's own background shows through, so the
+     field belongs to the surrounding form instead of punching a hole in it. */
+  background: transparent;
+  color: inherit;
+}
+
+.mg-billing-profile__field input:focus {
+  outline: none;
+  border-color: color-mix(in srgb, currentColor 60%, transparent);
 }
 
 .mg-billing-profile__error {

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.4",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/services/campaignService.ts

@@ -473,7 +473,7 @@ export const fetchCampaignTypes = (params: Record<string, any> = {}) => {
  * Fetch active platforms (for the platform filter select).
  */
 export const fetchCampaignPlatforms = () => {
-	return authClient.get("/public/key-platforms")
+	return authClient.get("/platforms/currently")
 }
 
 /**