initial

apps/pay/components/invoice-form/details.vue

@@ -0,0 +1,122 @@
+<template>
+  <UiAccordion
+    active-icon="disclosure-up"
+    inactive-icon="disclosure-down"
+    :model-value="accordion ? undefined : 'details'"
+    :disabled="!accordion"
+  >
+    <UiAccordionItem id="details" :class="cn.b()">
+      <template #title>
+        <p :class="cn.e('title')">
+          Payment details
+        </p>
+      </template>
+
+      <template #default>
+        <dl :class="cn.e('list')">
+          <!--          <dt>Date</dt> -->
+          <!--          <dd>22 сент. 2022г., 11:27</dd> -->
+
+          <dt>Status</dt>
+          <dd :class="[cn.e('status-text'), invoice.status]">
+            {{ statusText }}
+          </dd>
+
+          <dt>Blockchain</dt>
+          <dd>
+            TRON
+          </dd>
+
+          <dt>Sender</dt>
+          <dd>
+            <TextShortener :text="invoice.transfers?.[0]?.sender" />
+          </dd>
+
+          <dt>Recipient</dt>
+          <dd>
+            <TextShortener :text="invoice.transfers?.[0]?.recipient" />
+          </dd>
+
+          <dt>TXID</dt>
+          <dd>
+            <TextShortener :text="invoice.transfers?.[0]?.txID" />
+          </dd>
+        </dl>
+      </template>
+    </UiAccordionItem>
+  </UiAccordion>
+</template>
+
+<script setup>
+defineProps({
+  accordion: Boolean,
+})
+
+const { invoice } = inject('public-invoice')
+
+const cn = useClassname('invoice-form-details')
+
+const statusText = computed(() => {
+  switch (invoice.value.status) {
+    case 'completed':
+      return 'Payment success'
+    case 'underpaid':
+      return 'Invoice has been partially paid'
+    case 'overpaid':
+      return 'Invoice has been over paid'
+  }
+})
+</script>
+
+<style lang="scss">
+.invoice-form-details {
+  $self: &;
+
+  --accordion-head-padding: 16px;
+  --accordion-head-active-padding: 16px;
+  --accordion-content-padding: 0 16px 16px;
+
+  text-align: left;
+  outline: none !important;
+
+  &:hover,
+  &.is-active {
+    background-color: $clr-grey-100;
+  }
+
+  &__title {
+    @include txt-l-m;
+  }
+
+  &__list {
+    @include txt-r-m;
+    @include txt-r-m('text-shortener', true);
+
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    row-gap: 16px;
+    margin: 0;
+    color: $clr-grey-500;
+
+    dt, dd {
+      margin: 0;
+    }
+
+    dt {
+      color: $clr-grey-600;
+    }
+
+    dd {
+      text-align: right;
+    }
+  }
+
+  &__status-text {
+    color: $clr-warn-500;
+
+    &.completed {
+      color: $clr-green-500;
+    }
+  }
+}
+</style>