@mundogamernetwork/shared-ui 1.1.3 → 1.1.7

package/components/checkout/MgCartItemList.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import type { CartItem } from "../../composables/useMgCheckout";
+import { injectMgCheckout } from "../../composables/useMgCheckout";
 
-defineProps<{
-  items: CartItem[];
+const props = defineProps<{
+  items?: CartItem[];
   loading?: boolean;
   editable?: boolean;
   currencySymbol?: string;
+  /** Auto-wire to parent useMgCheckout context */
+  autoWire?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -13,6 +17,49 @@ const emit = defineEmits<{
   "remove-item": [id: number, type: string];
   "clear-all": [];
 }>();
+
+const checkout = injectMgCheckout();
+
+const resolvedItems = computed<CartItem[]>(() =>
+  props.autoWire ? (checkout?.orderCart.value ?? []) : (props.items ?? [])
+);
+
+const isLoading = computed(() =>
+  props.autoWire ? checkout?.cartLoading.value : props.loading
+);
+
+const sym = computed(() => props.currencySymbol ?? "$");
+
+/** Parse price safely — handles both numbers and strings like "49,90" */
+function parsePrice(v: string | number | null | undefined): number {
+  if (v == null) return 0;
+  if (typeof v === "number") return v;
+  return parseFloat(String(v).replace(",", ".").replace(/[^0-9.]/g, "")) || 0;
+}
+
+function fmtLine(price: string | number | null | undefined, qty: number): string {
+  const p = parsePrice(price);
+  if (typeof price === "string" && /[^\d.,]/.test(price)) {
+    // Already contains currency symbol — just show as-is (single unit)
+    return price;
+  }
+  return `${sym.value}${(p * qty).toFixed(2)}`;
+}
+
+async function handleAdd(id: number, type: string) {
+  if (props.autoWire && checkout) await checkout.addItem(id, type);
+  else emit("add-item", id, type);
+}
+
+async function handleRemove(id: number, type: string) {
+  if (props.autoWire && checkout) await checkout.removeItem(id, type);
+  else emit("remove-item", id, type);
+}
+
+async function handleClear() {
+  if (props.autoWire && checkout) await checkout.clearCartItems();
+  else emit("clear-all");
+}
 </script>
 
 <template>
@@ -23,20 +70,23 @@ const emit = defineEmits<{
       <span class="col-value">{{ $t?.("checkout.cart.value") ?? "Value" }}</span>
     </div>
 
-    <div v-if="loading" class="mg-cart-items__loading">
+    <!-- Loading skeleton -->
+    <div v-if="isLoading" 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 class="skeleton-block" style="width: 60%; height: 14px;" />
+        <div class="skeleton-block" style="width: 20%; height: 14px;" />
       </div>
     </div>
 
-    <div v-else-if="items.length === 0" class="mg-cart-items__empty">
+    <!-- Empty -->
+    <div v-else-if="resolvedItems.length === 0" class="mg-cart-items__empty">
       <p>{{ $t?.("checkout.cart.empty") ?? "Your cart is empty" }}</p>
     </div>
 
+    <!-- Items -->
     <template v-else>
       <div
-        v-for="item in items"
+        v-for="item in resolvedItems"
         :key="`${item.item_type}-${item.item_id}`"
         class="mg-cart-item"
       >
@@ -44,35 +94,43 @@ const emit = defineEmits<{
           <img
             v-if="item.item?.image_url"
             :src="item.item.image_url"
-            :alt="item.item?.name"
+            :alt="item.item?.localized_name ?? item.item?.name"
             class="mg-cart-item__img"
           />
-          <span class="mg-cart-item__name">{{ item.item?.name ?? "Product" }}</span>
+          <span class="mg-cart-item__name">
+            {{ item.item?.localized_name ?? item.item?.name ?? $t?.("checkout.cart.item") ?? "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>
+            <button class="qty-btn" :disabled="isLoading" @click="handleRemove(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>
+            <button class="qty-btn" :disabled="isLoading" @click="handleAdd(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) }}
+          <!-- Show crossed-out original if there's a discount -->
+          <span
+            v-if="item.discount && parsePrice(item.discount) > 0"
+            class="original-price"
+          >
+            {{ fmtLine(item.price, item.quantity) }}
           </span>
           <span class="final-price">
-            {{ currencySymbol ?? "$" }}{{ (item.price_with_discount * item.quantity).toFixed(2) }}
+            {{ fmtLine(item.price_with_discount ?? item.price, item.quantity) }}
           </span>
         </div>
       </div>
 
+      <!-- Clear all button -->
       <div v-if="editable" class="mg-cart-items__footer">
-        <button class="clear-btn" @click="emit('clear-all')">
+        <button class="clear-btn" :disabled="isLoading" @click="handleClear">
           <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" />
+            <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>
@@ -102,12 +160,7 @@ const emit = defineEmits<{
 
   &__loading {
     padding: 16px 0;
-
-    .skeleton-row {
-      display: flex;
-      gap: 16px;
-      margin-bottom: 12px;
-    }
+    .skeleton-row { display: flex; gap: 16px; margin-bottom: 12px; }
   }
 
   &__empty {
@@ -119,12 +172,12 @@ const emit = defineEmits<{
 
   &__footer {
     padding-top: 8px;
-    border-top: 1px solid var(--inactive, #e5e7eb);
+    border-top: 1px solid var(--inactive, #f3f4f6);
   }
 }
 
-.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-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 {
@@ -137,40 +190,37 @@ const emit = defineEmits<{
     width: 36px;
     height: 36px;
     object-fit: contain;
-    border-radius: 4px;
   }
 
   &__name {
     font-size: 13px;
-    color: var(--active, #111827);
+    color: var(--active, #fff);
     line-height: 1.3;
   }
 }
 
 .qty-btn {
-  width: 24px;
-  height: 24px;
+  width: 26px;
+  height: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--inactive, #d1d5db);
-  border-radius: 4px;
   background: transparent;
-  color: var(--active, #111827);
+  color: var(--active, #fff);
   cursor: pointer;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 600;
+  transition: all 0.15s;
 
-  &:hover {
-    border-color: #4f46e5;
-    color: #4f46e5;
-  }
+  &:hover:not(:disabled) { border-color: var(--highlight-color, #4f46e5); color: var(--highlight-color, #4f46e5); }
+  &:disabled { opacity: 0.4; cursor: not-allowed; }
 }
 
 .qty-value {
   font-size: 14px;
   font-weight: 500;
-  color: var(--active, #111827);
+  color: var(--active, #fff);
   min-width: 20px;
   text-align: center;
 }
@@ -184,7 +234,7 @@ const emit = defineEmits<{
 .final-price {
   font-size: 14px;
   font-weight: 600;
-  color: var(--active, #111827);
+  color: var(--active, #fff);
 }
 
 .clear-btn {
@@ -197,18 +247,19 @@ const emit = defineEmits<{
   font-size: 12px;
   cursor: pointer;
   padding: 4px 0;
+  transition: opacity 0.15s;
 
-  &:hover { opacity: 0.8; }
+  &:hover:not(:disabled) { opacity: 0.8; }
+  &:disabled { opacity: 0.4; cursor: not-allowed; }
 }
 
 .skeleton-block {
   background: var(--inactive, #e5e7eb);
-  border-radius: 4px;
-  animation: pulse 1.5s ease-in-out infinite;
+  animation: mg-pulse 1.5s ease-in-out infinite;
 }
 
-@keyframes pulse {
+@keyframes mg-pulse {
   0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
+  50% { opacity: 0.4; }
 }
 </style>

package/components/checkout/MgCartSummary.vue

@@ -1,15 +1,37 @@
 <script setup lang="ts">
-import { ref } from "vue";
+/**
+ * MgCartSummary — cart totals + coupon block.
+ *
+ * Accepts both raw numbers and pre-formatted strings from the API
+ * (e.g. "R$ 49,90", "$ 19.00"). When a formatted string is provided
+ * it is displayed as-is; when a raw number is provided it is formatted
+ * with the currency symbol.
+ *
+ * Coupon wiring:
+ *   - autoWire=true → injects useMgCheckout context (provideMgCheckout in parent)
+ *   - autoWire=false (default) → emits apply-coupon / remove-coupon events
+ */
+import { computed } from "vue";
+import { injectMgCheckout } from "../../composables/useMgCheckout";
 
 const props = defineProps<{
-  total: number | string;
-  originalTotal?: number | string;
+  // Totals — accept either a pre-formatted string ("R$ 49,90") or a raw number
+  total?: number | string | null;
+  originalTotal?: number | string | null;
+  // Pre-formatted strings take priority over raw numbers
+  formattedTotal?: string | null;
+  formattedOriginalTotal?: string | null;
+  formattedDiscount?: string | null;
   hasDiscount?: boolean;
   currencySymbol?: string;
-  couponInfo?: { name: string; discount: number; code: string } | null;
+  couponInfo?: { code: string; discount?: number; name?: string } | null;
   couponLoading?: boolean;
   couponError?: string | null;
   disabled?: boolean;
+  /** Auto-wire to parent useMgCheckout context */
+  autoWire?: boolean;
+  /** Show coupon input section */
+  showCoupon?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -17,63 +39,91 @@ const emit = defineEmits<{
   "remove-coupon": [];
 }>();
 
-const couponInput = ref("");
+const checkout = injectMgCheckout();
 
-function handleApply() {
-  if (couponInput.value.trim()) {
-    emit("apply-coupon", couponInput.value.trim());
-  }
+// ── Resolved values (formatted strings preferred) ────────────────────────────
+
+function _fmt(raw: number | string | null | undefined, symbol: string): string {
+  if (raw == null) return "-";
+  if (typeof raw === "string" && /[^\d.,]/.test(raw)) return raw; // already formatted
+  const n = parseFloat(String(raw).replace(/[^0-9.]/g, "")) || 0;
+  return `${symbol}${n.toFixed(2)}`;
 }
+
+const sym = computed(() => props.currencySymbol ?? "$");
+
+const displayTotal = computed(() =>
+  props.formattedTotal ??
+  (props.autoWire ? checkout?.cart.value?.formatted_total_with_discount ?? checkout?.cart.value?.formatted_total : null) ??
+  _fmt(props.total, sym.value)
+);
+
+const displayOriginal = computed(() =>
+  props.formattedOriginalTotal ??
+  (props.autoWire ? checkout?.cart.value?.formatted_original_total : null) ??
+  _fmt(props.originalTotal, sym.value)
+);
+
+const displayDiscount = computed(() =>
+  props.formattedDiscount ??
+  (props.autoWire ? checkout?.cart.value?.formatted_total_discount : null) ??
+  null
+);
+
+const showDiscount = computed(() =>
+  props.autoWire
+    ? checkout?.hasDiscountFlag.value
+    : (props.hasDiscount ?? false)
+);
+
+const activeCoupon = computed(() =>
+  props.autoWire ? checkout?.couponInfo.value : props.couponInfo
+);
+
+const couponLoading = computed(() =>
+  props.autoWire ? checkout?.couponLoading.value : (props.couponLoading ?? false)
+);
+
+const couponError = computed(() =>
+  props.autoWire ? checkout?.couponError.value : props.couponError
+);
+
+const showCoupon = computed(() => props.showCoupon !== false);
 </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>
+    <!-- Coupon -->
+    <div v-if="showCoupon" class="mg-cart-summary__coupon">
+      <MgCouponInput
+        :coupon-info="activeCoupon"
+        :loading="couponLoading"
+        :error="couponError"
+        :disabled="disabled"
+        :auto-wire="autoWire"
+        @apply-coupon="(code) => emit('apply-coupon', code)"
+        @remove-coupon="emit('remove-coupon')"
+      />
     </div>
 
     <!-- Totals -->
     <div class="mg-cart-summary__totals">
-      <div v-if="hasDiscount" class="total-row">
+      <div v-if="showDiscount" class="total-row">
         <span>{{ $t?.("checkout.summary.original") ?? "Subtotal" }}</span>
-        <span class="original-total">{{ currencySymbol ?? "$" }}{{ Number(originalTotal).toFixed(2) }}</span>
+        <span class="original-total">{{ displayOriginal }}</span>
       </div>
-      <div v-if="hasDiscount" class="total-row discount-row">
+
+      <div v-if="showDiscount" class="total-row discount-row">
         <span>{{ $t?.("checkout.summary.discount") ?? "Discount" }}</span>
-        <span class="discount-value">-{{ currencySymbol ?? "$" }}{{ (Number(originalTotal) - Number(total)).toFixed(2) }}</span>
+        <span class="discount-value">
+          <template v-if="displayDiscount">-{{ displayDiscount }}</template>
+          <template v-else-if="activeCoupon?.discount">-{{ activeCoupon.discount }}%</template>
+        </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>
+        <span class="final-total">{{ displayTotal }}</span>
       </div>
     </div>
   </div>
@@ -93,78 +143,12 @@ function handleApply() {
   }
 }
 
-.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;
+  font-size: 14px;
   color: var(--inactive, #6b7280);
 
   &--final {
@@ -173,32 +157,11 @@ function handleApply() {
     border-top: 1px solid var(--inactive, #e5e7eb);
     font-size: 16px;
     font-weight: 700;
-    color: var(--active, #111827);
+    color: var(--active, #fff);
   }
 }
 
-.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); } }
+.original-total { text-decoration: line-through; }
+.discount-value { color: #22c55e; font-weight: 500; }
+.final-total { color: var(--active, #fff); }
 </style>