Git Product home page Git Product logo

beckn-ui-workspace's Introduction

Beckn-ui-workspace

Description

Beckn-ui-workspace is a monorepo consisting of all Beckn possible frontend use-cases and BAPs.

Installation and Usage

  1. Use specific node version: First install nvm on your local machine and then run the below commad to ensure accurate node version. This will automatically switch the node version.

    nvm use
  2. Install Dependencies: To get started, run the following command in the root of the repository to install all the required modules using Yarn:

    yarn
  3. Running Individual Projects: Each sub-project can be run individually by executing their specific commands. You can find these commands in the package.json file located in the root directory.

Configurations

This monorepo is globally configured with the following tools and libraries:

  1. Yarn Workspace: Used for creating and managing sub-projects within the monorepo.

  2. Typescript: Provides robust type checking and enhances code quality.

  3. Jest: Utilized for unit testing, ensuring the reliability of the codebase.

  4. Prettier and ESLint: These tools are used for code formatting and style consistency, ensuring a clean and readable codebase.

  5. Husky: Sets up commit hooks to run on both commit and pre-commit actions, helping maintain code quality and enforcing best practices.

  6. Commit-lint: Enforces a structured commit message format. Please refer to the Conventional Commits documentation for commit message conventions.

Feel free to explore and contribute to the various front-end use-cases and BAPs within this monorepo. If you have any questions or need further assistance, please refer to the individual project documentation or reach out to the repository maintainers. Happy coding!

beckn-ui-workspace's People

Contributors

ankitshogun avatar ujjwal502 avatar ujjwaleminds avatar kundaneminds avatar vishi24 avatar prasad-takale-eminds avatar em-tpt-bbandi avatar faizmagic avatar

Stargazers

Ibrahim V K avatar Soumalya Bhattacharya avatar HarshVsingh1 avatar Mitch avatar  avatar Aashima wadhwa avatar  avatar

Watchers

Pramod Varma avatar  avatar Viraj avatar

beckn-ui-workspace's Issues

UI Development for Login - Use existing login functionality to create responsive sign-in and sign-up pages

Description

Use the existing login functionality to create responsive sign-in and sign-up pages. This involves updating the UI to ensure it is responsive and functional across different devices like mobile, iPad, and web version. The respective designs are linked below.

Goals

  • Utilize the existing login functionality for the sign-in and sign-up pages.
  • Ensure the sign-in and sign-up pages are responsive and functional across different devices like mobile, iPad, and web version.
  • Maintain consistency with the existing login logic.

Expected Outcome

  • Responsive sign-in and sign-up pages that use the existing login functionality.
  • Consistent user experience across different devices based on the designs.

Acceptance Criteria

  • Sign-in and sign-up pages use the existing login functionality.
  • Pages are responsive and work correctly on different device across different devices like mobile, iPad, and web version.
  • UI is consistent with the existing login logic and design.

Implementation Details

  • Modify the UI to incorporate the existing login functionality for sign-in and sign-up.
  • Ensure responsiveness and compatibility with different devices.

Mockups / Wireframes

  • Figma for mobile, iPad, and web can be found from here.

Mobile Mockups

Image

iPad Mockups

Image

Web Mockups

Image
Image

Product Name

Beckn

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • UI/UX design skills

Complexity

Medium

Category

UI Development

Sub Category

Responsive Sign-in and Sign-up Pages

Postman testing - Taxi BPP project

Description

Currently Taxi BPP is on version 0.9.3 and Open Turf uses 0.9.4. Hence, there is a need to perform testing between the Taxi BPP and the Multi model Open Turf BAP to check appropriate request and response is working.

Demo video of the app is here.

Wayfinder BAP APK file is here.

Pre-requisites

  • Postman collections from Open Turf Team is available here

Goals

  • Use Postman to test the APIs of the Taxi BPP and the Multi model BAP.
  • Monitor API performance and ensure it meets the project requirements.

Expected Outcome

  • Successful testing of APIs using Postman.
  • Monitoring of API performance and identification of any issues.

Acceptance Criteria

  • APIs of the Taxi BPP and the Multi model BAP are tested using Postman.
  • API performance meets the project requirements.

Implementation Details

  • Use Postman to send requests to the APIs of the Taxi BPP and the Multi model BAP.
  • Monitor the responses and performance of the APIs using Postman.

Mockups / Wireframes

N/A

Product Name

Taxi BPP, Multi model BAP

Domain

N/A

Tech Skills Needed

  • Postman
  • API testing knowledge

Complexity

Medium

Category

Testing

Sub Category

Postman Testing

Changes in EC screens for demo to Bill Gates

Description

Make the following changes in the Experience Center (EC) screens of UEI for the demo to Bill Gates:

  1. Change the main title text of the EC to "welcome to open networks for energy"
  2. Add descriptions above the app selection buttons for Pulse Energy, Sheru, and Turno.

Goals

  • Update the main title text of the EC to reflect "Welcome to Open Energy Networks."
  • Add descriptions above the app selection buttons to provide context for Pulse Energy, Sheru, and Turno.

Expected Outcome

  • The main title text of the EC is updated to "Welcome to Open Energy Networks."
  • Descriptions are added above the app selection buttons for Pulse Energy, Sheru, and Turno.

Acceptance Criteria

  • The main title text of the EC is changed to "Welcome to Open Energy Networks."
  • Descriptions are added above the app selection buttons for Pulse Energy, Sheru, and Turno as follows:
    • Pulse ENERGY - ev charging aggregator
    • Sheru - virtual energy aggregator
    • Turno - battery aggregator

Implementation Details

  • Modify the main title text of the EC to "welcome to open networks for energy"
  • Add descriptions above the app selection buttons for Pulse Energy, Sheru, and Turno.

Mockups / Wireframes

To be added

Product Name

Beckn

#Domain

EV

Tech Skills Needed

  • Frontend development
  • UI/UX design

Complexity

Low

Category

Development

Subcategory

Text and Description Update
Development

Create new card for Regenerative Agri app on EC

Description

Create a new card on EC for the Regenerative Agri app and reuse the video for EC. Retain the layout of EC as per the latest design, same as UEI.

Goals

  • Create a new card on EC for the Regenerative Agri app.
  • Reuse the video for EC to showcase the Regenerative Agri app.
  • Maintain the layout of EC as per the latest design, consistent with UEI.

Expected Outcome

  • A new card on EC that showcases the Regenerative Agri app.
  • The video for EC is reused to provide a visual demonstration of the Regenerative Agri app.
  • The layout of EC is consistent with the latest design, similar to UEI.

Acceptance Criteria

  • The new card for the Regenerative Agri app is created on EC.
  • The video for EC is integrated into the card to showcase the Regenerative Agri app.
  • The layout of the new card matches the latest design of EC, consistent with UEI.

Implementation Details

  • Create a new card template for the Regenerative Agri app on EC.
  • Integrate the video for EC to showcase the Regenerative Agri app.
  • Ensure that the layout of the new card is consistent with the latest design of EC, similar to UEI.

Mockups / Wireframes

To be added.

Product Name

Beckn

#Domain

Agriculture

Tech Skills Needed

  • Frontend development skills
  • Video integration

Complexity

Medium

Category

Development

Subcategory

Development

UI Development - Fulfillment (cancel) - Data fetching and mapping

Description

