update

modules/blockreassurance/_dev/back/back.scss

@@ -0,0 +1,598 @@
+/* Tab */
+.first-body {
+    padding-bottom: 50px !important;
+}
+.bootstrap .page-head .page-head-tabs ul {
+    border-bottom: 0;
+}
+.bootstrap .page-head .page-head-tabs li a:hover {
+    color: #25b9d7;
+}
+.bootstrap .page-head .page-head-tabs ul.nav li.active {
+    border-bottom: 3px solid #25b9d7;
+    border-bottom: .1875rem solid #25b9d7;
+    background: #f3f9fb;
+    color: #000000;
+}
+
+/* Tab : Alert */
+.bootstrap .alert {
+    clear: both;
+}
+.bootstrap .alert p {
+    margin: 0;
+}
+.bootstrap .alert.alert-warning {
+    background-color: #fff;
+    border: 2px solid #cd9321;
+    color: #363a41;
+    padding: 3.221rem 0 .75rem 2.875rem;
+    position: relative;
+}
+.bootstrap .alert.alert-warning:before {
+    color: #d29500;
+    background: #fce6bb;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 1.563rem;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    vertical-align: middle;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-feature-settings: "liga";
+    font-feature-settings: "liga";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 2.875rem;
+    height: 100%;
+    text-align: center;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+}
+
+/* Tab : Helpers */
+.help-block {
+    font-style: normal !important;
+}
+.bootstrap .form-control,
+.bootstrap input[type=password],
+.bootstrap input[type=search],
+.bootstrap input[type=text],
+.bootstrap input[type=number],
+.bootstrap select,
+.bootstrap textarea {
+    display: block;
+    width: 100%;
+    font-size: .875rem;
+    line-height: 1.5;
+    color: #363a41;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #bbcdd2;
+    border-radius: 0;
+    box-shadow: none;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    height: 31px;
+    padding: 0 8px;
+}
+
+.customradiodesign {
+    cursor: pointer;
+}
+.customradiodesign > div {
+    display: inline-block;
+}
+.customradiodesign input[type=checkbox]:not(old),
+.customradiodesign input[type=radio]:not(old) {
+    width: 20px;
+    margin: 0;
+    margin-left: -20px;
+    padding: 0;
+    font-size: 1em;
+    opacity: 0;
+}
+.customradiodesign input[type=checkbox]:not(old) + label,
+.customradiodesign input[type=radio]:not(old) + label {
+    display: inline-block;
+    line-height: 1.5em;
+}
+.customradiodesign input[type=radio]:not(old) + label > span {
+    border: 0.0625em solid #6C868E;
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin: 1px 5px 0 1px;
+    background: #ffffff;
+    vertical-align: bottom;
+    border-radius: 50%;
+}
+.customradiodesign input[type=radio]:not(old):checked + label > span {
+    border: 0.0625em solid rgb(37, 185, 215);
+}
+.customradiodesign input[type=radio]:not(old):checked + label > span > span {
+    display: block;
+    width: 10px;
+    height: 10px;
+    margin: 3px 3px;
+    border: 0;
+    border-radius: 50%;
+    background: rgb(90, 199, 215);
+}
+.customradiodesign input[type=checkbox]:not(old) + label > span {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin: 1px 5px 0px 1px;
+    border: 1px solid rgb(37, 185, 215);
+    background: #ffffff;
+    vertical-align: bottom;
+    border-radius: 0;
+}
+.customradiodesign input[type=checkbox]:not(old):checked + label > span > span {
+    display: block;
+    width: 10px;
+    height: 10px;
+    margin: 3px 3px;
+    border: 0;
+    border-radius: 0;
+    background: rgb(90, 199, 215);
+}
+.customradiodesign label {
+    cursor: pointer;
+    font-weight: normal;
+}
+
+/* Tab Content */
+#content.bootstrap {
+    padding-top: 160px;
+}
+#content.bootstrap .page-head.custom-tab {
+    height: auto !important;
+    top: 8rem !important;
+}
+@media screen and (max-width: 1039px) {
+    #content.bootstrap {
+        padding-top: 175px !important;
+    }
+    #content.bootstrap .page-head.custom-tab {
+        top: 9rem !important;
+    }
+}
+#content.bootstrap .panel-heading {
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #e5e5e5;
+    color: #363a41 !important;
+    font-family: Open Sans, Helvetica, Arial, sans-serif !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    height: 49px !important;
+    line-height: 1.2;
+    margin: 0;
+    padding: 12px 20px !important;
+}
+#content.bootstrap .panel-blockreassurance {
+    border-radius: 0;
+    padding: 0;
+}
+#content.bootstrap .panel .panel-footer {
+    background-color: #f5f5f5;
+    border-top: 1px solid #e5e5e5;
+    padding: .75rem 1.25rem;
+    margin: 0;
+}
+#content.bootstrap .panel .panel-footer .btn,
+#content.bootstrap .panel .btn {
+    display: inline-block;
+    text-align: center;
+    text-transform: initial;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    border: 1px solid transparent;
+    padding: .375rem .838rem;
+    font-size: .875rem;
+    line-height: 1.5;
+    border-radius: 0;
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+#content.bootstrap .btn.btn-primary {
+    background-color: #00b9d9;
+    color: #fff;
+}
+#content.bootstrap .btn.btn-primary.refreshPage {
+  background-color: transparent;
+  border-color: #6C868E;
+  color: #6C868E;
+}
+
+/* Tab Content : Listing */
+.listing-table .block-title {
+    width: 198px !important;
+}
+.listing-head {
+    border-bottom: 2px #00b9d9 solid;
+    font-weight: bold;
+    padding-bottom: 9px;
+    padding-top: 15px;
+}
+.listing-general-rol:hover, .listing-general-rol.active {
+    background-color: #FAFBFC;
+    transition: background .3s;
+}
+.listing-body {
+  &.ui-sortable {
+    padding: 0;
+  }
+  .sortable-ghost {
+    color: #ffa500;
+  }
+  .btn-group {
+    padding: 0;
+    .dropdown-toggle {
+      &:hover, &:focus {
+        text-decoration: none;
+        &:after {
+          color: #00aff0;
+        }
+      }
+      &:after {
+        color: #6c868e;
+        content: "more_vert";
+        font-family: "Material Icons";
+        font-weight: 400;
+        font-style: normal;
+        font-size: 1.5rem;
+        text-transform: none;
+      }
+    }
+    .dropdown-item {
+      color: #6c868e;
+      display: block;
+      padding: .375rem 1.5rem .375rem .938rem;
+      font-size: .875rem;
+      &:hover {
+        color: #fff !important;
+        background: #25b9d7 !important;
+        text-decoration: none !important;
+      }
+      .material-icons {
+        font-size: 1.125rem;
+        vertical-align: text-bottom;
+        padding-right: .5rem;
+      }
+    }
+  }
+  .status-toggle {
+    padding: .6rem 0;
+  }
+}
+.listing-row.row {
+    border-bottom: #BBCDD2 solid 1px;
+    margin: 0;
+    padding-bottom: 9px;
+    padding-top: 15px;
+}
+.listing-row div {
+    padding: 18px 0;
+    line-height: 30px;
+}
+.listing-row div:nth-child(2) {
+    cursor: grab;
+}
+.listing-row div:nth-child(2) i {
+    color: #778899;
+}
+.listing-row div:nth-child(2) i:hover {
+    color: #00b9d9;
+}
+.listing-row div img {
+    width: 35px;
+}
+
+@media (max-width:768px) {
+    .listing-body {
+      .btn-group {
+        .dropdown-menu {
+          padding: 0.25rem 0;
+          min-width: 5.55rem;
+        }
+        .dropdown-item {
+          padding: .225rem .275rem;
+          .material-icons {
+            padding-right: .250rem;
+          }
+        }
+      }
+    }
+    .listing-row.row {
+        padding-top: 0.5625rem;
+    }
+    .listing-row div {
+        padding: 0.5625rem 0;
+    }
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+.psrea-flex {
+    display: flex !important;
+}
+.psre-add {
+    color: #B1C0C4;
+    cursor: pointer;
+    float: right;
+}
+.psre-add i {
+    font-size: 1.5em !important;
+}
+/* Tab Content : Listing : Switch */
+.switch-input {
+    background: #DA6E6E;
+    height: 20px;
+    width: 50px;
+    padding: 10px 0;
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    vertical-align: middle;
+    margin: -2px 5px 0 0;
+}
+.switch-input, .switch-input:after {
+    background: #D96D6E;
+    border: 2px solid #BBCDD2;
+    border-radius: 30px;
+    box-sizing: border-box;
+    color: #6C868E;
+    transition: all 0.5s;
+}
+.switch-input:after {
+    background: #FFFFFF;
+    color: #D96D6E;
+    display: block;
+    content: 'close';
+    height: 30px;
+    width: 30px;
+    position: absolute;
+    top: -5px;
+    left: -3px;
+    transform: rotate(-180deg);
+    vertical-align: middle;
+    text-align: center;
+    font-family: 'Material Icons';
+    font-size: 18px;
+    line-height: 26px;
+}
+.switch-input > input {
+    display: none;
+}
+.switch-input.-checked {
+    background: #25B9D7;
+}
+.switch-input.-checked:after {
+    content: 'done';
+    left: 20px;
+    color: #25B9D7;
+    line-height: 28px;
+    transform: rotate(0deg);
+}
+.switch_text {
+    font-weight: normal;
+}
+
+.msgRecommendation {
+    color: #6C868E;
+    margin-top: 20px;
+}
+
+/* Tab Content : Edit */
+.inactive {
+    display: none;
+}
+.active {
+    display: block;
+}
+#reassurance_block {
+    position: absolute;
+    width: 300px;
+    border: 1px solid #abcbd2;
+    background: #ffffff;
+    z-index: 3;
+    text-align: center;
+    display: none;
+}
+#reassurance_block .row {
+    margin-left: 0;
+    margin-right: 0;
+}
+#reassurance_block .category_select {
+    margin-bottom: 10px;
+    border-bottom: 1px solid #a3cbd2;
+}
+#reassurance_block .category_select div.active {
+    border-bottom: 2px solid #00b8df;
+    background: #f2f9fb;
+}
+#reassurance_block .category_select div img {
+    cursor: pointer;
+    height: 38px;
+    padding: 7px;
+    width: 38px;
+}
+#reassurance_block .category_select div img:hover {
+    opacity: .5;
+}
+#reassurance_block .category_reassurance {
+    display: none;
+}
+#reassurance_block .category_reassurance.active {
+    display: block;
+}
+#reassurance_block .category_reassurance .row {
+    padding: 12px;
+}
+#reassurance_block .category_reassurance i {
+    font-size: 48px;
+    cursor: pointer;
+    border: 2px solid #fff;
+}
+#reassurance_block .category_reassurance img {
+    max-width: 100%;
+    border: 2px solid #fff;
+    cursor: pointer;
+}
+#reassurance_block .category_reassurance i.selected,
+#reassurance_block .category_reassurance img.selected {
+    border: 2px solid #00b9d9;
+}
+#reassurance_block .category_reassurance i:hover,
+#reassurance_block .category_reassurance img:hover {
+    opacity: .5;
+}
+
+
+#blockDisplay label {
+    font-weight: bold;
+}
+#blockDisplay .form-group {
+    margin-bottom: 25px;
+}
+#blockDisplay textarea {
+    height: 70px;
+}
+#blockDisplay .text-right {
+    color: #4b4b4b;
+    padding-right: 25px;
+    padding-top: 6px;
+}
+#blockDisplay .panel-footer .text-left,
+#blockDisplay .panel-footer .text-right {
+    color: inherit;
+    padding-right: inherit;
+    padding-top: 6px;
+}
+#blockDisplay .customradiodesign label {
+    font-weight: normal;
+}
+#blockDisplay .picto-url {
+    padding-right: 5px !important;
+}
+#blockDisplay .first-block {
+    padding-top: 20px;
+}
+#blockDisplay .input-redirection {
+    padding-right: 40px;
+}
+
+/* Tab Content : Edit : Select Icon */
+.select_none {
+    cursor: pointer;
+    color: #59858f;
+    font-size: 12px;
+    font-weight: bold;
+    padding: 20px;
+    background: whitesmoke;
+    border-top: 1px solid #e4e4e4;
+}
+.select_none:hover {
+    color: #000;
+    transition: .2s color ease;
+}
+
+.psr_picto_showing {
+    margin-bottom: 20px;
+}
+.psr_picto_showing .landscape {
+    border: dotted;
+    font-size:70px;
+}
+.modify_icon {
+    cursor: pointer;
+}
+.modify_icon:hover {
+    color: #25b9d7
+}
+.image-preview-lang, .picto_by_module {
+    width: 100%;
+    max-width: 75px;
+    height: auto;
+}
+.upload_file_button {
+    border: 1px solid #b6ccd2;
+    padding-right: 11px;
+}
+.upload_file_button .slide_image {
+    display: none !important;
+}
+.upload_file_button .file_label {
+    font-weight: normal !important;
+    line-height: 10px;
+    width: 100%;
+    padding: 11px 11px 6px 11px;
+    font-size: 14px;
+    color: #9a9a9a;
+}
+
+/* Tab Display */
+#display img {
+    max-width: 200px;
+    width: 100%;
+    height: auto;
+}
+.position-hook {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+.addons-hide {
+    display: none;
+}
+.psr-footer-color,
+.psr-footer-grey,
+.psr-header-color,
+.psr-header-grey,
+.psr-product-color,
+.psr-product-grey,
+.psr-checkout-color,
+.psr-checkout-grey {
+    display: none;
+}
+.psr-footer-color.active,
+.psr-footer-grey.active,
+.psr-header-color.active,
+.psr-header-grey.active,
+.psr-product-color.active,
+.psr-product-grey.active,
+.psr-checkout-color.active,
+.psr-checkout-grey.active {
+    display: block;
+}
+#display label > div > .input_img:not(:checked) ~ img {
+    border: 1px solid #d3d8db;
+}
+#display label > div > .input_img:checked ~ img {
+    border: 2px solid #00b9d9;
+}
+
+/* Tab Appearance */
+#appearance .panel-body {
+    margin-top: 20px;
+}

