Project

General

Profile

Actions
Copy link

dev #1996

open

dev #1994: [Module] Tool submission and verification

[FE] Submission Tool

Added by Zahid Hassan about 1 year ago. Updated about 1 year ago.

Status:
In Progress
Priority:
High
Assignee:
Lutfor Rahman
Target version:
-
Start date:
03/04/2025
Due date:
% Done:

37%

Estimated time:
8:00 h (Total: 93:00 h)
Spent time:
28:00 h (Total: 75:00 h)

Description

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

Subtasks 32 (32 open — 0 closed)

dev #2003: [FE] Submission Tool Step 1PendingLutfor Rahman03/04/2025

Actions
dev #2005: [FE] Setup Multi-step formComplete Lutfor Rahman03/04/2025

Actions
dev #2054: [FE] Code peer reviewComplete 03/04/2025

Actions
dev #2007: [FE] Develop submission form (Step-1)In ProgressLutfor Rahman03/04/2025

Actions
dev #2055: [FE] Code peer reviewPending03/04/2025

Actions
dev #2010: [FE] Api integration (Step-1)PendingLutfor Rahman03/04/2025

Actions
dev #2056: [FE] Code peer reviewPending03/04/2025

Actions
dev #2013: [FE] Submission Tool Step 2Pending03/04/2025

Actions
dev #2015: [FE] Develop submission form (Step-2)PendingLutfor Rahman03/04/2025

Actions
dev #2057: [FE] Code peer reviewPending03/04/2025

Actions
dev #2017: [FE] Api integration (Step-2)PendingLutfor Rahman03/04/2025

Actions
dev #2058: [FE] Code peer reviewPending03/04/2025

Actions
dev #2020: [FE] Submission Tool Step 3PendingLutfor Rahman03/04/2025

Actions
dev #2023: [FE] Develop submission form (Step-3)In ProgressLutfor Rahman03/04/2025

Actions
dev #2059: [FE] Code peer reviewPending03/04/2025

Actions
dev #2025: [FE] Tool verificationPendingLutfor Rahman03/04/2025

Actions
dev #2026: [FE] Verification ModalsPendingLutfor Rahman03/04/2025

Actions
dev #2060: [FE] Code peer reviewPending03/04/2025

Actions
dev #2027: [FE] Embed codePendingLutfor Rahman03/04/2025

Actions
dev #2061: [FE] Code peer reviewPending03/04/2025

Actions
dev #2030: [FE] EmailPendingLutfor Rahman03/04/2025

Actions
dev #2062: [FE] Code peer reviewPending03/04/2025

Actions
dev #2032: [FE] Upload filePendingLutfor Rahman03/04/2025

Actions
dev #2063: [FE] Code peer reviewPending03/04/2025

Actions
dev #2064: [FE] Code peer reviewPending03/04/2025

Actions
dev #2034: [FE] Add a DNS recordPendingLutfor Rahman03/04/2025

Actions
dev #2036: [FE] Disclosure of termsPendingLutfor Rahman03/04/2025

Actions
dev #2039: [FE] Design and develop disclosure of termsPendingLutfor Rahman03/04/2025

Actions
dev #2065: [FE] Code peer reviewPending03/04/2025

Actions
dev #2041: [FE] FAQsPendingLutfor Rahman03/04/2025

Actions
dev #2045: [FE] Develop FAQsPendingLutfor Rahman03/04/2025

Actions
dev #2066: [FE] Code peer reviewPending03/04/2025

Actions
Actions
Copy link
 #1

Updated by Zahid Hassan about 1 year ago

  • Subject changed from [BE] Submission Tool to [FE] Submission Tool
Actions
Copy link
 #2

Updated by Lutfor Rahman about 1 year ago

  • Subtask #2003 added
Actions
Copy link
 #3

Updated by Lutfor Rahman about 1 year ago

  • Subtask #2013 added
Actions
Copy link
 #4

Updated by Lutfor Rahman about 1 year ago

  • Subtask #2020 added
Actions
Copy link
 #5

Updated by Lutfor Rahman about 1 year ago

  • Subtask #2025 added
Actions
Copy link
 #6

Updated by Lutfor Rahman about 1 year ago

  • Subtask #2036 added
Actions
Copy link
 #7

Updated by Lutfor Rahman about 1 year ago

  • Subtask #2041 added
