initial

apps/pay/components/invoice-form/step/overpaid.vue

@@ -0,0 +1,95 @@
+<template>
+  <div :class="cn.m('success')">
+    <img
+      src="/partially.svg"
+      alt="Success"
+      class="mb-16"
+      data-status-illustration
+    >
+
+    <h2 class="text-clr-green-500">
+      Invoice has been over paid
+    </h2>
+
+    <div class="mt-16">
+      <UiCoin :code="invoice.currencyCode" />
+
+      <MoneyAmount
+        :class="cn.e('amount')"
+        :value="invoice.amount"
+        :currency="invoice.currencyCode"
+      />
+    </div>
+
+    <InvoiceFormDetails :class="cn.e('details')" accordion />
+
+    <UiButton
+      :class="cn.e('back-to-store')"
+      size="large"
+      :href="invoice.redirectUrl"
+    >
+      Back to store
+    </UiButton>
+
+    <UiButton
+      :class="cn.e('explorer')"
+      type="link"
+      color="secondary"
+      :href="explorerLink"
+      target="_blank"
+    >
+      Просмотреть в обозревателе блоков
+    </UiButton>
+
+    <InvoiceFormSeparator />
+  </div>
+</template>
+
+<script setup>
+const { invoice } = inject('public-invoice')
+
+const cn = useClassname('invoice-form')
+
+const explorerLink = computed(() => {
+  return `https://nile.tronscan.org/#/address/${invoice.value.walletAddress}`
+})
+</script>
+
+<style lang="scss">
+.invoice-form {
+  $self: &;
+
+  &--success {
+    #{$self}__amount {
+      @include h2('money-amount-value', true);
+
+      margin-left: 8px;
+    }
+
+    #{$self}__transaction-id {
+      text-align: center;
+      color: $clr-grey-400;
+      margin-top: 16px;
+
+      strong {
+        font-weight: 600;
+        color: $clr-grey-500;
+      }
+    }
+
+    #{$self}__details {
+      margin-top: 32px;
+    }
+
+    #{$self}__back-to-store {
+      width: 100%;
+      margin-top: 32px;
+    }
+
+    #{$self}__explorer {
+      width: 100%;
+      margin-top: 24px;
+    }
+  }
+}
+</style>