Merge pull request #16668 from jolelievre/currency-custom

Integrate a Vue component to manage Currency customization in the BO

admin-dev/themes/new-theme/.webpack/common.js

@@ -115,6 +115,7 @@ module.exports = {
       '@components': path.resolve(__dirname, '../js/components'),
       '@scss': path.resolve(__dirname, '../scss'),
       '@node_modules': path.resolve(__dirname, '../node_modules'),
+      '@vue': path.resolve(__dirname, '../js/vue'),
     },
   },
   module: {
@@ -127,7 +128,9 @@ module.exports = {
           options: {
             presets: [
               ['es2015', {modules: false}],
+              ['env', {'useBuiltIns': 'usage'}]
             ],
+            'plugins': ['transform-runtime']
           },
         }],
       },

admin-dev/themes/new-theme/.webpack/prod.js

@@ -30,8 +30,14 @@ function prodConfig(analyze) {
     })
   );
 
-  return prod;
+  // Required for Vue production environment
+  prod.plugins.push(
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  );
 
+  return prod;
 }
 
 module.exports = prodConfig;

admin-dev/themes/new-theme/js/app/cldr/number-formatter.js

@@ -80,7 +80,7 @@ class NumberFormatter {
     }
 
     // Get the good CLDR formatting pattern. Sign is important here !
-    const pattern = this.getCldrPattern(majorDigits < 0);
+    const pattern = this.getCldrPattern(number < 0);
     formattedNumber = this.addPlaceholders(formattedNumber, pattern);
     formattedNumber = this.replaceSymbols(formattedNumber);
 
