bit4sat/web/src/Pay.vue

<template>

    <div id="payment" class="flex flex-column">
        <div class="header flex flex-column justify-between items-start mb1">


        <div class="uid flex justify-between items-center w-100 f5">
            <span class="b f5 mid-gray">ID: {{objectId}}</span>
        </div>
        </div>


        <img class="ba bw3 light-gray" v-if="unpaid" :src="payreqURI" />


        <div v-if="showTimer" class="payreq-wrapper bg-washed-yellow flex justify-center">
            <div class="payreq b f6 tc courier gray">
                <p id="payreq" @click="selectCopy">
                    {{invoice.payreq}}
                </p>
            </div>
        </div>




        <div class="status flex flex-row justify-between items-center">
            <div class="paid">
                <p class="light-red f5 mv2" v-if="unpaid">UNPAID</p>
                <p class="yellow b f5 mv2" v-if="expired">EXPIRED</p>
                <p class="green b f5 mv2" v-if="paid">PAID</p>
            </div>
            <timer v-if="showTimer" :expires="expires" :expired="expired"></timer>
            <div class="paid-date f6 mid-gray" v-if="paid">on &nbsp;{{paidAt}}</div>
        </div>
        <span v-if="unpaid" class="b f5 mid-gray">{{invoice.msatoshi / 1000}} Satoshi</span>
        <canvas id="canvas" hidden>
    </div>

</template>

<script charset="utf-8">
import { mapState, mapGetters } from 'vuex'
import QRCode from 'qrcode';
import Timer from './Timer.vue';



export default {
    data() {
        return {
            payreqURI: "",
            expired: false,
            expires: 0,
        }
    },
    props: ['invoice', 'objectId'],
    methods:{
        makeLnQR(payreq) {
            let canvas = this.$el.querySelector('#canvas')

            QRCode.toDataURL(canvas, payreq.toUpperCase(), {
                margin: 4,
                width: 340,
                errorCorrectionLevel: 'H',
                type: 'png',
                color: {
                    dark: '#ff725cff',
                },
                renderOpts:{
                    quality: 1,
                }
                })
                .then(url => {
                    this.payreqURI = url;
                })
                .catch(err =>{
                    console.error(err);
                })
        },
        selectCopy(ev){
            //ev.target.select()
            //document.execCommand('copy')
            console.log("TODO: select and copy to clipboard")
        }
    },

    computed: {
        ...mapGetters([
            'paid',
            'unpaid'
        ]),

        paidAt: function(){
            return new Date(this.invoice.paid_at).toGMTString();
        },

        showTimer: function(){
            return !this.paid
        }
    },
    watch: {
        invoice: function(val) {
            if (val){
                console.log("new invoice")
                this.expires = 0;
                this.expires = val.expires_at;

                if ((new Date(val.expires_at*1000) - new Date() <= 0 ) &&
                            !this.paid) {
                    this.expired = true;
                } else {
                    this.expired = false;
                }

                this.makeLnQR(val.payreq)
            }
        }
    },
    components:{
        Timer,
    }

}

</script>

<style>

img {
    width: var(--qrcode-width);
    height: var(--qrcode-width);
}

.status {
    min-width: var(--qrcode-width);
}

.payreq {
    word-wrap: break-word;
    max-width: var(--qrcode-width);
}
</style>