Merge branch 'hotfix'

DigiThinkIT · Sep 18, 2019 · cc0002a · cc0002a
2 parents bbb105b + bc2a7af
commit cc0002a
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 37 deletions.
diff --git a/awesome_cart/__init__.py b/awesome_cart/__init__.py
@@ -2,5 +2,5 @@
 from __future__ import unicode_literals
 import frappe
 
-__version__ = '3.4.3'
+__version__ = '3.4.4'
 __title__ = "Cart"
diff --git a/awesome_cart/public/css/checkout.css b/awesome_cart/public/css/checkout.css
@@ -110,4 +110,53 @@
 	margin: 0;
 	text-align: left;
 	min-width: 50%;
+}
+
+.checkout-step {
+	max-height: 100vh;
+	overflow: hidden;
+	transition: max-height 300ms linear;
+}
+.panel.active-state-confirm .checkout-step,
+.panel.active-state-terms .checkout-step {
+	transition: max-height 300ms linear;
+}
+
+.panel.active-state-confirm .state-confirm {
+}
+
+.panel.active-state-confirm .state-terms {
+	max-height: 0;
+}
+
+.panel.active-state-terms .state-confirm {
+	max-height: 0;
+}
+
+.panel.active-state-terms .state-terms {
+}
+
+#checkout-continue-terms:disabled {
+	background-color: #333;
+	color: #888;
+}
+
+.panel .agreement-label {
+	margin-top: 3rem;
+	font-weight: bold;
+	text-align: center;
+	color: black;
+}
+
+.panel .terms h2 {
+	font-size: 1.5rem;
+	text-align: left;
+}
+
+.panel .terms {
+	height: 50vh;
+	overflow: auto;
+	border: 1px solid #888;
+	padding: 1rem;
+	border-radius: .5rem;
 }