modules/blockreassurance/_dev/back/index.js

@@ -0,0 +1,515 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License version 3.0
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-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.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
+ */
+import Sortable from 'sortablejs';
+import Vue from 'vue/dist/vue.min';
+
+import './back.scss';
+
+window.Vue = Vue;
+
+$(window).ready(() => {
+  // Tab Content
+  let imgSelected;
+  // Tab Content : Change position
+  new Sortable(document.getElementById('list-blockreassurance'), {
+    animation: 150,
+    ghostClass: 'sortable-ghost',
+    onUpdate() {
+      const blocks = [];
+      $('.listing-general-rol').each(function blockPush() {
+        blocks.push($(this).attr('data-block'));
+      });
+
+      $.ajax({
+        type: 'POST',
+        dataType: 'JSON',
+        url: window.psr_controller_block_url,
+        data: {
+          ajax: true,
+          action: 'UpdatePosition',
+          blocks,
+        },
+        success(data) {
+          if (data === 'success') {
+            window.showSuccessMessage(window.successPosition);
+          } else {
+            window.showErrorMessage(window.errorPosition);
+          }
+        },
+      });
+    },
+  });
+
+  // Tab Content : Set active/inactive
+  $(document).on('click', '.listing-row .switch-input', (e) => {
+    const switchIsOn = $(e.target).hasClass('-checked');
+    const status = switchIsOn ? 1 : 0;
+
+    $(e.target).parent().find('.switch_text').hide();
+    if (switchIsOn) {
+      $('input', e.target).attr('checked', false);
+      $(e.target).removeClass('-checked');
+      $(e.target).parent().find('.switch-off').show();
+    } else {
+      $('input', e.target).attr('checked', true);
+      $(e.target).addClass('-checked');
+      $(e.target).parent().find('.switch-on').show();
+    }
+
+    $.ajax({
+      url: window.psr_controller_block_url,
+      type: 'POST',
+      dataType: 'JSON',
+      async: false,
+      data: {
+        controller: window.psr_controller_block,
+        action: 'changeBlockStatus',
+        idpsr: $(e.target).parent().attr('data-cart_psreassurance_id'),
+        status,
+        ajax: true,
+      },
+      success: (data) => {
+        if (data === 'success') {
+          window.showNoticeMessage(window.block_updated);
+        } else {
+          window.showErrorMessage(window.active_error);
+        }
+      },
+    });
+  });
+
+  // Tab Content : Add
+  $(document).on('click', '.psre-add', () => {
+    $('.landscape').show();
+
+    $('#reminder_listing').removeClass('active').addClass('inactive');
+    $('#blockDisplay').removeClass('inactive').addClass('active');
+    $('.show-rea-block').removeClass('active').addClass('inactive');
+
+    $('.panel-body-0').removeClass('inactive').addClass('active');
+    $('#saveContentConfiguration').attr('data-id', '');
+
+    $('.limit_text:visible').text($('.show-rea-block.active .content_by_lang:visible input[type="text"]').val().length);
+    $('.limit_description:visible').text($('.show-rea-block.active .content_by_lang:visible textarea').val().length);
+
+    const landscape = $('.panel-body-0 .psr-picto').attr('src');
+
+    if (typeof landscape === 'undefined') {
+      $('.psr-picto:visible').hide();
+      $('.svg_chosed_here:visible').hide();
+      $('.landscape').show();
+    }
+  });
+
+  // Tab Content : Delete
+  $(document).on('click', '.psre-delete', function deleteTabContent() {
+    const idBlock = $(this).data('id');
+
+    if (!window.confirm(window.txtConfirmRemoveBlock)) {
+      return;
+    }
+    $.ajax({
+      type: 'POST',
+      dataType: 'JSON',
+      url: window.psr_controller_block_url,
+      data: {
+        ajax: true,
+        action: 'DeleteBlock',
+        idBlock,
+      },
+      success(data) {
+        if (data === 'success') {
+          // Remove line
+          $(`div[data-block="${idBlock}"]`).remove();
+        } else {
+          window.showErrorMessage(window.errorRemove);
+        }
+      },
+      error(err) {
+        console.log(err);
+      },
+    });
+  });
+
+  // Tab Content : Edit
+  $(document).on('click', '.psre-edit', function editTabContent() {
+    $('.landscape').hide();
+
+    $('#reminder_listing').removeClass('active').addClass('inactive');
+    $('#blockDisplay').removeClass('inactive').addClass('active');
+    $('.show-rea-block').removeClass('active').addClass('inactive');
+
+    const id = $(this).data('id');
+    $(`.panel-body-${id}`).removeClass('inactive').addClass('active');
+    $('#saveContentConfiguration').attr('data-id', id);
+
+    $('.limit_text:visible').text($('.show-rea-block.active .content_by_lang:visible input[type="text"]').val().length);
+    $('.limit_description:visible').text($('.show-rea-block.active .content_by_lang:visible textarea').val().length);
+
+    const landscape = $(`.panel-body-${id} .psr-picto`).attr('src');
+
+    if (typeof landscape === 'undefined' || landscape === 'undefined') {
+      $('.psr-picto:visible').hide();
+      $('.svg_chosed_here:visible').hide();
+      $('.landscape').show();
+    }
+  });
+
+  // Tab Content : Edit : Language
+  $(document).on('change', 'select[name="psr-language"]', (e) => {
+    const lang = $(e.target).val();
+
+    $('.content_by_lang').removeClass('active').addClass('inactive');
+    $(`.content_by_lang.lang-${lang}`).addClass('active');
+    $('.limit_text:visible').text($('.show-rea-block.active .content_by_lang:visible input[type="text"]').val().length);
+    $('.limit_description:visible').text($('.show-rea-block.active .content_by_lang:visible textarea').val().length);
+  });
+
+  // Tab Content : Edit : Modify icon
+  $(document).on('click', '.modify_icon', (e) => {
+    const position = $(e.target).offset();
+    const offset = $(e.target).width();
+    const top = position.top / 2;
+    const left = position.left / 2 - offset;
+
+    $('#reassurance_block')
+      .show().css('top', `${top}px`).css('left', `${left}px`);
+  });
+
+  // Tab Content : Edit : Modify icon : Click outside
+  $(document).on('click', 'body', (e) => {
+    const isInside = $(e.target).closest('.modify_icon').length;
+    const isPopin = $(e.target).closest('#reassurance_block').length;
+
+    if (!isInside && !isPopin) {
+      $('#reassurance_block').fadeOut(300);
+    }
+  });
+
+  // Tab Content : Edit : Modify icon : Tabs
+  $(document).on('click', '#reassurance_block .category_select div img', (e) => {
+    const category = $(e.target).attr('data-id');
+    // Change the tab
+    $('#reassurance_block .category_select div').removeClass('active');
+    $(e.target).parent().addClass('active');
+    // Change the tab content
+    $('#reassurance_block .category_reassurance').removeClass('active');
+    $(`#reassurance_block .cat_${category}`).addClass('active');
+  });
+
+  // Tab Content : Edit : Select icon
+  $(document).on('click', '#reassurance_block .category_reassurance .svg', (e) => {
+    const svg = $(e.target)[0].outerHTML;
+
+    // Popin : select the icon
+    $('#reassurance_block .category_reassurance img.svg.selected').removeClass('selected');
+    $(e.target).addClass('selected');
+    // Hide the initial icon
+    $('.landscape').hide();
+    $('.psr-picto').hide();
+    // Show the image
+    $('.svg_chosed_here').show();
+    $('.svg_chosed_here:visible').html(svg);
+    // Popin : hide it
+    $('#reassurance_block').fadeOut(300);
+  });
+
+  // Tab Content : Edit : Select none
+  $(document).on('click', '#reassurance_block .select_none', () => {
+    const psrPicto = $('.psr-picto:visible');
+    psrPicto.attr('src', 'undefined').hide();
+
+    // Un-select icon in the popin
+    $('#reassurance_block .category_reassurance img.svg').removeClass('selected');
+    // Hide the icon seected
+    $('.svg_chosed_here:visible').hide();
+    // Display the landscape icon
+    $('.landscape').show();
+    // Hide the popin
+    $('#reassurance_block').fadeOut(300);
+  });
+
+  // Tab Content : Edit : Custom Icon
+  $(document).on('change', '.show-rea-block.active input[type="file"]', function editTabContentCustomIcon() {
+    const {files} = $(this)[0];
+    // Change the label
+    const jqLabel = $(this).parents('.input-group').find('label.file_label');
+    let label = jqLabel.attr('data-label');
+
+    if (files.length === 1) {
+      label = `${files.length} file selected`;
+    }
+    jqLabel.html(label);
+
+    // Preview the image
+    const idPreview = $(this).attr('data-preview');
+
+    if (files && files[0]) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const jqPreview = $(`.${idPreview}`);
+
+        if (jqPreview.hasClass('hide')) {
+          jqPreview.removeClass('hide');
+        }
+        jqPreview.attr('src', e.target.result);
+      };
+      reader.readAsDataURL(files[0]);
+
+      [imgSelected] = files;
+
+      // Hide the initial icon
+      $('.landscape').hide();
+      $('.psr-picto').hide();
+      $('.picto_by_module').hide();
+      // Show the image
+      $('.svg_chosed_here').show();
+    }
+  });
+
+  // Tab Content : Edit : MaxLength
+  $(document).on('keyup keydown', '.show-rea-block.active .content_by_lang input[type="text"], .show-rea-block.active .content_by_lang textarea', function editTabContentMaxLength() {
+    const maxLength = 100;
+    const val = $(this).val();
+    let valLength = val.length;
+
+    if (val.length > maxLength) {
+      $(this).val(val.substring(0, maxLength - 1));
+      valLength = $(this).val().length;
+    }
+    if ($(this).is('input:text')) {
+      $('.limit_text:visible').text(valLength);
+    } else {
+      $('.limit_description:visible').text(valLength);
+    }
+  });
+
+  // Tab Content : Edit : Return
+  $(document).on('click', '#blockDisplay .refreshPage', () => {
+    window.location.reload();
+  });
+
+  // Tab Content : Edit : Redirect
+  $(document).on('change', 'input[name^="PSR_REDIRECTION_"]', (e) => {
+    function setEnabledPSR(psr, state) {
+      if (state) {
+        $(`.psr-${psr}`).removeClass('inactive').addClass('active');
+      } else {
+        $(`.psr-${psr}`).removeClass('active').addClass('inactive');
+      }
+    }
+
+    switch ($(e.target).val()) {
+      case '0':
+        setEnabledPSR('cms', false);
+        setEnabledPSR('url', false);
+        break;
+      case '1':
+        setEnabledPSR('cms', true);
+        setEnabledPSR('url', false);
+        break;
+      case '2':
+        setEnabledPSR('cms', false);
+        setEnabledPSR('url', true);
+        break;
+      default:
+        break;
+    }
+  });
+
+  // Tab Content : Edit : Redirect : URL
+  $(document).on('keyup', '.block_url:visible', (e) => {
+    const url = $(e.target).val();
+    const patternForUrl = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;
+    const patternForHttp = /(http(s)?:\/\/)/g;
+
+    // If it is a real URL :
+    if (patternForUrl.test(url)) {
+      $(e.target).css('background', '#fff');
+      if (!patternForHttp.test(url)) {
+        $(e.target).val(`http://${url}`);
+      }
+    } else {
+      $(e.target).css('background', '#ffecec');
+    }
+  });
+
+  // Tab Content : Edit : Save
+  $(document).on('click', '#saveContentConfiguration', function editTabContentSave() {
+    const dataToSave = {};
+    const blockId = $(this).attr('data-id');
+    const imgIcon = $('.psr_picto_showing:visible img.psr-picto');
+    let iconSrc = imgIcon.attr('src');
+    const iconReplaced = $('.svg_chosed_here img.svg').attr('src');
+
+    if (typeof iconReplaced !== 'undefined') {
+      iconSrc = iconReplaced;
+    }
+
+    let minimalData = false;
+    $('.show-rea-block.active .content_by_lang').each((index, elem) => {
+      const lang = parseInt($(elem).attr('data-lang'), 10);
+      const dataType = $(elem).attr('data-type');
+
+      if (!Object.prototype.hasOwnProperty.call(dataToSave, lang)) {
+        dataToSave[lang] = {};
+      }
+      if (!Object.prototype.hasOwnProperty.call(dataToSave[lang], dataType)) {
+        dataToSave[lang][dataType] = '';
+      }
+      if (dataType === 'description') {
+        dataToSave[lang][dataType] = $('textarea', elem).val();
+      } else if (typeof ($('input', elem).val()) !== 'undefined') {
+        dataToSave[lang][dataType] = $('input', elem).val();
+      }
+
+      if (!minimalData && lang === window.psr_lang && dataType === 'title' && dataToSave[lang][dataType].length > 0) {
+        minimalData = true;
+      }
+    });
+
+    if (!minimalData) {
+      window.showErrorMessage(window.min_field_error);
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append('ajax', true);
+    formData.append('action', 'SaveBlockContent');
+    formData.append('file', imgSelected);
+    formData.append('id_block', blockId);
+    formData.append('lang_values', JSON.stringify(dataToSave));
+    formData.append('picto', iconSrc);
+    formData.append('typelink', $(`input[name="PSR_REDIRECTION_${blockId}"]:checked`).val());
+    formData.append('id_cms', $(`select[name="ID_CMS_${blockId}"]`).val());
+
+    $.ajax({
+      type: 'POST',
+      dataType: 'JSON',
+      url: window.psr_controller_block_url,
+      contentType: false,
+      processData: false,
+      data: formData,
+      success() {
+        window.showSuccessMessage(window.psre_success);
+        setTimeout(window.location.reload(), 1800);
+      },
+    });
+  });
+
+  // Tab Display
+  new Vue({
+    el: '#menu',
+    data: {
+      selectedTabName: window.currentPage,
+    },
+    methods: {
+      makeActive(item) {
+        this.selectedTabName = item;
+        window.history.pushState({}, '', `${window.moduleAdminLink.replace(/amp;/g, '')}&page=${item}`);
+      },
+      isActive(item) {
+        if (this.selectedTabName !== item) {
+          return false;
+        }
+        $('.psr_menu').addClass('addons-hide');
+        $(`.psr_menu#${item}`).removeClass('addons-hide');
+
+        return true;
+      },
+    },
+  });
+
+  // Tab Display : Save Position
+  $(document).on(
+    'change',
+    'input[name="PSR_HOOK_CHECKOUT"],input[name="PSR_HOOK_HEADER"],input[name="PSR_HOOK_FOOTER"],input[name="PSR_HOOK_PRODUCT"]',
+    function updatePosition() {
+      let selector;
+
+      switch ($(this).attr('name')) {
+        case 'PSR_HOOK_CHECKOUT':
+          selector = 'checkout';
+          break;
+        case 'PSR_HOOK_HEADER':
+          selector = 'header';
+          break;
+        case 'PSR_HOOK_FOOTER':
+          selector = 'footer';
+          break;
+        case 'PSR_HOOK_PRODUCT':
+          selector = 'product';
+          break;
+        default:
+          selector = '';
+      }
+
+      $(`.psr-${selector}-grey`).addClass('active');
+      $(`.psr-${selector}-color`).removeClass('active');
+
+      $(this).nextAll(`.psr-${selector}-grey`).removeClass('active');
+      $(this).nextAll(`.psr-${selector}-color`).addClass('active');
+      savePositionByHook($(this).attr('name'), $(this).val());
+    },
+  );
+  function savePositionByHook(hook, value) {
+    $.ajax({
+      type: 'POST',
+      dataType: 'JSON',
+      url: window.psr_controller_block_url,
+      data: {
+        ajax: true,
+        action: 'SavePositionByHook',
+        hook,
+        value,
+      },
+      success(data) {
+        if (data === 'success') {
+          window.showSuccessMessage(window.successPosition);
+        } else {
+          window.showErrorMessage(window.errorPosition);
+        }
+      },
+    });
+  }
+
+  // Tab Appearance : Save Color
+  $(document).on('click', '#saveConfiguration', () => {
+    const color1 = $('#color_1').val();
+    const color2 = $('#color_2').val();
+    $.ajax({
+      type: 'POST',
+      dataType: 'JSON',
+      url: window.psr_controller_block_url,
+      data: {
+        ajax: true,
+        action: 'SaveColor',
+        color1,
+        color2,
+      },
+      success(data) {
+        if (data === 'success') {
+          window.showSuccessMessage(window.psre_success);
+        } else {
+          window.showErrorMessage(window.active_error);
+        }
+      },
+    });
+  });
+});

