Add "add to cart" button in Sunrise SPA

What

Users want a way of defining and inserting a product into the cart

Why

So that they can buy the product

Acceptance criteria

• Users can use a button on the PDP to add the specified product in the cart
• The specified product can be used in the cart and checkout process

At the moment it's always remembering the customer. It should be optional with the checkbox during login.

Once available in GraphQL.
Things that will be implemented:

• matching variant selection
• subtree category filter
• facets

Fix how we implement images url according to image dimensions field in graphql fields, instead of getting random sized images.

Sunrise data now gets the images url with random sizes (e.g
..../products/072750_1_large/.jpg or
..../products/072750_1_medium/.jpg ) with no specification. Despite the fact that in the source images we have all sizes to each image that are not being used, so we should be able to get the images according to those sizes.

Form fields borders disappear when changed to mobile view

Currently the one from Vue appears instead

https://github.com/cypress-io/circleci-orb

On the PDP, we need to select color/size and see the new product, with its URL.

What?
Enable the easy use of CMS systems to display banners on Sunrise SPA

Why?
To demonstrate that we integrate easily with CMS providers and to make prototyping easier

Ideas:

[ ] Consider Contentful as CMS
[ ] If no CMS setup are provided it will fallback to current behaviour(static home)

At the moment the cart (and customer) is cached and synchronized when you use it in the same browser, but when the cart (or customer) is modified from the outside, a 409 error will raise and won't recover.

We need to make sure it recovers.

What?
Virtual category to aggregate sales products

Why?
So that sale products get inserted in the right category with a predicate instead of adding them manually

Eg. When Sale category is selected in the navigation all products with discounts will appear in the category even though they are not assigned to the category.

What?
The content from the Sunrise Java home should be shown on the Sunrise SPA home
https://demo.commercetools.com/en/home

Why?
So that when our Sales shows the demo shop it looks more professional and reliable.

Make sure our components follow the options order recommended by this guide:

https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended

At the moment, every logout button needs to call the logoutClient and handle redirection on its own. In order to avoid repetition, we need to bring it into a single place.
Maybe handling it in the router, just before the authGuard?

When applying a line item discount (e.g. coming from a cart discount) the total price for the line item is correct, but no visual indicator that a discount was applied appears.

Instead of using Vuex, Apollo Cache allows us to save and read local state.
https://dev.to/n_tepluhina/apollo-state-management-in-vue-application-8k0

Pros: get rid of any additional state management library such as Vuex and keeping only one state source.

Cons: Vuex is very well known and documented, whereas using Apollo for that is still quite obscure and difficult to find information of it.

Currently there are many vuex actions that modify a customer, and for every modification we need to request some fields in particular to be returned. These fields are duplicated for each action, and if they diverge it may make the app fail.

Extracting the fragments to a global access and just calling them at each method would be a more elegant solution.

In cart detail page, using - and + buttons yields zero or negative numbers in the input field. Of course the input field doesn't accept these values, so nothing is broken. But displaying quantity below zero looks weird.

We should not allow quantity to be displayed as less than 1.

• by price ascending
• by price descending
• default (no sorting)

Dropdown as in:
https://demo.commercetools.com/en/women-clothing-blazer
that sends the corresponding sorting criteria to the ct's API.

• GraphQL schema
• Fragments schema

Fetch them automatically when installing the project or at any other suitable step.

• Mini cart
• Cart detail page
• Add to cart button

Fix some warnings that appear during unit tests:

(node:3915) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:3915) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

(node:3915) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'then' of undefined
(node:3915) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)

It would replace other dependencies besides vue-apollo.

Some components are using this.$store.state.currency and others this.currency. All of them should be using this.currency (coming from priceMixin) to avoid exposing the implementation details, and thus allow to change the way currency is stored/obtained in the future.

There might be situations in which the invalid credentials error happens because of an invalid refresh token and then Sunrise breaks.

Situations are pretty common: you are logged in with a customer from project A, then you switch to using project B and the refresh token from project A is sent against auth of project B, returning a 401.

Currently it is a mixin, but it might be better if it is a base component that takes care of the rendering part too.

Consider starting the pages with Page, for easy spotting them.
At the moment they end with Page, but that might be more difficult to identify.
Cons are the naming might be difficult to understand.

With the current JSON format there's a lot of extra characters involved (i.e. {, }, ,, "), which also raises many format errors that are difficult to catch when you are not familiar with them (e.g. last field in a JSON object should not have a comma, but the error message is not very clear).

Changing to YAML could be a solution to this problem.
https://kazupon.github.io/vue-i18n/guide/sfc.html#yaml-loading

At least additionally to the category menu, as otherwise category information would be empty if the user never visits a page with the category menu.

Such as loading, empty, active, etc.

Form in cart detail page where to introduce the discount code and show the current applied discount codes.

The product thumbnail can get very long, as it seems like the height is proportional to the size of the screen. It should stay always the same ratio.

When opening multiple tabs and adding items to the cart on both pages, it happens that the cart version may be not up-to-date and it just raises a general error.

We need to either handle the error and re-fetch the cart, or ask the customer to reload the page (worst case scenario).

We need some nice approach to show the case in which there are no results.

• product overview page
• my orders
• my cart

The new Sign-in does not submit the sign-in when the password does not have at least five characters. Eg. a demo account with password "test" does not sign in.

It's not the role of the sign-in form to validate password strength requirements, that is the role of the sign-up form.

Current documentation explains how to create an API Client in the Admin Center. But this functionality no longer exists in the Admin Center, but in the MC. We should update the explanations.

In my orders, payment/shipping status should be shown in the language the user has selected. At the moment, just some keys will be shown: https://docs.commercetools.com/http-api-projects-orders#shipmentstate

If the SKU doesn't exist in the URL or in the product, it should redirect to the master variant.

Product Pagination - decide if we use

• Load more
  or
• Pagination: 1,2,3
  or
• both

Checklist on

• Unit tests
• E2E tests
• Documentation

Explain how you can create your own Sunrise data set with this project and how to find the data itself.

• remember last language selected
• select language based on browser preferences

https://github.com/renovatebot/renovate

Currently all e2e tests are connecting directly to our backend, which will eventually slow our CI down. But Cypress doesn't provide support for mocking graphql requests, they are working on it. Even though there are some workarounds for this, we'll wait until they offer the support to start mocking, or until our CI is too slow, whatever happens first.

cypress-io/cypress#95
https://github.com/commercetools/fe-chapter-notes/issues/28