From 54cf185bee48759839a022b8dcbad6f14c5516ec Mon Sep 17 00:00:00 2001 From: EoghanTadhg Date: Sat, 8 Jul 2017 15:11:51 -0700 Subject: [PATCH 1/2] Created Payments UI w/ event to cancel reoccuring payment to replace html content. Fixes #260 --- .../thriver-accounts/lib/client/payments.js | 34 +++++++++++ .../lib/templates/payments.html | 23 +++++++ .../lib/templates/payments.less | 60 +++++++++++++++++++ packages/thriver-accounts/package.js | 3 + .../lib/component-sidebar/aside.js | 7 ++- .../lib/styles/options.import.less | 2 +- 6 files changed, 127 insertions(+), 2 deletions(-) create mode 100644 packages/thriver-accounts/lib/client/payments.js create mode 100644 packages/thriver-accounts/lib/templates/payments.html create mode 100644 packages/thriver-accounts/lib/templates/payments.less diff --git a/packages/thriver-accounts/lib/client/payments.js b/packages/thriver-accounts/lib/client/payments.js new file mode 100644 index 00000000..0dc66275 --- /dev/null +++ b/packages/thriver-accounts/lib/client/payments.js @@ -0,0 +1,34 @@ +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', + }, { + title: 'Reoccuring Donation', + dateTime: '07/12/2017', + type: 'donation-reoccuring', + card: 'Paid using card ending in 0021', + amount: '$80.00', + close: 'Cancel Reoccuring payment', + }, { + 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', + }], +}); + + +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..70ce61c4 --- /dev/null +++ b/packages/thriver-accounts/lib/templates/payments.html @@ -0,0 +1,23 @@ + \ 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..88fa435e --- /dev/null +++ b/packages/thriver-accounts/lib/templates/payments.less @@ -0,0 +1,60 @@ +article[data-id="payments"]{ + 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;} From ee8329cc1cfa5596d5e85c3471658f4674ac8787 Mon Sep 17 00:00:00 2001 From: EoghanTadhg Date: Sun, 17 Sep 2017 10:23:30 -0700 Subject: [PATCH 2/2] Added receipt download into data strutrue, styled and placed in payments ui template. --- packages/thriver-accounts/lib/client/payments.js | 3 +++ packages/thriver-accounts/lib/templates/payments.html | 5 ++++- packages/thriver-accounts/lib/templates/payments.less | 1 + 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/thriver-accounts/lib/client/payments.js b/packages/thriver-accounts/lib/client/payments.js index 0dc66275..0f8830ed 100644 --- a/packages/thriver-accounts/lib/client/payments.js +++ b/packages/thriver-accounts/lib/client/payments.js @@ -7,6 +7,7 @@ Template.actpayments.helpers({ type: 'donation-single', card: 'Paid using card ending in 0021', amount: '$200.00', + receiptUrl: 'http://google.com', }, { title: 'Reoccuring Donation', dateTime: '07/12/2017', @@ -14,6 +15,7 @@ Template.actpayments.helpers({ 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 @@ -22,6 +24,7 @@ Template.actpayments.helpers({ type: 'payment-event', card: 'Paid using card ending in 0021', amount: '$35.00', + receiptUrl: 'http://google.com', }], }); diff --git a/packages/thriver-accounts/lib/templates/payments.html b/packages/thriver-accounts/lib/templates/payments.html index 70ce61c4..be10ac6b 100644 --- a/packages/thriver-accounts/lib/templates/payments.html +++ b/packages/thriver-accounts/lib/templates/payments.html @@ -8,10 +8,13 @@

{{title}}

{{#if event}} - {{event}} + {{event}} {{/if}}

{{amount}}

{{{card}}}

+ {{#if receiptUrl}} + Download receipt + {{/if}} {{#if close}}{{close}}{{/if}} diff --git a/packages/thriver-accounts/lib/templates/payments.less b/packages/thriver-accounts/lib/templates/payments.less index 88fa435e..eb2819d1 100644 --- a/packages/thriver-accounts/lib/templates/payments.less +++ b/packages/thriver-accounts/lib/templates/payments.less @@ -1,4 +1,5 @@ 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; }