Merge pull request #10836 from jibees/10835-on-small-width-screen-the-cart-element-is-missplaced

Fix bad indentation (and hierarchy) of DOM elements causing bad rendering on small width screens

.prettierignore

@@ -1,8 +1,5 @@
 # Basically, ignore everythings expect app/webpacker/controllers/*.js and app/webpacker/packs/*.js
-*.css
-*.scss
-# Except v2
-!/app/webpacker/css/admin/v2/**/*.scss
+
 *.md
 *.yml
 *.yaml
@@ -12,6 +9,10 @@
 babel.config.js
 postcss.config.js
 
+/app/webpacker/css/darkswarm/
+/app/webpacker/css/mail/
+/app/webpacker/css/shared/
+
 /app/assets/
 /config/
 /coverage/

.prettierrc.json

@@ -1 +1,3 @@
-{}
+{
+  "printWidth": 100
+}

Gemfile.lock

@@ -157,16 +157,16 @@ GEM
     awesome_nested_set (3.5.0)
       activerecord (>= 4.0.0, < 7.1)
     aws-eventstream (1.2.0)
-    aws-partitions (1.750.0)
-    aws-sdk-core (3.171.0)
+    aws-partitions (1.760.0)
+    aws-sdk-core (3.171.1)
       aws-eventstream (~> 1, >= 1.0.2)
       aws-partitions (~> 1, >= 1.651.0)
       aws-sigv4 (~> 1.5)
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.63.0)
+    aws-sdk-kms (1.64.0)
       aws-sdk-core (~> 3, >= 3.165.0)
       aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.121.0)
+    aws-sdk-s3 (1.122.0)
       aws-sdk-core (~> 3, >= 3.165.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.4)
@@ -235,13 +235,13 @@ GEM
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
     date (3.3.3)
-    ddtrace (1.11.0)
+    ddtrace (1.11.1)
       debase-ruby_core_source (>= 0.10.16, <= 3.2.0)
       libdatadog (~> 2.0.0.1.0)
       libddwaf (~> 1.8.2.0.0)
       msgpack
     debase-ruby_core_source (3.2.0)
-    debug (1.7.2)
+    debug (1.8.0)
       irb (>= 1.5.0)
       reline (>= 0.3.1)
     debugger-linecache (1.2.0)
@@ -349,7 +349,7 @@ GEM
       activerecord (>= 3.0)
     io-console (0.6.0)
     ipaddress (0.8.3)
-    irb (1.6.3)
+    irb (1.6.4)
       reline (>= 0.3.0)
     jmespath (1.6.2)
     jquery-rails (4.4.0)
@@ -373,7 +373,7 @@ GEM
     jsonapi-serializer (2.2.0)
       activesupport (>= 4.2)
     jwt (2.7.0)
-    knapsack_pro (3.10.0)
+    knapsack_pro (3.11.0)
       rake
     launchy (2.5.0)
       addressable (~> 2.7)
@@ -588,20 +588,20 @@ GEM
       rspec-mocks (~> 3.12.0)
     rspec-core (3.12.2)
       rspec-support (~> 3.12.0)
-    rspec-expectations (3.12.2)
+    rspec-expectations (3.12.3)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.12.0)
-    rspec-mocks (3.12.3)
+    rspec-mocks (3.12.5)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.12.0)
-    rspec-rails (6.0.1)
+    rspec-rails (6.0.2)
       actionpack (>= 6.1)
       activesupport (>= 6.1)
       railties (>= 6.1)
-      rspec-core (~> 3.11)
-      rspec-expectations (~> 3.11)
-      rspec-mocks (~> 3.11)
-      rspec-support (~> 3.11)
+      rspec-core (~> 3.12)
+      rspec-expectations (~> 3.12)
+      rspec-mocks (~> 3.12)
+      rspec-support (~> 3.12)
     rspec-retry (0.6.2)
       rspec-core (> 3.3)
     rspec-support (3.12.0)
@@ -768,7 +768,7 @@ GEM
     xml-simple (1.1.8)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.6.7)
+    zeitwerk (2.6.8)
 
 PLATFORMS
   ruby

app/controllers/admin/contents_controller.rb

@@ -18,6 +18,8 @@ module Admin
         end
       end
 
+      ContentConfig.updated_at = Time.zone.now
+
       flash[:success] =
         t(:successfully_updated, resource: I18n.t('admin.contents.edit.your_content'))
 

app/controllers/spree/admin/orders/customer_details_controller.rb

@@ -65,6 +65,7 @@ module Spree
           params.require(:order).permit(
             :email,
             :use_billing,
+            :customer_id,
             bill_address_attributes: ::PermittedAttributes::Address.attributes,
             ship_address_attributes: ::PermittedAttributes::Address.attributes
           )

app/helpers/application_helper.rb

@@ -68,4 +68,14 @@ module ApplicationHelper
       wicked_pdf_stylesheet_pack_tag(source)
     end
   end
+
+  def cache_with_locale(key = nil, options = {}, &block)
+    cache(cache_key_with_locale(key, I18n.locale), options) do
+      yield(block)
+    end
+  end
+
+  def cache_key_with_locale(key, locale)
+    Array.wrap(key) + [locale.to_s, I18nDigests.for_locale(locale)]
+  end
 end

app/models/content_configuration.rb

@@ -83,4 +83,19 @@ class ContentConfiguration < Spree::Preferences::Configuration
 
   # User Guide
   preference :user_guide_link, :string, default: 'https://guide.openfoodnetwork.org/'
+
+  # ContentConfig Caching
+  preference :updated_at_timestamp, :integer, default: Time.zone.today.to_time.to_i
+
+  def updated_at
+    Time.zone.at updated_at_timestamp
+  end
+
+  def updated_at=(time)
+    self.updated_at_timestamp = time.to_i
+  end
+
+  def cache_key
+    "ContentConfig:#{updated_at_timestamp}"
+  end
 end

app/services/permissions/order.rb

@@ -31,9 +31,7 @@ module Permissions
     end
 
     def visible_line_items
-      Spree::LineItem.where(id:
-        editable_line_items.select(:id) |
-        produced_line_items.select("spree_line_items.id"))
+      editable_line_items.or(produced_line_items)
     end
 
     # Any line items that I can edit

app/views/components/_spinner.html.haml

@@ -1 +1,2 @@
-%img.spinner{ src: image_pack_path("spinning-circles.svg"), style: "max-width: 100%" }
+= cache do
+  %img.spinner{ src: image_pack_path("spinning-circles.svg"), style: "max-width: 100%" }

app/views/home/_tagline.html.haml

@@ -1,8 +1,9 @@
-#tagline
-  .row
-    .small-12.text-center.columns
-      %h1
-        %img{src: image_pack_path("logo-white-notext.png"), title: Spree::Config.site_name}
-        %br/
-        %a.button.transparent{href: "/shops"}
-          = t :home_shop
+= cache_with_locale "sitename:#{Spree::Config.site_name}" do
+  #tagline
+    .row
+      .small-12.text-center.columns
+        %h1
+          %img{src: image_pack_path("logo-white-notext.png"), title: Spree::Config.site_name}
+          %br/
+          %a.button.transparent{href: "/shops"}
+            = t :home_shop

app/views/producers/_fat.html.haml

@@ -1,91 +1,92 @@
-.row.active_table_row{"ng-if" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : open()}"}
-  .columns.small-12.fat.text-center{"ng-show" => "open() && shopfront_loading"}
-    %p.fullwidth
-      = render partial: "components/spinner"
+= cache_with_locale do
+  .row.active_table_row{"ng-if" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : open()}"}
+    .columns.small-12.fat.text-center{"ng-show" => "open() && shopfront_loading"}
+      %p.fullwidth
+        = render partial: "components/spinner"
 
-  .columns.small-12.medium-7.large-7.fat{"ng-show" => "open() && !shopfront_loading"}
-    / Will add in long description available once clean up HTML formatting producer.long_description
-    %div{"ng-if" => "::producer.description"}
-      %label
-        = t :producers_about
-      %img.right.show-for-medium-up{"ng-src" => "{{::producer.logo}}" }
-      %p.text-small{ "ng-bind" => "::producer.description"}
-    %div.show-for-medium-up{"ng-if" => "::producer.description.length==0"}
-      %label  
-      %img.right.show-for-medium-up{"ng-src" => "{{::producer.logo}}" }
+    .columns.small-12.medium-7.large-7.fat{"ng-show" => "open() && !shopfront_loading"}
+      / Will add in long description available once clean up HTML formatting producer.long_description
+      %div{"ng-if" => "::producer.description"}
+        %label
+          = t :producers_about
+        %img.right.show-for-medium-up{"ng-src" => "{{::producer.logo}}" }
+        %p.text-small{ "ng-bind" => "::producer.description"}
+      %div.show-for-medium-up{"ng-if" => "::producer.description.length==0"}
+        %label  
+        %img.right.show-for-medium-up{"ng-src" => "{{::producer.logo}}" }
 
-  .columns.small-12.medium-5.large-5.fat{"ng-show" => "open() && !shopfront_loading"}
+    .columns.small-12.medium-5.large-5.fat{"ng-show" => "open() && !shopfront_loading"}
 
-    %div{"ng-if" => "::producer.supplied_taxons"}
-      %label
-        = t :producers_buy
-      %p.trans-sentence
-        %div
-          %span.fat-taxons{"ng-repeat" => "taxon in producer.supplied_taxons"}
-            %span{"ng-bind" => "::taxon.name"}
-        %div
-          %span.fat-properties{"ng-repeat" => "property in producer.supplied_properties"}
-            %span{"ng-bind" => "property.presentation"}
+      %div{"ng-if" => "::producer.supplied_taxons"}
+        %label
+          = t :producers_buy
+        %p.trans-sentence
+          %div
+            %span.fat-taxons{"ng-repeat" => "taxon in producer.supplied_taxons"}
+              %span{"ng-bind" => "::taxon.name"}
+          %div
+            %span.fat-properties{"ng-repeat" => "property in producer.supplied_properties"}
+              %span{"ng-bind" => "property.presentation"}
 
-    %div.show-for-medium-up{"ng-if" => "producer.supplied_taxons.length==0"}
-       
+      %div.show-for-medium-up{"ng-if" => "producer.supplied_taxons.length==0"}
+         
 
-    %div{"ng-if" => "::producer.email_address || producer.website || producer.phone"}
-      %label
-        = t :producers_contact
+      %div{"ng-if" => "::producer.email_address || producer.website || producer.phone"}
+        %label
+          = t :producers_contact
 
-      %p.word-wrap{"ng-if" => "::producer.phone"}
-        = t :producers_contact_phone
-        %span{"ng-bind" => "::producer.phone"}
+        %p.word-wrap{"ng-if" => "::producer.phone"}
+          = t :producers_contact_phone
+          %span{"ng-bind" => "::producer.phone"}
 
-      %p.word-wrap{"ng-if" => "::producer.whatsapp_phone"}
-        %a{"ng-href" => "{{::producer.whatsapp_url}}", target: "_blank"}
-          %img{ src: image_pack_path("social-logos/whatsapp.svg") }
-          %span{"ng-bind" => "::producer.whatsapp_phone"}
+        %p.word-wrap{"ng-if" => "::producer.whatsapp_phone"}
+          %a{"ng-href" => "{{::producer.whatsapp_url}}", target: "_blank"}
+            %img{ src: image_pack_path("social-logos/whatsapp.svg") }
+            %span{"ng-bind" => "::producer.whatsapp_phone"}
 
-      %p.word-wrap{"ng-if" => "::producer.email_address"}
-        %a{"ng-href" => "{{::producer.email_address | stripUrl}}", target: "_blank", mailto: true}
-          %span.obfuscatedEmail.email{"ng-bind" => "::producer.email_address | stripUrl"}
+        %p.word-wrap{"ng-if" => "::producer.email_address"}
+          %a{"ng-href" => "{{::producer.email_address | stripUrl}}", target: "_blank", mailto: true}
+            %span.obfuscatedEmail.email{"ng-bind" => "::producer.email_address | stripUrl"}
 
-      %p.word-wrap{"ng-if" => "::producer.website"}
-        %a{"ng-href" => "http://{{::producer.website | stripUrl}}", target: "_blank" }
-          %span{"ng-bind" => "::producer.website | stripUrl"}
+        %p.word-wrap{"ng-if" => "::producer.website"}
+          %a{"ng-href" => "http://{{::producer.website | stripUrl}}", target: "_blank" }
+            %span{"ng-bind" => "::producer.website | stripUrl"}
 
-    %div{"ng-if" => "::producer.twitter || producer.facebook || producer.linkedin || producer.instagram"}
-      %label
-        = t :producers_social
-      .follow-icons
-        %span{"ng-if" => "::producer.twitter"}
-          %a{"ng-href" => "http://twitter.com/{{::producer.twitter}}", target: "_blank"}
-            %i.ofn-i_041-twitter
+      %div{"ng-if" => "::producer.twitter || producer.facebook || producer.linkedin || producer.instagram"}
+        %label
+          = t :producers_social
+        .follow-icons
+          %span{"ng-if" => "::producer.twitter"}
+            %a{"ng-href" => "http://twitter.com/{{::producer.twitter}}", target: "_blank"}
+              %i.ofn-i_041-twitter
 
-        %span{"ng-if" => "::producer.facebook"}
-          %a{"ng-href" => "http://{{::producer.facebook | stripUrl}}", target: "_blank"}
-            %i.ofn-i_044-facebook
+          %span{"ng-if" => "::producer.facebook"}
+            %a{"ng-href" => "http://{{::producer.facebook | stripUrl}}", target: "_blank"}
+              %i.ofn-i_044-facebook
 
-        %span{"ng-if" => "::producer.linkedin"}
-          %a{"ng-href" => "http://{{::producer.linkedin | stripUrl}}", target: "_blank"}
-            %i.ofn-i_042-linkedin
+          %span{"ng-if" => "::producer.linkedin"}
+            %a{"ng-href" => "http://{{::producer.linkedin | stripUrl}}", target: "_blank"}
+              %i.ofn-i_042-linkedin
 
-        %span{"ng-if" => "::producer.instagram"}
-          %a{"ng-href" => "http://instagram.com/{{::producer.instagram}}", target: "_blank"}
-            %i.ofn-i_043-instagram
+          %span{"ng-if" => "::producer.instagram"}
+            %a{"ng-href" => "http://instagram.com/{{::producer.instagram}}", target: "_blank"}
+              %i.ofn-i_043-instagram
 
-.row.active_table_row.pad-top{"ng-if" => "open() && producer.hubs && !shopfront_loading"}
-  .columns.small-12{"ng-if" => "producer.hubs.length > 0"}
-    .row
-      .columns.small-12.fat
-        %div{"ng-if" => "::producer.name"}
-          %label
-            = t :producers_buy_at_html, enterprise: '<span class="turquoise" ng-bind="::producer.name"></span>'.html_safe
-        %div.show-for-medium-up{"ng-if" => "::!producer.name"}
-          &nbsp;
-    .row.cta-container
-      .columns.small-12
-        %a.cta-hub{"ng-repeat" => "hub in producer.hubs | orderBy:'-active'",
-        "ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined }}",
-        "ng-class" => "::{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub"}
-          %i.ofn-i_068-shop-reversed{"ng-if" => "::hub.active"}
-          %i.ofn-i_068-shop-reversed{"ng-if" => "::!hub.active"}
-          .hub-name{"ng-bind" => "::hub.name"}
-          .button-address{"ng-bind" => "::[hub.address.city, hub.address.state_name] | printArray"}
+  .row.active_table_row.pad-top{"ng-if" => "open() && producer.hubs && !shopfront_loading"}
+    .columns.small-12{"ng-if" => "producer.hubs.length > 0"}
+      .row
+        .columns.small-12.fat
+          %div{"ng-if" => "::producer.name"}
+            %label
+              = t :producers_buy_at_html, enterprise: '<span class="turquoise" ng-bind="::producer.name"></span>'.html_safe
+          %div.show-for-medium-up{"ng-if" => "::!producer.name"}
+            &nbsp;
+      .row.cta-container
+        .columns.small-12
+          %a.cta-hub{"ng-repeat" => "hub in producer.hubs | orderBy:'-active'",
+          "ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined }}",
+          "ng-class" => "::{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub"}
+            %i.ofn-i_068-shop-reversed{"ng-if" => "::hub.active"}
+            %i.ofn-i_068-shop-reversed{"ng-if" => "::!hub.active"}
+            .hub-name{"ng-bind" => "::hub.name"}
+            .button-address{"ng-bind" => "::[hub.address.city, hub.address.state_name] | printArray"}