modules/blockreassurance/_dev/back/index.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License version 3.0
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-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.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
+ */
+header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
+header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
+
+header('Cache-Control: no-store, no-cache, must-revalidate');
+header('Cache-Control: post-check=0, pre-check=0', false);
+header('Pragma: no-cache');
+
+header('Location: ../');
+exit;

modules/blockreassurance/_dev/back/vue-plugins.d.ts

@@ -0,0 +1 @@
+declare module 'vue/dist/vue.min';

modules/blockreassurance/_dev/front/front.scss

@@ -0,0 +1,69 @@
+.blockreassurance {
+    padding-top: 10px;
+    text-align: center;
+    width: 100%;
+  .reass-item {
+    display: inline-block;
+    text-align: center;
+    vertical-align: top;
+  }
+  .block-title {
+    font-weight: bold;
+  }
+  .block-icon,
+  .block-icon img,
+  .block-icon svg {
+    height: 70px;
+  }
+}
+
+@media (max-width:575px) {
+    .blockreassurance {
+        text-align:left;
+    }
+    .blockreassurance .block-icon {
+        display: inline-block;
+        height: 35px;
+        float: left;
+        margin: 10px;
+        width: 35px;
+    }
+    .blockreassurance .block-icon img,
+    .blockreassurance .block-icon svg {
+        height: 35px;
+        width: 35px;
+    }
+    .blockreassurance .block-title {
+        display: inline-block;
+        height: 35px;
+        max-width: calc(100% - 55px);
+        padding-top: 10px;
+    }
+}
+
+.blockreassurance_product {
+  margin-top: 25px;
+  .item-product {
+    display: inline-block;
+    height: 35px;
+    float: left;
+    margin-right: 5px;
+    padding-top: 5px;
+    width: 35px;
+  }
+}
+
+.blockreassurance_product .item-product img,
+.blockreassurance_product .item-product svg {
+    height: 35px;
+    width: 35px;
+}
+
+.blockreassurance_product p.block-title {
+    line-height: 40px;
+}
+
+/* Specific Checkout */
+body#checkout .container-blockreassurance {
+    min-height: auto;
+}

