Merge pull request bigcommerce#2242 from serhii-tkachenko/PAYPAL-1579

feat(payment): PAYPAL-1579 added wallet buttons component for product details and quick view
fusionary · Aug 8, 2022 · 83d17dd · 83d17dd
2 parents 68deea3 + 30332f5
commit 83d17dd
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 24 deletions.
diff --git a/assets/scss/components/foundation/dropdown/_dropdown.scss b/assets/scss/components/foundation/dropdown/_dropdown.scss
@@ -53,6 +53,34 @@
 
 .form-wishlist {
     position: relative;
+
+    @include breakpoint("small") {
+        float: left;
+        padding: 0 remCalc(10);
+        width: 50%;
+    }
+
+    @include breakpoint("medium") {
+        padding: 0;
+        width: auto;
+    }
+
+    @include breakpoint("large") {
+        display: inline-block;
+        margin-top: 1rem;
+    }
+
+    .button {
+        width: 100%;
+
+        @include breakpoint("medium") {
+            width: auto;
+        }
+
+        @include breakpoint("large") {
+            margin-right: spacing("half");
+        }
+    }
 }
 
 .dropdown-menu-button {

diff --git a/assets/scss/components/stencil/productView/_productView.scss b/assets/scss/components/stencil/productView/_productView.scss
@@ -335,38 +335,50 @@
         }
     }
 
-    .form-action {
+    .add-to-cart-buttons {
+        display: inline-grid;
+        float: left;
+        margin-bottom: 1rem;
+        width: 100%;
 
         @include breakpoint("small") {
-            float: left;
             padding: 0 remCalc(10);
             width: 50%;
         }
 
         @include breakpoint("medium") {
-            padding: 0;
-            width: auto;
+            padding-right: spacing("half");
+            width: 50%;
         }
 
         @include breakpoint("large") {
             display: inline-block;
             margin-top: 1rem;
+            padding-right: spacing("half");
+            width: 50%;
         }
 
         .button {
+            margin: 0;
             width: 100%;
+        }
+    }
 
-            @include breakpoint("medium") {
-                width: auto;
-            }
+    .add-to-cart-wallet-buttons {
+        margin-top: spacing("half");
 
-            @include breakpoint("large") {
-                margin-right: spacing("half");
-            }
-        }
+        button {
+            color: stencilColor("color-textSecondary");
+            display: block;
+            padding: spacing("quarter") 0;
+            text-align: center;
+            text-decoration: underline;
+            vertical-align: middle;
+            width: 100%;
 
-        .button--primary {
-            margin-right: spacing("half");
+            &:hover {
+                color: stencilColor("color-textSecondary--hover");
+            }
         }
     }
 }

diff --git a/templates/components/amp/products/product-options.html b/templates/components/amp/products/product-options.html
@@ -8,7 +8,7 @@
                     {{{dynamicComponent 'components/products/options'}}}
                 {{/each}}
             </div>
-            {{> components/products/add-to-cart}}
+            {{> components/products/add-to-cart with_wallet_buttons=false}}
             <div class="loadingOverlay"></div>
         </form>
     </div>

diff --git a/templates/components/common/wallet-buttons.html b/templates/components/common/wallet-buttons.html
@@ -0,0 +1,3 @@
+{{#if wallet_buttons}}
+    {{{wallet_buttons}}}
+{{/if}}
diff --git a/templates/components/products/add-to-cart.html b/templates/components/products/add-to-cart.html
@@ -42,15 +42,22 @@
         <p class="alertBox-column alertBox-message"></p>
     </div>
     {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
-        <div class="form-action">
-            <input
-                    id="form-action-addToCart"
-                    data-wait-message="{{lang 'products.adding_to_cart'}}"
-                    class="button button--primary"
-                    type="submit"
-                    value="{{#if product.pre_order}}{{lang 'products.pre_order'}}{{else}}{{lang 'products.add_to_cart'}}{{/if}}"
-            >
-            <span class="product-status-message aria-description--hidden">{{lang 'products.adding_to_cart'}} {{lang 'category.add_cart_announcement'}}</span>
+        <div class="add-to-cart-buttons">
+            <div class="form-action">
+                <input
+                        id="form-action-addToCart"
+                        data-wait-message="{{lang 'products.adding_to_cart'}}"
+                        class="button button--primary"
+                        type="submit"
+                        value="{{#if product.pre_order}}{{lang 'products.pre_order'}}{{else}}{{lang 'products.add_to_cart'}}{{/if}}"
+                >
+                <span class="product-status-message aria-description--hidden">{{lang 'products.adding_to_cart'}} {{lang 'category.add_cart_announcement'}}</span>
+            </div>
+            {{#if this.with_wallet_buttons}}
+                <div class="add-to-cart-wallet-buttons">
+                    {{> components/common/wallet-buttons}}
+                </div>
+            {{/if}}
         </div>
     {{/or}}
 </div>
diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
@@ -245,7 +245,7 @@ <h2 class="productView-brand">
                         <span data-product-stock>{{product.stock_level}}</span>
                     </label>
                 </div>
-                {{> components/products/add-to-cart}}
+                {{> components/products/add-to-cart with_wallet_buttons=true}}
                 {{#if product.out_of_stock}}
                     {{#if product.out_of_stock_message}}
                         {{> components/common/alert/alert-error product.out_of_stock_message}}