feat: update form create modal response options (#7957)

* feat: update form create modal response options

* feat: move tile back

* feat: move tiling for email mode to rightmost

frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/FormResponseOptions.tsx

@@ -13,15 +13,32 @@ export interface FormResponseOptionsProps {
   isSingpass: boolean
 }
 
-const OptionDescription = ({ listItems = [] }: { listItems: string[] }) => {
+interface optionDescriptionIem {
+  text: string
+  badge?: string
+  badgeColorScheme?: string
+}
+
+const OptionDescription = ({
+  listItems = [],
+}: {
+  listItems: optionDescriptionIem[]
+}) => {
   return (
     <>
       <UnorderedList color="secondary.400" ml="1.5rem">
-        {listItems.map((text, index) => (
-          <Tile.ListItem key={index} textStyle="body-2" textAlign="left">
-            {text}
-          </Tile.ListItem>
-        ))}
+        {listItems.map(
+          ({ text, badge, badgeColorScheme = 'success' }, index) => (
+            <Tile.ListItem key={index} textStyle="body-2" textAlign="left">
+              {text}
+              {badge && (
+                <Badge size="xs" ml="0.2rem" colorScheme={badgeColorScheme}>
+                  {badge}
+                </Badge>
+              )}
+            </Tile.ListItem>
+          ),
+        )}
       </UnorderedList>
     </>
   )
@@ -47,35 +64,16 @@ export const FormResponseOptions = forwardRef<
         </Tile.Subtitle>
         <OptionDescription
           listItems={[
-            'Attachments: up to 20MB per form',
-            'Up to Restricted and Sensitive (Normal) data',
-            'Supports webhooks for responses',
-            'Supports payments',
-          ]}
-        />
-      </Tile>
-      <Tile
-        ref={ref}
-        variant="complex"
-        icon={BiMailSend}
-        isActive={value === FormResponseMode.Email}
-        onClick={() => onChange(FormResponseMode.Email)}
-        flex={1}
-      >
-        <Tile.Title>Email mode form</Tile.Title>
-        <Tile.Subtitle>Receive responses in your inbox only</Tile.Subtitle>
-        <OptionDescription
-          listItems={[
-            'Attachments: up to 7MB per form',
-            'Up to Restricted and Sensitive (High) data',
+            { text: 'Supports webhooks for responses' },
+            { text: 'Supports payments' },
+            { text: 'Up to Restricted and Sensitive (Normal) data' },
           ]}
         />
       </Tile>
       <Tile
         ref={ref}
         variant="complex"
         icon={MultiParty}
-        badge={<Badge colorScheme="success">New</Badge>}
         isActive={value === FormResponseMode.Multirespondent}
         onClick={() => onChange(FormResponseMode.Multirespondent)}
         flex={1}
@@ -88,11 +86,25 @@ export const FormResponseOptions = forwardRef<
         </Tile.Subtitle>
         <OptionDescription
           listItems={[
-            'Attachments: Up to 20MB per form',
-            'Up to Restricted and Sensitive (Normal) data',
+            { text: 'Supports approvals', badge: 'New' },
+            { text: 'Up to Restricted and Sensitive (Normal) data' },
           ]}
         />
       </Tile>
+      <Tile
+        ref={ref}
+        variant="complex"
+        icon={BiMailSend}
+        isActive={value === FormResponseMode.Email}
+        onClick={() => onChange(FormResponseMode.Email)}
+        flex={1}
+      >
+        <Tile.Title>Email mode form</Tile.Title>
+        <Tile.Subtitle>Receive responses in your inbox only</Tile.Subtitle>
+        <OptionDescription
+          listItems={[{ text: 'Up to Restricted and Sensitive (High) data' }]}
+        />
+      </Tile>
     </Stack>
   )
 })