CIF-965 - Implement client side cart & checkout for CIF

ui.apps/src/main/javascript/minicart/.eslintrc.js

@@ -41,14 +41,14 @@ module.exports = {
     },
     plugins: ['react', 'react-hooks', 'header', 'jest'],
     rules: {
-        'no-console': 'warn',
+        'no-console': ['warn', { allow: ['error', 'warn'] }],
         'no-undef': 'error',
         'no-unused-vars': 'warn',
         'header/header': [2, 'block', headerBlock],
         'no-var': 'error',
         'one-var': ['error', 'never'],
         // override the default which is more restrictive
-        'react/prop-types': 'warn',
+        'react/prop-types': ['warn', { ignore: ['children'] }],
         strict: ['error', 'global']
     }
 };

ui.apps/src/main/javascript/minicart/src/components/Button/button.js

@@ -12,7 +12,7 @@
  *
  ******************************************************************************/
 import React from 'react';
-import { oneOf, shape, string, node } from 'prop-types';
+import { oneOf, node } from 'prop-types';
 
 import classes from './button.css';
 

ui.apps/src/main/javascript/minicart/src/components/Checkout/editableForm.js

@@ -68,7 +68,6 @@ const EditableForm = props => {
 
     const handleSubmitAddressForm = useCallback(
         formValues => {
-            console.log(`Got form values from the address form`, formValues.email);
             setShippingAddressesOnCart({ variables: { cartId: cart.cartId, countryCode: 'US', ...formValues } });
             setGuestEmailOnCart({ variables: { cartId: cart.cartId, email: formValues.email } });
         },

ui.apps/src/main/javascript/minicart/src/components/Checkout/flow.js

@@ -12,7 +12,7 @@
  *
  ******************************************************************************/
 import React, { useState } from 'react';
-
+import { func, shape, string, array } from 'prop-types';
 import Cart from './cart';
 import Form from './form';
 import classes from './flow.css';
@@ -24,23 +24,19 @@ const isCartReady = cart => {
 
 const Flow = props => {
     const { cart, cartId, handleCloseCart, handleResetCart } = props;
-    console.log(`This is our cart `, cart);
 
     const [flowState, setFlowState] = useState('cart');
     const [order, setOrder] = useState({});
 
     const beginCheckout = () => {
-        console.log(`Beginning checkout`);
         setFlowState('form');
     };
 
     const cancelCheckout = () => {
-        console.log('Cancelling checkout');
         setFlowState('cart');
     };
 
     const orderCreated = order => {
-        console.log('Order created');
         setOrder(order);
         setFlowState('receipt');
     };
@@ -75,4 +71,14 @@ const Flow = props => {
     return <div className={classes.root}>{child}</div>;
 };
 
+Flow.propTypes = {
+    handleCloseCart: func,
+    handleResetCart: func,
+    cart: shape({
+        shipping_addresses: array,
+        email: string
+    }),
+    cartId: string.isRequired
+};
+
 export default Flow;

ui.apps/src/main/javascript/minicart/src/components/Checkout/form.js

@@ -11,7 +11,7 @@
  *    governing permissions and limitations under the License.
  *
  ******************************************************************************/
-import React, { useState, useCallback } from 'react';
+import React, { useState } from 'react';
 import { shape, string, array, object } from 'prop-types';
 
 import Overview from './overview';

ui.apps/src/main/javascript/minicart/src/components/Checkout/paymentsForm.js

@@ -13,7 +13,7 @@
  ******************************************************************************/
 import React, { useCallback, useState, useRef, useEffect } from 'react';
 import { Form } from 'informed';
-import { array, bool, shape, string } from 'prop-types';
+import { array, bool, shape, string, func } from 'prop-types';
 
 import Button from '../Button';
 import Select from '../Select';
@@ -35,7 +35,7 @@ const DEFAULT_FORM_VALUES = {
  * the submission state as well as prepare/set initial values.
  */
 const PaymentsForm = props => {
-    const { initialPaymentMethod, initialValues, paymentMethods, cancel, countries, cart, submit } = props;
+    const { initialPaymentMethod, initialValues, paymentMethods, cancel, countries, submit } = props;
     const [isSubmitting, setIsSubmitting] = useState(false);
 
     const anchorRef = useRef(null);
@@ -51,7 +51,7 @@ const PaymentsForm = props => {
         ? paymentMethodsItems[0].value
         : initialPaymentMethod.code;
 
-    const [paymentMethod, setPaymentMethod] = useState(initialPaymentMethodState);
+    const [paymentMethod] = useState(initialPaymentMethodState);
 
     let initialFormValues;
     if (isObjectEmpty(initialValues)) {
@@ -77,7 +77,6 @@ const PaymentsForm = props => {
 
     const handleSubmit = useCallback(
         formValues => {
-            console.log(`Payment form values`, formValues);
             setIsSubmitting(true);
             const sameAsShippingAddress = formValues['addresses_same'];
             let billingAddress;
@@ -211,7 +210,14 @@ PaymentsForm.propTypes = {
         region_code: string,
         sameAsShippingAddress: bool,
         street0: array
-    })
+    }),
+    cancel: func.isRequired,
+    submit: func.isRequired,
+    initialPaymentMethod: shape({
+        code: string
+    }),
+    paymentMethods: array.isRequired,
+    countries: array
 };
 
 PaymentsForm.defaultProps = {

ui.apps/src/main/javascript/minicart/src/components/Checkout/receipt.js

@@ -45,7 +45,7 @@ Receipt.propTypes = {
         order_id: string
     }).isRequired,
     handleCloseCart: func.isRequired,
-    createAccount: () => {}
+    handleResetCart: func.isRequired
 };
 
 export default Receipt;

ui.apps/src/main/javascript/minicart/src/components/Checkout/shippingForm.js

@@ -38,7 +38,6 @@ const ShippingForm = props => {
 
     const handleSubmit = useCallback(
         ({ shippingMethod }) => {
-            console.log(`Submitted shipping method`, shippingMethod);
             const selectedShippingMethod = availableShippingMethods.find(
                 ({ carrier_code }) => carrier_code === shippingMethod
             );

ui.apps/src/main/javascript/minicart/src/components/Minicart/body.js

@@ -90,5 +90,6 @@ Body.propTypes = {
     removeItemFromCart: func.isRequired,
     beginEditItem: func.isRequired,
     handleEndEditing: func.isRequired,
-    cartId: string
+    cartId: string,
+    closeDrawer: func.isRequired
 };

ui.apps/src/main/javascript/minicart/src/components/Minicart/container.js

@@ -11,7 +11,7 @@
  *    governing permissions and limitations under the License.
  *
  ******************************************************************************/
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import MiniCart from './minicart';
 
 import { useGuestCart } from '../../utils/hooks';

ui.apps/src/main/javascript/minicart/src/components/Minicart/emptyMinicartBody.js

@@ -12,6 +12,7 @@
  *
  ******************************************************************************/
 import React from 'react';
+import { func } from 'prop-types';
 import Trigger from '../Trigger';
 import classes from './emptyMiniCartBody.css';
 
@@ -27,4 +28,8 @@ const EmptyMinicartBody = props => {
     );
 };
 
+EmptyMinicartBody.propTypes = {
+    closeDrawer: func.isRequired
+};
+
 export default EmptyMinicartBody;

ui.apps/src/main/javascript/minicart/src/components/Minicart/footer.js

@@ -12,9 +12,7 @@
  *
  ******************************************************************************/
 import React from 'react';
-import { Lock as LockIcon } from 'react-feather';
-import { object, func, bool } from 'prop-types';
-import Button from '../Button';
+import { object, func, bool, string } from 'prop-types';
 import Checkout from '../Checkout';
 import classes from './footer.css';
 import TotalsSummary from './totalsSummary';
@@ -25,16 +23,6 @@ const Footer = props => {
 
     const { currency, value: totalPrice } = cart.prices.grand_total;
 
-    const placeholderButton = () => {
-        return (
-            <div className={classes.placeholderButton}>
-                <Button priority="high">
-                    Checkout <LockIcon />
-                </Button>
-            </div>
-        );
-    };
-
     return (
         <div className={footerClassName}>
             <TotalsSummary currencyCode={currency} numItems={cart.items.length} subtotal={totalPrice} />
@@ -50,7 +38,9 @@ const Footer = props => {
 
 Footer.propTypes = {
     cart: object.isRequired,
+    cartId: string.isRequired,
     handleCloseCart: func.isRequired,
+    handleResetCart: func.isRequired,
     isOpen: bool
 };
 export default Footer;

ui.apps/src/main/javascript/minicart/src/components/Minicart/minicart.js

@@ -12,7 +12,7 @@
  *
  ******************************************************************************/
 import React, { useState, useCallback } from 'react';
-import { string } from 'prop-types';
+import { string, func } from 'prop-types';
 import { useQuery, useMutation } from '@apollo/react-hooks';
 
 import { useEventListener } from '../../utils/hooks';
@@ -47,7 +47,7 @@ const MiniCart = props => {
     const { data, error, loading: queryLoading } = useQuery(CART_DETAILS_QUERY, { variables: { cartId } });
 
     if (error) {
-        console.log(`Error loading cart`, error);
+        console.error(`Error loading cart`, error);
     }
 
     const openCart = () => {
@@ -140,7 +140,8 @@ const MiniCart = props => {
 };
 
 MiniCart.propTypes = {
-    cartId: string.isRequired
+    cartId: string.isRequired,
+    resetCart: func.isRequired
 };
 
 export default MiniCart;

ui.apps/src/main/javascript/minicart/src/utils/hooks.js

@@ -70,7 +70,7 @@ export const useGuestCart = () => {
 };
 
 export const useCountries = () => {
-    const { data, loading, error } = useQuery(QUERY_COUNTRIES);
+    const { data } = useQuery(QUERY_COUNTRIES);
     if (!data && !data.countries) {
         return [];
     }