Improving checkout experience Fixes mrvautin#103

lib/common.js

@@ -67,15 +67,6 @@ const convertBool = (value) => {
     return false;
 };
 
-const showCartCloseBtn = (page) => {
-    let showCartCloseButton = true;
-    if(page === 'checkout' || page === 'pay'){
-        showCartCloseButton = false;
-    }
-
-    return showCartCloseButton;
-};
-
 // adds products to sitemap.xml
 const addSitemapProducts = (req, res, cb) => {
     const db = req.app.db;
@@ -587,7 +578,6 @@ module.exports = {
     safeParseInt,
     checkboxBool,
     convertBool,
-    showCartCloseBtn,
     addSitemapProducts,
     clearSessionValue,
     updateTotalCartAmount,

lib/schemas/saveCustomer.json

@@ -0,0 +1,51 @@
+{
+    "$id": "saveCustomer",
+    "type": "object",
+    "properties": {
+        "email": {
+            "type": "string",
+            "format": "emailAddress"
+        },
+        "firstName": {
+            "type": "string",
+            "isNotEmpty": true
+        },
+        "lastName": {
+            "type": "string",
+            "isNotEmpty": true
+        },
+        "address1": {
+            "type": "string",
+            "isNotEmpty": true
+        },
+        "address2": {
+            "type": "string"
+        },
+        "country": {
+            "type": "string",
+            "isNotEmpty": true
+        },
+        "state": {
+            "type": "string",
+            "isNotEmpty": true
+        },
+        "postcode": {
+            "type": "string",
+            "isNotEmpty": true
+        },
+        "phone": {
+            "type": "string",
+            "isNotEmpty": true
+        }
+    },
+    "required": [
+        "email",
+        "firstName",
+        "lastName",
+        "address1",
+        "country",
+        "state",
+        "postcode",
+        "phone"
+    ]
+}

locales/en.json

@@ -166,5 +166,9 @@
 	"Payment ID": "Payment ID",
 	"Payment Message": "Payment Message",
 	"Password": "Password",
-	"Cart Email": "Cart Email"
+	"Cart Email": "Cart Email",
+	"Information": "Information",
+	"Shipping options": "Shipping options",
+	"Proceed to payment": "Proceed to payment",
+	"Return to information": "Return to information"
 }

public/javascripts/expressCart.js

@@ -58,8 +58,9 @@ $(document).ready(function (){
         }
     });
 
