PRO Card

Description

Display essential PRO Card information along with their credit balance under My Account Section.

GOALS / EXPECTATIONS

• Prominent display of current credit balance (e.g., "$100.00").
• Prominent display of Progress Bar to show Remaining Balance.
• Card like Credit which includes increase credit limit button, remaining balance, total balance of credit visible.
• Inclusion of PRO Card which have pro card user name, QR Code.
• Inclusion of Card which has information of Last 3 month spending with Progress Bar value.
• Four Navigation Btns:
• My Account > Pro Card Orders . which will redirect to Order History Table containing all Orders placed so far.
• Real Time Searching Orders will reflect on Order History Table.
• Download Invoice feature either for all visible orders or selected orders via checkbox.
• Visibility of Orders is limited to only 10 via Pagination.
• Sorting Orders table on the basis of Date, Invoice number, status, total sum.

DEV STRATEGIES / GUIDELINES

1. Pinia Store (accountStore) PRO Card component emits call the store methods directly which then propage the request to the concerned service i.e. ecomCustomerServices.. Every call to service must be enclosed by a try…catch block to manage client side error states inside the store. Within catch block, we need to use errorHandle composable.
2. ECOM API Service & Requirement to make API call signin() : /customers/auth/login (POST) Params : (username, password), State : users under authStore.
   II. updateProCardOrderHistory() : /order-attributes/${customerId} (POST) Params : (orderId, key, value) III. fetchProcardOrderData() : /order-attributes/${customerId} (POST) Params : (customerId,payment_type)

COMPONENT DIAGRAM

FEATURES

1. Prominent display of current credit balance (e.g., "$100.00").
2. Prominent display of Progress Bar to show Remaining Balance.
3. Card like Credit which includes increase credit limit button, remaining balance, total balance of credit visible.
4. Inclusion of PRO Card which have pro card user name, QR Code.
5. Inclusion of Card which has information of Last 3 month spending with Progress Bar value.
6. Four Navigation Btns:
   • My Account > Pro Card Orders . which will redirect to Order History Table containing all Orders placed so far.
   • Real Time Searching Orders will reflect on Order History Table.
   • Download Invoice feature either for all visible orders or selected orders via checkbox.
   • Visibility of Orders is limited to only 10 via Pagination.
   • Sorting Orders table on the basis of Date, Invoice number, status, total sum.

SEQUENCE DIAGRAM

TODO LIST (DEV)

• API data populate from Customer details via postSignin().
• Loader visible until orders data visible.
• QR Code implementation under Pro Card
• Credit Card Balance Creation
• Last Month Spending Details via Card generate.
• Pro Card Orders btn navigation implementation.
• Pro Card FAQ navigate to /pro-card Route.
• Pro Card Increase Credit Limit navigate to FORM.
• Pro Card Request for More Pro Card navigate to FORM>