diff --git a/packages/web/src/javascripts/Application/Application.ts b/packages/web/src/javascripts/Application/Application.ts index c01a3f8c5..a7b8d31ff 100644 --- a/packages/web/src/javascripts/Application/Application.ts +++ b/packages/web/src/javascripts/Application/Application.ts @@ -205,6 +205,10 @@ export class WebApplication extends SNApplication implements WebApplicationInter return this.isNativeMobileWeb() && this.platform === Platform.Ios } + get hideOutboundSubscriptionLinks() { + return this.isNativeIOS() + } + mobileDevice(): MobileDeviceInterface { if (!this.isNativeMobileWeb()) { throw Error('Attempting to access device as mobile device on non mobile platform') diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx index 61642f917..b137d1c74 100644 --- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx +++ b/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx @@ -29,7 +29,9 @@ const NoSubscription: FunctionComponent = ({ application }) => { {isLoadingPurchaseFlow && Redirecting you to the subscription page...} {purchaseFlowError && {purchaseFlowError}}
- + {!application.hideOutboundSubscriptionLinks && ( + + )} {application.hasAccount() && ( -
- - ) - - const SuccessPrompt = ( - <> - - Enjoy your new powered up experience. - - -
- -
- - ) - - const title = - type === PremiumFeatureModalType.UpgradePrompt ? 'Enable Advanced Features' : 'Your purchase was successful!' - - const iconName = type === PremiumFeatureModalType.UpgradePrompt ? PremiumFeatureIconName : '🎉' - const iconClass = - type === PremiumFeatureModalType.UpgradePrompt - ? `h-12 w-12 ${PremiumFeatureIconClass}` - : 'px-7 py-2 h-24 w-24 text-[50px]' - - return showModal ? ( - + return ( +
- -
- -
-
- -
-
{title}
-
- {type === PremiumFeatureModalType.UpgradePrompt ? UpgradePrompt : SuccessPrompt} + {type === PremiumFeatureModalType.UpgradePrompt && ( + + )} + + {type === PremiumFeatureModalType.UpgradeSuccess && }
- ) : null + ) } export default PremiumFeaturesModal diff --git a/packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/SuccessPrompt.tsx b/packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/SuccessPrompt.tsx new file mode 100644 index 000000000..c4422134f --- /dev/null +++ b/packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/SuccessPrompt.tsx @@ -0,0 +1,47 @@ +import Icon from '@/Components/Icon/Icon' +import { AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog' + +export const SuccessPrompt = ({ + ctaRef, + onClose, +}: { + ctaRef: React.RefObject + onClose: () => void +}) => { + return ( + <> + +
+ +
+
+ +
+
Your purchase was successful!
+
+ + + Enjoy your new powered up experience. + + +
+ +
+ + ) +} diff --git a/packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/UpgradePrompt.tsx b/packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/UpgradePrompt.tsx new file mode 100644 index 000000000..8c4778016 --- /dev/null +++ b/packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/UpgradePrompt.tsx @@ -0,0 +1,82 @@ +import { AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog' +import { useCallback } from 'react' +import { WebApplication } from '@/Application/Application' +import { openSubscriptionDashboard } from '@/Utils/ManageSubscription' +import Icon from '@/Components/Icon/Icon' +import { PremiumFeatureIconClass, PremiumFeatureIconName } from '@/Components/Icon/PremiumFeatureIcon' + +export const UpgradePrompt = ({ + featureName, + ctaRef, + application, + hasSubscription, + hasAccount, + onClose, +}: { + featureName: string + ctaRef: React.RefObject + application: WebApplication + hasSubscription: boolean + hasAccount: boolean + onClose: () => void +}) => { + const handleClick = useCallback(() => { + if (hasSubscription) { + void openSubscriptionDashboard(application) + } else if (hasAccount) { + void application.openPurchaseFlow() + } else if (window.plansUrl) { + window.location.assign(window.plansUrl) + } + onClose() + }, [application, hasSubscription, hasAccount, onClose]) + + return ( + <> + +
+ +
+
+ +
+
Enable Advanced Features
+
+ + To take advantage of {featureName} and other advanced features, upgrade + your current plan. + {application.isNativeIOS() && ( +
+
The Professional Plan costs $99.99/year and includes benefits like
+
    +
  • 100GB encrypted file storage
  • +
  • Access to all note types, including markdown, rich text, authenticator, tasks, and spreadsheets
  • +
  • Note history going back indefinitely
  • +
  • Nested folders for your tags
  • +
  • Premium support
  • +
+
+ )} +
+ +
+ +
+ + ) +}