MT-2843 checkout flow (#59)

* Add Cart modal. Added "Add to cart" button

* Add cartItemList component

* Add Checkout button

* Added Shipping address form

* Added Billing address form to the checkout flow

* Revert Readme file

* add promotions form

* add remove and update quantity function

* Added Payment form

* update sidebar style

* Updated @moltin/sdk version

* Added payment flow

* Related customerId to checkout request. Set customerId as cartId

* add total price on cart tab

* Added updating purchase history after the order complete. Added email validation

* Added the message of completed purchase

* display addresses for logged user

* Fixed small issues

* fix responsive style

* update cart button message

* Added Cart Identifier on logout customer

* Fixed small issues

* update address form

* Remove Continue button for billing address form. Replace set "mcart" to logout function

* Remove shopkitSrc

* - update README

* Removed @moltin/request. Added random generate CartId

* update address selection

* update login flow

* Updated closing modal function

* Updated titles for billing and shipping address

* Capital the first letter for address name

* update payment validation

* Fixed console error

* update validation

* remove comment

Co-authored-by: Petro Dubno <petro.dubno@gmail.com>
Co-authored-by: Shaun Maharaj <Shaun.Maharaj@elasticpath.com>

Author: 3 people

README.md

@@ -14,7 +14,7 @@
 
 The Elastic Path Commerce Cloud REACT PWA Reference Storefront is a flexible e-commerce website built on Elastic Path’s RESTful e-commerce API. The storefront uses the e-commerce capabilities provided by Elastic Path Commerce Cloud and gets data in a RESTful manner.
 
-The storefront uses the [Elastic Path Commerce Cloud JavaScript SDK](https://github.com/moltin/js-sdk) for all Elastic Path Commerce Cloud API requests. For the cart and checkout experiences, the storefront uses [Elastic Path Commerce Cloud Embeddable Cart + Checkout](https://github.com/moltin/shopkit).
+The storefront uses the [Elastic Path Commerce Cloud JavaScript SDK](https://github.com/moltin/js-sdk) for all Elastic Path Commerce Cloud API requests.
 
 You can try out a [live instance of the Reference Storefront](https://epcc-reference.elasticpath.com/).
 

package.json

@@ -3,12 +3,13 @@
   "version": "1.1.0",
   "private": true,
   "dependencies": {
-    "@moltin/sdk": "^4.0.1",
+    "@moltin/sdk": "^4.0.2",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "@types/react-instantsearch-dom": "^6.3.0",
     "@types/react-router-dom": "^5.1.5",
+    "algolia-places-react": "^1.6.0",
     "algoliasearch": "^4.3.0",
     "app-localizer": "^1.2.2",
     "constate": "^2.0.0",
@@ -26,6 +27,7 @@
     "react-router-dom": "^5.2.0",
     "react-script-hook": "^1.1.1",
     "react-scripts": "3.4.1",
+    "react-stripe-elements": "^6.1.2",
     "serve": "^11.3.1",
     "sharethis-reactjs": "^1.5.0",
     "typescript": "^3.7.3",

public/index.html

@@ -33,5 +33,6 @@
           s.parentNode.insertBefore(wf, s);
       })(document);
     </script>
+    <script src="https://js.stripe.com/v3/"></script>
   </body>
 </html>

src/AccountDropdown.tsx

@@ -1,8 +1,8 @@
 
-import React, { useState} from 'react';
-import {Link, useHistory} from 'react-router-dom';
+import React, { useState } from 'react';
+import { Link, useHistory } from 'react-router-dom';
 import useOnclickOutside from 'react-cool-onclickoutside';
-import {useCustomerData, useTranslation} from './app-state';
+import { useCustomerData, useTranslation } from './app-state';
 import { createAccountUrl } from './routes';
 import { LoginDialog } from './LoginDialog';
 import { ReactComponent as AccountIcon } from './images/icons/ic_account.svg';
@@ -31,7 +31,14 @@ export const AccountDropdown: React.FC = (props) => {
     setIsOpen(false);
   });
 
+  const createCartIdentifier = () => {
+    return 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'.replace(/[x]/g, () =>
+      ((Math.random() * 16) | 0).toString(16)
+    )
+  };
+
   const logout = () => {
+    localStorage.setItem('mcart', createCartIdentifier());
     clearCustomerData();
     history.push('/');
   };

src/AddressFields.scss

@@ -0,0 +1,70 @@
+
+@import './theme/common';
+
+.address {
+  &__main {
+    margin-bottom: 20px;
+  }
+
+  &__addressbutton {
+    margin-top: 10px;
+    text-decoration: underline;
+
+    &:hover {
+      cursor: pointer;
+      color: #0099DE;
+    }
+  }
+
+  &__field {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+  }
+
+  &.--styledinput {
+    width: 50%;
+    padding: 0 12px;
+  }
+
+  .--addspace {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+  }
+
+  .epform {
+    &__label {
+      text-transform: none;
+    }
+
+    &__input {
+      height: 40px;
+    }
+  }
+
+  .epform {
+    &__error {
+      position: unset;
+    }
+  }
+
+  &__wrap {
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 20px;
+    border-top: 1px solid $firstBorderColor;
+    border-bottom: 1px solid $firstBorderColor;
+    margin-top: 15px;
+    margin-bottom: 15px;
+
+    .address__container {
+      display: flex;
+    }
+
+    .address__list {
+      padding: 0;
+    }
+  }
+}
+
+