feat-mobile: add legal drawer and view

packages/desktop/views/onboarding/views/app-setup/views/LegalView.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
-    import { Button, Checkbox, OnboardingLayout, Text } from 'shared/components'
-    import ConditionsOfUse from './ConditionsOfUse.svelte'
     import {
         lastAcceptedPrivacyPolicy,
         lastAcceptedTermsOfService,
-        mobile,
         PRIVACY_POLICY_VERSION,
         TERMS_OF_SERVICE_VERSION,
     } from '@core/app'
     import { localize } from '@core/i18n'
     import { appSetupRouter } from '@core/router'
+    import { Button, Checkbox, ConditionsOfUse, OnboardingLayout, Text, TextType } from '@ui'
 
     let checked = false
     let termsAccepted = false
@@ -29,21 +27,19 @@
 
 <OnboardingLayout {onBackClick}>
     <div slot="title">
-        <Text type="h2">{localize('views.onboarding.appSetup.legal.title')}</Text>
+        <Text type={TextType.h2}>{localize('views.onboarding.appSetup.legal.title')}</Text>
     </div>
     <div slot="leftpane__content">
-        {#if !$mobile}
-            <Text type="p" secondary classes="mb-8">{localize('views.onboarding.appSetup.legal.body')}</Text>
-        {/if}
+        <Text type={TextType.p} secondary classes="mb-8">{localize('views.onboarding.appSetup.legal.body')}</Text>
     </div>
-    <div slot="leftpane__action" class="flex flex-col {$mobile ? 'space-y-4' : 'space-y-8'}">
+    <div slot="leftpane__action" class="flex flex-col space-y-8">
         <Checkbox label={localize('views.onboarding.appSetup.legal.checkbox')} bind:checked />
         <Button classes="w-full" disabled={!termsAccepted} onClick={onContinueClick}>
             {localize('actions.continue')}
         </Button>
     </div>
-    <div slot="rightpane" class={!$mobile && 'w-full h-full flex items-center px-40 py-20'}>
-        <div class="legal-content {!$mobile && 'block relative max-h-full overflow-y-auto w-full text-justify pr-10'}">
+    <div slot="rightpane" class="w-full h-full flex items-center px-40 py-20">
+        <div class="legal-content block relative max-h-full overflow-y-auto w-full text-justify pr-10">
             <ConditionsOfUse />
         </div>
     </div>

packages/mobile/views/login/LoginRouter.svelte

@@ -1,9 +1,23 @@
 <script lang="ts">
-    import { EnterPinView, SelectProfileView, LoadProfileView } from './views'
+    import { onMount } from 'svelte'
+    import { needsToAcceptLatestPrivacyPolicy, needsToAcceptLatestTermsOfService } from '@core/app'
     import { loginRoute, LoginRoute } from '../../lib/routers'
+    import { EnterPinView, LegalUpdateView, LoadProfileView, SelectProfileView } from './views'
+
+    let needsToAcceptLegal = false
+
+    function checkLegal(): void {
+        needsToAcceptLegal = needsToAcceptLatestPrivacyPolicy() || needsToAcceptLatestTermsOfService()
+    }
+
+    onMount(() => {
+        checkLegal()
+    })
 </script>
 
-{#if $loginRoute === LoginRoute.SelectProfile}
+{#if needsToAcceptLegal}
+    <LegalUpdateView onAccept={checkLegal} />
+{:else if $loginRoute === LoginRoute.SelectProfile}
     <SelectProfileView />
 {:else if $loginRoute === LoginRoute.EnterPin}
     <EnterPinView />

packages/mobile/views/login/views/LegalUpdateView.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { Button, Checkbox, ConditionsOfUse, Text, TextType } from '@ui'
+    import {
+        lastAcceptedPrivacyPolicy,
+        lastAcceptedTermsOfService,
+        PRIVACY_POLICY_VERSION,
+        TERMS_OF_SERVICE_VERSION,
+    } from '@core/app'
+    import { localize } from '@core/i18n'
+
+    export let onAccept: () => unknown = () => {}
+
+    let checked = false
+
+    function handleConfirmClick(): void {
+        lastAcceptedTermsOfService.set(TERMS_OF_SERVICE_VERSION)
+        lastAcceptedPrivacyPolicy.set(PRIVACY_POLICY_VERSION)
+        onAccept()
+    }
+</script>
+
+<legal-update-view class="relative h-full p-5 flex flex-col justify-between">
+    <legal-update-header class="relative w-full flex justify-center px-6 mb-6">
+        <Text type={TextType.h4} classes="text-center">{localize('views.onboarding.appSetup.legal.title')}</Text>
+    </legal-update-header>
+    <legal-update-body class="flex flex-col h-full overflow-y-auto">
+        <Text type={TextType.p} secondary>{localize('popups.legalUpdate.tosAndPrivPolicyBody')}</Text>
+        <div class="mt-4">
+            <ConditionsOfUse />
+        </div>
+    </legal-update-body>
+    <legal-update-actions class="space-y-8 mt-6">
+        <div class="flex flex-row items-center mb-4">
+            <Checkbox label={localize('popups.legalUpdate.tosAndPrivPolicyCheckbox')} bind:checked />
+        </div>
+        <Button classes="w-full" onClick={handleConfirmClick} disabled={!checked}>{localize('actions.confirm')}</Button>
+    </legal-update-actions>
+</legal-update-view>

packages/mobile/views/login/views/index.js

@@ -1,3 +1,4 @@
 export { default as EnterPinView } from './EnterPinView.svelte'
+export { default as LegalUpdateView } from './LegalUpdateView.svelte'
 export { default as LoadProfileView } from './LoadProfileView.svelte'
 export { default as SelectProfileView } from './SelectProfileView.svelte'

packages/mobile/views/onboarding/views/app-setup/drawers/LegalDrawer.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { Drawer } from '../../../../../components'
+    import { localize } from '@core/i18n'
+    import { ConditionsOfUse } from '@ui'
+
+    export let onClose: () => unknown = () => {}
+</script>
+
+<Drawer {onClose} title={localize('views.onboarding.appSetup.legal.title')} onBackClick={onClose} allowBack fullScreen>
+    <legal-drawer class="block overflow-auto mt-4">
+        <ConditionsOfUse />
+    </legal-drawer>
+</Drawer>

packages/mobile/views/onboarding/views/app-setup/drawers/index.js

@@ -0,0 +1 @@
+export { default as LegalDrawer } from './LegalDrawer.svelte'

packages/mobile/views/onboarding/views/app-setup/views/WelcomeView.svelte

@@ -1,20 +1,22 @@
 <script lang="ts">
-    import { hasCompletedAppSetup } from '@core/app'
-    import { localize } from '@core/i18n'
-    import { formatProtocolName, NetworkProtocol, NetworkType } from '@core/network'
-    import { appSetupRouter } from '../../../../../lib/routers'
-    import { Button, Checkbox, Text, TextType } from 'shared/components'
+    import { onMount } from 'svelte'
+    import { Button, Checkbox, Link, Text, TextType } from 'shared/components'
     import {
         initialiseOnboardingProfile,
         onboardingProfile,
         shouldBeDeveloperProfile,
         updateOnboardingProfile,
     } from 'shared/lib/contexts/onboarding'
-    import { onMount } from 'svelte'
     import { OnboardingLayout } from '../../../../../components'
+    import { LegalDrawer } from '../drawers'
+    import { appSetupRouter } from '../../../../../lib/routers'
+    import { hasCompletedAppSetup } from '@core/app'
+    import { localize } from '@core/i18n'
+    import { formatProtocolName, NetworkProtocol, NetworkType } from '@core/network'
     import features from '@features/features'
 
     let checked = false
+    let showLegal = false
 
     function onContinueClick(): void {
         hasCompletedAppSetup.set(true)
@@ -51,9 +53,14 @@
             <Checkbox bind:checked />
             <Text type={TextType.p} secondary>
                 I agree to the
-                <span class="text-blue-500"> Terms of Service </span>
+                <Link onClick={() => (showLegal = true)}>
+                    {localize('popups.legalUpdate.tosTitle')}
+                </Link>
             </Text>
         </div>
         <Button onClick={onContinueClick} classes="w-full">{localize('actions.continue')}</Button>
     </div>
 </OnboardingLayout>
+{#if showLegal}
+    <LegalDrawer onClose={() => (showLegal = false)} />
+{/if}

packages/shared/components/molecules/index.js

@@ -3,6 +3,7 @@ export { default as AliasActivityDetails } from './AliasActivityDetails.svelte'
 export { default as AssetIcon } from './AssetIcon.svelte'
 export { default as AssetList } from './AssetList.svelte'
 export { default as BasicActivityDetails } from './BasicActivityDetails.svelte'
+export { default as ConditionsOfUse } from './ConditionsOfUse.svelte'
 export { default as ConsolidationActivityDetails } from './ConsolidationActivityDetails.svelte'
 export { default as DateInputButton } from './DateInputButton.svelte'
 export { default as ExpirationTimePicker } from './ExpirationTimePicker.svelte'