[native] add graphics to QR Auth Flow

Summary: [ENG-10030](https://linear.app/comm/issue/ENG-10030/add-graphics-to-qr-auth-flow). [Figma link](https://www.figma.com/design/OkZJNFCa4T871Bxv6iwEyv/ENG-9968---Final-Testing-Task-Screens?node-id=0-1&p=f&t=ZBsTFzmyt5OXJlPA-0) Scanning on native: {F3711246} Scanning non-native: {F3711250} Device not responding: {F3711247} Device added: {F3711248} Scanning on non-primary: {F3711249} Recording of Flow: {F3711326} Test Plan: Test Flow to navigate to all screens Reviewers: angelika, tomek Reviewed By: tomek Subscribers: ashoat Differential Revision: https://phab.comm.dev/D14185
CommE2E · Jan 9, 2025 · a3dcf5a · a3dcf5a
1 parent ef2bd4d
commit a3dcf5a
Show file tree

Hide file tree

Showing 9 changed files with 366 additions and 8 deletions.
diff --git a/native/account/qr-auth/connect-secondary-device.react.js b/native/account/qr-auth/connect-secondary-device.react.js
@@ -2,13 +2,18 @@
 
 import invariant from 'invariant';
 import * as React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
+
+import { parseDataFromDeepLink } from 'lib/facts/links.js';
+import { identityDeviceTypes } from 'lib/types/identity-service-types.js';
 
 import { PrimaryDeviceQRAuthContext } from './primary-device-qr-auth-context.js';
 import type { QRAuthNavigationProp } from './qr-auth-navigator.react.js';
 import PrimaryButton from '../../components/primary-button.react.js';
 import { type NavigationRoute } from '../../navigation/route-names.js';
 import { useStyles } from '../../themes/colors.js';
+import ConnectSecondaryDeviceLaptopIcon from '../../vectors/connect-secondary-device-laptop-icon.react.js';
+import ConnectSecondaryDeviceMobileIcon from '../../vectors/connect-secondary-device-mobile-icon.react.js';
 import AuthButtonContainer from '../auth-components/auth-button-container.react.js';
 import AuthContainer from '../auth-components/auth-container.react.js';
 import AuthContentContainer from '../auth-components/auth-content-container.react.js';
@@ -41,13 +46,26 @@ function ConnectSecondaryDevice(props: Props): React.Node {
     void onConnect(data);
   }, [data, onConnect]);
 
+  const icon = React.useMemo(() => {
+    const parsedData = parseDataFromDeepLink(data);
+    if (
+      parsedData?.data &&
+      (parsedData.data.deviceType === identityDeviceTypes.IOS ||
+        parsedData.data.deviceType === identityDeviceTypes.ANDROID)
+    ) {
+      return <ConnectSecondaryDeviceMobileIcon />;
+    }
+    return <ConnectSecondaryDeviceLaptopIcon />;
+  }, [data]);
+
   return (
     <AuthContainer>
-      <AuthContentContainer>
+      <AuthContentContainer style={styles.scrollViewContentContainer}>
         <Text style={styles.header}>Connect with this device?</Text>
         <Text style={styles.body}>
           Are you sure you want to allow this device to log in to your account?
         </Text>
+        <View style={styles.iconContainer}>{icon}</View>
       </AuthContentContainer>
       <AuthButtonContainer>
         <PrimaryButton
@@ -73,6 +91,15 @@ const unboundStyles = {
     color: 'panelForegroundSecondaryLabel',
     paddingBottom: 16,
   },
+  iconContainer: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: 32,
+  },
+  scrollViewContentContainer: {
+    flexGrow: 1,
+  },
 };
 
 export default ConnectSecondaryDevice;
diff --git a/native/account/qr-auth/qr-auth-not-primary-device.react.js b/native/account/qr-auth/qr-auth-not-primary-device.react.js
@@ -6,7 +6,7 @@ import type {
   StackOptions,
 } from '@react-navigation/core';
 import * as React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 
 import { type QRAuthNavigationProp } from './qr-auth-navigator.react.js';
 import PrimaryButton from '../../components/primary-button.react.js';
