Created Payments UI under Accounts

packages/thriver-accounts/lib/client/payments.js

@@ -0,0 +1,37 @@
+Template.actpayments.helpers({
+  heading: 'Donations & Payments',
+  none: 'You have not made any donations or payments at this time.',
+  payments: [{
+    title: 'One-Time Donation',
+    dateTime: '01/02/2017',
+    type: 'donation-single',
+    card: 'Paid using card ending in <b>0021</b>',
+    amount: '$200.00',
+    receiptUrl: 'http://google.com',
+  }, {
+    title: 'Reoccuring Donation',
+    dateTime: '07/12/2017',
+    type: 'donation-reoccuring',
+    card: 'Paid using card ending in <b>0021</b>',
+    amount: '$80.00',
+    close: 'Cancel Reoccuring payment',
+    receiptUrl: 'http://google.com',
+  }, {
+    title: 'Event Registration',
+    event: 'WCASA Annual Meeting', // Only for events
+    href: 'http://google.com', // Only for events
+    dateTime: '11/05/2017',
+    type: 'payment-event',
+    card: 'Paid using card ending in <b>0021</b>',
+    amount: '$35.00',
+    receiptUrl: 'http://google.com',
+  }],
+});
+
+
+Template.actpayments.events({
+  'click .act-payment a.close': (event) => {
+    event.preventDefault();
+    $(event.target).replaceWith('<p>Your reoccuring payment has been canceled.</p>');
+  },
+});

packages/thriver-accounts/lib/templates/payments.html

@@ -0,0 +1,26 @@
+<template name="actpayments">
+  <header><h2>{{heading}}</h2></header>
+  <ul class="stripes">
+    {{#if payments}}
+      {{#each payments}}
+        <li class="act-payment {{type}}">
+          <div class="inner-container">
+            <time class="dateMeta" datetime="{{dateTime}}">{{dateTime}}</time>
+            <h4 class="text">{{title}}</h4>
+            {{#if event}}
+              <a class="event-link" href="{{href}}">{{event}}</a>
+            {{/if}}
+            <p class="amount">{{amount}}</p>
+            <p class="card">{{{card}}}</p>
+            {{#if receiptUrl}}
+              <a class="receipt" href="{{receiptUrl}}"><i class="fa fa-file-text-o" aria-hidden="true"></i> Download receipt</a>
+            {{/if}}
+            {{#if close}}<a class="close" href="#">{{close}}</a>{{/if}}
+          </div>
+        </li>
+      {{/each}}
+    {{else}}
+      <li class="none">{{none}}</li>
+    {{/if}}
+  </ul>
+</template>

packages/thriver-accounts/lib/templates/payments.less

@@ -0,0 +1,61 @@
+article[data-id="payments"]{
+  a.receipt{ display: block; color:#fff; margin-bottom: 5px;}
+  text-align: left;
+  p, h4{ color: #fff; }
+  h4.text{ font-weight: bold; }
+  li.act-payment{
+    padding: 20px 150px 20px 150px;
+    @media (max-width:767px){ padding: 20px; }
+    .inner-container{ position: relative; }
+    .inner-container:before{
+      content: "";
+      font-family: "FontAwesome";
+      display: block;
+      position: absolute;
+      font-size: 28px;
+      color: #00b7c5;
+      left: -45px;
+      top: 10px;
+    }
+  }
+  li.none{ padding: 36px; }
+  li.payment-event .inner-container:before{ content: "\f145"; }
+  li.donation-single .inner-container:before{
+    content: "\f004";
+  }
+  li.donation-reoccuring .inner-container:before{
+    content: "\f004";
+    color: lighten(#f1592a,10%);
+  }
+
+  p.amount{
+    clear: both;
+    background: rgba(0,0,0,0.25);
+    font-weight: bold;
+    margin: 5px 0px;
+    display: inline-block;
+    padding: 5px 10px;
+  }
+  p.card{
+    margin-bottom: 5px;
+    font-style: oblique;
+    opacity: 0.8;
+  }
+  .event-link{
+    color: #00b7c5;
+    display: block;
+    font-weight: bold;
+  }
+  a.close{
+    color: #f1592a;
+    display: block;
+    padding: 5px 0px;
+    font-size: 80%;
+    border-top: 1px solid rgba(0,0,0,0.15);
+    &:before{
+      font-family: "FontAwesome";
+      margin-right: 5px;
+      content: "\f057";
+    }
+  }
+}

packages/thriver-accounts/package.js

@@ -37,9 +37,11 @@ Package.onUse((api) => {
     'lib/templates/requests.html',
     'lib/templates/signin.html',
     'lib/templates/subscriptions.html',
+    'lib/templates/payments.html',
 
     // Styles
     'lib/templates/user.less',
+    'lib/templates/payments.less',
 
     // Helpers and methods
     'lib/client/user.js',
@@ -50,6 +52,7 @@ Package.onUse((api) => {
     'lib/client/requests.js',
     'lib/client/signin.js',
     'lib/client/subscriptions.js',
+    'lib/client/payments.js',
   ], ['client']);
 
   // Server processing

packages/thriver-core-components/lib/component-sidebar/aside.js

@@ -4,7 +4,7 @@ Template.aside.helpers({
     title: 'Account Details',
     icon: 'user',
     id: 'account',    // Sets the ID of the sidebar which gets targeted by utility nav items
-    width: 500,       // Sets the sidebar width & body class
+    width: 600,       // Sets the sidebar width & body class
     position: 'left', // Which Direction the sidebar appears from
     class: 'top',     // Style. accepts 'left' and 'top'
     tabs: [{          // If sidebar has tabs: use this property
@@ -22,6 +22,11 @@ Template.aside.helpers({
       icon: 'cal',
       id: 'events',
       template: 'eventsRegistered',
+    }, {
+      title: 'Payments',
+      icon: 'cal',
+      id: 'payments',
+      template: 'actpayments',
     }],
   }, {
     title: 'Notifications',

packages/thriver-core-styles/lib/styles/options.import.less

@@ -209,7 +209,7 @@ main > section{
 // A data-width is applied to a button containing the data-sidebar and data-position data-values.
 // The data-width controls the canvas offset and off-canvas element size.
 // The data-widths applied on the toggle element also need to be declare here.
-@offCanvasWidths : 356,500,700,700,1100;
+@offCanvasWidths : 356,500,600,700,1100;
 
 //Color Schematics (Demo Content/Oprphans) Need Homes
 body{background-color: @bodyBgColor;}