feat(suite): improve skip backup and PIN modals copy

trezor · Oct 8, 2024 · 7babc8f · 7babc8f
1 parent e0dc41d
commit 7babc8f
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 16 deletions.
diff --git a/packages/suite/src/components/onboarding/SkipStepConfirmation.tsx b/packages/suite/src/components/onboarding/SkipStepConfirmation.tsx
@@ -1,38 +1,55 @@
+import { ReactNode } from 'react';
 import * as STEP from 'src/constants/onboarding/steps';
 import { AnyStepId } from 'src/types/onboarding';
 import { NewModal } from '@trezor/components';
 import { Translation } from 'src/components/suite';
 import { useOnboarding } from 'src/hooks/suite';
 
-interface SkipStepConfirmationProps {
+type SkipStepConfirmationProps = {
     onCancel: () => void;
-}
+};
 
-export const SkipStepConfirmation = ({ onCancel }: SkipStepConfirmationProps) => {
-    const { activeStepId, goToNextStep } = useOnboarding();
+type SkipModalContent = {
+    heading?: ReactNode;
+    secondaryButtonText?: ReactNode;
+    body?: ReactNode;
+    nextStep?: AnyStepId;
+};
 
-    let text;
-    let nextStep: AnyStepId;
+const getModalContent = (activeStepId: AnyStepId): SkipModalContent => {
     switch (activeStepId) {
         case STEP.ID_SECURITY_STEP:
         case STEP.ID_BACKUP_STEP:
-            text = <Translation id="TR_SKIP_BACKUP" />;
-            nextStep = STEP.ID_SET_PIN_STEP;
-            break;
+            return {
+                heading: <Translation id="TR_SKIP_BACKUP" />,
+                secondaryButtonText: <Translation id="TR_SKIP_BACKUP" />,
+                body: <Translation id="TR_SKIP_BACKUP_DESCRIPTION" />,
+                nextStep: STEP.ID_SET_PIN_STEP,
+            };
         case STEP.ID_SET_PIN_STEP:
-            text = <Translation id="TR_SKIP_PIN" />;
-            break;
+            return {
+                heading: <Translation id="TR_SKIP_PIN" />,
+                secondaryButtonText: <Translation id="TR_SKIP_PIN" />,
+                body: <Translation id="TR_SKIP_PIN_DESCRIPTION" />,
+            };
         default:
-            throw new Error(`Unexpected step to skip: ${activeStepId}`);
+            return {};
     }
+};
+
+export const SkipStepConfirmation = ({ onCancel }: SkipStepConfirmationProps) => {
+    const { activeStepId, goToNextStep } = useOnboarding();
+    const { heading, secondaryButtonText, body, nextStep } = getModalContent(activeStepId);
+
+    if (!heading) return;
 
     const handleSkipStepConfirm = () => {
         goToNextStep(nextStep);
     };
 
     return (
         <NewModal
-            heading={text}
+            heading={heading}
             onCancel={onCancel}
             size="small"
             bottomContent={
@@ -45,12 +62,12 @@ export const SkipStepConfirmation = ({ onCancel }: SkipStepConfirmationProps) =>
                         data-testid="@onboarding/skip-button-confirm"
                         onClick={handleSkipStepConfirm}
                     >
-                        {text}
+                        {secondaryButtonText}
                     </NewModal.Button>
                 </>
             }
         >
-            <Translation id="TR_DO_YOU_REALLY_WANT_TO_SKIP" />
+            {body}
         </NewModal>
     );
 };
diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts
@@ -2461,10 +2461,20 @@ export default defineMessages({
         defaultMessage: 'Skip PIN',
         id: 'TR_SKIP_PIN',
     },
+    TR_SKIP_PIN_DESCRIPTION: {
+        defaultMessage:
+            'A device PIN prevents unauthorized access to your Trezor. Without it, anyone with your device can access your funds.',
+        id: 'TR_SKIP_PIN_DESCRIPTION',
+    },
     TR_SKIP_BACKUP: {
-        defaultMessage: 'Skip Backup',
+        defaultMessage: 'Skip backup',
         id: 'TR_SKIP_BACKUP',
     },
+    TR_SKIP_BACKUP_DESCRIPTION: {
+        defaultMessage:
+            'A wallet backup lets you recover your funds if your Trezor is lost, stolen, or damaged. Without a backup, you could lose access to your crypto permanently.',
+        id: 'TR_SKIP_BACKUP_DESCRIPTION',
+    },
     TR_DONT_SKIP: {
         defaultMessage: "Don't skip",
         id: 'TR_DONT_SKIP',