@@ -16,6 +16,7 @@ import {
   type ScreenParamList,
 } from '../../navigation/route-names.js';
 import { useStyles } from '../../themes/colors.js';
+import DeviceNotPrimaryIcon from '../../vectors/device-not-primary-icon.react.js';
 import AuthButtonContainer from '../auth-components/auth-button-container.react.js';
 import AuthContainer from '../auth-components/auth-container.react.js';
 import AuthContentContainer from '../auth-components/auth-content-container.react.js';
@@ -44,12 +45,15 @@ function QRAuthNotPrimaryDevice(prop: Props): React.Node {
 
   return (
     <AuthContainer>
-      <AuthContentContainer>
+      <AuthContentContainer style={styles.scrollViewContentContainer}>
         <Text style={styles.header}>Device not primary</Text>
         <Text style={styles.body}>
           This mobile device is not your primary device, and cannot be used to
           authorize new devices. Please try your other mobile device(s).
         </Text>
+        <View style={styles.iconContainer}>
+          <DeviceNotPrimaryIcon />
+        </View>
       </AuthContentContainer>
       <AuthButtonContainer>
         <PrimaryButton
@@ -75,6 +79,15 @@ const unboundStyles = {
     color: 'panelForegroundSecondaryLabel',
     paddingBottom: 16,
   },
+  iconContainer: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: 32,
+  },
+  scrollViewContentContainer: {
+    flexGrow: 1,
+  },
 };
 
 export default QRAuthNotPrimaryDevice;
diff --git a/native/account/qr-auth/secondary-device-connected.react.js b/native/account/qr-auth/secondary-device-connected.react.js
@@ -6,7 +6,7 @@ import type {
   StackOptions,
 } from '@react-navigation/core';
 import * as React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 
 import type { QRAuthNavigationProp } from './qr-auth-navigator.react.js';
 import PrimaryButton from '../../components/primary-button.react.js';
@@ -16,6 +16,7 @@ import {
   type ScreenParamList,
 } from '../../navigation/route-names.js';
 import { useStyles } from '../../themes/colors.js';
+import SecondaryDeviceAddedIcon from '../../vectors/secondary-device-added-icon.react.js';
 import AuthButtonContainer from '../auth-components/auth-button-container.react.js';
 import AuthContainer from '../auth-components/auth-container.react.js';
 import AuthContentContainer from '../auth-components/auth-content-container.react.js';
@@ -44,11 +45,14 @@ function SecondaryDeviceConnected(prop: Props): React.Node {
 
   return (
     <AuthContainer>
-      <AuthContentContainer>
+      <AuthContentContainer style={styles.scrollViewContentContainer}>
         <Text style={styles.header}>Device added</Text>
         <Text style={styles.body}>
           Your new device has been successfully registered!
         </Text>
+        <View style={styles.iconContainer}>
+          <SecondaryDeviceAddedIcon />
+        </View>
       </AuthContentContainer>
       <AuthButtonContainer>
         <PrimaryButton onPress={onPress} label="OK" variant="enabled" />
@@ -70,6 +74,15 @@ const unboundStyles = {
     color: 'panelForegroundSecondaryLabel',
     paddingBottom: 16,
   },
+  iconContainer: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: 32,
+  },
+  scrollViewContentContainer: {
+    flexGrow: 1,
+  },
 };
 
 export default SecondaryDeviceConnected;
diff --git a/native/account/qr-auth/secondary-device-not-responding.react.js b/native/account/qr-auth/secondary-device-not-responding.react.js
@@ -7,7 +7,7 @@ import type {
 } from '@react-navigation/core';
 import invariant from 'invariant';
 import * as React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 
 import { getMessageForException } from 'lib/utils/errors.js';
 
