Fix boursecu asset info modals with per-product copper breakdown.

Show total product wallet sum alongside the clicked product inventory in readable multi-line modals on mobile and desktop.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/base/home/components/AssetsSection.vue

@@ -94,7 +94,7 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-  openGoldModal: [metal: WalletMetalTotal, modalText?: string]
+  openGoldModal: [metal: WalletMetalTotal, modalText?: string, modalTitle?: string, modalContent?: string]
   openRialModal: []
 }>()
 
@@ -136,7 +136,7 @@ function handleRowInfo(row: HomeAssetRow) {
   }
 
   if (row.metal) {
-    emit('openGoldModal', row.metal, row.modalText)
+    emit('openGoldModal', row.metal, row.modalText, row.modalTitle, row.modalContent)
   }
 }
 </script>

src/views/base/home/composables/useHomePage.ts

@@ -1,4 +1,4 @@
-import { computed, inject, onMounted, onUnmounted, provide, ref, type InjectionKey } from 'vue'
+import { computed, h, inject, onMounted, onUnmounted, provide, ref, type InjectionKey } from 'vue'
 import router from '@/router'
 import { loading, removeToken } from '@/utils'
 import { useUserStore } from '@/store/userStore'
@@ -41,7 +41,12 @@ export interface HomePageContext {
   setChartMetal: (metal: ChartMetalType) => void
   isBoursecuHomeLayout: ReturnType<typeof computed<boolean>>
   handleBannerClick: (banner: { typeClick?: string; modalText?: string; link?: string }) => void
-  openGoldModal: (metal: WalletMetalTotal, modalText?: string) => void
+  openGoldModal: (
+    metal: WalletMetalTotal,
+    modalText?: string,
+    modalTitle?: string,
+    modalContent?: string
+  ) => void
   openRialModal: () => void
 }
 
@@ -147,8 +152,32 @@ export function useHomePage() {
     window.location.reload()
   }
 
-  function openGoldModal(metal: WalletMetalTotal, modalText?: string) {
+  function renderModalLines(text?: string) {
+    if (!text) {
+      return undefined
+    }
+
+    return h(
+      'div',
+      { style: { lineHeight: '1.9' } },
+      text.split('\n').map((line, index) =>
+        h(
+          'div',
+          { key: index, style: index > 0 ? { marginTop: '6px' } : undefined },
+          line
+        )
+      )
+    )
+  }
+
+  function openGoldModal(
+    metal: WalletMetalTotal,
+    modalText?: string,
+    modalTitle?: string,
+    modalContent?: string
+  ) {
     const title =
+      modalTitle ??
       modalText ??
       (isBoursecuHomeLayout.value
         ? formatBoursecuMetalModalText(metal)
@@ -156,6 +185,7 @@ export function useHomePage() {
 
     Modal.confirm({
       title,
+      content: renderModalLines(modalContent),
       okText: 'متوجه شدم',
       centered: true,
       cancelButtonProps: { style: { display: 'none' } },
@@ -168,7 +198,7 @@ export function useHomePage() {
     const metalRial = resolveAssetsRialValue(summary, getTradeBuyPrice(lastPrice.value))
     Modal.confirm({
       title: 'دارایی ریالی',
-      content: formatRialAssetsInfoText(cash, metalRial),
+      content: renderModalLines(formatRialAssetsInfoText(cash, metalRial)),
       okText: 'متوجه شدم',
       centered: true,
       cancelButtonProps: { style: { display: 'none' } },

src/views/base/home/desktop/components/DesktopAssetsMetrics.vue

@@ -8,7 +8,7 @@ import { buildBoursecuHomeAssetRows, resolveSummaryMetalWeight } from '@/utils/p
 import { useHomePageContext } from '../../composables/useHomePage'
 
 const emit = defineEmits<{
-  openGoldModal: [metal: WalletMetalTotal, modalText?: string]
+  openGoldModal: [metal: WalletMetalTotal, modalText?: string, modalTitle?: string, modalContent?: string]
   openRialModal: []
 }>()
 
@@ -30,6 +30,8 @@ type MetricItem = {
   value: string
   metal?: WalletMetalTotal
   modalText?: string
+  modalTitle?: string
+  modalContent?: string
   showInfo?: boolean
   onInfo?: 'gold' | 'rial'
 }
@@ -53,6 +55,8 @@ const metrics = computed<MetricItem[]>(() => {
         value: row.value,
         metal: row.metal,
         modalText: row.modalText,
+        modalTitle: row.modalTitle,
+        modalContent: row.modalContent,
         showInfo: row.info !== 'none',
         onInfo: row.info === 'rial' ? 'rial' : 'gold',
       })
@@ -104,7 +108,7 @@ function handleInfo(metric: MetricItem) {
     return
   }
   if (metric.metal) {
-    emit('openGoldModal', metric.metal, metric.modalText)
+    emit('openGoldModal', metric.metal, metric.modalText, metric.modalTitle, metric.modalContent)
   }
 }
 </script>