Implement data fetching and mapping for the cancel functionality on the Fulfillment (cancel) page. This includes fetching data related to the order cancellation from the backend API and mapping it to the appropriate UI components.

Goals

  • Fetch data related to order cancellation from the backend API.
  • Map the fetched data to the UI components of the cancel functionality.

Expected Outcome

  • Data fetching and mapping for the cancel functionality on the Fulfillment (cancel) page.
  • Efficient and responsive data handling for order cancellation.

Acceptance Criteria

  • Data related to order cancellation is fetched from the backend API and displayed on the UI.
  • Data is accurately mapped to the UI components for the cancel functionality.

Implementation Details

  • Implement data fetching logic to retrieve order cancellation data from the backend.
  • Map the fetched data to the UI components for displaying order cancellation information.

Mockups / Wireframes

Link to Figma for mobile, iPad, and web

Mobile Mockup

Image

iPad Mockup

Image

Image

Web Mockup

Image

Product Name

Beckn, Retail BAP

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • API integration skills

Complexity

Medium

Category

UI Development

Subcategory

Fulfillment (cancel) - Data Fetching and Mapping

UI Development - Develop UI Screens for Home Page

Description

Develop UI screens for the home page (landing page) with responsive screens, fonts and sizes, including appropriate padding. Icons are added as per designs for improved visual appeal and functionality. This will be used on mobile, iPad and web.

Goals

  • Develop UI screens for the home page with responsive pages, fonts and sizes.
  • Icons are added as per designs for improved visual appeal and functionality.
  • This will be used on mobile, iPad and web.

Expected Outcome

  • UI screens for the home page with responsive fonts, sizes, and padding on all the devices.
  • Icons are added as per designs for improved visual appeal and functionality.

Acceptance Criteria

  • UI screens for the home page are developed with responsive fonts, sizes, and padding.
  • Icons are added above the search bar and function correctly.

Implementation Details

  • Develop the home page with a focus on responsive fonts and sizes on all the devices.
  • Ensure that the design is responsive and works well on different devices.

Mockups / Wireframes

Link to Figma designs

Mobile Mockup

Image

iPad Mockup

Image

Web Mockup

Image

Product Name

Retail BAP

Domain

Retail

Tech Skills Needed

  • Frontend development skills

Complexity

Medium

Category

UI Development

Sub Category

Home Page UI Development

Taxi Driver App - POC of google maps redirection

Description

Proof of concept for the Taxi Driver application to redirect to google maps to navigate on map:

  1. Navigate driver from current location to the pick up location.
  2. Navigate driver from pick up location to drop off location.

Goals

  • When navigation is required on the driver application it should redirect the navigation to google maps with the correct 'to' and 'from' locations

Expected Outcome

A redirect to google maps for the navigation functionality in the Taxi Driver app.

Acceptance Criteria

  • Redirect to google maps app when require to navigate
  • Redirect to google maps website if app is not found

[Please note that the below section of the ticket has to be in the format as mentioned as it is key to enabling proper listing of the project. Please only choose the options mentioned under the headings wherever applicable.]

Product Name

Taxi BPP Driver Application

Domain

Mobility

Tech Skills Needed:

React, NextJS

Complexity

Low

Category

Feature

Create a PRD Document for enhancing the Taxi BPP application

Description

Create a PRD Document for enhancing the Taxi BPP application to be used for the Multi Model Pilot Project. The current Taxi BPP application has most of the required features, but it needs to be enhanced with the necessary features which is required for the Multi Model Pilot Project.

Goals

  • The Taxi BPP application will be used as the BPP (driver) application for the Multi Model Pilot Project
  • The application should support live navigation using google maps
  • The application should be mobile responsive and should work with all the diff devices
  • The application should be upgraded to use the latest version of the react and react components
  • The application will be tested against the Multi Model Mobility BAP application ( build using React Native) developed by the Open Turf Team

Expected Outcome

PRD document which covers all the scope that is required for the Multi Model Pilot Project.
The PRD is to be updated in Confluence: https://fide-official.atlassian.net/wiki/spaces/BPM1/pages/250904595/PRD+for+Taxi+BPP

Acceptance Criteria

  • PRD document which covers all the scope that is required for the Multi Model Pilot Project

Implementation Details

Documentation

Mockups / Wireframes

NA


[Please note that the below section of the ticket has to be in the format as mentioned as it is key to enabling proper listing of the project. Please only choose the options mentioned under the headings wherever applicable.]

Product Name

Taxi BPP

Domain

Mobility

Tech Skills Needed:

Documentation

Complexity

Low

Category

Documentation

Sub Category

Documentation

UI Development - Ordering (confirm) - Create confirm screen - adding BB

Description

Develop a confirm screen for the Ordering (confirm) process, including the necessary building block (BB) additions to the screen.

Goals

  • Design and implement a confirm screen for the Ordering (confirm) process.
  • Add the necessary building blocks to the screen for a complete user interface.

Expected Outcome

  • Confirm screen for the Ordering (confirm) process that is visually appealing and functional.
  • Addition of necessary building blocks to the screen for a complete user interface.

Acceptance Criteria

  • Confirm screen is developed and integrated into the Ordering (confirm) process.
  • Building blocks are added to the screen as needed for a complete user interface.

Implementation Details

  • Design the layout and functionality of the confirm screen.
  • Add the necessary building blocks to the screen for a complete user interface.

Mockups / Wireframes

Link to Figma designs

Product Name

Beckn

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • UI design skills

Complexity

Medium

Category

UI Development

Subcategory

Ordering (confirm) - Confirm Screen

UI Development - Post Fulfillment (rating) - Rating data fetching and mapping

Description

Implement data fetching and mapping for the rating functionality on the Post Fulfillment (rating) page and mapping it to the appropriate UI components.

Goals

  • Fetch data related to rating from the backend API if any.
  • Map the fetched data to the UI components of the rating functionality.

Expected Outcome

  • Data fetching and mapping for the rating functionality on the Post Fulfillment (rating) page.
  • Efficient and responsive data handling for submitting ratings.

Acceptance Criteria

  • Data related to the rating is fetched from the backend API and displayed on the UI if any.
  • Data is accurately mapped to the UI components for submitting ratings.

Implementation Details

  • Implement data fetching logic to retrieve rating data from the backend.
  • Map the fetched data to the UI components for displaying and submitting ratings.

Mockups / Wireframes

Link to Figma designs

Mobile Mockup

Image

iPad Mockup

Image

Web Mockup

Image

Product Name

Beckn, Retail BAP

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • API integration skills

Complexity

Medium

Category

UI Development

Subcategory

Post Fulfillment (rating) - Rating Data Fetching and Mapping

Improve flow on EC for simplicity and intuitiveness

Description

Enhance the BAP flow on the Experience Center (EC) to be simpler and more intuitive. Specifically, add a loader screen to be shown while submitting reviews and implement a "Verified" badge with a "Verification in progress" status.

Goals

  • Improve the overall user experience of the EC by simplifying and enhancing the BAP flow.
  • Add visual elements such as a loader screen and "Verified" badge to provide feedback to users.

Expected Outcome

  • A more user-friendly and intuitive BAP flow on the EC.
  • Implementation of a loader screen to provide feedback during review submission.
  • Addition of a "Verified" badge with a "Verification in progress" status for enhanced credibility.

