divanteltd / next Goto Github PK

Context
Project will be very API-based. This is why we want to create the foundation for the API Client according to Vue Storefront Next architecture described in docs.

Acceptance Criteria

• Apollo is configured.
• Tool for mocking the endpoints is configured.
• It is possible to configure Appolo Client for pointing to specific CommerceTools instance.
• Structure is ready for adding the methods for calling the API endpoints.

We should come up with basic idea for docs structure and improve it over time as project grows.

Context
At this stage, we want to start preparing the layout of the eCommerce site. That means, we want to only make it possible to display the Cart component from Storefront UI library. It does not have to provide any logic besides that. We might fill the cart with random, hardcoded data at this stage.

Acceptance Criteria

• Storefront UI component is used.
• I am able to open the Cart with some button located on the standard page layout.
• I can show sidebar Cart.
• I can see dummy items in the Cart.
• I can see dummy totals in the Cart.
• I can see dummy product images in the Cart.
• I can see dummy product names in the Cart.
• I can see dummy product quantities in the Cart.
• I can see dummy product prices in the Cart.

Development instructions
@filrak please fill that part.

• Get code from Storefront UI.
• Delete dummy data.
• Mock dummy data (useCart).
• Use components in storefront.

Dependencies

• https://storybook.storefrontui.io/?path=/story/pages-cart--default

Context
In #15 we prepared the basic CI pipeline. Now we want to setup continuous deployment to the test environment. So we do not have to care about deploying that over and over again.

Dependencies

• Blocked by #15 Continious Integration.

Acceptance Criteria

• After commit automatic pipeline deploys the new changes to test environment.
• I can see the changes in test environment after commit without taking any additional manual action.
• In the comments in pull request I can see checks / link pointing to test environment.

Acceptable criteria

• Products come from commercetools through API Client.

I think it should just return a root category or categories with level )

After adding tests setup lets add https://codecov.io/ to this repo.

Acceptance Criteria

• Code Cov is added to the project.
• Code Cov activity is visible in pull requests.
• Check is configured to 99% of unit tests coverage.

Implement URL dispatcher in a form of index.vue with dynamic component that is rendering proper component based on parsed URL.

Yet to decide how we want to do this ;)

Context
As we want to operate on the API through our API client we want to prepare the methods for managing the API in terms of Category related terms.

Acceptance Criteria

• All the Category related endpoints required for our project are listed below in a comment.
• Each endpoint is covered by a method in our API Client.
• Methods are unit tested.
• Calling a real API via API Client methods has been verified and it works.

Context
After 2-3 years of development od Vue Storefront 1, we came up with some thoughts about new Next architecture. We want to prepare the repository with its initial structure.

Acceptance Criteria

• Directory structure in repo is created.
• It is accepted by both: Patryk and Filip.

Context
As we want to operate on the API through our API client we want to prepare the methods for managing the API in terms of Product related terms.

Acceptance Criteria

• All the Product related endpoints required for our project are listed below in a comment.
• Each endpoint is covered by a method in our API Client.
• Methods are unit tested.
• Calling a real API via API Client methods has been verified and it works.

Context
Storefront UI Header should be added in src/components of commercetools/theme project as AppHeader component and then added to default layout.

Unless we have our own content we can use example code from Storybook (story section) https://storybook.storefrontui.io/?path=/story/organisms-header--default

Acceptance Criteria

• Storefront UI SfHeader component is being used.
• Header is being displayed correctly.
• Logo is being displayed.
• 3 dummy categories are being displayed.
• My Account account is being displayed.
• Cart icon is being displayed.
• Size of the icons is correct.
• Size of the logo is correct.

Context
Right now we are not sure how to manage GraphQL queries in our API Client and how to pass these to methods.

Acceptance Criteria

• Way of dealing with GraphQL is described in docs.
• Way of dealing with GraphQL queries is described in docs.
• Everyone in the team agrees with described way.

Fill homepage slider with bestsellers data via useProduct

1. Add different mobile content for header -> different logo and currency select component
   
