Replace prompt with VnConfirm

src/pages/Ecomerce/OrdersView.vue

@@ -4,6 +4,8 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 import CardList from 'src/components/ui/CardList.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
 import { currency, formatDateTitle } from 'src/lib/filters.js';
 import { tpvStore } from 'stores/tpv';
@@ -12,6 +14,8 @@ const { t } = useI18n();
 const route = useRoute();
 const jApi = inject('jApi');
 
+const showAmountToPayDialog = ref(null);
+const amountToPay = ref(null);
 const orders = ref(null);
 const debt = ref(0);
 const tpv = tpvStore();
@@ -24,19 +28,18 @@ onMounted(async () => {
 });
 
 const onPayClick = async () => {
-    let amount = -debt.value;
-    amount = amount <= 0 ? null : amount;
+    showAmountToPayDialog.value = true;
 
-    let defaultAmountStr = '';
-    if (amount !== null) {
-        defaultAmountStr = amount;
+    if (debt.value <= 0) {
+        amountToPay.value = -debt.value;
     }
+};
 
-    amount = prompt(t('amountToPay'), defaultAmountStr);
-
-    if (amount != null) {
-        amount = parseFloat(amount.replace(',', '.'));
-        await tpv.pay(amount);
+const onConfirmPay = async () => {
+    if (amountToPay.value) {
+        const amount = amountToPay.value.toString().replace('.', ',');
+        amountToPay.value = parseFloat(amount);
+        await tpv.pay(amountToPay.value);
     }
 };
 </script>
@@ -106,6 +109,19 @@ const onPayClick = async () => {
                 :title="t('startOrder')"
             />
         </QPageSticky>
+        <VnConfirm
+            v-model="showAmountToPayDialog"
+            :message="t('amountToPay')"
+            :promise="onConfirmPay"
+        >
+            <template #customHTML>
+                <VnInput
+                    v-model="amountToPay"
+                    :clearable="false"
+                    class="full-width"
+                />
+            </template>
+        </VnConfirm>
     </QPage>
 </template>