updated payments styling, missing i18n

- single card payment layout - removes default payment method and collapse handling in checkout - commented in dashboard payment settings. TBD. - resolves #1408
reactioncommerce · Nov 27, 2016 · 73561ed · 73561ed
1 parent 1588b3e
commit 73561ed
Show file tree

Hide file tree

Showing 19 changed files with 111 additions and 179 deletions.
diff --git a/client/modules/core/helpers/apps.js b/client/modules/core/helpers/apps.js
@@ -72,8 +72,7 @@ export function Apps(optionHash) {
           filter["registry." + key] = value;
           registryFilter[key] = value;
         } else {
-          // perhaps not the best way to check
-          // but lets admin see all packages
+          // perhaps not the best way to check but lets admin see all packages
           if (!Reaction.hasAdminAccess()) {
             if (key !== "shopId") {
               registryFilter[key] = value;
@@ -84,15 +83,15 @@ export function Apps(optionHash) {
       }
     }
   }
+
   // fetch the packages
   Packages.find(filter).forEach((app) => {
     const matchingRegistry = _.filter(app.registry, registryFilter);
     for (registry of matchingRegistry) {
       reactionApps.push(registry);
     }
   });
-  // sort cycle to ensure order aka. is registry.priority working?
-  // .sort((a, b) => a.priority - b.priority).slice();
+  // sort cycle to ensure order aka. is registry.priority working? .sort((a, b) => a.priority - b.priority).slice();
   return reactionApps;
 }
 

diff --git a/imports/plugins/core/layout/client/templates/layout/admin/admin.js b/imports/plugins/core/layout/client/templates/layout/admin/admin.js
@@ -1,10 +1,9 @@
 import Drop from "tether-drop";
