<template>
  <b-container class="eshop">
    <resume-payment-page-loader v-if="getErrors('FetchSalesDetail') || isLoading('loadingSalesDetails')" />
    <template v-else>
      <order-complete
        class="p-0"
        :download-invoice="false"
        :on-hold-payment-check-option="false"
        :is-use-current-payment-method-only="useCurrentPaymentMethod"
      />
      <b-col class="mx-1 mx-md-2" v-if="isOrderFailed">
        <b-button variant="outline-secondary" class="px-3" @click.once="backToOrderSummary">{{
          $t('Eshop.Back.OrderSummary')
        }}</b-button>
      </b-col>
    </template>
  </b-container>
</template>

<script>
import ResumePaymentPageLoader from '@@@@/app/payment/components/elements/ResumePaymentPageLoader'
import OrderComplete from '@/app/_global/components/blocks/OrderComplete'
import defaultProvider from '@/providers/default'
import { mapGetters, mapActions } from 'vuex'

export default defaultProvider.extend({
  name: 'PaymentCompletePage',
  components: { ResumePaymentPageLoader, OrderComplete },
  props: {
    id: { type: String, default: null },
  },
  data() {
    return {
      useCurrentPaymentMethod: true,
    }
  },
  computed: {
    ...mapGetters(['isOrderFailed', 'isLoading', 'getErrors']),
  },
  beforeRouteEnter(to, from, next) {
    if (from.fullPath === '/') {
      next(vm => {
        let payload = { salesId: to.params.id, signature: to.query.signature }
        vm.retrieveSalesDetails(payload)
        vm.useCurrentPaymentMethod = false
      })
    } else {
      next(vm => {
        vm.useCurrentPaymentMethod = true
      })
    }
  },
  methods: {
    ...mapActions('3rdPartyPayment', ['retrieveSalesDetails']),
    ...mapActions(['clearPaymentStatus']),
    backToOrderSummary() {
      this.clearPaymentStatus()
      let query = this.$route.query
      delete query.redirect
      this.$router.push({ name: 'OrderSummary', params: { id: this.id }, query })
    },
  },
})
</script>