@@ -20,6 +20,7 @@ import {
   type ScreenParamList,
 } from '../../navigation/route-names.js';
 import { useStyles } from '../../themes/colors.js';
+import SecondaryDeviceNotRespondingIcon from '../../vectors/secondary-device-not-responding-icon.react.js';
 import AuthButtonContainer from '../auth-components/auth-button-container.react.js';
 import AuthContainer from '../auth-components/auth-container.react.js';
 import AuthContentContainer from '../auth-components/auth-content-container.react.js';
@@ -70,12 +71,15 @@ function SecondaryDeviceNotResponding(props: Props): React.Node {
 
   return (
     <AuthContainer>
-      <AuthContentContainer>
+      <AuthContentContainer style={styles.scrollViewContentContainer}>
         <Text style={styles.header}>New device not responding</Text>
         <Text style={styles.body}>
           Has the new device successfully logged in? If not, we&apos;d suggest
           removing it and trying again.
         </Text>
+        <View style={styles.iconContainer}>
+          <SecondaryDeviceNotRespondingIcon />
+        </View>
       </AuthContentContainer>
       <AuthButtonContainer>
         <PrimaryButton
@@ -106,6 +110,15 @@ const unboundStyles = {
     color: 'panelForegroundSecondaryLabel',
     paddingBottom: 16,
   },
+  iconContainer: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: 32,
+  },
+  scrollViewContentContainer: {
+    flexGrow: 1,
+  },
 };
 
 export default SecondaryDeviceNotResponding;