Acceptance Criteria

  • BAP flow on the EC is simplified and more intuitive.
  • Loader screen is displayed while submitting reviews, providing visual feedback to users.
  • "Verified" badge is implemented with appropriate status updates.

Implementation Details

  • Design and implement the loader screen for review submission.
  • Integrate the "Verified" badge into the EC interface with dynamic status updates.

Mockups / Wireframes

N/A

Product Name

Beckn

#Domain

Retail, Decentralized social networks

Tech Skills Needed

  • Frontend development skills
  • UI/UX design skills

Complexity

Medium

Category

UI/UX, Development

Subcategory

Flow Improvement

EC should be responsive

Description

The current EC is not responsive to devices and browsers. Analyze the current state and suggest a way to make the EC responsive across devices and browsers.

Goals

  • Make the EC responsive to different devices and browsers.
  • Ensure a consistent user experience across all devices and browsers.

Expected Outcome

  • A responsive design for the EC that adapts to various screen sizes and browser types.
  • Improved user experience on different devices and browsers.

Acceptance Criteria

  • EC design is responsive and adjusts appropriately to different screen sizes.
  • EC is tested on various devices and browsers to ensure responsiveness.

Implementation Details

  • Analyze the current EC design and identify areas that need improvement for responsiveness.
  • Implement responsive design principles to make the EC adaptable to different screen sizes and browsers.
  • Test the EC on different devices and browsers to verify responsiveness.

Mockups / Wireframes

N/A

Product Name

Beckn

#Domain

N/A

Tech Skills Needed

  • Frontend development skills
  • Responsive design

Complexity

Medium

Category

UI/UX

Subcategory

Responsive Design

Migrate Experience Center to Mono repo

Description
Migrate the existing Experience Center to the mono repo from the existing repo.

Goals
Migrate the existing code to the mono repo

Expected Outcome
Experience Center should be able to be deployed from the mono repo

Acceptance Criteria
The application should have the existing flow after the migration
The application should be able to deployable from the mono repo

Implementation Details
The existing Experience Center should migrated from https://github.com/beckn/beckn-exp-guide-ui to the mono repo.

Product Name
Experience Center

Domain
All

Tech Skills Needed:
NextJS

Complexity
Low

Category
Migration

Create analysis doc for Data Fetching and Storing (Caching)

Description

Create a general document for data fetching and storing (caching) to ensure scalability and efficiency in the production-grade retail BAP. Share the analysis on how this will be achieved and document it on this ticket.

Goals

  • Create a general workflow for data fetching and storing (caching) for the production-grade retail BAP.
  • Ensure scalability and efficiency in data handling.

Expected Outcome

  • General workflow documented for data fetching and storing (caching) in the production-grade retail BAP.

Acceptance Criteria

  • Workflow is created and documented.
  • Workflow ensures scalability and efficiency in data handling.

Implementation Details

  • Analyze the data requirements of the production-grade retail BAP.
  • Design a workflow for data fetching and storing (caching) that meets the scalability and efficiency requirements.
  • Document the workflow in this ticket.

Mockups / Wireframes

Link to Figma designs

Product Name

Beckn, Retail BAP

Domain

Retail

Tech Skills Needed

  • Data handling and caching knowledge
  • Understanding of scalability in data management

Complexity

High

Category

Data Management

Sub Category

Data Fetching and Storing Workflow

UI Development - Ordering logic (init) - Develop logic for fetching data and mapping for cart screen

Description

Develop the logic to fetch data and map for the cart screen on the Ordering (init) page. This includes fetching data related to selected items from the BPP and mapping it to the appropriate UI components. The implementation should be responsive for mobile, iPad, and web.

Goals

  • Develop the logic to fetch data for the cart screen on the Ordering (init) page.
  • Map fetched data to the appropriate UI components for the cart screen.

Expected Outcome

  • Logic developed to fetch data and map for the cart screen.
  • Data related to selected items fetched and ready for display in the cart.

Acceptance Criteria

  • Logic is implemented and integrated into the Ordering (init) page.
  • Data related to selected items is fetched and mapped correctly for display in the cart.

Implementation Details

  • Implement logic to fetch data related to selected items from the BPP.
  • Map the fetched data to the corresponding UI components for displaying in the cart.
  • Ensure that the logic is responsive and works well on mobile, iPad, and web.

Mockups / Wireframes

Link to Figma designs

Product Name

Retail BAP

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • API integration skills

Complexity

Medium

Category

Cart

Sub Category

Data fetching and mapping on cart screen

UI Development - Develop Cart Screen for Ordering (Init) Page

Description

Develop the cart screen page to display selected items for purchase, that is the functionality of the cart screen. The implementation should be responsive for mobile, iPad, and web as per designs.

Goals

  • Develop the cart screen for the Ordering (init) page.

Expected Outcome

  • Cart screen developed for the Ordering (init) page.
  • Selected items displayed correctly in the cart.

Acceptance Criteria

  • Cart screen is developed and integrated into the Ordering (init) page.
  • Selected items are displayed accurately in the cart.

Implementation Details

  • Develop the cart screen to display selected items.
  • Implement functionality to add and remove items from the cart.
  • Ensure that the cart screen is responsive and works well on mobile, iPad, and web.

Mockups / Wireframes

Link to Figma designs

Mobile Mockups

Image

iPad Mockups

Image

Web Mockups

Image

Product Name

Beckn, Retail BAP

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • UI/UX design implementation skills

Complexity

Medium

Category

UI Development

Sub Category

Cart Screen - Ordering (Init) Page

UI Development - Post Fulfillment (rating) - Create Rating screen

Description

Develop the Rating screen for the Post Fulfillment (rating) process to allow users to rate their experience. This includes designing the layout and functionality of the Rating screen.

Goals

  • Design and implement the Rating screen for the Post Fulfillment (rating) process.
  • Provide users with a simple and intuitive way to rate their experience.

Expected Outcome

  • Rating screen for the Post Fulfillment (rating) process that allows users to rate their experience.
  • User-friendly design for the Rating screen.

Acceptance Criteria

  • Rating screen is developed and integrated into the Post Fulfillment (rating) process.
  • Users can rate their experience using the Rating screen.

Implementation Details

  • Design the layout of the Rating screen to allow users to rate their experience.
  • Implement functionality to submit ratings and display confirmation messages.

Mockups / Wireframes

Link to Figma designs

Mobile Mockup

Image

iPad Mockup

Image

Web Mockup

Image

Product Name

Beckn

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • UI design skills

Complexity

Medium

Category

UI Development

Subcategory

Post Fulfillment (rating) - Rating Screen

UI Development - Data fetching and mapping for discovery (Search) page

Description

Implement data fetching from the BPP and mapping for the Discovery (search) page to populate search results. This includes fetching data from the backend API and mapping it to the appropriate UI components. This will be responsive and for all 3 devices, mobile, iPad and web.

Goals

  • Implement data fetching for the Discovery (search) page.
  • Map fetched data to the appropriate UI components for displaying search results.

Expected Outcome

  • Data fetching and mapping implemented for the Discovery (search) page.
  • Search results displayed correctly on the page.

Acceptance Criteria

  • Data is fetched from the backend API when the user performs a search.
  • Fetched data is mapped to the appropriate UI components for displaying search results.

