Untitled

mail@pastecode.io avatar
unknown
plain_text
2 years ago
30 kB
2
Indexable
Never
<template>
  <div v-if="activeAuction" class="container-fluid auction-details p-4">
    <div class="d-none d-md-flex align-items-center justify-content-between mb-4 auction-header">
      <div>
        <b-breadcrumb :items="breadcrumbItems"></b-breadcrumb>
        <div class="auction-id">{{ $t('auctions.frontpage.auction_number') }} - #{{ activeAuction.id }}</div>
      </div>
      <div class="d-flex align-items-center">
        <div class="round-btn" role="button">
          <Icon
            :id="`popover-watchlist-item-${activeAuction.id}`"
            src="eye.svg"
            hover-src="red-eye.svg"
            :active="!!watchlist"
            width="20"
            height="20"
            tabindex="0"
            disableHover
            class="action-icon"
            :alt-text="watchlist ? watchlist.name : ''"
            :tooltip-text="watchlist ? watchlist.name : ''"
            @click="removeFromWatchList"
          />
        </div>
        <div :id="`popover-share-${activeAuction.id}`" class="round-btn" role="button" ><share-icon></share-icon></div>
      </div>
    </div>
    <!-- [mobile] time remaining block -->
    <mobile-time-remaining :end-at="activeAuction.end_date"></mobile-time-remaining>
    <div v-if="activeAuction.auction_items && activeAuction.auction_items.length > 0" class="auction-content">
      <div class="auction-content-main">
        <!-- Auction items carousel with arrows -->
        <div v-if="activeAuction.type === 'collection'" class="collection-items-slider">
          <LeftArrow role="button" :class="{ disabled: currentItemIdx === 0 }" @click="moveBack" />
          <span>{{`${currentItemIdx + 1} ${$t('auctions.frontpage.of')} ${activeAuction.auction_items.length} ${$t('common.items')}`}}</span>
          <RightArrow role="button" :class="{ disabled: currentItemIdx === activeAuction.auction_items.length - 1 }" @click="moveForward" />
        </div>
        <!-- Media Viewer & thumbnails list -->
        <media-carousel-with-thumbs :images="images.slice(currentItemIdx, currentItemIdx + 1)"></media-carousel-with-thumbs>
        <div class="mt-5 body-5-bold">
          {{ $t('auctions.frontpage.have_piece_to_sell') }} <nuxt-link to="#">{{ $t('auctions.frontpage.create_listing') }}</nuxt-link>
        </div>
        <div class="mt-5">
          <b-tabs pills class="product-details-tabs">
            <b-tab title="Product Details" active>
                <div>{{ $t('common.sku') }}: {{ activeAuction.auction_items[currentItemIdx].inventory.product.sku }}</div>
                <div>{{ $t('common.colorway') }}: {{ activeAuction.auction_items[currentItemIdx].inventory.color }}</div>
                <div>{{ $t('common.box_condition') }}: {{ activeAuction.auction_items[currentItemIdx].inventory.packaging_condition.name }}</div>
                <div>{{ $t('product_page.release_date') }}: {{ activeAuction.auction_items[currentItemIdx].created_at | formatDate }}</div>
            </b-tab>
            <b-tab title="Size Guide">
              <div class="size-guide-content">
                <div>
                  <strong>{{ $t('auctions.frontpage.size_guide_text') }}</strong>
                  <div class="size-table">
                    <div class="size-sticky-col">
                      <div v-for="(size, idx) in sizes" :key="idx" class="size-table-cell">{{ size.type }}</div>
                    </div>
                    <div class="size-table-content">
                      <div v-for="(size, idx) in sizes" :key="idx" class="size-table-row">
                        <div v-for="(item, index) in size.items" :key="`cell-${idx}-${index}`" class="size-table-cell">{{ item }}</div>
                      </div>
                    </div>
                  </div>
                  <OverallFit />
                </div>
                <div>
                </div>
              </div>
            </b-tab>
          </b-tabs>
        </div>
        <div class="mt-5 auction-details">
          <div class="auction-details-title">{{ $t('auctions.frontpage.details') }}</div>
          <div class="mt-3 mb-4 mr-5 auction-details-border"></div>
          <div class="auction-details-content">
            <div>{{ $t('auctions.frontpage.estimated_value') }}: ${{ activeAuction.estimated_low_price | formatPrice }} - {{ activeAuction.high_price | formatPrice }}</div>
            <div>{{ $t('auctions.frontpage.duration') }}: {{ activeAuction.time_limit }} {{ $tc('common.day', activeAuction.time_limit) }}</div>
            <div>{{ $t('auctions.frontpage.auction_type') }}: {{ activeAuction.type === 'single' ? 'Single Item' : 'Collection' }}</div>
            <div class="mt-3 rating">{{ $t('auctions.frontpage.auctioneer_rating') }}: 97%</div> <!-- Todo -->
          </div>
        </div>
      </div>
      <div class="auction-content-side">
        <div class="mb-4 text-center stats-box">
          <div>
            <span class="stat-name">{{ $t('home_page.timeremaining') }}</span>
            <div class="text-danger stat-value">{{ activeAuction | remainingTime('medium') }}</div>
          </div>
          <div>
            <span class="stat-name">{{ $t('auctions.frontpage.starting_bid') }}</span>
            <div class="stat-value">${{ activeAuction.highest_bid | formatPrice }}</div>
          </div>
          <div>
            <span class="stat-name">{{ $t('auctions.frontpage.number_of_bids') }}</span>
            <div class="stat-value">{{ activeAuction.bids.length }}</div>
          </div>
          <div>
            <span class="stat-name">{{ $t('auctions.frontpage.watchers') }}</span>
            <div class="stat-value">{{ activeAuction.number_of_bidders }}</div>
          </div>
        </div>
        <div class="mb-4 d-flex justify-content-between product-info-box">
          <div>
            <div class="product-info-box-title">{{ activeAuction.auction_items[currentItemIdx].inventory.product.name }}</div>
            <div class="product-info-box-value">{{ activeAuction.auction_items[currentItemIdx].inventory.color.name }}</div>
          </div>
          <div class="product-info-box-value">
            {{ $t('common.size') }} {{ activeAuction.auction_items[currentItemIdx].inventory.size.size }}
          </div>
        </div>
        <div class="mb-4 text-center bid-details">
          <strong class="bid-details-price">{{ $t('auctions.frontpage.current_bid') }}: ${{ activeAuction.highest_bid | formatPrice }}</strong>
          <div class="mt-4 place-bid-form">
            <div class="place-bid-form-title">{{ $t('auctions.frontpage.place_bid') }}</div>
            <input v-model="placeBidPrice" :placeholder="$t('auctions.frontpage.insert_amount')" />
            <ArrowFillIcon role="button" :disabled="!placeBidPrice" @click="placeBid" />
          </div>
          <div v-if="showLowBidError" class="text-left text-danger mt-1">
            {{ $t('auctions.frontpage.place_bid_error') }}
          </div>
          <div class="mt-4 quick-bid">
            <div class="mb-3 quick-bid-title">{{ $t('auctions.frontpage.quick_bid') }}</div>
            <div class="d-flex align-items-center justify-content-between">
              <div
                v-for="price in quickBidPrices"
                :key="price"
                class="quick-bid-btn"
                @click="placeQuickBid(price)"
              >
                ${{ price / 100 }}
              </div>
            </div>
          </div>
          <div class="mt-4 auto-bid">
            <div class="position-relative d-inline-block auto-bid-title">
              <strong>{{ $t('auctions.frontpage.auto_bid') }}</strong>
              <InfoIcon id="info-icon" />
              <b-tooltip target="info-icon" custom-class="auto-bid-tooltip" triggers="hover">
                {{ $t('auctions.frontpage.auto_bid_tooltip') }} <span v-b-modal.auto-bid-thresholds-modal class="text-primary">{{ $t('auctions.frontpage.view_threshold_chart') }}</span>
              </b-tooltip>
            </div>
            <div class="mt-3 d-flex justify-content-between auto-bid-content">
              <input v-model="autoBidPrice" :placeholder="$t('auctions.frontpage.up_to')" />
              <b-btn :disabled="!autoBidPrice || parseFloat(autoBidPrice) * 100 < activeAuction.highest_bid" pill @click="placeAutoBid">{{ $t('auctions.frontpage.place_auto_bid') }}</b-btn>
            </div>
            <div v-if="authUser && activeAuction.auto_bid_setting" class="mt-3 text-left auto-bid-setting">
              <div>{{ $t('auctions.frontpage.prev_auto_bid_placed_at') }} ${{ activeAuction.auto_bid_setting.price | formatPrice }}</div>
              <div class="d-flex align-items-center mt-1">
                <strong class="mr-3">{{ $t('auctions.frontpage.auto_bid_settings') }}</strong>
                <span class="mr-3">{{ autoBidDisabled ? 'Disabled' : 'Enabled' }}</span>
                <b-form-checkbox :checked="!autoBidDisabled" switch size="lg" @change="onUpdateAutoBidSetting(!autoBidDisabled)"></b-form-checkbox>
              </div>
            </div>
          </div>
          <!-- Expired Wrapper -->
          <div v-if="isExpired" class="expired-wrapper">
            <ExpiredSvg></ExpiredSvg>
          </div>
        </div>
        <div class="recent-bidding-history">
          <div class="recent-bidding-history-title">{{ $t('auctions.frontpage.recent_bidding_history') }}</div>
          <table class="mt-3">
            <thead>
              <tr>
                <th>{{ $t('auctions.frontpage.time_date') }}</th>
                <th>{{ $t('auctions.frontpage.bid_amount') }}</th>
              </tr>
            </thead>
            <tbody>
              <template v-if="activeAuction.bids.length > 0">
                <tr v-for="bid in activeAuction.bids" :key="bid.id">
                  <td>
                    <strong>{{ bid.created_at | formatDate('MM-DD-YYYY') }}</strong>
                    <span>{{ bid.created_at | formatTime }}</span>
                  </td>
                  <td>${{ bid.price | formatPrice }}</td>
                </tr>
              </template>
              <template v-else>
                <tr>
                  <td>-</td>
                  <td>-</td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="similar-auctions">
      <product-slider
        :title="$t('auctions.frontpage.auction_details.similar_auctions')"
        :auctions="similarAuctions"
        @showAll="showAllAuctions"
      ></product-slider>
    </div>
    <b-modal id="auto-bid-thresholds-modal" hide-footer hide-header size="lg">
      <close-icon class="close-icon" @click="$bvModal.hide('auto-bid-thresholds-modal')"></close-icon>
      <h3 class="thresholds-modal-title">{{ $t('auctions.frontpage.auto_bid_thresholds') }}</h3>
      <p class="thresholds-modal-content">{{ $t('auctions.frontpage.auto_bid_modal_content') }}</p>
      <div class="pb-4">
        <b-table :items="ThresholdsData" :fields="ThresholdFields">
          <template #cell(current_bid)="row">
            <div>{{ row.item.current_bid }}</div>
          </template>
          <template #cell(bid_increment)="row">
            <div>{{ row.item.bid_increment }}</div>
          </template>
        </b-table>
      </div>
    </b-modal>
    <b-modal id="auto-bid-modal" centered hide-footer hide-header size="lg">
      <div class="text-right">
        <close-icon class="close-icon auto-bid-auth-link" @click="$bvModal.hide('auto-bid-modal')"></close-icon>
      </div>
      <h1 class="auto-bid-modal-title">
        {{ authUser ? $t('auctions.frontpage.enable_auto_bid') : $t('auctions.frontpage.signup_enable_auto_bid') }}
      </h1>
      <div v-if="autoBidStep === 'auth'" class="auto-bid-auth">
        <div v-if="activeAuthTab === 'signup'" class="auto-bid-auth-signup">
          <sign-up-component @complete="onAuthFinished"></sign-up-component>
          <div class="mb-4">
            {{ $t('auctions.frontpage.already_have_account') }}&nbsp;
            <span class="text-primary auto-bid-auth-link" @click="activeAuthTab = 'login'">
              {{ $t('auctions.frontpage.login_to_continue') }}
            </span>
          </div>
        </div>
        <div v-else class="auto-bid-auth-login">
          <login-component inlineMode @complete="onAuthFinished"></login-component>
          <div class="mb-4">
            {{ $t('auctions.frontpage.have_no_account_yet') }}&nbsp;
            <span class="text-primary auto-bid-auth-link" @click="activeAuthTab = 'signup'">
              {{ $t('auctions.frontpage.register_new_one') }}
            </span>
          </div>
        </div>
      </div>
      <div v-if="autoBidStep === 'payment'">
        <div class="auto-bid-section">
          <div class="auto-bid-section-title">{{ $t('auctions.frontpage.payment_method') }}</div>
          <Cards isInlineMode :cta-label="'Next'" @complete="autoBidStep = 'shipping_address'" />
        </div>
      </div>
      <div v-if="autoBidStep === 'shipping_address'">
        <div class="auto-bid-section">
          <div class="auto-bid-section-title">{{ $t('auctions.frontpage.shipping_information') }}</div>
          <ValidationObserver ref="shippingAddressObserver">
            <BillingShippingAddressForm
              addressType="shipping"
              ctaAlignment="center"
              @submit="(address) => addressChanged('shipping', address)"
            ></BillingShippingAddressForm>
          </ValidationObserver>
        </div>
      </div>
      <div v-if="autoBidStep === 'billing_address'">
        <div class="auto-bid-section">
          <div class="auto-bid-section-title">{{ $t('auctions.frontpage.billing_information') }}</div>
          <ValidationObserver ref="billingAddressObserver">
            <BillingShippingAddressForm
              addressType="billing"
              ctaAlignment="center"
              @submit="(address) => addressChanged('billing', address)"
            ></BillingShippingAddressForm>
          </ValidationObserver>
        </div>
      </div>
    </b-modal>
    <!-- Bid Confirm Modal -->
    <b-modal id="quick-bid-modal" hide-footer hide-header size="md">
      <div class="text-right">
        <close-icon role="button" class="close-icon" @click="$bvModal.hide('quick-bid-modal')"></close-icon>
      </div>
      <div>
        <h5 class="mt-3 mb-4 mx-auto w-75">{{ modalData.title }}</h5>
        <div class="d-flex justify-content-center">
          <span class="text-primary mr-3">{{ $t('auctions.frontpage.time_remaining') }}</span><strong class="text-danger">{{ activeAuction | remainingTime('medium') }}</strong>
        </div>
        <div class="my-4 d-flex justify-content-center">
          <b-button class="mx-2 px-4" variant="primary" pill @click="onPlaceBidConfirmed">{{ modalData.auto_bid ? $t('auctions.frontpage.bid_up_to') : $t('auctions.frontpage.bid') }} ${{ modalData.price | formatPrice }}<small> {{ $t('auctions.frontpage.fees') }}</small></b-button>
          <b-button class="mx-2 px-5" variant="outline-dark" pill @click="$bvModal.hide('quick-bid-modal')">{{ $t('common.cancel') }}</b-button>
        </div>
        <div class="text-center"><small>{{ $t('auctions.frontpage.placed_bid_desc') }}</small></div>
        <div class="text-center"><small>{{ $t('auctions.frontpage.read_about') }} <nuxt-link to="/fee-policy" class="text-primary">{{ $t('auctions.frontpage.policies_and_fees') }}</nuxt-link></small></div>
      </div>
    </b-modal>
    <!-- Bid Confirm Modal -->
    <b-modal id="auto-bid-enable-modal" hide-footer hide-header size="md">
      <div class="text-right">
        <close-icon role="button" class="close-icon" @click="$bvModal.hide('auto-bid-enable-modal')"></close-icon>
      </div>
      <div>
        <h5 class="mt-3 mb-4 mx-auto w-75">{{ $t('auctions.frontpage.enable_auto_bid_confirm_text') }}</h5>
        <div class="d-flex justify-content-center">
          <span class="text-primary mr-3">{{ $t('auctions.frontpage.time_remaining') }}</span><strong class="text-danger">{{ activeAuction | remainingTime('medium') }}</strong>
        </div>
        <div class="my-4 d-flex justify-content-center">
          <b-button class="mx-2 px-4" variant="primary" pill @click="onEnableAutoBid">{{ $t('auctions.frontpage.bid_up_to') }} ${{ autoBidPrice }}<small> {{ $t('auctions.frontpage.fees') }}</small></b-button>
          <b-button class="mx-2 px-5" variant="outline-dark" pill @click="$bvModal.hide('auto-bid-enable-modal')">{{ $t('common.cancel') }}</b-button>
        </div>
        <div class="text-center"><small>{{ $t('auctions.frontpage.placed_bid_desc') }}</small></div>
        <div class="text-center"><small>{{ $t('auctions.frontpage.read_about') }} <nuxt-link to="/fee-policy" class="text-primary">{{ $t('auctions.frontpage.policies_and_fees') }}</nuxt-link></small></div>
      </div>
    </b-modal>
    <b-modal id="auto-bid-success-modal" hide-footer hide-header size="md">
      <div class="text-right">
        <close-icon role="button" class="close-icon" @click="$bvModal.hide('auto-bid-success-modal')"></close-icon>
      </div>
      <div class="text-center w-75 mx-auto my-2">
        <div class="success-text">{{ $t('auctions.frontpage.success_bid_msg') }}</div>
        <div class="d-flex align-items-center justify-content-center mx-auto mt-3 checkmark-icon">
          <CheckmarkIcon />
        </div>
      </div>
    </b-modal>
    <WatchlistPopover
      v-if="!watchlist"
      :auction="activeAuction"
      :target="`popover-watchlist-item-${activeAuction.id}`"
      @show="watchlistShow = true"
      @hidden="watchlistShow = false"
      @watchlisted="onWatchlisted"
    />
    <b-popover
      ref="sharePopover"
      :target="`popover-share-${activeAuction.id}`"
      triggers="hover"
      placement="bottom"
      :container="`popover-share-${activeAuction.id}`"
      custom-class="watchlist-popover"
      delay="200"
      @show="shareShow = true"
      @hidden="shareShow = false"
    >
      <ShareButton
        :url="shareUrl + activeAuction.id"
        :title="auctionName"
        :description="''"
      />
    </b-popover>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { ValidationObserver } from 'vee-validate'

