Skip to content

Commit 66d36a7

Browse files
iisaiisa
authored
Active plans list (#16)
WEBDEV-7277
1 parent a6a6ab9 commit 66d36a7

File tree

12 files changed

+511
-91
lines changed

12 files changed

+511
-91
lines changed

‎demo/data-recent-donations.json‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎demo/index.html‎

Lines changed: 88 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1818
font-size: 14px;
1919
line-height: 1.42857143;
20+
21+
/* css vars for web component */
22+
--one-column-view-max-width: 500px;
2023
}
2124

2225
body .dev-tools {
@@ -38,32 +41,101 @@
3841
<div class="dev-tools">
3942
<div id="options">
4043
<button id="toggle-receipts">Toggle receipts</button>
41-
<button id="toggle-buttons">Toggle button types</button>
44+
<button id="clear-updates">Clear updates</button>
45+
<button id="toggle-plans">Toggle plans</button>
4246

4347
<p id="interaction-status-area" style="min-height: 50px;margin: 10px;"></p>
4448
</div>
4549
</div>
4650

4751
<div id="demo">
4852
<style>
49-
iaux-monthly-giving-circle {
53+
ia-monthly-giving-circle {
5054
display: block;
5155
margin: 0 auto;
5256
max-width: 800px;
5357
}
5458
</style>
55-
<iaux-monthly-giving-circle></iaux-monthly-giving-circle>
59+
<ia-monthly-giving-circle></ia-monthly-giving-circle>
5660
</div>
5761

5862
<script type="module" src="../dist/src/monthly-giving-circle.js"></script>
5963
<script type="module">
60-
import { Receipt } from '../dist/src/models/receipt.js';
64+
import { MonthlyPlan, Receipt } from '../dist/index.js';
6165

6266
let updateNotices = [];
6367

68+
const plans = {
69+
"41": {
70+
"token": "Acbdcdcadsfdasf.1234alphanumeric.3foobarXyZ",
71+
"amount": 10,
72+
"start_date": "2024-05-22 00:00:00",
73+
"is_test": true,
74+
"btdata": {
75+
"billingDayOfMonth": 22,
76+
"nextBillingDate": {
77+
"date": "2024-08-22 00:00:00.000000",
78+
"timezone_type": 3,
79+
"timezone": "UTC"
80+
},
81+
"status": "Active",
82+
"paymentMethodType": "Paypal",
83+
"last4": null,
84+
"cardType": null,
85+
"expirationMonth": null,
86+
"expirationYear": null,
87+
"paypalEmail": "donations-buyer@archive.org"
88+
}
89+
},
90+
"23764": {
91+
"token": "Acbdcdcadsfdasf.1234alphanumeric.3foobar",
92+
"amount": 5,
93+
"start_date": "2022-12-09 00:00:00",
94+
"is_test": true,
95+
"btdata": {
96+
"billingDayOfMonth": 9,
97+
"nextBillingDate": {
98+
"date": "2024-09-09 00:00:00.000000",
99+
"timezone_type": 3,
100+
"timezone": "UTC"
101+
},
102+
"status": "Active",
103+
"paymentMethodType": "creditCard",
104+
"last4": "1111",
105+
"cardType": "Visa",
106+
"expirationMonth": "12",
107+
"expirationYear": "2023"
108+
}
109+
},
110+
"35406": {
111+
"token": "Acbdcdcadsfdasf.1234alphanumeric.3foobar444999sparklingCider",
112+
"amount": 5,
113+
"currency": "USD",
114+
"start_date": "2024-07-01 00:00:00",
115+
"is_test": true,
116+
"btdata": {
117+
"billingDayOfMonth": 22,
118+
"nextBillingDate": {
119+
"date": "2024-08-22 00:00:00.000000",
120+
"timezone_type": 3,
121+
"timezone": "UTC"
122+
},
123+
"status": "Active",
124+
"paymentMethodType": "Venmo",
125+
"last4": null,
126+
"cardType": null,
127+
"expirationMonth": null,
128+
"expirationYear": null,
129+
"venmoUsername": "venmojoe"
130+
}
131+
}
132+
};
133+
134+
const plansArray = Object.keys(plans).map((key) => new MonthlyPlan(plans[key]));
135+
64136
const receiptsData = [
65137
new Receipt({
66-
138+
currency: 'USD',
67139
net_amount: 9999.99,
68140
total_amount: 9999.99,
69141
fee_amount: 0,
@@ -118,10 +190,11 @@
118190

119191
let showReceipts = true;
120192

121-
const mgcComponent = document.querySelector('iaux-monthly-giving-circle');
193+
const mgcComponent = document.querySelector('ia-monthly-giving-circle');
122194

123195
// load start data
124196
mgcComponent.receipts = receiptsData;
197+
mgcComponent.plans = plansArray;
125198

126199
// event handlers
127200
mgcComponent.addEventListener('EmailReceiptRequest', (e) => {
@@ -163,6 +236,15 @@
163236

164237
showReceipts = true;
165238
});
239+
document.getElementById('clear-updates').addEventListener('click', async () => {
240+
updateNotices = [];
241+
mgcComponent.updates = updateNotices;
242+
await mgcComponent.updateComplete;
243+
});
244+
document.getElementById('toggle-plans').addEventListener('click', async () => {
245+
mgcComponent.plans = mgcComponent.plans.length ? [] : plansArray;
246+
await mgcComponent.updateComplete;
247+
});
166248
</script>
167249
</body>
168250
</html>

‎index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { MonthlyGivingCircle } from './src/monthly-giving-circle';
2-
export type { anUpdate } from './src/monthly-giving-circle';
2+
export type { AnUpdate } from './src/monthly-giving-circle';
33
export { Receipt } from './src/models/receipt';
4+
export { MonthlyPlan } from './src/models/plan';

‎src/models/plan.ts‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
type BtData = {
2+
billingDayOfMonth: number;
3+
nextBillingDate: {
4+
date: string;
5+
timezone_type: number;
6+
timezone: string;
7+
};
8+
status: string; // active, inactive
9+
paymentMethodType: string; // cc, paypal, venmo, etc
10+
last4: string | null;
11+
cardType: string | null;
12+
expirationMonth: string | null;
13+
expirationYear: string | null;
14+
paypalEmail?: string;
15+
venmoUsername?: string;
16+
};
17+
18+
type Plan = {
19+
token: string;
20+
amount: number;
21+
currency: string;
22+
start_date: string; // UTC
23+
is_test: boolean;
24+
btdata: BtData;
25+
oldAmount?: number;
26+
oldDate?: string;
27+
oldPaymentMethod?: string;
28+
isCancelled?: boolean;
29+
};
30+
31+
export class MonthlyPlan {
32+
plan: Plan;
33+
34+
currency: string;
35+
36+
payment: BtData;
37+
38+
constructor(plan: Plan) {
39+
this.plan = plan;
40+
this.payment = plan.btdata;
41+
this.currency = plan.currency ?? 'USD'; // not in data
42+
}
43+
44+
get id(): string {
45+
// use token as unique id
46+
return this.plan.token;
47+
}
48+
49+
get currencySymbol(): string {
50+
return this.currency === 'USD' ? '$' : '';
51+
}
52+
53+
get amount(): number {
54+
return this.plan.amount;
55+
}
56+
57+
get startDate(): string {
58+
const date = new Date(this.plan.start_date);
59+
return date.toLocaleDateString();
60+
}
61+
62+
get nextBillingDate(): string {
63+
const nextBillingDate = new Date(
64+
this.payment.nextBillingDate.date
65+
).toLocaleDateString(undefined, {
66+
year: 'numeric',
67+
month: 'short',
68+
day: 'numeric',
69+
});
70+
71+
return nextBillingDate ?? 'not found';
72+
}
73+
74+
get isTest(): boolean {
75+
return this.plan.is_test;
76+
}
77+
}
78+
79+
/*
80+
81+
{
82+
"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTczODYxNTY3NS41ODA4MTcsIm5iZiI6MTczODYxNTYxNS41ODA4MTcsImV4cCI6MTczODYxNjI3NS41ODA4MTcsImtleSI6eyJwaWQiOiJkd2NrN20iLCJjaWQiOjgwMzUzOCwiYW1vdW50Ijo1LCJwYXltZW50TWV0aG9kVG9rZW4iOiJxMXllYndoaiIsImN1c3RvbWVySWQiOiI4NTQ2MTk4MzUifSwidXNlciI6IkBpc2EtYXQtdGhlLWFyY2hpdmUifQ.TYlkU1ZZLHmj2ahrkTV7JGLmpCPN4BcOeDFPiXVj0pM",
83+
"amount": 5,
84+
"currency": "USD",
85+
"start_date": "2022-12-09 00:00:00",
86+
"contribution_status_id": 5,
87+
"is_test": true,
88+
"btdata": {
89+
"billingDayOfMonth": 9,
90+
"nextBillingDate": {
91+
"date": "2025-02-09 00:00:00.000000",
92+
"timezone_type": 3,
93+
"timezone": "UTC"
94+
},
95+
"status": "Active",
96+
"paymentMethodType": "creditCard",
97+
"last4": "1111",
98+
"cardType": "Visa",
99+
"expirationMonth": "12",
100+
"expirationYear": "2023"
101+
}
102+
}
103+
*/

0 commit comments

Comments
 (0)