Merge pull request #18168 from mozilla/FXA-10819

feat(RP): Display subscription ToS/PP when client is Relay

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;

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,
+      });
+    }
+  },
+};

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({

packages/fxa-settings/src/components/TermsPrivacyAgreement/index.stories.tsx

@@ -31,6 +31,12 @@ export const MonitorClient = () => (
     <TermsPrivacyAgreement isMonitorClient />
   </AppLayout>
 );
+export const RelayClient = () => (
+  <AppLayout>
+    <TermsPrivacyAgreement isRelayClient />
+  </AppLayout>
+);
+
 export const OAuthNativeRelay = () => (
   <AppLayout>
     <TermsPrivacyAgreement isDesktopRelay />

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 (
     <div
       className={`text-grey-500 text-xs ${isDesktopRelay ? 'mt-8' : 'mt-5'}`}
     >
-      {isPocketClient || isMonitorClient || isDesktopRelay ? (
+      {isPocketClient || isMonitorClient || isDesktopRelay || isRelayClient ? (
         <>
           <FtlMsg id="terms-privacy-agreement-intro-2">
             <p>By proceeding, you agree to the:</p>
@@ -68,7 +70,7 @@ const TermsPrivacyAgreement = ({
                 </li>
               </FtlMsg>
             )}
-            {(isMonitorClient || isDesktopRelay) && (
+            {(isMonitorClient || isDesktopRelay || isRelayClient) && (
               <FtlMsg
                 id="terms-privacy-agreement-monitor-3"
                 elems={{

packages/fxa-settings/src/lib/types.ts

@@ -32,6 +32,7 @@ export enum MozServices {
   FirefoxSync = 'Firefox Sync',
   MozillaVPN = 'Mozilla VPN',
   Pocket = 'Pocket',
+  Relay = 'Mozilla Relay',
   TestService = '123Done',
   MonitorPlus = 'Mozilla Monitor Plus',
 }

packages/fxa-settings/src/models/integrations/client-matching.ts

@@ -14,10 +14,19 @@ export const POCKET_CLIENTIDS = [
   '749818d3f2e7857f', // pocket-web
 ];
 
+export const RELAY_CLIENTIDS = [
+  '41b4363ae36440a9', // Relay stage
+  '723aa3bce05884d8', // Relay dev
+  '9ebfe2c2f9ea3c58', // Relay prod
+];
+
 export const isClientPocket = (clientId?: string) => {
   return !!(clientId && POCKET_CLIENTIDS.includes(clientId));
 };
 
 export const isClientMonitor = (clientId?: string) => {
   return !!(clientId && MONITOR_CLIENTIDS.includes(clientId));
 };
+export const isClientRelay = (clientId?: string) => {
+  return !!(clientId && RELAY_CLIENTIDS.includes(clientId));
+};

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 (
     <AppLayout>
       {isSync ? (
@@ -72,7 +74,7 @@ export const Index = ({
         <ThirdPartyAuth showSeparator viewName="index" />
       )}
       <TermsPrivacyAgreement
-        {...{ isPocketClient, isMonitorClient, isDesktopRelay }}
+        {...{ isPocketClient, isMonitorClient, isDesktopRelay, isRelayClient }}
       />
     </AppLayout>
   );

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 = ({
       )}
 
       <TermsPrivacyAgreement
-        {...{ isPocketClient, isMonitorClient, isDesktopRelay }}
+        {...{ isPocketClient, isMonitorClient, isDesktopRelay, isRelayClient }}
       />
 
       <div className="flex flex-col mt-8 tablet:justify-between tablet:flex-row">

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 = ({
       <TermsPrivacyAgreement
         isPocketClient={client === MozServices.Pocket}
         isMonitorClient={client === MozServices.Monitor}
+        isRelayClient={client === MozServices.Relay}
         {...{ isDesktopRelay }}
       />
     </AppLayout>