🚀 Update Seller Account Creation and Shop/Product Addition Workflow

[mdazfar2]

📝 Description

Currently, when a user creates an account as a Seller on our platform, the flow is as follows:

1. Enter Email ✉️
2. Enter OTP 🔑
3. Access Seller Dashboard 🛠️

Exact problematic which I don't want 😣

However, after the account is created, the Seller has immediate access to the dashboard without any guidance for setting up their shop and products. To enhance the user experience, we need to modify the flow for better onboarding and ensure that Sellers add their shops and products step by step.

Screenshot of the above Problematic

🔧 Proposed Changes

1. Account Creation Flow Update

   • Once the Seller account is created (email verified and OTP entered), a pop-up alert or modal should prompt the user to add their shop details before accessing the Seller Dashboard. 📋
   • The pop-up should have a clear call-to-action button for "Add Your Shop" 🏪 and provide a smooth transition to a shop details form.

2. 🛒 Shop Details Form

   • The form for adding a shop should include the following fields:
     • Shop Name (Required) 🏷️
     • Shop Address (Required) 📍
     • Contact Number (Required) ☎️
     • Shop Category (Dropdown with various categories like Electronics, Clothing, Grocery, etc.) 📦
     • Shop Description (Optional, brief description of the shop) 📝
     • Business Hours (Optional, specify opening and closing times) ⏰
     • Shop Image Upload (Optional, for uploading a picture of the shop) 📸

3. ✅ Confirmation After Adding Shop

   • After successfully adding the shop details, the Seller should see a confirmation pop-up or success message indicating that the shop has been added. 🎉
   • The pop-up should then prompt the Seller to add products to their shop. 🛍️

4. 🛍️ Product Addition Flow

   • A new pop-up alert should prompt the user to "Add Products" with a button leading to the product details form. 📦
   • The product form should include:
     • Product Name (Required) 🏷️
     • Product Category (Dropdown to select the relevant category) 📋
     • Price (Required) 💰
     • Stock Quantity (Required) 📊
     • Product Description (Optional) 📝
     • Product Images Upload (Optional, for uploading multiple product images) 📸
     • SKU Code (Optional, for inventory tracking) 🔢

I know, you think about SKU that what is SKU? 🤔💭

SKU stands for Stock Keeping Unit. It is a unique identifier used by retailers and businesses to manage inventory. An SKU code typically consists of a combination of letters and numbers that represent specific details about a product, such as:

• Product type (e.g., T-shirt, smartphone)
• Brand (e.g., Nike, Apple)
• Model or version (e.g., iPhone 13, M)
• Color (e.g., Red, Black)
• Size or other variations (e.g., Large, 128GB)

SKUs help in tracking inventory, identifying products, managing stock, and streamlining sales processes in stores or warehouses. For example, if a store sells multiple types of shoes, each shoe variant (color, size, style) would have its own SKU code to distinguish it from others.

5. 🎊 Final Confirmation
   • After adding at least one product, display a final confirmation message that their shop and products are set up successfully, with a button to access the Seller Dashboard. 🎈

🔍 Additional Notes

• Make sure the pop-ups or modals are user-friendly and do not disrupt the flow. 🚦
• The Seller should not be able to skip adding a shop or product after creating an account; these steps should be mandatory for accessing the dashboard. 🚫

🛠️ Steps to Implement

1. Update the account creation workflow to include pop-up alerts for adding shop and product details. 🔄
2. Create forms for collecting the necessary shop and product information. 📄
3. Implement pop-up notifications and success messages for better guidance. 🔔
4. Test the new flow to ensure it is intuitive and error-free. ✔️

🧊 Points reward for GSSoC'24-Ext for this Issue for Leaderboard

• level3 Label --> 45 points ➕

📎 References

For more details on the codebase, check the README.md. 📚

Checklist

• [X] Yes, this is Under GSSoC'24-Ext
• [X] yes, this is Hacktoberfest'24 accepted

[github-actions[bot]]

Hello mdazfar2! Thanks for opening an issue in Ezyshop! 🚀

• We'll get back to you as soon as possible.

• Hope you star our Repo.

• Join our Discord Server to collaborate and discuss further.

[ShivanshPlays]

@mdazfar2 ques1: the popup in the step2 has to be in 1 form or in step by step

ques2: the flow to setup is currently: add billboard -> add category -> add product with details.

This flow ensures the there is no abandoned product and it is always associated with a category and for displaying billboard in the category filter of the shop page there is always a billboard related to that category which provides (merchants) users a customizable shop experience, so do we need to change this flow or shall we accommodate the same flow in the PR?

ques3: do you need animations to guide the seller through his setting up process

Also can I break this issue into 2 parts and it will take time to accommodate the changes you suggest. And I will provide explanation of all the changes made and justification for level of my work.

I would love to work on this, please assign me under GSSOC

[mdazfar2]

@ShivanshPlays

Question 1: The popup in step 2 has to be in 1 form or step by step?

• For a better user experience, we should make the popups step by step. This will help guide the seller through the process of setting up their shop and adding products in a more structured way. Each step should include clear instructions, starting with adding the shop details, followed by adding categories (if applicable), and then the products.

---

Question 2: The flow to set up is currently: add billboard -> add category -> add product with details. Do we need to change this flow or shall we accommodate the same flow in the PR?

• The current flow makes sense for ensuring that products are not abandoned and are always associated with a category and billboard. Let's keep this flow intact. However, let's add an initial popup guiding the user through these steps, ensuring clarity at each stage (e.g., "Step 1: Add Billboard", "Step 2: Add Category", "Step 3: Add Products with Details"). This way, the flow remains consistent while providing better guidance to users.

---

Question 3: Do you need animations to guide the seller through the setup process?

• Yes, adding subtle animations would be great for improving the user experience! Animations can provide visual feedback, making the process feel more engaging. Consider adding animations for transitions between steps, form submissions, and success notifications. These animations should be smooth and not overly distracting, aiming to make the setup process feel seamless.

Question 4: Also can I break this issue into 2 parts and it will take time to accommodate the changes you suggest. And I will provide explanation of all the changes made and justification for level of my work.

• Yes, you can create two PRs, but we will label them as Level 2, Level 2, or Level 1 according to the Pull Request.