fix(Product detail): avoid 'Unknown product' 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,9 +84,10 @@ 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,
+      categoryName: null,
       productPriceList: [],
-      productPriceTotal: null,
+      productPriceTotal: 0,
       productPricePage: 0,
       loading: false,
       // share
@@ -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)
@@ -123,20 +130,22 @@ export default {
   methods: {
     initProductPrices() {
       this.productPriceList = []
-      this.productPriceTotal = null
+      this.productPriceTotal = 0
       this.productPricePage = 0
       this.getProductPrices()
     },
     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)
           .then((data) => {
             if (data.id) {
               this.product = data
+            } else {
+              this.product = { code: this.productId, price_count: this.productPriceTotal }
             }
           })
       }

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

@@ -2,10 +2,12 @@ describe('Basic tests', () => {
   beforeEach(() => {
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/products?page=1&size=10&order_by=-price_count', { fixture: 'products.json' })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/products/code/3011360030498', { fixture: 'product_3011360030498.json' })
+    cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/products/code/0000000000000', { statusCode: 404, body: { "detail": "Product with code 35647000112700 not found" }})
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?page=1&size=1&order_by=-created*', { fixture: 'prices.json' })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?page=1&size=10&order_by=-created', { fixture: 'prices.json' })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?page=1&size=10&order_by=-date&product_code=3011360030498', { fixture: 'product_3011360030498_prices.json' })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?page=1&size=10&order_by=-date&category_tag=en%3Apitted-apricot', { fixture: 'pitted_apricot_prices.json' })
+    cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?page=1&size=10&order_by=-date&category_tag=en%3Aaaaaaaaaaaaa', { body: {"items":[],"total":0,"page":1,"size":10,"pages":0} })
   })
 
   it('loads the home page', () => {
@@ -20,6 +22,7 @@ describe('Basic tests', () => {
     cy.get('[data-name="price-card"]').should('have.length', 10)
     cy.contains('3564700428023')  // unknown product
     cy.get('[data-name="product-missing-chip"]').should('have.length', 1)
+    cy.contains('Load more')
   })
 
   it('displays the top products', () => {
@@ -38,14 +41,44 @@ describe('Basic tests', () => {
     cy.get('#price-count').contains('1')
     cy.get('[data-name="product-missing-chip"]').should('have.length', 0)
     cy.get('[data-name="price-card"]').should('have.length', 1)
+    cy.contains('Load more').should('not.exist')
+  })
+
+  it('displays an unknown product page', () => {
+    cy.on('uncaught:exception', (err, runnable, promise) => {
+      expect(err.message).to.include('Failed to fetch')
+      return false
+      // alternatively, we can use the following to ignore the error
+      // if (promise) {
+      //   return false
+      // }
+    })
+    cy.visit('/products/0000000000000')
+    cy.contains('Welcome to Open Prices!').should('not.exist')
+    cy.get('#product-title').contains('0000000000000')
+    cy.get('#price-count').contains('0')
+    cy.get('[data-name="product-missing-chip"]').should('have.length', 1)
+    cy.get('[data-name="price-card"]').should('have.length', 0)
+    cy.contains('Load more').should('not.exist')
   })
 
   it('displays a raw product page', () => {
     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)
+    cy.contains('Load more').should('not.exist')
+  })
+
+  it('displays an unknown raw product page', () => {
+    cy.visit('/products/en:aaaaaaaaaaaa')
+    cy.contains('Welcome to Open Prices!').should('not.exist')
+    cy.get('.v-card-title').contains('en:aaaaaaaaaaaa')
+    cy.get('#price-count').contains('0')
+    // cy.get('[data-name="product-missing-chip"]').should('have.length', 1)
+    cy.get('[data-name="price-card"]').should('have.length', 0)
+    cy.contains('Load more').should('not.exist')
   })
 })