Quick modal window for review - Waiviogit/waivio GitHub Wiki

Quick modal window for review located in https://dining.gifts/. Quick dialog to submit dish photos in 3 steps - select a restaurant, dish / drink, add photos / text / tags, submit.

Click to open the modal:

  1. home page dining.gifts -> "Submit dish photos" button;
  2. map page dining.gifts -> "Submit dish photos" button or "Earn" button.

image image

TITLE Submit dish photos and earn crypto!
CROSS cross button to close the modal window
STEPS 3 steps to show for user where he is now:
  • Find the dish
  • Submit photos
  • Confirm and earn

Depending on which step the user is on, the desired step is displayed in orange, the rest in gray.

1 step

image

In this step, user needs to choose a restaurant and dish or drink for review. User can write a review on any restaurant (with campaign or without). Restaurants with campaigns have "Earn" or "Earn up to". "Select restaurant" is search field for restaurants.

image

"Select dish or drink" is disabled until the user selects a restaurant. It is search field for dish or drink for specific restaurants. User can write a review on any dish or drink (with campaign or without). Dishes or drinks with campaigns have "Earn". Only one campaign with the highest reward is displayed per dish / drink.

image

After choosing restaurant / dish / drink, card is displayed.

"Next" button blocked until user chooses restaurant and dish / drink. After clicking, user goes to the 2nd step.

image

2 Step

image

Requirement block - all requirements for post-review are located here.

  • "Add minimum 1 original photos of {dish/drink}" - where {dish/drink} - link to secondary object (dish / drink). Image block:
  • Area to choose photo - download or via link. Text block "Did you like the presentation? The taste?" - not necessary to add text, can be empty.

Hashtags block: by default we add some hashtags - waivio, food, restaurant, {city}. {city} - from primary object (restaurant). In order to add a hashtag, you need to fully enter its name and press Enter.

Footer:

  • "Previous" button - come back to step 1.
  • "YOU EARN: C${price}" - show rewards for review.
  • "Next" - go to step 3. If the requirements for the post are not met, then the button will be inactive.

image

Campaign booking takes place from the second to the third step.

3 Step

image

Info: This review meets all the technical requirements of the reservation and entitles you to specified rewards. The sponsor reserves the right to review all submissions manually before paying the rewards. In many jurisdictions, readers should be informed that the review has been partially sponsored. In order to meet these requirements, the following notice will be added to your post: This review was sponsored in part by @{sponsor}.

Where "the reservation" - link to reservation post, @{sponsor} - link to sponsor profile.

Footer:

  • "Previous" button - come back to step 2, reservation will be canceled.
  • "YOU EARN: C${price}" - show rewards for review.
  • "Confirm" - publish the review.

Result: image

Additional information and changes:

⚠️ **GitHub.com Fallback** ⚠️