New banner step when editing a quest

[Marchand-Nicolas]

Description 📹

Add a new "Banner" step right before the preview. This step will allow users to define a banner object and update it via a request to /admin/quest/update with the provided banner field.

Example banner object:

{
  "tag": "Optional",
  "title": "Write a thread on xSTRK",
  "description": "Top 10 threads get $50 each.",
  "cta": "Participate",
  "href": "https://forms.gle/dxcDWjETeYCzRHtG7",
  "image": "/karnot/endurBanner.webp"
}

Proposed Actions 🛠️

Here’s a checklist of actions to follow for resolving this issue:

1. Fork and Create Branch:
   Fork the repository and create a new branch using the issue number:

   git checkout -b fix-[issue-number]

2. Implement Changes:
   • Add a new "Banner" step in the admin form flow, located before the preview step.
   • Create a new component for the banner step, allowing users to input the tag, title, description, cta, href, and image fields.
   • Integrate the banner data into the questInput state object.
   • Ensure the banner data is sent in the /admin/quest/update request under the banner field.
   • Validate user input for the banner fields to ensure proper data is submitted.

Example modification in the update request:

const handleUpdateQuest = useCallback(async () => {
  try {
    if (!questId.current) return;
    const response = await AdminService.updateQuest({
      ...questInput,
      banner: {
        tag: bannerInput.tag,
        title: bannerInput.title,
        description: bannerInput.description,
        cta: bannerInput.cta,
        href: bannerInput.href,
        image: bannerInput.image,
      },
    });
    if (!response) return;
  } catch (error) {
    console.error("Error while updating quest", error);
  }
}, [questInput, bannerInput]);

3. Run Tests and Commit Changes:
   Make sure your changes don't break existing functionality and commit with a clear message:

   git commit -m "Fix: Add Banner step before preview in admin form flow"

Required 📋

To keep our workflow smooth, please make sure you follow these guidelines:

• Assignment: Don't create a pull request if you weren’t assigned to this issue.
• Timeframe: Complete the task within 3 business days.
• Closing the Issue: In your PR description, close the issue by writing Close #[issue_id].
• Review Process:
  • Once you've submitted your PR, change the label to "ready for review".
  • If changes are requested, address them and then update the label back to "ready for review" once done.
• Testing: Test your PR locally before pushing, and verify that tests and build are working after pushing.

Thank you for your contribution 🙏

⚠️ WARNING: Failure to follow the requirements above may result in being added to the OnlyDust blacklist, affecting your ability to receive future rewards.

[No-bodyq]

I'd be happy to do this.

[OWK50GA]

Hi, @Marchand-Nicolas
I will like to handle this issue

[mimisavage]

Let me try this one!

[Agbeleshe]

Can I try solving this issue?

[Michaelkingsdev]

@Marchand-Nicolas
Let me handle this

[ryzen-xp]

I’d love to work on this task.