-    $('.menu-btn').on('click', function(e){
+    $(document).on('click', '.menu-btn', function(e){
         e.preventDefault();
+        $('body').addClass('pushy-open-right');
     });
 
 	// add the table class to all tables
@@ -75,9 +76,11 @@ $(document).ready(function (){
         $(this).toggleClass('hover');
     });
 
-    $('.product-title').dotdotdot({
-        ellipsis: '...'
-    });
+    if($('.product-title').length){
+        $('.product-title').dotdotdot({
+            ellipsis: '...'
+        });
+    }
 
     $(document).on('click', '.btn-qty-minus', function(e){
         var qtyElement = $(e.target).parent().parent().find('.cart-product-quantity');
@@ -161,12 +164,21 @@ $(document).ready(function (){
         }
     });
 
-    $('#createCustomerAccount').validator().on('click', function(e){
+    $(document).on('click', '#createAccountCheckbox', function(e){
+        $('#newCustomerPassword').prop('required', $('#createAccountCheckbox').prop('checked'));
+    });
+
+    $('#checkoutInformation').validator().on('click', function(e){
         e.preventDefault();
         if($('#shipping-form').validator('validate').has('.has-error').length === 0){
+            // Change route if customer to be saved for later
+            var route = '/customer/save';
+            if($('#createAccountCheckbox').prop('checked')){
+                route = '/customer/create';
+            }
             $.ajax({
                 method: 'POST',
-                url: '/customer/create',
+                url: route,
                 data: {
                     email: $('#shipEmail').val(),
                     firstName: $('#shipFirstname').val(),
@@ -177,11 +189,12 @@ $(document).ready(function (){
                     state: $('#shipState').val(),
                     postcode: $('#shipPostcode').val(),
                     phone: $('#shipPhoneNumber').val(),
-                    password: $('#newCustomerPassword').val()
+                    password: $('#newCustomerPassword').val(),
+                    orderComment: $('#orderComment').val()
                 }
             })
             .done(function(){
-                showNotification('Customer created successfully', 'success', true);
+                window.location = '/checkout/shipping';
             })
             .fail(function(msg){
                 showNotification(msg.responseJSON.message, 'danger');

routes/customer.js

@@ -51,10 +51,24 @@ router.post('/customer/create', async (req, res) => {
         const newCustomer = await db.customers.insertOne(customerObj);
         indexCustomers(req.app)
         .then(() => {
-            // Customer creation successful
+            // Return the new customer
             const customerReturn = newCustomer.ops[0];
             delete customerReturn.password;
-            req.session.customer = customerReturn;
+
+            // Set the customer into the session
+            req.session.customerPresent = true;
+            req.session.customerEmail = customerReturn.email;
+            req.session.customerFirstname = customerReturn.firstName;
+            req.session.customerLastname = customerReturn.lastName;
+            req.session.customerAddress1 = customerReturn.address1;
+            req.session.customerAddress2 = customerReturn.address2;
+            req.session.customerCountry = customerReturn.country;
+            req.session.customerState = customerReturn.state;
+            req.session.customerPostcode = customerReturn.postcode;
+            req.session.customerPhone = customerReturn.phone;
+            req.session.orderComment = req.body.orderComment;
+
+            // Return customer oject
             res.status(200).json(customerReturn);
         });
     }catch(ex){
@@ -65,6 +79,41 @@ router.post('/customer/create', async (req, res) => {
     }
 });
 
+router.post('/customer/save', async (req, res) => {
+    const customerObj = {
+        email: req.body.email,
+        firstName: req.body.firstName,
+        lastName: req.body.lastName,
+        address1: req.body.address1,
+        address2: req.body.address2,
+        country: req.body.country,
+        state: req.body.state,
+        postcode: req.body.postcode,
+        phone: req.body.phone
+    };
+
+    const schemaResult = validateJson('saveCustomer', customerObj);
+    if(!schemaResult.result){
+        res.status(400).json(schemaResult.errors);
+        return;
+    }
+
+    // Set the customer into the session
+    req.session.customerPresent = true;
+    req.session.customerEmail = customerObj.email;
+    req.session.customerFirstname = customerObj.firstName;
+    req.session.customerLastname = customerObj.lastName;
+    req.session.customerAddress1 = customerObj.address1;
+    req.session.customerAddress2 = customerObj.address2;
+    req.session.customerCountry = customerObj.country;
+    req.session.customerState = customerObj.state;
+    req.session.customerPostcode = customerObj.postcode;
+    req.session.customerPhone = customerObj.phone;
+    req.session.orderComment = req.body.orderComment;
+
+    res.status(200).json(customerObj);
+});
+
 // Update a customer
 router.post('/admin/customer/update', restrict, async (req, res) => {
     const db = req.app.db;
@@ -259,7 +308,17 @@ router.post('/customer/login_action', async (req, res) => {
         }
 
         // Customer login successful
-        req.session.customer = customer;
+        req.session.customerPresent = true;
+        req.session.customerEmail = customer.email;
+        req.session.customerFirstname = customer.firstName;
+        req.session.customerLastname = customer.lastName;
+        req.session.customerAddress1 = customer.address1;
+        req.session.customerAddress2 = customer.address2;
+        req.session.customerCountry = customer.country;
+        req.session.customerState = customer.state;
+        req.session.customerPostcode = customer.postcode;
+        req.session.customerPhone = customer.phone;
+
         res.status(200).json({
             message: 'Successfully logged in',
             customer: customer
@@ -379,7 +438,7 @@ router.post('/customer/reset/:token', async (req, res) => {
         common.sendEmail(mailOpts.to, mailOpts.subject, mailOpts.body);
         req.session.message = 'Password successfully updated';
         req.session.message_type = 'success';
-        return res.redirect('/pay');
+        return res.redirect('/checkout/payment');
     }catch(ex){
         console.log('Unable to reset password', ex);
         req.session.message = 'Unable to reset password';
@@ -390,7 +449,19 @@ router.post('/customer/reset/:token', async (req, res) => {
 
 // logout the customer
 router.post('/customer/logout', (req, res) => {
-    req.session.customer = null;
+    // Clear our session
+    req.session.customerPresent = null;
+    req.session.customerEmail = null;
+    req.session.customerFirstname = null;
+    req.session.customerLastname = null;
+    req.session.customerAddress1 = null;
+    req.session.customerAddress2 = null;
+    req.session.customerCountry = null;
+    req.session.customerState = null;
+    req.session.customerPostcode = null;
+    req.session.customerPhone = null;
+    req.session.orderComment = null;
+
     res.status(200).json({});
 });