Actions
Copy link
 #8

Updated by Lutfor Rahman about 1 year ago

  • Description updated (diff)
Actions
Copy link
 #9

Updated by Lutfor Rahman about 1 year ago

  • Description updated (diff)
  • Status changed from Pending to In Progress
  • Assignee set to Lutfor Rahman
  • Estimated time set to 2:00 h
Actions
Copy link
 #10

Updated by Lutfor Rahman about 1 year ago

  • Description updated (diff)
Actions
Copy link
 #11

Updated by Lutfor Rahman about 1 year ago

Enhance Platform and Social URLs (Bug fixes):
1. Min limit (1)
2. Max limit (5)
3. Remove unnecessary options and placeholders
4. Add option-wise validations
5. Remove the option that from the option left that is already added or used
6. Allow scrolling when dropdown is expanded

Actions
Copy link
 #12

Updated by Lutfor Rahman about 1 year ago

  1. Display reCAPTCHA when port forwarding.
  2. Remove triggers for other validations when tying in another field.
  3. Allow scrolling when the dropdown is expanded.
  4. Close the modal after Logging IN.
  5. Create a route likewise submit-ai for edit-ai.
  6. Allow the user to Sign UP.
  7. Create a new field for versioning.
  8. Separate Pros and Cons fields.
  9. Enhance (a). Platform and (b). Social link selector components:
    • Min limit (1)
    • Max limit (5)
    • Remove unnecessary options and placeholders
    • Add option-wise validations
    • Remove the option from the option left that is already added or used
    • Allow scrolling when the dropdown is expanded

[Continueing...]
SOLVED: 1, 2, 3, 4, & 9

Actions
Copy link
 #13

Updated by Lutfor Rahman about 1 year ago

  • Estimated time changed from 2:00 h to 8:00 h

New features and enhancements:

  • Dynamic IMPORT of release note editor
  • Add button style
  • Version number validation
  • Typical select (Status, date picker: month, year)
  • Selected date on hover color
Actions
Copy link
 #14

Updated by Lutfor Rahman about 1 year ago

  • Add total versions prop and conditional rendering for removal
  • Improve step change logic in multistep form
  • Resolve form submission inconsistency with the backend
  • Resolve the version entry release note editor issue
  • Improve tag entry logic
Actions
Copy link
 #15

Updated by Lutfor Rahman about 1 year ago

  • Update version validation regex
  • Combine tags and target users with temp tags and target users
  • Update logo and featured image fields to use url by fetching
  • Update api call to use user id instead of tool id
  • Dev testing: Mobile and Safari
Actions
Copy link
 #16

Updated by Lutfor Rahman about 1 year ago

API Integration

  1. Form Submissions
    • Step one form POST or PATCH
    • Step two form PATCH
    • Step three form submit
  2. Authentication Flows
    • Sign up
    • Sign in
    • Fetch user data

Key Files:

  • src/app/submit-ai/components/MultiStepForm.tsx
  • src/app/auth/signup/page.tsx
  • src/app/auth/email-verification/page.tsx
  • src/app/auth/signin/page.tsx

Requested Changes within Submit Tool Module

  1. Form Validation Improvements

    • Remove triggers for other validations when typing in another field

  2. UI/UX Enhancements

    • Allow scrolling when drop-down is expanded

  3. User Authentication

    • Allow the user to Sign Up

  4. New Features

    • Create a new field for versioning
    • Separate Pros and Cons fields

  5. Selector Component Enhancements (for Platform and Social link selectors)

    • Set minimum limit (1)
    • Set maximum limit (5)
    • Remove unnecessary options and placeholders
    • Add option-wise validations
    • Remove options that are already added/used from available options
    • Allow scrolling when drop-down is expanded

    Key Files:

    • src/components/form/fields/CustomPlatformURLsSelector.tsx
    • src/components/form/fields/CustomSocialLinksSelector.tsx

  6. Additional Developer Improvements

    • Dynamic IMPORT of release note editor
    • Add button style
    • Version number validation
    • Typical select implementation (Status, date picker: month, year)
    • Selected date on hover color
    • Add total versions prop and conditional rendering for removal
    • Improve step change logic in multi-step form
    • Resolve form submission inconsistency with the backend
    • Resolve the version entry release note editor issue
    • Improve tag entry logic
Actions
Copy link

Also available in: Atom PDF