B2B Commerce
Buying List
All List
The Buying List features Title, List of Baskets, and prominent Call-to-action Buttons. Each list user engagement, guiding visitors to explore further.
Buying List components
The following component are used for the Buying List
| Section | Component | Path | Description |
|---|---|---|---|
| Basket List | B2BBaskets | @components/account/B2BBasket.tsx | Showing list of all created baskets |
| Basket List Lines | BasketList | @components/account/BasketList.tsx | Showing all created Baskets |
| Create Basket | AddBasketModal | @components/AddBasketModal.tsx | Open Modal popover to provide provision to create new basket |
| Delete Basket | DeleteBasketModal | @components/DeleteBasketModal.tsx | Provision to delete basket |
| Transfer Basket | TransferBasket | @components/TransferBasket.tsx | Provision to transfer basket to another company user |
Create Basket
Create Basket highlights option to enter Basket name and proceed with Call-to-action Button and then you can add as many line items.
Create Basket components
The following component are used for Create Basket
| Section | Component | Path | Description |
|---|---|---|---|
| Create Basket | AddBasketModal | @components/AddBasketModal.tsx | Open Modal popover to provide provision to create new basket |
Transfer Basket
To transfer a basket, first select the basket you wish to transfer from a list of available options. Next, choose the user to whom the basket will be transferred. Once both the basket and the user are selected, proceed by clicking the Call-to-action Button to complete the transfer process.
Transfer Basket components
The following component are used for Transfer Basket
| Section | Component | Path | Description |
|---|---|---|---|
| Transfer Basket | TransferBasket | @components/TransferBasket.tsx | Provision to transfer basket to another company user |
Create RFQ
To create an RFQ, start by selecting any basket you'd like to use for the RFQ. Then, fill out all the required information in the provided form. Once all the details are completed, submit the request to finalize the RFQ creation process.
Create RFQ components
The following component are used for Create RFQ
| Section | Component | Path | Description |
|---|---|---|---|
| Request for Quote Form | SaveRFQForm | @components/account/RequestForQuote/Form.tsx | Provide Crete new RFQ Form |
Request For Quote
RFQ List
Showing All the requested RFQs with RFQ Number, Status, Created Date and option to view details.
Request For Quote component
The following component are used for Request For Quote
| Section | Component | Path | Description |
|---|---|---|---|
| List | request-for-quote | pages/request-for-quote/index.tsx | Showing list of RFQs requested by trading account |
RFQ Detail
The Request for Quote (RFQ) detail page displays key information such as the current status of the RFQ, a list of line items included, and the company details. Additionally, there is an option to cancel the RFQ if needed.
RFQ Detail component
The following component are used for RFQ Detail
| Section | Component | Path | Description |
|---|---|---|---|
| Detail | RFQDetailsComponent | @components/account/RequestForQuote/RFQDetailsComponent.tsx | Showing all the details of RFQ likes of Line Items status Call to action Buttons |
Quotes
Quote List
Showing All the Quotes with Quote Number, Quote Name, Status, Validity Date and option to view details.
Quote List component
The following component are used for Quote List
| Section | Component | Path | Description |
|---|---|---|---|
| Reviews | B2BQuotes | @components/account/B2BQuotes.tsx | Showing all quotes created by the company |
Quote Detail
The Quote Detail page provides a comprehensive view of all line items, along with a quote summary showing the total price. It also displays the billing and shipping addresses. Additionally, there are options to update the quantity of each line item or delete them from the quote if necessary.
Quote Detail component
The following component are used for Quote Detail
| Section | Component | Path | Description |
|---|---|---|---|
| Quote Detail | QuoteDetail | @components/account/QuoteDetail.tsx | Showing reviews and average rating in footer |
| Line Items | CartProduct | @components/cart/CartProduct.tsx | Showing requested quote line items |
| Loader | Spinner | @components/ui/Spinner.tsx | Showing Loader before loading all data |
Invoice
The Invoice List displays a summary of all invoices, including the invoice date, status, and the amount paid. Each invoice also has an option to download for easy access and record-keeping.
Invoice List component
The following component are used for Invoice List
| Section | Component | Path | Description |
|---|---|---|---|
| Invoice | invoices | Pages/my-account/my-company/invoices.tsx | Showing all invoices generated for company |
Data Pack
The Data Pack displays a summary of all data packs, including the generated date, product pack and images pack. Each data pack also has an option to download for easy access and record-keeping.
Data Pack component
The following component are used for Data Pack
| Section | Component | Path | Description |
|---|---|---|---|
| DataPack | DataPack | @components/account/DataPack.tsx | Showing all data pack |
Returns
The Return page shows details of past returns, including the return status, a list of returned items, the amount to be refunded, and additional return information for each transaction.
Returns component
The following component are used for Returns
| Section | Component | Path | Description |
|---|---|---|---|
| Returns | MyReturns | @components/account/MyReturns.tsx | Showing all return orders |
My Company
Company Details & Credit Information
The Company page displays comprehensive information about the company, including company info, credit history of users, current balance, and the total credit limit.
Company Detail component
The following component are used for Company Detail
| Section | Component | Path | Description |
|---|---|---|---|
| Company Details | CompanyDetails | @components/account/CompanyDetails.tsx | Showing company details and credit information |
| Company Users | CompanyUsers | @components/account/CompanyUsers.tsx | Showing all linked company users |
| Company Address Book | AddressBook | @components/account/Address/AddressBook.tsx | Showing all company addresses |
Company Users
The Users section display all the linked users list and information for company users.
Company Users component
The following component are used for Company Users
| Section | Component | Path | Description |
|---|---|---|---|
| Company Users | CompanyUsers | @components/account/CompanyUsers.tsx | Showing all linked company users |
Company Address
The Address section display all the Addresses list of the company.
Company Address component
The following component are used for Company Address
| Section | Component | Path | Description |
|---|---|---|---|
| Company Address Book | AddressBook | @components/account/Address/AddressBook.tsx | Showing all company addresses |
| Address Item | AddressItem | @components/account/Address/AddressItem.tsx | Used to bind address data |
| New Address Modal | NewAddressModal | ../SectionCheckoutJourney/checkout/CheckoutForm/NewAddressModal.tsx | Used for create new address |