solidus_starter_frontend 0.1.0

data/Gemfile

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+source 'https://rubygems.org'
+git_source(:github) { |repo| "https://github.com/#{repo}.git" }
+
+branch = ENV.fetch('SOLIDUS_BRANCH', 'master')
+gem 'solidus_core', github: 'solidusio/solidus', branch: branch
+gem 'solidus_api', github: 'solidusio/solidus', branch: branch
+gem 'solidus_backend', github: 'solidusio/solidus', branch: branch
+gem 'solidus_sample', github: 'solidusio/solidus', branch: branch
+gem 'solidus_i18n', github: 'solidusio/solidus_i18n', branch: branch
+
+# Needed to help Bundler figure out how to resolve dependencies,
+# otherwise it takes forever to resolve them.
+# See https://github.com/bundler/bundler/issues/6677
+gem 'rails', '>0.a'
+
+case ENV['DB']
+when 'mysql'
+  gem 'mysql2'
+when 'postgresql'
+  gem 'pg'
+else
+  gem 'sqlite3'
+end
+
+gemspec
+
+# Use a local Gemfile to include development dependencies that might not be
+# relevant for the project or for other contributors, e.g. pry-byebug.
+#
+# We use `send` instead of calling `eval_gemfile` to work around an issue with
+# how Dependabot parses projects: https://github.com/dependabot/dependabot-core/issues/1658.
+send(:eval_gemfile, 'Gemfile-local') if File.exist? 'Gemfile-local'

data/LICENSE

@@ -0,0 +1,26 @@
+Copyright (c) 2020 Nebulab SRL
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright notice,
+      this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright notice,
+      this list of conditions and the following disclaimer in the documentation
+      and/or other materials provided with the distribution.
+    * Neither the name Solidus nor the names of its contributors may be used to
+      endorse or promote products derived from this software without specific
+      prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
+CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/README.md

@@ -0,0 +1,69 @@
+# solidus_starter_frontend
+
+`solidus_starter_frontend` is a new starter store for [Solidus][solidus]. This
+extension aims to deliver a modern, minimal, semantic and easy to extend
+frontend codebase for a more efficient bootstrapping experience.
+
+**WARNING: this is an experimental extension and still in a very early stage of
+development.**
+
+## Objectives
+
+We aim to deliver:
+
+- a minimal, semantic and accessible HTML skeleton
+- a reusable component based architecture
+- simple SASS styling strictly based on BEM
+- the elimination of jQuery as a dependency by rewriting frontend functionality
+in vanilla JavaScript
+
+All of this while keeping and improving on the functionality of the current
+[Solidus][solidus] starter store.
+
+## Installation
+
+By default, the `solidus` gem also includes the standard frontend via
+the `solidus_frontend` gem. To make this extension work, you need to
+exclude it and manually include all the other Solidus componenents.
+
+You need to replace:
+
+```ruby
+gem 'solidus'
+```
+
+with:
+
+```ruby
+gem 'solidus_core'
+gem 'solidus_api'
+gem 'solidus_backend'
+gem 'solidus_sample'
+```
+
+Install our binary in the system: `gem install solidus_starter_frontend`
+
+Execute our generator that will copy our component files in your project:
+`solidus_starter_frontend`. Now you can start to customize your local views.
+
+If Solidus was already installed with solidus_frontend you will have to change
+all `Spree::Frontend::Config` in `SolidusStarterFrontend::Config`.
+
+## Development
+
+For information about contributing to this project please refer to this 
+[document](docs/development.md).
+
+## About
+
+[![Nebulab][nebulab-logo]][nebulab]
+
+`solidus_starter_frontend` is funded and maintained by the [Nebulab][nebulab] team.
+
+We firmly believe in the power of open-source. [Contact us][contact-us] if you
+like our work and you need help with your project design or development.
+
+[solidus]: http://solidus.io/
+[nebulab]: http://nebulab.it/
+[nebulab-logo]: http://nebulab.it/assets/images/public/logo.svg
+[contact-us]: http://nebulab.it/contact-us/

