Product detail: avoid error message displayed for raw categories

src/components/PriceAddButton.vue

@@ -11,12 +11,12 @@
 <script>
 export default {
   props: {
-    product: {
-      type: Object,
+    productCode: {
+      type: String,
       default: null
     },
-    proof: {
-      type: Object,
+    proofId: {
+      type: Number,
       default: null
     }
   },
@@ -27,10 +27,10 @@ export default {
   },
   computed: {
     getAddUrl() {
-      if (this.proof) {
-        return `${this.ADD_PRICE_BASE_URL}?proof=${this.proof.id}`
+      if (this.proofId) {
+        return `${this.ADD_PRICE_BASE_URL}?proof=${this.proofId}`
       }
-      return `${this.ADD_PRICE_BASE_URL}?code=${this.product.code}`
+      return `${this.ADD_PRICE_BASE_URL}?code=${this.productCode}`
     }
   }
 }

src/components/PriceCard.vue

@@ -10,7 +10,7 @@
           <h3 v-if="!hideProductTitle" @click="goToProduct()">{{ productTitle }}</h3>
 
           <p v-if="!hideProductDetails" class="mb-2">
-            <span v-if="hasProductCode">
+            <span v-if="hasProduct">
               <PriceCountChip :count="product.price_count" @click="goToProduct()"></PriceCountChip>
               <span v-if="hasProductSource">
                 <ProductBrands :productBrands="product.brands" :readonly="readonly"></ProductBrands>

src/components/ProductCard.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card data-name="product-card">
     <v-container class="pa-2">
-      <v-row>
+      <v-row v-if="product">
         <v-col style="max-width:25%">
           <v-img v-if="product.image_url" :src="product.image_url" style="max-height:100px;width:100px" @click="goToProduct()"></v-img>
           <v-img v-if="!product.image_url" :src="productImageDefault" style="height:100px;width:100px;filter:invert(.9);"></v-img>

src/views/ProductDetail.vue

@@ -2,7 +2,11 @@
   <v-row>
     <v-col cols="12" sm="6">
       <ProductCard v-if="!productIsCategory" :product="product"></ProductCard>
-      <v-card v-else :title="product.category_name" prepend-icon="mdi-fruit-watermelon" elevation="1"></v-card>
+      <v-card v-else :title="categoryName" prepend-icon="mdi-fruit-watermelon" elevation="1">
+        <v-card-text>
+          <PriceCountChip :count="productPriceTotal"></PriceCountChip>
+        </v-card-text>
+      </v-card>
     </v-col>
   </v-row>
 
@@ -23,10 +27,11 @@
     </v-col>
   </v-row>
 
-  <v-row class="mt-0" v-if="!productNotFound">
+  <v-row class="mt-0" v-if="!productOrCategoryNotFound">
     <v-col cols="12">
-      <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>
+      <PriceAddButton v-if="product && product.code" class="mr-2" :productCode="product.code"></PriceAddButton>
+      <PriceAddButton v-else class="mr-2" :productCode="categoryName"></PriceAddButton>
+      <OpenFoodFactsLink v-if="product && product.code && product.source" display="button" :source="product.source" facet="product" :value="product.code"></OpenFoodFactsLink>
       <ShareButton></ShareButton>
     </v-col>
   </v-row>
@@ -66,6 +71,7 @@ import api from '../services/api'
 export default {
   components: {
     'ProductCard': defineAsyncComponent(() => import('../components/ProductCard.vue')),
+    'PriceCountChip': defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
     'PriceAddButton': defineAsyncComponent(() => import('../components/PriceAddButton.vue')),
     'FilterMenu': defineAsyncComponent(() => import('../components/FilterMenu.vue')),
     'OrderMenu': defineAsyncComponent(() => import('../components/OrderMenu.vue')),
@@ -78,7 +84,8 @@ export default {
     return {
       OFF_NAME: constants.OFF_NAME,
       productId: this.$route.params.id,  // product_code or product_category
-      product: { code: this.$route.params.id, category_name: null },
+      product: null, // { code: this.$route.params.id, category_name: null },
+      categoryName: null,
       productPriceList: [],
       productPriceTotal: null,
       productPricePage: 0,
@@ -102,10 +109,10 @@ export default {
       return this.productId.startsWith('en')
     },
     productNotFound() {
-      return !this.productIsCategory && (!this.product.code || !this.product.source)
+      return !this.productIsCategory && !this.product
     },
     categoryNotFound() {
-      return this.productIsCategory && !this.product.category_name
+      return this.productIsCategory && !this.categoryName
     },
     productOrCategoryNotFound() {
       return !this.loading && (this.productNotFound || this.categoryNotFound)
@@ -130,7 +137,7 @@ export default {
     getProduct() {
       if (this.productIsCategory) {
         utils.getLocaleCategoryTagName(this.appStore.getUserLanguage, this.productId).then((categoryName) => {
-          this.product.category_name = categoryName
+          this.categoryName = categoryName
         })
       } else {
         return api.getProductByCode(this.productId)

src/views/ProofDetail.vue

@@ -8,7 +8,7 @@
 
   <v-row class="mt-0" v-if="proof">
     <v-col cols="12">
-      <PriceAddButton class="mr-2" :proof="proof"></PriceAddButton>
+      <PriceAddButton class="mr-2" :proofId="proof.id"></PriceAddButton>
     </v-col>
   </v-row>
 

tests/e2e/spec.cy.js

@@ -44,8 +44,8 @@ describe('Basic tests', () => {
     cy.visit('/products/en:pitted-apricot')
     cy.contains('Welcome to Open Prices!').should('not.exist')
     cy.get('.v-card-title').contains('Pitted apricot')
-    // cy.get('#price-count').contains('1')
-    cy.get('[data-name="product-missing-chip"]').should('have.length', 2)  // TODO: fix
+    cy.get('#price-count').contains('2')
+    cy.get('[data-name="product-missing-chip"]').should('have.length', 0)
     cy.get('[data-name="price-card"]').should('have.length', 2)
   })
 })