dev #1996
Updated by Lutfor Rahman about 1 year ago
# 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`