data/Rakefile

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+require 'solidus_dev_support/rake_tasks'
+SolidusDevSupport::RakeTasks.install
+
+task default: 'extension:specs'

data/app/assets/config/solidus_starter_frontend_manifest.js

@@ -0,0 +1,2 @@
+//= link spree/frontend/all.js
+//= link spree/frontend/all.css

data/app/assets/javascripts/spree/frontend.js

@@ -0,0 +1,6 @@
+/* Solidus Dummy app generator creates a vendor manifest in vendor/assets/javascripts/frontend/all
+that requires this file: spree/frontend.
+Inside solidus_starter_frontend we don't need anything from spree/frontend,
+but the file must be there for the dummy application that expects it.
+This approach is in order to don't have to make changes in the solidus_core
+dummy app generator in the process of developing this extension. */

data/app/assets/javascripts/spree/frontend/cart.js

@@ -0,0 +1,26 @@
+window.addEventListener('DOMContentLoaded', () => {
+  const cartForm = document.getElementById('update-cart');
+
+  if (cartForm) {
+    const deleteButtons = cartForm.querySelectorAll('input.delete');
+
+    deleteButtons.forEach(deleteButton => {
+      deleteButton.addEventListener('click', () => {
+        const lineItem = deleteButton.parentNode.parentNode;
+        lineItem.querySelector('.cart-item__quantity input').setAttribute('value', 0);
+      });
+    });
+
+    cartForm.addEventListener('submit', () => {
+      document.getElementById('update-button').setAttribute('disabled', true);
+    });
+  }
+});
+
+Solidus.fetch_cart = (cartLinkUrl) => {
+  fetch(cartLinkUrl || Solidus.pathFor('cart_link'))
+    .then(response => response.text())
+    .then(html => {
+      document.getElementById('link-to-cart').innerHTML = html;
+    });
+};

data/app/assets/javascripts/spree/frontend/checkout.js

@@ -0,0 +1,34 @@
+//= require_self
+//= require spree/frontend/checkout/address
+//= require spree/frontend/checkout/payment
+
+Solidus.disableSaveOnClick = () => {
+  const form = document.querySelector('form.edit_order');
+  form.addEventListener('submit', () => {
+    const elements = form.querySelectorAll('[type="submit"], [type="image"]');
+    elements.forEach(element => {
+      element.setAttribute('disabled', true);
+      element.classList.remove('primary');
+      element.classList.add('disabled');
+    });
+  });
+};
+
+window.addEventListener('DOMContentLoaded', () => {
+  const termsCheckbox = document.getElementById('accept_terms_and_conditions');
+
+  if (termsCheckbox) {
+    termsCheckbox.addEventListener('change', () => {
+      const submitButton = termsCheckbox.closest('form')
+        .querySelector('[type="submit"]');
+
+      if (termsCheckbox.checked) {
+        submitButton.removeAttribute('disabled');
+        submitButton.classList.remove('disabled');
+      } else {
+        submitButton.setAttribute('disabled', true);
+        submitButton.classList.add('disabled');
+      }
+    });
+  }
+});

data/app/assets/javascripts/spree/frontend/checkout/address.js

