copy changes for for-each (#1223)

## TL;DR
* What's new
* Copy changes for:
  * link to guide
  * message for suggestions when variable dropdown is empty

## Screenshots
<img width="636" height="721" alt="Screenshot 2025-09-22 at 5 42 40 PM"
src="https://github.com/user-attachments/assets/84775815-579d-44a4-b109-343e76bbda66"
/>


<img width="1146" height="350" alt="Screenshot 2025-09-22 at 5 43 03 PM"
src="https://github.com/user-attachments/assets/e0174f67-fe64-436c-8e56-86a37b91699c"
/>

Author: kevinkim-ogp

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

@@ -26,17 +26,21 @@ const action: IRawAction = {
   description: 'Repeat actions for each item',
   groupsLaterSteps: true,
   isNew: true,
+  linkToGuide:
+    'https://guide.plumber.gov.sg/user-guides/actions/for-each-item-coming-soon',
   arguments: [
     {
       label: 'Choose items',
       description:
-        'Supported items include rows in Tiles/M365 Excel and FormSG checkboxes',
+        'Items you can choose from: Find multiple rows, Find multiple table rows, or checkboxes/table from your form.',
       key: 'items',
       type: 'string' as const,
       required: true,
       variables: true,
       variableTypes: ['array', 'table'],
       singleVariableSelection: true,
+      noVariablesMessage:
+        ' No variables available - add/check one of the following steps above: Find multiple rows, Find multiple table rows, or include a checkbox/table field in your FormSG.',
     },
   ],
 

packages/backend/src/graphql/schema.graphql

@@ -167,6 +167,7 @@ type Action {
   groupsLaterSteps: Boolean
   setupMessage: SetupMessage
   isNew: Boolean
+  linkToGuide: String
   substeps: [ActionSubstep]
 }
 
@@ -206,6 +207,7 @@ type ActionSubstepArgument {
   hiddenIf: FieldVisibilityCondition
   addRowButtonText: String
   tooltipText: String
+  noVariablesMessage: String
 
   # Only for string and multiline
   singleVariableSelection: Boolean

packages/frontend/src/components/EditorRightDrawer/LearnFromGuideInfobox.tsx

@@ -0,0 +1,43 @@
+import { IAction, ITrigger } from '@plumber/types'
+
+import { MdLightbulbOutline, MdOpenInNew } from 'react-icons/md'
+import { Flex, HStack, Icon, Link, Text } from '@chakra-ui/react'
+import { Infobox } from '@opengovsg/design-system-react'
+
+interface LearnFromGuideInfoboxProps {
+  selectedActionOrTrigger: IAction | ITrigger | undefined
+}
+
+export default function LearnFromGuideInfobox(
+  props: LearnFromGuideInfoboxProps,
+) {
+  const { selectedActionOrTrigger } = props
+  const { linkToGuide } = selectedActionOrTrigger || {}
+
+  if (!linkToGuide) {
+    return null
+  }
+
+  return (
+    <>
+      <Infobox
+        icon={<Icon as={MdLightbulbOutline} color="primary.500" />}
+        style={{
+          borderRadius: '0.25rem',
+          backgroundColor: '#FEF8FB',
+          marginBottom: '1rem',
+        }}
+      >
+        <Flex flexDir={{ base: 'column', md: 'row' }} gap={2} flex={1}>
+          Learn how to set this up!{' '}
+          <Link href={linkToGuide} isExternal>
+            <HStack spacing={1}>
+              <Text>Read our guide</Text>
+              <Icon as={MdOpenInNew} boxSize={4} />
+            </HStack>
+          </Link>
+        </Flex>
+      </Infobox>
+    </>
+  )
+}

packages/frontend/src/components/EditorRightDrawer/Step.tsx

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

packages/frontend/src/components/InputCreator/index.tsx

@@ -43,6 +43,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
     type,
     placeholder,
     tooltipText,
+    noVariablesMessage,
   } = schema
 
   const computedName = namePrefix ? `${namePrefix}.${name}` : name
@@ -119,6 +120,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
         placeholder={placeholder}
         variablesEnabled={variables}
         isRich
+        noVariablesMessage={noVariablesMessage}
       />
     )
   }
@@ -139,6 +141,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
           parentType={parentType}
           autoFocus={autoFocus}
           singleVariableSelection={schema.singleVariableSelection}
+          noVariablesMessage={noVariablesMessage}
         />
       )
     }

packages/frontend/src/components/NewsDrawer/NewsItemList.ts

@@ -2,6 +2,7 @@ import dedent from 'dedent'
 
 import * as URLS from '@/config/urls'
 
+import ForEachAnimation from './assets/For-EachGraphic.json'
 import IfThenAnimation from './assets/If-ThenGraphic.json'
 import { NewsItemProps } from './NewsItem'
 import { NEW_ENHANCEMENT_TAG, NEW_FEATURE_TAG } from './NewsItemTag'