modules/blockreassurance/_dev/front/index.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License version 3.0
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-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.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
+ */
+
+import './front.scss';
+
+$(window).ready(() => {
+  /**
+   * @param {String} imgSrc
+   */
+  function styleSVG(imgSrc) {
+    const imgTarget = $(`.blockreassurance_product img.svg.invisible[src="${imgSrc}"], .blockreassurance img.svg.invisible[src="${imgSrc}"]`);
+
+    if (imgTarget.length === 0) {
+      return;
+    }
+
+    // Fetch the image
+    $.ajax({
+      url: imgSrc,
+      type: 'GET',
+      success(data) {
+        if ($.isXMLDoc(data)) {
+          // Get the SVG tag, ignore the rest
+          let $svg = $(data).find('svg');
+          // Add URL in data
+          $svg = $svg.attr('data-img-url', imgSrc);
+          // Remove any invalid XML tags as per http://validator.w3.org
+          $svg = $svg.removeAttr('xmlns:a');
+          // Set color defined in backoffice
+          $svg.find('path[fill]').attr('fill', window.psr_icon_color);
+          $svg.find('path:not([fill])').css('fill', window.psr_icon_color);
+          // For each element, replace the svg with specific ID & CSS class
+          imgTarget.each(function renderSVG() {
+            const imgID = $(this).attr('id');
+            const imgClass = $(this).attr('class');
+            let $imgSvg = $svg.clone();
+            // Add replaced image's ID to the new SVG
+            $imgSvg = typeof imgID !== 'undefined' ? $imgSvg.attr('id', imgID) : $imgSvg;
+            // Add replaced image's classes to the new SVG
+            $imgSvg = typeof imgClass !== 'undefined' ? $imgSvg.attr('class', `${imgClass} replaced-svg`) : $imgSvg.attr('class', ' replaced-svg');
+            $imgSvg.removeClass('invisible');
+            $(this).replaceWith($imgSvg);
+          });
+        }
+      },
+    });
+  }
+
+  const imgSrcSvg = $('.blockreassurance_product img.svg, .blockreassurance img.svg').map(function getSrcAttr() {
+    return $(this).attr('src');
+  }).toArray();
+  imgSrcSvg
+    .filter((el, pos) => imgSrcSvg.indexOf(el) === pos)
+    .forEach(styleSVG);
+});

modules/blockreassurance/_dev/front/index.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License version 3.0
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-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.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
+ */
+header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
+header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
+
+header('Cache-Control: no-store, no-cache, must-revalidate');
+header('Cache-Control: post-check=0, pre-check=0', false);
+header('Pragma: no-cache');
+
+header('Location: ../');
+exit;

modules/blockreassurance/_dev/index.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License version 3.0
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-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.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
+ */
+header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
+header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
+
+header('Cache-Control: no-store, no-cache, must-revalidate');
+header('Cache-Control: post-check=0, pre-check=0', false);
+header('Pragma: no-cache');
+
+header('Location: ../');
+exit;