feat(proof): add the price CTA button in the proof detail page

src/components/PriceAddButton.vue

@@ -0,0 +1,37 @@
+<template>
+  <v-btn
+    size="small"
+    color="primary"
+    prepend-icon="mdi-plus"
+    :to="getAddUrl">
+    {{ $t('Common.AddPrice') }}
+  </v-btn>
+</template>
+
+<script>
+export default {
+  props: {
+    product: {
+      type: Object,
+      default: null
+    },
+    proof: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      ADD_PRICE_BASE_URL: '/add/single'
+    }
+  },
+  computed: {
+    getAddUrl() {
+      if (this.proof) {
+        return `${this.ADD_PRICE_BASE_URL}?proof=${this.proof.id}`
+      }
+      return `${this.ADD_PRICE_BASE_URL}?code=${this.product.code}`
+    }
+  }
+}
+</script>

src/i18n/locales/en.json

@@ -107,6 +107,7 @@
 		"CategoryProductTotal": "{count} products"
 	},
 	"Common": {
+		"AddPrice": "Add a price",
 		"AddToOFF": "Add to {name}",
 		"Date": "Date",
 		"Delete": "Delete",

src/views/AddPriceSingle.vue

@@ -382,6 +382,8 @@ export default {
       else {
         this.setProductCode(this.$route.query.code)
       }
+    } else if (this.$route.query.proof) {
+      this.handleProofSelected(this.$route.query.proof)
     }
     this.initPriceSingleForm()
   },
@@ -410,12 +412,15 @@ export default {
     showUserRecentProofs() {
       this.userRecentProofsDialog = true
     },
-    handleRecentProofSelected(selectedProof) {
-      this.addPriceSingleForm.proof_id = selectedProof.id
-      this.proofImagePreview = this.getProofUrl(selectedProof)
+    handleProofSelected(proofId) {
+      this.addPriceSingleForm.proof_id = proofId
       this.proofSelectedSuccessMessage = true
       this.proofSelectedMessage = true
     },
+    handleRecentProofSelected(selectedProof) {
+      this.handleProofSelected(selectedProof.id)
+      this.proofImagePreview = this.getProofUrl(selectedProof)
+    },
     getProofUrl(proof) {
       return `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/img/${proof.file_path}`
     },

src/views/ProductDetail.vue

@@ -25,7 +25,7 @@
 
   <v-row class="mt-0" v-if="!productNotFound">
     <v-col cols="12">
-      <ProductPriceAddButton class="mr-2" :product="product"></ProductPriceAddButton>
+      <PriceAddButton class="mr-2" :product="product"></PriceAddButton>
       <OpenFoodFactsLink v-if="product.code && product.source" display="button" :source="product.source" facet="product" :value="product.code"></OpenFoodFactsLink>
       <ShareButton></ShareButton>
     </v-col>
@@ -66,7 +66,7 @@ import api from '../services/api'
 export default {
   components: {
     'ProductCard': defineAsyncComponent(() => import('../components/ProductCard.vue')),
-    'ProductPriceAddButton': defineAsyncComponent(() => import('../components/ProductPriceAddButton.vue')),
+    'PriceAddButton': defineAsyncComponent(() => import('../components/PriceAddButton.vue')),
     'FilterMenu': defineAsyncComponent(() => import('../components/FilterMenu.vue')),
     'OrderMenu': defineAsyncComponent(() => import('../components/OrderMenu.vue')),
     'PriceCard': defineAsyncComponent(() => import('../components/PriceCard.vue')),

src/views/ProofDetail.vue

@@ -6,6 +6,12 @@
     </v-col>
   </v-row>
 
+  <v-row class="mt-0" v-if="proof">
+    <v-col cols="12">
+      <PriceAddButton class="mr-2" :proof="proof"></PriceAddButton>
+    </v-col>
+  </v-row>
+
   <br />
 
   <h2 class="text-h6 mb-1" v-if="proof">
@@ -32,6 +38,7 @@ import api from '../services/api'
 
 export default {
   components: {
+    'PriceAddButton': defineAsyncComponent(() => import('../components/PriceAddButton.vue')),
     'ProofCard': defineAsyncComponent(() => import('../components/ProofCard.vue')),
     'PriceCard': defineAsyncComponent(() => import('../components/PriceCard.vue')),
   },