@freteclick/quasar-financial-ui 1.0.103 → 1.0.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@freteclick/quasar-financial-ui",
-  "version": "1.0.103",
+  "version": "1.0.104",
   "author": "FreteClick",
   "description": "FreteClick financial Quasar UI Component",
   "license": "MIT",

package/src/components/invoice/client/ClientInvoiceDetails.vue

@@ -93,10 +93,7 @@
           </q-tab-panel>
 
           <q-tab-panel name="invoice" class="q-pa-none">
-            <InvoiceInvoice
-              :invoiceId="invoiceId"
-              :orderId  ="orderId"
-            />
+              <InvoiceInvoice ref="invoiceBillet" :invoiceId="invoiceId" :orderId="orderId" :invoice="invoice" />
           </q-tab-panel>
         </q-tab-panels>
       </div>

package/src/components/invoice/client/details/InvoiceInvoice.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="row items-center justify-center">
     <div class="flex flex-center" v-if="isLoading">
-      <q-circular-progress
-        :indeterminate="isLoading"
-        size="sm"
-        color="primary"
-        class="q-ma-md"
-      />
+      <q-circular-progress :indeterminate="isLoading" size="sm" color="primary" class="q-ma-md" />
       Carregando...
     </div>
 
@@ -18,99 +13,38 @@
       </div>
     </div>
 
-    <!-- BILLET VIEWER SICRED -->
-    <div :class="showBilletSicred ? 'full-width q-pa-lg' : 'hidden'">
-      <div class="col-12 q-pt-lg" v-if="paymentInstitution === 'sicred'">
-        <!-- <div class="row justify-center items-center">
-          <q-btn
-              icon="money"
-              size="lg"
-              color="primary"
-              label="Abrir Boleto Pix"
-              :loading="isLoadingDownload"
-              @click="clickDownloadBilletSicred()"
-              :disable="isPaid"
-          />
-        </div> -->
-
-        <div style="height: 1200px">
-            <iframe
-                :src="invoiceUrlSicred"
-                name="BILLETINTER" id="billet_sicred" width="100%" height="100%" frameBorder="0">
-              <p>This browser does not support IFrame.</p>
-            </iframe>
-          </div>
-      </div>
-    </div>
+    <div class="col-12 q-pt-lg">
+      <div class="row justify-center items-center gutter-2">
+        <div class="q-pa-sm">
+          <q-btn icon="money" size="lg" color="primary"
+            :label="invoiceBankId === null ? 'Gerar Boleto' : 'Boleto gerado'" :loading="isLoading"
+            @click="generateSicredBillet()" :disable="isPaid || invoiceBankId !== null" />
+        </div>
+        <div class="q-pa-sm">
+          <q-btn icon="visibility" size="lg" color="primary" label="Ver Boleto" :loading="isLoadingDownload"
+            @click="clickDownloadBilletSicred()" :disable="invoiceBankId === null" />
+        </div>
+
 
-    <!-- BILLET VIEWER INTER -->
-    <div :class="showBilletInter ? 'full-width q-pa-lg' : 'hidden'">
-      <div style="height: 1200px">
-        <iframe
-            :src="invoiceUrlInter"
-            name="BILLETINTER" id="billet_inter" width="100%" height="100%" frameBorder="0">
-          <p>This browser does not support IFrame.</p>
-        </iframe>
       </div>
     </div>
 
-    <!-- BILLET VIEWER ITAU -->
-    <div :class="showBillet ? 'full-width q-pa-lg' : 'hidden'">
-      <q-form
-          ref="myForm"
-          :action="payment !== null ? payment.invoiceUrl : ''"
-          method="post"
-          class="q-mt-sm row justify-center items-center"
-          target="BILLET"
-      >
-        <input type="hidden" name="DC" :value="itauHash"/>
-      </q-form>
+    <!-- BILLET VIEWER SICRED -->
+    <div :class="showBilletSicred ? 'full-width q-pa-lg' : 'hidden'">
       <div style="height: 1200px">
-        <iframe name="BILLET" width="100%" height="100%" frameBorder="0">
+        <iframe :src="invoiceUrlSicred" name="BILLETINTER" id="billet_sicred" width="100%" height="100%"
+          frameBorder="0">
           <p>This browser does not support IFrame.</p>
         </iframe>
       </div>
     </div>
 
