BAI-17 Add/invoice checkout

.eslintrc.js

@@ -29,5 +29,14 @@ module.exports = {
       },
     ],
     "vue/multi-word-component-names": "off",
+    "new-cap": [
+      "error",
+      {
+        newIsCap: true,
+        capIsNew: false,
+        properties: true,
+        newIsCapExceptions: ["jsPDF"],
+      },
+    ],
   },
 }

components/ReceiptComponent.vue

@@ -0,0 +1,119 @@
+<template>
+  <v-row class="justify-center">
+    <v-col>
+      <v-img
+        class="mt-8"
+        max-height="80"
+        max-width="80"
+        contain
+        :src="`${STATIC_PATH}/icon.svg`"
+      />
+      <v-card-title
+        v-icon="`${STATIC_PATH}/icon.svg`"
+        class="subheading font-weight-bold"
+      >
+        Bitcart AI
+      </v-card-title>
+
+      <v-divider></v-divider>
+
+      <v-list dense>
+        <v-list-item>
+          <v-list-item-content class="grey--text text--darken"
+            ><strong>Invoice ID</strong></v-list-item-content
+          >
+          <v-list-item-content class="align-end">
+            {{ invoice.id }}
+          </v-list-item-content>
+        </v-list-item>
+
+        <v-list-item>
+          <v-list-item-content class="grey--text text--darken"
+            ><strong>Order ID</strong></v-list-item-content
+          >
+          <v-list-item-content class="align-end">
+            {{ invoice.order_id }}
+          </v-list-item-content>
+        </v-list-item>
+
+        <v-list-item>
+          <v-list-item-content class="grey--text text--darken"
+            ><strong>Store ID</strong></v-list-item-content
+          >
+          <v-list-item-content class="align-end">
+            {{ invoice.store_id }}
+          </v-list-item-content>
+        </v-list-item>
+
+        <v-list-item>
+          <v-list-item-content class="grey--text text--darken"
+            ><strong>Total Amount</strong></v-list-item-content
+          >
+          <v-list-item-content class="align-end">
+            {{ invoice.price }}
+            {{ invoice.currency }}
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-content class="grey--text text--darken"
+            ><strong>Sent Amount</strong></v-list-item-content
+          >
+          <v-list-item-content class="align-end">
+            {{ invoice.sent_amount + " " + invoice.currency }}
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-content class="grey--text text--darken"
+            ><strong>Total Fiat</strong></v-list-item-content
+          >
+          <v-list-item-content class="align-end">
+            {{ payment.amount + " " + payment.currency.toUpperCase() }}
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-content class="grey--text text--darken"
+            ><strong>Exchange Rate</strong></v-list-item-content
+          >
+          <v-list-item-content class="align-end">
+            {{ payment.rate_str }}
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-content class="grey--text text--darken"
+            ><strong>Amount Due</strong></v-list-item-content
+          >
+          <v-list-item-content class="align-end">
+            {{ invoice.sent_amount }} {{ invoice.currency }}
+          </v-list-item-content>
+        </v-list-item>
+
+        <v-list-item>
+          <v-list-item-content class="grey--text text--darken"
+            ><strong>Date</strong></v-list-item-content
+          >
+          <v-list-item-content class="align-end">
+            {{ invoice.paid_date.substring(0, 19).replace("T", " ") }}
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+  props: {
+    invoice: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    payment() {
+      return this.invoice.payments.find(
+        (obj) => obj.id === this.invoice.payment_id
+      )
+    },
+  },
+}
+</script>

nuxt.config.js

@@ -71,6 +71,7 @@ export default {
     "~/plugins/eventbus.js",
     { src: "~/plugins/imageinput.js", mode: "client" },
     { src: "~/plugins/datetimepicker.js", mode: "client" },
+    { src: "~/plugins/vue-html2pdf.js", mode: "client" },
     "~/plugins/vueQR.js",
   ],
   /*

package.json

@@ -26,7 +26,8 @@
     "js-cookie": "^3.0.5",
     "nuxt-start": "^2.15.1",
     "socks-proxy-agent": "^8.0.0",
-    "vuex-persistedstate": "^4.1.0"
+    "vuex-persistedstate": "^4.1.0",
+    "vue-html2pdf": "^1.8.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.16.5",

pages/i/_id.vue

@@ -55,6 +55,32 @@
                 {{ texts[status].text }}
               </div>
             </div>
+            <ReceiptComponent :invoice="invoice" />
+            <client-only>
+              <vue-html2pdf
+                ref="transactionReceipt"
+                :show-layout="false"
+                :float-layout="true"
+                :pdf-quality="2"
+                :manual-pagination="true"
+                :pdf-format="pdfFormat"
+                :pdf-orientation="'portrait'"
+                filename="document.pdf"
+              >
+                <div slot="pdf-content">
+                  <style>
+                    @import "~assets/styles/main.css";
+                  </style>
+                  <ReceiptComponent :invoice="invoice" />
+                </div>
+              </vue-html2pdf>
+              <v-btn
+                class="mt-8"
+                color="primary"
+                @click="$refs.transactionReceipt.generatePdf()"
+                >Print</v-btn
+              >
+            </client-only>
           </v-card-text>
         </div>
       </v-card>
@@ -63,13 +89,16 @@
 </template>
 
 <script>
-import TabbedCheckout from "@/components/TabbedCheckout"
 import CloseButton from "@/components/CloseButton"
+import ReceiptComponent from "@/components/ReceiptComponent"
+import TabbedCheckout from "@/components/TabbedCheckout"
+
 export default {
   auth: false,
   components: {
     TabbedCheckout,
     CloseButton,
+    ReceiptComponent,
   },
   layout: "checkout",
   data() {
@@ -137,6 +166,7 @@ export default {
           .catch((err) => (this.errorText = err))
       })
       .catch((err) => this.setError(err))
+    console.log(document.styleSheets)
   },
   beforeDestroy() {
     if (this.websocket) {

plugins/vue-html2pdf.js

@@ -0,0 +1,6 @@
+import Vue from "vue"
+
+if (process.browser) {
+  const VueHtml2pdf = require("vue-html2pdf").default
+  Vue.component("VueHtml2pdf", VueHtml2pdf)
+}