feat: add learn more for for-each

Author: kevinkim-ogp

packages/backend/src/apps/toolbox/actions/for-each/index.ts

@@ -20,6 +20,7 @@ const action: IRawAction = {
   key: 'forEach',
   description: 'Repeat actions for each item',
   groupsLaterSteps: true,
+  announcementContentKey: 'learn-for-each',
   arguments: [
     {
       label: 'Choose items',

packages/frontend/src/components/EditorLayout/AnnouncementModal/assets/ForEach.json

@@ -0,0 +1,28 @@
+import dedent from 'dedent'
+
+import ForEachAnimation from '../assets/ForEach.json'
+
+export const FOR_EACH_ITEM_LIST = [
+  {
+    title: 'How to use for each item',
+    details: dedent`
+    This action lets you repeat the same steps for multiple items. These items can be rows from your Tiles/M365 tables, or FormSG checkbox options.
+    `,
+    multimedia: {
+      animationData: ForEachAnimation,
+    },
+  },
+  {
+    title: 'For each item',
+    details: dedent`
+    Example use cases:
+      * Send individual emails to a list of unconfirmed event attendees, reminding them to RSVP for an upcoming event.
+
+
+      * Retrieve a list of your team members and find each person's assigned tasks for the week, then send a personalized email to each person with their tasks.
+
+
+      * Go through each checkbox option in a FormSG submission and send emails to different recipients based on the selected options.
+    `,
+  },
+]

packages/frontend/src/components/EditorLayout/AnnouncementModal/content/ForEachItemList.tsx

@@ -1,8 +1,13 @@
+import { FOR_EACH_ITEM_LIST } from './ForEachItemList'
 import { ANNOUNCEMENT_ITEM_LIST } from './UiRevampItemList'
 
 export const ANNOUNCEMENT_CONTENT_MAP = {
   'ui-revamp-2025': {
     announcementContent: ANNOUNCEMENT_ITEM_LIST,
     buttonText: 'Experience it now',
   },
+  'learn-for-each': {
+    announcementContent: FOR_EACH_ITEM_LIST,
+    buttonText: 'Try it now',
+  },
 }

packages/frontend/src/components/EditorLayout/AnnouncementModal/content/index.ts

@@ -14,6 +14,8 @@ import { useStepMetadata } from '@/hooks/useStepMetadata'
 
 import FlowStepConfigurationModal from '../FlowStepConfigurationModal'
 
+import LearnMoreInfobox from './LearnMoreInfobox'
+
 type StepProps = {
   step: IStep
   isLastStep: boolean
@@ -74,6 +76,9 @@ export default function Step(props: StepProps): React.ReactElement | null {
           >
             <Fragment>
               {/* Place ChooseConnectionSubstep outside the accordion structure */}
+              <LearnMoreInfobox
+                selectedActionOrTrigger={selectedActionOrTrigger}
+              />
               {hasConnection && app && (
                 <ChooseConnectionSubstep
                   step={step}