@@ -284,7 +284,13 @@ class NumberFormatter {
   }
 
   static build(specifications) {
-    const symbol = new NumberSymbol(...specifications.symbol);
+    let symbol;
+    if (undefined !== specifications.numberSymbols) {
+      symbol = new NumberSymbol(...specifications.numberSymbols);
+    } else {
+      symbol = new NumberSymbol(...specifications.symbol);
+    }
+
     let specification;
     if (specifications.currencySymbol) {
       specification = new PriceSpecification(

admin-dev/themes/new-theme/js/pages/currency/form/components/CurrencyFormatForm.vue

@@ -0,0 +1,115 @@
+<!--**
+ * 2007-2019 PrestaShop SA and Contributors
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.txt.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2019 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<template>
+  <div class="row">
+    <div class="col-4">
+      <h4>{{$t('step.symbol')}}</h4>
+      <input type="text" v-model="customSymbol">
+    </div>
+    <div class="col-8 border-left">
+      <h4>{{$t('step.format')}}</h4>
+      <div class="row">
+        <div class="ps-radio col-6" v-for="(pattern, transformation) in availableFormats" :key="transformation" :id="transformation">
+          <input type="radio" :checked="transformation === customTransformation" :value="transformation" />
+          <label @click.prevent.stop="customTransformation = transformation">
+            {{ displayPattern(pattern) }}
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { NumberFormatter } from '@app/cldr';
+
+  export default {
+    name: 'currency-format-form',
+    data: () => {
+      return {
+        value: {
+          symbol: '',
+          transformation: '',
+        },
+      };
+    },
+    props: {
+      language: {
+        type: Object,
+        required: true,
+        default: () => {},
+      }
+    },
+    computed: {
+      availableFormats() {
+        return this.language.transformations;
+      },
+      customSymbol: {
+        get: function() {
+          return this.value.symbol;
+        },
+        set: function(symbol) {
+          this.value.symbol = symbol;
+          this.$emit('input', this.value);
+        },
+      },
+      customTransformation: {
+        get: function() {
+          return this.value.transformation;
+        },
+        set: function(transformation) {
+          this.value.transformation = transformation;
+          this.$emit('input', this.value);
+        }
+      },
+    },
+    methods: {
+      displayPattern(pattern) {
+        const patterns = pattern.split(';');
+        const priceSpecification = Object.assign({}, this.language.priceSpecification);
+        priceSpecification.positivePattern = patterns[0];
+        priceSpecification.negativePattern = patterns.length > 1 ? patterns[1] : '-' + pattern;
+        priceSpecification.currencySymbol = this.customSymbol;
+
+        const currencyFormatter = NumberFormatter.build(priceSpecification);
+
+        return currencyFormatter.format(14251999.42);
+      }
+    },
+    mounted() {
+      this.customSymbol = this.language.priceSpecification.currencySymbol;
+      const currencyPattern = this.language.priceSpecification.positivePattern;
+
+      // Detect which transformation matches the language pattern
+      for (let transformation in this.language.transformations) {
+        let transformationPatterns = this.language.transformations[transformation].split(';');
+        if (transformationPatterns[0] === currencyPattern) {
+          this.customTransformation = transformation;
+          break;
+        }
+      }
+    }
+  }
+</script>

admin-dev/themes/new-theme/js/pages/currency/form/components/CurrencyFormatter.vue

@@ -0,0 +1,103 @@
+<!--**
+* 2007-2019 PrestaShop SA and Contributors
+*
+* NOTICE OF LICENSE
+*
+* This source file is subject to the Open Software License (OSL 3.0)
+* that is bundled with this package in the file LICENSE.txt.
+* It is also available through the world-wide-web at this URL:
+* https://opensource.org/licenses/OSL-3.0
+* If you did not receive a copy of the license and are unable to
+* obtain it through the world-wide-web, please send an email
+* to license@prestashop.com so we can send you a copy immediately.
+*
+* DISCLAIMER
+*
+* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+* versions in the future. If you wish to customize PrestaShop for your
+* needs please refer to https://www.prestashop.com for more information.
+*
+* @author    PrestaShop SA <contact@prestashop.com>
+* @copyright 2007-2019 PrestaShop SA and Contributors
+* @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+* International Registered Trademark & Property of PrestaShop SA
+*-->
+<template>
+  <div :id="id" class="card-block row">
+    <div class="col-sm">
+      <language-list
+        v-if="languagesCount"
+        :languages="languages"
+        @selectLanguage="selectLanguage"
+        @resetLanguage="resetLanguage"
+      >
+      </language-list>
+
+      <currency-modal
+        :language="selectedLanguage"
+        @close="closeModal"
+        @applyCustomization="applyCustomization"
+      >
+      </currency-modal>
+    </div>
+  </div>
+</template>
+
+<script>
+  import LanguageList from './LanguageList';
+  import CurrencyModal from './CurrencyModal';
+
+  export default {
+    name: 'currency-formatter',
+    data: () => ({selectedLanguage: null}),
+    props: {
+      id: {
+        type: String,
+        required: true
+      },
+      languages: {
+        type: Array,
+        required: true
+      },
+      currencyData: {
+        type: Object,
+        required: true
+      }
+    },
+    components: {LanguageList, CurrencyModal},
+    computed: {
+      languagesCount() {
+        return this.languages.length;
+      }
+    }, methods: {
+      closeModal() {
+        this.selectedLanguage = null;
+      },
+      selectLanguage(language) {
+        this.selectedLanguage = language;
+      },
+      resetLanguage(language) {
+        const patterns = language.currencyPattern.split(';');
+        language.priceSpecification.positivePattern = patterns[0];
+        language.priceSpecification.negativePattern = patterns.length > 1 ? patterns[1] : '-' + patterns[0];
+        language.priceSpecification.currencySymbol = language.currencySymbol;
+
+        this.currencyData.transformations[language.id] = '';
+        this.currencyData.symbols[language.id] = language.currencySymbol;
+      },
+      applyCustomization(customData) {
+        const selectedPattern = this.selectedLanguage.transformations[customData.transformation];
+        const patterns = selectedPattern.split(';');
+
+        this.selectedLanguage.priceSpecification.currencySymbol = customData.symbol;
+        this.selectedLanguage.priceSpecification.positivePattern = patterns[0];
+        this.selectedLanguage.priceSpecification.negativePattern = patterns.length > 1 ? patterns[1] : '-' + patterns[0];
+
+        this.currencyData.transformations[this.selectedLanguage.id] = customData.transformation;
+        this.currencyData.symbols[this.selectedLanguage.id] = customData.symbol;
+
+        this.closeModal();
+      }
+    }
+  }
+</script>

admin-dev/themes/new-theme/js/pages/currency/form/components/CurrencyModal.vue

@@ -0,0 +1,80 @@
+<!--**
+ * 2007-2019 PrestaShop SA and Contributors
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.txt.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2019 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<template>
+  <modal
+    confirmation
+    :modalTitle="modalTitle"
+    @close="$emit('close')"
+    @confirm="$emit('applyCustomization', customData)"
+    v-if="language !== null"
+  >
+    <template slot="body">
+      <currency-format-form :language="language" @input="customData = $event"></currency-format-form>
+    </template>
+  </modal>
+</template>
+
+<script>
+  import CurrencyFormatForm from './CurrencyFormatForm';
+  import Modal from '@vue/components/Modal';
+
+  export default {
+    name: 'currency-modal',
+    data: () => {
+      return {
+        customData: null
+      }
+    },
+    components: {
+      CurrencyFormatForm,
+      Modal,
+    },
+    props: {
+      language: {
+        type: Object,
+        required: false,
+        default: null
+      }
+    },
+    computed: {
+      modalTitle() {
+        return this.$t('modal.title') + (null !== this.language ? ` + ${this.language.name}`  : '');
+      }
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '~@scss/config/_settings.scss';
+
+  .modal-header .close {
+    font-size: 1.2rem;
+    color: $gray-medium;
+    opacity: 1;
+  }
+  .modal-content {
+    border-radius: 0
+  }
+</style>