shipping-portal/resources/assets/vue/components/settings/elements/PaymentAttemptComponent.vue

<template>
    <div class="row no-margin">
        <div class="col p-t-5 p-b-5 b-grey b-a">
            <div class="row text-center">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div class="font-heading font-orbitron text-danger-light">{{timer.days}}</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-7 muted">Days</div>
                        </div>
                    </div>
                </div>
                <div class="col-auto no-padding">
                    <div class="font-heading p-b-5">:</div>
                </div>
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div class="font-heading font-orbitron text-danger-light">{{timer.hours}}</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-7 muted">Hours</div>
                        </div>
                    </div>
                </div>
                <div class="col-auto no-padding">
                    <div class="font-heading p-b-5">:</div>
                </div>
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div class="font-heading font-orbitron text-danger-light">{{timer.minutes}}</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-7 muted">Minutes</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-auto b-t b-b b-r b-grey pointer requestModal" data-type="paymentAttempt">
            <div class="row h-100 align-items-center">
                <div class="col p-l-10 p-r-10">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                         width="25" height="25"
                         viewBox="0 0 172 172"
                         style=" fill:#000000;"><defs><linearGradient x1="64.5" y1="40.25606" x2="64.5" y2="86.92719" gradientUnits="userSpaceOnUse" id="color-1_VhrilWh3UcXU_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="10.80644" x2="86" y2="157.19456" gradientUnits="userSpaceOnUse" id="color-2_VhrilWh3UcXU_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="10.80644" x2="86" y2="157.19456" gradientUnits="userSpaceOnUse" id="color-3_VhrilWh3UcXU_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M86,75.25v-32.25c-23.74944,0 -43,19.25056 -43,43h32.25c0,-5.93669 4.81331,-10.75 10.75,-10.75z" fill="url(#color-1_VhrilWh3UcXU_gr1)"></path><path d="M86,16.125c-38.53069,0 -69.875,31.34431 -69.875,69.875c0,38.53069 31.34431,69.875 69.875,69.875c38.53069,0 69.875,-31.34431 69.875,-69.875c0,-38.53069 -31.34431,-69.875 -69.875,-69.875zM86,150.5c-35.56369,0 -64.5,-28.93631 -64.5,-64.5c0,-35.56369 28.93631,-64.5 64.5,-64.5c35.56369,0 64.5,28.93631 64.5,64.5c0,35.56369 -28.93631,64.5 -64.5,64.5z" fill="url(#color-2_VhrilWh3UcXU_gr2)"></path><path d="M86,26.875c-32.60206,0 -59.125,26.52294 -59.125,59.125c0,32.60206 26.52294,59.125 59.125,59.125c32.60206,0 59.125,-26.52294 59.125,-59.125c0,-32.60206 -26.52294,-59.125 -59.125,-59.125zM139.61294,88.6875c-0.63694,12.78981 -5.74319,24.39444 -13.81375,33.31156l-5.59269,-5.59269l-3.80013,3.80013l5.59269,5.59269c-8.91712,8.07325 -20.51906,13.17681 -33.31156,13.81375v-7.92544h-5.375v7.92544c-12.78981,-0.63694 -24.39444,-5.74319 -33.31156,-13.81375l5.59269,-5.59269l-3.80013,-3.80013l-5.59269,5.59269c-8.07325,-8.91712 -13.17681,-20.51906 -13.81375,-33.31156h40.44687c1.24969,6.12481 6.67575,10.75 13.16606,10.75c7.40944,0 13.4375,-6.02806 13.4375,-13.4375c0,-6.48763 -4.62519,-11.91638 -10.75,-13.16606v-40.44687c12.78981,0.63694 24.39444,5.74319 33.31156,13.81375l-5.59269,5.59269l3.80013,3.80013l5.59269,-5.59269c8.07325,8.91713 13.17681,20.51906 13.81375,33.31156h-7.92544v5.375zM86,77.9375c4.44512,0 8.0625,3.61737 8.0625,8.0625c0,4.44512 -3.61738,8.0625 -8.0625,8.0625c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625c0,-4.44512 3.61737,-8.0625 8.0625,-8.0625zM83.3125,32.38706v40.44687c-5.25675,1.07231 -9.40625,5.22181 -10.47856,10.47856h-40.44687c1.36794,-27.49044 23.435,-49.5575 50.92544,-50.92544z" fill="url(#color-3_VhrilWh3UcXU_gr3)"></path></g></g></svg>
                </div>
            </div>
        </div>
        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="paymentAttempt">
            <payment-attempt-limit-form-component :data="{
                    segment_id: this.segment_id,
                    name: 'Payment Attempt Duration Limit',
                    reference: this.reference,
                    detail: {
                        minutes: this.minutes
                    }
                }" section="paymentAttemptSection" class="text-center"></payment-attempt-limit-form-component>
        </modal-component>
    </div>
</template>

<script>
    export default {
        props: {
            segment_id: {
                required: true,
                type: Number,
                default: 1
            },
            data:{
                type: Number,
                default: 0
            }
        },
        data(){
            return {
                reference: 'PAYMENT_ATTEMPT_DURATION_LIMIT',
                minutes: 0
            }
        },
        computed: {
            pendingQueue () {
                return this.$store.getters.isInCompleteQueue(this.reference);
            },
            timer () {
                return {
                    days: ('00'+Math.floor(this.minutes / 1440)).substr(('00'+Math.floor(this.minutes / 1440)).length-2),
                    hours: ('00'+(Math.floor(this.minutes / 60) % 24)).substr(('00'+(Math.floor(this.minutes / 60) % 24)).length-2),
                    minutes: ('00'+Math.floor(this.minutes % 60)).substr(('00'+Math.floor(this.minutes % 60)).length-2)
                };
            }
        },
        watch: {
            pendingQueue(inComplete){
                if(inComplete){
                    this.fetchTime();
                }
            },
            'data': function () {
                this.minutes = this.data
            }
        },
        created(){
            if(this.segment_id === 1){
                this.$store.dispatch('updateListQueue', {'name': this.reference});
                return;
            }

            if(this.data){
                this.minutes = this.data
            }

        },
        methods: {
            fetchTime(){
                return this.submit(route('api.segment.constant.show', this.segment_id, this.reference), 'get', '', false, false)
            },
            successHandler(response){
                this.$store.dispatch('completeList', {'name': this.reference, 'data': response.payload.data});
                this.minutes = response.payload.data.detail.hasOwnProperty('minutes') ? response.payload.data.detail.minutes:0;
            }
        }

    }
</script>
<style>
    .blink {
        animation: blink-animation 1s steps(5, start) infinite;
        -webkit-animation: blink-animation 1s steps(5, start) infinite;
    }
    @keyframes blink-animation {
        to {
            visibility: hidden;
        }
    }
    @-webkit-keyframes blink-animation {
        to {
            visibility: hidden;
        }
    }
</style>