Implementation Details

  • Set up data fetching logic to retrieve search results from the backend API from the BPP.
  • Map the fetched data to the corresponding UI components for displaying search results.
  • Ensure that it does not cause performance issues.

Mockups / Wireframes

Link to Figma designs

Product Name

Beckn, Retail BAP

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • API integration skills

Complexity

Medium

Category

UI Development

Sub Category

Data Fetching and Mapping - Discovery (Search) Page

UI Development - Ordering (confirm) - Create an appropriate loading screen or indicator

Description

Develop an appropriate loading screen or indicator for the Ordering (confirm) process to inform users that their request is being processed.

Goals

  • Design and implement a loading screen or indicator for the Ordering (confirm) process.
  • Provide users with visual feedback that their request is being processed.

Expected Outcome

  • Loading screen or indicator that is visually appealing and informative.
  • Clear indication to users that their request is being processed.

Acceptance Criteria

  • Loading screen or indicator is implemented and displayed during the Ordering (confirm) process.
  • Indicator provides clear feedback to users about the status of their request.

Implementation Details

  • Design a loading screen or indicator that aligns with the overall UI/UX of the application.
  • Implement the loading screen or indicator using best practices for performance and user experience.

Mockups / Wireframes

Link to Figma designs

Product Name

Beckn

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • UI design skills

Complexity

Low

Category

UI Development

Subcategory

Ordering (confirm) - Loading Indicator

Migrate Taxi Driver App to beckn-ui-workspace mono repo

Description

Migrate the existing Taxi Driver application from the existing repo to the mono repo.

Goals

  • Migrate the existing code to the mono repo

Expected Outcome

Taxi Driver application should be able to be deployed from the mono repo

Acceptance Criteria

  • The application should have the existing flow after the migration
  • The application should be able to deployable from the mono repo

Implementation Details

The existing Taxi Driver application should migrated from https://github.com/beckn/on-demand-mobility-bpp-ui to the mono repo.


Product Name

Taxi BPP Driver Application

Domain

Mobility

Tech Skills Needed:

  • React
  • NextJS

Complexity

Medium

Category

Migration

UEI card with mesh diagram - UI/UX

Description

Create UI/UX designs for the mesh diagram required on the UEI card in the EC. The mesh diagram should visually represent the network of interconnected devices in a simple and intuitive way. Reference can be found in the older mesh diagram.

Goals

  • Design a visually appealing and informative mesh diagram for the UEI card.
  • Ensure the mesh diagram effectively communicates the concept of interconnected devices.

Expected Outcome

  • UI/UX designs that enhance the UEI card with a mesh diagram.
  • A visually appealing and informative representation of interconnected devices.

Acceptance Criteria

  • UI/UX designs are created for the mesh diagram and for the UEI card.
  • The mesh diagram effectively communicates the concept of interconnected devices.
  • Designs are reviewed and approved by the team.

Implementation Details

  • Create wireframes for the mesh diagram to establish the layout and structure.
  • Design the visual elements of the mesh diagram to represent devices and connections.
  • Ensure the design is consistent with the overall UI/UX of the EC.

Mockups / Wireframes

To be added

Product Name

Beckn

Domain

EV

Tech Skills Needed

  • UI/UX design skills
  • Graphic design skills

Complexity

Medium

Category

UI/UX

Subcategory

Design for UEI

UI Development - Fulfillment (update) - Create update screen development

Description

Develop the update screen for the Fulfillment (update) process to allow users to modify their orders. This includes designing the layout and functionality of the update screen.

Goals

  • Design and implement the update screen for the Fulfillment (update) process.
  • Provide users with the ability to modify their orders.

Expected Outcome

  • Update screen for the Fulfillment (update) process that allows users to modify their orders.
  • User-friendly design for the update screen.

Acceptance Criteria

  • Update screen is developed and integrated into the Fulfillment (update) process.
  • Users can modify their orders using the update screen.

Implementation Details

  • Design the layout of the update screen to allow users to modify their orders.
  • Implement functionality for modifying orders (e.g., adding/removing items, changing delivery details).

Mockups / Wireframes

Mobile Mockups

Image

iPad Mockups

Image

Web Mockups

Image

Image

Image

Product Name

Beckn

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • UI design skills

Complexity

Medium

Category

UI Development

Subcategory

Fulfillment (update) - Update Screen Development

UI Development - Fulfillment (cancel) - Create cancel pop-up on UI

Description

Develop a cancel pop-up on the UI for the Fulfillment (cancel) process. This pop-up should allow users to cancel their orders easily and provide them with confirmation of the cancellation.

Goals

  • Design and implement a cancel pop-up on the UI for the Fulfillment (cancel) process.
  • Provide users with a simple and intuitive way to cancel their orders.

Expected Outcome

  • Cancel pop-up on the UI for the Fulfillment (cancel) process that allows users to cancel orders.
  • Confirmation of cancellation displayed to users.

Acceptance Criteria

  • Cancel pop-up is developed and integrated into the UI for the Fulfillment (cancel) process.
  • Users can cancel orders using the pop-up and receive confirmation of the cancellation.

Implementation Details

  • Design the layout and behavior of the cancel pop-up.
  • Implement functionality to cancel orders and display confirmation messages.

Mockups / Wireframes

Link to Figma for mobile, iPad, and web

Mobile Mockup

Image

iPad Mockup

Image

Image

Web Mockup

Image

Product Name

Beckn

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • UI design skills

Complexity

Medium

Category

UI Development

Sub Category

Fulfillment (cancel) - Cancel Pop-up

UI Development - Fulfillment (track) - Page pop-up for showing tracking URL

Description

Implement a page pop-up on the Fulfillment (track) page to show the tracking URL for orders. This pop-up should provide users with a convenient way to track their orders without leaving the current page.

Goals

  • Design and implement a page pop-up for showing the tracking URL.
  • Provide users with a seamless and convenient tracking experience.

Expected Outcome

  • Page pop-up on the Fulfillment (track) page that displays the tracking URL.
  • Seamless integration of the pop-up with the existing UI.

Acceptance Criteria

  • Page pop-up is implemented and accessible from the Fulfillment (track) page.
  • Users can view the tracking URL without leaving the current page.

Implementation Details

  • Design the layout and behavior of the page pop-up.
  • Implement functionality to fetch and display the tracking URL in the pop-up.

Mockups / Wireframes

Link to Figma for mobile, iPad, and web

Mobile Mockup

Image

iPad Mockup

Image

Image

Web Mockup

Image

Product Name

Beckn

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • UI/UX design skills

Complexity

Medium

Category

UI Development

Sub Category

Fulfillment (track) - Tracking URL Page Pop-up

UI Development - Develop Checkout Flow Screens for Ordering (Init) Page

Description

Develop the checkout flow screens for the Ordering (init) page to guide users through the checkout process. This includes implementing screens for entering shipping information, payment options, selecting delivery options, etc. This starts after the cart screen until the order confirmation screen. The implementation should be responsive for mobile, iPad, and web.

Goals

  • Develop checkout flow screens for the Ordering (init) page.
  • Implement screens for entering shipping information, payment options, selecting delivery options, etc.

Expected Outcome

  • Checkout flow screens developed for the Ordering (init) page.
  • Users guided through the checkout process with clear and intuitive screens.

Acceptance Criteria

  • Checkout flow screens are developed and integrated into the Ordering (init) page.
  • Screens for entering shipping information, payment options, selecting delivery options, etc., are implemented and functional.

