Payment
History
The
third button in the topline menu of the "Subscription"
content section shall display the teacher's "Payment
History" module, as shown in the mockup above. We'll
keep this simple, providing a table of up to 3 visible rows
at a time, navigable by the arrow buttons to the side. Each
row shall contain a separate payment, showing the date of
payment, the amount paid, and then a link to download the
receipt of purchase. Payments should be listed chronologically,
the most recent, first. Even if a benefactor has made the
payment, we'll still put that receipt in the teacher's payment
history here. Clicking or tapping "Download Receipt"
should open the PDF receipt in a new browser window or tab.
If the user has fewer than 3 payments blank rows shall be
shown, with both arrow buttons inactive.
The
buttons should have the standard 75% opacity on hover, 50%
opacity on click.
In
the infoline footer let's show a simple counter of which
payments in the chronological sequence are being shown,
that adjusts as the user scrolls. Not totally necessary,
of course, but a nice little thing to add to the module,
nonetheless. If 3 or fewer items, have this line say "Your
complete subscription payment history." No need to
show the counter unless there is at least one item out of
view at a time.
Styling
Checklist:
Images:
1.
Teacher Subsection Close Button: close_button_icon.svg,
24 x 24, #E2E8F7 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
2.
Teacher Subsection Close Button Hover: #E2E8F7BF
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
3.
Teacher Subsection Close Button OnClick: #E2E8F780
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
4.
Teacher Subsection Navigation Arrow Up: table_navigation_up.svg,
20 x 24 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT PROFILE" SPECS)
5.
Teacher Subsection Navigation Arrow Down: table_navigation_down.svg,
20 x 24 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT PROFILE" SPECS)
6.
Teacher Subsection Navigation Arrow: #E2E8F7
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT PROFILE"
SPECS)
7.
Teacher Subsection Navigation Arrow Hover: #E2E8F7BF
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT PROFILE"
SPECS)
8.
Teacher Subsection Navigation Arrow OnClick: #E2E8F780
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT PROFILE"
SPECS)
9.
Teacher Subsection Navigation Arrow Disabled: #E2E8F780
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT PROFILE"
SPECS)
-NOTE:
Colors 6 to 9 cover both images 4 and 5.
Text:
MOCKUP
1:
1.
Teacher Account Section Title: 3.8
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "TEACHER DASHBOARD" SPECS)
2.
Teacher Account Section Subtitle: 2.0
rem, #FFFFFFB3 (DUPLICATE,
ORIGINAL SHOWN IN "TEACHER DASHBOARD" SPECS)
3.
Teacher Subsection Title: 2.4
rem, #6F8AE2 (DUPLICATE, ORIGINAL
SHOWN IN "TEACHER DASHBOARD" SPECS)
4.
Teacher Subsection Payment History Date: 1.6
rem, #485B8C
5.
Teacher Subsection Payment History Dollar Amount:
1.6 rem, #485B8C
6.
Teacher Subsection Payment History Download Receipt
Link: 1.6 rem, #6F8AE2
7.
Teacher Subsection Payment History Download Receipt
Link Hover: 1.6 rem, #6F8AE2BF
8.
Teacher Subsection Payment History Download Receipt
Link OnClick: 1.6 rem, #6F8AE280
9.
Teacher Subsection Infoline Footer Text: 1.6
rem, #BFC6DD (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
10.
Teacher Subsection Submit Button Text: 2.2
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
11.
Teacher Subsection Submit Button Text Hover: 2.2
rem, #FFFFFFBF (DUPLICATE,
ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
12.
Teacher Subsection Submit Button Text OnClick:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
13.
Teacher Subsection Submit Button Text Disabled:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
14.
Teacher Profile Name: 2.4
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "TEACHER DASHBOARD" SPECS)
Objects:
1.
Teacher Subsection Payment History Table Row Background
1: 430 x 40, #E9F3FF
2.
Teacher Subsection Payment History Table Row Background
2: 430 x 40, #D3E5FF
3.
Teacher Subsection Payment History Table Row Background
Hover: 430 x 40, #FFE884
4.
Teacher Subsection Submit Button Background: Variable
x 50,
#6C96FF (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
5.
Teacher Subsection Submit Button Background Hover:
Variable x 50,
#6C96FFBF (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
6.
Teacher Subsection Submit Button Background OnClick:
Variable x 50,
#6C96FF80 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
|