@@ -10,15 +11,30 @@ const IF_THEN_EXTERNAL_LINK =
   'https://guide.plumber.gov.sg/user-guides/actions/toolbox'
 
 export const NEWS_ITEM_LIST: NewsItemProps[] = [
+  {
+    date: '2025-09-22',
+    tag: NEW_FEATURE_TAG,
+    title: `For each item — automate reminders for events, tasks and more!`,
+    details: dedent`
+      This action is used to repeat actions on multiple items at a time. Items can be rows in your tiles table/M365 tables or FormSG checkboxes/table rows. Example use case shown below: Send individualised emails to a list of event attendees to remind them about an upcoming event.
+
+      Get started instantly:
+        * Try our **Schedule reminders to a list of emails** template
+        * Read our [guide](https://guide.plumber.gov.sg/user-guides/actions/for-each-item-coming-soon)
+    `,
+    multimedia: {
+      animationData: ForEachAnimation,
+    },
+  },
   {
     date: '2025-06-25',
     tag: NEW_ENHANCEMENT_TAG,
     title: `We've made FormSG integration a lil' better`,
     details: dedent`
-      👓 **Clearer variable names** 
+      👓 **Clearer variable names**
       FormSG variables now reflect the actual question text, making them easier to recognise at a glance.
 
-      🧹 **Less clutter, fewer mistakes** 
+      🧹 **Less clutter, fewer mistakes**
       Question text variables are now hidden by default to reduce visual noise and prevent accidental clicks.
 
       🔄 **Easier data switching**

packages/frontend/src/components/NewsDrawer/assets/For-EachGraphic.json

@@ -9,10 +9,11 @@ import SuggestionsWrapper from '../SuggestionsWrapper'
 interface SuggestionsProps {
   data: StepWithVariables[]
   onSuggestionClick: (variable: Variable) => void
+  noVariablesMessage?: string
 }
 
 function Suggestions(props: SuggestionsProps) {
-  const { data, onSuggestionClick = () => null } = props
+  const { data, onSuggestionClick = () => null, noVariablesMessage } = props
   const [current, setCurrent] = useState<number>(0)
 
   const isEmpty = data.reduce(
@@ -23,7 +24,8 @@ function Suggestions(props: SuggestionsProps) {
   if (isEmpty) {
     return (
       <Text p={4} opacity={0.5} textStyle="body-1" color="base.content.medium">
-        No variables available - complete earlier steps to use them here
+        {noVariablesMessage ??
+          'No variables available - complete earlier steps to use them here'}
       </Text>
     )
   }

packages/frontend/src/components/RichTextEditor/Suggestions.tsx

@@ -99,6 +99,7 @@ interface EditorProps {
   parentType?: string
   autoFocus?: boolean
   singleVariableSelection?: boolean
+  noVariablesMessage?: string
 }
 const Editor = ({
   onChange,
@@ -112,6 +113,7 @@ const Editor = ({
   parentType,
   singleVariableSelection,
   autoFocus = false,
+  noVariablesMessage,
 }: EditorProps) => {
   const { priorExecutionSteps } = useContext(StepExecutionsContext)
   const { allApps } = useContext(EditorContext)
@@ -319,6 +321,7 @@ const Editor = ({
                 <Suggestions
                   data={stepsWithVariables}
                   onSuggestionClick={(v) => editable && handleVariableClick(v)}
+                  noVariablesMessage={noVariablesMessage}
                 />
               </PopoverContent>
             </Portal>
@@ -344,6 +347,7 @@ interface RichTextEditorProps {
   parentType?: string
   autoFocus?: boolean
   singleVariableSelection?: boolean
+  noVariablesMessage?: string
 }
 const RichTextEditor = ({
   required,
@@ -360,6 +364,7 @@ const RichTextEditor = ({
   parentType,
   autoFocus,
   singleVariableSelection,
+  noVariablesMessage,
 }: RichTextEditorProps) => {
   const { readOnly } = useContext(EditorContext)
   const { control, getValues } = useFormContext()
@@ -407,6 +412,7 @@ const RichTextEditor = ({
             parentType={parentType}
             autoFocus={shouldAutoFocus}
             singleVariableSelection={singleVariableSelection}
+            noVariablesMessage={noVariablesMessage}
           />
         )}
       />

packages/frontend/src/components/RichTextEditor/index.tsx

@@ -175,6 +175,7 @@ export const GET_APPS = gql`
         }
         groupsLaterSteps
         isNew
+        linkToGuide
         substeps {
           key
           name
@@ -194,6 +195,7 @@ export const GET_APPS = gql`
             customStyle
             tooltipText
             value
+            noVariablesMessage
             options {
               label
               description