Implementation Details

  • Develop the flow of the checkout flow screens.
  • Implement screens for entering shipping information, payment options, selecting delivery options, etc.
  • Ensure that the checkout flow screens are responsive and work well on mobile, iPad, and web.

Mockups / Wireframes

Link to Figma designs

Mobile Mockups

Image

iPad Mockups

Image
Image
Image

Web Mockups

Image
Image
Image

Product Name

Beckn, Retail BAP

Domain

Retail

Tech Skills Needed

  • Frontend development skills

Complexity

Medium

Category

UI Development

Sub Category

Checkout Flow Screens

Repo/folder structure for migration of EC codes to Beckn UI workspace GitHub repo

Description

Analyze the existing Beckn UI workspace GitHub repo and suggest a repo/folder structure for migration of EC codes to the Beckn UI workspace GitHub repo. Explain the structure for the migration.

Goals

  • Define a clear and organized structure for migrating EC codes to the Beckn UI workspace GitHub repo.
  • Ensure compatibility and seamless integration with the existing Beckn UI workspace GitHub repo.

Expected Outcome

  • A documented repo/folder structure that aligns with the Beckn UI workspace GitHub repo's architecture and requirements.
  • A plan outlining the migration process and timeline for implementation.

Acceptance Criteria

  • Proposed structure must be compatible with the existing Beckn UI workspace GitHub repo.
  • Structure must be well-documented and easy to understand for team members.
  • Migration plan must include steps for testing and validation of the new structure.

Implementation Details

  • Analyze the current repo structure of the Beckn UI workspace GitHub repo.
  • Identify areas for integrating EC codes into the existing structure.
  • Propose a new folder structure or modifications to the existing structure for seamless integration.
  • Define steps for migrating existing EC codes to the new structure, including any necessary updates or modifications.

Mockups / Wireframes

N/A

Product Name

Beckn

#Domain

N/A

Tech Skills Needed

N/A

Complexity

Medium

Category

N/A

Subcategory

N/A

Taxi BPP - Integration testing with Multi model BAP with the Taxi BPP

Description

Perform actual end-to-end testing to integrate the Taxi BPP with the Multi-Model BAP (with open turf) in the Beckn Mobility app. This testing will ensure that the integration works as expected and meets project requirements.

Goals

  • Perform UI testing for the integration.
  • Conduct functionality testing to ensure all features work as expected.
  • Perform integration testing to verify the Taxi BPP integrates seamlessly with the Multi-Model BAP.
  • Adding new bugs if any are found and re-test after bug fixes. Adding of bugs to now happen on GitHub itself and not Jira.

Expected Outcome

  • Successful integration of Taxi BPP with Multi-Model BAP.
  • Identification and resolution of any bugs or issues.

Acceptance Criteria

  • Integration is successful and meets project requirements.
  • Bugs are identified and resolved promptly.
  • Testing process and results are documented.

Implementation Details

  • Perform UI testing to ensure the integration is visually appealing and user-friendly.
  • Conduct functionality testing to verify all features work correctly.
  • Perform integration testing to ensure seamless interaction between Taxi BPP and Multi-Model BAP.
  • Document all bugs and issues found during testing and re-test after fixes.

Product Name

Beckn

Domain

Mobility

Tech Skills Needed

  • Testing tools and frameworks
  • Understanding of integration concepts

Complexity

Medium to High

Category

Testing

Sub Category

end to end testing

Taxi Driver App - Enhance the driver flow to navigate on google maps

Description
Taxi Driver application to redirect to google maps to navigate the driver to the pick up location and to the drop off location.

Goals
When navigation is required on the driver application it should redirect the navigation to google maps with the correct to and from locations

Expected Outcome
A redirect to google maps for the navigation functionality in the Taxi Driver app.

Acceptance Criteria

  • Redirect to google maps from the driver location to the pick-up location when 'Navigate' button is clicked after accepting the ride
  • Redirect to google maps from the current pick-up location to the drop off location when 'Start Ride' button is clicked

Product Name
Taxi BPP Driver Application

Domain
Mobility

Tech Skills Needed:
React, NextJS

Complexity
Low

Category
Feature

UI Development - Ordering (init) - Checkout flow data fetching and mapping

Description

Implement data fetching and mapping for the checkout flow screens on the Ordering (init) page. This includes fetching data related to shipping options, delivery times, etc., from the backend API and mapping it to the appropriate UI components.

Goals

  • Fetch data related to checkout flow (e.g., shipping options, delivery times) from the backend API.
  • Map the fetched data to the UI components of the checkout flow screens.

Expected Outcome

  • Checkout flow screens on the Ordering (init) page with populated data related to shipping options, delivery times, etc.
  • Data fetching and mapping that is efficient and responsive.

Acceptance Criteria

  • Data related to checkout flow is fetched from the backend API and displayed on the checkout flow screens.
  • Data is mapped accurately to the UI components of the checkout flow screens.

Implementation Details

  • Implement data fetching logic to retrieve checkout flow data from the backend.
  • Map the fetched data to the UI components of the checkout flow screens.

Mockups / Wireframes

Link to Figma designs

Image

Product Name

Beckn

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • API integration skills

Complexity

Medium

Category

UI Development

Sub Category

Ordering (init) - Checkout Flow Data Fetching

Analysis and research for production grade BAP for products

Description

Conduct analysis from the PRD and designs and research to get started with the production-grade retail BAP. This involves understanding the requirements, constraints, and utilizing existing components.

Goals

  • Conduct analysis from the PRD from here and designs to understand the requirements for the production-grade retail BAP.
  • Research to utilize existing components and understand constraints for the project.

Expected Outcome

  • Comprehensive analysis and research report detailing the requirements, constraints, and components to be utilized for the production-grade retail BAP.
  • Share the analysis on this ticket before closing the issue.

Acceptance Criteria

  • Analysis from the PRD and designs is conducted.
  • Research is done to utilize existing components and understand constraints.

Implementation Details

  • Review the PRD and designs for the production-grade retail BAP to understand the project requirements.
  • Research existing components and technologies that can be utilized for the project.
  • Compile a detailed analysis and research report.

Mockups / Wireframes

Link to Figma designs

Product Name

Retail BAP

Domain

Retail

Tech Skills Needed

  • Research and analysis skills
  • Understanding of retail BAP functionalities

Complexity

Medium

Category

Analysis and Research

Sub Category

Project Analysis and Research

UI Development - Fulfillment (update) - Update data fetching and mapping

Description

Implement data fetching and mapping for the update screen on the Fulfillment (update) process. This includes fetching data related to the order update from the backend API if any and mapping it to the appropriate UI components.

Goals

  • Fetch data related to the order update from the backend API if any.
  • Map the fetched data to the UI components of the update screen.

Expected Outcome

  • Update screen on the Fulfillment (update) process with populated data related to the order update.
  • Data fetching and mapping that is efficient and responsive.

Acceptance Criteria

  • Data related to the order update is fetched from the backend API and displayed on the update screen.
  • Data is mapped accurately to the UI components of the update screen.

Implementation Details

  • Implement data fetching logic to retrieve order update data from the backend.
  • Map the fetched data to the UI components of the update screen.

Mockups / Wireframes

Link to Figma designs

Product Name