-import { Meteor } from "meteor/meteor";
-import { Blaze } from "meteor/blaze";
-import { Template } from "meteor/templating";
-import { Reaction, i18next } from "/client/api";
-import { Packages } from "/lib/collections";
-
+import {Meteor} from "meteor/meteor";
+import {Blaze} from "meteor/blaze";
+import {Template} from "meteor/templating";
+import {Reaction, i18next} from "/client/api";
+import {Packages} from "/lib/collections";
 
 Template.coreAdminLayout.onRendered(function () {
   $("body").addClass("admin");
@@ -17,31 +16,26 @@ Template.coreAdminLayout.onDestroyed(() => {
 Template.coreAdminLayout.helpers({
   shortcutButtons() {
     const instance = Template.instance();
-    const shortcuts = Reaction.Apps({
-      provides: "shortcut",
-      enabled: true,
-      container: undefined
-    });
-
+    const shortcuts = Reaction.Apps({provides: "shortcut", enabled: true});
     const items = [];
 
     if (_.isArray(shortcuts)) {
       for (const shortcut of shortcuts) {
-        items.push({
-          type: "link",
-          href: Reaction.Router.pathFor(shortcut.name),
-          className: Reaction.Router.isActiveClassName(shortcut.name),
-          icon: shortcut.icon,
-          tooltip: shortcut.label || "",
-          i18nKeyTooltip: shortcut.i18nKeyLabel,
-          tooltipPosition: "left middle"
-        });
+        if (!shortcut.container) {
+          items.push({
+            type: "link",
+            href: Reaction.Router.pathFor(shortcut.name),
+            className: Reaction.Router.isActiveClassName(shortcut.name),
+            icon: shortcut.icon,
+            tooltip: shortcut.label || "",
+            i18nKeyTooltip: shortcut.i18nKeyLabel,
+            tooltipPosition: "left middle"
+          });
+        }
       }
     }
 
-    items.push({
-      type: "seperator"
-    });
+    items.push({type: "seperator"});
 
     items.push({
       icon: "plus",
@@ -50,13 +44,7 @@ Template.coreAdminLayout.helpers({
       tooltipPosition: "left middle",
       onClick(event) {
         if (!instance.dropInstance) {
-          instance.dropInstance = new Drop({
-            target: event.currentTarget,
-            content: "",
-            constrainToWindow: true,
-            classes: "drop-theme-arrows",
-            position: "right center"
-          });
+          instance.dropInstance = new Drop({target: event.currentTarget, content: "", constrainToWindow: true, classes: "drop-theme-arrows", position: "right center"});
 
           Blaze.renderWithData(Template.createContentMenu, {}, instance.dropInstance.content);
         }
@@ -144,36 +132,20 @@ Template.coreAdminLayout.helpers({
   }
 });
 
-// Template.coreAdminLayout.events({
-//   /**
+// Template.coreAdminLayout.events({   /**
 //    * Submit sign up form
 //    * @param  {Event} event - jQuery Event
 //    * @param  {Template} template - Blaze Template
-//    * @return {void}
-//    */
-//   "click .admin-controls-quicklinks a, click .admin-controls-quicklinks button"(event) {
-//     if (this.name === "createProduct") {
-//       event.preventDefault();
-//       event.stopPropagation();
+//    * @return {void}    */   "click .admin-controls-quicklinks a, click .admin-controls-quicklinks button"(event) {
+//  if (this.name === "createProduct") {       event.preventDefault();       event.stopPropagation();
 //
-//       if (!this.dropInstance) {
-//         this.dropInstance = new Drop({
-//           target: event.target,
-//           content: "",
-//           constrainToWindow: true,
-//           classes: "drop-theme-arrows",
-//           position: "right center"
-//         });
+//       if (!this.dropInstance) {         this.dropInstance = new Drop({           target: event.target,
+// content: "",           constrainToWindow: true,           classes: "drop-theme-arrows",           position: "right
+// center"         });
 //
-//         Blaze.renderWithData(Template.createContentMenu, {}, this.dropInstance.content);
-//       }
+//         Blaze.renderWithData(Template.createContentMenu, {}, this.dropInstance.content);       }
 //
-//       this.dropInstance.open();
-//     } else if (this.route) {
-//       event.preventDefault();
-//       event.stopPropagation();
+//       this.dropInstance.open();     } else if (this.route) {       event.preventDefault();
+// event.stopPropagation();
 //
-//       Reaction.Router.go(this.name);
-//     }
-//   }
-// });
+//       Reaction.Router.go(this.name);     }   } });
diff --git a/imports/plugins/core/payments/client/checkout/payment/index.js b/imports/plugins/core/payments/client/checkout/payment/index.js
@@ -1,3 +1,2 @@
-import "./methods/cards.html";
-import "./methods/cards.js";
+import "./methods.html";
 import "./payment.html";
diff --git a/imports/plugins/core/payments/client/checkout/payment/methods.html b/imports/plugins/core/payments/client/checkout/payment/methods.html
@@ -0,0 +1,18 @@
+<template name="corePaymentMethods">
+
+  {{#each reactionApps provides='paymentMethod' enabled=true}}
+    <div class="core-payment-method-form">
+      {{> Template.dynamic template=template}}
+    </div>
+  {{else}}
+
+  <div class="alert alert-danger">
+    <span data-i18n="checkoutPayment.noPaymentMethods">No payment methods are configured.</span>
+    <a href="/dashboard">
+      <span data-i18n="checkoutPayment.configureNow">Configure now.</span>
+    </a>
+  </div>
+
+  {{/each}}
+
+</template>
diff --git a/imports/plugins/core/payments/client/checkout/payment/methods/cards.html b/imports/plugins/core/payments/client/checkout/payment/methods/cards.html
diff --git a/imports/plugins/core/payments/client/checkout/payment/methods/cards.js b/imports/plugins/core/payments/client/checkout/payment/methods/cards.js
diff --git a/imports/plugins/core/payments/client/settings/settings.html b/imports/plugins/core/payments/client/settings/settings.html
@@ -1,6 +1,6 @@
 <template name="paymentSettings">
     <div class="panel-group" id="paymentSettingsAccordian" role="tablist" aria-multiselectable="true">
-    <div class="panel panel-default">
+    <!-- <div class="panel panel-default">
       <div class="panel-heading">
         <div class="panel-title">
           <a
@@ -20,7 +20,7 @@
           {{/autoForm}}
         </div>
       </div>
-    </div>
+    </div> -->
 
     {{#each reactionApps provides='paymentSettings'}}
 

diff --git a/imports/plugins/included/default-theme/client/styles/cart/checkout.less b/imports/plugins/included/default-theme/client/styles/cart/checkout.less
@@ -97,9 +97,9 @@
 
 // patch for payment autoform's mysteriously
 // not getting the form-control class
-.core-payment-method-form.panel-body {
-  margin-left: 0;
-  padding: 10px;
+.core-payment-method-form {
+  padding-top: 5px;
+  padding-bottom: 5px;
 }
 .core-payment-method-form label {
   font-weight: lighter;

diff --git a/imports/plugins/included/payments-authnet/client/checkout/authnet.html b/imports/plugins/included/payments-authnet/client/checkout/authnet.html
@@ -1,15 +1,15 @@
 <template name="authnetPaymentForm">
   {{#autoForm schema=AuthNetPayment id="authnet-payment-form"}}
   <div class="row">
-    <div class="col-sm-12 col-lg-6 form-group{{#if afFieldIsInvalid name='payerName'}} has-error{{/if}}">
+    <div class="form-group{{#if afFieldIsInvalid name='payerName'}} has-error{{/if}}">
         <label class="control-label">{{afFieldLabelText name='payerName'}}</label>
         {{>afFieldInput name="payerName" value=cartPayerName}}
         {{#if afFieldIsInvalid name="payerName"}}
         <span class="help-block">{{afFieldMessage name="payerName"}}</span>
         {{/if}}
     </div>
 
-    <div class="col-sm-12 col-lg-6 form-group{{#if afFieldIsInvalid name='cardNumber'}} has-error{{/if}}">
+    <div class="form-group{{#if afFieldIsInvalid name='cardNumber'}} has-error{{/if}}">
         <label class="control-label">{{afFieldLabelText name='cardNumber'}}</label>
         {{>afFieldInput name="cardNumber" placeholder='XXXX XXXX XXXX XXXX'}}
         {{#if afFieldIsInvalid name="cardNumber"}}

diff --git a/imports/plugins/included/payments-braintree/client/checkout/braintree.html b/imports/plugins/included/payments-braintree/client/checkout/braintree.html
@@ -1,15 +1,15 @@
 <template name="braintreePaymentForm">
   {{#autoForm schema=BraintreePayment id="braintree-payment-form"}}
   <div class="row">
-    <div class="col-sm-12 col-lg-6 form-group{{#if afFieldIsInvalid name='payerName'}} has-error{{/if}}">
+    <div class="form-group{{#if afFieldIsInvalid name='payerName'}} has-error{{/if}}">
       <label class="control-label">{{afFieldLabelText name='payerName'}}</label>
       {{>afFieldInput name="payerName" value=cartPayerName}}
       {{#if afFieldIsInvalid name="payerName"}}
       <span class="help-block">{{afFieldMessage name="payerName"}}</span>
       {{/if}}
     </div>
 
-    <div class="col-sm-12 col-lg-6 form-group{{#if afFieldIsInvalid name='cardNumber'}} has-error{{/if}}">
+    <div class="form-group{{#if afFieldIsInvalid name='cardNumber'}} has-error{{/if}}">
       <label class="control-label">{{afFieldLabelText name='cardNumber'}}</label>
       {{>afFieldInput name="cardNumber" placeholder='XXXX XXXX XXXX XXXX'}}
       {{#if afFieldIsInvalid name="cardNumber"}}

diff --git a/imports/plugins/included/payments-example/client/checkout/example.html b/imports/plugins/included/payments-example/client/checkout/example.html
@@ -1,15 +1,15 @@
 <template name="examplePaymentForm">
   {{#autoForm schema=ExamplePayment id="example-payment-form"}}
   <div class="row">
-    <div class="col-sm-12 col-lg-6 form-group{{#if afFieldIsInvalid name='payerName'}} has-error{{/if}}">
+    <div class="form-group{{#if afFieldIsInvalid name='payerName'}} has-error{{/if}}">
         <label class="control-label">{{afFieldLabelText name='payerName'}}</label>
         {{>afFieldInput name="payerName" value=cartPayerName}}
         {{#if afFieldIsInvalid name="payerName"}}
         <span class="help-block">{{afFieldMessage name="payerName"}}</span>
         {{/if}}
     </div>
 
-    <div class="col-sm-12 col-lg-6 form-group{{#if afFieldIsInvalid name='cardNumber'}} has-error{{/if}}">
+    <div class="form-group{{#if afFieldIsInvalid name='cardNumber'}} has-error{{/if}}">
         <label class="control-label">{{afFieldLabelText name='cardNumber'}}</label>
         {{>afFieldInput name="cardNumber" placeholder='XXXX XXXX XXXX XXXX'}}
         {{#if afFieldIsInvalid name="cardNumber"}}

diff --git a/imports/plugins/included/payments-paypal/client/paypal.less b/imports/plugins/included/payments-paypal/client/paypal.less
@@ -1,12 +1,6 @@
-.paypal-checkout-button-container {
-  margin: 10px 5px;
-}
-
 .paypal-express {
   margin-top: 15px;
-  margin-bottom: 25px;
-  padding-bottom: 15px;
-  border-bottom: 1px solid #eee;
+  margin-bottom: 15px;
 }
 
 .paypal-done-error {
@@ -23,3 +17,8 @@
     margin-bottom: 2rem;
   }
 }
+// PayPal Brand Color
+.paypal-checkout-button-container .btn {
+  background-color: #009cde;
+  border-color: #009cde;
+}
diff --git a/...ts/plugins/included/payments-paypal/client/templates/checkout/express/checkoutButton.html b/...ts/plugins/included/payments-paypal/client/templates/checkout/express/checkoutButton.html
@@ -1,19 +1,23 @@
 <template name="paypalCheckoutButton">
+  <div class="paypal-express">
+    <div class="paypal-checkout-button-container {{#unless isConfigured}}hidden{{/unless}}">
+      <button class="btn btn-block btn-info js-paypal-express-checkout"><i class="fa fa-paypal"></i>
+        <span data-i18n="checkout.paymentMethod.expressButtonLabel">Checkout with PayPal Express</span>
+      </button>
+    </div>
 
-  <div class="paypal-checkout-button-container {{#unless isConfigured}}hidden{{/unless}}">
-    <button class="btn btn-warning btn-block js-paypal-express-checkout"><i class="fa fa-lock"></i>
-      <span data-i18n="checkout.paymentMethod.expressButtonLabel">Checkout with PayPal Express</span>
-    </button>
+    <div class="paypal-checkout-alert-message {{#if isConfigured}}hidden{{/if}}">
+      {{#if hasAdminAccess}}
+      <div class="alert alert-danger">
+        <i class="fa fa-paypal"></i>
+        <span data-i18n="checkout.paymentMethod.expressNotConfigured">Paypal Express misconfigured.</span>
+      </div>
+      {{else}}
+      <div class="alert alert-warning">
+        <i class="fa fa-paypal"></i>
+        <span data-i18n="checkout.paymentMethod.expressNotAvailable">Paypal Express not available</span>
+      </div>
+      {{/if}}
+    </div>
   </div>
-
-  <div class="paypal-checkout-alert-message {{#if isConfigured}}hidden{{/if}}">
-    {{#if hasAdminAccess}}
-      <i class="fa fa-paypal"></i>
-      <span data-i18n="checkout.paymentMethod.expressNotConfigured">Paypal Express Not Properly Configured.</span>
-    {{else}}
-      <i class="fa fa-paypal"></i>
-      <span data-i18n="checkout.paymentMethod.expressNotAvailable">Paypal Express Not Available</span>
-    {{/if}}
-  </div>
-
 </template>