Add first stimulus controllers to display elements

1. Introduce a stimulus toggle_controller

 - controller: { "data-controller": "toggle" }
 - action: { "data-action": "toggle#toggle" }
 - show or not: { "data-toggle-show":  true || false  }
- targets: { "data-toggle-target": "content", style: "display: none" }
Display payment method price

2. States are populated via a new dependant_select_controller by stimulus.
Usage:

 - controller : { "data-controller": "dependant-select", "data-dependant-select-options-value": [ [1: ["option", "for", "1"], [2: ["option", "for", "2"] ] }
 - target (on the populating target):  { "data-dependant-select-target": "select" }
 - source and action (on the input that leads the dependant select): {"data-dependant-select-target": "source", "data-action": "dependant-select#handleSelectChange"}
Some improvements on readability

3. Populate ShippingMethod description thanks to "shippingmethod_controller"


+
 - Add countries and states

app/webpacker/controllers/dependant_select_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["source", "select"];
+  static values = { options: Array };
+
+  connect() {
+    this.populateSelect(parseInt(this.sourceTarget.value));
+  }
+
+  handleSelectChange() {
+    this.populateSelect(parseInt(this.sourceTarget.value));
+  }
+
+  populateSelect(sourceId) {
+    const allOptions = this.optionsValue;
+    const options = allOptions.find((option) => option[0] === sourceId)[1];
+    const selectBox = this.selectTarget;
+    selectBox.innerHTML = "";
+    options.forEach((item) => {
+      const opt = document.createElement("option");
+      opt.value = item[1];
+      opt.innerHTML = item[0];
+      selectBox.appendChild(opt);
+    });
+  }
+}