Beckn

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • API integration skills

Complexity

Medium

Category

UI Development

Subcategory

Fulfillment (update) - Update Screen Data Fetching

UX designs for Retail BAP

Description

Create UI/UX designs for the Retail BAP based on the PRD for the Product. The designs should be responsive and cater to web, tablet/iPad, and mobile devices.

Goals

  • Design a user-friendly and visually appealing interface for the product (BAP).
  • Ensure the designs are responsive and optimized for web, tablet/iPad, and mobile devices.

Expected Outcome

  • UI/UX designs that align with the PRD for product (BAP).
  • Responsive designs that provide a consistent user experience across different devices.

Acceptance Criteria

  • UI/UX designs are created for the retail product (BAP).
  • Designs are responsive and optimized for web, tablet/iPad, and mobile devices.
  • Designs are reviewed and approved by the team.

Implementation Details

  • Create wireframes and mockups for the retail product (BAP) interface.
  • Design responsive layouts for web, tablet/iPad, and mobile devices.
  • Ensure the designs adhere to the branding and style guidelines of the project.

Mockups / Wireframes

Link to Figma designs

Product Name

Beckn, Retail BAP

Domain

Retail

Tech Skills Needed

  • UI/UX design skills

Complexity

High

Category

UI/UX

Subcategory

Design

UI Development - Post Fulfillment (support) - Update necessary UI screen

Description

Update the necessary UI screen to allow the user to avail various support options for their order on the Post Fulfillment (support) page. This includes adding new UI components and updating existing ones to provide a seamless support experience.

Goals

  • Update the UI screen to allow users to avail various support options for their order.
  • Provide users with a seamless support experience.

Expected Outcome

  • Updated UI screen on the Post Fulfillment (support) page that allows users to avail support options for their order.
  • Appropriate integrations are implemented to support flows for options chosen by user.
  • User-friendly design for the updated UI screen.

Acceptance Criteria

  • UI screen is updated and integrated into the Post Fulfillment (support) page.
  • Users can easily access and avail support options for their order.

Implementation Details

  • Design the layout of the updated UI screen to provide support options.
  • Implement functionality to allow users to avail support options.

Mockups / Wireframes

Link to Figma for mobile, iPad, and web

Mobile Mockup

Image

iPad Mockup

Image

Image

Web Mockup

Image

Product Name

Beckn, Retail BAP

Domain

Retail BAP, Beckn

Tech Skills Needed

  • Frontend development skills
  • UI design skills

Complexity

Medium

Category

UI Development

Sub Category

Post Fulfillment (support) - Update UI Screen

UEI card with a mesh diagram

Description

Update the existing UEI card and with a mesh diagram or the telemetry node flow on EC. This update will provide a visual representation of the telemetry node flow on EC, enhancing the understanding of the system architecture.

Goals

  • Implement the UEI card with a visual representation (mesh diagram or telemetry node flow) of the telemetry node flow on EC to improve the clarity and understanding of the system architecture for stakeholders.

Expected Outcome

  • Updated UEI card along with the mesh diagram or telemetry node flow that clearly illustrates the telemetry node flow on EC.
  • Improved communication and understanding of the system architecture among stakeholders.

Acceptance Criteria

  • UEI card and on the landing page, a mesh diagram or telemetry node flow that accurately represents the telemetry node flow on EC.
  • The updated UEI card is reviewed and approved by the team.

Implementation Details

  • Create a mesh diagram or telemetry node flow that illustrates the telemetry node flow on EC.
  • Update the existing UEI card with the newly created diagram or flow.
  • Ensure that the updated UEI card is clear, concise, and easy to understand.

Mockups / Wireframes

To be added/updated.

Product Name

Beckn

#Domain

N/A

Tech Skills Needed

  • Frontend and backend development
  • Knowledge of telemetry node flow on EC

Complexity

Medium

Category

Development

Subcategory

Development

UI Development - Ordering (init) - Payment screen development

Description

Develop the payment screen for the Ordering (init) page to allow users to complete their purchase. This includes implementing a user-friendly payment interface.

Goals

  • Design and implement a payment screen for the Ordering (init) page.
  • Provide users with a secure and intuitive payment experience.

Expected Outcome

  • Payment screen on the Ordering (init) page that allows users to complete their purchase.
  • User-friendly design for the payment screen.

Acceptance Criteria

  • Payment screen is developed and integrated into the Ordering (init) page.
  • Payment process is user-friendly.

Implementation Details

  • Design the layout and flow of the payment screen.
  • Implement payment processing functionality.

Mockups / Wireframes

Link to Figma designs

Product Name

Beckn

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • Payment processing integration skills

Complexity

High

Category

UI Development

Subcategory

Ordering (init) - Payment Screen

Create header component for retail BAP

Description

Create a header component for the production-grade retail BAP to be used as a part of the user interface.

Goals

  • Create a header component for the production-grade retail BAP.

Expected Outcome

  • Header component designed and implemented for the production-grade retail BAP.

Acceptance Criteria

  • Header component is created according to the design specifications.
  • Header component is integrated into the user interface of the retail BAP.

Implementation Details

  • Implement the header component using appropriate frontend tech.
  • Ensure that the header component is responsive and works well on mobile, iPad, and web.

Mockups / Wireframes

Link to Figma designs

Product Name

Retail BAP

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • UI/UX design implementation skills

Complexity

Medium

Category

UI Development

Sub Category

Header Component

UI Development - Develop the selection of products (Ordering and Select) Page

Description

Develop the Ordering (select) page so that the user can select products.. This includes adjustments to the layout for better readability and usability, focusing on responsive fonts and sizes. The page should be responsive for mobile, iPad, and web.

Goals

  • Develop the Ordering (select) page with a focus on improving user experience.
  • From the search results page, the user to select the item and land on the item detail page.
  • Adjust the layout for better readability and usability, especially focusing on responsive fonts and sizes.

Expected Outcome

  • Ordering (select) page developed with improved user experience.
  • From the search results page, the user to select the item and land on the item detail page.
  • Layout adjustments made for better readability and usability, with a focus on responsive design.

Acceptance Criteria

  • User can select products on the Ordering (select) page and sees the item detail page.
  • Layout adjustments improve readability and usability, with responsive fonts and sizes implemented.

Implementation Details

  • Develop the layout of the Ordering (select) page with user-friendly product selection features.
  • Implement responsive design for mobile, iPad, and web to ensure a consistent user experience across devices.
  • Test the page on different devices to verify responsiveness and usability.

Mockups / Wireframes

Link to Figma designs

Mobile Mockups

Image

iPad Mockups

Image

Web Mockups

Image

Product Name

Beckn, Retail BAP

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • UI/UX design implementation skills

Complexity

Medium

Category

UI Development

Sub Category

Ordering (Select) Page Development

UI Development - Ordering (confirm) - Confirm screen data fetching and mapping

Description

Implement data fetching and mapping for the confirm screen on the Ordering (confirm) process. This includes fetching data related to the order confirmation from the backend API and mapping it to the appropriate UI components.

Goals

  • Fetch data related to order confirmation from the backend API.
  • Map the fetched data to the UI components of the confirm screen.

Expected Outcome

  • Confirm screen on the Ordering (confirm) process with populated data related to order confirmation.
  • Data fetching and mapping that is efficient and responsive.

