diff --git a/packages/thriver-accounts/lib/client/payments.js b/packages/thriver-accounts/lib/client/payments.js
new file mode 100644
index 00000000..0f8830ed
--- /dev/null
+++ b/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 0021',
+ amount: '$200.00',
+ receiptUrl: 'http://google.com',
+ }, {
+ title: 'Reoccuring Donation',
+ dateTime: '07/12/2017',
+ type: 'donation-reoccuring',
+ card: 'Paid using card ending in 0021',
+ 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 0021',
+ amount: '$35.00',
+ receiptUrl: 'http://google.com',
+ }],
+});
+
+
+Template.actpayments.events({
+ 'click .act-payment a.close': (event) => {
+ event.preventDefault();
+ $(event.target).replaceWith('
Your reoccuring payment has been canceled.
');
+ },
+});
diff --git a/packages/thriver-accounts/lib/templates/payments.html b/packages/thriver-accounts/lib/templates/payments.html
new file mode 100644
index 00000000..be10ac6b
--- /dev/null
+++ b/packages/thriver-accounts/lib/templates/payments.html
@@ -0,0 +1,26 @@
+
+
+
+ {{#if payments}}
+ {{#each payments}}
+ -
+
+
+
{{title}}
+ {{#if event}}
+
{{event}}
+ {{/if}}
+
{{amount}}
+
{{{card}}}
+ {{#if receiptUrl}}
+
Download receipt
+ {{/if}}
+ {{#if close}}
{{close}}{{/if}}
+
+
+ {{/each}}
+ {{else}}
+ - {{none}}
+ {{/if}}
+
+
\ No newline at end of file
diff --git a/packages/thriver-accounts/lib/templates/payments.less b/packages/thriver-accounts/lib/templates/payments.less
new file mode 100644
index 00000000..eb2819d1
--- /dev/null
+++ b/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";
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/thriver-accounts/package.js b/packages/thriver-accounts/package.js
index ffd969b2..90c14b04 100644
--- a/packages/thriver-accounts/package.js
+++ b/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
diff --git a/packages/thriver-core-components/lib/component-sidebar/aside.js b/packages/thriver-core-components/lib/component-sidebar/aside.js
index b25b85b5..df324f90 100755
--- a/packages/thriver-core-components/lib/component-sidebar/aside.js
+++ b/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',
diff --git a/packages/thriver-core-styles/lib/styles/options.import.less b/packages/thriver-core-styles/lib/styles/options.import.less
index 2343d5a4..2cd31c77 100755
--- a/packages/thriver-core-styles/lib/styles/options.import.less
+++ b/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;}