Closed pkarw closed 6 years ago
@karolbzik will you handle this?
The view "My orders" in the project at https://www.figma.com/file/VKyqbHFI55TKIKcQlFLiVpVF/Vue-Storefront-Open-Source.
@akbarik will it be enough to start?
Thanks @karolbzik!
Thanks @karolbzik! I have a question though, what happens if user presses View order and Remake order? Do we have to build a new page for Order? @pkarw, can you also add your comments?
@akbarik one change; we need to get the orders from http://devdocs.magento.com/swagger/#!/salesOrderRepositoryV1/salesOrderRepositoryV1GetListGet
via vue-storefront-api
of course, and store the data in the localForage
(new collection required)
OK @akbarik I've made the vue-storefront-api
job and exposed the endpoint
http://localhost:8080/api/user/order-history?token=<current user token>
- so it's very similar to /api/user/me
call; the difference is the data range returned:
{
"code": 200,
"result": {
"items": [
{
"applied_rule_ids": "1,5",
"base_currency_code": "USD",
"base_discount_amount": -3.3,
"base_grand_total": 28,
"base_discount_tax_compensation_amount": 0,
"base_shipping_amount": 5,
"base_shipping_discount_amount": 0,
"base_shipping_incl_tax": 5,
"base_shipping_tax_amount": 0,
"base_subtotal": 22,
"base_subtotal_incl_tax": 27.06,
"base_tax_amount": 4.3,
"base_total_due": 28,
"base_to_global_rate": 1,
"base_to_order_rate": 1,
"billing_address_id": 204,
"created_at": "2018-01-23 15:30:04",
"customer_email": "pkarwatka28@example.com",
"customer_group_id": 0,
"customer_is_guest": 1,
"customer_note_notify": 1,
"discount_amount": -3.3,
"email_sent": 1,
"entity_id": 102,
"global_currency_code": "USD",
"grand_total": 28,
"discount_tax_compensation_amount": 0,
"increment_id": "000000102",
"is_virtual": 0,
"order_currency_code": "USD",
"protect_code": "3984835d33abd2423b8a47efd0f74579",
"quote_id": 1112,
"shipping_amount": 5,
"shipping_description": "Flat Rate - Fixed",
"shipping_discount_amount": 0,
"shipping_discount_tax_compensation_amount": 0,
"shipping_incl_tax": 5,
"shipping_tax_amount": 0,
"state": "new",
"status": "pending",
"store_currency_code": "USD",
"store_id": 1,
"store_name": "Main Website\nMain Website Store\n",
"store_to_base_rate": 0,
"store_to_order_rate": 0,
"subtotal": 22,
"subtotal_incl_tax": 27.06,
"tax_amount": 4.3,
"total_due": 28,
"total_item_count": 1,
"total_qty_ordered": 1,
"updated_at": "2018-01-23 15:30:05",
"weight": 1,
"items": [
{
"amount_refunded": 0,
"applied_rule_ids": "1,5",
"base_amount_refunded": 0,
"base_discount_amount": 3.3,
"base_discount_invoiced": 0,
"base_discount_tax_compensation_amount": 0,
"base_original_price": 22,
"base_price": 22,
"base_price_incl_tax": 27.06,
"base_row_invoiced": 0,
"base_row_total": 22,
"base_row_total_incl_tax": 27.06,
"base_tax_amount": 4.3,
"base_tax_invoiced": 0,
"created_at": "2018-01-23 15:30:04",
"discount_amount": 3.3,
"discount_invoiced": 0,
"discount_percent": 15,
"free_shipping": 0,
"discount_tax_compensation_amount": 0,
"is_qty_decimal": 0,
"is_virtual": 0,
"item_id": 224,
"name": "Radiant Tee-XS-Blue",
"no_discount": 0,
"order_id": 102,
"original_price": 22,
"price": 22,
"price_incl_tax": 27.06,
"product_id": 1546,
"product_type": "simple",
"qty_canceled": 0,
"qty_invoiced": 0,
"qty_ordered": 1,
"qty_refunded": 0,
"qty_shipped": 0,
"quote_item_id": 675,
"row_invoiced": 0,
"row_total": 22,
"row_total_incl_tax": 27.06,
"row_weight": 1,
"sku": "WS12-XS-Blue",
"store_id": 1,
"tax_amount": 4.3,
"tax_invoiced": 0,
"tax_percent": 23,
"updated_at": "2018-01-23 15:30:04",
"weight": 1
}
],
"billing_address": {
"address_type": "billing",
"city": "Some city2",
"company": "Divante",
"country_id": "PL",
"email": "pkarwatka28@example.com",
"entity_id": 204,
"firstname": "Piotr",
"lastname": "Karwatka",
"parent_id": 102,
"postcode": "50-203",
"street": [
"XYZ",
"17"
],
"telephone": null,
"vat_id": "PL8951930748"
},
"payment": {
"account_status": null,
"additional_information": [
"Cash On Delivery",
""
],
"amount_ordered": 28,
"base_amount_ordered": 28,
"base_shipping_amount": 5,
"cc_last4": null,
"entity_id": 102,
"method": "cashondelivery",
"parent_id": 102,
"shipping_amount": 5
},
"status_histories": [],
"extension_attributes": {
"shipping_assignments": [
{
"shipping": {
"address": {
"address_type": "shipping",
"city": "Some city",
"company": "NA",
"country_id": "PL",
"email": "pkarwatka28@example.com",
"entity_id": 203,
"firstname": "Piotr",
"lastname": "Karwatka",
"parent_id": 102,
"postcode": "51-169",
"street": [
"XYZ",
"13"
],
"telephone": null
},
"method": "flatrate_flatrate",
"total": {
"base_shipping_amount": 5,
"base_shipping_discount_amount": 0,
"base_shipping_incl_tax": 5,
"base_shipping_tax_amount": 0,
"shipping_amount": 5,
"shipping_discount_amount": 0,
"shipping_discount_tax_compensation_amount": 0,
"shipping_incl_tax": 5,
"shipping_tax_amount": 0
}
},
"items": [
{
"amount_refunded": 0,
"applied_rule_ids": "1,5",
"base_amount_refunded": 0,
"base_discount_amount": 3.3,
"base_discount_invoiced": 0,
"base_discount_tax_compensation_amount": 0,
"base_original_price": 22,
"base_price": 22,
"base_price_incl_tax": 27.06,
"base_row_invoiced": 0,
"base_row_total": 22,
"base_row_total_incl_tax": 27.06,
"base_tax_amount": 4.3,
"base_tax_invoiced": 0,
"created_at": "2018-01-23 15:30:04",
"discount_amount": 3.3,
"discount_invoiced": 0,
"discount_percent": 15,
"free_shipping": 0,
"discount_tax_compensation_amount": 0,
"is_qty_decimal": 0,
"is_virtual": 0,
"item_id": 224,
"name": "Radiant Tee-XS-Blue",
"no_discount": 0,
"order_id": 102,
"original_price": 22,
"price": 22,
"price_incl_tax": 27.06,
"product_id": 1546,
"product_type": "simple",
"qty_canceled": 0,
"qty_invoiced": 0,
"qty_ordered": 1,
"qty_refunded": 0,
"qty_shipped": 0,
"quote_item_id": 675,
"row_invoiced": 0,
"row_total": 22,
"row_total_incl_tax": 27.06,
"row_weight": 1,
"sku": "WS12-XS-Blue",
"store_id": 1,
"tax_amount": 4.3,
"tax_invoiced": 0,
"tax_percent": 23,
"updated_at": "2018-01-23 15:30:04",
"weight": 1
}
]
}
]
}
}
],
"search_criteria": {
"filter_groups": [
{
"filters": [
{
"field": "customer_email",
"value": "pkarwatka28@example.com",
"condition_type": "eq"
}
]
}
]
},
"total_count": 61
}
}
I would suggest to create another localForage collection for orders history like ordersHistory
and store there orders under separate keys (each order should be a separate record within this collection), then you can get the whole collection just bu doing simple iteration:
const ordersCollection = localForage.createInstance({
name: 'shop',
storeName: 'ordersHistory'
})
ordersCollection.iterate((order, id, iterationNumber) => {
})
@akbarik assigned back to You :) fingers crossed!
@karolbzik what about dividing the orders by their status? a first section with the pending orders and then a second section below with the finished or canceled ones?
@pkarw as we discussed, I can take this task
We just need to show the orders from local history; if "transmitted" = true it means that orde is acknowledged by the server, so we can highlight these orders
We need a design here @karolbzik