Skip to content

Commit

Permalink
Feat cc agreement (#331)
Browse files Browse the repository at this point in the history 
* feat: checkout terms and conditions display

* fix: removes outdated comment
  • Loading branch information
Felipe Orellana authored Aug 15, 2019
1 parent bbb105b commit 2360df6
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 36 deletions.
49 changes: 49 additions & 0 deletions awesome_cart/public/css/checkout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
23 changes: 16 additions & 7 deletions awesome_cart/public/js/awc_cart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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');
});


Expand Down
4 changes: 4 additions & 0 deletions awesome_cart/templates/includes/integrations/awc-checkout-terms.html
View file
Original file line number Diff line number Diff line change
@@ -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>
65 changes: 36 additions & 29 deletions awesome_cart/templates/pages/cart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down

0 comments on commit 2360df6

Please sign in to comment.