diff --git a/packages/fxa-content-server/app/scripts/views/index.js b/packages/fxa-content-server/app/scripts/views/index.js index a9a90a41560..f48b91558f8 100644 --- a/packages/fxa-content-server/app/scripts/views/index.js +++ b/packages/fxa-content-server/app/scripts/views/index.js @@ -26,6 +26,7 @@ import checkEmailDomain from '../lib/email-domain-validator'; import PocketMigrationMixin from './mixins/pocket-migration-mixin'; import BrandMessagingMixin from './mixins/brand-messaging-mixin'; import MonitorClientMixin from './mixins/monitor-client-mixin'; +import RelayClientMixin from './mixins/relay-client-mixin'; import { isEmailMask } from 'fxa-shared/email/helpers'; const EMAIL_SELECTOR = 'input[type=email]'; @@ -42,12 +43,15 @@ class IndexView extends FormView { setInitialContext(context) { MonitorClientMixin.setInitialContext.call(this, context); + RelayClientMixin.setInitialContext.call(this, context); context.set({ unsafeThirdPartyAuthHTML: this.renderTemplate(ThirdPartyAuth, { showSeparator: true, }), showSubscriptionTerms: - context.get('isMonitorClient') || this.relier.isOAuthNativeRelay(), + context.get('isMonitorClient') || + context.get('isRelayClient') || + this.relier.isOAuthNativeRelay(), }); } @@ -323,7 +327,8 @@ Cocktail.mixin( SignedInNotificationMixin, BrandMessagingMixin, PocketMigrationMixin, - MonitorClientMixin + MonitorClientMixin, + RelayClientMixin ); export default IndexView; diff --git a/packages/fxa-content-server/app/scripts/views/mixins/relay-client-mixin.js b/packages/fxa-content-server/app/scripts/views/mixins/relay-client-mixin.js new file mode 100644 index 00000000000..1017d910d77 --- /dev/null +++ b/packages/fxa-content-server/app/scripts/views/mixins/relay-client-mixin.js @@ -0,0 +1,22 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +export const RELAY_CLIENTIDS = [ + '41b4363ae36440a9', // Relay stage + '723aa3bce05884d8', // Relay dev + '9ebfe2c2f9ea3c58', // Relay prod + // 'dcdb5ae7add825d2', // 123done, turn on for manual testing +]; + +export default { + setInitialContext(context) { + const isRelayClient = RELAY_CLIENTIDS.includes(this.relier.get('clientId')); + + if (isRelayClient) { + context.set({ + isRelayClient, + }); + } + }, +}; diff --git a/packages/fxa-content-server/app/tests/spec/views/index.js b/packages/fxa-content-server/app/tests/spec/views/index.js index 63931acc51b..5fa37b45629 100644 --- a/packages/fxa-content-server/app/tests/spec/views/index.js +++ b/packages/fxa-content-server/app/tests/spec/views/index.js @@ -276,6 +276,22 @@ describe('views/index', () => { }); }); + describe('isRelayClient', () => { + beforeEach(() => { + relier.set({ + clientId: '9ebfe2c2f9ea3c58', + }); + }); + it('renders expected ToS and PP', () => { + return view.render().then(() => { + assert.include( + view.$('.card').text(), + 'Mozilla Subscription Services' + ); + }); + }); + }); + describe('isOAuthNativeRelay', () => { beforeEach(() => { relier.set({ diff --git a/packages/fxa-settings/src/components/TermsPrivacyAgreement/index.stories.tsx b/packages/fxa-settings/src/components/TermsPrivacyAgreement/index.stories.tsx index 16850731422..e1e173d6469 100644 --- a/packages/fxa-settings/src/components/TermsPrivacyAgreement/index.stories.tsx +++ b/packages/fxa-settings/src/components/TermsPrivacyAgreement/index.stories.tsx @@ -31,6 +31,12 @@ export const MonitorClient = () => ( ); +export const RelayClient = () => ( + + + +); + export const OAuthNativeRelay = () => ( diff --git a/packages/fxa-settings/src/components/TermsPrivacyAgreement/index.tsx b/packages/fxa-settings/src/components/TermsPrivacyAgreement/index.tsx index f9068a00c74..2a95e647619 100644 --- a/packages/fxa-settings/src/components/TermsPrivacyAgreement/index.tsx +++ b/packages/fxa-settings/src/components/TermsPrivacyAgreement/index.tsx @@ -10,19 +10,21 @@ import LinkExternal from 'fxa-react/components/LinkExternal'; export type TermsPrivacyAgreementProps = { isPocketClient?: boolean; isMonitorClient?: boolean; - isDesktopRelay?: boolean; + isRelayClient?: boolean; // Relay is oauth RP + isDesktopRelay?: boolean; // `service=relay` on Fx desktop client ID }; const TermsPrivacyAgreement = ({ isPocketClient = false, isMonitorClient = false, + isRelayClient = false, isDesktopRelay = false, }: TermsPrivacyAgreementProps) => { return (
- {isPocketClient || isMonitorClient || isDesktopRelay ? ( + {isPocketClient || isMonitorClient || isDesktopRelay || isRelayClient ? ( <>

By proceeding, you agree to the:

@@ -68,7 +70,7 @@ const TermsPrivacyAgreement = ({
)} - {(isMonitorClient || isDesktopRelay) && ( + {(isMonitorClient || isDesktopRelay || isRelayClient) && ( { return !!(clientId && POCKET_CLIENTIDS.includes(clientId)); }; @@ -21,3 +27,6 @@ export const isClientPocket = (clientId?: string) => { export const isClientMonitor = (clientId?: string) => { return !!(clientId && MONITOR_CLIENTIDS.includes(clientId)); }; +export const isClientRelay = (clientId?: string) => { + return !!(clientId && RELAY_CLIENTIDS.includes(clientId)); +}; diff --git a/packages/fxa-settings/src/pages/Index/index.tsx b/packages/fxa-settings/src/pages/Index/index.tsx index 98c291d996b..ea80fae2ee8 100644 --- a/packages/fxa-settings/src/pages/Index/index.tsx +++ b/packages/fxa-settings/src/pages/Index/index.tsx @@ -14,6 +14,7 @@ import TermsPrivacyAgreement from '../../components/TermsPrivacyAgreement'; import { isClientMonitor, isClientPocket, + isClientRelay, } from '../../models/integrations/client-matching'; import { isOAuthIntegration } from '../../models'; @@ -27,6 +28,7 @@ export const Index = ({ const isOAuth = isOAuthIntegration(integration); const isPocketClient = isOAuth && isClientPocket(clientId); const isMonitorClient = isOAuth && isClientMonitor(clientId); + const isRelayClient = isOAuth && isClientRelay(clientId); return ( {isSync ? ( @@ -72,7 +74,7 @@ export const Index = ({ )} ); diff --git a/packages/fxa-settings/src/pages/Signin/index.tsx b/packages/fxa-settings/src/pages/Signin/index.tsx index be764bd5742..db72229cb09 100644 --- a/packages/fxa-settings/src/pages/Signin/index.tsx +++ b/packages/fxa-settings/src/pages/Signin/index.tsx @@ -29,6 +29,7 @@ import { import { isClientMonitor, isClientPocket, + isClientRelay, } from '../../models/integrations/client-matching'; import { SigninFormData, SigninProps } from './interfaces'; import { handleNavigation } from './utils'; @@ -81,6 +82,7 @@ const Signin = ({ const clientId = integration.getClientId(); const isPocketClient = isOAuth && isClientPocket(clientId); const isMonitorClient = isOAuth && isClientMonitor(clientId); + const isRelayClient = isOAuth && isClientRelay(clientId); const hasLinkedAccountAndNoPassword = hasLinkedAccount && !hasPassword; // We must use a ref because we may update this value in a callback @@ -441,7 +443,7 @@ const Signin = ({ )}
diff --git a/packages/fxa-settings/src/pages/Signup/index.tsx b/packages/fxa-settings/src/pages/Signup/index.tsx index 52b3bffa8f0..45a76c6dbd1 100644 --- a/packages/fxa-settings/src/pages/Signup/index.tsx +++ b/packages/fxa-settings/src/pages/Signup/index.tsx @@ -34,6 +34,7 @@ import { import { isClientMonitor, isClientPocket, + isClientRelay, } from '../../models/integrations/client-matching'; import { SignupFormData, SignupProps } from './interfaces'; import Banner from '../../components/Banner'; @@ -100,6 +101,9 @@ export const Signup = ({ if (isClientMonitor(clientId)) { setClient(MozServices.Monitor); } + if (isClientRelay(clientId)) { + setClient(MozServices.Relay); + } } }, [integration, isOAuth]); @@ -418,6 +422,7 @@ export const Signup = ({