import ProductSlider from '~/components/Auctions/ProductSlider'
import MediaCarouselWithThumbs from '~/components/Auctions/MediaCarouselWithThumbs'
import OverallFit from '~/components/Auctions/OverallFit'
import ArrowFillIcon from '~/assets/img/icons/arrow-fill.svg?inline'
import InfoIcon from '~/assets/img/icons/info-blue.svg?inline'
import ShareIcon from '~/assets/img/icons/share.svg?inline'
import CloseIcon from '~/assets/img/icons/close.svg?inline'
import SignUpComponent from '~/components/Auth/SignUpComponent'
import LoginComponent from '~/components/Auth/LoginComponent'
import Cards from '~/components/profile/preferences/Popup/Payments/Cards'
import BillingShippingAddressForm from '~/components/profile/preferences/Popup/BillingShippingAddressForm'
import ExpiredSvg from '~/assets/img/icons/expired-mark.svg?inline'
import { AuctionThresholdsData, AuctionSizes, AUCTION_TYPE_COLLECTION, WATCHLIST_TYPE_AUCTION } from '~/static/constants'
import CheckmarkIcon from '~/assets/img/icons/checkmark.svg?inline'
import LeftArrow from '~/assets/img/home/arrow-left.svg?inline'
import RightArrow from '~/assets/img/home/arrow-right.svg?inline'
import {API_PROD_URL} from '~/static/constants/environments'
import {LARGE_PRODUCT_IMG_WIDTH, THUMB_PRODUCT_IMG_WIDTH, DEADSTOCK_PRODUCT_FALLBACK_IMAGE, EXPIRED_STATUS} from '~/static/constants/auctions'
import WatchlistPopover from '~/components/watchlist/Popover'
import ShareButton from '~/components/common/ShareButton'
import Icon from '~/components/common/Icon.vue'
import MobileTimeRemaining from '~/components/Auctions/MobileTimeRemaining'

