93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
import {
|
|
PreferencesGroup,
|
|
PreferencesSegment,
|
|
Title,
|
|
} from '@/preferences/components';
|
|
import { observer } from '@node_modules/mobx-react-lite';
|
|
import { WebApplication } from '@/ui_models/application';
|
|
import { useEffect, useState } from 'preact/hooks';
|
|
import {
|
|
GetSubscriptionResponse,
|
|
GetSubscriptionsResponse,
|
|
} from '@standardnotes/snjs/dist/@types/services/api/responses';
|
|
import { SubscriptionState } from './subscription_state';
|
|
import { CancelledSubscription } from './CancelledSubscription';
|
|
import { ActiveSubscription } from './ActiveSubscription';
|
|
import { NoSubscription } from './NoSubscription';
|
|
|
|
type Props = {
|
|
application: WebApplication;
|
|
subscriptionState: SubscriptionState;
|
|
};
|
|
|
|
type SubscriptionInformationProps = {
|
|
subscriptionState: SubscriptionState;
|
|
};
|
|
|
|
const SubscriptionInformation = ({
|
|
subscriptionState,
|
|
}: SubscriptionInformationProps) => {
|
|
const now = new Date().getTime();
|
|
const { userSubscription } = subscriptionState;
|
|
|
|
if (userSubscription && userSubscription.endsAt > now) {
|
|
return userSubscription.cancelled ? (
|
|
<CancelledSubscription subscriptionState={subscriptionState} />
|
|
) : (
|
|
<ActiveSubscription subscriptionState={subscriptionState} />
|
|
);
|
|
}
|
|
return <NoSubscription />;
|
|
};
|
|
|
|
export const Subscription = observer(({ application, subscriptionState }: Props) => {
|
|
const [error, setError] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const getSubscriptions = async () => {
|
|
try {
|
|
const result = await application.getSubscriptions();
|
|
if (result.data) {
|
|
const data = (result as GetSubscriptionsResponse).data;
|
|
subscriptionState.setAvailableSubscriptions(data!);
|
|
}
|
|
} catch (e) {
|
|
// Error in this call will only prevent the plan name from showing
|
|
}
|
|
};
|
|
const getSubscription = async () => {
|
|
try {
|
|
const result = await application.getUserSubscription();
|
|
if (!result.error && result.data) {
|
|
const data = (result as GetSubscriptionResponse).data;
|
|
const subscription = data!.subscription;
|
|
subscriptionState.setUserSubscription(subscription);
|
|
} else {
|
|
setError(true);
|
|
}
|
|
} catch (e) {
|
|
setError(true);
|
|
}
|
|
};
|
|
getSubscriptions();
|
|
getSubscription();
|
|
}, [application, subscriptionState]);
|
|
|
|
return (
|
|
<PreferencesGroup>
|
|
<PreferencesSegment>
|
|
<div className="flex flex-row items-center">
|
|
<div className="flex-grow flex flex-col">
|
|
<Title>Subscription</Title>
|
|
{error ? (
|
|
'No subscription information available.'
|
|
) : (
|
|
<SubscriptionInformation subscriptionState={subscriptionState} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</PreferencesSegment>
|
|
</PreferencesGroup>
|
|
);
|
|
});
|