-    <!-- BILLET GENERATOR TRIGGER -->
-    <div class="col-12 q-pt-lg" v-if="paymentIsPending && billetMustBeCreated && paymentInstitution === 'itau'">
-      <div style="min-height: 80vh;" class="row justify-center items-center">
-        <q-btn
-            icon="money"
-            size="lg"
-            color="primary"
-            label="Gerar boleto"
-            :loading="retrievingHash"
-            @click="() => {
-            this.retrievingHash = true;
-            this.getItauHash().then(hash => {
-                if (hash !== null) {
-                  this.loadOnFocus = true;
-                  this.$refs.billetForm.$el.submit();
-                }
-              }).finally(() => {
-                this.retrievingHash = false;
-              });
-          }"
-            :disable="isPaid"
-        />
-        <q-form
-            ref="billetForm"
-            :action="payment ? payment.invoiceUrl : ''"
-            method="post"
-            target="_blank"
-        >
-          <input type="hidden" name="DC" :value="itauHash"/>
-        </q-form>
-      </div>
-    </div>
-
     <!-- PAID MESSAGE -->
-    <div class="col-12" v-if="payment !== null && isPaid">
-      <div class="row items-center justify-center" style="min-height: 90vh;">
+    <div class="col-12" v-if="isPaid">
+      <div class="row items-center justify-center q-pt-lg">
         <q-banner class="text-white bg-positive text-center text-h3" rounded>
           <template v-slot:avatar>
-            <q-icon name="thumb_up" color="white"/>
+            <q-icon name="thumb_up" color="white" />
           </template>
           O boleto foi pago
         </q-banner>
@@ -120,9 +54,9 @@
 </template>
 
 <script>
-import {mapActions, mapGetters} from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import axios from 'axios';
-import {ENTRYPOINT} from '@freteclick/../../src/config/entrypoint';
+import { ENTRYPOINT } from '@freteclick/../../src/config/entrypoint';
 
 export default {
   props: {
@@ -134,38 +68,60 @@ export default {
       type: String,
       required: true,
     },
+    invoice: {
+      type: Object,
+      required: true,
+    },
   },
 
   components: {},
 
   mounted() {
-    window.addEventListener('focus', this.loadItauDataOnFocus);
-  },
-
-  beforeDestroy() {
-    window.removeEventListener('focus', this.loadItauDataOnFocus);
   },
 
   created() {
-    this.getPaymentStatus();
+    this.getBank();
+
+    if (this.invoice.status.status === 'paid') {
+      this.isPaid = true;
+      this.showBilletSicred = true;
+    }
+
+    if (this.invoice.paymentType === 'boleto' || this.invoice.invoiceBankId !== null) {
+      this.paymentType = 'boleto';
+      this.showBilletSicred = true;
+      this.invoiceBankId = this.invoice.invoiceBankId;
+    }
+
+    if (this.invoice.paymentType !== null) {
+      this.paymentType = this.invoice.paymentType;
+    }
+
+    console.log(this.invoice);
+    console.log(this.invoice.invoiceBankId);
+
+    console.log('Dados de pagamento: ', this.payment);
+
+    this.clickDownloadBilletSicred();
+
   },
 
   data() {
     return {
-      invoiceUrlInter: null,
       invoiceUrlSicred: null,
-      showBilletInter: null,
-      showBilletSicred: null,
+      showBilletSicred: false,
       showInfoBox: null,
       isLoadingDownload: false,
       isLoading: false,
-      payment: null,
-      isPaid: false,
-      itauHash: null,
+      payment: null, // Recebe dados de pagamento
+      isPaid: false, // Indica se a fatura foi paga
       showBillet: false,
       loadOnFocus: false,
       retrievingHash: false,
-      paymentInstitution: null
+      paymentInstitution: null,
+      paymentStatus: null,
+      paymentType: null,
+      invoiceBankId: null
     };
   },
 
@@ -179,11 +135,12 @@ export default {
 
       return this.payment.invoiceRealStatus === 'pending';
     },
+    // O Boleto deve ser Criado
     billetMustBeCreated() {
       if (this.payment === null)
         return false;
 
-      return this.payment.paymentType === 'choose_pending' || this.payment.paymentStatus !== 'paid';
+      return this.payment.paymentType === 'boleto' || this.payment.paymentStatus !== 'paid';
     },
   },
 
