Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Checkout fe #890

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Checkout fe #890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ecdf24b
added payment modal and re-styled the starter payment partial
DorianGC-G Sep 24, 2021
5b71bfc
moved the bubble
DorianGC-G Sep 24, 2021
c4940a3
added settle-in pack new layout, needs more style
DorianGC-G Sep 26, 2021
7952b22
style refinement for both checkout pages, still needs a way to change…
DorianGC-G Sep 27, 2021
78a0827
added a way to change address on checkout page for starter pack, few …
DorianGC-G Sep 27, 2021
d91684e
added a small function to make the page reset properly on change addr…
DorianGC-G Sep 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions app/assets/stylesheets/components/_change-address-modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.change-address-modal {
.modal-dialog {
height: 70%;
transition: 0.5s;
position: absolute;
bottom: 0px;
}
.modal-content {
border-radius: 16px 16px 0px 0px;
box-shadow: 0px 0px 16px rgba(140, 48, 245, 0.2);
}
}
2 changes: 2 additions & 0 deletions app/assets/stylesheets/components/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,5 @@
@import "bg-top";
@import "bg-bubble";
@import "background-waves";
@import "payment-modal";
@import "change-address-modal";
18 changes: 18 additions & 0 deletions app/assets/stylesheets/components/_payment-modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
.payment-modal {
.modal-dialog {
height: 70%;
transition: 0.5s;
position: absolute;
bottom: 0px;
}
.modal-content {
border-radius: 16px 16px 0px 0px;
box-shadow: 0px 0px 16px rgba(140, 48, 245, 0.2);
}
label {
color: $grey;
}
#card-cvc-element {
width: 60px;
}
}
25 changes: 21 additions & 4 deletions app/assets/stylesheets/steps/checkouts/_new.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
.pricing {
font-size: 14px;
.pricing-card {
color: #18191fa6;
display: flex;
align-items: center;
margin-bottom: 1rem;
Expand All @@ -10,6 +9,7 @@
margin-right: 12px;
img {
width: 50px;
border-radius: 4px;
}
}
.pricing-details {
Expand All @@ -25,11 +25,15 @@
flex-direction: column;
width: 100%;
.name {
font-weight: bold;
font-weight: 500;
}
.description {
padding-right: 0.9em;
}
.price {
font-weight: 700;
font-size: 13px;
}
}
.product-price {
font-weight: bold;
Expand All @@ -38,16 +42,29 @@
}
}
.total-price {
color: #18191fa6;
.total {
font-size: 18px;
font-weight: bold;
font-weight: 700;
}
}
.old-price {
font-weight: 200;
font-size: 16px;
}
.bg-bubble {
top: -10%;
left: -20%;
}
.subscription-details {
.details {
font-size: 14px;
font-weight: 400;
color: #3E3E3E;
}
}
.pointer {
cursor: pointer;
}
}
.legals {
color: $grey;
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/controllers/address_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default class extends Controller {
address.classList.toggle("d-none");
address.value = "";
address.type = "text";
document.querySelector('.mapboxgl-ctrl').classList.toggle('d-none');
document.getElementById('mapbox').classList.toggle('d-none');
}

cleanCountryCode(e) {
Expand Down
29 changes: 29 additions & 0 deletions app/views/steps/checkout/_change_address_modal.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<div class="modal fade change-address-modal" id="changeAddressModal" aria-labelledby="changeAddressModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-sm-down" id="dialog">
<div class="modal-content">
<div class="modal-body">
<div class="container p-1">
<%= simple_form_for shipping, url: new_shipping_path(order), data: {reflex: "submit->ShippingReflex#create", reflex_serialize_form: true, controller: "address" }, html: { onsubmit: "setTimeout(function(){window.location.reload();},10);" } do |f| %>
<div class="d-flex justify-content-between align-items-center mb-3">
<h3>Change address</h3>
<button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<label>Your current address</label>
<div id="mapbox" data-address-target="geocoder" class="mb-3 form-group mb-0 string required shipping_address_mapbox position-relative" data-action='keydown->address#cleanCountryCode' >
</div>
<div class="invalid-feedback d-block"><%= f.full_error(:address) %></div>
<div class="d-flex">
<input data-address-target="noAddress" data-action="click->address#manualAddress" type="checkbox" class="me-2"></input>
<label><strong>I can't find my address </strong></label>
</div>
<%= f.hidden_field :address, required: true, class: 'form-control d-none mb-3', placeholder: "Manually type in your address", data: { address_target: 'addressInput' } %>
<label class="my-3">Please make sure you will be at this address for at least 2 more weeks to ensure you receive your Starter Pack</label>
<label>Any other delivery instructions? (optional)</label>
<%= f.input :instructions, required: true, label: false, placeholder: 'Type a message for us' %>
<button class="btn btn-main mt-4" type="submit">Continue</button>
<% end %>
</div>
</div>
</div>
</div>
</div>
9 changes: 5 additions & 4 deletions app/views/steps/checkout/_new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<div class="flow-container" data-controller="animate">
<div class="container">
<div class="container background-waves">
<div class="row justify-content-center">
<div class="col-xs-12 col-lg-6">
<div class="content-container" data-delay="0" data-animate-target="contentContainer">
<%= render "steps/checkout/summaries/#{order.pack}", order: order, house: order.user.house %>
<div class="form-base">
<%= render "steps/checkout/form", order: order, billing: billing %>
</div>
</div>
<%= render 'steps/checkout/payment_modal', order: order, billing: billing %>
<% if order.pack == "starter" %>
<%= render 'steps/checkout/change_address_modal', order: order, shipping: order.shipping %>
<% end %>
</div>
</div>
</div>
Expand Down
51 changes: 51 additions & 0 deletions app/views/steps/checkout/_payment_modal.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<div class="modal fade payment-modal" id="paymentModal" aria-labelledby="paymentModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-sm-down" id="dialog">
<div class="modal-content">
<div class="modal-body">
<div class="container p-1">
<%= simple_form_for order, url: payments_path(order), method: :post, data: { controller: "payment", locale: I18n.locale}, html: {id: 'payment-form'} do |f| %>
<%= simple_fields_for billing do |p| %>
<div class="d-flex justify-content-between align-items-center mb-3">
<h3>Payment</h3>
<button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div data-controller='address' >
<label>Billing address</label>
<div data-address-target="geocoder" class="form-group mb-0 string required shipping_address_mapbox position-relative" data-action='keydown->address#cleanCountryCode' required="true" ></div>
<div class="invalid-feedback d-block"><%= billing.errors.full_messages[0] %></div>
<%= p.hidden_field :address, required: true, data: { address_target: 'addressInput' } %>
</div>
<% end %>
<div class="form-divs-wrapper mb-3">
<div class="form-group">
<label for="card-number-element" class="my-1"><%= t('orders.stripe.number') %></label>
<div id="card-number-element" class="w-100"></div>
<div id="card-errors" class="mt-2" role="alert"></div>
</div>
<div class="lines-input d-flex justify-content-between">
<div class="form-group">
<label for="card-expiry-element" class="my-1"><%= t('orders.stripe.date') %></label>
<div id="card-expiry-element"></div>
</div>
<div class="form-group">
<label for="card-cvc-element" class="my-1">CVC</label>
<div id="card-cvc-element"></div>
</div>
</div>
<div class="form-group my-3">
<span class="legals">
<%= t('orders.stripe.policy_link', href: link_to("Terms & Conditions | Stripe", "https://stripe.com/en-gb/privacy", target:"blank", class:'policy-link').html_safe).html_safe %>
</span>
</div>
<hr>
<%= f.button :submit, 'Complete payment', class: 'btn-main mb-2', id: 'stripe-submit', data: {disable_with: false} %>
</div>
<div class="powered text-center">
<p>Powered by Stripe</p>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
61 changes: 21 additions & 40 deletions app/views/steps/checkout/summaries/_settle_in.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,31 @@
<h3 class="my-3">Your Settle in Pack</h3>
<span>You pay one fixed fee per month for the services you chose (this amount will never change!) You can cancel anytime at no extra cost.</span>
<hr>
<div class="pricing d-flex flex-column text-center">
<% order.products.includes([:company], [:country], [:category]).each do |product| %>
<div class="pricing-card">
<div class="product-img">
<%= image_tag(asset_path(product.company.logo_url)) %>
</div>
<div class="pricing d-flex flex-column text-left">
<h3 class="my-3">Your Settle in Pack</h3>
<div class="bg-bubble purple position-absolute"></div>
<% order.products.includes([:company, :country, :category]).each do |product| %>
<div class="pricing-card my-3">
<div class="product-name">
<span class="name"><%= product.name %></span>
<span class="description"><%= t("checkout.summary.#{product.country.code}.#{product.service.name}") %></span>
</div>
<% if product.category.utilities? %>
<% if product.category.utilities? %>
<% price = product.option_types.find_by(name: 'tenants').option_values.find_by(name: house&.house_detail.tenants).option_value_variant.variant.subscription_price %>
<% else %>
<% price = product.subscription_price %>
<% end %>
<div class="product-price">
<span class="price-lite"><%= product.country.currency_symbol %><%= number_to_currency(price, :unit => '') %>/month</span>
<% else %>
<% price = product.subscription_price %>
<% end %>
<span class="price-lite grey"><%= product.country.currency_symbol %><%= number_to_currency(price, :unit => '') %>/month</span>
<span class="price">Setup cost: <%= product.country.currency_symbol %><%= number_to_currency(product.activation_price, :unit => '') %></span>
</div>
<div class="product-img">
<%= image_tag(asset_path("components/service-card/#{product.category.name}.png")) %>
</div>
</div>
<% end %>
<div class="total-price text-left">
<span class="total">Total setup cost: <%= number_to_currency(order.total_amount_display, :unit => '') %><%= order.currency_symbol %></span>
</div>
<hr>
<div class="total-price">
<div class="d-flex justify-content-between total">
<span>Total setup cost</span>
<span class="price"><%= order.currency_symbol %><%= number_to_currency(order.total_amount_display, :unit => '') %></span>
</div>
<div class="d-flex justify-content-between total">
<span>Total monthly fee</span>
<span class="price"><%= order.currency_symbol %><%= number_to_currency(order.total_subscription_amount_display, :unit => '') %></span>
</div>
<% if order.affiliate_link.present? %>
<div class="d-flex justify-content-between total">
1st payment :
<div>
<strike class="old-price"><%= order.currency_symbol %><%= number_to_currency(order.total_subscription_amount_display, :unit => '') %> </strike>
<%= order.currency_symbol %><%= number_to_currency(order.discounted_subscription_amount(20) / 100, :unit => '') %>
</div>
</div>
<br>
<div class="d-flex justify-content-between">
<span>Promocode</span>
<span class="price"><%= order.affiliate_link.upcase %></span>
</div>
<% end %>
<div class="subscription-details text-left mt-3 mb-4">
<h3 class="mb-3">Subscription details</h3>
<span class="details">This payment is a one-time only for setup costs. Your first service invoice will start after the service begins on <%= order.user.house.house_detail.contract_starting_date.strftime('%d/%m/%Y') %>.</span>
</div>
<hr>
<button class="btn btn-main mb-3" data-bs-toggle="modal" data-bs-target="#paymentModal">Pay <%= number_to_currency(order.total_amount_display, :unit => '') %><%= order.currency_symbol %></button>
</div>
49 changes: 22 additions & 27 deletions app/views/steps/checkout/summaries/_starter.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,38 @@
<h3 class="my-3">Your Starter Pack</h3>
<span>directly in the <%= t("country.capital.#{order.items.first.product.country.code}") %> city</span>
<hr>
<div class="pricing d-flex flex-column text-center">
<div class="pricing d-flex flex-column text-left">
<h3 class="my-3">Your Starter Pack</h3>
<div class="bg-bubble purple position-absolute"></div>
<% order.items.includes([product: [:company, :country, :category]]).each do |item| %>
<div class="pricing-card">
<div class="product-img">
<%= image_tag(asset_path(item.product.company.logo_url)) %>
</div>
<div class="pricing-card my-3">
<div class="product-name">
<span class="name"><%= item.product.name %></span>
<span class="description"><%= item.product.product_details.first.content %></span>
</div>
<div class="product-price">
<span class="price-lite grey"><%= item.product.product_details.first.content %></span>
<span class="price-lite"><%= item.product.country.currency_symbol %><%= number_to_currency(item.product.activation_price, :unit => '') %></span>
</div>
<div class="product-img">
<%= image_tag(asset_path("components/service-card/#{item.product.category.name}.png")) %>
</div>
</div>
<% end %>
<hr>
<div class="total-price">
<div class="d-flex justify-content-between">
<span>Shipping</span>
<span class="price">FREE</span>
</div>
<div class="d-flex justify-content-between total">
<span>Total price</span>
<div>
<% if order.affiliate_link.present? %>
<strike class="old-price"><%= order.currency_symbol %><%= number_to_currency(order.total_activation_amount.to_f / 100, :unit => '') %></strike>
<% end %>
<span class="price"><%= order.currency_symbol %><%= number_to_currency(order.total_amount_display, :unit => '') %></span>
</div>
</div>
<br>
<% if order.affiliate_link.present? %>
<div class="d-flex justify-content-between">
<span>Promocode</span>
<span class="price"><%= order.affiliate_link.upcase %></span>
<span class="name">Promocode</span>
<span class="price"><%= order.affiliate_link.upcase %> (-20%)</span>
</div>
<% end %>
<br>
</div>
<h3 class="text-left">Shipping address</h3>
<div class="shipping mt-2 mb-3 d-flex justify-content-between align-items-center text-left">
<div class="col-6 d-flex flex-column">
<span class="text-left"><%= order.shipping.address%></span>
<span class="purple pointer mt-2" data-bs-toggle="modal" data-bs-target="#changeAddressModal">Change</span>
</div>
<div class="col-2 text-end">
<input type="radio" checked>
</div>
</div>
<hr>
<button class="btn btn-main mb-3" data-bs-toggle="modal" data-bs-target="#paymentModal">Pay <%= number_to_currency(order.total_amount_display, :unit => '') %><%= order.currency_symbol %></button>
</div>
2 changes: 1 addition & 1 deletion app/views/steps/shipping/_form.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<%= simple_form_for shipping, url: new_shipping_path(order), data: {reflex: "submit->ShippingReflex#create", reflex_serialize_form: true, controller: "address" } do |f| %>
<label>Your current address</label>
<div data-address-target="geocoder" class="mb-3 form-group mb-0 string required shipping_address_mapbox position-relative" data-action='keydown->address#cleanCountryCode' >
<div id="mapbox" data-address-target="geocoder" class="mb-3 form-group mb-0 string required shipping_address_mapbox position-relative" data-action='keydown->address#cleanCountryCode' >
</div>
<div class="invalid-feedback d-block"><%= f.full_error(:address) %></div>
<div class="d-flex">
Expand Down