Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Dec 30, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions packages/fxa-content-server/app/scripts/views/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]';
Expand All @@ -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(),
});
}

Expand Down Expand Up @@ -323,7 +327,8 @@ Cocktail.mixin(
SignedInNotificationMixin,
BrandMessagingMixin,
PocketMigrationMixin,
MonitorClientMixin
MonitorClientMixin,
RelayClientMixin
);

export default IndexView;
22 changes: 22 additions & 0 deletions packages/fxa-content-server/app/scripts/views/mixins/relay-client-mixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
});
}
},
};
16 changes: 16 additions & 0 deletions packages/fxa-content-server/app/tests/spec/views/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
6 changes: 6 additions & 0 deletions packages/fxa-settings/src/components/TermsPrivacyAgreement/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ export const MonitorClient = () => (
<TermsPrivacyAgreement isMonitorClient />
</AppLayout>
);
export const RelayClient = () => (
<AppLayout>
<TermsPrivacyAgreement isRelayClient />
</AppLayout>
);

export const OAuthNativeRelay = () => (
<AppLayout>
<TermsPrivacyAgreement isDesktopRelay />
Expand Down
8 changes: 5 additions & 3 deletions packages/fxa-settings/src/components/TermsPrivacyAgreement/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we check for so many of these now, I think we might want a follow up issue to just take in clientId here and let this component do the checks. The way we have it now does make storybook and tests easier for this component, though. (We'd just be moving some mocking from other components into mocking for this.)

Copy link
Contributor

@vpomerleau vpomerleau Dec 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since three of these conditions display terms for subscription services, we could have a isSubscriptionsService function (mentioning as part of the possible follow-up, not required for this PR)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, though not all subscription services want this displayed and isDesktopRelay is kind of a weird one. Maybe just shouldShowSubscriptionTOS or something 🤷‍♀️

<>
<FtlMsg id="terms-privacy-agreement-intro-2">
<p>By proceeding, you agree to the:</p>
Expand Down Expand Up @@ -68,7 +70,7 @@ const TermsPrivacyAgreement = ({
</li>
</FtlMsg>
)}
{(isMonitorClient || isDesktopRelay) && (
{(isMonitorClient || isDesktopRelay || isRelayClient) && (
<FtlMsg
id="terms-privacy-agreement-monitor-3"
elems={{
Expand Down
1 change: 1 addition & 0 deletions packages/fxa-settings/src/lib/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export enum MozServices {
FirefoxSync = 'Firefox Sync',
MozillaVPN = 'Mozilla VPN',
Pocket = 'Pocket',
Relay = 'Mozilla Relay',
TestService = '123Done',
MonitorPlus = 'Mozilla Monitor Plus',
}
Expand Down
9 changes: 9 additions & 0 deletions packages/fxa-settings/src/models/integrations/client-matching.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
};
4 changes: 3 additions & 1 deletion packages/fxa-settings/src/pages/Index/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import TermsPrivacyAgreement from '../../components/TermsPrivacyAgreement';
import {
isClientMonitor,
isClientPocket,
isClientRelay,
} from '../../models/integrations/client-matching';
import { isOAuthIntegration } from '../../models';

Expand All @@ -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 ? (
Expand Down Expand Up @@ -72,7 +74,7 @@ export const Index = ({
<ThirdPartyAuth showSeparator viewName="index" />
)}
<TermsPrivacyAgreement
{...{ isPocketClient, isMonitorClient, isDesktopRelay }}
{...{ isPocketClient, isMonitorClient, isDesktopRelay, isRelayClient }}
/>
</AppLayout>
);
Expand Down
4 changes: 3 additions & 1 deletion packages/fxa-settings/src/pages/Signin/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
import {
isClientMonitor,
isClientPocket,
isClientRelay,
} from '../../models/integrations/client-matching';
import { SigninFormData, SigninProps } from './interfaces';
import { handleNavigation } from './utils';
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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">
Expand Down
5 changes: 5 additions & 0 deletions packages/fxa-settings/src/pages/Signup/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import {
import {
isClientMonitor,
isClientPocket,
isClientRelay,
} from '../../models/integrations/client-matching';
import { SignupFormData, SignupProps } from './interfaces';
import Banner from '../../components/Banner';
Expand Down Expand Up @@ -100,6 +101,9 @@ export const Signup = ({
if (isClientMonitor(clientId)) {
setClient(MozServices.Monitor);
}
if (isClientRelay(clientId)) {
setClient(MozServices.Relay);
}
}
}, [integration, isOAuth]);

Expand Down Expand Up @@ -418,6 +422,7 @@ export const Signup = ({
<TermsPrivacyAgreement
isPocketClient={client === MozServices.Pocket}
isMonitorClient={client === MozServices.Monitor}
isRelayClient={client === MozServices.Relay}
{...{ isDesktopRelay }}
/>
</AppLayout>
Expand Down
Loading