app/views/shared/_footer.html.haml

@@ -1,115 +1,119 @@
 %footer
   .footer-global
-    .row
-      .small-12.columns.text-center
-        .logo
-          %img{src: image_pack_path("logo-white-notext.png") }
-    .row
-      .small-12.medium-8.medium-offset-2.columns.text-center
-        .alert-box
-          = render 'shared/register_call'
+    = cache_with_locale "global" do
+      .row
+        .small-12.columns.text-center
+          .logo
+            %img{src: image_pack_path("logo-white-notext.png") }
+      .row
+        .small-12.medium-8.medium-offset-2.columns.text-center
+          .alert-box
+            = render 'shared/register_call'
 
   .footer-local
-    .row
-      .small-12.medium-2.medium-offset-2.columns.text-center
-        %p.secure-icon
-          %i.ofn-i_017-locked
-      .small-12.medium-6.columns.text-center
-        %p.text-big.secure-text
-          = t '.footer_secure'
-        %p.secure-text
-          = t '.footer_secure_text'
-      .small-12.medium-2.columns
+    = cache_with_locale "local" do
+      .row
+        .small-12.medium-2.medium-offset-2.columns.text-center
+          %p.secure-icon
+            %i.ofn-i_017-locked
+        .small-12.medium-6.columns.text-center
+          %p.text-big.secure-text
+            = t '.footer_secure'
+          %p.secure-text
+            = t '.footer_secure_text'
+        .small-12.medium-2.columns
 
-    .row
-      .small-12.medium-8.medium-offset-2.columns.text-center
-        %hr.hr-light
-        %br
+      .row
+        .small-12.medium-8.medium-offset-2.columns.text-center
+          %hr.hr-light
+          %br
 
-    .row
-      .small-6.medium-3.medium-offset-2.columns.text-left
-        // This is the instance-managed set of links:
-        %h4
-          = t '.footer_contact_headline'
-        - if show_social_icons?
-          %p.social-icons
-            - if ContentConfig.footer_facebook_url.present?
-              %a{href: ContentConfig.footer_facebook_url}
-                %i.ofn-i_044-facebook
-            - if ContentConfig.footer_twitter_url.present?
-              %a{href: ContentConfig.footer_twitter_url}
-                %i.ofn-i_041-twitter
-            - if ContentConfig.footer_instagram_url.present?
-              %a{href: ContentConfig.footer_instagram_url}
-                %i.ofn-i_043-instagram
-            - if ContentConfig.footer_linkedin_url.present?
-              %a{href: ContentConfig.footer_linkedin_url}
-                %i.ofn-i_042-linkedin
-            - if ContentConfig.footer_googleplus_url.present?
-              %a{href: ContentConfig.footer_googleplus_url}
-                %i.ofn-i_046-g
-            - if ContentConfig.footer_pinterest_url.present?
-              %a{href: ContentConfig.footer_pinterest_url}
-                %i.ofn-i_045-pintrest
-        - if ContentConfig.footer_email.present?
+    = cache_with_locale ContentConfig.cache_key do
+      .row
+        .small-6.medium-3.medium-offset-2.columns.text-left
+          // This is the instance-managed set of links:
+          %h4
+            = t '.footer_contact_headline'
+          - if show_social_icons?
+            %p.social-icons
+              - if ContentConfig.footer_facebook_url.present?
+                %a{href: ContentConfig.footer_facebook_url}
+                  %i.ofn-i_044-facebook
+              - if ContentConfig.footer_twitter_url.present?
+                %a{href: ContentConfig.footer_twitter_url}
+                  %i.ofn-i_041-twitter
+              - if ContentConfig.footer_instagram_url.present?
+                %a{href: ContentConfig.footer_instagram_url}
+                  %i.ofn-i_043-instagram
+              - if ContentConfig.footer_linkedin_url.present?
+                %a{href: ContentConfig.footer_linkedin_url}
+                  %i.ofn-i_042-linkedin
+              - if ContentConfig.footer_googleplus_url.present?
+                %a{href: ContentConfig.footer_googleplus_url}
+                  %i.ofn-i_046-g
+              - if ContentConfig.footer_pinterest_url.present?
+                %a{href: ContentConfig.footer_pinterest_url}
+                  %i.ofn-i_045-pintrest
+          - if ContentConfig.footer_email.present?
+            %p
+              %a{href: ContentConfig.footer_email.reverse, mailto: true, target: '_blank'}
+                = t '.footer_contact_email'
+          = render_markdown(ContentConfig.footer_links_md).html_safe
+
+
+        .small-6.medium-3.columns.text-left
+          %h4
+            = t '.footer_nav_headline'
           %p
-            %a{href: ContentConfig.footer_email.reverse, mailto: true, target: '_blank'}
-              = t '.footer_contact_email'
-        = render_markdown(ContentConfig.footer_links_md).html_safe
+            %a{href: "/shops"}
+              = t :label_shops
+          %p
+            %a{href: "/map"}
+              = t :label_map
+          %p
+            %a{href: "/producers"}
+              = t :label_producers
+          %p
+            %a{href: "/groups"}
+              = t :label_groups
+          %p
+            %a{href: ContentConfig.footer_about_url}
+              = t :label_about
 
+        .small-12.medium-2.columns.text-left
+          %h4
+            = t '.footer_join_headline'
+          %p
+            = t '.footer_join_body'
+            %a{href:  "/sell"}
+              = t '.footer_join_cta'
 
-      .small-6.medium-3.columns.text-left
-        %h4
-          = t '.footer_nav_headline'
-        %p
-          %a{href: "/shops"}
-            = t :label_shops
-        %p
-          %a{href: "/map"}
-            = t :label_map
-        %p
-          %a{href: "/producers"}
-            = t :label_producers
-        %p
-          %a{href: "/groups"}
-            = t :label_groups
-        %p
-          %a{href: ContentConfig.footer_about_url}
-            = t :label_about
+        .medium-2.columns.text-center
+          / Placeholder
 
-      .small-12.medium-2.columns.text-left
-        %h4
-          = t '.footer_join_headline'
-        %p
-          = t '.footer_join_body'
-          %a{href:  "/sell"}
-            = t '.footer_join_cta'
+      .row
+        .small-12.medium-8.medium-offset-2.columns.text-center
+          %hr.hr-light
+          %br
 
-      .medium-2.columns.text-center
-        / Placeholder
-
-    .row
-      .small-12.medium-8.medium-offset-2.columns.text-center
-        %hr.hr-light
-        %br
-
-    .row.legal
-      .small-12.medium-3.medium-offset-2.columns.text-left
-        %a{href: main_app.root_path}
-          %img{src: ContentConfig.url_for(:footer_logo), width: "220"}
-      .small-12.medium-5.columns.text-left
-        %p.text-small
-          = t '.footer_legal_call'
-          = link_to_platform_terms
-          |
-          = t '.footer_legal_visit'
-          %a{href:"https://github.com/openfoodfoundation/openfoodnetwork", target: "_blank"} GitHub
-        %p.text-small
-          = t('.footer_legal_text_html', content_license: link_to('CC BY-SA 3.0', 'https://creativecommons.org/licenses/by-sa/3.0/'), code_license: link_to('AGPL 3', 'https://tldrlegal.com/license/gnu-affero-general-public-license-v3-(agpl-3.0)' ))
-        %p.text-small
-          - if Spree::Config.privacy_policy_url.present?
-            = t('.footer_data_text_with_privacy_policy_html', cookies_policy: cookies_policy_link.html_safe, privacy_policy: privacy_policy_link.html_safe)
-          - else
-            = t('.footer_data_text_without_privacy_policy_html', cookies_policy: cookies_policy_link.html_safe)
-      .medium-2.columns.text-center
-        / Placeholder
+    = cache_with_locale [ContentConfig.cache_key, TermsOfServiceFile.current_url, Spree::Config.privacy_policy_url] do
+      .row.legal
+        .small-12.medium-3.medium-offset-2.columns.text-left
+          %a{href: main_app.root_path}
+            %img{src: ContentConfig.url_for(:footer_logo), width: "220"}
+        .small-12.medium-5.columns.text-left
+          %p.text-small
+            = t '.footer_legal_call'
+            = link_to_platform_terms
+            |
+            = t '.footer_legal_visit'
+            %a{href:"https://github.com/openfoodfoundation/openfoodnetwork", target: "_blank"} GitHub
+          %p.text-small
+            = t('.footer_legal_text_html', content_license: link_to('CC BY-SA 3.0', 'https://creativecommons.org/licenses/by-sa/3.0/'), code_license: link_to('AGPL 3', 'https://tldrlegal.com/license/gnu-affero-general-public-license-v3-(agpl-3.0)' ))
+          %p.text-small
+            - if Spree::Config.privacy_policy_url.present?
+              = t('.footer_data_text_with_privacy_policy_html', cookies_policy: cookies_policy_link.html_safe, privacy_policy: privacy_policy_link.html_safe)
+            - else
+              = t('.footer_data_text_without_privacy_policy_html', cookies_policy: cookies_policy_link.html_safe)
+        .medium-2.columns.text-center
+          / Placeholder

app/views/shared/_register_call.html.haml

@@ -1,12 +1,13 @@
-.alert-cta
-  %h6
-    -# Please forgive the hard-coded link:
-    -# The more elegant 'registration_path' resolves to /signup due to spree_auth_device > config > routes.rb
-    -# This is one of several possible fixes. Long-term, we'd like to bring the accounts page into OFN.
-    -# View the discussion here: https://github.com/openfoodfoundation/openfoodnetwork/pull/3174
-    %a{href: "/register", target: "_blank"}
-      = t '.selling_on_ofn'
-       
-      %strong
-        = t '.register'
-        %i.ofn-i_054-point-right
+= cache_with_locale do
+  .alert-cta
+    %h6
+      -# Please forgive the hard-coded link:
+      -# The more elegant 'registration_path' resolves to /signup due to spree_auth_device > config > routes.rb
+      -# This is one of several possible fixes. Long-term, we'd like to bring the accounts page into OFN.
+      -# View the discussion here: https://github.com/openfoodfoundation/openfoodnetwork/pull/3174
+      %a{href: "/register", target: "_blank"}
+        = t '.selling_on_ofn'
+         
+        %strong
+          = t '.register'
+          %i.ofn-i_054-point-right

app/views/shared/menu/_cart.html.haml

@@ -1,8 +1,9 @@
-%span.cart-span{"ng-controller" => "CartCtrl", "ng-class" => "{ dirty: Cart.dirty || Cart.empty(), 'pure-dirty': Cart.dirty }"}
-  %a#cart.icon{"ng-click" => "toggleCartSidebar()"}
-    %span
-      = t '.cart'
-    %span.count
-      %img{ src: image_pack_path("menu/icn-cart.svg") }
+= cache_with_locale do
+  %span.cart-span{"ng-controller" => "CartCtrl", "ng-class" => "{ dirty: Cart.dirty || Cart.empty(), 'pure-dirty': Cart.dirty }"}
+    %a#cart.icon{"ng-click" => "toggleCartSidebar()"}
       %span
-        {{ Cart.total_item_count() }}
+        = t '.cart'
+      %span.count
+        %img{ src: image_pack_path("menu/icn-cart.svg") }
+        %span
+          {{ Cart.total_item_count() }}

app/views/shared/menu/_cart_sidebar.html.haml

@@ -1,38 +1,40 @@
 .expanding-sidebar.cart-sidebar{ng: {controller: 'CartCtrl', class: "{'shown': showCartSidebar}"}}
   .background{ng: {click: 'toggleCartSidebar()'}}
   .sidebar
-    .cart-header
-      %span.title{"ng-show" => "Cart.line_items.length == 1"}
-        = t('.items_in_cart_singular', num: "{{ Cart.total_item_count() }}")
-      %span.title{"ng-show" => "Cart.line_items.length > 1"}
-        = t('.items_in_cart_plural', num: "{{ Cart.total_item_count() }}")
-      %a.close{ng: {click: 'toggleCartSidebar()'}}
-        = t('.close')
-        %i.ofn-i_009-close
+    = cache_with_locale "cart-header" do
+      .cart-header
+        %span.title{"ng-show" => "Cart.line_items.length == 1"}
+          = t('.items_in_cart_singular', num: "{{ Cart.total_item_count() }}")
+        %span.title{"ng-show" => "Cart.line_items.length > 1"}
+          = t('.items_in_cart_plural', num: "{{ Cart.total_item_count() }}")
+        %a.close{ng: {click: 'toggleCartSidebar()'}}
+          = t('.close')
+          %i.ofn-i_009-close
 
     .cart-content
-      %table
-        %tr.product-cart{"ng-repeat" => "line_item in Cart.line_items", "id" => "cart-variant-{{ line_item.variant.id }}"}
-          %td.image
-            %img{'ng-src' => '{{ line_item.variant.thumb_url }}'}
-          %td
-            %span {{ line_item.variant.extended_name | truncate: max_characters }}
-            %br
-            %span.options-text {{ line_item.variant.options_text | truncate: max_characters }}
-          %td.text-right
-            %span.quantity {{ line_item.quantity }}
-          %td
-            .total-price.text-right {{ line_item.total_price | localizeCurrency }}
-            .unit-price
-              %div{:style => "margin-right: 5px"}
-                %question-mark-with-tooltip{"question-mark-with-tooltip" => "_",
-                "question-mark-with-tooltip-append-to-body" => "true",
-                "question-mark-with-tooltip-placement" => "top",
-                "question-mark-with-tooltip-animation" => true,
-                key: "'js.shopfront.unit_price_tooltip'",
-                context: "'cart-sidebar'"}
-              .options-text
-                {{ line_item.variant.unit_price_price | localizeCurrency }} / {{ line_item.variant.unit_price_unit }}
+      = cache_with_locale "cart-table" do
+        %table
+          %tr.product-cart{"ng-repeat" => "line_item in Cart.line_items", "id" => "cart-variant-{{ line_item.variant.id }}"}
+            %td.image
+              %img{'ng-src' => '{{ line_item.variant.thumb_url }}'}
+            %td
+              %span {{ line_item.variant.extended_name | truncate: max_characters }}
+              %br
+              %span.options-text {{ line_item.variant.options_text | truncate: max_characters }}
+            %td.text-right
+              %span.quantity {{ line_item.quantity }}
+            %td
+              .total-price.text-right {{ line_item.total_price | localizeCurrency }}
+              .unit-price
+                %div{:style => "margin-right: 5px"}
+                  %question-mark-with-tooltip{"question-mark-with-tooltip" => "_",
+                  "question-mark-with-tooltip-append-to-body" => "true",
+                  "question-mark-with-tooltip-placement" => "top",
+                  "question-mark-with-tooltip-animation" => true,
+                  key: "'js.shopfront.unit_price_tooltip'",
+                  context: "'cart-sidebar'"}
+                .options-text
+                  {{ line_item.variant.unit_price_price | localizeCurrency }} / {{ line_item.variant.unit_price_unit }}
 
       .cart-empty{"ng-show" => "Cart.line_items.length == 0"}
         %p
@@ -42,15 +44,16 @@
           = t('.take_me_shopping')
 
   .sidebar-footer{"ng-show" => "Cart.line_items.length > 0"}
-    %p.cart-total
-      %strong
-        = t 'total'
-        {{ Cart.total()  | localizeCurrency }}
+    = cache_with_locale "cart-footer" do
+      %p.cart-total
+        %strong
+          = t 'total'
+          {{ Cart.total()  | localizeCurrency }}
 