@@ -194,162 +151,46 @@ export default {
       }
     },
 
-    payment(data) {
-      if (!data)
-        return;
-
-      this.isPaid = data.paymentStatus === 'paid';
-
-      if(this.payment.paymentStatus === 'open')
-      {
-        this.showInfoBox = true;
-      }
-
-      if (data.paymentType == 'billet') {
-
-        if (data.paymentStatus !== 'open') {
-
-          this.showInfoBox = false;
-
-          if (this.paymentInstitution === 'itau') {
-            this.getItauHash().then(hash => {
-              if (hash !== null) {
-                this.showBillet = true;
-              }
-            });
-
-          } else if(this.paymentInstitution === 'inter') {
-
-            this.showBillet = false;
-            let urlTmp = ENTRYPOINT + `/vendor/pdf.js/web/viewer.html?file=/finance/${this.invoiceId}/download?timestamp${new Date().getTime()}`;
-            this.invoiceUrlInter = urlTmp;
-            this.isLoading = false;
-            this.showBilletInter = true;
-
-          }
-          else {
-
-            this.showBillet = false;
-            let urlTmp = ENTRYPOINT + `/vendor/pdf.js/web/viewer.html?file=/finance/${this.invoiceId}/bank/sicred/download?timestamp${new Date().getTime()}`;
-            // let urlTmp = ENTRYPOINT + `/download?invoiceUrl=${this.payment.invoiceUrl}`;
-            this.invoiceUrlSicred = urlTmp;
-            this.isLoading = false;
-            this.showBilletSicred = true;
-
-            }
-        }
-
-      }
-
-      this.$emit(
-          'billetStatus',
-          {
-            hasBillet: data.paymentType === 'billet' && data.paymentStatus === 'created',
-            isPaid: data.paymentStatus === 'paid'
-          }
-      );
-
-    },
-
-    showBillet(show) {
-      if (show == true) {
-        this.$refs.myForm.$el.submit();
-      }
-    },
   },
 
   methods: {
     ...mapActions({
-      getItauData: 'receiveInvoice/bankItau',
-      getInterData: 'receiveInvoice/bankInter',
       getSicredData: 'receiveInvoice/bankSicred',
+      getInvoice: 'receiveInvoice/getInvoice',
       getBankPerInvoiceId: 'receiveInvoice/getBankPerInvoiceId',
     }),
 
-    mountInvoiceUrlInter() {
-      let invoiceUrl = encodeURIComponent(this.payment.invoiceUrl);
-      return axios({
-        url: ENTRYPOINT + `/download?invoiceUrl=${invoiceUrl}&timestamp=${new Date().getTime()}`,
-        method: 'get',
-        responseType: 'blob'
-      }).then((response) => {
-        let blob = new Blob([response.data], {type: 'application/pdf'}), url = window.URL.createObjectURL(blob);
-        return url;
-      });
-    },
-
-    clickDownloadBilletInter() {
-      let urlTmp = ENTRYPOINT + `/vendor/pdf.js/web/viewer.html?file=/finance/${this.invoiceId}/download?timestamp${new Date().getTime()}`;
-      window.open(urlTmp);
-    },
-
-    mountInvoiceUrlSicred() {
-      let invoiceUrl = encodeURIComponent(this.payment.invoiceUrl);
-      return axios({
-        url: ENTRYPOINT + `/download?invoiceUrl=${invoiceUrl}&timestamp=${new Date().getTime()}`,
-        method: 'get',
-        responseType: 'blob'
-      }).then((response) => {
-        let blob = new Blob([response.data], {type: 'application/pdf'}), url = window.URL.createObjectURL(blob);
+    // Ver boleto ou baixar
+    clickDownloadBilletSicred() {
+      if (this.isLoadingDownload) {
+        return null;
+      }
 
-        console.log(url);
+      this.isLoadingDownload = true;
 
-        return url;
-      });
-    },
+      const viewerUrl = ENTRYPOINT + `/vendor/pdf.js/web/viewer.html?file=/finance/${this.invoiceId}/bank/sicred/download?timestamp=${new Date().getTime()}`;
+      this.invoiceUrlSicred = viewerUrl;
+      this.showBilletSicred = true;
 
-    clickDownloadBilletSicred() {
-      let urlTmp = ENTRYPOINT + `/download?invoiceUrl=${this.payment.invoiceUrl}`;
-      window.open(urlTmp);
+      this.isLoadingDownload = false;
     },
 
+    // Consulta informações do banco
     getBank() {
-      return this.getBankPerInvoiceId({
-        invoiceId: this.invoiceId
-      }).then(data => {
-        if (data !== null) {
-          this.paymentInstitution = data.config_value;
-          this.getPaymentStatus();
-          return data;
-        }
-        return null;
-      }).catch(error => {
-      });
-    },
-
-    refresh() {
-      this.getPaymentStatus();
-    },
+      return this.getBankPerInvoiceId({ invoiceId: this.invoiceId })
+        .then(data => {
+          if (data !== null) {
+            this.paymentInstitution = data.config_value;
+            return data;
+          }
+          return null;
 
-    loadItauDataOnFocus() {
-      if (this.loadOnFocus) {
-        this.getPaymentStatus().then(data => {
-          this.loadOnFocus = false;
+        }).catch(error => {
         });
-      }
-    },
-
-    getItauHash() {
-      let params = {};
-
-      if (this.myCompany !== null)
-        params['myCompany'] = this.myCompany.id;
-
-      return this.getItauData({
-        invoiceId: this.invoiceId,
-        operation: 'itauhash',
-        params: params
-      }).then(data => {
-        if (data !== null) {
-          return this.itauHash = data;
-        }
-        return null;
-      }).catch(error => {
-
-      });
     },
 
-    getPaymentStatus() {
+    // Gera o boleto
+    generateSicredBillet() {
 
       if (this.isLoading) {
         return null;
@@ -363,94 +204,36 @@ export default {
         params['myCompany'] = this.myCompany.id;
       }
 
-      return this.getBank().then(data2 => {
-
-        if (this.paymentInstitution === 'itau') {
-
-          this.getItauData({
-            invoiceId: this.invoiceId,
-            operation: 'payment',
-            params: params
-          }).then(data => {
-            if (data !== null) {
-              return this.payment = data;
-            }
-            return null;
-          }).catch(error => {
-
-          }).finally(() => {
-            this.isLoading = false;
-            // this.isLoading = false;
-          });
-
-        } else if(this.paymentInstitution === 'inter'){
-
-          this.getInterData({
-            invoiceId: this.invoiceId,
-            operation: 'payment',
-            params: params
-          }).then(data => {
-            if (data !== null) {
-              if (!data.response.success) {
-                let msgErro = data.response.error;
-                this.$q.notify({
-                  message: msgErro,
-                  html: true,
-                  group: false,
-                  multiLine: true,
-                  position: 'bottom',
-                  type: 'negative',
-                });
-                return this.payment = null;
-              } else {
-                return this.payment = data.response.data;
-              }
-            } else {
-              return this.payment = null;
-            }
-            return null;
-          }).catch(error => {
-            console.table(error);
-          }).finally(() => {
-            this.isLoading = false;
-          });
-
-        }
-        else {
-
-          this.getSicredData({
-            invoiceId: this.invoiceId,
-            operation: 'payment',
-            params: params
-          }).then(data => {
-            if (data !== null) {
-              if (!data.response.success) {
-                let msgErro = data.response.error;
-                this.$q.notify({
-                  message: msgErro,
-                  html: true,
-                  group: false,
-                  multiLine: true,
-                  position: 'bottom',
-                  type: 'negative',
-                });
-                return this.payment = null;
-              } else {
-                return this.payment = data.response.data;
-              }
-            } else {
-              return this.payment = null;
-            }
-            return null;
-          }).catch(error => {
-            console.table(error);
-          }).finally(() => {
-            this.isLoading = false;
-          });
-
+      this.getSicredData({
+        invoiceId: this.invoiceId,
+        operation: 'payment',
+        params: params
+      }).then(data => {
+        if (data !== null) {
+          if (!data.response.success) {
+            let msgErro = data.response.error;
+            this.$q.notify({
+              message: msgErro,
+              html: true,
+              group: false,
+              multiLine: true,
+              position: 'bottom',
+              type: 'negative',
+            });
+            return this.payment = null;
+          } else {
+            return this.payment = data.response.data;
+          }
+        } else {
+          return this.payment = null;
         }
 
+      }).catch(error => {
+        console.table(error);
+      }).finally(() => {
+        this.isLoading = false;
       });
+
     },
   },
 };