From e852b02a595258f10851c58333283898cca47ee2 Mon Sep 17 00:00:00 2001
From: dq18 <21193194+dq18@users.noreply.github.com>
Date: Sun, 10 Mar 2024 19:23:56 +0100
Subject: [PATCH] feat: allow using multiple currencies in Add Prices form
 (#397)

Co-authored-by: dq18 <>
---
 public/currency-exchange-svgrepo-com.svg | 56 ++++++++++++++++++++
 src/components/ChangeCurrencyDialog.vue  | 67 ++++++++++++++++++++++++
 src/i18n/locales/en.json                 |  9 ++++
 src/views/AddPriceMultiple.vue           | 35 +++++++++++--
 src/views/AddPriceSingle.vue             | 30 ++++++++++-
 5 files changed, 191 insertions(+), 6 deletions(-)
 create mode 100644 public/currency-exchange-svgrepo-com.svg
 create mode 100644 src/components/ChangeCurrencyDialog.vue

diff --git a/public/currency-exchange-svgrepo-com.svg b/public/currency-exchange-svgrepo-com.svg
new file mode 100644
index 0000000000..6c85fde957
--- /dev/null
+++ b/public/currency-exchange-svgrepo-com.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 381.329 381.329" xml:space="preserve">
+<g>
+	<g id="Layer_5_65_">
+		<g>
+			<path d="M78.864,79.423l-24.369-5.431c-2.899-0.646-5.259,0.003-6.382,1.727c-0.967,1.484-0.931,3.59,0.103,5.929l2.945,6.662
+				c0.667,1.355-0.291,3.057-0.784,3.506c-28.44,25.881-44.752,62.701-44.752,101.019c0,45.394,22.483,87.683,60.144,113.125
+				c1.577,1.065,3.414,1.629,5.311,1.629c3.165,0,6.11-1.564,7.88-4.183c1.066-1.577,1.629-3.413,1.629-5.311
+				c0-3.165-1.564-6.11-4.184-7.879c-32.423-21.905-51.78-58.31-51.78-97.382c0-30.858,12.57-61.144,34.487-83.09
+				c0.568-0.569,0.872-0.613,0.951-0.613c0.146,0,0.358,0.218,0.512,0.486l2.742,6.206c1.146,2.593,2.797,4.021,4.648,4.021
+				c1.814,0,3.47-1.385,4.661-3.898L84.48,90.919c1.158-2.444,1.206-4.997,0.135-7.188C83.547,81.541,81.504,80.012,78.864,79.423z"
+				/>
+			<path d="M375.704,188.493c0-45.394-22.483-87.683-60.145-113.125c-1.577-1.065-3.414-1.629-5.311-1.629
+				c-3.165,0-6.11,1.563-7.879,4.183c-1.066,1.578-1.63,3.414-1.63,5.311c0,3.165,1.564,6.11,4.184,7.879
+				c32.423,21.904,51.78,58.309,51.78,97.382c0,30.858-12.57,61.144-34.487,83.09c-0.568,0.568-0.872,0.613-0.951,0.613
+				c-0.146,0-0.358-0.218-0.512-0.486l-2.742-6.206c-1.146-2.593-2.797-4.021-4.648-4.021c-1.814,0-3.47,1.385-4.66,3.898
+				l-11.857,25.027c-1.158,2.444-1.206,4.996-0.136,7.186s3.113,3.721,5.753,4.31l24.369,5.431c0.754,0.168,1.475,0.253,2.142,0.253
+				c1.903,0,3.41-0.703,4.241-1.98c0.967-1.484,0.931-3.589-0.103-5.928l-2.945-6.662c-0.667-1.355,0.29-3.057,0.784-3.506
+				C359.392,263.632,375.704,226.811,375.704,188.493z"/>
+			<g>
+				<path d="M194.766,79.575c-9.743-3.906-12.559-6.268-12.559-10.534c0-3.414,2.586-7.401,9.874-7.401
+					c6.447,0,11.392,2.542,11.435,2.565c0.521,0.277,1.104,0.425,1.682,0.425c1.411,0,2.659-0.854,3.177-2.175l1.771-4.528
+					c0.616-1.649-0.318-3.087-1.512-3.603c-3.97-1.729-11.727-3.065-11.807-3.079c-0.125-0.021-0.56-0.114-0.56-0.623l-0.024-6.567
+					c0-1.978-1.652-3.588-3.68-3.588h-3.177c-2.025,0-3.677,1.61-3.677,3.59l0.008,6.904c0,0.529-0.573,0.759-0.782,0.809
+					c-9.792,2.332-15.913,9.505-15.913,18.554c0,11.28,9.324,16.378,19.391,20.204c8.048,3.159,11.331,6.363,11.331,11.063
+					c0,5.113-4.649,8.685-11.311,8.685c-5.688,0-13.387-3.605-13.463-3.642c-0.492-0.233-1.014-0.352-1.551-0.352
+					c-1.465,0-2.741,0.886-3.252,2.258l-1.69,4.578c-0.602,1.71,0.324,3.098,1.509,3.715c4.727,2.462,13.876,3.905,14.282,3.968
+					c0.11,0.016,0.667,0.213,0.667,0.721v6.875c0,1.979,1.651,3.588,3.68,3.588h3.283c2.029,0,3.681-1.609,3.681-3.588v-7.234
+					c0-0.677,0.499-0.736,0.602-0.761c10.433-2.344,16.859-9.977,16.859-19.561C213.041,90.995,207.574,84.634,194.766,79.575z"/>
+				<path d="M190.665,0c-47.622,0-86.225,38.604-86.225,86.225c0,47.62,38.603,86.227,86.225,86.227
+					c47.62,0,86.225-38.606,86.225-86.227S238.285,0,190.665,0z M190.665,152.467c-36.586,0-66.241-29.658-66.241-66.242
+					s29.655-66.241,66.241-66.241c36.584,0,66.24,29.657,66.24,66.241S227.249,152.467,190.665,152.467z"/>
+			</g>
+			<g>
+				<path d="M190.666,208.877c-47.623,0-86.226,38.604-86.226,86.225s38.603,86.227,86.226,86.227
+					c47.62,0,86.224-38.605,86.224-86.227C276.889,247.481,238.286,208.877,190.666,208.877z M190.666,361.345
+					c-36.586,0-66.242-29.659-66.242-66.243c0-36.583,29.656-66.241,66.242-66.241c36.583,0,66.239,29.658,66.239,66.241
+					C256.904,331.686,227.249,361.345,190.666,361.345z"/>
+				<path d="M216.21,314.953c-1.853-2.117-5.072-2.332-7.191-0.477c-4.688,4.105-9.708,6.366-15.948,6.366
+					c-8.781,0-15.544-4.423-20.191-11.155c-0.196-0.284-0.497-0.865,0.503-0.865h11.654c2.814,0,5.096-2.281,5.096-5.096
+					s-2.281-5.096-5.096-5.096h-15.613c-0.844,0-0.932-0.666-0.965-1.002c-0.084-0.831-0.129-1.673-0.129-2.526
+					c0-1.013,0.01-1.509,0.126-2.491c0.02-0.179,0.177-1.036,1.218-1.036h17.715c2.814,0,5.096-2.282,5.096-5.096
+					s-2.281-5.097-5.096-5.097h-13.381c-1.75,0-0.93-1.166-0.51-1.723c4.7-6.248,11.17-10.298,19.572-10.298
+					c4.531,0,7.984,1.192,11.877,3.446c2.435,1.41,5.553,0.581,6.964-1.855c1.41-2.435,0.58-5.553-1.855-6.963
+					c-5.443-3.153-10.662-4.819-16.985-4.819c-14.236,0-25.562,8.324-31.373,20.36c-0.294,0.608-0.606,1.852-1.856,1.852h-6.537
+					c-2.814,0-5.096,2.282-5.096,5.097c0,2.814,2.281,5.096,5.096,5.096h4.329c0.833,0,0.619,0.719,0.604,0.899
+					c-0.083,0.985-0.099,1.622-0.099,2.628c0,0.915,0.036,1.822,0.104,2.721c0.021,0.27,0.149,0.808-0.757,0.808h-6.534
+					c-2.814,0-5.096,2.281-5.096,5.096s2.281,5.096,5.096,5.096h9.097c1.084,0,1.064,0.583,1.193,0.872
+					c5.604,12.561,17.208,21.34,31.828,21.34c8.712,0,16.115-3.157,22.663-8.891C217.851,320.29,218.063,317.07,216.21,314.953z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/components/ChangeCurrencyDialog.vue b/src/components/ChangeCurrencyDialog.vue
new file mode 100644
index 0000000000..1ea552ff2a
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 1e4442c9b0..bff13407cc 100644
--- 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
index e12b79821f..6dabd307f4 100644
--- 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>
\ No newline at end of file
diff --git a/src/views/AddPriceSingle.vue b/src/views/AddPriceSingle.vue
index 18553dd220..131cd14eb3 100644
--- 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>
\ No newline at end of file