@@ -0,0 +1,124 @@
+window.addEventListener('DOMContentLoaded', () => {
+  if (document.getElementById('checkout_form_address')) {
+    // Hidden by default to support browsers with javascript disabled
+    document.querySelectorAll('.js-address-fields')
+      .forEach(field => field.style.display = 'block');
+
+    const statesCache = {};
+
+    function updateState(stateContainer, countryId) {
+      if (statesCache[countryId]) {
+        fillStates(stateContainer, countryId);
+        return;
+      }
+
+      fetch(`${Solidus.routes.states_search}?country_id=${countryId}`)
+        .then(response => response.json())
+        .then(data => {
+          statesCache[countryId] = {
+            states: data.states,
+            states_required: data.states_required
+          };
+          fillStates(stateContainer, countryId);
+        });
+    };
+
+    function fillStates(stateContainer, countryId) {
+      const stateData = statesCache[countryId];
+
+      if (!stateData) {
+        return;
+      }
+
+      const statesRequired = stateData.states_required;
+      const states = stateData.states;
+
+      const stateSelect = stateContainer.querySelector('select');
+      const stateInput = stateContainer.querySelector('input');
+
+      if (states.length > 0) {
+        const selected = parseInt(stateSelect.value);
+        stateSelect.innerHTML = '';
+        const statesWithBlank = [{ name: '', id: ''}].concat(states);
+        statesWithBlank.forEach(state => {
+          const selectOption = document.createElement('option');
+          selectOption.value = state.id;
+          selectOption.innerHTML = state.name;
+          if (selected === state.id) {
+            selectOption.setAttribute('selected', true);
+          }
+          stateSelect.appendChild(selectOption);
+        })
+        stateSelect.style.display = 'block';
+        stateSelect.removeAttribute('disabled');
+        stateInput.style.display = 'none';
+        stateInput.setAttribute('disabled', true);
+        stateContainer.style.display = 'block';
+        if (statesRequired) {
+          stateSelect.classList.add('required');
+          stateContainer.classList.add('field-required');
+        } else {
+          stateSelect.classList.remove('required');
+          stateContainer.classList.remove('field-required');
+        }
+        stateInput.classList.remove('required');
+      } else {
+        stateSelect.style.display = 'none';
+        stateSelect.setAttribute('disabled', true);
+        stateInput.style.display = 'block';
+        if (statesRequired) {
+          stateContainer.classList.add('field-required');
+          stateInput.classList.add('required');
+        } else {
+          stateInput.value = '';
+          stateContainer.classList.remove('field-required');
+          stateInput.classList.remove('required');
+        }
+        stateContainer.style.display = !!statesRequired ? 'block' : 'none';
+        if (!statesRequired) {
+          stateInput.setAttribute('disabled', true);
+        } else {
+          stateInput.removeAttribute('disabled');
+        }
+        stateSelect.classList.remove('required');
+      }
+    };
+
+    document.querySelectorAll('.js-trigger-state-change').forEach(element => {
+      element.addEventListener('change', () => {
+        const stateContainer = document.querySelector(element.dataset.stateContainer);
+        if (stateContainer) {
+          const countryId = element.value;
+          updateState(stateContainer, countryId);
+        }
+      });
+    });
+
+    document.querySelectorAll('.js-trigger-state-change:not([hidden])').forEach(element => {
+      element.dispatchEvent(new Event('change'));
+    });
+
+    const orderUseBilling = document.getElementById('order_use_billing');
+    orderUseBilling.addEventListener('change', function() {
+      update_shipping_form_state(orderUseBilling);
+    });
+
+    function update_shipping_form_state(order_use_billing) {
+      const addressInputs = document.querySelectorAll('#shipping .address-inputs');
+      const inputs = document.querySelectorAll('#shipping .address-inputs input');
+      const selects = document.querySelectorAll('#shipping .address-inputs select');
+      if (order_use_billing.checked) {
+        addressInputs.forEach(addressInput => addressInput.style.display = 'none');
+        inputs.forEach(input => input.setAttribute('disabled', true));
+        selects.forEach(sel => sel.setAttribute('disabled', true));
+      } else {
+        addressInputs.forEach(addressInput => addressInput.style.display = 'block');
+        inputs.forEach(input => input.removeAttribute('disabled'));
+        selects.forEach(sel => sel.removeAttribute('disabled'));
+        document.querySelector('#shipping .js-trigger-state-change').dispatchEvent(new Event('change'));
+      }
+    };
+
+    update_shipping_form_state(orderUseBilling);
+  }
+});

data/app/assets/javascripts/spree/frontend/checkout/payment.js

