initial

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

@@ -0,0 +1,126 @@
+<template>
+  <div :class="cn.m('underpaid')">
+    <img
+      src="/partially.svg"
+      alt="Success"
+      class="mb-16"
+      data-status-illustration
+    >
+
+    <h2 class="text-clr-grey-600">
+      Invoice has been partially paid
+    </h2>
+
+    <p :class="cn.e('total')">
+      Total amount to be paid - <strong>{{ total }}</strong>
+    </p>
+
+    <div class="mt-32">
+      <UiCoin :code="invoice.currencyCode" />
+
+      <div :class="cn.e('collected-amount')">
+        <span>Funds received</span>
+
+        <MoneyAmount
+          :value="invoice.collectedAmount"
+          :currency="invoice.currencyCode"
+        />
+      </div>
+    </div>
+
+    <UiAlert type="warning" :class="cn.e('alert')">
+      You need to deposit the missing part of the funds - <span style="white-space: nowrap">{{ missingAmount }}</span>, otherwise the bill will not be paid
+    </UiAlert>
+
+    <InvoiceFormDetails :class="cn.e('details')" accordion />
+
+    <UiButton
+      :class="cn.e('pay-additional')"
+      size="large"
+      @click="notify({ type: 'warning', id: 'wip', text: 'Work in progress' })"
+    >
+      Pay in addition
+    </UiButton>
+
+    <UiButton
+      :class="cn.e('explorer')"
+      type="link"
+      color="secondary"
+      :href="explorerLink"
+      target="_blank"
+    >
+      Просмотреть в обозревателе блоков
+    </UiButton>
+
+    <InvoiceFormSeparator />
+  </div>
+</template>
+
+<script setup>
+import Decimal from 'decimal.js'
+
+const { invoice } = inject('public-invoice')
+
+const cn = useClassname('invoice-form')
+const notify = useNotify()
+
+const total = computed(() => $money.fullFormat(invoice.value.amount, invoice.value.currencyCode))
+const missingAmount = computed(() => $money.fullFormat(Decimal.sub(invoice.value.amount, invoice.value.collectedAmount), invoice.value.currencyCode))
+const explorerLink = computed(() => {
+  return `https://nile.tronscan.org/#/address/${invoice.value.walletAddress}`
+})
+</script>
+
+<style lang="scss">
+.invoice-form {
+  $self: &;
+
+  &--underpaid {
+    #{$self}__total {
+      @include h4;
+
+      color: $clr-grey-400;
+      margin-top: 4px;
+
+      strong {
+        color: $clr-grey-500;
+      }
+    }
+
+    #{$self}__collected-amount {
+      @include h3('money-amount-value', true);
+
+      display: inline-flex;
+      flex-direction: column;
+      text-align: left;
+      margin-left: 8px;
+      vertical-align: middle;
+
+      > span {
+        @include txt-r-m;
+
+        color: $clr-grey-500;
+      }
+    }
+
+    #{$self}__alert {
+      margin-top: 32px;
+      padding-block: 16px;
+    }
+
+    #{$self}__details {
+      margin-top: 32px;
+    }
+
+    #{$self}__pay-additional {
+      width: 100%;
+      margin-top: 32px;
+    }
+
+    #{$self}__explorer {
+      width: 100%;
+      margin-top: 24px;
+    }
+  }
+}
+</style>