Untitled
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') }} <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') }} <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>