59 lines
3.3 KiB
Vue
59 lines
3.3 KiB
Vue
<script setup>
|
|
defineProps({
|
|
inventoryItemId: { type: String, required: true },
|
|
provider: { type: String, required: true },
|
|
sourceIdentifier: { type: String, required: true },
|
|
observedPrice: { type: String, required: true },
|
|
overridePrice: { type: String, required: true },
|
|
overrideReason: { type: String, required: true },
|
|
inventory: { type: Array, required: true },
|
|
refreshStatus: { type: String, default: '' },
|
|
isSaving: { type: Boolean, default: false },
|
|
});
|
|
|
|
defineEmits([
|
|
'update:inventoryItemId',
|
|
'update:provider',
|
|
'update:sourceIdentifier',
|
|
'update:observedPrice',
|
|
'update:overridePrice',
|
|
'update:overrideReason',
|
|
'calculate',
|
|
'refresh',
|
|
'override',
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<form id="workflow-pricing" class="showcase-panel pricing-review-step" @submit.prevent="$emit('calculate')">
|
|
<div>
|
|
<p class="catalog-kicker">Step 5</p>
|
|
<h2>Check Pricing</h2>
|
|
<p class="pricing-review-step__intro">Record a source, refresh market data, or add a reasoned private override before listing.</p>
|
|
</div>
|
|
<label class="fixture-label" for="pricing-inventory">Inventory copy</label>
|
|
<select id="pricing-inventory" :value="inventoryItemId" class="fixture-input" required @change="$emit('update:inventoryItemId', $event.target.value)">
|
|
<option value="" disabled>Select a copy</option>
|
|
<option v-for="item in inventory" :key="item.id" :value="item.id">{{ item.id }}</option>
|
|
</select>
|
|
<label class="fixture-label" for="pricing-provider">Provider</label>
|
|
<input id="pricing-provider" :value="provider" class="fixture-input" required @input="$emit('update:provider', $event.target.value)" />
|
|
<label class="fixture-label" for="pricing-source">Source identifier</label>
|
|
<input id="pricing-source" :value="sourceIdentifier" class="fixture-input" required @input="$emit('update:sourceIdentifier', $event.target.value)" />
|
|
<label class="fixture-label" for="pricing-price">Observed price (cents)</label>
|
|
<input id="pricing-price" :value="observedPrice" class="fixture-input" type="number" min="1" required aria-describedby="pricing-money-help" @input="$emit('update:observedPrice', $event.target.value)" />
|
|
<p id="pricing-money-help">Enter observed and manual values in whole cents.</p>
|
|
<button class="button button--primary" type="submit" :disabled="isSaving">Add observation and calculate</button>
|
|
<button class="button button--secondary" type="button" :disabled="isSaving" @click="$emit('refresh')">Refresh from provider<span v-if="refreshStatus"> ({{ refreshStatus }})</span></button>
|
|
<label class="fixture-label" for="override-price">Manual value (cents)</label>
|
|
<input id="override-price" :value="overridePrice" class="fixture-input" type="number" min="0" aria-describedby="pricing-money-help" @input="$emit('update:overridePrice', $event.target.value)" />
|
|
<label class="fixture-label" for="override-reason">Override reason</label>
|
|
<input id="override-reason" :value="overrideReason" class="fixture-input" minlength="3" @input="$emit('update:overrideReason', $event.target.value)" />
|
|
<button class="button button--secondary" type="button" :disabled="isSaving" @click="$emit('override')">Save manual value</button>
|
|
</form>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@use './PricingReviewStep.scss';
|
|
</style>
|