feat: allow using multiple currencies in Add Prices form (#397)

Co-authored-by: dq18 <>
openfoodfacts · Mar 10, 2024 · e852b02 · e852b02
1 parent 33b4cbb
commit e852b02
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 6 deletions.
diff --git a/public/currency-exchange-svgrepo-com.svg b/public/currency-exchange-svgrepo-com.svg
diff --git a/src/components/ChangeCurrencyDialog.vue b/src/components/ChangeCurrencyDialog.vue
@@ -0,0 +1,67 @@
+<template>
+  <v-dialog>
+    <v-card>
+      <v-card-title>{{ $t("ChangeCurrencyDialog.Title") }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close"></v-btn>
+      </v-card-title>
+      <v-card-text>
+        <v-select
+          v-model="userLastCurrencyUsed"
+          :label="$t('ChangeCurrencyDialog.Currency')"
+          :items="userFavoriteCurrencies"
+          hide-details="auto"
+          class="mb-5"
+
+        ></v-select>
+        <v-col cols="12">
+          <v-btn class="mb-2" size="small" prepend-icon="mdi-cog-outline" @click="goToSettings">
+            <span>{{ $t('ChangeCurrencyDialog.AddCurrencies') }}</span>
+          </v-btn>
+          <p class="text-caption text-warning">
+            <i>{{ $t('ChangeCurrencyDialog.AddCurrenciesWarning') }}</i>
+          </p>
+        </v-col>
+        <v-col cols="12">
+          <v-btn class="mt-2" @click="selectedCurrency">
+            {{ $t('ChangeCurrencyDialog.Select', { currency_code: userLastCurrencyUsed }) }}
+          </v-btn>
+        </v-col>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import { useAppStore } from '../store'
+export default {
+  data() {
+    return {
+      userFavoriteCurrencies: [],
+      userLastCurrencyUsed: null,
+    }
+  },
+  computed: {
+  },
+  mounted() {
+    this.getCurrencyData()
+  },
+  methods: {
+    getCurrencyData() {
+      const appStore = useAppStore()
+      this.userFavoriteCurrencies = appStore.getUserFavoriteCurrencies
+      this.userLastCurrencyUsed = appStore.getUserLastCurrencyUsed
+    },
+    selectedCurrency() {
+      const appStore = useAppStore()
+      appStore.setLastCurrencyUsed(this.userLastCurrencyUsed)
+      this.$emit('newCurrencySelected', this.userLastCurrencyUsed)
+      this.close()
+    },
+    goToSettings() {
+      this.$router.push({ path: "/settings/" })
+    },
+    close() {
+      this.$emit('close')
+    },
+  }
+}
+</script>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -39,6 +39,7 @@
 		"Create": "Create",
 		"PriceDetails": {
 			"Discount": "Discount?",
+			"Currency": "Currency",
 			"Label": "Price",
 			"LabelDiscounted": "Discounted price",
 			"LabelFull": "Full price",
@@ -120,6 +121,14 @@
 		"Yes": "Yes",
 		"No": "No"
 	},
+	"ChangeCurrencyDialog": {
+		"Title": "Choose one of your favorite currencies",
+		"Currency": "Currency",
+		"AddCurrencies": "Add currencies in Settings",
+		"AddCurrenciesWarning":"You will be redirected to the Settings page but will lose any info you have entered on this page.",
+		"Select": "Select {currency_code}"
+
+	},
 	"UserRecentProofsDialog": {
 		"SelectRecentProof": "Select one of your recent proofs"
 	},

diff --git a/src/views/AddPriceMultiple.vue b/src/views/AddPriceMultiple.vue
@@ -232,7 +232,12 @@
                 min="0"
                 hide-details="auto"
                 :suffix="productPriceForm.currency"
-              ></v-text-field>
+                >
+                  <template v-slot:prepend-inner>
+                    <!-- image from https://www.svgrepo.com/svg/32717/currency-exchange -->
+                    <img src="/currency-exchange-svgrepo-com.svg" class="icon-info-currency" @click="changeCurrencyDialog = true" />
+                  </template>
+              </v-text-field>
             </v-col>
             <v-col v-if="productPriceForm.price_is_discounted" cols="6">
               <v-text-field
@@ -329,6 +334,12 @@
     @proofConfirmed="handleProofConfirmed"
     @close="userRecentProofsDialog = false"
   ></UserRecentProofsDialog>
+  <ChangeCurrencyDialog
+    v-if="changeCurrencyDialog"
+    v-model="changeCurrencyDialog"
+    @newCurrencySelected="setCurrencyData($event)"
+    @close="changeCurrencyDialog = false"
+  ></ChangeCurrencyDialog>
 </template>
 
 <script>
@@ -354,7 +365,8 @@ export default {
     'ProductCard': defineAsyncComponent(() => import('../components/ProductCard.vue')),
     'BarcodeScanner': defineAsyncComponent(() => import('../components/BarcodeScanner.vue')),
     'BarcodeManualInput': defineAsyncComponent(() => import('../components/BarcodeManualInput.vue')),
-    'UserRecentProofsDialog': defineAsyncComponent(() => import('../components/UserRecentProofsDialog.vue'))
+    'UserRecentProofsDialog': defineAsyncComponent(() => import('../components/UserRecentProofsDialog.vue')),
+    'ChangeCurrencyDialog': defineAsyncComponent(() => import('../components/ChangeCurrencyDialog.vue')),
   },
   data() {
     return {
@@ -411,7 +423,9 @@ export default {
         {key: 'KILOGRAM', value: this.$t('AddPriceSingle.CategoryPricePer.PerKg'), icon: 'mdi-weight-kilogram'},
         {key: 'UNIT', value: this.$t('AddPriceSingle.CategoryPricePer.PerUnit'), icon: 'mdi-numeric-1-circle'}
       ],
-    }
+      // currency selection
+      changeCurrencyDialog: false,
+     }
   },
   computed: {
     ...mapStores(useAppStore),
@@ -595,13 +609,18 @@ export default {
     },
     initNewProductPriceForm() {
       this.productMode = this.appStore.user.last_product_mode_used
+      this.isChangeCurrency = false
       this.clearProductPriceForm()
       this.productPriceForm = JSON.parse(JSON.stringify(this.productPriceNew))
-      this.productPriceForm.currency = this.appStore.user.last_currency_used
+      this.productPriceForm.currency = this.appStore.getUserLastCurrencyUsed
       this.productPriceForm.price_per = this.categoryPricePerList[0].key // init to 'KILOGRAM' because it's the most common use-case
     },
+    setCurrencyData(currency) {
+      this.productPriceForm.currency = currency
+    },
     createPrice() {
       this.createPriceLoading = true
+      this.appStore.setLastCurrencyUsed(this.productPriceForm.currency)
       // cleanup form
       if (!this.productPriceForm.product_code) {
         this.productPriceForm.product_code = null
@@ -657,3 +676,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.icon-info-currency {
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+}
+</style>
diff --git a/src/views/AddPriceSingle.vue b/src/views/AddPriceSingle.vue
@@ -122,7 +122,12 @@
                   min="0"
                   hide-details="auto"
                   :suffix="addPriceSingleForm.currency"
-                ></v-text-field>
+                >
+                  <template v-slot:prepend-inner>
+                    <!-- image from https://www.svgrepo.com/svg/32717/currency-exchange -->
+                    <img src="/currency-exchange-svgrepo-com.svg" class="icon-info-currency" @click="changeCurrencyDialog = true" />
+                  </template>
+              </v-text-field>
               </v-col>
               <v-col v-if="addPriceSingleForm.price_is_discounted" cols="6">
                 <v-text-field
@@ -281,6 +286,12 @@
     @proofConfirmed="handleProofConfirmed"
     @close="userRecentProofsDialog = false"
   ></UserRecentProofsDialog>
+  <ChangeCurrencyDialog
+    v-if="changeCurrencyDialog"
+    v-model="changeCurrencyDialog"
+    @newCurrencySelected="setCurrencyData($event)"
+    @close="changeCurrencyDialog = false"
+  ></ChangeCurrencyDialog>
 </template>
 
 <script>
@@ -308,6 +319,7 @@ export default {
     'BarcodeManualInput': defineAsyncComponent(() => import('../components/BarcodeManualInput.vue')),
     'LocationSelector': defineAsyncComponent(() => import('../components/LocationSelector.vue')),
     'UserRecentProofsDialog': defineAsyncComponent(() => import('../components/UserRecentProofsDialog.vue')),
+    'ChangeCurrencyDialog': defineAsyncComponent(() => import('../components/ChangeCurrencyDialog.vue')),
   },
   data() {
     return {
@@ -357,6 +369,8 @@ export default {
         {key: 'KILOGRAM', value: this.$t('AddPriceSingle.CategoryPricePer.PerKg'), icon: 'mdi-weight-kilogram'},
         {key: 'UNIT', value: this.$t('AddPriceSingle.CategoryPricePer.PerUnit'), icon: 'mdi-numeric-1-circle'}
       ],
+      // currency selection
+      changeCurrencyDialog: false,
     }
   },
   computed: {
@@ -430,7 +444,7 @@ export default {
         this.setLocationData(this.recentLocations[0])
       }
       this.addPriceSingleForm.price_per = this.categoryPricePerList[0].key // init to 'KILOGRAM' because it's the most common use-case
-      this.addPriceSingleForm.currency = this.appStore.user.last_currency_used
+      this.addPriceSingleForm.currency = this.appStore.getUserLastCurrencyUsed
     },
     showUserRecentProofs() {
       this.userRecentProofsDialog = true
@@ -534,8 +548,12 @@ export default {
     isSelectedLocation(location) {
       return this.locationSelectedDisplayName && this.locationSelectedDisplayName === location.display_name
     },
+    setCurrencyData(currency) {
+      this.addPriceSingleForm.currency = currency
+    },
     createPrice() {
       this.createPriceLoading = true
+      this.appStore.setLastCurrencyUsed(this.addPriceSingleForm.currency)
       // cleanup form
       if (!this.addPriceSingleForm.product_code) {
         this.addPriceSingleForm.product_code = null
@@ -585,3 +603,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.icon-info-currency {
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+}
+</style>