46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import {
|
|
PreferencesGroup,
|
|
PreferencesSegment,
|
|
Title,
|
|
} from '@/preferences/components';
|
|
import { WebApplication } from '@/ui_models/application';
|
|
import { SubscriptionInformation } from './SubscriptionInformation';
|
|
import { NoSubscription } from './NoSubscription';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { FunctionComponent } from 'preact';
|
|
import { AppState } from '@/ui_models/app_state';
|
|
|
|
type Props = {
|
|
application: WebApplication;
|
|
appState: AppState;
|
|
};
|
|
|
|
export const Subscription: FunctionComponent<Props> = observer(
|
|
({ application, appState }: Props) => {
|
|
const subscriptionState = appState.subscription;
|
|
const { userSubscription } = subscriptionState;
|
|
|
|
const now = new Date().getTime();
|
|
|
|
return (
|
|
<PreferencesGroup>
|
|
<PreferencesSegment>
|
|
<div className="flex flex-row items-center">
|
|
<div className="flex-grow flex flex-col">
|
|
<Title>Subscription</Title>
|
|
{userSubscription && userSubscription.endsAt > now ? (
|
|
<SubscriptionInformation
|
|
subscriptionState={subscriptionState}
|
|
application={application}
|
|
/>
|
|
) : (
|
|
<NoSubscription application={application} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</PreferencesSegment>
|
|
</PreferencesGroup>
|
|
);
|
|
}
|
|
);
|