From cf3664751f5530ad96fedb6404a5b2357da7567b Mon Sep 17 00:00:00 2001 From: Mo Date: Mon, 22 Nov 2021 11:39:14 -0600 Subject: [PATCH] feat: display feature status (#745) * feat: display feature status * fix: hook dep * fix: react hooks dep --- .../components/ComponentView/IsExpired.tsx | 54 ++++++++++--------- .../components/ComponentView/index.tsx | 32 ++++++----- .../javascripts/hooks/manageSubscription.ts | 12 +++++ .../preferences/PreferencesMenu.ts | 2 +- .../preferences/panes/account/Credentials.tsx | 2 +- .../preferences/panes/account/Sync.tsx | 3 +- .../subscription/SubscriptionInformation.tsx | 13 ++--- app/assets/javascripts/utils.ts | 25 --------- package.json | 6 +-- yarn.lock | 41 +++++++------- 10 files changed, 92 insertions(+), 98 deletions(-) create mode 100644 app/assets/javascripts/hooks/manageSubscription.ts diff --git a/app/assets/javascripts/components/ComponentView/IsExpired.tsx b/app/assets/javascripts/components/ComponentView/IsExpired.tsx index 18acde9b7..7044aa11a 100644 --- a/app/assets/javascripts/components/ComponentView/IsExpired.tsx +++ b/app/assets/javascripts/components/ComponentView/IsExpired.tsx @@ -1,14 +1,34 @@ +import { FeatureStatus } from '@standardnotes/snjs'; import { FunctionalComponent } from 'preact'; interface IProps { expiredDate: string; + componentName: string; + featureStatus: FeatureStatus; reloadStatus: () => void; + manageSubscription: () => void; } +const statusString = (featureStatus: FeatureStatus, expiredDate: string, componentName: string) => { + switch (featureStatus) { + case FeatureStatus.InCurrentPlanButExpired: + return `Your subscription expired on ${expiredDate}`; + case FeatureStatus.NoUserSubscription: + return `You do not have an active subscription`; + case FeatureStatus.NotInCurrentPlan: + return `Please upgrade your plan to access ${componentName}`; + default: + return `${componentName} is valid and you should not be seeing this message`; + } +}; + export const IsExpired: FunctionalComponent = ({ - expiredDate, - reloadStatus - }) => { + expiredDate, + featureStatus, + reloadStatus, + componentName, + manageSubscription +}) => { return (
@@ -19,37 +39,23 @@ export const IsExpired: FunctionalComponent = ({
- - Your subscription expired on {expiredDate} - + + {statusString(featureStatus, expiredDate, componentName)} +
- Extensions are in a read-only state. + {componentName} is in a read-only state.
+
manageSubscription()}> + +
reloadStatus()}>
-
-
- - Help - -
-
diff --git a/app/assets/javascripts/components/ComponentView/index.tsx b/app/assets/javascripts/components/ComponentView/index.tsx index a6c140b3e..3e7473114 100644 --- a/app/assets/javascripts/components/ComponentView/index.tsx +++ b/app/assets/javascripts/components/ComponentView/index.tsx @@ -1,4 +1,4 @@ -import { ComponentAction, LiveItem, SNComponent } from '@node_modules/@standardnotes/snjs'; +import { ComponentAction, FeatureStatus, LiveItem, SNComponent, dateToLocalizedString } from '@standardnotes/snjs'; import { WebApplication } from '@/ui_models/application'; import { FunctionalComponent } from 'preact'; import { toDirective } from '@/components/utils'; @@ -12,6 +12,7 @@ import { IsExpired } from '@/components/ComponentView/IsExpired'; import { IssueOnLoading } from '@/components/ComponentView/IssueOnLoading'; import { AppState } from '@/ui_models/app_state'; import { ComponentArea } from '@node_modules/@standardnotes/features'; +import { openSubscriptionDashboard } from '@/hooks/manageSubscription'; interface IProps { application: WebApplication; @@ -36,8 +37,7 @@ export const ComponentView: FunctionalComponent = observer( appState, onLoad, componentUuid, - templateComponent, - manualDealloc = false, + templateComponent }) => { const liveComponentRef = useRef | null>(null); const iframeRef = useRef(null); @@ -46,7 +46,7 @@ export const ComponentView: FunctionalComponent = observer( const [isLoading, setIsLoading] = useState(false); const [isReloading, setIsReloading] = useState(false); const [loadTimeout, setLoadTimeout] = useState(undefined); - const [isExpired, setIsExpired] = useState(false); + const [featureStatus, setFeatureStatus] = useState(undefined); const [isComponentValid, setIsComponentValid] = useState(true); const [error, setError] = useState<'offline-restricted' | 'url-missing' | undefined>(undefined); const [isDeprecated, setIsDeprecated] = useState(false); @@ -68,6 +68,10 @@ export const ComponentView: FunctionalComponent = observer( }); }; + const manageSubscription = useCallback(() => { + openSubscriptionDashboard(application); + }, [application]); + const reloadStatus = useCallback(() => { if (!component) { return; @@ -82,12 +86,12 @@ export const ComponentView: FunctionalComponent = observer( } }(); - setIsExpired(component.isExpired); + setFeatureStatus(application.getFeatureStatus(component.identifier)); const readonlyState = application.componentManager.getReadonlyStateForComponent(component); if (!readonlyState.lockReadonly) { - application.componentManager.setReadonlyStateForComponent(component, isExpired); + application.componentManager.setReadonlyStateForComponent(component, featureStatus !== FeatureStatus.Entitled); } setIsComponentValid(!offlineRestricted && !hasUrlError); @@ -104,7 +108,7 @@ export const ComponentView: FunctionalComponent = observer( } setIsDeprecated(component.isDeprecated); setDeprecationMessage(component.package_info.deprecation_message); - }, [application.componentManager, component, isComponentValid, isExpired]); + }, [application, component, isComponentValid, featureStatus]); const dismissDeprecationMessage = () => { setTimeout(() => { @@ -214,10 +218,6 @@ export const ComponentView: FunctionalComponent = observer( }; }, [application.componentManager, component, handleIframeLoad, loadComponent, reloadStatus]); - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - const expiredDate = isExpired ? component.dateToLocalizedString(component.valid_until) : ''; - const getUrl = () => { const url = component ? application.componentManager.urlForComponent(component) : ''; return url as string; @@ -319,8 +319,14 @@ export const ComponentView: FunctionalComponent = observer( reloadIframe={reloadIframe} /> )} - {isExpired && ( - + {featureStatus !== FeatureStatus.Entitled && ( + )} {isDeprecated && !isDeprecationMessageDismissed && ( { + if (!token) { + return; + } + window.open( + `${window._dashboard_url}?subscription_token=${token}` + ); + }); +} diff --git a/app/assets/javascripts/preferences/PreferencesMenu.ts b/app/assets/javascripts/preferences/PreferencesMenu.ts index b55a78e63..638dd4d7d 100644 --- a/app/assets/javascripts/preferences/PreferencesMenu.ts +++ b/app/assets/javascripts/preferences/PreferencesMenu.ts @@ -1,7 +1,7 @@ import { IconType } from '@/components/Icon'; import { action, makeAutoObservable, observable } from 'mobx'; import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments'; -import { ContentType, SNComponent } from '@node_modules/@standardnotes/snjs'; +import { ContentType, SNComponent } from '@standardnotes/snjs'; import { WebApplication } from '@/ui_models/application'; import { FeatureIdentifier } from '@node_modules/@standardnotes/features/dist/Domain/Feature/FeatureIdentifier'; import { ComponentArea } from '@standardnotes/snjs'; diff --git a/app/assets/javascripts/preferences/panes/account/Credentials.tsx b/app/assets/javascripts/preferences/panes/account/Credentials.tsx index 2e0351898..323edc34f 100644 --- a/app/assets/javascripts/preferences/panes/account/Credentials.tsx +++ b/app/assets/javascripts/preferences/panes/account/Credentials.tsx @@ -3,7 +3,7 @@ import { Button } from '@/components/Button'; import { WebApplication } from '@/ui_models/application'; import { observer } from '@node_modules/mobx-react-lite'; import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator'; -import { dateToLocalizedString } from '@/utils'; +import { dateToLocalizedString } from '@standardnotes/snjs'; import { useState } from 'preact/hooks'; import { ChangeEmail } from '@/preferences/panes/account/changeEmail'; import { PasswordWizardType } from '@/types'; diff --git a/app/assets/javascripts/preferences/panes/account/Sync.tsx b/app/assets/javascripts/preferences/panes/account/Sync.tsx index 724fe8780..e8b465b39 100644 --- a/app/assets/javascripts/preferences/panes/account/Sync.tsx +++ b/app/assets/javascripts/preferences/panes/account/Sync.tsx @@ -5,10 +5,9 @@ import { Title, } from '@/preferences/components'; import { Button } from '@/components/Button'; -import { SyncQueueStrategy } from '@node_modules/@standardnotes/snjs'; +import { SyncQueueStrategy, dateToLocalizedString } from '@standardnotes/snjs'; import { STRING_GENERIC_SYNC_ERROR } from '@/strings'; import { useState } from '@node_modules/preact/hooks'; -import { dateToLocalizedString } from '@/utils'; import { observer } from '@node_modules/mobx-react-lite'; import { WebApplication } from '@/ui_models/application'; import { FunctionComponent } from 'preact'; diff --git a/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx b/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx index 2fc0468c5..99fe89d4a 100644 --- a/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx +++ b/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx @@ -4,6 +4,7 @@ import { Text } from '@/preferences/components'; import { Button } from '@/components/Button'; import { WebApplication } from '@/ui_models/application'; import { convertTimestampToMilliseconds } from '@standardnotes/snjs'; +import { openSubscriptionDashboard } from '@/hooks/manageSubscription'; type Props = { subscriptionState: SubscriptionState; @@ -44,14 +45,8 @@ const StatusText = observer(({ subscriptionState }: Props) => { export const SubscriptionInformation = observer( ({ subscriptionState, application }: Props) => { - const openSubscriptionDashboard = async () => { - const token = await application?.getNewSubscriptionToken(); - if (!token) { - return; - } - window.location.assign( - `${window._dashboard_url}?subscription_token=${token}` - ); + const manageSubscription = async () => { + openSubscriptionDashboard(application!); }; return ( @@ -61,7 +56,7 @@ export const SubscriptionInformation = observer( className="min-w-20 mt-3 mr-3" type="normal" label="Manage subscription" - onClick={openSubscriptionDashboard} + onClick={manageSubscription} /> ); diff --git a/app/assets/javascripts/utils.ts b/app/assets/javascripts/utils.ts index 0b046231e..01a43bc3e 100644 --- a/app/assets/javascripts/utils.ts +++ b/app/assets/javascripts/utils.ts @@ -34,31 +34,6 @@ export function getPlatform(): Platform { return platformFromString(getPlatformString()); } -let sharedDateFormatter: Intl.DateTimeFormat; -export function dateToLocalizedString(date: Date) { - if (typeof Intl !== 'undefined' && Intl.DateTimeFormat) { - if (!sharedDateFormatter) { - const locale = - navigator.languages && navigator.languages.length - ? navigator.languages[0] - : navigator.language; - sharedDateFormatter = new Intl.DateTimeFormat(locale, { - year: 'numeric', - month: 'numeric', - day: '2-digit', - hour: '2-digit', - minute: '2-digit', - }); - } - return sharedDateFormatter.format(date); - } else { - // IE < 11, Safari <= 9.0. - // In English, this generates the string most similar to - // the toLocaleDateString() result above. - return date.toDateString() + ' ' + date.toLocaleTimeString(); - } -} - export function isSameDay(dateA: Date, dateB: Date): boolean { return ( dateA.getFullYear() === dateB.getFullYear() && diff --git a/package.json b/package.json index 20e156fa2..aba44f352 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "eslint": "^8.0.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-react": "^7.26.1", - "eslint-plugin-react-hooks": "^4.2.0", + "eslint-plugin-react-hooks": "^4.2.1-beta-149b420f6-20211119", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.4.0", "lodash": "^4.17.21", @@ -70,9 +70,9 @@ "@reach/checkbox": "^0.16.0", "@reach/dialog": "^0.16.2", "@reach/listbox": "^0.16.2", - "@standardnotes/features": "1.8.1", + "@standardnotes/features": "1.9.0", "@standardnotes/sncrypto-web": "1.5.3", - "@standardnotes/snjs": "2.17.9", + "@standardnotes/snjs": "2.18.0", "mobx": "^6.3.5", "mobx-react-lite": "^3.2.1", "preact": "^10.5.15", diff --git a/yarn.lock b/yarn.lock index 487bae42e..9cb80fca3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2147,6 +2147,13 @@ prop-types "^15.7.2" tslib "^2.3.0" +"@standardnotes/auth@3.8.3": + version "3.8.3" + resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.8.3.tgz#6e627c1a1a9ebf91d97f52950d099bf7704382e3" + integrity sha512-wz056b3pv8IIX74lYaqjCUvnw3NSow+ex5pn/VlGxg8r7gq19WsmgyXP2BoE7nqKddO1JMlFok+4gdnutYF0Cw== + dependencies: + "@standardnotes/common" "^1.2.1" + "@standardnotes/auth@^3.8.1": version "3.8.1" resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.8.1.tgz#4197fb2f7e223c6bd13a870a3feac3c73294fb3c" @@ -2166,18 +2173,12 @@ dependencies: "@standardnotes/auth" "^3.8.1" -"@standardnotes/features@1.8.1": - version "1.8.1" - resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.8.1.tgz#addea86a8a4288a0046bc674a8e76f1bac3c2f89" - integrity sha512-yDbMLu9SnwR4cmjsIMgpxBOK9kIbWVQ7WezfJ5MN0FAwD2IbfKCMaWBMUJStCtSqkKE4dkL3BC+sIxik/4RwdQ== - dependencies: - "@standardnotes/common" "^1.2.1" - -"@standardnotes/features@^1.8.2": - version "1.8.2" - resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.8.2.tgz#ecc8162ca80ee3740468aa55a64c23b519c13505" - integrity sha512-EYeYYT/WBIh7fMVTVhsy0INjVdyHVtnH90pbZQHNPpsUkLdj05DzuyxUKjsc0oxiskmZjPOVSfXt8l3RL5Av4g== +"@standardnotes/features@1.9.0", "@standardnotes/features@^1.8.3": + version "1.9.0" + resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.9.0.tgz#6b563dbc177592a6c0741abc7794b0cd6f1989e0" + integrity sha512-fuRfLrnKEq43ti7FpYZhZu9SLk6j8ruuLcDygoS8gDKB3LU3yuAbKfumqnt0NDF/hXg5/y5FhxxjYQX2GxykoA== dependencies: + "@standardnotes/auth" "3.8.3" "@standardnotes/common" "^1.2.1" "@standardnotes/settings@^1.2.1": @@ -2199,15 +2200,15 @@ buffer "^6.0.3" libsodium-wrappers "^0.7.9" -"@standardnotes/snjs@2.17.9": - version "2.17.9" - resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.17.9.tgz#9e7402252c6acda6471cc9d887516f17b6bd2cb2" - integrity sha512-Hi57vIByRD5qEOFfQrq/qILH5qRgngyn57qhHE2yKDsX//CTDsdqKGKVZbG0W54rQ+JxYUfjAuBPR/pxIVTi6w== +"@standardnotes/snjs@2.18.0": + version "2.18.0" + resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.18.0.tgz#0256998cc63902a54bc211aa6808d3dd64d13ef2" + integrity sha512-wwe+zyN7hYUZaoqVSinNNeKO0ng5xqYt0MD6Ga31EM0i1xm10GVP4QOjyzcgiEjEHbWXpTEC8MSw6gU6Glrwbg== dependencies: "@standardnotes/auth" "^3.8.1" "@standardnotes/common" "^1.2.1" "@standardnotes/domain-events" "^2.5.1" - "@standardnotes/features" "^1.8.2" + "@standardnotes/features" "^1.8.3" "@standardnotes/settings" "^1.2.1" "@standardnotes/sncrypto-common" "^1.5.2" @@ -4013,10 +4014,10 @@ eslint-config-prettier@^8.3.0: resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a" integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew== -eslint-plugin-react-hooks@^4.2.0: - version "4.2.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556" - integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ== +eslint-plugin-react-hooks@^4.2.1-beta-149b420f6-20211119: + version "4.2.1-beta-149b420f6-20211119" + resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.1-beta-149b420f6-20211119.tgz#183ee5420a6db51b09b64694826dbeda17b492f8" + integrity sha512-wTNvhQhv/c3yyXbHFBhvGJDlOuFSA8F+ih/RAwVlZcJjDll+17u55xCI/1I5CWhaMukoYtizQf+qi52veglSvQ== eslint-plugin-react@^7.26.1: version "7.26.1"