-    %div.fullwidth
-      %a.edit-cart.button.large.dark.left{href: main_app.cart_path, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }"}
-        %div{ ng: { if: "Cart.dirty" } }= t(:cart_updating)
-        %div{ ng: { if: "!Cart.dirty && Cart.empty()" } }= t(:cart_empty)
-        %div{ ng: { if: "!Cart.dirty && !Cart.empty()" } }= t('.edit_cart')
-      %a.checkout.button.large.bright.right{href: main_app.checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"}
-        = t '.checkout'
+      %div.fullwidth
+        %a.edit-cart.button.large.dark.left{href: main_app.cart_path, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }"}
+          %div{ ng: { if: "Cart.dirty" } }= t(:cart_updating)
+          %div{ ng: { if: "!Cart.dirty && Cart.empty()" } }= t(:cart_empty)
+          %div{ ng: { if: "!Cart.dirty && !Cart.empty()" } }= t('.edit_cart')
+        %a.checkout.button.large.bright.right{href: main_app.checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"}
+          = t '.checkout'

app/views/shared/menu/_language_selector.html.haml

@@ -1,8 +1,9 @@
-%li.language-switcher.has-dropdown.not-click
-  %a{href: '#', class: "top-bar--menu-item-with-icon"}
-    %i.ofn-i_071-globe
-    %span= t 'language_name'
-  %ul.dropdown
-    - OpenFoodNetwork::I18nConfig.locale_options.each do |l|
-      %li
-        = link_to t('language_name', locale: l), main_app.locale_path(l.to_s)
+= cache_with_locale OpenFoodNetwork::I18nConfig.locale_options do
+  %li.language-switcher.has-dropdown.not-click
+    %a{href: '#', class: "top-bar--menu-item-with-icon"}
+      %i.ofn-i_071-globe
+      %span= t 'language_name'
+    %ul.dropdown
+      - OpenFoodNetwork::I18nConfig.locale_options.each do |l|
+        %li
+          = link_to t('language_name', locale: l), main_app.locale_path(l.to_s)

app/views/shared/menu/_large_menu.html.haml

@@ -1,27 +1,30 @@
 %nav.top-bar.show-for-large-up
   %section.top-bar-section
     %ul.nav-logo
-      %li.ofn-logo
-        %a{href: main_logo_link(@white_label_distributor)}
-          - if @white_label_logo&.variable?
-            = image_tag @white_label_distributor.white_label_logo_url(:default)
-          - else
-            %img{src: ContentConfig.url_for(:logo)}
-      %li.powered-by
-        %img{src: '/favicon.ico'}
-        %span
-          = t 'powered_by'
-          %a{href: '/'}
-            = t 'title'
+      = cache_with_locale [@white_label_distributor, ContentConfig.cache_key] do
+        %li.ofn-logo
+          %a{href: main_logo_link(@white_label_distributor)}
+            - if @white_label_logo&.variable?
+              = image_tag @white_label_distributor.white_label_logo_url(:default)
+            - else
+              %img{src: ContentConfig.url_for(:logo)}
+        %li.powered-by
+          %img{src: '/favicon.ico'}
+          %span
+            = t 'powered_by'
+            %a{href: '/'}
+              = t 'title'
+
     - unless @hide_ofn_navigation
-      %ul.nav-main-menu
-        - [*1..7].each do |menu_number|
-          - menu_name = "menu_#{menu_number}"
-          - if ContentConfig[menu_name].present?
-            %li
-              %a{href: t("#{menu_name}_url") }
-                %span.nav-primary
-                  = t "#{menu_name}_title"
+      = cache_with_locale ContentConfig.cache_key do
+        %ul.nav-main-menu
+          - [*1..7].each do |menu_number|
+            - menu_name = "menu_#{menu_number}"
+            - if ContentConfig[menu_name].present?
+              %li
+                %a{href: t("#{menu_name}_url") }
+                  %span.nav-primary
+                    = t "#{menu_name}_title"
     %ul.nav-icons-menu
       - if OpenFoodNetwork::I18nConfig.selectable_locales.count > 1
         = render 'shared/menu/language_selector'
@@ -31,11 +34,12 @@
       - else
         = render 'shared/menu/signed_in'
 
-      %li.current_hub{"ng-controller" => "CurrentHubCtrl", "ng-show" => "CurrentHub.hub.id", "ng-cloak" => true}
-        %a{href: main_app.shop_path}
-          %span{ class: "top-bar--current-hub-prefix" }
-            = t 'label_shopping'
-            = '@'
-          %span{ class: "top-bar--current-hub-name" } {{ CurrentHub.hub.name | truncate:25 }}
-      %li.cart{"ng-cloak" => true}
-        = render partial: "shared/menu/cart"
+      = cache_with_locale "cart" do
+        %li.current_hub{"ng-controller" => "CurrentHubCtrl", "ng-show" => "CurrentHub.hub.id", "ng-cloak" => true}
+          %a{href: main_app.shop_path}
+            %span{ class: "top-bar--current-hub-prefix" }
+              = t 'label_shopping'
+              = '@'
+            %span{ class: "top-bar--current-hub-name" } {{ CurrentHub.hub.name | truncate:25 }}
+        %li.cart{"ng-cloak" => true}
+          = render partial: "shared/menu/cart"

app/views/shared/menu/_mobile_menu.html.haml

@@ -1,25 +1,26 @@
-%nav.tab-bar.show-for-medium-down
-  %section.left
-    %a.left-off-canvas-toggle.menu-icon
-      = image_pack_tag "menu/btn-menu-mobile.png"
+= cache_with_locale [@white_label_distributor, ContentConfig.cache_key] do
+  %nav.tab-bar.show-for-medium-down
+    %section.left
+      %a.left-off-canvas-toggle.menu-icon
+        = image_pack_tag "menu/btn-menu-mobile.png"
 
-  %section.left
-    .ofn-logo
-      %a{href: main_app.root_path}
-        - if @white_label_logo&.variable?
-          = image_tag @white_label_distributor.white_label_logo_url(:mobile)
-        - else
-          %img{src: ContentConfig.url_for(:logo_mobile), srcset: ContentConfig.url_for(:logo_mobile_svg), width: "75", height: "26"}
+    %section.left
+      .ofn-logo
+        %a{href: main_app.root_path}
+          - if @white_label_logo&.variable?
+            = image_tag @white_label_distributor.white_label_logo_url(:mobile)
+          - else
+            %img{src: ContentConfig.url_for(:logo_mobile), srcset: ContentConfig.url_for(:logo_mobile_svg), width: "75", height: "26"}
 
-  %section.right{"ng-cloak" => true}
-    %span.cart-span{"ng-class" => "{ dirty: Cart.dirty || Cart.empty(), 'pure-dirty': Cart.dirty }"}
-      %a.icon{ng: {click: 'toggleCartSidebar()'}}
-        %span
-          = t '.cart'
-        %span.count
-          = image_pack_tag "menu/icn-cart.svg"
+    %section.right{"ng-cloak" => true}
+      %span.cart-span{"ng-class" => "{ dirty: Cart.dirty || Cart.empty(), 'pure-dirty': Cart.dirty }"}
+        %a.icon{ng: {click: 'toggleCartSidebar()'}}
           %span
-            {{ Cart.total_item_count() }}
+            = t '.cart'
+          %span.count
+            = image_pack_tag "menu/icn-cart.svg"
+            %span
+              {{ Cart.total_item_count() }}
 
-    %a{href: main_app.shop_path}
-      {{ CurrentHub.hub.name }}
+      %a{href: main_app.shop_path}
+        {{ CurrentHub.hub.name }}

app/views/shared/menu/_offcanvas_menu.html.haml

@@ -1,16 +1,18 @@
 %aside.left-off-canvas-menu.show-for-medium-down{ ng: { controller: "OffcanvasCtrl" } }
   %ul.off-canvas-list
-    %li.ofn-logo
-      %a{href: main_app.root_path}
-        %img{src: ContentConfig.url_for(:logo_mobile), srcset: ContentConfig.url_for(:logo_mobile_svg), width: "75", height: "26"}
-    - [*1..7].each do |menu_number|
-      - menu_name = "menu_#{menu_number}"
-      - if ContentConfig[menu_name].present?
-        %li.li-menu
-          %a{href: t("#{menu_name}_url") }
-            %span.nav-primary
-              %i{class: ContentConfig["#{menu_name}_icon_name"]}
-              = t "#{menu_name}_title"
+    = cache_with_locale ContentConfig.cache_key do
+      %li.ofn-logo
+        %a{href: main_app.root_path}
+          %img{src: ContentConfig.url_for(:logo_mobile), srcset: ContentConfig.url_for(:logo_mobile_svg), width: "75", height: "26"}
+      - [*1..7].each do |menu_number|
+        - menu_name = "menu_#{menu_number}"
+        - if ContentConfig[menu_name].present?
+          %li.li-menu
+            %a{href: t("#{menu_name}_url") }
+              %span.nav-primary
+                %i{class: ContentConfig["#{menu_name}_icon_name"]}
+                = t "#{menu_name}_title"
+
     - if OpenFoodNetwork::I18nConfig.selectable_locales.count > 1
       %li.language-switcher.li-menu
         %a

app/views/shared/menu/_signed_out.html.haml

@@ -1,5 +1,6 @@
-%li#login-link{ "data-controller": "login-modal" }
-  %a{"auth": "login", "data-action": "click->login-modal#call" }
-    %img{ src: image_pack_path("menu/icn-login.svg") }
-    %span
-      = t 'label_login'
+= cache_with_locale do
+  %li#login-link{ "data-controller": "login-modal" }
+    %a{"auth": "login", "data-action": "click->login-modal#call" }
+      %img{ src: image_pack_path("menu/icn-login.svg") }
+      %span
+        = t 'label_login'

app/views/shop/products/_applied_filters_feedback.haml

@@ -1,9 +1,10 @@
-%span{ "ng-show" => "query && ( appliedPropertiesList() || appliedTaxonsList() )" }
-  = t :products_filters_in
+= cache_with_locale do
+  %span{ "ng-show" => "query && ( appliedPropertiesList() || appliedTaxonsList() )" }
+    = t :products_filters_in
 
-%span.applied-properties{'ng-bind-html' => 'appliedPropertiesList()'}
+  %span.applied-properties{'ng-bind-html' => 'appliedPropertiesList()'}
 
-%span{ "ng-show" => "appliedPropertiesList() && appliedTaxonsList()" }
-  = t :products_and
+  %span{ "ng-show" => "appliedPropertiesList() && appliedTaxonsList()" }
+    = t :products_and
 
-%span.applied-taxons{'ng-bind-html' => 'appliedTaxonsList()'}
+  %span.applied-taxons{'ng-bind-html' => 'appliedTaxonsList()'}

app/views/shop/products/_filters.html.haml

@@ -1,5 +1,6 @@
-.filter-shopfront.taxon-selectors{ng: {show: 'supplied_taxons != null'}}
-  %filter-selector{ 'selector-set' => "taxonSelectors", objects: "supplied_taxons", "active-selectors" => "activeTaxons"}
+= cache_with_locale do
+  .filter-shopfront.taxon-selectors{ng: {show: 'supplied_taxons != null'}}
+    %filter-selector{ 'selector-set' => "taxonSelectors", objects: "supplied_taxons", "active-selectors" => "activeTaxons"}
 
-.filter-shopfront.property-selectors{ng: {show: 'supplied_properties != null'}}
-  %filter-selector{ 'selector-set' => "propertySelectors", objects: "supplied_properties", "active-selectors" => "activeProperties"}
+  .filter-shopfront.property-selectors{ng: {show: 'supplied_properties != null'}}
+    %filter-selector{ 'selector-set' => "propertySelectors", objects: "supplied_properties", "active-selectors" => "activeProperties"}

app/views/shop/products/_form.html.haml

@@ -1,51 +1,52 @@
-%form{action: main_app.cart_path}
-  %products{"ng-init" => "refreshStaleData()", "ng-show" => "order_cycle.order_cycle_id != null", "ng-cloak" => true }
+= cache_with_locale do
+  %form{action: main_app.cart_path}
+    %products{"ng-init" => "refreshStaleData()", "ng-show" => "order_cycle.order_cycle_id != null", "ng-cloak" => true }
 
-    = render partial: "shop/products/searchbar"
+      = render partial: "shop/products/searchbar"
 
-    .row
-      .footer-pad.small-12.columns.product-listing
-        .row.full
-          .medium-12.large-9.columns.full
-            = render partial: "shop/products/search_feedback"
+      .row
+        .footer-pad.small-12.columns.product-listing
+          .row.full
+            .medium-12.large-9.columns.full
+              = render partial: "shop/products/search_feedback"
 
-            %div.pad-top{ "infinite-scroll" => "loadMore()", "infinite-scroll-distance" => "1", "infinite-scroll-disabled" => 'Products.loading', "infinite-scroll-immediate-check": "false" }
-              %product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in Products.products track by product.id", "id" => "product-{{ product.id }}"}
-                = render "shop/products/summary"
-                .shop-variants
-                  .variants.row{"ng-controller": "ShopVariantCtrl", variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"}
-                    = render "shop/products/shop_variant"
-              %product{"ng-show" => "Products.loading"}
-                .summary
-                  .small-12.columns.text-center
-                    = t :products_loading
-                .row.full
-                  .small-12.columns.text-center
-                    = render partial: "components/spinner"
+              %div.pad-top{ "infinite-scroll" => "loadMore()", "infinite-scroll-distance" => "1", "infinite-scroll-disabled" => 'Products.loading', "infinite-scroll-immediate-check": "false" }
+                %product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in Products.products track by product.id", "id" => "product-{{ product.id }}"}
+                  = render "shop/products/summary"
+                  .shop-variants
+                    .variants.row{"ng-controller": "ShopVariantCtrl", variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"}
+                      = render "shop/products/shop_variant"
+                %product{"ng-show" => "Products.loading"}
+                  .summary
+                    .small-12.columns.text-center
+                      = t :products_loading
+                  .row.full
+                    .small-12.columns.text-center
+                      = render partial: "components/spinner"
 
-          .hide-for-medium-down.large-1.columns
-            -# Space between products and filters
-             
+            .hide-for-medium-down.large-1.columns
+              -# Space between products and filters
+               
 
-          .sticky-shop-filters-container.thin-scroll-bar.hide-for-medium-down.large-2.columns
-            %h5.filter-header
-              = t(:products_filter_by)
-              %span{ng: {show: 'filtersCount()' }}
-                = "({{ filtersCount() }} #{t(:products_filter_selected)})"
-            = render partial: "shop/products/filters"
-
-          .expanding-sidebar.shop-filters-sidebar.hide-for-large-up{ng: {show: 'showFilterSidebar', class: "{'shown': showFilterSidebar}"}}
-            .background{ng: {click: 'toggleFilterSidebar()'}}
-            .sidebar
-              %h5
+            .sticky-shop-filters-container.thin-scroll-bar.hide-for-medium-down.large-2.columns
+              %h5.filter-header
                 = t(:products_filter_by)
                 %span{ng: {show: 'filtersCount()' }}
                   = "({{ filtersCount() }} #{t(:products_filter_selected)})"
-
               = render partial: "shop/products/filters"
 
-              .sidebar-footer
-                %button.large.dark.left{type: 'button', ng: {click: 'clearFilters()'}}
-                  = t(:products_filter_clear)
-                %button.large.bright.right{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
-                  = t(:products_filter_done)
+            .expanding-sidebar.shop-filters-sidebar.hide-for-large-up{ng: {show: 'showFilterSidebar', class: "{'shown': showFilterSidebar}"}}
+              .background{ng: {click: 'toggleFilterSidebar()'}}
+              .sidebar
+                %h5
+                  = t(:products_filter_by)
+                  %span{ng: {show: 'filtersCount()' }}
+                    = "({{ filtersCount() }} #{t(:products_filter_selected)})"
+
+                = render partial: "shop/products/filters"
+
+                .sidebar-footer
+                  %button.large.dark.left{type: 'button', ng: {click: 'clearFilters()'}}
+                    = t(:products_filter_clear)
+                  %button.large.bright.right{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
+                    = t(:products_filter_done)

app/views/shop/products/_search_feedback.haml

@@ -1,24 +1,25 @@
-.row.animate-slide{ "ng-show" => "query || appliedPropertiesList() || appliedTaxonsList()" }
-  .small-12.columns
-    .alert-box.search-alert.ng-scope
-      %div{"ng-show" => "Products.products.length > 0"}
+= cache_with_locale do
+  .row.animate-slide{ "ng-show" => "query || appliedPropertiesList() || appliedTaxonsList()" }
+    .small-12.columns
+      .alert-box.search-alert.ng-scope
+        %div{"ng-show" => "Products.products.length > 0"}
 
-        %a.clear-all.right{"ng-click" => "clearAll()"}
-          = t :products_clear
-          %i.ofn-i_009-close
+          %a.clear-all.right{"ng-click" => "clearAll()"}
+            = t :products_clear
+            %i.ofn-i_009-close
 
-        %span.filter-label
-          = t :products_results_for
-          %span{ ng: { hide: "!query"} }
-            %span.applied-search
-              {{ query }}
-          = render partial: 'shop/products/applied_filters_feedback'
+          %span.filter-label
+            = t :products_results_for
+            %span{ ng: { hide: "!query"} }
+              %span.applied-search
+                {{ query }}
+            = render partial: 'shop/products/applied_filters_feedback'
 
-      %div.no-results-bar{"ng-show" => "Products.products.length == 0 && !Products.loading"}
-        .row.summary
-          .small-12.columns
-            %p.no-results
-              = t :products_no_results_html, query: "<span class='applied-search'>{{query}}</span>".html_safe
-              = render partial: 'shop/products/applied_filters_feedback'
-            %button.clear-search{type: 'button', ng: {click: 'clearAll()'}}
-              = t :products_clear_search
+        %div.no-results-bar{"ng-show" => "Products.products.length == 0 && !Products.loading"}
+          .row.summary
+            .small-12.columns
+              %p.no-results
+                = t :products_no_results_html, query: "<span class='applied-search'>{{query}}</span>".html_safe
+                = render partial: 'shop/products/applied_filters_feedback'
+              %button.clear-search{type: 'button', ng: {click: 'clearAll()'}}
+                = t :products_clear_search

app/views/shop/products/_searchbar.haml

@@ -1,17 +1,18 @@
-.shop-searchbar
-  .row
-    .small-12.large-5.columns.flex
-      %div.search-wrap
-        %input#search.text{"ng-model" => "query",
-              type: 'search',
-              placeholder: t(:products_search),
-              "ng-debounce" => "200",
-              "disable-enter-with-blur" => true}
-        %a.clear{type: 'button', ng: {show: 'query', click: 'clearQuery()'}, 'focus-search' => true}
-          = image_pack_tag "icn-close.png"
+= cache_with_locale do
+  .shop-searchbar
+    .row
+      .small-12.large-5.columns.flex
+        %div.search-wrap
+          %input#search.text{"ng-model" => "query",
+                type: 'search',
+                placeholder: t(:products_search),
+                "ng-debounce" => "200",
+                "disable-enter-with-blur" => true}
+          %a.clear{type: 'button', ng: {show: 'query', click: 'clearQuery()'}, 'focus-search' => true}
+            = image_pack_tag "icn-close.png"
 
-      .hide-for-large-up
-        %button{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
-          = t(:products_filter_heading)
-          %span{ng: {show: 'filtersCount()' }}
-            ({{ filtersCount() }})
+        .hide-for-large-up
+          %button{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
+            = t(:products_filter_heading)
+            %span{ng: {show: 'filtersCount()' }}
+              ({{ filtersCount() }})

app/views/shop/products/_shop_variant.html.haml

@@ -1,22 +1,23 @@
-.small-4.medium-4.large-5.columns.variant-name
-  .inline{"ng-if" => "::variant.display_name"} {{ ::variant.display_name }}
-  .variant-unit {{ ::variant.unit_to_display }}
-.small-3.medium-3.large-2.columns.variant-price
-  %price-breakdown{"price-breakdown" => "_", variant: "variant",
-    "price-breakdown-append-to-body" => "true",
-    "price-breakdown-placement" => "bottom",
-    "price-breakdown-animation" => true}
-  {{ variant.price_with_fees | localizeCurrency }}
-  .unit-price.variant-unit-price
-    %question-mark-with-tooltip{"question-mark-with-tooltip" => "_",
-    "question-mark-with-tooltip-append-to-body" => "true",
-    "question-mark-with-tooltip-placement" => "top",
-    "question-mark-with-tooltip-animation" => true,
-    key: "'js.shopfront.unit_price_tooltip'"}
-    {{ variant.unit_price_price | localizeCurrency }} / {{ variant.unit_price_unit }}
+= cache_with_locale do
+  .small-4.medium-4.large-5.columns.variant-name
+    .inline{"ng-if" => "::variant.display_name"} {{ ::variant.display_name }}
+    .variant-unit {{ ::variant.unit_to_display }}
+  .small-3.medium-3.large-2.columns.variant-price
+    %price-breakdown{"price-breakdown" => "_", variant: "variant",
+      "price-breakdown-append-to-body" => "true",
+      "price-breakdown-placement" => "bottom",
+      "price-breakdown-animation" => true}
+    {{ variant.price_with_fees | localizeCurrency }}
+    .unit-price.variant-unit-price
+      %question-mark-with-tooltip{"question-mark-with-tooltip" => "_",
+      "question-mark-with-tooltip-append-to-body" => "true",
+      "question-mark-with-tooltip-placement" => "top",
+      "question-mark-with-tooltip-animation" => true,
+      key: "'js.shopfront.unit_price_tooltip'"}
+      {{ variant.unit_price_price | localizeCurrency }} / {{ variant.unit_price_unit }}
 
-.medium-2.large-2.columns.total-price
-  %span{"ng-class" => "{filled: variant.line_item.total_price}"}
-    {{ variant.line_item.total_price | localizeCurrency }}
-= render partial: "shop/products/shop_variant_no_group_buy"
-= render partial: "shop/products/shop_variant_with_group_buy"
+  .medium-2.large-2.columns.total-price
+    %span{"ng-class" => "{filled: variant.line_item.total_price}"}
+      {{ variant.line_item.total_price | localizeCurrency }}
+  = render partial: "shop/products/shop_variant_no_group_buy"
+  = render partial: "shop/products/shop_variant_with_group_buy"

app/views/shop/products/_shop_variant_no_group_buy.html.haml

@@ -1,22 +1,23 @@
-.small-5.medium-3.large-3.columns.variant-quantity-column.text-right{"ng-if" => "::!variant.product.group_buy"}
+= cache_with_locale do
+  .small-5.medium-3.large-3.columns.variant-quantity-column.text-right{"ng-if" => "::!variant.product.group_buy"}
 
-  .variant-quantity-inputs{ng: {if: "variant.line_item.quantity == 0"}}
-    %button.add-variant{type: "button", ng: {click: "add(1)", disabled: "!canAdd(1)"}}
-      {{ "js.shopfront.variant.add_to_cart" | t }}
+    .variant-quantity-inputs{ng: {if: "variant.line_item.quantity == 0"}}
+      %button.add-variant{type: "button", ng: {click: "add(1)", disabled: "!canAdd(1)"}}
+        {{ "js.shopfront.variant.add_to_cart" | t }}
 
-  .variant-quantity-inputs{ng: {if: "variant.line_item.quantity != 0"}}
-    %button.variant-quantity{type: "button", ng: {click: "add(-1)", disabled: "!canAdd(-1)"}}>
-      -# U+FF0D Fullwidth Hyphen-Minus
-      －
-    %input.variant-quantity{ type: "number", min: "0", max: "{{ available() }}",
-      ng: {model: "variant.line_item.quantity", max: "Infinity"}}>
-    %button.variant-quantity{type: "button", ng: {click: "add(1)", disabled: "!canAdd(1)"}}
-      -# U+FF0B Fullwidth Plus Sign
-      ＋
-  .variant-remaining-stock{ng: {if: "displayRemainingInStock()"}}
-    {{ "js.shopfront.variant.remaining_in_stock" | t:{quantity: available()} }}
-  .variant-quantity-display{ng: {class: "{visible: variant.line_item.quantity}"}}
-    {{ "js.shopfront.variant.quantity_in_cart" | t:{quantity: variant.line_item.quantity || 0} }}
-  %input{type: :hidden,
-         name: "variants[{{::variant.id}}]",
-         ng: {model: "variant.line_item.quantity"}}
+    .variant-quantity-inputs{ng: {if: "variant.line_item.quantity != 0"}}
+      %button.variant-quantity{type: "button", ng: {click: "add(-1)", disabled: "!canAdd(-1)"}}>
+        -# U+FF0D Fullwidth Hyphen-Minus
+        －
+      %input.variant-quantity{ type: "number", min: "0", max: "{{ available() }}",
+        ng: {model: "variant.line_item.quantity", max: "Infinity"}}>
+      %button.variant-quantity{type: "button", ng: {click: "add(1)", disabled: "!canAdd(1)"}}
+        -# U+FF0B Fullwidth Plus Sign
+        ＋
+    .variant-remaining-stock{ng: {if: "displayRemainingInStock()"}}
+      {{ "js.shopfront.variant.remaining_in_stock" | t:{quantity: available()} }}
+    .variant-quantity-display{ng: {class: "{visible: variant.line_item.quantity}"}}
+      {{ "js.shopfront.variant.quantity_in_cart" | t:{quantity: variant.line_item.quantity || 0} }}
+    %input{type: :hidden,
+           name: "variants[{{::variant.id}}]",
+           ng: {model: "variant.line_item.quantity"}}

app/views/shop/products/_shop_variant_with_group_buy.html.haml

@@ -1,17 +1,18 @@
-.small-5.medium-3.large-3.columns.variant-quantity-column.text-right{"ng-if" => "::variant.product.group_buy"}
+= cache_with_locale do
+  .small-5.medium-3.large-3.columns.variant-quantity-column.text-right{"ng-if" => "::variant.product.group_buy"}
 
-  %button.add-variant{type: "button", ng: {if: "!variant.line_item.quantity", click: "addBulk(1)", disabled: "!canAdd(1)"}}
-    {{ "js.shopfront.variant.add_to_cart" | t }}
-  %button.bulk-buy.variant-quantity{type: "button", ng: {if: "variant.line_item.quantity", click: "addBulk(0)"}}>
-    {{ variant.line_item.quantity }}
-  %button.bulk-buy.variant-quantity{type: "button", ng: {if: "variant.line_item.quantity", click: "addBulk(0)"}}
-    {{ variant.line_item.max_quantity || "-" }}
-  %br
-  .variant-quantity-display{ng: {class: "{visible: variant.line_item.quantity}"}}
-    {{ "js.shopfront.variant.in_cart" | t }}
-  %input{type: :hidden,
-         name: "variants[{{::variant.id}}]",
-         ng: {model: "variant.line_item.quantity"}}
-  %input{type: :hidden,
-         name: "variants[{{::variant.id}}]",
-         ng: {model: "variant.line_item.max_quantity"}}
+    %button.add-variant{type: "button", ng: {if: "!variant.line_item.quantity", click: "addBulk(1)", disabled: "!canAdd(1)"}}
+      {{ "js.shopfront.variant.add_to_cart" | t }}
+    %button.bulk-buy.variant-quantity{type: "button", ng: {if: "variant.line_item.quantity", click: "addBulk(0)"}}>
+      {{ variant.line_item.quantity }}
+    %button.bulk-buy.variant-quantity{type: "button", ng: {if: "variant.line_item.quantity", click: "addBulk(0)"}}
+      {{ variant.line_item.max_quantity || "-" }}
+    %br
+    .variant-quantity-display{ng: {class: "{visible: variant.line_item.quantity}"}}
+      {{ "js.shopfront.variant.in_cart" | t }}
+    %input{type: :hidden,
+           name: "variants[{{::variant.id}}]",
+           ng: {model: "variant.line_item.quantity"}}
+    %input{type: :hidden,
+           name: "variants[{{::variant.id}}]",
+           ng: {model: "variant.line_item.max_quantity"}}

app/views/shop/products/_summary.html.haml

@@ -1,21 +1,22 @@
-.product-thumb
-  %a{"ng-click" => "triggerProductModal()"}
-    %span.product-thumb__bulk-label{"ng-if" => "::product.group_buy"}
-      = t(".bulk")
-    %img{"ng-src" => "{{::product.primaryImageOrMissing}}"}
+= cache_with_locale do
+  .product-thumb
+    %a{"ng-click" => "triggerProductModal()"}
+      %span.product-thumb__bulk-label{"ng-if" => "::product.group_buy"}
+        = t(".bulk")
+      %img{"ng-src" => "{{::product.primaryImageOrMissing}}"}
 
-.summary
-  .summary-header
-    %h3
-      %a{"ng-click" => "triggerProductModal()", href: 'javascript:void(0)'}
-        %span{"ng-bind" => "::product.name"}
-    .product-description{ng: {"bind-html": "::product.description_html", click: "triggerProductModal()", show: "product.description_html.length"}}
-    %div{ "ng-switch" => "enterprise.visible" }
-      .product-producer
-        = t :products_from
-        %span{ "ng-switch-when": "hidden", "ng-bind" => "::enterprise.name"}
-        %span{ "ng-switch-default": true }
-          %enterprise-modal{"ng-bind" => "::enterprise.name"}
+  .summary
+    .summary-header
+      %h3
+        %a{"ng-click" => "triggerProductModal()", href: 'javascript:void(0)'}
+          %span{"ng-bind" => "::product.name"}
+      .product-description{ng: {"bind-html": "::product.description_html", click: "triggerProductModal()", show: "product.description_html.length"}}
+      %div{ "ng-switch" => "enterprise.visible" }
+        .product-producer
+          = t :products_from
+          %span{ "ng-switch-when": "hidden", "ng-bind" => "::enterprise.name"}
+          %span{ "ng-switch-default": true }
+            %enterprise-modal{"ng-bind" => "::enterprise.name"}
 
-    .product-properties.filter-shopfront.property-selectors
-      %filter-selector{ 'selector-set' => "productPropertySelectors", objects: "[product] | propertiesWithValuesOf" }
+      .product-properties.filter-shopfront.property-selectors
+        %filter-selector{ 'selector-set' => "productPropertySelectors", objects: "[product] | propertiesWithValuesOf" }

app/views/shops/_fat.html.haml

@@ -1,53 +1,54 @@
-.row.active_table_row{"ng-show" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : open()}"}
-  .columns.small-12.fat.text-center{"ng-show" => "open() && shopfront_loading"}
-    %p.fullwidth
-      = render partial: "components/spinner"
+= cache_with_locale do
+  .row.active_table_row{"ng-show" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : open()}"}
+    .columns.small-12.fat.text-center{"ng-show" => "open() && shopfront_loading"}
+      %p.fullwidth
+        = render partial: "components/spinner"
 
-  .columns.small-12.medium-6.large-5.fat{"ng-show" => "open() && !shopfront_loading"}
-    %div{"ng-if" => "::hub.taxons"}
-      %label
-        = t :hubs_buy
-      .trans-sentence
-        %div
-          %span.fat-taxons{"ng-repeat" => "taxon in hub.taxons"}
-            %span{"ng-bind" => "::taxon.name"}
-        %div
-          %span.fat-properties{"ng-repeat" => "property in hub.distributed_properties"}
-            %span{"ng-bind" => "property.presentation"}
-    %div.show-for-medium-up{"ng-if" => "::hub.taxons.length==0"}
-       
-  .columns.small-12.medium-3.large-2.fat{"ng-show" => "open() && !shopfront_loading"}
-    %div{"ng-if" => "::(hub.pickup || hub.delivery)"}
-      %label
-        = t :hubs_delivery_options
-      %ul.small-block-grid-2.medium-block-grid-1.large-block-grid-1
-        %li.pickup{"ng-if" => "::hub.pickup"}
-          %i.ofn-i_038-takeaway
-          = t :hubs_pickup
-        %li.delivery{"ng-if" => "::hub.delivery"}
-          %i.ofn-i_039-delivery
-          = t :hubs_delivery
-  .columns.small-12.medium-3.large-5.fat{"ng-show" => "open() && !shopfront_loading"}
-    %div{"ng-if" => "::hub.producers"}
-      %label
-        = t :hubs_producers
-      %ul.small-block-grid-2.medium-block-grid-1.large-block-grid-2{"ng-class" => "{'show-more-producers' : toggleMoreProducers}", "class" => "producers-list"}
-        %li{"ng-repeat" => "enterprise in hub.producers | limitTo:7"}
-          %enterprise-modal
-            %i.ofn-i_036-producers
-            %span{"ng-bind" => "::enterprise.name"}
-        %li{"ng-repeat" => "enterprise in hub.producers.slice(7,hub.producers.length)", "class" => "additional-producer"}
-          %enterprise-modal
-            %i.ofn-i_036-producers
-            %span{"ng-bind" => "::enterprise.name"}
-        %li{"data-is-link" => "true", "class" => "more-producers-link", "ng-show" => "::hub.producers.length>7"}
-          %a{"ng-click" => "toggleMoreProducers=!toggleMoreProducers; $event.stopPropagation()"}
-            .more
-              +
-              %span{"ng-bind" => "::hub.producers.length-7"}
-              = t :label_more
-            .less
-              = t :label_less
+    .columns.small-12.medium-6.large-5.fat{"ng-show" => "open() && !shopfront_loading"}
+      %div{"ng-if" => "::hub.taxons"}
+        %label
+          = t :hubs_buy
+        .trans-sentence
+          %div
+            %span.fat-taxons{"ng-repeat" => "taxon in hub.taxons"}
+              %span{"ng-bind" => "::taxon.name"}
+          %div
+            %span.fat-properties{"ng-repeat" => "property in hub.distributed_properties"}
+              %span{"ng-bind" => "property.presentation"}
+      %div.show-for-medium-up{"ng-if" => "::hub.taxons.length==0"}
+         
+    .columns.small-12.medium-3.large-2.fat{"ng-show" => "open() && !shopfront_loading"}
+      %div{"ng-if" => "::(hub.pickup || hub.delivery)"}
+        %label
+          = t :hubs_delivery_options
+        %ul.small-block-grid-2.medium-block-grid-1.large-block-grid-1
+          %li.pickup{"ng-if" => "::hub.pickup"}
+            %i.ofn-i_038-takeaway
+            = t :hubs_pickup
+          %li.delivery{"ng-if" => "::hub.delivery"}
+            %i.ofn-i_039-delivery
+            = t :hubs_delivery
+    .columns.small-12.medium-3.large-5.fat{"ng-show" => "open() && !shopfront_loading"}
+      %div{"ng-if" => "::hub.producers"}
+        %label
+          = t :hubs_producers
+        %ul.small-block-grid-2.medium-block-grid-1.large-block-grid-2{"ng-class" => "{'show-more-producers' : toggleMoreProducers}", "class" => "producers-list"}
+          %li{"ng-repeat" => "enterprise in hub.producers | limitTo:7"}
+            %enterprise-modal
+              %i.ofn-i_036-producers
+              %span{"ng-bind" => "::enterprise.name"}
+          %li{"ng-repeat" => "enterprise in hub.producers.slice(7,hub.producers.length)", "class" => "additional-producer"}
+            %enterprise-modal
+              %i.ofn-i_036-producers
+              %span{"ng-bind" => "::enterprise.name"}
+          %li{"data-is-link" => "true", "class" => "more-producers-link", "ng-show" => "::hub.producers.length>7"}
+            %a{"ng-click" => "toggleMoreProducers=!toggleMoreProducers; $event.stopPropagation()"}
+              .more
+                +
+                %span{"ng-bind" => "::hub.producers.length-7"}
+                = t :label_more
+              .less
+                = t :label_less
 
-    %div.show-for-medium-up{"ng-if" => "::hub.producers.length==0"}
-       
+      %div.show-for-medium-up{"ng-if" => "::hub.producers.length==0"}
+         

app/views/shops/_hubs.html.haml

@@ -7,31 +7,32 @@
   = render "shared/components/enterprise_search"
   = render "filters"
 
-  .row
-    .small-12.columns
-      .name-matches{"ng-show" => "nameMatchesFiltered.length > 0"}
-        %h2
-          = t :hubs_matches
-        = render "hubs_table", enterprises: "nameMatches"
+  = cache_with_locale do
+    .row
+      .small-12.columns
+        .name-matches{"ng-show" => "nameMatchesFiltered.length > 0"}
+          %h2
+            = t :hubs_matches
+          = render "hubs_table", enterprises: "nameMatches"
 
-      .distance-matches{"ng-if" => "nameMatchesFiltered.length == 0 || distanceMatchesShown"}
-        %h2{"ng-show" => "nameMatchesFiltered.length > 0 || query.length > 0"}
-          = t :hubs_matches
-          %span{"ng-show" => "nameMatchesFiltered.length > 0"} {{ nameMatchesFiltered[0].name }}...
-          %span{"ng-hide" => "nameMatchesFiltered.length > 0"} {{ query }}...
+        .distance-matches{"ng-if" => "nameMatchesFiltered.length == 0 || distanceMatchesShown"}
+          %h2{"ng-show" => "nameMatchesFiltered.length > 0 || query.length > 0"}
+            = t :hubs_matches
+            %span{"ng-show" => "nameMatchesFiltered.length > 0"} {{ nameMatchesFiltered[0].name }}...
+            %span{"ng-hide" => "nameMatchesFiltered.length > 0"} {{ query }}...
 
-        = render "hubs_table", enterprises: "distanceMatches"
+          = render "hubs_table", enterprises: "distanceMatches"
 
-      .show-distance-matches{"ng-show" => "nameMatchesFiltered.length > 0 && !distanceMatchesShown"}
-        %a{href: "", "ng-click" => "showDistanceMatches()"}
-          = t :hubs_distance_filter, location: "{{ nameMatchesFiltered[0].name }}"
-  .more-controls
-    %span{ng: {show: "closed_shops_loading", cloak: true}}
-      = render partial: "components/spinner"
-    %span{ng: {if: "!show_closed", cloak: true}}
-      %a.button{href: "", ng: {click: "showClosedShops()"}}
-        = t '.show_closed_shops'
-    %span{ng: {if: "show_closed", cloak: true}}
-      %a.button{href: "", ng: {click: "hideClosedShops()"}}
-        = t '.hide_closed_shops'
-    %a.button{href: main_app.map_path}= t '.show_on_map'
+        .show-distance-matches{"ng-show" => "nameMatchesFiltered.length > 0 && !distanceMatchesShown"}
+          %a{href: "", "ng-click" => "showDistanceMatches()"}
+            = t :hubs_distance_filter, location: "{{ nameMatchesFiltered[0].name }}"
+    .more-controls
+      %span{ng: {show: "closed_shops_loading", cloak: true}}
+        = render partial: "components/spinner"
+      %span{ng: {if: "!show_closed", cloak: true}}
+        %a.button{href: "", ng: {click: "showClosedShops()"}}
+          = t '.show_closed_shops'
+      %span{ng: {if: "show_closed", cloak: true}}
+        %a.button{href: "", ng: {click: "hideClosedShops()"}}
+          = t '.hide_closed_shops'
+      %a.button{href: main_app.map_path}= t '.show_on_map'

app/views/shops/_hubs_table.html.haml

@@ -1,10 +1,11 @@
-.active_table
-  %hub.active_table_node.row{"ng-repeat" => "hub in #{enterprises}Filtered = (#{enterprises} | closedShops:show_closed | taxons:activeTaxons | properties:activeProperties:'distributed_properties' | shipping:shippingTypes | orderBy:['-active', '+distance', '+orders_close_at'])",
-  "ng-class" => "{'is_profile' : hub.category == 'hub_profile', 'closed' : !open(), 'open' : open(), 'inactive' : !hub.active, 'current' : current()}",
-  "ng-controller" => "HubNodeCtrl",
-  id: "{{hub.hash}}"}
-    .small-12.columns
-      = render 'skinny'
-      = render 'fat'
+= cache_with_locale enterprises do
+  .active_table
+    %hub.active_table_node.row{"ng-repeat" => "hub in #{enterprises}Filtered = (#{enterprises} | closedShops:show_closed | taxons:activeTaxons | properties:activeProperties:'distributed_properties' | shipping:shippingTypes | orderBy:['-active', '+distance', '+orders_close_at'])",
+    "ng-class" => "{'is_profile' : hub.category == 'hub_profile', 'closed' : !open(), 'open' : open(), 'inactive' : !hub.active, 'current' : current()}",
+    "ng-controller" => "HubNodeCtrl",
+    id: "{{hub.hash}}"}
+      .small-12.columns
+        = render 'skinny'
+        = render 'fat'
 
-  = render 'shared/components/enterprise_no_results', enterprises: "#{enterprises}Filtered"
+    = render 'shared/components/enterprise_no_results', enterprises: "#{enterprises}Filtered"

app/views/shops/_skinny.html.haml

@@ -1,46 +1,47 @@
-.row.active_table_row{"ng-if" => "hub.is_distributor", "ng-click" => "toggle($event)", "ng-class" => "{'closed' : !open(), 'is_distributor' : producer.is_distributor}"}
-  .columns.small-12.medium-5.large-5.skinny-head
-    %a.hub{"ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub", "data-is-link" => "true"}
-      %i{ng: {class: "::hub.icon_font"}}
-      %span.margin-top.hub-name-listing{"ng-bind" => "::hub.name | truncate:40"}
+= cache_with_locale do
+  .row.active_table_row{"ng-if" => "hub.is_distributor", "ng-click" => "toggle($event)", "ng-class" => "{'closed' : !open(), 'is_distributor' : producer.is_distributor}"}
+    .columns.small-12.medium-5.large-5.skinny-head
+      %a.hub{"ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub", "data-is-link" => "true"}
+        %i{ng: {class: "::hub.icon_font"}}
+        %span.margin-top.hub-name-listing{"ng-bind" => "::hub.name | truncate:40"}
 
-  .columns.small-4.medium-2.large-2
-    %span.margin-top.ellipsed{"ng-bind" => "::hub.address.city"}
-  .columns.small-3.medium-2.large-2
-    %span.margin-top.ellipsed{"ng-bind" => "::hub.address.state_name"}
-    %span.margin-top{"ng-if" => "hub.distance != null && hub.distance > 0"} ({{ hub.distance / 1000 | number:0 }} km)
+    .columns.small-4.medium-2.large-2
+      %span.margin-top.ellipsed{"ng-bind" => "::hub.address.city"}
+    .columns.small-3.medium-2.large-2
+      %span.margin-top.ellipsed{"ng-bind" => "::hub.address.state_name"}
+      %span.margin-top{"ng-if" => "hub.distance != null && hub.distance > 0"} ({{ hub.distance / 1000 | number:0 }} km)
 
-  .columns.small-5.medium-3.large-3.text-right.no-wrap.flex.flex-align-center.flex-justify-end{"ng-if" => "::hub.active"}
-    %a.hub.open_closed.flex.flex-align-center{"ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub"}
-      %span{ ng: { if: "::current()" } }
-        %em= t :hubs_shopping_here
+    .columns.small-5.medium-3.large-3.text-right.no-wrap.flex.flex-align-center.flex-justify-end{"ng-if" => "::hub.active"}
+      %a.hub.open_closed.flex.flex-align-center{"ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub"}
+        %span{ ng: { if: "::current()" } }
+          %em= t :hubs_shopping_here
+        %span{ ng: { if: "::!current()" } }
+          %span{"ng-bind" => "::hub.orders_close_at | sensible_timeframe"}
+        %i.ofn-i_068-shop-reversed.show-for-medium-up
+      %span{style: "margin-left: 0.5rem;"}
+        %i{"ng-class" => "{'ofn-i_005-caret-down' : !open(), 'ofn-i_006-caret-up' : open()}"}
+
+    .columns.small-5.medium-3.large-3.text-right.no-wrap.flex.flex-align-center.flex-justify-end{"ng-if" => "::!hub.active"}
+      %a.hub.open_closed.flex{"ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub"}
+        %span{ ng: { if: "::current()" } }
+          %em= t :hubs_shopping_here
+        %span{ ng: { if: "::!current()" } }
+          = t :hubs_orders_closed
+        %i.ofn-i_068-shop-reversed.show-for-medium-up
+      %span{style: "margin-left: 0.5rem;"}
+        %i{"ng-class" => "{'ofn-i_005-caret-down' : !open(), 'ofn-i_006-caret-up' : open()}"}
+
+  .row.active_table_row{"ng-if" => "!hub.is_distributor", "ng-class" => "closed"}
+    .columns.small-12.medium-6.large-5.skinny-head
+      %a.hub{"ng-click" => "openModal(hub)", "ng-class" => "{primary: hub.active, secondary: !hub.active}"}
+        %i{ng: {class: "hub.icon_font"}}
+        %span.hub-name-listing{"ng-bind" => "::hub.name | truncate:40"}
+
+    .columns.small-4.medium-2.large-2
+      %span.ellipsed{"ng-bind" => "::hub.address.city"}
+    .columns.small-2.medium-1.large-1
+      %span.ellipsed{"ng-bind" => "::hub.address.state_name"}
+
+    .columns.small-6.medium-3.large-4.text-right.no-wrap.flex.flex-align-center.flex-justify-end
       %span{ ng: { if: "::!current()" } }
-        %span{"ng-bind" => "::hub.orders_close_at | sensible_timeframe"}
-      %i.ofn-i_068-shop-reversed.show-for-medium-up
-    %span{style: "margin-left: 0.5rem;"}
-      %i{"ng-class" => "{'ofn-i_005-caret-down' : !open(), 'ofn-i_006-caret-up' : open()}"}
-
-  .columns.small-5.medium-3.large-3.text-right.no-wrap.flex.flex-align-center.flex-justify-end{"ng-if" => "::!hub.active"}
-    %a.hub.open_closed.flex{"ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub"}
-      %span{ ng: { if: "::current()" } }
-        %em= t :hubs_shopping_here
-      %span{ ng: { if: "::!current()" } }
-        = t :hubs_orders_closed
-      %i.ofn-i_068-shop-reversed.show-for-medium-up
-    %span{style: "margin-left: 0.5rem;"}
-      %i{"ng-class" => "{'ofn-i_005-caret-down' : !open(), 'ofn-i_006-caret-up' : open()}"}
-
-.row.active_table_row{"ng-if" => "!hub.is_distributor", "ng-class" => "closed"}
-  .columns.small-12.medium-6.large-5.skinny-head
-    %a.hub{"ng-click" => "openModal(hub)", "ng-class" => "{primary: hub.active, secondary: !hub.active}"}
-      %i{ng: {class: "hub.icon_font"}}
-      %span.hub-name-listing{"ng-bind" => "::hub.name | truncate:40"}
-
-  .columns.small-4.medium-2.large-2
-    %span.ellipsed{"ng-bind" => "::hub.address.city"}
-  .columns.small-2.medium-1.large-1
-    %span.ellipsed{"ng-bind" => "::hub.address.state_name"}
-
-  .columns.small-6.medium-3.large-4.text-right.no-wrap.flex.flex-align-center.flex-justify-end
-    %span{ ng: { if: "::!current()" } }
-      %em= t :hubs_profile_only
+        %em= t :hubs_profile_only

app/views/spree/admin/orders/customer_details/edit.html.haml

@@ -24,3 +24,4 @@
 
 = form_for @order, :url => admin_order_customer_url(@order) do |f|
   = render 'form', :f => f
+  = f.hidden_field :customer_id, value: @order.customer_id, id: "customer_id"

app/webpacker/controllers/select_customer_controller.js

@@ -53,6 +53,7 @@ export default class extends TomSelectController {
     });
     $("#order_email").val(customer.email);
     $("#user_id").val(customer.user_id);
+    $("#customer_id").val(customer.id);
   }
 
   setValueOnTomSelectController = (element, value) => {

app/webpacker/css/admin/all.scss

@@ -1,118 +1,118 @@
-@import 'vendor/assets/stylesheets/normalize';
-@import 'vendor/assets/stylesheets/responsive-tables';
-@import 'vendor/assets/stylesheets/jquery.powertip';
-@import '~jquery-ui/themes/base/core';
-@import '~jquery-ui/themes/base/button';
-@import '~jquery-ui/themes/base/resizable';
-@import 'vendor/assets/stylesheets/jquery-ui-theme';
-@import '~jquery-ui/themes/base/dialog';
-@import '../shared/textAngular';
-@import '../shared/ng-tags-input.min';
-@import 'vendor/assets/stylesheets/select2.css.scss';
-@import '~flatpickr/dist/flatpickr';
-@import '~flatpickr/dist/themes/material_blue';
-@import '~shortcut-buttons-flatpickr/dist/themes/light';
+@import "vendor/assets/stylesheets/normalize";
+@import "vendor/assets/stylesheets/responsive-tables";
+@import "vendor/assets/stylesheets/jquery.powertip";
+@import "~jquery-ui/themes/base/core";
+@import "~jquery-ui/themes/base/button";
+@import "~jquery-ui/themes/base/resizable";
+@import "vendor/assets/stylesheets/jquery-ui-theme";
+@import "~jquery-ui/themes/base/dialog";
+@import "../shared/textAngular";
+@import "../shared/ng-tags-input.min";
+@import "vendor/assets/stylesheets/select2.css.scss";
+@import "~flatpickr/dist/flatpickr";
+@import "~flatpickr/dist/themes/material_blue";
+@import "~shortcut-buttons-flatpickr/dist/themes/light";
 
-@import 'globals/functions';
-@import 'globals/variables';
-@import 'variables';
-@import 'globals/mixins';
+@import "globals/functions";
+@import "globals/variables";
+@import "variables";
+@import "globals/mixins";
 
-@import 'plugins/font-awesome';
+@import "plugins/font-awesome";
 
-@import '../shared/variables/layout';
-@import '../shared/variables/variables';
-@import '../shared/utilities';
-@import 'shared/typography';
-@import 'shared/tables';
-@import 'shared/icons';
-@import 'shared/forms';
-@import 'shared/layout';
-@import 'shared/scroll_bar';
+@import "../shared/variables/layout";
+@import "../shared/variables/variables";
+@import "../shared/utilities";
+@import "shared/typography";
+@import "shared/tables";
+@import "shared/icons";
+@import "shared/forms";
+@import "shared/layout";
+@import "shared/scroll_bar";
 
-@import 'plugins/flatpickr-customization';
-@import 'plugins/powertip';
-@import 'plugins/jstree';
-@import 'plugins/select2';
+@import "plugins/flatpickr-customization";
+@import "plugins/powertip";
+@import "plugins/jstree";
+@import "plugins/select2";
 
-@import 'sections/orders';
-@import 'sections/products';
+@import "sections/orders";
+@import "sections/products";
 
-@import 'hacks/mozilla';
-@import 'hacks/opera';
-@import 'hacks/ie';
+@import "hacks/mozilla";
+@import "hacks/opera";
+@import "hacks/ie";
 
-@import 'components/actions';
-@import 'components/alert-box';
-@import 'components/alert_row';
-@import 'components/buttons';
-@import 'components/date-picker';
-@import 'components/dialogs';
-@import 'components/input';
-@import 'components/jquery_dialog';
-@import 'components/messages';
-@import 'components/navigation';
-@import 'components/ng-cloak';
-@import 'components/page_actions';
-@import 'components/pagination';
-@import 'components/per_page_controls';
-@import 'components/product_autocomplete';
-@import 'components/progress';
-@import 'components/save_bar';
-@import 'components/sidebar';
-@import 'components/simple_modal';
-@import 'components/states';
-@import 'components/stripe_connect_button';
-@import 'components/subscriptions_states';
-@import 'components/table-filter';
-@import 'components/table_loading';
-@import 'components/timepicker';
-@import 'components/todo';
-@import 'components/tooltip';
-@import 'components/wizard_progress';
+@import "components/actions";
+@import "components/alert-box";
+@import "components/alert_row";
+@import "components/buttons";
+@import "components/date-picker";
+@import "components/dialogs";
+@import "components/input";
+@import "components/jquery_dialog";
+@import "components/messages";
+@import "components/navigation";
+@import "components/ng-cloak";
+@import "components/page_actions";
+@import "components/pagination";
+@import "components/per_page_controls";
+@import "components/product_autocomplete";
+@import "components/progress";
+@import "components/save_bar";
+@import "components/sidebar";
+@import "components/simple_modal";
+@import "components/states";
+@import "components/stripe_connect_button";
+@import "components/subscriptions_states";
+@import "components/table-filter";
+@import "components/table_loading";
+@import "components/timepicker";
+@import "components/todo";
+@import "components/tooltip";
+@import "components/wizard_progress";
 
-@import 'pages/enterprise_form';
-@import 'pages/subscription_form';
-@import 'pages/subscription_line_items';
-@import 'pages/subscription_review';
+@import "pages/enterprise_form";
+@import "pages/subscription_form";
+@import "pages/subscription_line_items";
+@import "pages/subscription_review";
 
-@import 'advanced_settings';
-@import 'alert';
-@import 'animations';
-@import 'change_type_form';
-@import 'customers';
-@import 'dashboard_item';
-@import 'dashboard-single-ent';
-@import 'dialog';
-@import 'disabled';
-@import 'dropdown';
-@import 'enterprise_index_panels';
-@import 'enterprises';
-@import 'filters_and_controls';
-@import 'grid';
-@import 'icons';
-@import 'index_panel_buttons';
-@import 'index_panels';
-@import 'modals';
-@import 'offsets';
-@import 'openfoodnetwork';
-@import 'order_cycles';
-@import 'orders';
-@import 'product_import';
-@import 'products';
-@import 'question-mark-tooltip';
-@import 'relationships';
-@import 'reports';
-@import 'select2';
-@import 'sidebar-item';
-@import 'side_menu';
-@import 'tables';
-@import 'tag_rules';
-@import 'terms_of_service_files';
-@import 'validation';
-@import 'variables';
-@import 'variant_overrides';
-@import 'welcome';
+@import "advanced_settings";
+@import "alert";
+@import "animations";
+@import "change_type_form";
+@import "customers";
+@import "dashboard_item";
+@import "dashboard-single-ent";
+@import "dialog";
+@import "disabled";
+@import "dropdown";
+@import "enterprise_index_panels";
+@import "enterprises";
+@import "filters_and_controls";
+@import "grid";
+@import "icons";
+@import "index_panel_buttons";
+@import "index_panels";
+@import "modals";
+@import "offsets";
+@import "openfoodnetwork";
+@import "order_cycles";
+@import "orders";
+@import "product_import";
+@import "products";
+@import "question-mark-tooltip";
+@import "relationships";
+@import "reports";
+@import "select2";
+@import "sidebar-item";
+@import "side_menu";
+@import "tables";
+@import "tag_rules";
+@import "terms_of_service_files";
+@import "validation";
+@import "variables";
+@import "variant_overrides";
+@import "welcome";
 
 @import "../shared/question-mark-icon";
 @import "question-mark-tooltip";
@@ -120,7 +120,7 @@
 @import "~tom-select/src/scss/tom-select.default";
 @import "components/tom_select";
 
-@import 'app/components/help_modal_component/help_modal_component';
+@import "app/components/help_modal_component/help_modal_component";
 @import "app/components/product_component/product_component";
 @import "app/components/selector_component/selector_component";
 @import "app/components/products_table_component/products_table_component";
@@ -128,4 +128,4 @@
 @import "app/components/pagination_component/pagination_component";
 @import "app/components/table_header_component/table_header_component";
 @import "app/components/search_input_component/search_input_component";
-@import 'app/components/confirm_modal_component/confirm_modal_component';
+@import "app/components/confirm_modal_component/confirm_modal_component";

app/webpacker/css/admin/components/actions.scss

@@ -1,6 +1,5 @@
 table tbody tr {
   &.highlight {
-
     @each $action in $actions {
       &.action-#{$action} td {
         background-color: get-value($actions, $actions-bg-colors, $action);
@@ -8,7 +7,8 @@ table tbody tr {
       }
     }
 
-    &.action-remove td, &.action-void td {
+    &.action-remove td,
+    &.action-void td {
       text-decoration: line-through;
 
       &.actions {

app/webpacker/css/admin/components/alert_row.scss

@@ -1,13 +1,18 @@
-.alert-row{
+.alert-row {
   margin-bottom: 10px;
   font-weight: bold;
   background-color: $spree-light-blue;
 
-  .column, .columns {
+  .column,
+  .columns {
     padding-top: 8px;
     padding-bottom: 8px;
-    &.alpha { padding-left: 10px; }
-    &.omega { padding-right: 10px; }
+    &.alpha {
+      padding-left: 10px;
+    }
+    &.omega {
+      padding-right: 10px;
+    }
   }
 
   span {
@@ -16,6 +21,6 @@
 
   a.close {
     line-height: 3rem;
-    font-size: 2.0rem;
+    font-size: 2rem;
   }
 }

app/webpacker/css/admin/components/buttons.scss

@@ -1,4 +1,7 @@
-input[type="submit"], input[type="button"], button, .button {
+input[type="submit"],
+input[type="button"],
+button,
+.button {
   position: relative;
   cursor: pointer;
   font-size: 85%;
@@ -15,7 +18,11 @@ input[type="submit"], input[type="button"], button, .button {
     font-weight: normal !important;
   }
 
-  &:visited, &:active, &:focus { color: $color-btn-text }
+  &:visited,
+  &:active,
+  &:focus {
+    color: $color-btn-text;
+  }
 
   &:hover {
     background-color: $color-btn-hover-bg;
@@ -36,7 +43,9 @@ input[type="submit"], input[type="button"], button, .button {
     border: 1px solid $color-btn-bg;
     color: $color-btn-bg;
 
-    &:hover, &:active, &:focus {
+    &:hover,
+    &:active,
+    &:focus {
       background-color: #ebf3fb;
     }
 
@@ -55,9 +64,15 @@ input[type="submit"], input[type="button"], button, .button {
     padding: 0px 5px;
     border-radius: 3px;
 
-    &:before { padding: 0 }
+    &:before {
+      padding: 0;
+    }
 
-    &.danger { background-color: $warning-red; }
-    &.success { background-color: $spree-green; }
+    &.danger {
+      background-color: $warning-red;
+    }
+    &.success {
+      background-color: $spree-green;
+    }
   }
-}
+}

app/webpacker/css/admin/components/dialogs.scss

@@ -1,8 +1,10 @@
-#info-dialog, #confirm-dialog {
+#info-dialog,
+#confirm-dialog {
   .message {
-    .text, .icon {
+    .text,
+    .icon {
       position: relative;
-      float:left;
+      float: left;
       display: inline;
     }
 

app/webpacker/css/admin/components/input.scss

@@ -1,4 +1,4 @@
-@import '../../darkswarm/branding';
+@import "../../darkswarm/branding";
 
 .container {
   input {
@@ -9,12 +9,12 @@
   }
 }
 
-input[type='checkbox'].redesigned-input {
+input[type="checkbox"].redesigned-input {
   position: relative;
   top: 1px;
-  -moz-appearance:none;
-  -webkit-appearance:none;
-  -o-appearance:none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -o-appearance: none;
   appearance: none;
   outline: none;
   content: none;
@@ -32,10 +32,8 @@ input[type='checkbox'].redesigned-input {
     border: 1px solid #809cb1;
     margin-right: 7px;
   }
-  
+
   &:checked:before {
-    color: #5498DA !important;
+    color: #5498da !important;
   }
 }
-
-

app/webpacker/css/admin/components/jquery_dialog.scss

@@ -5,8 +5,8 @@ light: #ccc
 */
 .ui-dialog {
   border: 0px solid #4a4a4a;
-  border-radius:5px;
-  padding:0px;
+  border-radius: 5px;
+  padding: 0px;
   -moz-box-shadow: 3px 3px 4px #797979;
   -webkit-box-shadow: 3px 3px 4px #797979;
   box-shadow: 3px 3px 4px #797979;
@@ -20,29 +20,30 @@ light: #ccc
 }
 
 .ui-dialog .ui-state-hover {
-  &.ui-dialog-titlebar-close{
-
+  &.ui-dialog-titlebar-close {
   }
 }
 
-.ui-dialog .ui-widget-header{
+.ui-dialog .ui-widget-header {
   background-image: none;
   background-color: #ffffff;
-  border:0px;
+  border: 0px;
   border-radius: 8px;
   padding: 0px 5px 0px 5px;
 }
-.ui-dialog .ui-widget-content{
+.ui-dialog .ui-widget-content {
   border: none;
   border-radius: 8px;
   padding: 0px 50px 30px 50px;
 }
 
-.ui-dialog .ui-corner-all{
+.ui-dialog .ui-corner-all {
   border-radius: 8px;
 }
 
-.ui-state-hover, .ui-widget-header .ui-state-hover, .ui-widget-content .ui-state-hover {
+.ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-widget-content .ui-state-hover {
   background-color: #ffffff;
   background: none;
 }
@@ -57,7 +58,7 @@ light: #ccc
     color: #000000;
     font-size: 2em;
     font-weight: 400;
-    content: '\00d7';
+    content: "\00d7";
     display: inline;
   }
 

app/webpacker/css/admin/components/messages.scss

@@ -34,19 +34,29 @@
 
   .flash {
     padding: 18px;
-    text-align: center;  
+    text-align: center;
     font-size: 120%;
     color: $color-1;
     font-weight: 600;
     margin-top: 0;
-  
-    &.notice  { background-color: rgba($color-notice,  0.8) }
-    &.success { background-color: rgba($color-success, 0.8) }
-    &.error   { background-color: rgba($color-error,   0.8) }
+
+    &.notice {
+      background-color: rgba($color-notice, 0.8);
+    }
+    &.success {
+      background-color: rgba($color-success, 0.8);
+    }
+    &.error {
+      background-color: rgba($color-error, 0.8);
+    }
 
     // Adjust heights to fit main layout dimension (header, navbar...)
-    &:nth-child(2) { padding: 24px; }
-    &:nth-child(3) { padding: 20px; }
+    &:nth-child(2) {
+      padding: 24px;
+    }
+    &:nth-child(3) {
+      padding: 20px;
+    }
   }
 }
 

app/webpacker/css/admin/components/navigation.scss

@@ -87,7 +87,7 @@ nav.menu {
         background-color: $color-2;
 
         &:after {
-          content: '';
+          content: "";
           position: absolute;
           border-left: 10px solid transparent;
           border-right: 10px solid transparent;
@@ -146,9 +146,10 @@ nav.menu {
       font-size: 85%;
     }
 
-    &.selected a, a:hover {
+    &.selected a,
+    a:hover {
       &:after {
-        content: '';
+        content: "";
         position: absolute;
         border-left: 10px solid transparent;
         border-right: 10px solid transparent;

app/webpacker/css/admin/components/product_autocomplete.scss

@@ -17,12 +17,12 @@
         display: inline-block;
 
         &:after {
-          content: ' / ';
+          content: " / ";
         }
 
         &:last-child:after {
-          content: '';
-        } 
+          content: "";
+        }
       }
     }
   }

app/webpacker/css/admin/components/progress.scss

@@ -8,10 +8,10 @@
   transform: translateX(-50%);
   z-index: 1000;
   background-color: $spree-blue;
-  color: #FFFFFF;
-  opacity: .8;
+  color: #ffffff;
+  opacity: 0.8;
   font-size: 1rem;
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   font-weight: bold;
   text-align: center;
   text-transform: uppercase;
@@ -37,6 +37,6 @@
   }
   h1 {
     margin-top: 20px;
-    color: inherit;    
+    color: inherit;
   }
 }

app/webpacker/css/admin/components/simple_modal.scss

@@ -4,8 +4,8 @@
   .close-reveal-modal {
     color: $modal-close-button-color;
     font-size: 23px;
-    right: .45rem;
-    top: .35rem;
+    right: 0.45rem;
+    top: 0.35rem;
 
     :hover {
       color: $modal-close-button-hover-color;

app/webpacker/css/admin/components/states.scss

@@ -5,11 +5,11 @@
   white-space: nowrap;
 
   &:before {
-    content: '';
+    content: "";
     position: relative;
     display: inline-block;
     margin-right: 3px;
-    border-radius: $body-font-size*0.5;
+    border-radius: $body-font-size * 0.5;
     width: $body-font-size - 4px;
     height: $body-font-size - 4px;
   }
@@ -29,7 +29,13 @@ table tbody tr {
   &[class*="state"] td:first-child {
     border-left-width: 3px;
   }
-  &.state-complete td:first-child { border-left-color: $color-success }
-  &.state-cart     td:first-child { border-left-color: very-light($color-notice, 6) }
-  &.state-canceled td:first-child { border-left-color: $color-error }
+  &.state-complete td:first-child {
+    border-left-color: $color-success;
+  }
+  &.state-cart td:first-child {
+    border-left-color: very-light($color-notice, 6);
+  }
+  &.state-canceled td:first-child {
+    border-left-color: $color-error;
+  }
 }

app/webpacker/css/admin/components/subscriptions_states.scss

@@ -14,26 +14,41 @@
 
   &.active {
     background-color: $spree-green;
-    &, a { color: #ffffff; }
+    &,
+    a {
+      color: #ffffff;
+    }
   }
 
   &.paused {
     background-color: #ff9300;
-    &, a { color: #ffffff; }
+    &,
+    a {
+      color: #ffffff;
+    }
   }
 
   &.canceled {
     background-color: #c60f13;
-    &, a { color: #ffffff; }
+    &,
+    a {
+      color: #ffffff;
+    }
   }
 
   &.ended {
     background-color: #7a7a7a;
-    &, a { color: #ffffff; }
+    &,
+    a {
+      color: #ffffff;
+    }
   }
 
   &.pending {
     background-color: #7a7a7a;
-    &, a { color: #ffffff; }
+    &,
+    a {
+      color: #ffffff;
+    }
   }
 }

app/webpacker/css/admin/components/table-filter.scss

@@ -1,7 +1,9 @@
 #table-filter {
   .field {
-    input[type="text"], input[type="phone"],
-    input[type="email"], input[type="number"],
+    input[type="text"],
+    input[type="phone"],
+    input[type="email"],
+    input[type="number"],
     input[type="url"] {
       width: 100%;
     }

app/webpacker/css/admin/components/table_loading.scss

@@ -1,5 +1,5 @@
 .row-loading {
-  opacity: .5;
+  opacity: 0.5;
 }
 
 .row-loading-icons {
@@ -13,7 +13,7 @@
 
   i {
     font-size: 2.3em;
-    opacity: .75;
+    opacity: 0.75;
 
     &::before {
       vertical-align: top;

app/webpacker/css/admin/components/timepicker.scss

@@ -1 +1,3 @@
-.ui-timepicker-div.ui-timepicker-oneLine dl dd { width: 25%; }
+.ui-timepicker-div.ui-timepicker-oneLine dl dd {
+  width: 25%;
+}

app/webpacker/css/admin/components/todo.scss

@@ -1,4 +1,4 @@
-.todolist{
+.todolist {
   .todo {
     &.done {
       .title {

app/webpacker/css/admin/components/tom_select.scss

@@ -2,11 +2,13 @@
   margin-top: 0;
 }
 
-.ts-wrapper.single .ts-control, .ts-dropdown.single {
+.ts-wrapper.single .ts-control,
+.ts-dropdown.single {
   border-color: $admin-table-border;
 }
 
-.ts-control, .ts-wrapper.single.input-active .ts-control {
+.ts-control,
+.ts-wrapper.single.input-active .ts-control {
   cursor: pointer;
   padding: 6px 8px;
   outline: 0 !important;
@@ -17,7 +19,8 @@
   padding-right: 2rem;
 }
 
-.ts-wrapper.inline, .ts-wrapper.inline.input-active {
+.ts-wrapper.inline,
+.ts-wrapper.inline.input-active {
   width: fit-content;
 
   .ts-control {
@@ -81,7 +84,13 @@
   }
 }
 
-.ts-dropdown .create:hover, .ts-dropdown #admin-menu li.selected a.create, #admin-menu li.selected .ts-dropdown a.create, .ts-dropdown .option:hover, .ts-dropdown #admin-menu li.selected a.option, #admin-menu li.selected .ts-dropdown a.option, .ts-dropdown .active {
+.ts-dropdown .create:hover,
+.ts-dropdown #admin-menu li.selected a.create,
+#admin-menu li.selected .ts-dropdown a.create,
+.ts-dropdown .option:hover,
+.ts-dropdown #admin-menu li.selected a.option,
+#admin-menu li.selected .ts-dropdown a.option,
+.ts-dropdown .active {
   background-color: $spree-blue;
   color: $white;
 }

app/webpacker/css/admin/components/wizard_progress.scss

@@ -2,76 +2,77 @@ $color_unselected: #d9d9d9;
 $color_selected: $spree-blue;
 
 ul.wizard-progress {
-	list-style: none;
-	margin: 15px 0;
-	padding: 0;
-	text-align: center;
+  list-style: none;
+  margin: 15px 0;
+  padding: 0;
+  text-align: center;
   display: block;
-	li {
-		background-color: $color_unselected;
-		color: #494949;
-		display: inline-block;
-		margin: 0;
+  li {
+    background-color: $color_unselected;
+    color: #494949;
+    display: inline-block;
+    margin: 0;
     font-size: 0.9rem;
     text-transform: uppercase;
-		line-height: 30px;
-		padding: 0 25px 0 40px;
-		position: relative;
-		a {
-		  color: #494949;
-		}
-		&:first-child {
-			padding-left: 25px;
-			border-top-left-radius: 3px;
-			border-bottom-left-radius: 3px;
-		}
-		&:last-child {
-			border-top-right-radius: 3px;
-			border-bottom-right-radius: 3px;
-			&:after {
-				display: none;
-			}
-			&:before {
-				display: none;
-			}
-		}
+    line-height: 30px;
+    padding: 0 25px 0 40px;
+    position: relative;
+    a {
+      color: #494949;
+    }
+    &:first-child {
+      padding-left: 25px;
+      border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px;
+    }
+    &:last-child {
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+      &:after {
+        display: none;
+      }
+      &:before {
+        display: none;
+      }
+    }
 
-    &:before, &:after {
+    &:before,
+    &:after {
       background-color: $color_unselected;
       content: "";
       display: block;
       position: absolute;
     }
 
-		&:after {
-			border-radius: 3px;
-			border-right: 3px solid #fff;
-			border-top: 3px solid #fff;
-			height: 21px;
-			right: -15px;
-			top: 3px;
-			transform: rotate(45deg);
-			width: 21px;
-			z-index: 5;
-		}
-		&:before {
-			height: 30px;
-			right: 3px;
-			width: 20px;
-			z-index: 6;
-		}
-		&.current {
-			background-color: $color_selected;
-			color: #fff;
-			a {
-			  color: #fff;
-			}
-			&:after {
-				background-color: $color_selected;
-			}
-			&:before {
-				background-color: $color_selected;
-			}
-		}
-	}
+    &:after {
+      border-radius: 3px;
+      border-right: 3px solid #fff;
+      border-top: 3px solid #fff;
+      height: 21px;
+      right: -15px;
+      top: 3px;
+      transform: rotate(45deg);
+      width: 21px;
+      z-index: 5;
+    }
+    &:before {
+      height: 30px;
+      right: 3px;
+      width: 20px;
+      z-index: 6;
+    }
+    &.current {
+      background-color: $color_selected;
+      color: #fff;
+      a {
+        color: #fff;
+      }
+      &:after {
+        background-color: $color_selected;
+      }
+      &:before {
+        background-color: $color_selected;
+      }
+    }
+  }
 }

config/application.rb

@@ -23,7 +23,7 @@ end
 require_relative "../lib/open_food_network/i18n_config"
 require_relative '../lib/spree/core/environment'
 require_relative '../lib/spree/core/mail_interceptor'
-require_relative "../lib/session_cookie_upgrader"
+require_relative "../lib/i18n_digests"
 
 if defined?(Bundler)
   # If you precompile assets before deploying to production, use this line
@@ -34,15 +34,6 @@ end
 
 module Openfoodnetwork
   class Application < Rails::Application
-    config.middleware.insert_before(
-      ActionDispatch::Cookies,
-      SessionCookieUpgrader, {
-        old_key: "_session_id",
-        new_key: "_ofn_session_id",
-        domain: ".#{ENV['SITE_URL'].gsub(/^(www\.)|^(app\.)|^(staging\.)|^(stg\.)/, '')}"
-      }
-    ) if Rails.env.staging? || Rails.env.production?
-
     config.after_initialize do
       # We need this here because the test env file loads before the Spree engine is loaded
       Spree::Core::Engine.routes.default_url_options[:host] = ENV["SITE_URL"] if Rails.env == 'test'
@@ -194,6 +185,9 @@ module Openfoodnetwork
     config.i18n.available_locales = OpenFoodNetwork::I18nConfig.available_locales
     I18n.locale = config.i18n.locale = config.i18n.default_locale
 
+    # Calculate digests for locale files so we can know when they change
+    I18nDigests.build_digests config.i18n.available_locales
+
     # Setting this to true causes a performance regression in Rails 3.2.17
     # When we're on a version with the fix below, we can set it to true
     # https://github.com/svenfuchs/i18n/issues/230

config/locales/en_FR.yml

@@ -58,6 +58,17 @@ en_FR:
         orders_close_at: Close date
       variant_override:
         count_on_hand: "On Hand"
+      spree/payment_method/calculator:
+        preferred_flat_percent: "Calculator Flat Percent:"
+        preferred_amount: "Calculator Amount:"
+        preferred_first_item: "Calculator First Item:"
+        preferred_additional_item: "Calculator Additional Item Cost:"
+        preferred_max_items: "Calculator Max Items:"
+        preferred_minimal_amount: "Calculator Minimal Amount:"
+        preferred_normal_amount: "Calculator Normal Amount:"
+        preferred_discount_amount: "Calculator Discount Amount:"
+        preferred_unit_from_list: "Calculator Unit From List:"
+        preferred_per_unit: "Calculator Per Unit:"
     errors:
       models:
         spree/user:

config/locales/fr.yml

@@ -331,7 +331,7 @@ fr:
   bill_address: Adresse de facturation
   ship_address: Adresse de livraison
   sort_order_cycles_on_shopfront_by: "Trier les cycles de vente par"
-  required_fields: Les champs obligatoires sont indiqués par un astérisque
+  required_fields: 'Les champs obligatoires sont indiqués par un astérisque. '
   select_continue: Choisir et continuer
   remove: Supprimer
   collapse_all: Tout masquer

config/locales/fr_BE.yml

@@ -3496,6 +3496,9 @@ fr_BE:
           select_and_search: "Sélectionnez les filtres et cliquez sur %{option} pour accéder à vos données."
         customer_names_message:
           customer_names_tip: "Si le nom des client est cacher pour des commande que vous avez faite, vous pouvez contacter le distributeur est leur demander de changer les préférence pour savoir laisser leur fournisseur voire les nom des client. "
+        products_and_inventory:
+          all_products:
+            message: "Notez que les niveaux de stock indiqués proviennent uniquement des listes de produits des fournisseurs. Si vous utilisez le \"catalogue magasin\" pour gérer vos stocks, ces valeurs seront ignorées dans ce rapport."
       users:
         index:
           listing_users: "Utilisateur·trice d'annonces"

config/webpack/development.js

@@ -2,7 +2,4 @@ process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
 const environment = require('./environment')
 
-const config = environment.toWebpackConfig();
-config.output.filename = "js/[name]-[hash].js";
-
 module.exports = environment.toWebpackConfig()

db/schema.rb

@@ -1190,6 +1190,16 @@ ActiveRecord::Schema[7.0].define(version: 2023_04_24_141213) do
     t.index ["item_type", "item_id"], name: "index_versions_on_item_type_and_item_id"
   end
 
+  create_table "vouchers", force: :cascade do |t|
+    t.string "code", limit: 255, null: false
+    t.datetime "expiry_date"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.bigint "enterprise_id"
+    t.index ["code", "enterprise_id"], name: "index_vouchers_on_code_and_enterprise_id", unique: true
+    t.index ["enterprise_id"], name: "index_vouchers_on_enterprise_id"
+  end
+
   create_table "webhook_endpoints", force: :cascade do |t|
     t.string "url", null: false
     t.datetime "created_at", null: false
@@ -1198,16 +1208,6 @@ ActiveRecord::Schema[7.0].define(version: 2023_04_24_141213) do
     t.index ["user_id"], name: "index_webhook_endpoints_on_user_id"
   end
 
-  create_table "vouchers", force: :cascade do |t|
-    t.string "code", limit: 255, null: false
-    t.datetime "expiry_date"
-    t.datetime "created_at", precision: 6, null: false
-    t.datetime "updated_at", precision: 6, null: false
-    t.bigint "enterprise_id"
-    t.index ["code", "enterprise_id"], name: "index_vouchers_on_code_and_enterprise_id", unique: true
-    t.index ["enterprise_id"], name: "index_vouchers_on_enterprise_id"
-  end
-
   add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id"
   add_foreign_key "active_storage_variant_records", "active_storage_blobs", column: "blob_id"
   add_foreign_key "adjustment_metadata", "enterprises", name: "adjustment_metadata_enterprise_id_fk"
@@ -1312,6 +1312,6 @@ ActiveRecord::Schema[7.0].define(version: 2023_04_24_141213) do
   add_foreign_key "subscriptions", "spree_shipping_methods", column: "shipping_method_id", name: "subscriptions_shipping_method_id_fk"
   add_foreign_key "variant_overrides", "enterprises", column: "hub_id", name: "variant_overrides_hub_id_fk"
   add_foreign_key "variant_overrides", "spree_variants", column: "variant_id", name: "variant_overrides_variant_id_fk"
-  add_foreign_key "webhook_endpoints", "spree_users", column: "user_id"
   add_foreign_key "vouchers", "enterprises"
+  add_foreign_key "webhook_endpoints", "spree_users", column: "user_id"
 end

lib/i18n_digests.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class I18nDigests
+  class << self
+    def build_digests(available_locales)
+      available_locales.each do |locale|
+        i18n_digests[locale.to_sym] = locale_file_digest(locale)
+      end
+    end
+
+    def for_locale(locale)
+      i18n_digests[locale.to_sym]
+    end
+
+    private
+
+    def i18n_digests
+      Rails.application.config.x.i18n_digests
+    end
+
+    def locale_file_digest(locale)
+      Digest::MD5.hexdigest(Rails.root.join("config/locales/#{locale}.yml").read)
+    end
+  end
+end

lib/open_food_network/feature_toggle.rb

@@ -9,6 +9,7 @@ module OpenFoodNetwork
   module FeatureToggle
     # Please add your new feature here to appear in the Flipper UI.
     # We way move this to a YAML file when it becomes too awkward.
+    # **WARNING:** Features not in this list will be removed.
     CURRENT_FEATURES = {
       "admin_style_v2" => <<~DESC,
         Change some colour and layout in the backend to a newer version.
@@ -45,23 +46,14 @@ module OpenFoodNetwork
       DESC
     }.freeze
 
-    # Move your feature entry from CURRENT_FEATURES to RETIRED_FEATURES when
-    # you remove it from the code. It will then be deleted from the database.
-    #
-    # We may delete this field one day and regard all features not listed in
-    # CURRENT_FEATURES as unsupported and remove them. But until this approach
-    # is accepted we delete only the features listed here.
-    RETIRED_FEATURES = {}.freeze
-
     def self.setup!
       CURRENT_FEATURES.each_key do |name|
         feature = Flipper.feature(name)
         feature.add unless feature.exist?
       end
 
-      RETIRED_FEATURES.each_key do |name|
-        feature = Flipper.feature(name)
-        feature.remove if feature.exist?
+      Flipper.features.each do |feature|
+        feature.remove unless CURRENT_FEATURES.key?(feature.name)
       end
     end
 

lib/session_cookie_upgrader.rb

@@ -1,35 +0,0 @@
-# frozen_string_literal: true
-
-class SessionCookieUpgrader
-  def initialize(app, options = {})
-    @app = app
-    @options = options
-  end
-
-  def call(env)
-    request = ::Rack::Request.new(env)
-    cookies = request.cookies
-    old_key = @options[:old_key]
-    new_key = @options[:new_key]
-
-    # Set the session id for this request from the old session cookie (if present)
-    # This must be done before @app.call(env) or a new session will be initialized
-    cookies[new_key] = cookies[old_key] if cookies[old_key]
-
-    status, headers, body = @app.call(env)
-
-    if cookies[old_key]
-      # Create new session cookie with pre-existing session id
-      Rack::Utils.set_cookie_header!(
-        headers,
-        new_key,
-        { value: cookies[old_key], path: "/", domain: @options[:domain] }
-      )
-
-      # Delete old session cookie
-      Rack::Utils.delete_cookie_header!(headers, old_key)
-    end
-
-    [status, headers, body]
-  end
-end

package.json

@@ -19,13 +19,9 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.21.5",
-    "@babel/plugin-transform-runtime": "^7.21.4",
-    "@babel/preset-env": "^7.21.5",
     "@floating-ui/dom": "^1.2.7",
     "@hotwired/turbo": "^7.3.0",
     "@rails/webpacker": "5.4.4",
-    "babel-loader": "^8.2.3",
     "cable_ready": "5.0.0",
     "debounced": "^0.0.5",
     "flatpickr": "^4.6.9",

spec/helpers/application_helper_spec.rb

@@ -42,4 +42,51 @@ describe ApplicationHelper, type: :helper do
       end
     end
   end
+
+  describe "#cache_with_locale" do
+    let(:available_locales) { ["en", "es"] }
+    let(:current_locale) { "es" }
+    let(:locale_digest) { "8a7s5dfy28u0as9du" }
+    let(:options) { { expires_in: 10.seconds } }
+
+    before do
+      allow(I18n).to receive(:available_locales) { available_locales }
+      allow(I18n).to receive(:locale) { current_locale }
+      allow(I18nDigests).to receive(:for_locale) { locale_digest }
+    end
+
+    it "passes key, options, and block to #cache method with locale and locale digest appended" do
+      expect(helper).to receive(:cache_key_with_locale).
+        with("test-key", current_locale).and_return(["test-key", current_locale, locale_digest])
+
+      expect(helper).to receive(:cache).
+        with(["test-key", current_locale, locale_digest], options) do |&block|
+          expect(block.call).to eq("cached content")
+        end
+
+      helper.cache_with_locale "test-key", options do
+        "cached content"
+      end
+    end
+  end
+
+  describe "#cache_key_with_locale" do
+    let(:en_digest) { "asd689asy0239" }
+    let(:es_digest) { "9d8tu23oirhad" }
+
+    before { allow(I18nDigests).to receive(:for_locale).with("en") { en_digest } }
+    before { allow(I18nDigests).to receive(:for_locale).with("es") { es_digest } }
+
+    it "appends locale and digest to a single key" do
+      expect(
+        helper.cache_key_with_locale("single-key", "en")
+      ).to eq(["single-key", "en", en_digest])
+    end
+
+    it "appends locale and digest to multiple keys" do
+      expect(
+        helper.cache_key_with_locale(["array", "of", "keys"], "es")
+      ).to eq(["array", "of", "keys", "es", es_digest])
+    end
+  end
 end

spec/lib/i18n_digests_spec.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe I18nDigests do
+  describe "#build_digests" do
+    let(:available_locales) { ["en", "es"] }
+    let(:md5_hex_regex) { /([a-f0-9]){10}/ }
+
+    around do |example|
+      original = Rails.application.config.x.i18n_digests
+      example.run
+      Rails.application.config.x.i18n_digests = original
+    end
+
+    it "computes and stores digests for each locale file" do
+      Rails.application.config.x.i18n_digests = {}
+      I18nDigests.build_digests(available_locales)
+
+      expect(Rails.application.config.x.i18n_digests.keys).to eq [:en, :es]
+      expect(Rails.application.config.x.i18n_digests.values).to all match(md5_hex_regex)
+
+      expect(
+        Rails.application.config.x.i18n_digests[:en]
+      ).to eq(Digest::MD5.hexdigest(Rails.root.join("config/locales/en.yml").read))
+
+      expect(
+        Rails.application.config.x.i18n_digests[:es]
+      ).to eq(Digest::MD5.hexdigest(Rails.root.join("config/locales/es.yml").read))
+    end
+  end
+
+  describe "#for_locale" do
+    let(:digests) { { en: "as8d7a9sdh", es: "iausyd9asdh" } }
+
+    before do
+      allow(Rails).to receive_message_chain(:application, :config, :x, :i18n_digests) { digests }
+    end
+
+    it "returns the digest for a given locale" do
+      expect(I18nDigests.for_locale("en")).to eq "as8d7a9sdh"
+    end
+  end
+end

spec/lib/open_food_network/feature_toggle_spec.rb

@@ -2,17 +2,43 @@
 
 require 'spec_helper'
 
-module OpenFoodNetwork
-  describe FeatureToggle do
-    context 'when users are not specified' do
-      it "returns false when feature is undefined" do
-        expect(FeatureToggle.enabled?(:foo)).to be false
-      end
+describe OpenFoodNetwork::FeatureToggle do
+  subject(:feature_toggle) { OpenFoodNetwork::FeatureToggle }
 
-      it "uses Flipper configuration" do
-        Flipper.enable(:foo)
-        expect(FeatureToggle.enabled?(:foo)).to be true
-      end
+  context 'when users are not specified' do
+    it "returns false when feature is undefined" do
+      expect(feature_toggle.enabled?(:foo)).to be false
+    end
+
+    it "uses Flipper configuration" do
+      Flipper.enable(:foo)
+      expect(feature_toggle.enabled?(:foo)).to be true
+    end
+  end
+
+  describe ".setup!" do
+    it "created all current features at boot time" do
+      expect(Flipper.features.map(&:name))
+        .to match_array feature_toggle::CURRENT_FEATURES.keys
+    end
+
+    it "adds any missing features" do
+      pending "We don't have features to test with at the moment." if Flipper.features.empty?
+
+      feature = Flipper.features.first
+      feature.remove
+
+      expect { feature_toggle.setup! }
+        .to change { Flipper.features }.by([feature])
+    end
+
+    it "removes unknown features" do
+      feature = Flipper.feature(:foo)
+      feature.enable
+
+      expect { feature_toggle.setup! }
+        .to change { Flipper.features.count }.by(-1)
+        .and change { feature.exist? }.to(false)
     end
   end
 end

spec/system/admin/order_spec.rb

@@ -143,14 +143,45 @@ describe '
     end
   end
 
+  context "when creating an order with a customer-only" do
+    let(:customer2) { create(:customer, enterprise: distributor) }
+    let(:customer3) { create(:customer, enterprise: distributor) }
+
+    before do
+      login_as_admin
+      visit spree.new_admin_order_path
+      select2_select distributor.name, from: 'order_distributor_id'
+      select2_select order_cycle.name, from: 'order_order_cycle_id'
+      click_button 'Next'
+      expect(Spree::Order.last.customer_id).to be_nil
+      tomselect_search_and_select customer2.email, from: 'customer_search_override'
+      check 'order_use_billing'
+      click_button 'Update'
+      expect(page).to have_content 'Customer Details updated'
+    end
+
+    it "set the right customer attached to the order" do
+      expect(Spree::Order.last.reload.customer).to eq customer2
+    end
+
+    it "when changing the attached customer,"\
+       "it should update the order customer (not only its details)" do
+      tomselect_search_and_select customer3.email, from: 'customer_search_override'
+      expect do
+        click_button 'Update'
+        expect(page).to have_field 'order_email', with: customer3.email
+      end.to change { Spree::Order.last.reload.customer }.from(customer2).to(customer3)
+    end
+  end
+
   it "can add a product to an existing order" do
     login_as_admin
     visit spree.edit_admin_order_path(order)
 
     select2_select product.name, from: 'add_variant_id', search: true
-
     find('button.add_variant').click
     # Wait for JS
+    sleep(1)
     page.has_selector?("table.index tbody tr td")
     expect(page).to have_selector 'td', text: product.name
     expect(order.line_items.reload.map(&:product)).to include product

yarn.lock

@@ -27,7 +27,7 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.7.tgz#61caffb60776e49a57ba61a88f02bedd8714f6bc"
   integrity sha512-KYMqFYTaenzMK4yUtf4EW9wc4N9ef80FsbMtkwool5zpwl4YrT1SdWYSTRcT94KO4hannogdS+LxY7L+arP3gA==
 
-"@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.15.0", "@babel/core@^7.21.5", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
+"@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.15.0", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
   version "7.21.5"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.5.tgz#92f753e8b9f96e15d4b398dbe2f25d1408c9c426"
   integrity sha512-9M398B/QH5DlfCOTKDZT1ozXr0x8uBEeFd+dJraGUZGiaNpGCDVGCc14hZexsMblw3XxltJ+6kSvogp9J+5a9g==
@@ -298,12 +298,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.5.tgz#821bb520118fd25b982eaf8d37421cf5c64a312b"
-  integrity sha512-J+IxH2IsxV4HbnTrSWgMAQj0UEo61hDA4Ny8h8PCX0MLXiibqHbqIOVneqdocemSBc22VpBKxt4J6FQzy9HarQ==
-
-"@babel/parser@^7.20.7", "@babel/parser@^7.21.5":
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.21.5", "@babel/parser@^7.21.8":
   version "7.21.8"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.8.tgz#642af7d0333eab9c0ad70b14ac5e76dbde7bfdf8"
   integrity sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==
@@ -502,7 +497,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.19.0"
 
-"@babel/plugin-syntax-import-meta@^7.10.4", "@babel/plugin-syntax-import-meta@^7.8.3":
+"@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
   integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
@@ -579,7 +574,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-arrow-functions@^7.20.7", "@babel/plugin-transform-arrow-functions@^7.21.5":
+"@babel/plugin-transform-arrow-functions@^7.20.7":
   version "7.21.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.21.5.tgz#9bb42a53de447936a57ba256fbf537fc312b6929"
   integrity sha512-wb1mhwGOCaXHDTcsRYMKF9e5bbMgqwxtqa2Y1ifH96dXJPwbuLX9qHy3clhrxVqgMz7nyNXs8VkxdH8UBcjKqA==
@@ -624,7 +619,7 @@
     "@babel/helper-split-export-declaration" "^7.18.6"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.20.7", "@babel/plugin-transform-computed-properties@^7.21.5":
+"@babel/plugin-transform-computed-properties@^7.20.7":
   version "7.21.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.21.5.tgz#3a2d8bb771cd2ef1cd736435f6552fe502e11b44"
   integrity sha512-TR653Ki3pAwxBxUe8srfF3e4Pe3FTA46uaNHYyQwIoM4oWKSoOZiDNyHJ0oIoDIUPSRQbQG7jzgVBX3FPVne1Q==
@@ -662,7 +657,7 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-for-of@^7.21.0", "@babel/plugin-transform-for-of@^7.21.5":
+"@babel/plugin-transform-for-of@^7.21.0":
   version "7.21.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.5.tgz#e890032b535f5a2e237a18535f56a9fdaa7b83fc"
   integrity sha512-nYWpjKW/7j/I/mZkGVgHJXh4bA1sfdFnJoOXwJuj4m3Q2EraO/8ZyrkCau9P5tbHQk01RMSt6KYLCsW7730SXQ==
@@ -700,7 +695,7 @@
     "@babel/helper-module-transforms" "^7.20.11"
     "@babel/helper-plugin-utils" "^7.20.2"
 
-"@babel/plugin-transform-modules-commonjs@^7.21.2", "@babel/plugin-transform-modules-commonjs@^7.21.5":
+"@babel/plugin-transform-modules-commonjs@^7.21.2":
   version "7.21.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.5.tgz#d69fb947eed51af91de82e4708f676864e5e47bc"
   integrity sha512-OVryBEgKUbtqMoB7eG2rs6UFexJi6Zj6FDXx+esBLPTCxCNxAY9o+8Di7IsUGJ+AVhp5ncK0fxWUBd0/1gPhrQ==
@@ -772,7 +767,7 @@
     "@babel/helper-plugin-utils" "^7.20.2"
     regenerator-transform "^0.15.1"
 
-"@babel/plugin-transform-regenerator@^7.20.5", "@babel/plugin-transform-regenerator@^7.21.5":
+"@babel/plugin-transform-regenerator@^7.20.5":
   version "7.21.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.21.5.tgz#576c62f9923f94bcb1c855adc53561fd7913724e"
   integrity sha512-ZoYBKDb6LyMi5yCsByQ5jmXsHAQDDYeexT1Szvlmui+lADvfSecr5Dxd/PkrTC3pAD182Fcju1VQkB4oCp9M+w==
@@ -799,18 +794,6 @@
     babel-plugin-polyfill-regenerator "^0.2.2"
     semver "^6.3.0"
 
-"@babel/plugin-transform-runtime@^7.21.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.4.tgz#2e1da21ca597a7d01fc96b699b21d8d2023191aa"
-  integrity sha512-1J4dhrw1h1PqnNNpzwxQ2UBymJUF8KuPjAAnlLwZcGhHAIqUigFW7cdK6GHoB64ubY4qXQNYknoUeks4Wz7CUA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.21.4"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    babel-plugin-polyfill-corejs2 "^0.3.3"
-    babel-plugin-polyfill-corejs3 "^0.6.0"
-    babel-plugin-polyfill-regenerator "^0.4.1"
-    semver "^6.3.0"
-
 "@babel/plugin-transform-shorthand-properties@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9"
@@ -847,7 +830,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-unicode-escapes@^7.18.10", "@babel/plugin-transform-unicode-escapes@^7.21.5":
+"@babel/plugin-transform-unicode-escapes@^7.18.10":
   version "7.21.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.21.5.tgz#1e55ed6195259b0e9061d81f5ef45a9b009fb7f2"
   integrity sha512-LYm/gTOwZqsYohlvFUe/8Tujz75LqqVC2w+2qPHLR+WyWHGCZPN1KBpJCJn+4Bk4gOkQy/IXKIge6az5MqwlOg==
@@ -943,88 +926,6 @@
     core-js-compat "^3.25.1"
     semver "^6.3.0"
 
-"@babel/preset-env@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.21.5.tgz#db2089d99efd2297716f018aeead815ac3decffb"
-  integrity sha512-wH00QnTTldTbf/IefEVyChtRdw5RJvODT/Vb4Vcxq1AZvtXj6T0YeX0cAcXhI6/BdGuiP3GcNIL4OQbI2DVNxg==
-  dependencies:
-    "@babel/compat-data" "^7.21.5"
-    "@babel/helper-compilation-targets" "^7.21.5"
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/helper-validator-option" "^7.21.0"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.20.7"
-    "@babel/plugin-proposal-async-generator-functions" "^7.20.7"
-    "@babel/plugin-proposal-class-properties" "^7.18.6"
-    "@babel/plugin-proposal-class-static-block" "^7.21.0"
-    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
-    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
-    "@babel/plugin-proposal-json-strings" "^7.18.6"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.20.7"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
-    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
-    "@babel/plugin-proposal-object-rest-spread" "^7.20.7"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
-    "@babel/plugin-proposal-optional-chaining" "^7.21.0"
-    "@babel/plugin-proposal-private-methods" "^7.18.6"
-    "@babel/plugin-proposal-private-property-in-object" "^7.21.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-class-properties" "^7.12.13"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-import-assertions" "^7.20.0"
-    "@babel/plugin-syntax-import-meta" "^7.10.4"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-    "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-transform-arrow-functions" "^7.21.5"
-    "@babel/plugin-transform-async-to-generator" "^7.20.7"
-    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
-    "@babel/plugin-transform-block-scoping" "^7.21.0"
-    "@babel/plugin-transform-classes" "^7.21.0"
-    "@babel/plugin-transform-computed-properties" "^7.21.5"
-    "@babel/plugin-transform-destructuring" "^7.21.3"
-    "@babel/plugin-transform-dotall-regex" "^7.18.6"
-    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
-    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
-    "@babel/plugin-transform-for-of" "^7.21.5"
-    "@babel/plugin-transform-function-name" "^7.18.9"
-    "@babel/plugin-transform-literals" "^7.18.9"
-    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
-    "@babel/plugin-transform-modules-amd" "^7.20.11"
-    "@babel/plugin-transform-modules-commonjs" "^7.21.5"
-    "@babel/plugin-transform-modules-systemjs" "^7.20.11"
-    "@babel/plugin-transform-modules-umd" "^7.18.6"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.20.5"
-    "@babel/plugin-transform-new-target" "^7.18.6"
-    "@babel/plugin-transform-object-super" "^7.18.6"
-    "@babel/plugin-transform-parameters" "^7.21.3"
-    "@babel/plugin-transform-property-literals" "^7.18.6"
-    "@babel/plugin-transform-regenerator" "^7.21.5"
-    "@babel/plugin-transform-reserved-words" "^7.18.6"
-    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
-    "@babel/plugin-transform-spread" "^7.20.7"
-    "@babel/plugin-transform-sticky-regex" "^7.18.6"
-    "@babel/plugin-transform-template-literals" "^7.18.9"
-    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
-    "@babel/plugin-transform-unicode-escapes" "^7.21.5"
-    "@babel/plugin-transform-unicode-regex" "^7.18.6"
-    "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.21.5"
-    babel-plugin-polyfill-corejs2 "^0.3.3"
-    babel-plugin-polyfill-corejs3 "^0.6.0"
-    babel-plugin-polyfill-regenerator "^0.4.1"
-    core-js-compat "^3.25.1"
-    semver "^6.3.0"
-
 "@babel/preset-modules@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.5.tgz#ef939d6e7f268827e1841638dc6ff95515e115d9"
@@ -2050,7 +1951,7 @@ babel-jest@^27.5.1:
     graceful-fs "^4.2.9"
     slash "^3.0.0"
 
-babel-loader@^8.2.2, babel-loader@^8.2.3:
+babel-loader@^8.2.2:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.3.0.tgz#124936e841ba4fe8176786d6ff28add1f134d6a8"
   integrity sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==