@@ -0,0 +1,44 @@
+window.addEventListener('DOMContentLoaded', () => {
+  const form = document.querySelector('#checkout_form_payment');
+  const existingCards = document.querySelector('#existing_cards');
+
+  if (form) {
+    if (existingCards) {
+      const paymentMethodControls = document.querySelector('.payment-method-controls');
+      const useExistingCardYes = document.querySelector('#use_existing_card_yes');
+      const useExistingCardNo = document.querySelector('#use_existing_card_no');
+      const existingCcRadios = document.querySelectorAll('.existing-cc-radio');
+
+      paymentMethodControls.style.display = 'none';
+
+      useExistingCardYes.addEventListener('click', () => {
+        paymentMethodControls.style.display = 'none';
+        existingCcRadios.forEach(radio => radio.removeAttribute('disabled'));
+      });
+
+      useExistingCardNo.addEventListener('click', () => {
+        paymentMethodControls.style.display = 'block';
+        existingCcRadios.forEach(radio => radio.setAttribute('disabled', true));
+      });
+    }
+
+    const selectors = document
+      .querySelectorAll('input[type="radio"][name="order[payments_attributes][][payment_method_id]"]');
+
+    selectors.forEach(selector => {
+      selector.addEventListener('click', () => {
+        const controls = document.querySelectorAll('.payment-method-controls li');
+        controls.forEach(control => control.style.display = 'none');
+
+        if (selector.checked) {
+          const selectedControl = document.querySelector(`#payment_method_${selector.value}`);
+          selectedControl.style.display = 'block';
+        }
+      });
+    });
+
+    // Activate already checked payment method if form is re-rendered
+    // i.e. if user enters invalid data
+    document.querySelector('input[type="radio"]:checked').click();
+  }
+});

data/app/assets/javascripts/spree/frontend/locale_selector.js

@@ -0,0 +1,9 @@
+window.addEventListener('DOMContentLoaded', () => {
+  const localeSelector = document.querySelector('.locale-selector select');
+
+  if(localeSelector) {
+    localeSelector.addEventListener('change', (event) => {
+      event.target.form.submit();
+    });
+  }
+});

data/app/assets/javascripts/spree/frontend/product.js

@@ -0,0 +1,21 @@
+window.addEventListener('DOMContentLoaded', () => {
+  function updateVariantPrice(variant) {
+    const variantPrice = variant.dataset.price;
+    if (variantPrice) {
+      document.querySelector('.price.selling').innerHTML = variantPrice;
+    }
+  };
+
+  const radios = document.querySelectorAll('#product-variants input[type="radio"]');
+
+  if (radios.length > 0) {
+    const selectedRadio = document
+      .querySelector('#product-variants input[type="radio"][checked="checked"]');
+
+    updateVariantPrice(selectedRadio);
+  }
+
+  radios.forEach(radio => {
+    radio.addEventListener('click', () => updateVariantPrice(radio));
+  });
+});

data/app/assets/javascripts/spree/frontend/solidus_starter_frontend.js

@@ -0,0 +1,9 @@
+// Placeholder manifest file.
+// the installer will append this file to the app vendored assets here: vendor/assets/javascripts/spree/frontend/all.js'
+
+//= require spree
+//= require spree/frontend/utils
+//= require spree/frontend/checkout
+//= require spree/frontend/product
+//= require spree/frontend/cart
+//= require spree/frontend/locale_selector

data/app/assets/javascripts/spree/frontend/utils.js.erb

@@ -0,0 +1,18 @@
+window.Solidus = {};
+
+Solidus.mountedAt = () => {
+  return '<%= Rails.application.routes.url_helpers.spree_path(trailing_slash: true) %>';
+};
+
+Solidus.pathFor = (path) => {
+  const hostname = window.location.hostname;
+  const protocol = window.location.protocol;
+  const port = window.location.port;
+  const locationOrigin = protocol + '//' + hostname + (port ? ':' + port : '');
+  return locationOrigin + Solidus.mountedAt() + path;
+};
+
+Solidus.routes = {
+  states_search: Solidus.pathFor('api/states'),
+  apply_coupon_code: (order_id) => Solidus.pathFor('api/orders/' + order_id + '/coupon_codes')
+};