-
Notifications
You must be signed in to change notification settings - Fork 114
/
use-payment.js
83 lines (72 loc) · 2.84 KB
/
use-payment.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { useState, useEffect, useMemo } from 'react';
import { userBillingSettings } from '../lib/api';
import constants from '../lib/constants';
import { freePlan, plans } from '../components/contexts/plansContext';
/**
* @typedef {import('../components/contexts/plansContext').Plan} Plan
* @typedef {import('../components/contexts/plansContext').StorageSubscription} StorageSubscription
*/
export const usePayment = () => {
/**
* @typedef {object} PaymentSettings
* @property {null|{id: string}} paymentMethod
* @property {object} subscription
* @property {StorageSubscription|null} subscription.storage
*/
const [needsFetchPaymentSettings, setNeedsFetchPaymentSettings] = useState(true);
const [, setIsFetchingPaymentSettings] = useState(false);
const [paymentSettings, setPaymentSettings] = useState(/** @type {undefined|PaymentSettings} */ (undefined));
// subcomponents that save a new plan can set this, which will trigger a re-fetch but the
// ui can optimistically show the new value while the refetch happens.
const [optimisticCurrentPlan, setOptimisticCurrentPlan] = useState(/** @type {Plan|undefined} */ (undefined));
// fetch payment settings whenever needed
useEffect(() => {
async function loadPaymentSettings() {
if (!needsFetchPaymentSettings) {
return;
}
setIsFetchingPaymentSettings(true);
setNeedsFetchPaymentSettings(false);
try {
setPaymentSettings(await userBillingSettings(constants.TERMS_OF_SERVICE_VERSION));
setOptimisticCurrentPlan(undefined); // no longer use previous optimistic value
} finally {
setIsFetchingPaymentSettings(false);
}
}
loadPaymentSettings();
}, [needsFetchPaymentSettings]);
// whenever the optimisticCurrentPlan is set, enqueue a fetch of actual payment settings
useEffect(() => {
if (optimisticCurrentPlan) {
setNeedsFetchPaymentSettings(true);
}
}, [optimisticCurrentPlan]);
const currentPlan = useMemo(() => {
if (typeof optimisticCurrentPlan !== 'undefined') {
return optimisticCurrentPlan;
}
if (typeof paymentSettings === 'undefined') {
// haven't fetched paymentSettings yet.
return undefined;
}
const storageSubscription = paymentSettings.subscription.storage;
if (!storageSubscription) {
return freePlan;
}
const matchingStandardPlan = plans.find(plan => {
return plan.id === storageSubscription.price;
});
if (!matchingStandardPlan && typeof storageSubscription.price !== 'string') {
return storageSubscription.price;
}
return matchingStandardPlan;
}, [paymentSettings, optimisticCurrentPlan]);
const savedPaymentMethod = useMemo(() => {
return paymentSettings?.paymentMethod;
}, [paymentSettings]);
return {
savedPaymentMethod: savedPaymentMethod,
currentPlan: currentPlan,
};
};