@let planViewModels = planViewModels$ | async; @let selectedPlanViewModel = selectedPlanViewModel$ | async; @let loading = loading$ | async; @let error = error$ | async; @let creating = creating$ | async; @let updating = updating$ | async; @let preview = subscriptionPreview$ | async; @let hasFreePlans = hasFreePlan$ | async; @let hasPaidPlans = hasPaidPlans$ | async; @let currentSubscription = currentSubscription$ | async; @let hasExistingSubscription = hasExistingSubscription$ | async; @if (showKeyboardHints) {
Keyboard Shortcuts
Esc Close dialog
Ctrl + Enter Submit form
? Toggle this help
}

{{ plugin?.name || 'Plugin' }}

{{ plugin?.description || 'Choose a subscription plan to continue' }}

@if (hasExistingSubscription && currentSubscription) { You have an active {{ currentSubscription.plan.type | titlecase }} subscription. {{ currentSubscription.plan.id === selectedPlanViewModel?.id ? 'Select a different plan to upgrade or downgrade.' : 'Select a plan below to upgrade or downgrade.' }} }
@if (loading) {

{{ getLoadingMessage() | async }}

@for (i of [1, 2, 3]; track i) {
}
} @else if (error && !creating) {
Failed to Load Subscription Plans

{{ error }}

Possible solutions:

  • Check your internet connection
  • Try refreshing the page
  • Contact support if the problem persists
} @else {
@if (error && !loading) {
Subscription Failed

{{ error }}

 }
Choose Your Plan
@if (planViewModels && planViewModels.length > 1) { }
@if (hasFreePlans || hasPaidPlans) {
@if (hasFreePlans) {
Free option available
} @if (hasPaidPlans) { }
Select a card to update the billing preview below.
} @if (planViewModels && planViewModels.length > 0) {
@for (planViewModel of planViewModels; track planViewModel.id) {
@if (currentSubscription && currentSubscription.plan.id !== planViewModel.id) { @if (isPlanUpgrade(currentSubscription.plan, planViewModel)) {
Upgrade
} @else {
Downgrade
} } @if (planViewModel.billingPeriod === PluginBillingPeriod.YEARLY) { @let savings = calculateYearlySavings(planViewModel) | async; @if (savings && savings.percentage > 0) {
Save {{ savings.percentage }}%
} }
}
} @else {
No Subscription Plans Available

This plugin doesn't have any subscription plans configured yet. You may still be able to install it for free.

@if (canProceedWithoutSubscription$ | async) { }
}
@if (selectedPlanViewModel) {
This {{ selectedPlanViewModel.type | titlecase }} plan will apply to Individual User
} @if (selectedPlanViewModel && !selectedPlanViewModel.isFree) {
Billing Options
@for (period of [PluginBillingPeriod.MONTHLY, PluginBillingPeriod.YEARLY]; track period) { }
@if (promoCodeStatus) {
{{ promoCodeStatus.message }}
}
}
Enable auto-renew so your subscription stays active without interruption
@if (selectedPlanViewModel) {
I agree to the Terms of Service and Privacy Policy @if (subscriptionForm.get('agreeToTerms')?.invalid && subscriptionForm.get('agreeToTerms')?.touched) {
You must agree to the terms to continue
}
}
}
@if (canProceedWithoutSubscription$ | async) { }
@if (error && !loading) { } @if (currentSubscription && selectedPlanViewModel && currentSubscription.plan.id === selectedPlanViewModel.id) { } @else if (hasExistingSubscription && selectedPlanViewModel) { } @else { }