diff --git a/native/vectors/connect-secondary-device-laptop-icon.react.js b/native/vectors/connect-secondary-device-laptop-icon.react.js
@@ -0,0 +1,65 @@
+// @flow
+
+import * as React from 'react';
+import { Svg, Path } from 'react-native-svg';
+
+function ConnectSecondaryDeviceLaptopIcon(): React.Node {
+  return (
+    <Svg
+      height="90%"
+      width="90%"
+      fill="none"
+      viewBox="0 0 691 579"
+      preserveAspectRatio="xMidYMid"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <Path
+        d="M68.0811 40.3846C68.0811 18.2932 85.9897 0.384644 108.081 0.384644H583.091C605.183 0.384644 623.091 18.2933 623.091 40.3846V364.987H68.0811V40.3846Z"
+        fill="#5D5D5D"
+      />
+      <Path
+        d="M583.091 25.3846H108.081C99.7967 25.3846 93.0811 32.1004 93.0811 40.3846V339.987H598.091V40.3846C598.091 32.1004 591.375 25.3846 583.091 25.3846ZM108.081 0.384644C85.9897 0.384644 68.0811 18.2932 68.0811 40.3846V364.987H623.091V40.3846C623.091 18.2933 605.183 0.384644 583.091 0.384644H108.081Z"
+        fill="#292929"
+        fillRule="evenodd"
+      />
+      <Path
+        d="M691 355.385C691 410.613 646.228 455.385 591 455.385H100C44.7715 455.385 0 410.613 0 355.385V340.385H691V355.385Z"
+        fill="#151515"
+      />
+      <Path
+        d="M100 430.385H591C629.031 430.385 660.45 402.078 665.339 365.385H25.6608C30.5497 402.078 61.9692 430.385 100 430.385ZM0.493774 365.385C5.51105 415.918 48.1465 455.385 100 455.385H591C642.853 455.385 685.489 415.918 690.506 365.385C690.833 362.096 691 358.76 691 355.385V340.385H0V355.385C0 358.76 0.167236 362.096 0.493774 365.385Z"
+        fill="#292929"
+        fillRule="evenodd"
+      />
+      <Path
+        d="M49 257.385C49 235.293 66.9086 217.385 89 217.385H239.023C261.115 217.385 279.023 235.293 279.023 257.385V538.825C279.023 560.917 261.115 578.826 239.023 578.826H89C66.9086 578.826 49 560.917 49 538.826V257.385Z"
+        fill="#7E57C2"
+      />
+      <Path
+        d="M239.023 237.385H89C77.9543 237.385 69 246.339 69 257.385V538.826C69 549.871 77.9543 558.826 89 558.826H239.023C250.069 558.826 259.023 549.871 259.023 538.825V257.385C259.023 246.339 250.069 237.385 239.023 237.385ZM89 217.385C66.9086 217.385 49 235.293 49 257.385V538.826C49 560.917 66.9086 578.826 89 578.826H239.023C261.115 578.826 279.023 560.917 279.023 538.825V257.385C279.023 235.293 261.115 217.385 239.023 217.385H89Z"
+        fill="#292929"
+        fillRule="evenodd"
+      />
+      <Path
+        d="M192.802 384.481C192.802 364.936 172.191 349.105 146.753 349.105C121.314 349.105 100.703 364.936 100.703 384.481C100.703 392.065 103.824 399.052 109.116 404.823C106.149 411.5 101.256 416.807 101.19 416.873C100.703 417.381 100.57 418.133 100.858 418.796C101.145 419.46 101.765 419.858 102.474 419.858C110.577 419.858 117.285 417.138 122.111 414.33C129.24 417.801 137.675 419.858 146.753 419.858C172.191 419.858 192.802 404.027 192.802 384.481ZM219.812 433.124C225.104 427.375 228.225 420.366 228.225 412.782C228.225 397.991 216.381 385.322 199.599 380.037C199.798 381.496 199.887 382.978 199.887 384.481C199.887 407.896 176.043 426.933 146.753 426.933C144.361 426.933 142.037 426.756 139.734 426.513C146.708 439.226 163.091 448.159 182.175 448.159C191.253 448.159 199.688 446.125 206.817 442.631C211.643 445.439 218.351 448.159 226.454 448.159C227.163 448.159 227.805 447.739 228.07 447.098C228.358 446.456 228.225 445.705 227.738 445.174C227.672 445.108 222.779 439.823 219.812 433.124Z"
+        fill="white"
+      />
+      <Path
+        d="M515.5 270.885C523.232 270.885 529.5 277.153 529.5 284.885C529.5 294.563 528.911 304.468 527.757 314.48C526.872 322.161 519.928 327.67 512.247 326.785C504.565 325.9 499.056 318.956 499.941 311.274C500.979 302.266 501.5 293.433 501.5 284.885C501.5 277.153 507.768 270.885 515.5 270.885ZM506.173 354.334C513.534 356.7 517.584 364.585 515.218 371.946C509.282 390.418 501.528 408.656 492.026 425.941C488.301 432.716 479.789 435.189 473.013 431.464C466.237 427.74 463.764 419.227 467.489 412.452C476.093 396.802 483.149 380.219 488.561 363.379C490.927 356.018 498.812 351.968 506.173 354.334ZM456.943 454.662C462.735 459.784 463.278 468.632 458.156 474.424C444.876 489.442 429.755 502.778 412.848 513.557C406.329 517.714 397.674 515.799 393.517 509.279C389.36 502.759 391.276 494.105 397.795 489.948C412.26 480.726 425.428 469.167 437.181 455.876C442.303 450.083 451.151 449.54 456.943 454.662ZM205.485 496.11C208.95 489.198 217.363 486.404 224.274 489.869C232.634 494.06 240.798 497.649 248.764 500.677C255.991 503.424 259.623 511.51 256.876 518.738C254.128 525.965 246.042 529.597 238.815 526.849C229.921 523.469 220.89 519.494 211.726 514.9C204.814 511.435 202.019 503.022 205.485 496.11ZM367.532 520.432C369.301 527.959 364.633 535.495 357.106 537.264C338.203 541.707 318.016 543.127 296.684 540.95C288.992 540.165 283.392 533.293 284.177 525.601C284.962 517.909 291.834 512.309 299.526 513.094C317.814 514.961 334.873 513.726 350.7 510.007C358.227 508.238 365.763 512.905 367.532 520.432Z"
+        fill="#CCAFFF"
+        fillRule="evenodd"
+      />
+      <Path
+        d="M475.956 312.688C471.542 308.927 471.012 302.3 474.773 297.886L515.112 250.541L552.792 294.235C556.579 298.626 556.089 305.257 551.697 309.044C547.306 312.831 540.676 312.341 536.888 307.949L515.208 282.809L490.758 311.506C486.997 315.92 480.37 316.449 475.956 312.688Z"
+        fill="#CCAFFF"
+        fillRule="evenodd"
+      />
+      <Path
+        d="M501.466 268.589L528.442 268.154L532.427 298.857L500.242 299.373L501.466 268.589Z"
+        fill="#CCAFFF"
+      />
+    </Svg>
+  );
+}
+
+export default ConnectSecondaryDeviceLaptopIcon;
diff --git a/native/vectors/connect-secondary-device-mobile-icon.react.js b/native/vectors/connect-secondary-device-mobile-icon.react.js
@@ -0,0 +1,56 @@
+// @flow
+
+import * as React from 'react';
+import { Svg, Path } from 'react-native-svg';
+
+function ConnectSecondaryDeviceMobileIcon(): React.Node {
+  return (
+    <Svg
+      height="90%"
+      width="90%"
+      fill="none"
+      viewBox="0 0 728 642"
+      preserveAspectRatio="xMidYMid"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <Path
+        d="M0 40.0802C0 17.9888 17.9086 0.0802002 40 0.0802002H308C330.091 0.0802002 348 17.9888 348 40.0802V508.08C348 530.172 330.091 548.08 308 548.08H40C17.9086 548.08 0 530.172 0 508.08V40.0802Z"
+        fill="#7E57C2"
+      />
+      <Path
+        d="M308 20.0802H40C28.9543 20.0802 20 29.0345 20 40.0802V508.08C20 519.126 28.9543 528.08 40 528.08H308C319.046 528.08 328 519.126 328 508.08V40.0802C328 29.0345 319.046 20.0802 308 20.0802ZM40 0.0802002C17.9086 0.0802002 0 17.9888 0 40.0802V508.08C0 530.172 17.9086 548.08 40 548.08H308C330.091 548.08 348 530.172 348 508.08V40.0802C348 17.9888 330.091 0.0802002 308 0.0802002H40Z"
+        fill="#292929"
+        fillRule="evenodd"
+      />
+      <Path
+        d="M216.608 253.244C216.608 223.592 185.338 199.576 146.747 199.576C108.155 199.576 76.8853 223.592 76.8853 253.244C76.8853 264.75 81.6211 275.349 89.6484 284.104C85.1477 294.234 77.7249 302.284 77.6242 302.385C76.8853 303.156 76.6837 304.297 77.1204 305.303C77.557 306.309 78.4974 306.913 79.5722 306.913C91.8652 306.913 102.042 302.787 109.364 298.527C120.179 303.794 132.976 306.913 146.747 306.913C185.338 306.913 216.608 282.896 216.608 253.244ZM257.585 327.039C265.612 318.318 270.348 307.685 270.348 296.179C270.348 273.739 252.378 254.519 226.919 246.502C227.222 248.716 227.356 250.963 227.356 253.244C227.356 288.766 191.183 317.647 146.747 317.647C143.119 317.647 139.593 317.379 136.1 317.01C146.679 336.297 171.534 349.848 200.486 349.848C214.257 349.848 227.054 346.762 237.869 341.462C245.191 345.722 255.368 349.848 267.661 349.848C268.735 349.848 269.71 349.211 270.113 348.238C270.549 347.265 270.348 346.125 269.609 345.32C269.508 345.219 262.085 337.202 257.585 327.039Z"
+        fill="white"
+      />
+      <Path
+        d="M380 40.0802C380 17.9888 397.909 0.0802002 420 0.0802002H688C710.091 0.0802002 728 17.9888 728 40.0802V508.08C728 530.172 710.091 548.08 688 548.08H420C397.909 548.08 380 530.172 380 508.08V40.0802Z"
+        fill="#5D5D5D"
+      />
+      <Path
+        d="M688 20.0802H420C408.954 20.0802 400 29.0345 400 40.0802V508.08C400 519.126 408.954 528.08 420 528.08H688C699.046 528.08 708 519.126 708 508.08V40.0802C708 29.0345 699.046 20.0802 688 20.0802ZM420 0.0802002C397.909 0.0802002 380 17.9888 380 40.0802V508.08C380 530.172 397.909 548.08 420 548.08H688C710.091 548.08 728 530.172 728 508.08V40.0802C728 17.9888 710.091 0.0802002 688 0.0802002H420Z"
+        fill="#292929"
+        fillRule="evenodd"
+      />
+      <Path
+        d="M165.499 453.323C172.821 450.838 180.771 454.758 183.257 462.079C186.143 470.58 189.344 478.711 192.829 486.475C195.996 493.528 192.844 501.814 185.79 504.98C178.737 508.147 170.451 504.996 167.285 497.942C163.431 489.358 159.908 480.404 156.743 471.081C154.257 463.759 158.178 455.809 165.499 453.323ZM567.214 452.923C574.757 454.625 579.492 462.118 577.79 469.661C575.602 479.364 572.973 488.681 569.935 497.607C567.444 504.927 559.491 508.841 552.171 506.35C544.851 503.859 540.937 495.906 543.428 488.586C546.138 480.623 548.5 472.262 550.477 463.5C552.178 455.957 559.672 451.222 567.214 452.923ZM199.239 528.316C205.469 523.737 214.232 525.075 218.811 531.305C229.431 545.752 241.259 558.277 253.936 568.907C259.86 573.876 260.635 582.706 255.667 588.631C250.698 594.555 241.868 595.33 235.944 590.362C221.535 578.279 208.177 564.114 196.251 547.888C191.671 541.658 193.009 532.895 199.239 528.316ZM540.595 530.709C547.085 534.911 548.94 543.579 544.738 550.07C533.657 567.187 520.681 581.979 506.279 594.402C500.424 599.452 491.583 598.8 486.533 592.945C481.483 587.09 482.135 578.25 487.99 573.2C500.355 562.535 511.581 549.764 521.234 534.853C525.436 528.363 534.104 526.507 540.595 530.709ZM278.387 603.235C281.677 596.238 290.017 593.233 297.014 596.523C312.757 603.925 329.119 609.017 345.617 611.819C353.24 613.113 358.37 620.342 357.076 627.965C355.781 635.588 348.552 640.718 340.929 639.424C321.922 636.196 303.13 630.339 285.099 621.861C278.102 618.571 275.097 610.232 278.387 603.235ZM463.679 607.341C466.77 614.428 463.53 622.679 456.443 625.77C438.284 633.688 419.132 638.775 399.605 641.036C391.925 641.925 384.977 636.419 384.088 628.739C383.199 621.058 388.704 614.111 396.385 613.221C413.222 611.272 429.682 606.893 445.25 600.104C452.337 597.014 460.588 600.253 463.679 607.341Z"
+        fill="#CCAFFF"
+        fillRule="evenodd"
+      />
+      <Path
+        d="M519.632 476.939C516.242 472.234 517.308 465.672 522.014 462.282L575.031 424.086L602.501 478.054C605.132 483.222 603.075 489.544 597.907 492.175C592.739 494.805 586.417 492.748 583.786 487.58L567.429 455.445L534.289 479.321C529.584 482.711 523.022 481.644 519.632 476.939Z"
+        fill="#CCAFFF"
+        fillRule="evenodd"
+      />
+      <Path
+        d="M546.582 467.854L576.923 473.923L584.709 470.717L581.045 447.36L557.802 444.841L546.582 467.854Z"
+        fill="#CCAFFF"
+      />
+    </Svg>
+  );
+}
+
+export default ConnectSecondaryDeviceMobileIcon;