2. Add "marketing bar" visible only on desktop (`SfTopBar")
   

Create empty category page with slug reflecting category page from CT

Context
When we play around with API Client and later Test Site based on Storefront UI we will have to call some CommerceTools instance. We want to setup that and configure in test environment.

Acceptance Criteria

• Everyone in the team knows where the CommerceTools test instance is located.
• Everyone is able to login to admin panel.
• It is documented what URL and auth methos we should use to call the API.
• All the restricted information is documented in Confluence space.

Context
As now we are able to fetch the products from the single category we want to start going towards displaying the category tree and making it usable for the user. In the scope of that task we want to populate Storefront UI Accordion component with real categories from commercetools.

Accordion is handling only level 0 and level 1 categories. We do not want to display deeper categories on that stage.

Dependencies

• https://storybook.storefrontui.io/?path=/story/organisms-accordion--basic

Acceptance Criteria

• Accordion component from Storefront UI is being used.
• Categories of level 0 are fetched from commercetools.
• Categories of level 1 are fetched from commercetools.
• I can expand and collapse level 0 categories.
• I can see level 1 categories after expanding level 0 category.
• All the categories (level 0 and 1), that we get from the API are displayed.
• If API returns not-active or not-visible categories then we do not display these in the Accordion.

Not in the scope

• Displaying categories of levels 2 and deeper.
• Redirections / links to categories.

Next tasks

• #56 Redirect to categories

Addd mobile-only missing elements on homepage:

• Buttons
• SfSlider with category tiles:
  

Designs: https://www.figma.com/file/hrwE3VsMBHgdJoS86rVr4W/Desktop-%26-Mobile-Vue-Storefront?node-id=99%3A0

Context
Prepare all the stuff to let you start coding.

Acceptance Criteria

• I can start coding the new awesome CommerceTools integration locally.
• My colleague can follow the instructions written in docs and he/she can also start coding.

Context
At this stage we do not have Product Page implemented at all. There will be some more complex logic. Right now we only want to display standard Storefront UI page. In the next steps, we will add the possibility to redirect from Category Page to Product Page.

Acceptance Criteria

• Product Page from Storefront UI is used https://storybook.storefrontui.io/?path=/story/pages-product--default
• I can see some hardcoded dummy data in the page.
• I can see hardcoded image gallery.
• Everything is properly aligned just like in Storefront UI storybook.
• I can enter the Product Page by using direct URL in a browser.
• No additional logic that calls commercetools API is implemented.

Make basic useCategory composable with dummy data

Include category data from composable into category page component

We should set up a Jest configuration for a whole commercetools package group except theme which already has tests.

Acceptance criteria:

• We have Jest tests setup available for every commercetools package
• There should be one root configuration in packages/commercetools that can be extended per package (similar to tsconfig.base.json and rollup.base.config.js)
• Tests should be able to test ES6 code.

Context
As we want to operate on the API through our API client we want to prepare the methods for managing the API in terms of User Management related terms.

Acceptance Criteria

• All the User Management related endpoints required for our project are listed below in a comment.
• Each endpoint is covered by a method in our API Client.
• Methods are unit tested.
• Calling a real API via API Client methods has been verified and it works.

Context
After looking for an interesting category in a tree I want to open a category. In result, I want to see a listing of all the products available in that category.

Dependencies

• Blocked by #55

Acceptance criteria

• I can recognize, which category I opened.
• After I click on the category name in a tree the product list is being updated.
• I see all products assigned to that category (at least only 1st page in terms of the pagination).

Not in the scope

• Pagination

We should have a hoisted testing Jest config for all packages except theme (which has its own testing suite). Dev dependencies should be saved in a root project.

onServerPrefetch hook is now available in composition API plugin. We should test how it works and implement for basic composables (like useCategory)

Create very basic useProduct composable fetching product based on its id/sku. Base it on core interface

Context
Setup basic CI for yarn build:ct:tools andyarn:build:ct:theme commands running automatically on every PR.

Acceptance Criteria

• yarn build:ct:tools is called in the pipeline.
• yarn build:ct:theme is called in the pipeline.
• Pipeline got verified on sample pull request.

Next tasks

• #9 Setup continious deployment to test env.

Context
As we want to operate on the API through our API client we want to prepare the methods for managing the API in terms of Cart related terms.

Acceptance Criteria

• All the Cart related endpoints required for our project are listed below in a comment.
• Each endpoint is covered by a method in our API Client.
• Methods are unit tested.
• Calling a real API via API Client methods has been verified and it works.

Rollup build that is currently in every package folder should be externalized to single file and shared across other packages to keep the common way of building them.

Acceptable criteria:

• getGallery(product: Product)
• getName(product: Product)
• getPrice(product: Product)
• getSlug(product: Product)
• getVariants(product: Product)

For non-nuxt usage we should indicate that packages require core-js polyfills to run.

The challange here is to deliver it without duplications (which is always roghly 10-15 kB gzipped of polyfills).

Acceptance criteria

• Way of dealing with core-js polyfills is described in docs.
• Everyone in the team agrees with described way.

Context
Storefront UI Footer should be added in src/components of commercetools/theme project as AppFooter component and then added to default layout.

Unless we have our own content we can use example code from Storybook (story section) https://storybook.storefrontui.io/?path=/story/organisms-footer--default

Acceptance Criteria

• SfFooter component is being used.
• "from VueStorefront & LoveCrafts with <3" text in the footer is being displayed.
• Component exists in commercetools/theme/src/components.
• Footer is visible in the frontend, in test environment.
• Text in the footer is centered.

Context
We want to prepare README.MD file to contain basic information about the repository. As @filrak suggested adding that file will influence SEO. This is why it may be worth to postpone it.

Acceptance Criteria

• README.MD is created.
• File contains basic information about the repository.

Acceptance Criteria

• Products come from commercetools through API Client.
• Products are injected into Category Page component

Sub tasks

• Create Category Page View.
• Create basic useCategory composable.
• Create getCategory API Client method.

Not included in the scope task

• Navigation,
• Pagination,
• Filtering,
• Sorting
• Redirects to Product Page

Context
In the future, we will probably use checkout.com. Right now we do not have any knowledge about that one. It is required to do some research as a preparation for Wednesday.