export default {
  name: 'AuctionDetailsPage',
  components: {
    ShareIcon,
    ProductSlider,
    MediaCarouselWithThumbs,
    ArrowFillIcon,
    InfoIcon,
    CloseIcon,
    OverallFit,
    SignUpComponent,
    LoginComponent,
    Cards,
    BillingShippingAddressForm,
    ValidationObserver,
    ExpiredSvg,
    CheckmarkIcon,
    RightArrow,
    LeftArrow,
    WatchlistPopover,
    ShareButton,
    Icon,
    MobileTimeRemaining,
  },
  layout: 'IndexLayout',
  data() {
    return {
      loading: false,
      breadcrumbItems: [],
      images: [],
      similarAuctions: [],
      ThresholdFields: [
        {
          key: 'current_bid',
          label: this.$t('auctions.frontpage.auction_details.thresholds_current_bid'),
          class: 'current-bid',
        },
        {
          key: 'bid_increment',
          label: this.$t('auctions.frontpage.auction_details.thresholds_bid_increment'),
          class: 'bid-increment',
        },
      ],
      ThresholdsData: AuctionThresholdsData,
      sizes: AuctionSizes,
      activeAuthTab: 'signup',
      authUser: this.$auth.user,
      autoBidStep: this.$auth.loggedIn ? 'payment' : 'auth',
      quickBidPrices: [],
      quickBidPrice: null,
      modalData: {},
      placeBidPrice: null,
      autoBidPrice: null,
      API_PROD_URL,
      isExpired: false,
      showLowBidError: false,
      isAutoBidConfigSaving: false,
      autoBidDisabled: false,
      currentItemIdx: 0,
      shareShow: false,
      shareUrl: `${process.env.APP_URL}/auction/`,
      watchlistShow: false,
      watchlist: null,
      auctionName: '',
    }
  },
  computed: {
    ...mapGetters({
      activeAuction: 'auction/activeAuction',
    }),
  },
  watch: {
    activeAuction(newV) {
      this.breadcrumbItems = [
        {
          text: this.$t('home.auctions'),
          href: '/auction'
        },
        {
          text: this.$t('home_page.collections'),
        },
        {
          text: `${this.$t('auctions.frontpage.auction_id')}# ${newV.id}`,
          active: true
        }
      ]
      this.images = newV.auction_items.map(item => {
        if (item.inventory.product.category && LARGE_PRODUCT_IMG_WIDTH && THUMB_PRODUCT_IMG_WIDTH) {
          return {
            big: `${this.API_PROD_URL}/${item.inventory.product.category.name}/${item.inventory.product.sku}/image?width=${LARGE_PRODUCT_IMG_WIDTH}`,
            thumb: `${this.API_PROD_URL}/${item.inventory.product.category.name}/${item.inventory.product.sku}/image?width=${THUMB_PRODUCT_IMG_WIDTH}`,
          }
        }
        return {
          big: DEADSTOCK_PRODUCT_FALLBACK_IMAGE,
          thumb: DEADSTOCK_PRODUCT_FALLBACK_IMAGE,
        }
      })
      const mainPrice = Math.floor(newV.highest_bid / 5000) + 1;
      this.quickBidPrices = [mainPrice * 5000, (mainPrice + 1) *5000, (mainPrice + 2) * 5000, (mainPrice + 3) * 5000]
      if (this.$options.filters.remainingTime(newV) === EXPIRED_STATUS || newV.status === EXPIRED_STATUS) {
        this.isExpired = true
      }
      this.autoBidDisabled = newV.auto_bid_setting ? newV.auto_bid_setting.is_disabled : false
      this.auctionName = this.getAuctionName(newV)
      this.watchlist = newV.watchlist_item?.watchlist
      this.loadSimilarAuctions()
    },
    placeBidPrice() {
      this.showLowBidError = false
    },
  },
  mounted() {
    this.loadAuction()
  },
  methods: {
    ...mapActions({
      removeItemsFromWatchList: 'watchlist/removeItemsFromWatchList',
    }),
    ...mapMutations({
      updateBidPrice: 'auction/updateActiveAuctionPrice',
      updateAuction: 'auction/updateActiveAuction',
    }),
    // Load auction details
    loadAuction() {
      this.loading = true
      const { id: auctionId } = this.$route.params
      this.$store.dispatch('auction/getAuctionDetails', auctionId)
    },
    // Click place bid button
    placeBid() {
      if (this.placeBidPrice * 100 <= this.activeAuction.highest_bid) {
        this.showLowBidError = true
      } else {
        this.modalData = {
          title: this.$t('auctions.frontpage.place_bid_modal_content'),
          price: this.placeBidPrice * 100,
        }
        this.$bvModal.show('quick-bid-modal')
      }
    },
    onAuthFinished(user) {
      this.authUser = user
      this.getAutoBidStep()
    },
    // Add Shipping/Billing address to current login user
    addressChanged(type, address) {
      if (type === 'shipping') {
        this.$refs.shippingAddressObserver.validate().then((success) => {
          if (success) {
            this.addAddress(address)
          }
        })
      } else {
        this.$refs.billingAddressObserver.validate().then((success) => {
          if (success) {
            this.addAddress(address)
          }
        })
      }
    },
    // Add Shipping/ Billing Address
    addAddress(address) {
      this.$axios
        .post('/preferences/profile/add-address', address)
        .then((res) => {
          this.$toasted.success(this.$t(res.data.message))
          if (address.type === 'billing') {
            this.$bvModal.hide('auto-bid-modal')
            this.$bvModal.show('auto-bid-enable-modal')
          }
          const billingAddresses = this.authUser.addresses.filter(address => address.type === 'BILLING')
          if (address.type === 'shipping') {
            if (billingAddresses.length > 0 || address.addAsBilling === true) {
              this.$bvModal.hide('auto-bid-modal')
              this.$bvModal.show('auto-bid-enable-modal')
            } else {
              this.autoBidStep = 'billing_address'
            }
          }
        })
        .catch((err) => {
          this.$logger.logToServer(
            'Preferences Section - Add Address:',
            err.response.data
          )
          this.$toasted.error(err.response.data.message)
        })
    },
    // Go to bid checkout page
    onPlaceBidConfirmed() {
      this.updateBidPrice(this.modalData.price)
      this.$router.push('/checkout/auction')
    },
    // Click quick bid button
    placeQuickBid(price) {
      this.modalData = {
        title: this.$t('auctions.frontpage.place_quick_bid_modal_content'),
        price,
      }
      this.$bvModal.show('quick-bid-modal')
    },
    // Click autobid button
    placeAutoBid() {
      if (this.authUser) {
        this.getAutoBidStep()
      } else {
        this.$bvModal.show('auto-bid-modal')
      }
    },
    // Similar auctions
    loadSimilarAuctions() {
      this.$axios.get('/auctions/public', {
        params: {
          status: 'live',
          take: 8,
          type: this.activeAuction.type,
        }
      })
        .then(res => {
          this.similarAuctions = res.data.data
        })
        .catch(err => {
          this.$toasted.error(err)
        })
    },
    // Find which step will be shown in autobid modal
    getAutoBidStep() {
      if (this.authUser) {
        if (this.authUser.paymentmethod && this.authUser.paymentmethod.length > 0) {
          const billingAddresses = this.authUser.addresses.filter(address => address.type === 'BILLING')
          const shippingAddresses = this.authUser.addresses.filter(address => address.type === 'SHIPPING')
          if (shippingAddresses.length > 0 && billingAddresses.length > 0) {
            this.$bvModal.hide('auto-bid-modal')
            this.$bvModal.show('auto-bid-enable-modal')
          } else {
            this.$bvModal.show('auto-bid-modal')
            if (shippingAddresses.length > 0) {
              this.autoBidStep = 'billing_address'
            } else {
              this.autoBidStep = 'shipping_address'
            }
          }
        } else {
          this.$bvModal.show('auto-bid-modal')
          this.autoBidStep = 'payment'
        }
      }
    },
    // Update auto bid settings
    onEnableAutoBid() {
      this.isAutoBidConfigSaving = true
      this.$axios.post('/auctions/auto-bid', {
        id: this.activeAuction.auto_bid_setting ? this.activeAuction.auto_bid_setting.id : null,
        price: this.autoBidPrice * 100,
        auction_id: this.activeAuction.id,
        user_id: this.$auth.user.id,
        is_disabled: false,
      })
      .then((res) => {
        // Show Auto Bid Confirm Modal
        this.isAutoBidConfigSaving = false
        this.autoBidPrice = null
        this.$bvModal.hide('auto-bid-enable-modal')
        this.$bvModal.show('auto-bid-success-modal')
        this.updateAuction({
          auto_bid_setting: res.data,
        })
      })
      .catch((error) => {
        this.$toasted.error(error)
      })
    },
    // Enable/disable autobid setting
    onUpdateAutoBidSetting(value) {
      this.$axios.post('/auctions/auto-bid', {
        ...this.activeAuction.auto_bid_setting,
        is_disabled: value,
      })
      .then((res) => {
        this.autoBidDisabled = value
        this.$toasted.info(value ? this.$t('auctions.frontpage.auto_bid_setting_disabled') : this.$t('auctions.frontpage.auto_bid_setting_enabled'))
        this.updateAuction({
          auto_bid_setting: res.data,
        })
      })
      .catch((error) => {
        this.$toasted.error(error)
      })
    },
    moveBack() {
      this.currentItemIdx--
    },
    moveForward() {
      this.currentItemIdx++
    },
    // Add auction to Watchlist
    addToWatchlist() {
      this.addItemToWatchlist(this.activeAuction.id)
    },

    onWatchlisted(watchlist) {
      if (watchlist) {
        this.watchlistShow = false
        this.watchlist = watchlist
      }
    },
    removeFromWatchList() {
      if (this.watchlist) {
        this.removeItemsFromWatchList({
          watchlist: this.watchlist,
          ids: [this.activeAuction.id],
          type: WATCHLIST_TYPE_AUCTION,
        })
        this.watchlist = null
      }
    },
    getAuctionName(auction) {
      if (auction) {
        if (auction.type === AUCTION_TYPE_COLLECTION) {
          return auction.name
        }
        if (auction.auction_items && auction.auction_items.length > 0) {
          return auction.auction_items[0].inventory.product.name
        }
      }
      return ''
    },
    showAllAuctions() {
      this.$router.push('/auction')
    }
  },
}
</script>