feat: display kg / L depending on product_quantity_unit (#311)

openfoodfacts · Feb 9, 2024 · fff1cf7 · fff1cf7
1 parent 620ba51
commit fff1cf7
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/src/components/PriceCard.vue b/src/components/PriceCard.vue
@@ -33,7 +33,7 @@
             </span>
           </p>
 
-          <PricePrice v-if="price" :price="price" :productQuantity="product ? product.product_quantity : null" :hidePriceDate="hidePriceDate"></PricePrice>
+          <PricePrice v-if="price" :price="price" :productQuantity="product ? product.product_quantity : null" :productQuantityUnit="product ? product.product_quantity_unit : null" :hidePriceDate="hidePriceDate"></PricePrice>
         </v-col>
       </v-row>
 

diff --git a/src/components/PricePrice.vue b/src/components/PricePrice.vue
@@ -1,7 +1,7 @@
 <template>
   <p>
     <span class="mr-1">{{ getPriceValueDisplay(priceValue) }}</span>
-    <span v-if="hasProductQuantity" class="mr-1">({{ getPricePerKilo() }})</span>
+    <span v-if="hasProductQuantity" class="mr-1">({{ getPricePerUnit(priceValue) }})</span>
     <span v-if="price.price_is_discounted">
       <v-chip class="mr-1" color="red" variant="outlined" size="small" density="comfortable">
         {{ $t('PriceCard.Discount') }}
@@ -23,6 +23,7 @@ export default {
   props: {
     'price': null,
     'productQuantity': null,
+    'productQuantityUnit': null,  // 'g', 'mL'
     'hidePriceDate': false
   },
   data() {
@@ -60,17 +61,27 @@ export default {
         maximumFractionDigits: 2
       })
     },
-    getPriceValueDisplay(price) {
+    getPricePerUnit(price) {
       if (this.hasCategoryTag) {
-        const translationKey = this.pricePricePer === 'UNIT' ? 'PriceCard.PriceValueDisplayUnit' : 'PriceCard.PriceValueDisplay';
-        return this.$t(translationKey, [this.getPriceValue(price, this.priceCurrency)]);
+        if (this.pricePricePer === 'UNIT') {
+          return this.$t('PriceCard.PriceValueDisplayUnit', [this.getPriceValue(price, this.priceCurrency)])
+        }
+        // default to 'KILOGRAM'
+        return this.$t('PriceCard.PriceValueDisplay', [this.getPriceValue(price, this.priceCurrency)])
+      }
+      if (this.hasProductQuantity) {
+        const pricePerUnit = (price / this.productQuantity) * 1000
+        if (this.productQuantityUnit === 'mL') {
+          return this.$t('PriceCard.PriceValueDisplayLitre', [this.getPriceValue(pricePerUnit, this.priceCurrency)])
+        }
+        return this.$t('PriceCard.PriceValueDisplay', [this.getPriceValue(pricePerUnit, this.priceCurrency)])
       }
-      return this.getPriceValue(price, this.priceCurrency);
     },
-    getPricePerKilo() {
-      const productQuantity = this.productQuantity
-      let pricePerKilo = (this.priceValue / productQuantity) * 1000
-      return this.$t('PriceCard.PriceValueDisplay', [this.getPriceValue(pricePerKilo, this.priceCurrency)])
+    getPriceValueDisplay(price) {
+      if (this.hasCategoryTag) {
+        return this.getPricePerUnit(price)
+      }
+      return this.getPriceValue(price, this.priceCurrency)
     },
     getDateFormatted(dateString) {
       return utils.prettyDate(dateString)

diff --git a/src/components/ProductCard.vue b/src/components/ProductCard.vue
@@ -34,7 +34,7 @@
       <v-sheet v-if="latestPrice">
         <v-divider class="mt-2 mb-2"></v-divider>
         <h4>{{ $t('ProductCard.LatestPrice') }}</h4>
-        <PricePrice :price="latestPrice" :productQuantity="product.product_quantity"></PricePrice>
+        <PricePrice :price="latestPrice" :productQuantity="product.product_quantity" :productQuantityUnit="product.product_quantity_unit"></PricePrice>
         <PriceFooter :price="latestPrice"></PriceFooter>
       </v-sheet>
     </v-container>

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -148,6 +148,7 @@
 		"Discount": "Discount",
 		"PriceDate": "on {date}",
 		"PriceValueDisplay": "{0} / kg",
+		"PriceValueDisplayLitre": "{0} / L",
 		"PriceValueDisplayUnit": "{0} / unit",
 		"Proof": "Proof",
 		"ProductQuantity": "{0} g",