Feature: Develop Multi-Step Form Architecture for AI Tool Submission¶

Tasks:¶

1. Develop the Tool Submission Page Title and Description:

   • Create a header component for the tool submission page.
   • Location for new header component:
     • src/app/submit-ai/components/SubmitHeader.tsx

2. Create a Multi-Step Form Architecture:

   • Implement a multi-step form with a stepper component for navigation.
     • Location for multi-step form and stepper components:
       • src/app/submit-ai/components/MultiStepForm.tsx
       • src/components/ui/stepper.tsx
   • Sub-tasks:
     • (I) Integrate and style a stepper component:
       • Stepper indicator and title
       • Stepper separator
       • Stepper buttons: Previous, Next, and Continue
     • (II) Develop three-step form:
       • (I) Step 1 Form:
         • Location: src/app/submit-ai/components/ToolBasicInfo.tsx
         • Sub-tasks:
           • a. Title
           • b. Fields:
             • Inputs (Tool name, tool overview, price, pricing plan, pricing plan URL)
             • Paired: Select & Input (Platform URLs)
               • Component: src/components/form/fields/CustomInputField.tsx
             • Text editor with skeleton (Tool description)
               • Components: src/components/form/text-editor/ToolDescriptionEditor.tsx
               • Skeleton: src/components/form/text-editor/TextEditorSkeleton.tsx
             • Checkbox (Price)
               • Component: src/components/form/fields/CustomCheckboxField.tsx
             • Tool description
               • Component: src/components/form/text-editor/ToolDescriptionEditor.tsx
           • c. Skeletons
             • Location: src/app/submit-ai/components/ToolBasicInfoSkeleton.tsx
       • (II) Step 2 Form:
         • Location: src/app/submit-ai/components/ToolMediaInfo.tsx
         • Sub-tasks:
           • a. Title
           • b. Fields:
             • Uploader (Logo and Featured image)
               • Component: src/components/form/fields/CustomLogoUploader.tsx
             • Selector (Category)
               • Component: src/components/form/fields/CustomCategorySelect.tsx
             • Multi selector (Tags, Target Users)
               • Components: src/components/form/fields/CustomTagField.tsx
               • src/components/form/fields/CustomTargetUsersField.tsx
             • Text editor with skeletons (Key features, Use cases, Target users)
               • Location: src/components/form/text-editor
             • Input (Email)
               • Component: src/components/form/fields/CustomInputField.tsx
           • c. Skeletons
             • Location: src/app/submit-ai/components/ToolMediaInfoSkeleton.tsx
       • (III) Step 3 Form:
         • Location: src/app/submit-ai/components/ToolAdditionalInfo.tsx
         • Sub-tasks:
           • a. Title
           • b. Fields:
             • Input (Tool video URL)
               • Component: src/components/form/fields/CustomInputField.tsx
             • Text editor with skeleton (Pros and cons)
               • Component: src/components/form/text-editor/ProsAndConsEditor.tsx
             • Paired: Select & Input (Social links and App links)
               • Component: src/components/form/fields/CustomSocialLinksSelector.tsx
             • ReCAPTCHA integration
               • Create a reCAPTCHA provider.
                 • Location: src/components/form/provider/ReCaptchaProvider.tsx
               • Create a route for verifying reCAPTCHA
                 • Location: src/app/api/verify-recaptcha/route.ts
               • Use the reCAPTCHA set-up within the tool submission page.
                 • Location: src/app/submit-ai/page.tsx
           • c. Skeletons
             • Location: src/app/submit-ai/components/ToolAdditionalInfoSkeleton.tsx