Improve boursecu UX: banners, support FAB, wallet deposit guide, fund/physical layouts, nav, and sidebar credit.

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

src/views/base/wallet/components/WalletDepositGuideModal.vue

@@ -17,30 +17,74 @@
         <slot />
       </div>
 
-      <a
-        v-if="supportLink"
-        class="deposit-guide__support-link"
-        :href="supportLink"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <div class="deposit-guide__accounts">
+        <div class="deposit-guide__account-row">
+          <span class="deposit-guide__account-label">{{ depositCardLabel }}</span>
+          <button
+              type="button"
+              class="deposit-guide__account-value"
+              :class="{ 'deposit-guide__account-value--empty': !hasDepositCardValue }"
+              :aria-label="`کپی ${depositCardLabel}`"
+              @click="copyDepositCardNumber"
+          >
+            <span class="deposit-guide__account-text" dir="ltr">{{ depositCardNumber }}</span>
+            <BasicIcon
+                icon="vuesax-linear:copy"
+                size="18"
+                color="#15803d"
+                class="deposit-guide__copy-icon"
+                :class="{ 'deposit-guide__copy-icon--disabled': !hasDepositCardValue }"
+            />
+          </button>
+        </div>
+
+        <div class="deposit-guide__account-row">
+          <span class="deposit-guide__account-label">{{ depositShebaLabel }}</span>
+          <button
+              type="button"
+              class="deposit-guide__account-value"
+              :class="{ 'deposit-guide__account-value--empty': !hasDepositShebaValue }"
+              :aria-label="`کپی ${depositShebaLabel}`"
+              @click="copyDepositShebaNumber"
+          >
+            <span class="deposit-guide__account-text" dir="ltr">{{ depositSheba }}</span>
+            <BasicIcon
+                icon="vuesax-linear:copy"
+                size="18"
+                color="#15803d"
+                class="deposit-guide__copy-icon"
+                :class="{ 'deposit-guide__copy-icon--disabled': !hasDepositShebaValue }"
+            />
+          </button>
+        </div>
+
+
+        <a
+          v-if="hasMessengerLink"
+          ref="supportMessengerTriggerEl"
+          class="deposit-guide__support-link"
+          href="#"
+          @click.prevent="onDepositSupportClick"
+        >
         <span class="deposit-guide__support-btn">
           <BasicIcon icon="vuesax-linear:headphone" size="18" color="#16a34a" />
           <span>پیام به پشتیبانی</span>
         </span>
-      </a>
+        </a>
 
-      <a
-        v-if="smsLink"
-        class="deposit-guide__support-link"
-        :class="{ 'deposit-guide__support-link--spaced': supportLink }"
-        :href="smsLink"
-      >
+        <a
+          v-if="smsLink"
+          class="deposit-guide__support-link"
+          :class="{ 'deposit-guide__support-link--spaced': hasMessengerLink }"
+          :href="smsLink"
+        >
         <span class="deposit-guide__support-btn">
           <BasicIcon icon="vuesax-linear:direct-inbox" size="18" color="#16a34a" />
           <span>پیام به پشتیبانی (sms)</span>
         </span>
-      </a>
+        </a>
+      </div>
+
     </div>
 
     <template #footer>
@@ -52,10 +96,12 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import BasicModal from '@/components/BasicPacks/BasicModal.vue'
+import { useSupportMessenger } from '@/composables/useSupportMessenger'
+import { loadSupportMessengerFromSettings } from '@/utils/supportMessenger'
 
 const props = withDefaults(
   defineProps<{
@@ -71,6 +117,25 @@ const props = withDefaults(
   },
 )
 
+const {
+  depositCardNumber,
+  depositSheba,
+  depositCardLabel,
+  depositShebaLabel,
+  hasDepositCardValue,
+  hasDepositShebaValue,
+  copyDepositCardNumber,
+  copyDepositShebaNumber,
+  hasMessengerLink,
+  openDepositSupportMessenger,
+} = useSupportMessenger()
+
+const supportMessengerTriggerEl = ref<HTMLElement | null>(null)
+
+function onDepositSupportClick() {
+  void openDepositSupportMessenger(supportMessengerTriggerEl.value)
+}
+
 const emit = defineEmits<{
   'update:visible': [value: boolean]
 }>()
@@ -79,6 +144,15 @@ const localVisible = computed({
   get: () => props.visible,
   set: (value: boolean) => emit('update:visible', value),
 })
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      void loadSupportMessengerFromSettings(true)
+    }
+  },
+)
 </script>
 
 <style scoped lang="less">
@@ -115,6 +189,71 @@ const localVisible = computed({
   color: #4b5563;
 }
 
+.deposit-guide__accounts {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+  margin-top: 0.85rem;
+  text-align: right;
+}
+
+.deposit-guide__account-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.deposit-guide__account-label {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: #6b7280;
+}
+
+.deposit-guide__account-value {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.65rem 0.85rem;
+  border: 1px solid #bbf7d0;
+  border-radius: 0.75rem;
+  background: #f0fdf4;
+  color: #111827;
+  font-size: 0.88rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+  text-align: left;
+
+  &:hover:not(.deposit-guide__account-value--empty) {
+    background: #dcfce7;
+    border-color: #86efac;
+  }
+
+  &--empty {
+    color: #9ca3af;
+    cursor: not-allowed;
+  }
+}
+
+.deposit-guide__account-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.deposit-guide__copy-icon {
+  flex-shrink: 0;
+
+  &--disabled {
+    opacity: 0.45;
+  }
+}
+
 .deposit-guide__support-link {
   display: block;
   width: 100%;