From 33a2dd100ebdf5356add6d35a38366fe17298694 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Thu, 21 May 2020 17:51:00 +0200
Subject: [PATCH] Add new layout for cart sidebar

---
 .../darkswarm/cart-dropdown.css.scss          | 77 +++++++++++++++++++
 app/views/shared/menu/_cart.html.haml         |  4 +-
 app/views/shared/menu/_cart_sidebar.html.haml | 36 +++++++--
 3 files changed, 109 insertions(+), 8 deletions(-)
 create mode 100644 app/assets/stylesheets/darkswarm/cart-dropdown.css.scss

diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss
new file mode 100644
index 0000000000..5b7f21b7ea
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss
@@ -0,0 +1,77 @@
+@import "mixins";
+@import "variables";
+@import "branding";
+
+.expanding-sidebar.cart-sidebar {
+  .sidebar {
+    padding: 0;
+    background-color: $white;
+  }
+
+  .cart-header {
+    padding: 1em;
+    border-bottom: 1px solid $grey-100;
+
+    .title {
+      color: $grey-800;
+      margin: 0;
+    }
+
+    .close {
+      color: $grey-500;
+      float: right;
+
+      i {
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .cart-content {
+    margin-bottom: $sidebar-footer-height + 2em;
+  }
+
+  table {
+    width: 100%;
+    border: none;
+    border-spacing: 0;
+    margin: 0;
+
+    tr.product-cart {
+      background-color: white;
+
+      td {
+        border-bottom: 1px solid $grey-100;
+        padding: 0.75em 1em 0.5em 1em;
+        vertical-align: top;
+
+        &.image {
+          width: 42px;
+          padding: 0.5em 0 0.5em 1em;
+        }
+
+        span {
+          color: $grey-800;
+          font-size: 16px;
+          line-height: 1.25;
+        }
+
+        img {
+          max-width: 56px;
+          max-height: 56px;
+        }
+
+        .options-text {
+          color: $grey-500;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .cart-total {
+    color: $white;
+    text-align: center;
+    margin: -0.5em 0 0.75em 0;
+  }
+}
diff --git a/app/views/shared/menu/_cart.html.haml b/app/views/shared/menu/_cart.html.haml
index d6408dc634..1fd1b06e89 100644
--- a/app/views/shared/menu/_cart.html.haml
+++ b/app/views/shared/menu/_cart.html.haml
@@ -1,10 +1,8 @@
 %span.cart-span{"ng-controller" => "CartCtrl", "ng-class" => "{ dirty: Cart.dirty || Cart.empty(), 'pure-dirty': Cart.dirty }"}
-  %a#cart.icon{"cart-toggle" => true}
+  %a#cart.icon{"ng-click" => "toggleCartSidebar()"}
     %span
       = t '.cart'
     %span.count
       %img{ src: image_path("menu/icn-cart.svg") }
       %span
         {{ Cart.total_item_count() }}
-
-  = render 'shared/menu/joyride'
diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml
index 56624a8ed9..a5aaf2dec1 100644
--- a/app/views/shared/menu/_cart_sidebar.html.haml
+++ b/app/views/shared/menu/_cart_sidebar.html.haml
@@ -1,8 +1,34 @@
-.cart-sidebar{ng: {show: 'showCartSidebar', class: "{'shown': showCartSidebar, 'hidden': !showCartSidebar}"}}
+.expanding-sidebar.cart-sidebar{ng: {controller: 'CartCtrl', show: 'showCartSidebar', class: "{'shown': showCartSidebar, 'hidden': !showCartSidebar}"}}
   .background{ng: {click: 'toggleCartSidebar()'}}
   .sidebar
+    .cart-header
+      %span.title
+        5 items in your cart
+      %span.close
+        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 }}
+            %br
+            %span.options-text {{ line_item.variant.options_text }}
+          %td.text-right
+            %span.quantity {{ line_item.quantity }}
+          %td
+            %span.total-price.right {{ line_item.total_price | localizeCurrency }}
+
     .sidebar-footer
-      %button.large.dark.left{type: 'button'}
-        Edit Cart
-      %button.large.bright.right{type: 'button', ng: {click: 'toggleCartSidebar()'}}
-        Checkout
+      %p.cart-total{"ng-show" => "Cart.line_items.length > 0"}
+        %strong
+          = t 'total'
+          \:
+          {{ Cart.total()  | localizeCurrency }}
+
+      %button.large.dark.left{href: main_app.cart_path, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }"}
+        = "{{ Cart.dirty ? '#{t(:cart_updating)}' : (Cart.empty() ? '#{t(:cart_empty)}' : '#{t(:cart_edit)}' ) }}"
+      %button.large.bright.right{href: main_app.checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"}
+        = t '.checkout'