Merge pull request #1687 from BC-JMolina/INT-2593

feat(payments): INT-2593 Display wallet on drop-down section from cart icon
bigcommerce · Jun 15, 2020 · 25ba201 · 25ba201
2 parents ae514d8 + 6f21e9b
commit 25ba201
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 31 deletions.
diff --git a/assets/scss/components/stencil/cart/_cart.scss b/assets/scss/components/stencil/cart/_cart.scss
@@ -16,6 +16,42 @@ $cart-thumbnail-height:                 remCalc(100px);
 
 $cart-item-label-offset:                $cart-thumbnail-maxWidth + $cart-item-spacing;
 
+//
+// Shared styles for additional checkout buttons
+// -----------------------------------------------------------------------------
+
+%additionalCheckoutButtons {
+    @include clearfix;
+
+    // scss-lint:disable SelectorFormat
+    .FloatRight {
+        @include clearfix;
+
+        // scss-lint:disable SelectorDepth, NestingDepth
+        p {
+            // scss-lint:disable ImportantRule
+            float: none !important;
+            margin: spacing("third") 0;
+            text-align: right;
+        }
+
+        div {
+            float: right;
+        }
+    }
+
+    .CheckoutButton {
+        margin-bottom: spacing("base");
+
+        &:first-child {
+            margin-top: spacing("single");
+        }
+
+        &:last-child {
+            margin-bottom: spacing("single");
+        }
+    }
+}
 
 // Cart layout
 // -----------------------------------------------------------------------------
@@ -508,39 +544,14 @@ $cart-item-label-offset:                $cart-thumbnail-maxWidth + $cart-item-sp
     }
 }
 
-.cart-additionalCheckoutButtons { // 1
-    @include clearfix;
-
-    // scss-lint:disable SelectorFormat
-    .FloatRight {
-        @include clearfix;
-
-        // scss-lint:disable SelectorDepth, NestingDepth
-        p {
-            // scss-lint:disable ImportantRule
-            float: none !important;
-            margin: spacing("third") 0;
-            text-align: right;
-        }
-
-        div {
-            float: right;
-        }
-    }
-
-    .CheckoutButton {
-        margin-bottom: spacing("base");
-
-        &:first-child {
-            margin-top: spacing("single");
-        }
-
-        &:last-child {
-            margin-bottom: spacing("single");
-        }
-    }
+.cart-additionalCheckoutButtons {
+    @extend %additionalCheckoutButtons;
 }
 
+.previewCart-additionalCheckoutButtons {
+    @extend %additionalCheckoutButtons;
+    padding-right: 1.5rem;
+}
 
 // Cart Preview
 // -----------------------------------------------------------------------------

diff --git a/templates/components/common/cart-preview.html b/templates/components/common/cart-preview.html
@@ -65,6 +65,13 @@ <h6 class="previewCartItem-name">
                 </div>
             {{/if}}
         </div>
+        {{#if cart.additional_checkout_buttons}}
+            <div class="previewCart-additionalCheckoutButtons">
+                {{#each cart.additional_checkout_buttons}}
+                    {{{this}}}
+                {{/each}}
+            </div>
+        {{/if}}
     {{else}}
         <div class="previewCart-emptyBody">
             {{lang 'cart.checkout.empty_cart'}}