diff --git a/projects/Mallard/src/components/Spacer/Spacer.tsx b/projects/Mallard/src/components/Spacer/Spacer.tsx new file mode 100644 index 000000000..abc1d516c --- /dev/null +++ b/projects/Mallard/src/components/Spacer/Spacer.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { StyleSheet, View } from 'react-native'; + +const styles = (unit: number) => + StyleSheet.create({ + spacer: { + marginRight: unit, + marginTop: unit, + }, + }); +export const Spacer = ({ unit = 8 }: { unit?: number }) => ( + +); diff --git a/projects/Mallard/src/components/Spacer/__tests__/Spacer.spec.tsx b/projects/Mallard/src/components/Spacer/__tests__/Spacer.spec.tsx new file mode 100644 index 000000000..6582942df --- /dev/null +++ b/projects/Mallard/src/components/Spacer/__tests__/Spacer.spec.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import TestRenderer from 'react-test-renderer'; +import { Spacer } from '../Spacer'; + +describe('', () => { + it('should render with default props', () => { + const wrapper = TestRenderer.create().toJSON(); + expect(wrapper).toMatchSnapshot(); + }); + + it('should render with given props', () => { + const wrapper = TestRenderer.create().toJSON(); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/projects/Mallard/src/components/Spacer/__tests__/__snapshots__/Spacer.spec.tsx.snap b/projects/Mallard/src/components/Spacer/__tests__/__snapshots__/Spacer.spec.tsx.snap new file mode 100644 index 000000000..af652412b --- /dev/null +++ b/projects/Mallard/src/components/Spacer/__tests__/__snapshots__/Spacer.spec.tsx.snap @@ -0,0 +1,23 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render with default props 1`] = ` + +`; + +exports[` should render with given props 1`] = ` + +`; diff --git a/projects/Mallard/src/helpers/words.ts b/projects/Mallard/src/helpers/words.ts index dd2754253..4ee79c0cd 100644 --- a/projects/Mallard/src/helpers/words.ts +++ b/projects/Mallard/src/helpers/words.ts @@ -246,16 +246,23 @@ const externalSubscription = { cancel: 'Cancel', }; +const enableAll = 'Enable all'; +const rejectAll = 'Reject all'; +const andContinue = 'and continue'; + export const copy = { alreadySubscribed, + andContinue, authSwitcherScreen, consentOnboarding, + enableAll, externalSubscription, failedSignIn, homeScreen, issueListFooter, manageDownloads, newEditionWords, + rejectAll, settings, signIn, subFound, diff --git a/projects/Mallard/src/hooks/use-gdpr.tsx b/projects/Mallard/src/hooks/use-gdpr.tsx index 41312a525..8d805fa51 100644 --- a/projects/Mallard/src/hooks/use-gdpr.tsx +++ b/projects/Mallard/src/hooks/use-gdpr.tsx @@ -43,15 +43,13 @@ export enum OnboardingStatus { } interface GdprSettings extends GdprCoreSettings { - gdprAllowGoogleLogin: GdprSwitchSetting; - gdprAllowAppleLogin: GdprSwitchSetting; setGdprFunctionalityBucket: (setting: GdprSwitchSetting) => void; setGdprPerformanceBucket: (setting: GdprSwitchSetting) => void; enableAllSettings: () => void; + rejectAllSettings: () => void; resetAllSettings: () => void; hasSetGdpr: () => OnboardingStatus; isCorrectConsentVersion: () => boolean; - loading: boolean; } export type GdprSwitches = { @@ -64,15 +62,13 @@ const defaultState: GdprSettings = { gdprAllowPerformance: null, gdprAllowFunctionality: null, gdprConsentVersion: null, - gdprAllowGoogleLogin: null, - gdprAllowAppleLogin: null, setGdprFunctionalityBucket: () => {}, setGdprPerformanceBucket: () => {}, enableAllSettings: () => {}, + rejectAllSettings: () => {}, resetAllSettings: () => {}, hasSetGdpr: () => OnboardingStatus.Unknown, isCorrectConsentVersion: () => false, - loading: true, }; const GDPRContext = createContext(defaultState); @@ -87,12 +83,6 @@ export const GDPRProvider = ({ children }: { children: React.ReactNode }) => { const [gdprConsentVersion, setGdprConsentVersion] = useState< GdprSettings['gdprConsentVersion'] >(defaultState.gdprConsentVersion); - const [gdprAllowGoogleLogin, setGdprAllowGoogleLogin] = useState< - GdprSettings['gdprAllowGoogleLogin'] - >(defaultState.gdprAllowGoogleLogin); - const [gdprAllowAppleLogin, setGdprAllowAppleLogin] = useState< - GdprSettings['gdprAllowAppleLogin'] - >(defaultState.gdprAllowAppleLogin); const [loading, setLoading] = useState(true); @@ -153,8 +143,6 @@ export const GDPRProvider = ({ children }: { children: React.ReactNode }) => { const setGdprFunctionalityBucket = (setting: GdprSwitchSetting) => { // Local state modifier setGdprAllowFunctionality(setting); - setGdprAllowGoogleLogin(setting); - setGdprAllowAppleLogin(setting); setGdprConsentVersion(CURRENT_CONSENT_VERSION); // Persisted state modifier setting === null @@ -163,26 +151,26 @@ export const GDPRProvider = ({ children }: { children: React.ReactNode }) => { gdprConsentVersionCache.set(CURRENT_CONSENT_VERSION); }; - const enableAllSettings = () => { + const allSettings = (modifier: boolean) => { // Local state modifier - setGdprAllowPerformance(true); - setGdprAllowFunctionality(true); + setGdprAllowPerformance(modifier); + setGdprAllowFunctionality(modifier); setGdprConsentVersion(CURRENT_CONSENT_VERSION); - setGdprAllowGoogleLogin(true); - setGdprAllowAppleLogin(true); // Persisted state modifier - gdprAllowPerformanceCache.set(true); - gdprAllowFunctionalityCache.set(true); + gdprAllowPerformanceCache.set(modifier); + gdprAllowFunctionalityCache.set(modifier); gdprConsentVersionCache.set(CURRENT_CONSENT_VERSION); }; + const enableAllSettings = () => allSettings(true); + + const rejectAllSettings = () => allSettings(false); + const resetAllSettings = () => { // Local state modifier setGdprAllowPerformance(defaultState.gdprAllowPerformance); setGdprAllowFunctionality(defaultState.gdprAllowFunctionality); setGdprConsentVersion(defaultState.gdprConsentVersion); - setGdprAllowGoogleLogin(defaultState.gdprAllowGoogleLogin); - setGdprAllowAppleLogin(defaultState.gdprAllowAppleLogin); // Persisted state modifier gdprAllowPerformanceCache.reset(); gdprAllowFunctionalityCache.reset(); @@ -202,13 +190,10 @@ export const GDPRProvider = ({ children }: { children: React.ReactNode }) => { setGdprFunctionalityBucket, setGdprPerformanceBucket, enableAllSettings, + rejectAllSettings, resetAllSettings, hasSetGdpr, isCorrectConsentVersion, - // The following are not used anywhere as things stand and are therefore not persisted - gdprAllowGoogleLogin, - gdprAllowAppleLogin, - loading, }} > {children} diff --git a/projects/Mallard/src/screens/settings/gdpr-consent-screen.tsx b/projects/Mallard/src/screens/settings/gdpr-consent-screen.tsx index 2ac3ecb78..a7a6b14c5 100644 --- a/projects/Mallard/src/screens/settings/gdpr-consent-screen.tsx +++ b/projects/Mallard/src/screens/settings/gdpr-consent-screen.tsx @@ -9,9 +9,11 @@ import type { ThreeWaySwitchValue } from 'src/components/layout/ui/switch'; import { ThreeWaySwitch } from 'src/components/layout/ui/switch'; import { LinkNav } from 'src/components/link'; import { LoginHeader } from 'src/components/login/login-layout'; +import { Spacer } from 'src/components/Spacer/Spacer'; import { UiBodyCopy } from 'src/components/styled-text'; import { logEvent } from 'src/helpers/analytics'; import { + copy, PREFS_SAVED_MSG, PRIVACY_SETTINGS_HEADER_TITLE, } from 'src/helpers/words'; @@ -41,10 +43,10 @@ const essentials: EssentialGdprSwitch = { const GdprConsent = ({ shouldShowDismissableHeader = false, - continueText, + withContinue = false, }: { shouldShowDismissableHeader?: boolean; - continueText: string; + withContinue?: boolean; }) => { const navigation = useNavigation>(); @@ -56,6 +58,7 @@ const GdprConsent = ({ const { enableAllSettings, + rejectAllSettings, resetAllSettings, gdprAllowPerformance, gdprAllowFunctionality, @@ -86,10 +89,24 @@ const GdprConsent = ({ const onEnableAllAndContinue = () => { enableAllSettings(); - navigation.navigate(RouteNames.Issue); showToast(PREFS_SAVED_MSG); + withContinue && navigation.navigate(RouteNames.Issue); }; + const onRejectAllAndContinue = () => { + rejectAllSettings(); + showToast(PREFS_SAVED_MSG); + withContinue && navigation.navigate(RouteNames.Issue); + }; + + const continueText = withContinue + ? `${copy.enableAll} ${copy.andContinue}` + : copy.enableAll; + + const rejectText = withContinue + ? `${copy.rejectAll} ${copy.andContinue}` + : copy.rejectAll; + const onDismiss = () => { if (hasSetGdpr() === OnboardingStatus.Complete) { navigation.navigate(RouteNames.Issue); @@ -145,18 +162,33 @@ const GdprConsent = ({ } proxy={ - + <> + + + + } > @@ -241,7 +273,7 @@ const GdprConsentScreen = () => ( actionLeft={true} > - + ); @@ -250,7 +282,7 @@ const GdprConsentScreenForOnboarding = () => ( );