Acceptance Criteria

  • Data related to order confirmation is fetched from the backend API and displayed on the confirm screen.
  • Data is mapped accurately to the UI components of the confirm screen.

Implementation Details

  • Implement data fetching logic to retrieve order confirmation data from the backend.
  • Map the fetched data to the UI components of the confirm screen.

Mockups / Wireframes

Link to Figma designs

Product Name

Beckn

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • API integration skills

Complexity

Medium

Category

UI Development

Sub Category

Ordering (confirm) - Confirm Screen Data Fetching

Prepare Test Cases for end-to-end scenarios for production grade retail BAP

Description

Prepare test cases for end-to-end scenarios for the production-grade retail BAP. These test cases will cover various scenarios to ensure the functionality and performance of the BAP in a production environment based on the designs. Add the test cases to Confluence here.

Goals

  • Create comprehensive test cases for end-to-end scenarios for the production-grade retail BAP.
  • Ensure that the test cases cover all critical functionalities of the BAP based on the designs.

Expected Outcome

  • Test cases that cover a wide range of scenarios for the production-grade retail BAP.
  • Test cases that are well-documented and easy to understand.

Acceptance Criteria

  • Test cases are created for all critical functionalities of the production-grade retail BAP.
  • Test cases are added to Confluence as per the provided link.

Implementation Details

  • Review the designs and specifications for the production-grade retail BAP.
  • Identify all critical functionalities and user flows.
  • Create detailed test cases for each identified functionality and user flow.

Mockups / Wireframes

  • Figma for mobile, iPad, and web from here.

Product Name

Beckn, Retail BAP

Domain

Retail

Tech Skills Needed

  • Testing skills
  • Knowledge of retail BAP functionalities

Complexity

Medium

Category

Testing

Subcategory

Test Cases - End-to-End Scenarios

UI Development - Fulfillment (status) - Building blocks additions

Description

Add necessary building blocks to the Fulfillment (status) screen to enhance the user interface and provide additional functionality.

Goals

  • Enhance the Fulfillment (status) screen with additional building blocks.
  • Improve the user interface if any and functionality of the Fulfillment (status) screen.

Expected Outcome

  • Fulfillment (status) screen with added building blocks for enhanced user interface and functionality.
  • Improved user experience on the Fulfillment (status) screen.

Acceptance Criteria

  • Building blocks are added to the Fulfillment (status) screen as needed.
  • User interface and functionality of the Fulfillment (status) screen are improved.

Implementation Details

  • Identify areas of the Fulfillment (status) screen that can be enhanced with additional building blocks.
  • Addconfirm) process.
  • Provide users with visual feedback that their request is being processed.

Expected Outcome

  • Loading screen or indicator that is visually appealing and informative.
  • Users are informed about the progress of their request.

Acceptance Criteria

  • Loading screen or indicator is implemented and displayed during the Ordering (confirm) process.
  • Users are able to understand that their request is being processed.

Implementation Details

  • Design a loading screen or indicator that aligns with the overall UI/UX of the application.
  • Implement the loading screen or indicator in the Ordering (confirm) process.

Mockups / Wireframes

Link to Figma designs

Product Name

Beckn

#Domain

N/A

Tech Skills Needed

  • Frontend development skills
  • UI design skills

Complexity

Low

Category

UI Development

Subcategory

Ordering (confirm) - Loading Screen

UI Development - Implement Product Cards on Discovery (Search) Page

Description

Develop the product cards on the Discovery (search) page based on the provided designs. This includes changes to the card size, content layout, and overall visual presentation. This is when the user searches for the products and the search results are populated.

Goals

  • Develop the product cards on the Discovery (search) page.
  • Ensure that the implemented page matches the provided designs and specifications.

Expected Outcome

  • Develop the product cards on the Discovery (search) page with the implemented design and layout.
  • Consistent visual presentation and user experience for product search results.

Acceptance Criteria

  • Implementation is accurately implemented for all product cards on the Discovery (search) page.
  • Implemented design matches the provided designs.

Implementation Details

  • Use the provided designs as a reference to implement the design and layout changes.
  • Ensure that the implemented design is responsive and works well on different devices.
  • Test the implementation to ensure that it meets the design requirements and provides a good user experience.

Mockups / Wireframes

Link to Figma designs

Mobile Mockups

Image

iPad Mockups

Image

Web Mockups

Image

Product Name

Beckn, Retail BAP

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • UI/UX skills

Complexity

Medium

Category

UI Development

Sub Category

Product Cards upon search

UI Development - Implement Discovery (search) Page for Retail BAP

Description

Implement the Discovery (search) page for the retail BAP so that users can perform searches based on the designs for better adjustments to the layout for better readability and usability, especially focusing on responsive fonts and sizes. This implementation should be responsive.

Goals

  • Implement the Discovery (search) page for the retail BAP.
  • Ensure that users can perform searches based on the designs.
  • Improve the layout for better readability and usability, especially focusing on responsive fonts and sizes.

Expected Outcome

  • Implementation of the Discovery (search) page that allows users to perform searches.
  • Improved layout for better readability and usability, with a focus on responsive fonts and sizes.

Acceptance Criteria

  • Discovery (search) page is implemented for the retail BAP.
  • Users can perform searches based on the designs.
  • Layout improvements are made for better readability and usability, especially focusing on responsive fonts and sizes.

Implementation Details

  • Use the provided designs as a reference for implementing the Discovery (search) page.
  • Ensure that the page is responsive and works correctly on different devices.

Mockups / Wireframes

Designs can be found here.

Mobile Mockups

Image

iPad Mockups

Image

Web Mockups

Image

Product Name

Retail BAP

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • UI/UX design skills

Complexity

Medium

Category

UI Development

Sub Category

Discovery (search) Page Implementation

Validation for Proof of Purchase over Beckn network

Description

Implement validation for 'Proof of Purchase' to occur over the Beckn network. This involves receiving a call back from the BPP about the item being purchased and displaying it on the BAP. Exploration is needed to determine which Beckn endpoints can enable the verification.

Goals

  • Implement validation for 'Proof of Purchase' over the Beckn network.
  • Receive a callback from the BPP about the item being purchased.
  • Display the proof of purchase on the BAP.

Expected Outcome

  • Validation process for 'Proof of Purchase' is successfully implemented over the Beckn network.
  • Callbacks from the BPP about purchased items are received and processed.
  • Proof of purchase is displayed correctly on the BAP.

Acceptance Criteria

  • 'Proof of Purchase' validation is implemented and functional over the Beckn network.
  • Callbacks from the BPP about purchased items are received and processed.
  • Proof of purchase is displayed accurately and in a timely manner on the BAP.

Implementation Details

  • Explore Beckn endpoints that can enable the verification process for 'Proof of Purchase.'
  • Implement the necessary backend and frontend logic to handle callbacks and display proof of purchase on the BAP.

Mockups / Wireframes

to be added

Product Name

Beckn

#Domain

Retail, Decentralized social networks

Tech Skills Needed

  • Backend and Frontend development skills

Complexity

High

Category

Functionality

Subcategory

Proof of Purchase Validation

UI Development - Add Filters to Discovery (Search) Page

Description

Add filters to the Discovery (search) page to improve the search experience. These filters will allow users to refine their search results based on various criteria, and sorting options will be available to enhance the usability of the page.

