fix(bug): Only show account recovery promo if the user has Sync-able devices

packages/fxa-settings/src/components/NotificationPromoBanner/index.test.tsx

@@ -68,4 +68,22 @@ describe('NotificationPromoBanner component', () => {
     );
     expect(key).toBe('true');
   });
+
+  it('can set not visible', () => {
+    const notificationProps = {
+      headerImage: keyImage,
+      ctaText: 'Create',
+      headerValue: 'Don’t lose your data if you forget your password',
+      headerDescription:
+        'Create an Account Recovery Key to restore your sync browsing data if you ever forget your password.',
+      route: '/settings/account_recovery',
+      dismissKey: 'account-recovery-dismissed',
+      metricsKey: 'create_recovery_key',
+      isVisible: false,
+    };
+    renderWithLocalizationProvider(
+      <NotificationPromoBanner {...notificationProps} />
+    );
+    expect(screen.queryByText('Create')).not.toBeInTheDocument();
+  });
 });

packages/fxa-settings/src/components/NotificationPromoBanner/index.tsx

@@ -92,7 +92,7 @@ const NotificationPromoBanner = ({
         </div>
 
         <Link
-          className="cta-neutral cta-base cta-base-p text-base tablet:text-sm tablet:self-center transition-standard -mt-1 mobileLandscape:mt-0"
+          className="cta-neutral cta-base cta-base-p text-base tablet:mr-8 tablet:text-sm tablet:self-center transition-standard -mt-1 mobileLandscape:mt-0"
           to={`${route}${location.search}`}
           data-glean-id={`account_banner_${metricsKey}_submit`}
         >

packages/fxa-settings/src/components/Settings/PageSettings/index.tsx

@@ -55,6 +55,13 @@ export const PageSettings = (_: RouteComponentProps) => {
     }
   }, [attachedClients, subscriptions, productPromoGleanEventSent]);
 
+  // The estimated Sync devices is optionally returned by the auth-server,
+  // if it is not present, we default to 0.
+  let estimatedSyncDeviceCount = 0;
+  if (recoveryKey.estimatedSyncDeviceCount) {
+    estimatedSyncDeviceCount = recoveryKey.estimatedSyncDeviceCount;
+  }
+
   const accountRecoveryNotificationProps = {
     headerImage: keyImage,
     ctaText: ftlMsgResolver.getMsg(
@@ -72,7 +79,7 @@ export const PageSettings = (_: RouteComponentProps) => {
     route: '/settings/account_recovery',
     dismissKey: 'account-recovery-dismissed',
     metricsKey: 'create_recovery_key',
-    isVisible: !recoveryKey.exists,
+    isVisible: estimatedSyncDeviceCount > 0 && !recoveryKey.exists,
   };
 
   // Scroll to effect