chore(web): put sign-in email notifications setting under paywall

standardnotes · Mar 8, 2023 · 193a418 · 193a418
1 parent e27491e
commit 193a418
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 18 deletions.
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/AccountPreferences.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/AccountPreferences.tsx
@@ -9,7 +9,7 @@ import SignOutWrapper from './SignOutView'
 import FilesSection from './Files'
 import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
 import SubscriptionSharing from './SubscriptionSharing/SubscriptionSharing'
-import Email from './Email'
+import Email from './Email/Email'
 import DeleteAccount from '@/Components/Preferences/Panes/Account/DeleteAccount'
 
 type Props = {

diff --git a/...nents/Preferences/Panes/Account/Email.tsx → ...Preferences/Panes/Account/Email/Email.tsx b/...nents/Preferences/Panes/Account/Email.tsx → ...Preferences/Panes/Account/Email/Email.tsx
@@ -1,4 +1,10 @@
-import { MuteMarketingEmailsOption, MuteSignInEmailsOption, SettingName } from '@standardnotes/snjs'
+import {
+  FeatureIdentifier,
+  FeatureStatus,
+  MuteMarketingEmailsOption,
+  MuteSignInEmailsOption,
+  SettingName,
+} from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useState } from 'react'
 
@@ -10,6 +16,7 @@ import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Constants/Strings'
 import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
 import Spinner from '@/Components/Spinner/Spinner'
+import NoProSubscription from '../NoProSubscription'
 
 type Props = {
   application: WebApplication
@@ -20,6 +27,9 @@ const Email: FunctionComponent<Props> = ({ application }: Props) => {
   const [marketingEmailsMutedValue, setMarketingEmailsMutedValue] = useState(MuteMarketingEmailsOption.NotMuted)
   const [isLoading, setIsLoading] = useState(true)
 
+  const isMuteSignInEmailsFeatureAvailable =
+    application.features.getFeatureStatus(FeatureIdentifier.SignInAlerts) === FeatureStatus.Entitled
+
   const updateSetting = async (settingName: SettingName, payload: string): Promise<boolean> => {
     try {
       await application.settings.updateSetting(settingName, payload, false)
@@ -103,18 +113,33 @@ const Email: FunctionComponent<Props> = ({ application }: Props) => {
           <div className="flex items-center justify-between">
             <div className="flex flex-col">
               <Subtitle>Disable sign-in notification emails</Subtitle>
-              <Text>
-                Disables email notifications when a new sign-in occurs on your account. (Email notifications are
-                available only to paid subscribers).
-              </Text>
+              {isMuteSignInEmailsFeatureAvailable ? (
+                <Text>
+                  Disables email notifications when a new sign-in occurs on your account. (Email notifications are
+                  available only to paid subscribers).
+                </Text>
+              ) : (
+                <NoProSubscription
+                  application={application}
+                  text={
+                    <span>
+                      Sign-in notification emails are available only on a{' '}
+                      <span className="font-bold">subscription</span> plan. Please upgrade in order to enable sign-in
+                      notifications.
+                    </span>
+                  }
+                />
+              )}
             </div>
             {isLoading ? (
               <Spinner className="ml-2 flex-shrink-0" />
             ) : (
-              <Switch
-                onChange={toggleMuteSignInEmails}
-                checked={signInEmailsMutedValue === MuteSignInEmailsOption.Muted}
-              />
+              isMuteSignInEmailsFeatureAvailable && (
+                <Switch
+                  onChange={toggleMuteSignInEmails}
+                  checked={signInEmailsMutedValue === MuteSignInEmailsOption.Muted}
+                />
+              )
             )}
           </div>
           <HorizontalSeparator classes="my-4" />

diff --git a/...SubscriptionSharing/NoProSubscription.tsx → ...ences/Panes/Account/NoProSubscription.tsx b/...SubscriptionSharing/NoProSubscription.tsx → ...ences/Panes/Account/NoProSubscription.tsx
@@ -1,13 +1,14 @@
-import { FunctionComponent, useState } from 'react'
+import { FunctionComponent, ReactNode, useState } from 'react'
 import { LinkButton, Text } from '@/Components/Preferences/PreferencesComponents/Content'
 import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/Application/Application'
 
 type Props = {
   application: WebApplication
+  text: ReactNode
 }
 
-const NoProSubscription: FunctionComponent<Props> = ({ application }) => {
+const NoProSubscription: FunctionComponent<Props> = ({ application, text }) => {
   const [isLoadingPurchaseFlow, setIsLoadingPurchaseFlow] = useState(false)
   const [purchaseFlowError, setPurchaseFlowError] = useState<string | undefined>(undefined)
 
@@ -29,10 +30,7 @@ const NoProSubscription: FunctionComponent<Props> = ({ application }) => {
 
   return (
     <>
-      <Text>
-        Subscription sharing is available only on the <span className="font-bold">Professional</span> plan. Please
-        upgrade in order to share your subscription.
-      </Text>
+      <Text>{text}</Text>
       {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
       {purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}
 

diff --git a/...ascripts/Components/Preferences/Panes/Account/SubscriptionSharing/SubscriptionSharing.tsx b/...ascripts/Components/Preferences/Panes/Account/SubscriptionSharing/SubscriptionSharing.tsx
@@ -9,7 +9,7 @@ import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/Pre
 import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 
-import NoProSubscription from './NoProSubscription'
+import NoProSubscription from '../NoProSubscription'
 import InvitationsList from './InvitationsList'
 import Invite from './Invite/Invite'
 import Button from '@/Components/Button/Button'
@@ -57,7 +57,15 @@ const SubscriptionSharing: FunctionComponent<Props> = ({ application, viewContro
                 </ModalOverlay>
               </div>
             ) : (
-              <NoProSubscription application={application} />
+              <NoProSubscription
+                application={application}
+                text={
+                  <span>
+                    Subscription sharing is available only on the <span className="font-bold">Professional</span> plan.
+                    Please upgrade in order to share your subscription.
+                  </span>
+                }
+              />
             )}
           </div>
         </div>