Goals

  • Add filters to the Discovery (search) page.
  • Implement sorting options to enhance the usability of the page.

Expected Outcome

  • Filters added to the Discovery (search) page for refining search results.
  • Sorting options implemented for improved usability.

Acceptance Criteria

  • Filters are added to the Discovery (search) page and function correctly.
  • Sorting options are implemented and work as expected.

Implementation Details

  • Add filter components to the Discovery (search) page layout.
  • Implement functionality to refine search results based on selected filters.
  • Add sorting options to the page layout and implement sorting functionality.

Mockups / Wireframes

Link to Figma designs

Product Name

Retail BAP

Mobile Mockups

Image

iPad Mockups

Image

Web Mockups

Image

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • UI/UX design implementation skills

Complexity

Medium

Category

UI Development

Sub Category

Filter and Sorting Implementation - Discovery (Search) Page

README file in UI workspace

Description

Create a README file in the UI workspace that serves as a template containing all UI apps available. The README should include all components, a demo URL to EC, GitHub repo links, and EC release notes/release guides.

Goals

  • Create a comprehensive README file that provides a clear overview of all UI apps available in the workspace.
  • Include relevant information such as components, demo URLs, GitHub repo links, and EC release notes/release guides.

Expected Outcome

  • A README file that is well-organized and easy to understand.
  • All necessary information about UI apps, including demo URLs and GitHub repo links, is included in the README.

Acceptance Criteria

  • README file contains a list of all UI apps available in the workspace.
  • Each UI app entry includes details such as components, demo URL to EC, GitHub repo link, and EC release notes/release guides if available.
  • README is formatted neatly and is easy to read.

Implementation Details

  • Create a template for the README file that includes sections for components, demo URL to EC, GitHub repo links, and EC release notes/release guides.
  • Populate the template with information for each UI app available in the workspace.
  • Review and finalize the README file to ensure it meets the requirements.

Mockups / Wireframes

N/A

Product Name

Beckn

#Domain

N/A

Tech Skills Needed

N/A

Complexity

Low

Category

N/A

Subcategory

N/A

UI Development - Implement Data Fetching and Mapping for Ordering (Select) Page

Description

Implement data fetching and mapping for the Ordering (select) page to populate select options. This includes fetching data from the backend API and mapping it to the appropriate UI components. The implementation should be responsive for mobile, iPad, and web.

Goals

  • Implement data fetching for the Ordering (select) page.
  • Map fetched data to the appropriate UI components for displaying select options.

Expected Outcome

  • Data fetching and mapping implemented for the Ordering (select) page.
  • Select options displayed correctly on the page.

Acceptance Criteria

  • Data is fetched from the backend API when the page is loaded.
  • Fetched data is mapped to the appropriate UI components for displaying select options.

Implementation Details

  • Set up data fetching logic to retrieve select options from the backend API.
  • Map the fetched data to the corresponding UI components for displaying select options.
  • Ensure that the implementation is responsive and works well on mobile, iPad, and web.

Mockups / Wireframes

Link to Figma designs

Product Name

Retail BAP

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • API integration skills

Complexity

Medium

Category

UI Development

Sub Category

Data Fetching and Mapping - Ordering (Select) Page

Retail Scalable State management strategy

Description

Adapt the state management strategy to ensure it is production-ready and scalable for the prod grade retail BAP.

Goals

  • Enhance the state management strategy to handle the growing complexity and scale of the retail BAP.
  • Ensure the state management solution is robust and efficient for production use.

Expected Outcome

  • Updated state management strategy that is scalable and production-ready.
  • Improved performance and maintainability of state management in the retail BAP.

Acceptance Criteria

  • State management strategy is updated and documented and shared on this ticket.

Implementation Details

  • Review current state management implementation.
  • Identify areas for improvement and scalability enhancements.
  • Implement changes to the state management strategy as needed.

Mockups / Wireframes

Link to Figma designs

Product Name

Beckn, Retail BAP

Domain

Retail

Tech Skills Needed

  • State management
  • Performance optimization

Complexity

Medium

Category

State Management

Subcategory

Scalability

UI Development - Fulfillment (status) - Order details screen development

Description

Develop the order details screen for the Fulfillment (status) page to display detailed information about the order. This includes designing the layout and functionality of the order details screen.

Goals

  • Design and implement the order details screen for the Fulfillment (status) page.
  • Provide users with detailed information about their orders.

Expected Outcome

  • Order details screen for the Fulfillment (status) page that displays detailed information about the order.
  • User-friendly design for the order details screen.

Acceptance Criteria

  • Order details screen is developed and integrated into the Fulfillment (status) page.
  • Detailed information about the order is displayed on the order details screen.

Implementation Details

  • Design the layout of the order details screen to display detailed order information.
  • Implement functionality for displaying order details and any relevant actions (e.g., canceling the order).

Mockups / Wireframes

Link to Figma designs

Product Name

Beckn

#Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • UI design skills

Complexity

Medium

Category

UI Development

Subcategory

Fulfillment (status) - Order Details Screen

Migrate the Smart Policy Administration to Beckn UI workspace repo

Description

Migrate the Smart Policy Administration to the Beckn UI workspace GitHub repo. Provide details on the source repo and target repo for the migration.

Goals

  • Migrate the Smart Policy Administration to the Beckn UI workspace GitHub repo.
  • Ensure all functionalities and features are preserved during the migration process.

Expected Outcome

  • Smart Policy Administration successfully integrated into the Beckn UI workspace GitHub repo.
  • Minimal disruption to existing functionalities and features.

Acceptance Criteria

  • Smart Policy Administration is fully functional in the Beckn UI workspace GitHub repo.
  • All code is successfully transferred and integrated into the new repo.
  • The migration process is documented for future reference on this ticket or in Confluence and the link is reported.

Implementation Details

  • Identify the source repo for the Smart Policy Administration.
  • Analyze the existing structure and dependencies of the Smart Policy Administration.
  • Plan the migration process to ensure a smooth transition to the Beckn UI workspace GitHub repo.
  • Execute the migration process and verify the functionality of the Smart Policy Administration in the new repo.

Mockups / Wireframes

N/A

Product Name

Beckn

#Domain

N/A

Tech Skills Needed

N/A

Complexity

Medium

Category

N/A

Subcategory

N/A

UI Development - Fulfillment (status) - Order details screen data fetching and mapping

Description

Implement data fetching and mapping for the order details screen on the Fulfillment (status) page. This includes fetching data related to the order details from the backend API and mapping it to the appropriate UI components if any.

Goals

  • Fetch data related to the order details from the backend API if any.
  • Map the fetched data to the UI components of the order details screen.

Expected Outcome

  • Order details screen on the Fulfillment (status) page with populated data related to the order details.
  • Data fetching and mapping that is efficient and responsive.

Acceptance Criteria

  • Data related to the order details is fetched from the backend API and displayed on the order details screen.
  • Data is mapped accurately to the UI components of the order details screen.

Implementation Details

  • Implement data fetching logic to retrieve order details data from the backend.
  • Map the fetched data to the UI components of the order details screen.

Mockups / Wireframes

Link to Figma designs

Product Name

Beckn

Domain

Retail

Tech Skills Needed

  • Frontend development skills
  • API integration skills

Complexity

Medium

Category

UI Development

Subcategory

Fulfillment (status) - Order Details Screen Data Fetching

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.