Offline: Shipping amount not added up in totals in the offline mode

vuestorefront / vue-storefront-1

The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total coverage is just a matter of time. The API approach also allows you to merge VSF with any third-party tool like CMS, payment gateways or analytics. Newest updates: https://blog.vuestorefront.io. Always Open Source, MIT license.

MIT License

19 stars 13 forks source link

From vue-storefront created by ymaheshwari1: vuestorefront/vue-storefront#5024

Current behavior

When we are offline, then on the checkout page the shipping amount is not displayed and the shipping amount is also not added up in the Totals. But after placing the order in offline mode and if the order is confirmed then the amount is added up in the totals.

Expected behavior

The shipping amount should be displayed in the price summary section on the checkout page. The total also needs to be updated as the shipping amount changes.

Steps to reproduce the issue

Go offline
Go to checkout
Here you can see the shipping amount is not displayed.
Select a shipping method having some shipping amount associated with it.
See that the total is not updated.

Version of Vue Storefront

[x] Vue Storefront
[ ] Vue Storefront Next

Can you handle fixing this bug by yourself?

[ ] YES
[ ] NO

Which Release Cycle state this refers to? Info for developer. (doesn't apply to Next)

Pick one option.

[x] This is a bug report for test version on https://test.storefrontcloud.io - In this case Developer should create branch from develop branch and create Pull Request 2. Feature / Improvement back to develop.
[ ] This is a bug report for current Release Candidate version on https://next.storefrontcloud.io - In this case Developer should create branch from release branch and create Pull Request 3. Stabilisation fix back to release.
[ ] This is a bug report for current Stable version on https://demo.storefrontcloud.io and should be placed in next stable version hotfix - In this case Developer should create branch from hotfix or master branch and create Pull Request 4. Hotfix back to hotfix.

Environment details

Browser:
OS:
Node:
Code Version:

Additional information

While debugging the issue, found the following points:

For doing the calculations in the offline mode we are using the calculateTotals method.
- In the calculateTotals method, the shipping method is always undefined, because we are assigning the state.shipping of the cart with checkout/getDefaultShippingMethod (methodActions.ts) and we are passing getFirstShippingMethod getter in calculateTotals method which is 0th index of state.shipping and thus the value is undefined.
- For the above issue, the solution can be either to pass getShippingMethod getter to the calculateTotals or to allocate checkout/getShippingMethods to the state.shipping (methodActions.ts).
When the shipping method is changed in offline mode then the calculateTotals() is not called again, as after changing the shipping Method, syncTotals action is dispatched which then calls API to fetch the totals from the server.
- To solve the above issue, we can apply an offline condition in the syncTotals action and then again call the calculateTotals method from there.
- When using the above solution the price section is not updating, because the section only updates when the platformTotalSegments state is updated. Thus, committing a mutation to update the platormTotalSegements so that the price section gets updated. After doing the mentioned things, then also the shipping and the grand_total are properly synced in offline mode.

Also, for calculating the shippingTax in the offline we are using price_incl_tax key, which is always 0 and the actual shipping amount is in the amount key.

vuestorefront / vue-storefront-1