vuestorefront / vue-storefront

Alokai is a Frontend as a Service solution that simplifies composable commerce. It connects all the technologies needed to build and deploy fast & scalable ecommerce frontends. It guides merchants to deliver exceptional customer experiences quickly and easily.
https://www.alokai.com
MIT License
10.64k stars 2.08k forks source link

My orders tab #525

Closed pkarw closed 6 years ago

pkarw commented 6 years ago

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 zrzut ekranu 2018-01-17 12 30 30

pkarw commented 6 years ago

@karolbzik will you handle this?

karolbzik commented 6 years ago
vue storefront - my orders 28 02 2018

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?

pkarw commented 6 years ago

Thanks @karolbzik!

akbarkz commented 6 years ago

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?

pkarw commented 6 years ago

@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)

pkarw commented 6 years ago

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
    }
}
pkarw commented 6 years ago

https://github.com/DivanteLtd/vue-storefront-api/commit/5003e42622487f66d358afe7d18b3344411f8f0e

pkarw commented 6 years ago

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) => {
 })
pkarw commented 6 years ago

@akbarik assigned back to You :) fingers crossed!

clagosarias commented 6 years ago

@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?

qiqqq commented 6 years ago

@pkarw as we discussed, I can take this task