From ba68e845b7d22c4edc021a828c8f04e767a7bdf4 Mon Sep 17 00:00:00 2001
From: Miss Pasture <miss@pasture.moe>
Date: Thu, 22 Sep 2022 21:49:10 -0400
Subject: [PATCH] onboarding: add information about the Fediverse to the
 onboarding process if the server federates

---
 .../features/onboarding/onboarding-wizard.tsx | 10 ++-
 .../onboarding/steps/fediverse-step.tsx       | 88 +++++++++++++++++++
 2 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 app/soapbox/features/onboarding/steps/fediverse-step.tsx

diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx
index 7b82e8862..ae3c3c74c 100644
--- a/app/soapbox/features/onboarding/onboarding-wizard.tsx
+++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx
@@ -6,16 +6,19 @@ import ReactSwipeableViews from 'react-swipeable-views';
 import { endOnboarding } from 'soapbox/actions/onboarding';
 import LandingGradient from 'soapbox/components/landing-gradient';
 import { HStack } from 'soapbox/components/ui';
+import { useFeatures } from 'soapbox/hooks';
 
 import AvatarSelectionStep from './steps/avatar-selection-step';
 import BioStep from './steps/bio-step';
 import CompletedStep from './steps/completed-step';
 import CoverPhotoSelectionStep from './steps/cover-photo-selection-step';
 import DisplayNameStep from './steps/display-name-step';
+import FediverseStep from './steps/fediverse-step';
 import SuggestedAccountsStep from './steps/suggested-accounts-step';
 
 const OnboardingWizard = () => {
   const dispatch = useDispatch();
+  const features = useFeatures();
 
   const [currentStep, setCurrentStep] = React.useState<number>(0);
 
@@ -41,9 +44,14 @@ const OnboardingWizard = () => {
     <BioStep onNext={handleNextStep} />,
     <CoverPhotoSelectionStep onNext={handleNextStep} />,
     <SuggestedAccountsStep onNext={handleNextStep} />,
-    <CompletedStep onComplete={handleComplete} />,
   ];
 
+  if (features.federating){
+    steps.push(<FediverseStep onNext={handleNextStep} />);
+  }
+
+  steps.push(<CompletedStep onComplete={handleComplete} />);
+
   const handleKeyUp = ({ key }: KeyboardEvent): void => {
     switch (key) {
       case 'ArrowLeft':
diff --git a/app/soapbox/features/onboarding/steps/fediverse-step.tsx b/app/soapbox/features/onboarding/steps/fediverse-step.tsx
new file mode 100644
index 000000000..6dbb26620
--- /dev/null
+++ b/app/soapbox/features/onboarding/steps/fediverse-step.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Account from 'soapbox/components/account';
+import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui';
+import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
+
+import type { Account as AccountEntity } from 'soapbox/types/entities';
+
+const FediverseStep = ({ onNext }: { onNext: () => void }) => {
+  const siteTitle = useAppSelector((state) => state.instance.title);
+  const account = useOwnAccount() as AccountEntity;
+
+  return (
+    <Card variant='rounded' size='xl'>
+      <CardBody>
+        <Stack space={2}>
+          <Icon strokeWidth={1} src={require('@tabler/icons/affiliate.svg')} className='w-16 h-16 mx-auto text-primary-600 dark:text-primary-400' />
+
+          <Text size='2xl' weight='bold'>
+            <FormattedMessage
+              id='onboarding.fediverse.title'
+              defaultMessage='{siteTitle} is just one part of the Fediverse'
+              values={{
+                siteTitle,
+              }}
+            />
+          </Text>
+
+          <Stack space={4}>
+            <div className='border-b border-gray-200 dark:border-gray-800 border-solid pb-2 sm:pb-5'>
+              <Stack space={4}>
+                <Text theme='muted'>
+                  <FormattedMessage
+                    id='onboarding.fediverse.message'
+                    defaultMessage='The Fediverse is a social network made up of thousands of diverse and independently-run social media sites (aka "servers"). You can follow users — and like, repost, and reply to posts — from most other Fediverse servers, because they can communicate with {siteTitle}.'
+                    values={{
+                      siteTitle,
+                    }}
+                  />
+                </Text>
+
+                <Text theme='muted'>
+                  <FormattedMessage
+                    id='onboarding.fediverse.trailer'
+                    defaultMessage='Because it is distributed and anyone can run their own server, the Fediverse is resilient and open. If you choose to join another server or set up your own, you can interact with the same people and continue on the same social graph.'
+                  />
+                </Text>
+              </Stack>
+            </div>
+
+            <div className='bg-primary-50 dark:bg-gray-800 rounded-lg text-center p-4'>
+              <Account account={account} />
+            </div>
+
+            <Text theme='muted'>
+              <FormattedMessage
+                id='onboarding.fediverse.its_you'
+                defaultMessage='This is you! Other people can follow you from other servers by using your full @-handle.'
+              />
+            </Text>
+
+            <Text theme='muted'>
+              <FormattedMessage
+                id='onboarding.fediverse.other_instances'
+                defaultMessage='When browsing your timeline, pay attention to the full username after the second @ symbol to know which server a post is from.'
+              />
+            </Text>
+          </Stack>
+        </Stack>
+
+        <div className='pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+          <Stack justifyContent='center' space={2}>
+            <Button
+              block
+              theme='primary'
+              onClick={onNext}
+            >
+              <FormattedMessage id='onboarding.fediverse.next' defaultMessage='Next' />
+            </Button>
+          </Stack>
+        </div>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default FediverseStep;