Post project event page

Even if you posted the project, it still isn't ready to be processed by Bunny Studio. First, you need to approve the project on your site. After doing that, the fulfillment process will start in Bunny Studio

Event handler

On the widget component, you will see the code below. The useEffect React hook adds a listener to an event that the widget launches when a project is posted correctly. In the return, we remove the event listener to clean up the process.

You will see a highlighted function with the name postProjectEventHandler. This function receives an event parameter, ev. The ev parameter is a native JavaScript event.

  const postProjectEventHandler = (ev) => {
    //Manage the event project posted
  }
  useEffect(() => {
    const widget = document.getElementById('widget')
    widget.addEventListener('bsSubmit', postProjectEventHandler)
    return () => {
      widget.removeEventListener('bsSubmit', postProjectEventHandler)
    }
  }, [])

The event data structure

The data in the project comes inside the parameter detail in the ev object.

The structure looks like this:

  ev.detail ={
    success_hash: "#project/posted/2Gu1hY3hBXQ8YO/payment/1EyB8Z1JpVGvfq/success",
    error_hash: "#project/posted/2Gu1hY3hBXQ8YO/payment/1EyB8Z1JpVGvfq/error",
    hash_id_completed_form: "2Gu1hY3hBXQ8YO",
    hash_id_bill: "1EyB8Z1JpVGvfq",
    total: 220.2 //this is the price the widget shows to the client
  }

If you want to approve the project, navigate to the success_hash. If you don't want to approve the project, navigate to the error_hash.

Example approving the project

Import navigate, import { useNavigate } from "react-router-dom"; and use the hook const navigate = useNavigate();

  const postProjectEventHandler = (ev) => {
    /**
     * Starts approval logic
    */
    navigate(`/widget#${success_hash}`)
  }