refactor: move static options out of config (for content)

Author: sidvishnoi

frontend/app/components/redesign/components/BuilderForm.tsx

@@ -7,11 +7,12 @@ import {
 import { toolState, toolActions, type StableKey } from '~/stores/toolStore'
 import { useUI } from '~/stores/uiStore'
 import { useSnapshot } from 'valtio'
-import type { ToolContent } from './ContentBuilder'
+import type { ContentOptions, ToolContent } from './ContentBuilder'
 import type { ToolAppearance } from './AppearanceBuilder'
 
 interface BuilderFormProps {
   config: ToolContent | ToolAppearance
+  options: ContentOptions
   toolName: 'widget' | 'banner'
   onRefresh: (section: 'appearance' | 'content') => void
   onBuildStepComplete?: (isComplete: boolean) => void
@@ -23,6 +24,7 @@ export const BuilderForm: React.FC<BuilderFormProps> = ({
   onBuildStepComplete,
   onRefresh,
   config,
+  options,
   toolName,
   positionSelector,
   colorsSelector
@@ -74,6 +76,7 @@ export const BuilderForm: React.FC<BuilderFormProps> = ({
         <ContentBuilder
           onRefresh={() => onRefresh('content')}
           config={config as ToolContent}
+          options={options}
         />
         <AppearanceBuilder
           onRefresh={() => onRefresh('appearance')}

frontend/app/components/redesign/components/ContentBuilder.tsx

@@ -4,15 +4,19 @@ import { BuilderAccordion } from './BuilderAccordion'
 import { TextareaField, Divider, Checkbox } from '@/components'
 import { TitleInput } from './builder/TitleInput'
 
-export interface ToolContent {
+export interface ContentOptions {
   suggestedTitles: string[]
+
   titleHelpText: string
   titleMaxLength: number
+
   messageLabel: string
   messagePlaceholder: string
   messageHelpText: string
   messageMaxLength: number
+}
 
+export interface ToolContent {
   currentTitle: string
   currentMessage: string
   isDescriptionVisible: boolean
@@ -25,11 +29,13 @@ export interface ToolContent {
 
 interface ContentBuilderProps {
   config: ToolContent
+  options: ContentOptions
   onRefresh: () => void
 }
 
 export const ContentBuilder: React.FC<ContentBuilderProps> = ({
   config,
+  options,
   onRefresh
 }) => {
   const titleInputRef = useRef<HTMLInputElement>(null)
@@ -75,16 +81,16 @@ export const ContentBuilder: React.FC<ContentBuilderProps> = ({
         <TitleInput
           value={config.currentTitle}
           onChange={config.onTitleChange}
-          suggestions={config.suggestedTitles}
-          maxLength={config.titleMaxLength}
-          helpText={config.titleHelpText}
+          suggestions={options.suggestedTitles}
+          maxLength={options.titleMaxLength}
+          helpText={options.titleHelpText}
         />
 
         <Divider />
 
         <div className="flex flex-col gap-xs">
           <h4 className="text-base leading-md font-bold text-text-primary">
-            {config.messageLabel}
+            {options.messageLabel}
           </h4>
           <div className="flex gap-lg items-start xl:flex-row flex-col">
             <div className="flex items-center gap-xs shrink-0">
@@ -105,11 +111,11 @@ export const ContentBuilder: React.FC<ContentBuilderProps> = ({
                   config.onMessageChange(e.target.value)
                 }}
                 currentLength={config.currentMessage.length || 0}
-                maxLength={config.messageMaxLength}
+                maxLength={options.messageMaxLength}
                 showCounter={true}
-                helpText={config.messageHelpText}
+                helpText={options.messageHelpText}
                 className="h-[84px]"
-                placeholder={config.messagePlaceholder}
+                placeholder={options.messagePlaceholder}
                 disabled={!isMessageVisible}
               />
             </div>

frontend/app/routes/banner.tsx

@@ -42,7 +42,10 @@ import { commitSession, getSession } from '~/utils/session.server.js'
 import { useBodyClass } from '~/hooks/useBodyClass'
 import { SVGSpinner } from '@/assets'
 import type { BannerConfig, Banner as BannerComponent } from '@tools/components'
-import type { ToolContent } from '~/components/redesign/components/ContentBuilder'
+import type {
+  ContentOptions,
+  ToolContent
+} from '~/components/redesign/components/ContentBuilder'
 import type { BannerToolAppearance } from '~/components/redesign/components/AppearanceBuilder'
 import { BANNER_FONT_SIZES } from '@shared/types'
 import type {
@@ -177,6 +180,22 @@ const BannerPreview = React.forwardRef<BannerHandle>((props, ref) => {
 
 BannerPreview.displayName = 'BannerPreview'
 
+const contentOptions: ContentOptions = {
+  suggestedTitles: [
+    'How to support?',
+    'Fund me',
+    'Pay as you browse',
+    'Easy donate',
+    'Support my work'
+  ],
+  titleHelpText: 'Strong message to help people engage with Web Monetization',
+  titleMaxLength: 60,
+  messageLabel: 'Banner message',
+  messagePlaceholder: 'Enter your banner message...',
+  messageHelpText: 'Strong message to help people engage with Web Monetization',
+  messageMaxLength: 300
+}
+
 export default function Banner() {
   const snap = useSnapshot(toolState)
   const { actions: uiActions } = useUI()
@@ -190,20 +209,6 @@ export default function Banner() {
   usePathTracker()
 
   const config: ToolContent | BannerToolAppearance = {
-    suggestedTitles: [
-      'How to support?',
-      'Fund me',
-      'Pay as you browse',
-      'Easy donate',
-      'Support my work'
-    ],
-    titleHelpText: 'Strong message to help people engage with Web Monetization',
-    titleMaxLength: 60,
-    messageLabel: 'Banner message',
-    messagePlaceholder: 'Enter your banner message...',
-    messageHelpText:
-      'Strong message to help people engage with Web Monetization',
-    messageMaxLength: 300,
     currentTitle: snap.currentConfig?.bannerTitleText,
     currentMessage: snap.currentConfig?.bannerDescriptionText,
     isDescriptionVisible: snap.currentConfig?.bannerDescriptionVisible ?? true,
@@ -389,6 +394,7 @@ export default function Banner() {
                     <BuilderForm
                       toolName="banner"
                       config={config}
+                      options={contentOptions}
                       onBuildStepComplete={(isComplete) =>
                         toolActions.setBuildCompleteStep(
                           isComplete ? 'filled' : 'unfilled'

frontend/app/routes/widget.tsx

@@ -39,7 +39,10 @@ import type {
   WidgetConfig,
   PaymentWidget as WidgetComponent
 } from '@tools/components'
-import type { ToolContent } from '~/components/redesign/components/ContentBuilder'
+import type {
+  ContentOptions,
+  ToolContent
+} from '~/components/redesign/components/ContentBuilder'
 import type { WidgetToolAppearance } from '~/components/redesign/components/AppearanceBuilder'
 import { WIDGET_FONT_SIZES } from '@shared/types'
 import type {
@@ -165,6 +168,22 @@ const WidgetPreview: React.FC = () => {
   )
 }
 
+const options: ContentOptions = {
+  suggestedTitles: [
+    'Support this content',
+    'Make a payment',
+    'Contribute now',
+    'Help support',
+    'One-time donation'
+  ],
+  titleHelpText: 'Message to encourage one-time payments',
+  titleMaxLength: 30,
+  messageLabel: 'Widget message',
+  messagePlaceholder: 'Enter your widget message...',
+  messageHelpText: 'Describe how payments support your work',
+  messageMaxLength: 300
+}
+
 export default function Widget() {
   const snap = useSnapshot(toolState)
   const { actions: uiActions } = useUI()
@@ -177,19 +196,6 @@ export default function Widget() {
   usePathTracker()
 
   const config: ToolContent | WidgetToolAppearance = {
-    suggestedTitles: [
-      'Support this content',
-      'Make a payment',
-      'Contribute now',
-      'Help support',
-      'One-time donation'
-    ],
-    titleHelpText: 'Message to encourage one-time payments',
-    titleMaxLength: 30,
-    messageLabel: 'Widget message',
-    messagePlaceholder: 'Enter your widget message...',
-    messageHelpText: 'Describe how payments support your work',
-    messageMaxLength: 300,
     currentTitle: snap.currentConfig?.widgetTitleText,
     currentMessage: snap.currentConfig?.widgetDescriptionText,
     isDescriptionVisible: snap.currentConfig?.widgetDescriptionVisible ?? true,
@@ -372,6 +378,7 @@ export default function Widget() {
                     <BuilderForm
                       toolName="widget"
                       config={config}
+                      options={options}
                       onBuildStepComplete={(isComplete) =>
                         toolActions.setBuildCompleteStep(
                           isComplete ? 'filled' : 'unfilled'