From 61928cbc052fcb067dc27039e2fc1c0c68ea525c Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 26 Jul 2022 15:33:00 +0200 Subject: [PATCH] Run prettier formatter --- .../dependant_select_controller.js | 28 +++---- .../controllers/example_controller.js | 4 +- app/webpacker/controllers/flash_controller.js | 16 ++-- .../controllers/guest_checkout_controller.js | 14 ++-- .../controllers/help_modal_controller.js | 30 +++---- .../controllers/help_modal_link_controller.js | 12 ++- .../controllers/login_modal_controller.js | 83 +++++++++++-------- .../controllers/paymentmethod_controller.js | 2 +- .../controllers/remote_toggle_controller.js | 11 ++- .../controllers/stripe_cards_controller.js | 2 +- .../controllers/stripe_controller.js | 80 ++++++++++++------ app/webpacker/controllers/tabs_controller.js | 22 ++--- app/webpacker/packs/admin.js | 10 +-- app/webpacker/packs/application.js | 35 ++++---- 14 files changed, 194 insertions(+), 155 deletions(-) diff --git a/app/webpacker/controllers/dependant_select_controller.js b/app/webpacker/controllers/dependant_select_controller.js index daa615a7bf..577f11c951 100644 --- a/app/webpacker/controllers/dependant_select_controller.js +++ b/app/webpacker/controllers/dependant_select_controller.js @@ -11,36 +11,36 @@ export default class extends Controller { // private populateSelect(sourceId) { - this.removeCurrentOptions() - this.populateNewOptions(sourceId) + this.removeCurrentOptions(); + this.populateNewOptions(sourceId); } removeCurrentOptions() { - this.selectTarget.innerHTML = "" + this.selectTarget.innerHTML = ""; - this.selectTarget.tomselect?.clear() - this.selectTarget.tomselect?.clearOptions() + this.selectTarget.tomselect?.clear(); + this.selectTarget.tomselect?.clearOptions(); } populateNewOptions(sourceId) { - const options = this.dependantOptionsFor(sourceId) + const options = this.dependantOptionsFor(sourceId); options.forEach((item) => { - this.addOption(item[0], item[1]) + this.addOption(item[0], item[1]); }); - this.selectTarget.tomselect?.sync() - this.selectTarget.tomselect?.addItem(options[0]?.[1]) + this.selectTarget.tomselect?.sync(); + this.selectTarget.tomselect?.addItem(options[0]?.[1]); } addOption(label, value) { - const newOption = document.createElement("option") - newOption.innerHTML = label - newOption.value = value - this.selectTarget.appendChild(newOption) + const newOption = document.createElement("option"); + newOption.innerHTML = label; + newOption.value = value; + this.selectTarget.appendChild(newOption); } dependantOptionsFor(sourceId) { - return this.optionsValue.find((option) => option[0] === sourceId)[1] + return this.optionsValue.find((option) => option[0] === sourceId)[1]; } } diff --git a/app/webpacker/controllers/example_controller.js b/app/webpacker/controllers/example_controller.js index d638ca088c..03477d5a9a 100644 --- a/app/webpacker/controllers/example_controller.js +++ b/app/webpacker/controllers/example_controller.js @@ -3,7 +3,7 @@ // or: // div{data: {controller: "example"}} -import { Controller } from "stimulus" +import { Controller } from "stimulus"; export default class extends Controller { // connect() is a built-in lifecycle callback for Stimulus Controllers. It fires when the @@ -11,7 +11,7 @@ export default class extends Controller { // injected into the DOM. This means initialization is not tied to the page load event, but // will also happen dynamically if and when new DOM elements are added or removed. connect() { - console.log("We're connected!") + console.log("We're connected!"); } } diff --git a/app/webpacker/controllers/flash_controller.js b/app/webpacker/controllers/flash_controller.js index 12e499ae69..1b17498c46 100644 --- a/app/webpacker/controllers/flash_controller.js +++ b/app/webpacker/controllers/flash_controller.js @@ -1,20 +1,20 @@ -import { Controller } from "stimulus" +import { Controller } from "stimulus"; -document.addEventListener('turbolinks:before-cache', () => - document.getElementById('flash').remove() -) +document.addEventListener("turbolinks:before-cache", () => + document.getElementById("flash").remove() +); export default class extends Controller { connect() { - setTimeout(this.fadeout.bind(this), 3000) + setTimeout(this.fadeout.bind(this), 3000); } fadeout() { - this.element.classList.add("animate-hide-500") - setTimeout(this.close.bind(this), 500) + this.element.classList.add("animate-hide-500"); + setTimeout(this.close.bind(this), 500); } close() { - this.element.remove() + this.element.remove(); } } diff --git a/app/webpacker/controllers/guest_checkout_controller.js b/app/webpacker/controllers/guest_checkout_controller.js index 450e6ca271..322386b5b2 100644 --- a/app/webpacker/controllers/guest_checkout_controller.js +++ b/app/webpacker/controllers/guest_checkout_controller.js @@ -1,22 +1,24 @@ -import { Controller } from "stimulus" +import { Controller } from "stimulus"; export default class extends Controller { static targets = ["checkout", "guest"]; static values = { distributor: String, - session: { type: String, default: "guest-checkout" } + session: { type: String, default: "guest-checkout" }, }; connect() { - if(!this.hasGuestTarget) { return } + if (!this.hasGuestTarget) { + return; + } - if(this.usingGuestCheckout()) { + if (this.usingGuestCheckout()) { this.showCheckout(); } } login() { - window.dispatchEvent(new Event("login:modal:open")) + window.dispatchEvent(new Event("login:modal:open")); } showCheckout() { @@ -30,6 +32,6 @@ export default class extends Controller { } usingGuestCheckout() { - return sessionStorage.getItem(this.sessionValue) === this.distributorValue + return sessionStorage.getItem(this.sessionValue) === this.distributorValue; } } diff --git a/app/webpacker/controllers/help_modal_controller.js b/app/webpacker/controllers/help_modal_controller.js index eac046c68e..36322ea285 100644 --- a/app/webpacker/controllers/help_modal_controller.js +++ b/app/webpacker/controllers/help_modal_controller.js @@ -1,33 +1,33 @@ -import { Controller } from "stimulus" +import { Controller } from "stimulus"; export default class extends Controller { - static targets = ["background", "modal"] + static targets = ["background", "modal"]; open() { - this.backgroundTarget.style.display = "block" - this.modalTarget.style.display = "block" + this.backgroundTarget.style.display = "block"; + this.modalTarget.style.display = "block"; setTimeout(() => { - this.modalTarget.classList.add("in") - this.backgroundTarget.classList.add("in") - document.querySelector("body").classList.add("modal-open") - }) + this.modalTarget.classList.add("in"); + this.backgroundTarget.classList.add("in"); + document.querySelector("body").classList.add("modal-open"); + }); } close() { - this.modalTarget.classList.remove("in") - this.backgroundTarget.classList.remove("in") - document.querySelector("body").classList.remove("modal-open") + this.modalTarget.classList.remove("in"); + this.backgroundTarget.classList.remove("in"); + document.querySelector("body").classList.remove("modal-open"); setTimeout(() => { - this.backgroundTarget.style.display = "none" - this.modalTarget.style.display = "none" - }, 200) + this.backgroundTarget.style.display = "none"; + this.modalTarget.style.display = "none"; + }, 200); } closeIfEscapeKey(e) { if (e.code == "Escape") { - this.close() + this.close(); } } } diff --git a/app/webpacker/controllers/help_modal_link_controller.js b/app/webpacker/controllers/help_modal_link_controller.js index e21febbbff..8d3bc973fa 100644 --- a/app/webpacker/controllers/help_modal_link_controller.js +++ b/app/webpacker/controllers/help_modal_link_controller.js @@ -1,11 +1,15 @@ -import { Controller } from "stimulus" +import { Controller } from "stimulus"; export default class extends Controller { - static values = { target: String } + static values = { target: String }; open() { - let helpModal = document.getElementById(this.targetValue) - let helpModalController = this.application.getControllerForElementAndIdentifier(helpModal, "help-modal"); + let helpModal = document.getElementById(this.targetValue); + let helpModalController = + this.application.getControllerForElementAndIdentifier( + helpModal, + "help-modal" + ); helpModalController.open(); } } diff --git a/app/webpacker/controllers/login_modal_controller.js b/app/webpacker/controllers/login_modal_controller.js index 70334ddffc..c75f709627 100644 --- a/app/webpacker/controllers/login_modal_controller.js +++ b/app/webpacker/controllers/login_modal_controller.js @@ -1,61 +1,70 @@ -import { Controller } from "stimulus" -import CableReady from "cable_ready" +import { Controller } from "stimulus"; +import CableReady from "cable_ready"; export default class extends Controller { - static targets = ["background", "modal", "email"] - static values = { email: String } + static targets = ["background", "modal", "email"]; + static values = { email: String }; connect() { - if(this.hasModalTarget) { - window.addEventListener("login:modal:open", this.open) + if (this.hasModalTarget) { + window.addEventListener("login:modal:open", this.open); - if(location.hash.substr(1).includes("/login")) { - this.open() + if (location.hash.substr(1).includes("/login")) { + this.open(); } } } call(event) { - event.preventDefault() - window.dispatchEvent(new Event("login:modal:open")) + event.preventDefault(); + window.dispatchEvent(new Event("login:modal:open")); } emailOnInput(event) { - this.emailValue = event.currentTarget.value + this.emailValue = event.currentTarget.value; this.emailTargets.forEach((element) => { - element.value = this.emailValue - }) + element.value = this.emailValue; + }); } open = () => { - if(!location.hash.substr(1).includes("/login")) { - history.pushState({}, "", "#/login") + if (!location.hash.substr(1).includes("/login")) { + history.pushState({}, "", "#/login"); } - this.backgroundTarget.style.display = "block" - this.modalTarget.style.display = "block" + this.backgroundTarget.style.display = "block"; + this.modalTarget.style.display = "block"; setTimeout(() => { - this.modalTarget.classList.add("in") - this.backgroundTarget.classList.add("in") - document.querySelector("body").classList.add("modal-open") - }) + this.modalTarget.classList.add("in"); + this.backgroundTarget.classList.add("in"); + document.querySelector("body").classList.add("modal-open"); + }); - window._paq?.push(['trackEvent', 'Signin/Signup', 'Login Modal View', window.location.href]) - } + window._paq?.push([ + "trackEvent", + "Signin/Signup", + "Login Modal View", + window.location.href, + ]); + }; close() { - history.pushState({}, "", window.location.pathname + window.location.search) + history.pushState( + {}, + "", + window.location.pathname + window.location.search + ); - this.modalTarget.classList.remove("in") - this.backgroundTarget.classList.remove("in") + this.modalTarget.classList.remove("in"); + this.backgroundTarget.classList.remove("in"); - document.querySelector("body").classList.remove("modal-open") + document.querySelector("body").classList.remove("modal-open"); setTimeout(() => { - this.backgroundTarget.style.display = "none" - this.modalTarget.style.display = "none" - }, 200) + this.backgroundTarget.style.display = "none"; + this.modalTarget.style.display = "none"; + }, 200); } resend_confirmation(event) { @@ -63,19 +72,21 @@ export default class extends Controller { method: "POST", body: JSON.stringify({ spree_user: { email: this.emailValue }, - tab: event.currentTarget.dataset.tab + tab: event.currentTarget.dataset.tab, }), - headers: { "Content-type": "application/json; charset=UTF-8" } - }).then(data => data.json()).then(CableReady.perform) + headers: { "Content-type": "application/json; charset=UTF-8" }, + }) + .then((data) => data.json()) + .then(CableReady.perform); } returnHome() { - window.location = "/" + window.location = "/"; } disconnect() { - if(this.hasModalTarget) { - window.removeEventListener("login:modal:open", this.open) + if (this.hasModalTarget) { + window.removeEventListener("login:modal:open", this.open); } } } diff --git a/app/webpacker/controllers/paymentmethod_controller.js b/app/webpacker/controllers/paymentmethod_controller.js index ae276f7a5f..e840c426e8 100644 --- a/app/webpacker/controllers/paymentmethod_controller.js +++ b/app/webpacker/controllers/paymentmethod_controller.js @@ -27,7 +27,7 @@ export default class extends Controller { Array.from( document.getElementsByClassName("paymentmethod-container") ).forEach((container) => { - const enabled = container.id === paymentMethodContainerId + const enabled = container.id === paymentMethodContainerId; if (enabled) { container.style.display = "block"; diff --git a/app/webpacker/controllers/remote_toggle_controller.js b/app/webpacker/controllers/remote_toggle_controller.js index 25006d8651..ad6944f837 100644 --- a/app/webpacker/controllers/remote_toggle_controller.js +++ b/app/webpacker/controllers/remote_toggle_controller.js @@ -2,16 +2,15 @@ import { Controller } from "stimulus"; export default class extends Controller { static targets = ["chevron"]; - static values = { selector: String } + static values = { selector: String }; toggle(event) { if (this.hasChevronTarget) { - this.chevronTarget.classList.toggle("icon-chevron-down") - this.chevronTarget.classList.toggle("icon-chevron-up") + this.chevronTarget.classList.toggle("icon-chevron-down"); + this.chevronTarget.classList.toggle("icon-chevron-up"); } - const element = document.querySelector(this.selectorValue) - element.style.display = element.style.display === "none" ? "block" : "none" + const element = document.querySelector(this.selectorValue); + element.style.display = element.style.display === "none" ? "block" : "none"; } } - diff --git a/app/webpacker/controllers/stripe_cards_controller.js b/app/webpacker/controllers/stripe_cards_controller.js index 6cd842968a..98c657867b 100644 --- a/app/webpacker/controllers/stripe_cards_controller.js +++ b/app/webpacker/controllers/stripe_cards_controller.js @@ -6,7 +6,7 @@ export default class extends Controller { static targets = ["stripeelements", "select"]; connect() { - this.initSelectedCard() + this.initSelectedCard(); } initSelectedCard() { diff --git a/app/webpacker/controllers/stripe_controller.js b/app/webpacker/controllers/stripe_controller.js index b707928727..f7f0e2e99f 100644 --- a/app/webpacker/controllers/stripe_controller.js +++ b/app/webpacker/controllers/stripe_controller.js @@ -1,16 +1,24 @@ -import { Controller } from "stimulus" +import { Controller } from "stimulus"; export default class extends Controller { - static targets = [ "cardElement", "cardErrors", "expMonth", "expYear", "brand", "last4", "pmId" ]; + static targets = [ + "cardElement", + "cardErrors", + "expMonth", + "expYear", + "brand", + "last4", + "pmId", + ]; static styles = { base: { fontFamily: "Roboto, Arial, sans-serif", fontSize: "16px", color: "#5c5c5c", "::placeholder": { - color: "#6c6c6c" - } - } + color: "#6c6c6c", + }, + }, }; initialize() { @@ -19,10 +27,12 @@ export default class extends Controller { // Initialize Stripe JS this.stripe = Stripe(this.data.get("key")); - this.stripeElement = this.stripe.elements({ locale: I18n.base_locale }).create("card", { - style: this.constructor.styles, - hidePostalCode: true - }); + this.stripeElement = this.stripe + .elements({ locale: I18n.base_locale }) + .create("card", { + style: this.constructor.styles, + hidePostalCode: true, + }); // Mount Stripe Elements JS to the form field this.stripeElement.mount(this.cardElementTarget); @@ -41,26 +51,42 @@ export default class extends Controller { // Before the form is submitted we send the card details directly to Stripe (via StripeJS), // and receive a token which represents the card object, and add that token into the form. stripeSubmit = (event) => { - if(!this.stripeSelected() || !this.catchFormSubmit) { return } + if (!this.stripeSelected() || !this.catchFormSubmit) { + return; + } event.preventDefault(); event.stopPropagation(); - this.stripe.createPaymentMethod({type: "card", card: this.stripeElement}).then(response => { - if (response.error) { - this.updateErrors(response); - } else { - this.pmIdTarget.setAttribute("value", response.paymentMethod.id); - this.expMonthTarget.setAttribute("value", response.paymentMethod.card.exp_month); - this.expYearTarget.setAttribute("value", response.paymentMethod.card.exp_year); - this.brandTarget.setAttribute("value", response.paymentMethod.card.brand); - this.last4Target.setAttribute("value", response.paymentMethod.card.last4); - this.catchFormSubmit = false; - - event.submitter.click(); - } - }); - } + this.stripe + .createPaymentMethod({ type: "card", card: this.stripeElement }) + .then((response) => { + if (response.error) { + this.updateErrors(response); + } else { + this.pmIdTarget.setAttribute("value", response.paymentMethod.id); + this.expMonthTarget.setAttribute( + "value", + response.paymentMethod.card.exp_month + ); + this.expYearTarget.setAttribute( + "value", + response.paymentMethod.card.exp_year + ); + this.brandTarget.setAttribute( + "value", + response.paymentMethod.card.brand + ); + this.last4Target.setAttribute( + "value", + response.paymentMethod.card.last4 + ); + this.catchFormSubmit = false; + + event.submitter.click(); + } + }); + }; // Update validation messages from Stripe shown in the form updateErrors = (data) => { @@ -69,10 +95,10 @@ export default class extends Controller { } else { this.cardErrorsTarget.textContent = ""; } - } + }; // Boolean; true if Stripe is shown / currently selected stripeSelected() { - return !!this.cardElementTarget.offsetParent + return !!this.cardElementTarget.offsetParent; } } diff --git a/app/webpacker/controllers/tabs_controller.js b/app/webpacker/controllers/tabs_controller.js index 9d9995b94e..be2a181427 100644 --- a/app/webpacker/controllers/tabs_controller.js +++ b/app/webpacker/controllers/tabs_controller.js @@ -1,36 +1,36 @@ import { Controller } from "stimulus"; export default class extends Controller { - static targets = ["tab", "content"] + static targets = ["tab", "content"]; select(event) { - this.setCurrentTab(this.tabTargets.indexOf(event.currentTarget)) + this.setCurrentTab(this.tabTargets.indexOf(event.currentTarget)); } // private connect() { - this.setCurrentTab() + this.setCurrentTab(); } setCurrentTab(tabIndex = 0) { - this.showSelectedContent(tabIndex) - this.setButtonActiveClass(tabIndex) + this.showSelectedContent(tabIndex); + this.setButtonActiveClass(tabIndex); } showSelectedContent(tabIndex) { this.contentTargets.forEach((element, index) => { - element.hidden = index !== tabIndex - }) + element.hidden = index !== tabIndex; + }); } setButtonActiveClass(tabIndex) { this.tabTargets.forEach((element, index) => { - if(index === tabIndex) { - element.classList.add("active") + if (index === tabIndex) { + element.classList.add("active"); } else { - element.classList.remove("active") + element.classList.remove("active"); } - }) + }); } } diff --git a/app/webpacker/packs/admin.js b/app/webpacker/packs/admin.js index 38fb32259e..3f1bed9332 100644 --- a/app/webpacker/packs/admin.js +++ b/app/webpacker/packs/admin.js @@ -1,6 +1,6 @@ -import { Application } from "stimulus" -import { definitionsFromContext } from "stimulus/webpack-helpers" +import { Application } from "stimulus"; +import { definitionsFromContext } from "stimulus/webpack-helpers"; -const application = Application.start() -const context = require.context("controllers", true, /.js$/) -application.load(definitionsFromContext(context)) +const application = Application.start(); +const context = require.context("controllers", true, /.js$/); +application.load(definitionsFromContext(context)); diff --git a/app/webpacker/packs/application.js b/app/webpacker/packs/application.js index 2d04d92039..957ea95d98 100644 --- a/app/webpacker/packs/application.js +++ b/app/webpacker/packs/application.js @@ -1,27 +1,24 @@ /* eslint no-console:0 */ // StimulusJS -import { Application } from "stimulus" -import { definitionsFromContext } from "stimulus/webpack-helpers" +import { Application } from "stimulus"; +import { definitionsFromContext } from "stimulus/webpack-helpers"; -const application = Application.start() -const context = require.context("controllers", true, /.js$/) -application.load(definitionsFromContext(context)) +const application = Application.start(); +const context = require.context("controllers", true, /.js$/); +application.load(definitionsFromContext(context)); -import CableReady from "cable_ready" -import mrujs from "mrujs" -import { CableCar } from "mrujs/plugins" -import * as Turbo from "@hotwired/turbo" +import CableReady from "cable_ready"; +import mrujs from "mrujs"; +import { CableCar } from "mrujs/plugins"; +import * as Turbo from "@hotwired/turbo"; -window.Turbo = Turbo -window.CableReady = CableReady +window.Turbo = Turbo; +window.CableReady = CableReady; mrujs.start({ - plugins: [ - new CableCar(CableReady) - ] -}) - -require.context('../fonts', true) -const images = require.context('../images', true) -const imagePath = (name) => images(name, true) + plugins: [new CableCar(CableReady)], +}); +require.context("../fonts", true); +const images = require.context("../images", true); +const imagePath = (name) => images(name, true);