diff --git a/awesome_cart/public/js/awc_cart.js b/awesome_cart/public/js/awc_cart.js
@@ -18,6 +18,11 @@ awc_checkout = {
 		}
 
 		awc_checkout._page_change_id = setTimeout((function(page) {
+			// reset terms box when nav away to other tabs
+			$('#checkout-confirmation')
+			.removeClass('active-state-terms')
+			.addClass('active-state-confirm');
+
 			awc_checkout.validate();
 			$('.panel').slideUp('fast');
 			$(page).slideDown('fast');
@@ -79,10 +84,8 @@ awc_checkout = {
 			awc_checkout.billing_address = billing_validation_response.address
 		}
 
-		// disable checkout until terms and condition box is checked
-		if (!$('#confirm-form input[name="accept_terms"]').is(':checked')) {
-			checkout_enabled = false;
-		}
+		// Enable/disable checkout continue button on validation
+		$('#checkout-continue-terms').prop('disabled', !checkout_enabled);
 
 		awc_checkout.gateway_provider.enable(checkout_enabled);
 
@@ -531,14 +534,20 @@ awc_checkout = {
 				// checkout error back button
 				$('#checkout-error .btn-primary')
 					.click(function() {
+						$('#checkout-confirmation')
+						.removeClass('active-state-terms')
+						.addClass('active-state-confirm');
+
 						awc_checkout.showPage('#checkout-billing');
 						$('html, body').animate({ scrollTop: $('#awc-forms').offset().top - 60 }, 'slow');
 					})
 
 				// checkout accept terms
-				$('#checkout-confirmation input[name="accept_terms"]')
-					.change(function() {
-						awc_checkout.validate();
+				$('#checkout-continue-terms')
+					.click(function() {
+						$('#checkout-confirmation')
+							.removeClass('active-state-confirm')
+							.addClass('active-state-terms');
 					});
 
 

diff --git a/awesome_cart/templates/includes/integrations/awc-checkout-terms.html b/awesome_cart/templates/includes/integrations/awc-checkout-terms.html
@@ -0,0 +1,4 @@
+<div class="terms">
+  TERMS HERE
+</div>
+<p class="agreement-label">By clicking the checkout button below you accept the above terms and conditions</p>
diff --git a/awesome_cart/templates/pages/cart.html b/awesome_cart/templates/pages/cart.html
@@ -97,46 +97,53 @@ <h2>Shipping Method</h2>
 							{% endif %}
 					</div>
 
-					<div id="checkout-confirmation" data-bc="#bc-checkout" class="panel">
-						<p>Please review your information before once more before completing checkout</p>
+					<div id="checkout-confirmation" data-bc="#bc-checkout" class="panel active-state-confirm">
+						<div class="checkout-step state-confirm">
+							<p>Please review your information before once more before completing checkout</p>
 
-						<div class="confirm-box dti-form" id="checkout-confirm-shipping">
-							<h4>Shipping Information<button class="btn btn-default btn-primary">Edit</button></h4>
-							<div class="content"></div>
-
-						</div>
-
-						<div class="confirm-box dti-form" id="checkout-confirm-billing">
-							<h4>Billing Information<button class="btn btn-default btn-primary">Edit</button></h4>
-							<div class="content"></div>
+							<div class="confirm-box dti-form" id="checkout-confirm-shipping">
+								<h4>Shipping Information<button class="btn btn-default btn-primary">Edit</button></h4>
+								<div class="content"></div>
+							</div>
 
-						</div>
+							<div class="confirm-box dti-form" id="checkout-confirm-billing">
+								<h4>Billing Information<button class="btn btn-default btn-primary">Edit</button></h4>
+								<div class="content"></div>
+							</div>
 
-						<div class="confirm-box dti-form" id="checkout-confirm-totals">
-							{% if selected_customer %}
-							<h4 class="selected-customer"><span>Totals For:</span><span class="value">{{ selected_customer }}</span></h4>
-							{% else %}
-							<h4>Your Totals:</h4>
-							{% endif %}
-							<div class="content">
-								<div class="sub-total">Subtotal: <span class="value"></span></div>
-								<div class="other-totals">
+							<div class="confirm-box dti-form" id="checkout-confirm-totals">
+								{% if selected_customer %}
+								<h4 class="selected-customer"><span>Totals For:</span><span class="value">{{ selected_customer }}</span></h4>
+								{% else %}
+								<h4>Your Totals:</h4>
+								{% endif %}
+								<div class="content">
+									<div class="sub-total">Subtotal: <span class="value"></span></div>
+									<div class="other-totals">
+									</div>
+									<div class="grand-total">Total: <span class="value"></span></div>
 								</div>
-								<div class="grand-total">Total: <span class="value"></span></div>
 							</div>
-						</div>
 
-						<div class="confirm-box awc-form" id="checkout-confirm-instructions">
-							<div class="field">
-								<label for="order-instructions">Special Instructions</label>
-								<textarea id="order-instructions" name="order-instructions" placeholder="Special Instructions"></textarea>
+							<div class="confirm-box awc-form" id="checkout-confirm-instructions">
+								<div class="field">
+									<label for="order-instructions">Special Instructions</label>
+									<textarea id="order-instructions" name="order-instructions" placeholder="Special Instructions"></textarea>
+								</div>
 							</div>
 						</div>
 
 						<div class="dti-form" id="confirm-form">
-							<label style="cursor: pointer"><input name="accept_terms" type="checkbox" value="1"/><span> I agree with the <a href="policies" rel="nofollow" target="_blank">Terms and Conditions</a></span></label>
+							<!-- <label style="cursor: pointer"><input name="accept_terms" type="checkbox" value="1"/><span> I agree with the <a href="policies" rel="nofollow" target="_blank">Terms and Conditions</a></span></label> -->
 							{% if gateway_provider %}
-								{{ gateway_provider.submit }}
+								<div class="checkout-step state-confirm">
+									<Button disabled id="checkout-continue-terms" class="btn btn-primary">Continue</Button>
+								</div>
+								<div class="checkout-step state-terms">
+									{% include "templates/includes/integrations/awc-checkout-terms.html" with context %}
+
+									{{ gateway_provider.submit }}
+								</div>
 							{% else %}
 								<div class="alert">No Gateway Provider Found!</div>
 							{% endif %}