shihaam
aeb59e8eda
Build self-hosted HTTP Toolkit / build (linux-x64, ubuntu-latest, true) (push) Canceled after 0s
Build self-hosted HTTP Toolkit / build (macos-arm64, macos-latest, true) (push) Canceled after 0s
Build self-hosted HTTP Toolkit / build (windows-x64, windows-latest, false) (push) Canceled after 0s
Build self-hosted HTTP Toolkit / release (push) Canceled after 0s
141 lines
6.7 KiB
Diff
141 lines
6.7 KiB
Diff
diff --git a/src/components/settings/settings-page.tsx b/src/components/settings/settings-page.tsx
|
|
index ab867e9f..dae383cf 100644
|
|
--- a/src/components/settings/settings-page.tsx
|
|
+++ b/src/components/settings/settings-page.tsx
|
|
@@ -142,135 +142,10 @@ class SettingsPage extends React.Component<SettingsPageProps> {
|
|
</SettingsPagePlaceholder>;
|
|
}
|
|
|
|
- // ! because we know this is set, as we have a paid user
|
|
- const sub = userSubscription!;
|
|
-
|
|
return <SettingsPageScrollContainer>
|
|
<SettingPageContainer>
|
|
<SettingsHeading>Settings</SettingsHeading>
|
|
|
|
- <CollapsibleCard {...cardProps.account}>
|
|
- <header>
|
|
- <CollapsibleCardHeading onCollapseToggled={
|
|
- cardProps.account.onCollapseToggled
|
|
- }>
|
|
- Account
|
|
- </CollapsibleCardHeading>
|
|
- </header>
|
|
- <AccountDetailsContainer>
|
|
- <ContentLabel>
|
|
- Account email
|
|
- </ContentLabel>
|
|
- <ContentValue>
|
|
- { userEmail }
|
|
- </ContentValue>
|
|
-
|
|
- <ContentLabel>
|
|
- Subscription status
|
|
- </ContentLabel>
|
|
- <ContentValue>
|
|
- {
|
|
- ({
|
|
- 'active': 'Active',
|
|
- 'trialing': 'Active (trial)',
|
|
- 'past_due': <strong
|
|
- title={dedent`
|
|
- Your subscription payment failed, and will be reattempted.
|
|
- If retried payments fail your subscription will be cancelled.
|
|
- `}
|
|
- >Past due <WarningIcon /></strong>,
|
|
- 'deleted': sub.expiry && isFuture(sub.expiry)
|
|
- ? `Active (until ${sub.expiry.toLocaleDateString()})`
|
|
- : 'Cancelled'
|
|
- }[sub.status]) || 'Unknown'
|
|
- }
|
|
- { isAccountUpdateInProcess &&
|
|
- <AccountUpdateSpinner />
|
|
- }
|
|
- </ContentValue>
|
|
-
|
|
- <ContentLabel>
|
|
- Subscription plan
|
|
- </ContentLabel>
|
|
- <ContentValue>
|
|
- {
|
|
- subscriptionPlans.state === 'fulfilled'
|
|
- ? (subscriptionPlans.value as SubscriptionPlans)[sub.sku]?.name
|
|
- // If the accounts API is unavailable for plan metadata for some reason, we can just
|
|
- // format the raw SKU to get something workable, no worries:
|
|
- : _.startCase(sub.sku)
|
|
- }
|
|
- </ContentValue>
|
|
-
|
|
- <ContentLabel>
|
|
- {
|
|
- ({
|
|
- 'active': 'Next renews',
|
|
- 'trialing': 'Renews',
|
|
- 'past_due': 'Next payment attempt',
|
|
- 'deleted': 'Ends',
|
|
- }[sub.status]) || 'Current period ends'
|
|
- }
|
|
- </ContentLabel>
|
|
- <ContentValue>
|
|
- {
|
|
- distanceInWordsStrict(new Date(), sub.expiry, {
|
|
- addSuffix: true,
|
|
- partialMethod: 'round'
|
|
- })
|
|
- } ({
|
|
- format(sub.expiry.toString(), 'Do [of] MMMM YYYY')
|
|
- })
|
|
- </ContentValue>
|
|
- </AccountDetailsContainer>
|
|
-
|
|
- <AccountControls>
|
|
- { sub.lastReceiptUrl &&
|
|
- <SettingsButtonLink
|
|
- href={ sub.lastReceiptUrl }
|
|
- target='_blank'
|
|
- rel='noreferrer noopener'
|
|
- >
|
|
- View latest invoice
|
|
- </SettingsButtonLink>
|
|
- }
|
|
- { canManageSubscription && <>
|
|
- { sub.updateBillingDetailsUrl &&
|
|
- <SettingsButtonLink
|
|
- href={sub.updateBillingDetailsUrl}
|
|
- target='_blank'
|
|
- rel='noreferrer noopener'
|
|
- highlight={sub.status === 'past_due'}
|
|
- >
|
|
- Update billing details
|
|
- </SettingsButtonLink>
|
|
- }
|
|
- <SettingsButton
|
|
- onClick={this.confirmSubscriptionCancellation}
|
|
- disabled={isAccountUpdateInProcess}
|
|
- >
|
|
- Cancel subscription
|
|
- { isAccountUpdateInProcess &&
|
|
- <AccountUpdateSpinner />
|
|
- }
|
|
- </SettingsButton>
|
|
- </> }
|
|
- <SettingsButton onClick={logOut}>Log out</SettingsButton>
|
|
- </AccountControls>
|
|
-
|
|
- <AccountContactFooter>
|
|
- Questions? Email <strong>billing@httptoolkit.com</strong>
|
|
- </AccountContactFooter>
|
|
- </CollapsibleCard>
|
|
-
|
|
- {/*
|
|
- The above shows for both active paid users, and recently paid users whose most recent
|
|
- payments failed. For those users, we drop other Pro features, but keep the settings
|
|
- UI so they can easily log out, update billing details or cancel fully.
|
|
-
|
|
- The rest is active paid users only:
|
|
- */}
|
|
-
|
|
{ user.isPaidUser() && <>
|
|
{
|
|
_.isString(serverVersion.value) &&
|