diff --git a/resources/assets/js/components/AkauntingCurrencyConversion.vue b/resources/assets/js/components/AkauntingCurrencyConversion.vue
index 691c54767..58122ca50 100644
--- a/resources/assets/js/components/AkauntingCurrencyConversion.vue
+++ b/resources/assets/js/components/AkauntingCurrencyConversion.vue
@@ -2,90 +2,116 @@
     <div class="flex items-center justify-end text-xs mt-3">
         <span>{{ texts[0] }}</span>
         <money v-bind="{
-            decimal: this.currencySymbol.decimal_mark,
-            thousands: this.currencySymbol.thousands_separator,
-            prefix: (this.currencySymbol.symbol_first) ? this.currencySymbol.symbol : '',
-            suffix: (!this.currencySymbol.symbol_first) ? this.currencySymbol.symbol : '',
-            precision: parseInt(this.currencySymbol.precision),
-            masked: true
-        }" :value="price" disabled size="5" masked class="disabled-money text-right mr-1 js-conversion-input text-xs px-1"></money>
-        <span class="mr-2">{{ texts[1] }}</span>
-        <input name="currency_rate" v-model="rate" @input="onChange" class="text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple w-16 h-10 text-right js-conversion-input" />
+                decimal: this.currencySymbol.decimal_mark,
+                thousands: this.currencySymbol.thousands_separator,
+                prefix: (this.currencySymbol.symbol_first) ? this.currencySymbol.symbol : '',
+                suffix: (!this.currencySymbol.symbol_first) ? this.currencySymbol.symbol : '',
+                precision: parseInt(this.currencySymbol.precision),
+                masked: true
+            }"
+            :value="price"
+            disabled size="5"
+            masked
+            class="disabled-money text-right mr-1 js-conversion-input text-xs px-1"
+        ></money>
+
+        <span class="mr-2">
+            {{ texts[1] }}
+        </span>
+
+        <input name="currency_rate"
+            v-model="rate"
+            @input="onChange"
+            class="text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple w-16 h-10 text-right js-conversion-input"
+        />
     </div>
 </template>
 
 <script>
-import {Money} from 'v-money';
+    import {Money} from 'v-money';
 
-export default {
-    name: 'akaunting-currency-conversion',
-    components: {
-        Money
-    },
+    export default {
+        name: 'akaunting-currency-conversion',
 
-    props: {
-        currencyConversionText: {
-            type: String,
-            default: 'Currency conversion'
-        },
-        price: {
-            type: String,
-            default: 'sale'
-        },
-        currecyCode: {
-            type: String,
-            default: 'USD'
-        },
-        currencyRate: {
-            default: 1.000,
-        },
-        currencySymbol: {
-           default: {}
-        }
-    },
-
-    data() {
-        return {
-            conversion: '',
-            rate: this.currencyRate,
-            texts: [],
-        };
-    },
-
-    created() {
-        let conver = this.currencyConversionText.split(':price');
-
-        this.texts.push(conver[0]);
-        this.texts.push(conver[1].replace(':currency_code', company_currency_code).replace(':currency_rate', ''));
-    },
-
-    methods: {
-        onChange() {
-            this.$emit('change', this.rate);
-            this.currencySymbol.rate = this.rate;
-        }
-    },
-
-    watch: {
-        currencyConversionText: function (text) {
-            this.conversion = text.replace(':price', this.price).replace(':currency_code', this.currecyCode);
+        components: {
+            Money
         },
 
-        price: function (price) {
-            this.conversion = this.currencyConversionText.replace(':price', price).replace(':currency_code', this.currecyCode).replace();
+        props: {
+            currencyConversionText: {
+                type: String,
+                default: 'Currency conversion'
+            },
+
+            price: {
+                type: String,
+                default: 'sale'
+            },
+
+            currecyCode: {
+                type: String,
+                default: 'USD'
+            },
+
+            currencyRate: {
+                default: 1.000,
+            },
+
+            currencySymbol: {
+            default: {}
+            }
         },
 
-        currecyCode: function (currecyCode) {
-            this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace();
+        data() {
+            return {
+                conversion: '',
+                rate: this.currencyRate,
+                texts: [],
+            };
         },
 
-        currencyRate: function (currencyRate) {
-            this.rate = currencyRate;
-            this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace();
+        created() {
+            let conversion = this.currencyConversionText.split(':price');
+
+            if (conversion[0]) {
+                this.texts.push(conversion[0]);
+            }
+            
+            if (conversion[1]) {
+                this.texts.push(conversion[1].replace(':currency_code', company_currency_code).replace(':currency_rate', ''));
+            }
         },
-         currencySymbol: function (currencySymbol) {
-            this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace();
+
+        methods: {
+            onChange() {
+                this.$emit('change', this.rate);
+
+                this.currencySymbol.rate = this.rate;
+            }
         },
-    },
-};
+
+        watch: {
+            currencyConversionText: function (text) {
+                this.conversion = text.replace(':price', this.price).replace(':currency_code', this.currecyCode);
+            },
+
+            price: function (price) {
+                this.conversion = this.currencyConversionText.replace(':price', price).replace(':currency_code', this.currecyCode).replace();
+            },
+
+            currecyCode: function (currecyCode) {
+                this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace();
+            },
+
+            currencyRate: function (currencyRate) {
+                this.rate = currencyRate;
+
+                this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace();
+            },
+
+            currencySymbol: function (currencySymbol) {
+                this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace();
+            },
+        },
+    };
 </script>