Merge pull request #441 from gertrude-app/encourage-filter-suspensions

appviews: new onboarding encourage filter suspensions step
gertrude-app · Jan 27, 2025 · e1553be · e1553be
2 parents 3e052e2 + c8153f7
commit e1553be
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 0 deletions.
diff --git a/appviews/src/Onboarding/Onboarding.tsx b/appviews/src/Onboarding/Onboarding.tsx
@@ -170,6 +170,10 @@ export const Onboarding: React.FC<Props> = ({
         />
         <OnboardingPage step="locateMenuBarIcon" component={<Step.LocateMenuBarIcon />} />
         <OnboardingPage step="viewHealthCheck" component={<Step.ViewHealthCheck />} />
+        <OnboardingPage
+          step="encourageFilterSuspensions"
+          component={<Step.EncourageFilterSuspensions />}
+        />
         <OnboardingPage step="howToUseGertrude" component={<Step.HowToUseGertrude />} />
         <OnboardingPage step="finish" component={<Step.Finish />} />
       </StepSwitcher>

diff --git a/appviews/src/Onboarding/StepSwitcher.tsx b/appviews/src/Onboarding/StepSwitcher.tsx
@@ -168,6 +168,7 @@ function getProgressStep(currentStep: OnboardingStep): number {
     case `exemptUsers`:
     case `locateMenuBarIcon`:
     case `viewHealthCheck`:
+    case `encourageFilterSuspensions`:
     case `howToUseGertrude`:
     case `finish`:
       return 7;

diff --git a/appviews/src/Onboarding/Steps/EncourageFilterSuspensions.tsx b/appviews/src/Onboarding/Steps/EncourageFilterSuspensions.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import ExpandableContent from '../ExpandableContent';
+import * as Onboarding from '../UtilityComponents';
+import assets from '../cdn-assets';
+
+const EncourageFilterSuspensions: React.FC = () => (
+  <Onboarding.Centered direction="row" className="space-x-12">
+    <ExpandableContent
+      className="!ml-0"
+      asset={assets.img(`encourage-filter-suspensions`)}
+      width={800 / 2.3}
+      height={600 / 2.3}
+      lessRounded
+    />
+    <div className="flex flex-col !mr-0">
+      <Onboarding.Heading>Start in “Easy Mode”</Onboarding.Heading>
+      <Onboarding.Text className="max-w-2xl mt-4 mb-4">
+        While you work on getting websites and apps unblocked, feel free to use{` `}
+        <b>lots of temporary filter suspensions</b> to simplify the first few days.
+        Especially <em>if your kids are older</em> and need to do lots of work online,
+        right away.
+      </Onboarding.Text>
+      <Onboarding.Text className="max-w-2xl-4 mb-8">
+        Keep screenshot monitoring enabled, and let your child know you’ll be able to see
+        what they do.
+      </Onboarding.Text>
+      <Onboarding.PrimaryButton icon="fa-solid fa-arrow-right">
+        Got it
+      </Onboarding.PrimaryButton>
+    </div>
+  </Onboarding.Centered>
+);
+
+export default EncourageFilterSuspensions;
diff --git a/appviews/src/Onboarding/Steps/index.ts b/appviews/src/Onboarding/Steps/index.ts
@@ -7,6 +7,7 @@ export { default as MacosUserAccountType } from './MacosUserAccountType';
 export { default as ConnectChild } from './ConnectChild';
 export { default as AllowScreenshots } from './AllowScreenshots';
 export { default as AllowFullDiskAccess } from './AllowFullDiskAccess';
+export { default as EncourageFilterSuspensions } from './EncourageFilterSuspensions';
 export { default as AllowNotifications } from './AllowNotifications';
 export { default as AllowKeylogging } from './AllowKeylogging';
 export { default as InstallSysExt } from './InstallSysExt';

diff --git a/appviews/src/Onboarding/cdn-assets.ts b/appviews/src/Onboarding/cdn-assets.ts
@@ -139,6 +139,7 @@ const COMMON_IMG_IDS = [
   `locate-menubar-icon`,
   `wrong-install-dir`,
   `how-to-use-gifs`,
+  `encourage-filter-suspensions`,
 ] as const;
 
 const OS_IMAGE_IDS = [
@@ -153,6 +154,7 @@ const OS_IMAGE_IDS = [
 const COMMON_IMG_DATA: Record<CommonImgId, string | [number, ...number[]]> = {
   notifications: `png`,
   administrate: `png`,
+  'encourage-filter-suspensions': `png`,
   'locate-menubar-icon': `gif`,
   'wrong-install-dir': [10.8],
   'how-to-use-gifs': [4.88, 5.45],

diff --git a/appviews/src/Onboarding/onboarding-store.ts b/appviews/src/Onboarding/onboarding-store.ts
@@ -38,6 +38,7 @@ export type OnboardingStep =
   | 'exemptUsers'
   | 'locateMenuBarIcon'
   | 'viewHealthCheck'
+  | 'encourageFilterSuspensions'
   | 'howToUseGertrude'
   | 'finish';
 

diff --git a/storybook/stories/macos-app/Onboarding.stories.tsx b/storybook/stories/macos-app/Onboarding.stories.tsx
@@ -244,6 +244,11 @@ export const ViewHealthCheck: Story = props({
   step: `viewHealthCheck`,
 });
 
+export const EasyMode: Story = props({
+  ...Welcome.args,
+  step: `encourageFilterSuspensions`,
+});
+
 export const HowToUseGertrude: Story = props({
   ...Welcome.args,
   step: `howToUseGertrude`,