diff --git a/app/assets/stylesheets/components/_change-address-modal.scss b/app/assets/stylesheets/components/_change-address-modal.scss new file mode 100644 index 000000000..cbbaf33f7 --- /dev/null +++ b/app/assets/stylesheets/components/_change-address-modal.scss @@ -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); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_index.scss b/app/assets/stylesheets/components/_index.scss index 63919a7e5..e7a324de0 100644 --- a/app/assets/stylesheets/components/_index.scss +++ b/app/assets/stylesheets/components/_index.scss @@ -46,3 +46,5 @@ @import "bg-top"; @import "bg-bubble"; @import "background-waves"; +@import "payment-modal"; +@import "change-address-modal"; diff --git a/app/assets/stylesheets/components/_payment-modal.scss b/app/assets/stylesheets/components/_payment-modal.scss new file mode 100644 index 000000000..ad1efbe4a --- /dev/null +++ b/app/assets/stylesheets/components/_payment-modal.scss @@ -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; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/steps/checkouts/_new.scss b/app/assets/stylesheets/steps/checkouts/_new.scss index d0a0bf93c..3793d76af 100644 --- a/app/assets/stylesheets/steps/checkouts/_new.scss +++ b/app/assets/stylesheets/steps/checkouts/_new.scss @@ -1,7 +1,6 @@ .pricing { font-size: 14px; .pricing-card { - color: #18191fa6; display: flex; align-items: center; margin-bottom: 1rem; @@ -10,6 +9,7 @@ margin-right: 12px; img { width: 50px; + border-radius: 4px; } } .pricing-details { @@ -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; @@ -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; diff --git a/app/javascript/controllers/address_controller.js b/app/javascript/controllers/address_controller.js index 4512d1fb6..0aca8515f 100644 --- a/app/javascript/controllers/address_controller.js +++ b/app/javascript/controllers/address_controller.js @@ -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) { diff --git a/app/views/steps/checkout/_change_address_modal.html.erb b/app/views/steps/checkout/_change_address_modal.html.erb new file mode 100644 index 000000000..b676964a6 --- /dev/null +++ b/app/views/steps/checkout/_change_address_modal.html.erb @@ -0,0 +1,29 @@ + diff --git a/app/views/steps/checkout/_new.html.erb b/app/views/steps/checkout/_new.html.erb index da1175bff..f9c73ab16 100644 --- a/app/views/steps/checkout/_new.html.erb +++ b/app/views/steps/checkout/_new.html.erb @@ -1,13 +1,14 @@
-
+
<%= render "steps/checkout/summaries/#{order.pack}", order: order, house: order.user.house %> -
- <%= render "steps/checkout/form", order: order, billing: billing %> -
+ <%= 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 %>
diff --git a/app/views/steps/checkout/_payment_modal.html.erb b/app/views/steps/checkout/_payment_modal.html.erb new file mode 100644 index 000000000..8f18cc95c --- /dev/null +++ b/app/views/steps/checkout/_payment_modal.html.erb @@ -0,0 +1,51 @@ + diff --git a/app/views/steps/checkout/summaries/_settle_in.html.erb b/app/views/steps/checkout/summaries/_settle_in.html.erb index 31e4f50c1..89ff3f02d 100644 --- a/app/views/steps/checkout/summaries/_settle_in.html.erb +++ b/app/views/steps/checkout/summaries/_settle_in.html.erb @@ -1,50 +1,31 @@ -

Your Settle in Pack

-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. -
-
- <% order.products.includes([:company], [:country], [:category]).each do |product| %> -
-
- <%= image_tag(asset_path(product.company.logo_url)) %> -
+
+

Your Settle in Pack

+
+ <% order.products.includes([:company, :country, :category]).each do |product| %> +
<%= product.name %> - <%= t("checkout.summary.#{product.country.code}.#{product.service.name}") %> -
- <% 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 %> -
- <%= product.country.currency_symbol %><%= number_to_currency(price, :unit => '') %>/month + <% else %> + <% price = product.subscription_price %> + <% end %> + <%= product.country.currency_symbol %><%= number_to_currency(price, :unit => '') %>/month + Setup cost: <%= product.country.currency_symbol %><%= number_to_currency(product.activation_price, :unit => '') %> +
+
+ <%= image_tag(asset_path("components/service-card/#{product.category.name}.png")) %>
<% end %> +
+ Total setup cost: <%= number_to_currency(order.total_amount_display, :unit => '') %><%= order.currency_symbol %> +
-
-
- Total setup cost - <%= order.currency_symbol %><%= number_to_currency(order.total_amount_display, :unit => '') %> -
-
- Total monthly fee - <%= order.currency_symbol %><%= number_to_currency(order.total_subscription_amount_display, :unit => '') %> -
- <% if order.affiliate_link.present? %> -
- 1st payment : -
- <%= order.currency_symbol %><%= number_to_currency(order.total_subscription_amount_display, :unit => '') %> - <%= order.currency_symbol %><%= number_to_currency(order.discounted_subscription_amount(20) / 100, :unit => '') %> -
-
-
-
- Promocode - <%= order.affiliate_link.upcase %> -
- <% end %> +
+

Subscription 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') %>.
+
diff --git a/app/views/steps/checkout/summaries/_starter.html.erb b/app/views/steps/checkout/summaries/_starter.html.erb index 5e0c38901..62fe02829 100644 --- a/app/views/steps/checkout/summaries/_starter.html.erb +++ b/app/views/steps/checkout/summaries/_starter.html.erb @@ -1,43 +1,38 @@ -

Your Starter Pack

-directly in the <%= t("country.capital.#{order.items.first.product.country.code}") %> city -
-
+
+

Your Starter Pack

+
<% order.items.includes([product: [:company, :country, :category]]).each do |item| %> -
-
- <%= image_tag(asset_path(item.product.company.logo_url)) %> -
+
<%= item.product.name %> - <%= item.product.product_details.first.content %> -
-
+ <%= item.product.product_details.first.content %> <%= item.product.country.currency_symbol %><%= number_to_currency(item.product.activation_price, :unit => '') %>
+
+ <%= image_tag(asset_path("components/service-card/#{item.product.category.name}.png")) %> +
<% end %>
-
- Shipping - FREE -
-
- Total price -
- <% if order.affiliate_link.present? %> - <%= order.currency_symbol %><%= number_to_currency(order.total_activation_amount.to_f / 100, :unit => '') %> - <% end %> - <%= order.currency_symbol %><%= number_to_currency(order.total_amount_display, :unit => '') %> -
-
-
<% if order.affiliate_link.present? %>
- Promocode - <%= order.affiliate_link.upcase %> + Promocode + <%= order.affiliate_link.upcase %> (-20%)
<% end %> +
+
+

Shipping address

+
+
+ <%= order.shipping.address%> + Change +
+
+ +
+
diff --git a/app/views/steps/shipping/_form.html.erb b/app/views/steps/shipping/_form.html.erb index 3f30ea72e..10c745efd 100644 --- a/app/views/steps/shipping/_form.html.erb +++ b/app/views/steps/shipping/_form.html.erb @@ -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| %> -
+
<%= f.full_error(:address) %>