From 2a9f05a7655883b9d175a8c82627cc70efe26a10 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 8 Mar 2023 14:10:09 -0600
Subject: [PATCH] Create Group: add info items to confirmation step

---
 .../steps/confirmation-step.tsx               | 55 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
index 7321734cf..158b68ffd 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Avatar, Divider, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, Divider, HStack, Stack, Text } from 'soapbox/components/ui';
 
 interface IConfirmationStep {
   group: any
@@ -31,13 +31,62 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
 
       <Divider />
 
-      <div>
+      <Stack space={4}>
         <Text size='3xl' weight='bold' align='center'>
           <FormattedMessage id='manage_group.confirmation.title' defaultMessage='You’re all set!' />
         </Text>
-      </div>
+
+        <Stack space={5}>
+          <InfoListItem number={1}>
+            <FormattedMessage
+              id='manage_group.confirmation.info_1'
+              defaultMessage='As the owner of this group, you can assign staff, delete posts and much more.'
+            />
+          </InfoListItem>
+
+          <InfoListItem number={2}>
+            <FormattedMessage
+              id='manage_group.confirmation.info_2'
+              defaultMessage="Post the group's first post and get the conversation started."
+            />
+          </InfoListItem>
+
+          <InfoListItem number={3}>
+            <FormattedMessage
+              id='manage_group.confirmation.info_3'
+              defaultMessage='Share your new group with friends, family and followers to grow its membership.'
+            />
+          </InfoListItem>
+        </Stack>
+      </Stack>
     </Stack>
   );
 };
 
+interface IInfoListNumber {
+  number: number
+}
+
+const InfoListNumber: React.FC<IInfoListNumber> = ({ number }) => {
+  return (
+    <div className='flex h-7 w-7 items-center justify-center rounded-full border border-gray-200'>
+      <Text theme='primary' size='sm' weight='bold'>{number}</Text>
+    </div>
+  );
+};
+
+interface IInfoListItem {
+  number: number
+  children: React.ReactNode
+}
+
+const InfoListItem: React.FC<IInfoListItem> = ({ number, children }) => {
+  return (
+    <HStack space={3}>
+      <div><InfoListNumber number={number} /></div>
+      <div>{children}</div>
+    </HStack>
+  );
+};
+
 export default ConfirmationStep;