CIF-965 - Implement client side checkout for CIF #106
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Remove old minicart component client-library
Bootstrap the new React project for the MiniCart component. Both components (MiniCart and Checkout) will live in the same React project and will be rendered in AEM by the same component (minicart).
Rename the output file to `index`. Update `.gitignore`
Expand the Webpack configuration to extract accompanying styles. Add eslint rules Remove the component from the webpack config of the content package.
Add the components required to render a minicart and wire them to the Apollo provider.
Add context menu for product Add product image (doesn't work ATM).
Update the `postbuild` script to also deploy the client library to AEM
Implement the drop-down menu for cart items.
Add the mutation to remove an item from the cart.
Get rid of the initial container component, it brought nothing to the table.
Switch from the `useQuery` hook from Peregrine to the one in Apollo.
Start implementing the "Edit item" feature
Add the "Update cart item" feature
Fix the issue with the images not being displayed in the minicart
Add the 'Add to cart' capability. The 'Add to cart' button has been updated to send an event instead of calling the MiniCart API
Replace the cart trigger with a React component so that it can interact with the Minicart component.
Add the totals panel in the minicart footer section
Fix the issue with the loading animation not showing up. Clean up the project
Read the cart id from the user cookie. If the cookie is not planted yet, create the guest cart and write the cookie.
Update the unit tests for the `Add to cart` component to test the new behavior of the component.
Fix formatting (!@#$%^@#)
Follow-up on the review. Clean-up linting warning, remove `console.log`s
Fix an issue with the prop types of the `Body` component which specified that `editItem.id` is required. Fix an issue with the `useGuestCart()` hook.
Remove faulty import
Fixed the prop-types
…hQL API Fix an issue which was causing an error to popup in the log, saying that the `Select` component was rendered with an invalid property (string instead of number)
Implement the functionality for the "Shipping Methods" form
Add the guest email on the cart.
Add the "Place order" feature. After the order, it just shows a receipt in the cart component.
Add the "Continue Shopping" button to the empty minicart
10 tasks
Add the 'Place Order' mutation. Fix issues found during end-to-end testing
Fix small issues: - setting the shipping method doesn't throw a method anymore - disabled the "use" button when submitting the shipping address
- integrate minicart/checkout build into pom.xml
Codecov Report
@@ Coverage Diff @@
## master #106 +/- ##
=========================================
Coverage 82.63% 82.63%
Complexity 336 336
=========================================
Files 38 38
Lines 1307 1307
Branches 102 102
=========================================
Hits 1080 1080
Misses 158 158
Partials 69 69
Continue to review full report at Codecov.
|
- fix prettier warnings
- always use relative path
- calculate test coverage for new React components
- remove console.log statements
- fix order receipt view
- add continue shopping button to receipt view
Reset the cart after the order is placed. Update the eslint configuration file to warn about `console` statements.
mhaack
approved these changes
Sep 9, 2019
- add package-lock.json
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR is huge because it contains all the React components needed to render the MiniCart.
Description
The MiniCart is a React app which renders in the
minicartplaceholder div. The component uses React hooks provided by Apollo to fetch/mutate cart data.The "Cart Trigger" icon has been converted to a React component as well because it was easier to interact with it (change the style when there are items in cart and increase de cart counter). The "Cart Trigger" is rendered in the header using React Portals .
The
Add to cartbutton has been updated to work with the newminicartcomponent.The checkout process is covered by the Checkout component and it's driven by GraphQL queries.
How to test it on a local instance
Prerequisites:
aem-core-cif-components.repocommand installed so that the build process can push the clientlib to AEMOnce the above requirements are met go to
ui.apps/src/main/javascript/minicartand runThe
build:clientlibcommand will copy the files from the./distfolder to the clientlib and also run therepocommand to upload them to AEM. If you don't haverepoutility installed then you can just copy the./distfolder in./ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v1/minicart/clientliband then install the components content-package.Leftovers
There are still some minor things to do:
There are also some things that could be done better, such as leveraging React Context instead of just passing function handlers along a (quite deep) tree of components.
Related Issue
CIF-961 / CIF-965
Motivation and Context
Align with the technology used by Magento PWA
How Has This Been Tested?
Functional testing
Screenshots (if appropriate):
Types of changes
Checklist: