harpiya_frontend 4.3.0.alpha

data/app/views/harpiya/addresses/new.html.erb

@@ -0,0 +1,17 @@
+<%= render 'harpiya/shared/error_messages', target: @address %>
+<div class="col-lg-6 offset-lg-3">
+  <h3 class="harpiya-header harpiya-mb-large harpiya-mt-large"><%= Harpiya.t(:new_address, scope: :address_book) %></h3>
+  <%= form_for @address, html: { id: 'checkout_form_address' } do |f| %>
+  <div class="form-group checkout-content-inner-field mb-5 has-float-label">
+    <%= f.text_field :label, class: 'harpiya-flat-input', placeholder: Harpiya.t(:address_name_placeholder, scope: :address_book) %>
+    <%= f.label :address_name, Harpiya.t(:label, scope: :address_book) %>
+  </div>
+    <%= render 'harpiya/addresses/form',
+      address_name: 'address',
+      address_form: f,
+      address_type: 'shipping',
+      address: @address %>
+
+    <%= f.submit t(:save, scope: :address_book), class: 'btn btn-primary btn-block harpiya-btn mb-5' %>
+  <% end %>
+</div>

data/app/views/harpiya/checkout/_address.html.erb

@@ -0,0 +1,71 @@
+<% if !try_harpiya_current_user || try_harpiya_current_user.email.blank? %>
+  <div class="row">
+    <div class="col-12 mb-4">
+      <div class="form-group checkout-content-inner-field has-float-label">
+        <%= form.email_field :email, class: 'required harpiya-flat-input', required: true, placeholder: Harpiya.t(:email) %>
+        <%= form.label :email, class: 'text-uppercase' %>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<div class="row">
+  <% ['billing', 'shipping'].each do |address_type|
+    address_name = "#{address_type[0...4]}_address" %>
+    <div class="col-12 mb-4" data-hook="<%= address_type %>_fieldset_wrapper">
+      <div id="<%= address_type %>" data-hook>
+        <h5 class="text-uppercase checkout-content-header">
+          <%= Harpiya.t(address_type + '_address') %>
+        </h5>
+        <% if address_type == 'shipping' %>
+          <div class="harpiya-checkbox-container checkout-content-billing-checkbox" data-hook="use_billing">
+            <div class="harpiya-checkbox">
+              <%= check_box_tag 'order[use_billing]', '1', @order.shipping_eq_billing_address?, { class: 'form-check-input'} %>
+              <%= label_tag :order_use_billing, nil, id: 'use_billing' %>
+            </div>
+            <%= label_tag :order_use_billing, Harpiya.t(:use_billing_address), class: 'harpiya-checkbox-label' %>
+          </div>
+        <% end %>
+        <% if user_available_addresses.present? %>
+        <div class="select_address mb-5">
+          <div class="form-group col">
+            <% user_available_addresses.each_with_index do |address, idx| %>
+            <div class="row mb-3" id="<%= [address_type, dom_id(address)].join('_') %>">
+              <label class="form-check-label harpiya-radio-label col-8">
+                <%= form.radio_button "#{address_name}_id", address.id, checked: (address.id == try_harpiya_current_user["#{address_name}_id"] || idx == 0) %>
+                <span class="harpiya-radio-label-custom-input"></span>
+                  <%= render "harpiya/users/address", address: address %>
+              </label>
+              <%= render "harpiya/users/address_controls", address: address %>
+            </div>
+            <% end %>
+            <div class="row mb-3">
+              <label class="form-check-label harpiya-radio-label col">
+                <%= form.radio_button "#{address_name}_id", 0, class: 'form-check-input' %> <h4><%= Harpiya.t('address_book.other_address') %></h4>
+                <span class="harpiya-radio-label-custom-input"></span>
+              </label>
+            </div>
+          </div>
+        </div>
+        <% end %>
+        <%= form.fields_for address_name do |address_form| %>
+          <div class="inner checkout-content-inner" data-hook='<%= "#{address_type}_inner" %>'>
+            <%= render partial: 'harpiya/addresses/form', locals: {
+              address_name: address_name,
+              address_form: address_form,
+              address_type: address_type,
+              address: Harpiya::Address.new(country: current_store.default_country),
+              form: form
+            } %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
+  <%= hidden_field_tag 'save_user_address', true, data: { hook: "save_user_address" } %>
+</div>
+
+<div id="delete-address-popup" class="delete-address-popup-dropdown hide-on-esc">
+  <%= render 'harpiya/shared/delete_address_popup' %>
+</div>

data/app/views/harpiya/checkout/_confirm.html.erb

@@ -0,0 +1,6 @@
+<div class="checkout-confirm" id="order_details" data-hook>
+  <p class="checkout-content-header">
+    <%= Harpiya.t(:summary).upcase %>
+  </p>
+  <%= render partial: 'harpiya/shared/order_details', locals: { order: @order } %>
+</div>

data/app/views/harpiya/checkout/_credit_card.html.erb

@@ -0,0 +1,9 @@
+<div id="<%= dom_id(card,'harpiya') %>" class="payment-sources-list-item">
+  <label class="form-check-label harpiya-radio-label">
+    <%= radio_button_tag "order[existing_card]", card.id, (card == @payment_sources.first), { class: "existing-cc-radio" } %>
+    <span class="harpiya-radio-label-custom-input"></span>
+    <%= credit_card_icon(card.cc_type) %>
+    <span>****<%= card.last_digits %>,&nbsp</span>
+    <span><%= card.name %></span>
+  </label>
+</div>

data/app/views/harpiya/checkout/_delivery.html.erb

@@ -0,0 +1,47 @@
+<div id="shipping-method" data-hook>
+  <div data-hook="shipping_method_inner">
+    <div id="methods">
+      <%= form.fields_for :shipments do |ship_form| %>
+        <div class="shipment">
+          <h4 class="text-uppercase checkout-content-header checkout-content-shipping-methods-header mb-1">
+            <%= Harpiya.t('checkout_page.delivery_method') %>
+          </h4>
+          <div id="shipToLocation" class="mb-4 text-uppercase">
+            <%= Harpiya.t(:ship_to) %>
+            <span class="text-muted"><%= @order.shipping_address.address1 %></span> -
+              <% if @order.shipping_address.zipcode.present? %> <span class="text-muted"><%= @order.shipping_address.zipcode %></span> - <% end %>
+            <span class="text-muted"><%= @order.shipping_address.country_iso %></span>
+          </div>
+
+          <ul class="checkout-content-shipping-methods-list">
+            <% ship_form.object.shipping_rates.each do |rate| %>
+              <li class="shipping-method">
+                <label class="harpiya-radio-label">
+                  <%= ship_form.radio_button :selected_shipping_rate_id,
+                    rate.id,
+                    data: {
+                      behavior: 'shipping-method-selector',
+                      cost: rate.display_cost,
+                      tax: rate.display_tax_amount
+                    } %>
+                  <span class="harpiya-radio-label-custom-input"></span>
+                  <span class="rate-name"><%= rate.name %></span>
+                  <p class="rate-cost"><%= rate.display_cost %></p>
+                </label>
+              </li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
+    </div>
+
+    <% if Harpiya::Config[:shipping_instructions] %>
+      <div id="minstrs" data-hook>
+        <h4 class="h5">
+          <%= Harpiya.t(:shipping_instructions) %>
+        </h4>
+        <%= form.text_area :special_instructions, cols: 40, rows: 4, class: "form-control" %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/harpiya/checkout/_delivery_informations.html.erb

@@ -0,0 +1,51 @@
+<div class="checkout-confirm-delivery-informations text-left mt-3 <%= class_name %>">
+  <div class="d-lg-none checkout-confirm-delivery-informations-header">
+    <%= Harpiya.t(:delivery_information) %>
+  </div>
+  <dl>
+    <% if order.has_step?("address") %>
+      <div data-hook="order-ship-address">
+        <dt class="text-uppercase">
+          <%= Harpiya.t(:shipping_address) %>
+          <%= checkout_edit_link %>
+        </dt>
+        <%= render 'harpiya/shared/address', address: order.ship_address %>
+      </div>
+      <div data-hook="order-bill-address">
+        <dt class="text-uppercase">
+          <%= Harpiya.t(:billing_address) %>
+          <%= checkout_edit_link %>
+        </dt>
+        <%= render 'harpiya/shared/address', address: order.bill_address %>
+      </div>
+    <% end %>
+    <% if order.has_step?("delivery") %>
+      <div data-hook="order-shipment">
+        <dt class="text-uppercase">
+          <%= Harpiya.t(:shipping) %>
+          <%= checkout_edit_link('delivery') %>
+        </dt>
+        <% @order.shipments.valid.each do |shipment| %>
+          <dd><%= shipment.shipping_method&.name %> </dd>
+        <% end %>
+        <%= render 'harpiya/shared/shipment_tracking', order: order if order.shipped? %>
+      </div>
+    <% end %>
+    <% if order.has_step?("payment") %>
+      <div data-hook="order-payment">
+        <dt class="text-uppercase">
+          <%= Harpiya.t(:payment) %>
+          <%= checkout_edit_link('payment') %>
+        </dt>
+        <dd>
+          <%= render collection: @order.payments.valid, partial: 'harpiya/shared/payment' %>
+        </dd>
+        <dd>
+          <% if @order.using_store_credit? %>
+            <%= button_tag Harpiya.t('store_credit.remove'), name: 'remove_store_credit', class: 'continue btn' %>
+          <% end %>
+        </dd>
+      </div>
+    <% end %>
+  </dl>
+</div>

data/app/views/harpiya/checkout/_payment.html.erb

@@ -0,0 +1,37 @@
+<div id="payment" data-hook>
+  <p class="payment-type checkout-content-header">
+    <%= Harpiya.t(:payment_type).upcase %>
+  </p>
+
+  <div data-hook="checkout_payment_step">
+    <%= render partial: 'harpiya/checkout/payment/storecredit' %>
+
+    <ul id="payment-method-fields" class="list-unstyled position-relative" data-hook>
+      <% checkout_available_payment_methods.each do |method| %>
+        <li class="radio">
+          <%= label_tag '', class: "form-check-label harpiya-radio-label payment-option", data: { type: method.id == @payment_sources&.first&.payment_method_id ? 'card' : nil } do %>
+            <%= radio_button_tag "order[payments_attributes][][payment_method_id]",
+                                 method.id,
+                                 method.id == @order.payments.checkout.last&.payment_method_id || method == checkout_available_payment_methods.first %>
+            <span class="harpiya-radio-label-custom-input"></span>
+            <%= Harpiya.t(method.name, scope: :payment_methods, default: method.name) %>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+
+    <div class="payment-sources">
+      <%= render partial: 'payment_sources' if @payment_sources.present? %>
+
+      <ul id="payment-methods" class="list-unstyled position-relative mb-0 payment-sources-add-form" data-hook>
+        <% checkout_available_payment_methods.each do |method| %>
+          <li id="payment_method_<%= method.id %>" class="<%= 'last' if method == checkout_available_payment_methods.last %>" data-hook>
+            <fieldset>
+              <%= render partial: "harpiya/checkout/payment/#{method.method_type}", locals: { payment_method: method } %>
+            </fieldset>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  </div>
+</div>

data/app/views/harpiya/checkout/_payment_sources.html.erb

@@ -0,0 +1,17 @@
+<div id="existing_cards" class="payment-sources-existing-cards" style="display:none;">
+  <%= radio_button_tag 'use_existing_card', 'yes', true, class: 'd-none' %>
+  <div class="form-group" data-hook="existing_cards">
+    <div class="d-flex flex-column payment-sources-list">
+      <% @payment_sources.each do |card| %>
+        <%= render partial: 'credit_card', locals: { card: card } %>
+      <% end %>
+      <div>
+        <label class="form-check-label harpiya-radio-label col-6 mb-2">
+          <%= radio_button_tag 'use_existing_card', 'no' %>
+          <span class="harpiya-radio-label-custom-input"></span>
+          <span><%= Harpiya.t(:add_new_credit_card) %></span>
+        </label>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/harpiya/checkout/_summary.html.erb

@@ -0,0 +1,83 @@
+<div class="checkout-content-summary">
+  <h3 class="text-uppercase text-center checkout-content-summary-header"><%= Harpiya.t(:order_summary) %></h3>
+  <div class="w-100 text-uppercase checkout-content-summary-table" data-hook="order_summary">
+    <div class="d-table-cell"><%= Harpiya.t(:subtotal) %>:</div>
+    <div class="d-table-cell text-right"><%= order.display_item_total.to_html %></div>
+
+    <% if order.line_item_adjustments.nonzero.exists? %>
+      <% order.line_item_adjustments.nonzero.promotion.eligible.group_by(&:label).each do |label, adjustments| %>
+        <div class="d-table-cell"><%= label %></div>
+        <div class="d-table-cell text-right"><%= Harpiya::Money.new(adjustments.sum(&:amount), currency: order.currency).to_html %></div>
+      <% end %>
+    <% end %>
+
+    <% order.all_adjustments.nonzero.tax.eligible.group_by(&:label).each do |label, adjustments| %>
+      <div class="d-table-cell"><%= label %></div>
+      <% tax_total = Harpiya::Money.new(adjustments.sum(&:amount), currency: order.currency) %>
+      <div class="d-table-cell text-right"
+           data-hook='tax-total'
+           data-currency='<%= Money::Currency.find(order.currency).symbol %>'
+           data-non-shipment-tax='<%= adjustments.reject{ |adj| adj.adjustable_type== 'Harpiya::Shipment'}.sum(&:amount) %>'
+           thousands-separator='<%= tax_total.thousands_separator %>'
+           decimal-mark='<%= tax_total.decimal_mark %>'
+           precision='<%= Money::Currency.find(order.currency).exponent %>'>
+        <%= tax_total.to_html %>
+      </div>
+    <% end %>
+
+    <% if order.passed_checkout_step?("address") && order.shipments.any? %>
+      <% if order.has_free_shipping? %>
+        <div class="d-table-cell"><%= Harpiya.t(:shipping) %>:</div>
+        <div class="d-table-cell text-right" data-hook="is-free-shipping"><%= Harpiya.t(:free) %></div>
+      <% else %>
+        <div class="d-table-cell"><%= Harpiya.t(:shipping) %>:</div>
+        <% shipping_total = Harpiya::Money.new(order.shipments.to_a.sum(&:cost), currency: order.currency) %>
+        <div class="d-table-cell text-right"
+            data-hook='shipping-total'
+            data-currency='<%= Money::Currency.find(order.currency).symbol %>'
+            thousands-separator='<%= shipping_total.thousands_separator %>'
+            decimal-mark='<%= shipping_total.decimal_mark %>'
+            precision='<%= Money::Currency.find(order.currency).exponent %>'>
+          <%= shipping_total.to_html %>
+        </div>
+
+        <% if order.shipment_adjustments.nonzero.exists? %>
+          <% order.shipment_adjustments.nonzero.promotion.eligible.group_by(&:label).each do |label, adjustments| %>
+            <div class="d-table-cell"><%= label %>:</div>
+            <div class="d-table-cell text-right">
+              <%= Harpiya::Money.new(adjustments.sum(&:amount), currency: order.currency).to_html %>
+            </div>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <% if order.adjustments.nonzero.eligible.exists? %>
+      <% order.adjustments.nonzero.eligible.each do |adjustment| %>
+        <% next if (adjustment.source_type == 'Harpiya::TaxRate') and (adjustment.amount.zero?) %>
+        <div class="d-table-cell total"><%= adjustment.label %>:</div>
+        <div class="d-table-cell total text-right">
+          <%= adjustment.display_amount.to_html %>
+        </div>
+      <% end %>
+    <% end %>
+
+    <div class="checkout-content-summary-table-order-total">
+      <div class="d-table-cell"><%= Harpiya.t(:total) %>:</div>
+      <div class="d-table-cell text-right">
+        <span id='summary-order-total' data-currency="<%= Money::Currency.find(order.currency).symbol %>">
+          <%= order.display_total.to_html %>
+        </span>
+      </div>
+    </div>
+
+    <% if order.using_store_credit? %>
+      <div class="d-table-cell"><%= Harpiya.t(:store_credit_name) %>:</div>
+      <div class="d-table-cell text-right">
+        <span id='summary-store-credit'>
+          <%= order.display_total_applied_store_credit.to_html %>
+        </span>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/harpiya/checkout/edit.html.erb

@@ -0,0 +1,62 @@
+<% @body_id = 'checkout-page' %>
+
+<%
+content_for :head do
+  agent = request.env['HTTP_USER_AGENT']
+  if agent =~ /Safari/ && !(agent =~ /Chrome/)
+%>
+  <script>
+    if (!!window.performance && window.performance.navigation.type === 2) {
+      window.location.reload();
+    }
+    window.onpageshow = function(event) {
+      if (event.persisted) {
+        window.location.reload()
+      }
+    }
+  </script>
+<%
+  end
+end
+%>
+
+<div id="checkout" class="container checkout" data-hook>
+  <%= render partial: 'harpiya/shared/error_messages', locals: { target: @order } %>
+
+  <div class="row align-items-center flex-column checkout-header" data-hook="checkout_header">
+    <div class="text-uppercase checkout-header-title">
+      <h1 data-hook="checkout_title"><%= Harpiya.t('checkout_page.header') %></h1>
+    </div>
+    <div class="checkout-progress" data-hook="checkout_progress" role="navigation" aria-label="<%= Harpiya.t('checkout_page.checkout_navigation') %>">
+      <%= checkout_progress %>
+    </div>
+  </div>
+
+  <div class="row checkout-content" data-hook="checkout_content">
+    <%= form_for @order, url: harpiya.update_checkout_path(@order.state), html: { id: "checkout_form_#{@order.state}", class: "w-100 d-lg-flex align-items-lg-baseline  flex-wrap position-relative" } do |form| %>
+      <div class="<%= if @order.state != 'confirm' then 'col-lg-6' else 'col-md-12' end %>" data-hook="checkout_form_wrapper">
+        <%= form.hidden_field :state_lock_version %>
+        <%= render @order.state, form: form %>
+      </div>
+
+      <% unless @order.confirm? %>
+        <div id="checkout-summary" class="col-md-12 col-lg-auto" data-hook="checkout_summary_box">
+          <div class="checkout-summary-container position-sticky">
+            <%= render partial: 'summary', locals: { order: @order } %>
+            <div data-hook="buttons">
+              <% submit_label_key = @order.confirm? ? :place_order : :save_and_continue %>
+              <%= submit_tag Harpiya.t(submit_label_key), class: 'btn btn-primary text-uppercase font-weight-bold w-100 checkout-content-save-continue-button' %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>
+
+<script>
+  window.addEventListener('DOMContentLoaded', function() {
+    Harpiya.current_order_id = "<%= @order.number %>"
+    Harpiya.current_order_token = "<%= @order.token %>"
+  })
+</script>

data/app/views/harpiya/checkout/payment/_gateway.html.erb

@@ -0,0 +1,30 @@
+<div class="payment-gateway">
+
+  <% param_prefix = "payment_source[#{payment_method.id}]" %>
+
+  <div class="payment-gateway-fields">
+    <div class="mb-4 payment-gateway-field checkout-content-inner-field">
+      <%= text_field_tag "#{param_prefix}[name]", "#{@order.bill_address_firstname} #{@order.bill_address_lastname}", { id: "name_on_card", class: 'harpiya-flat-input', placeholder: Harpiya.t(:name_on_card)} %>
+    </div>
+
+    <div class="mb-4 payment-gateway-field checkout-content-inner-field" data-hook="card_number">
+      <% options_hash = Rails.env.production? ? {autocomplete: 'off'} : {} %>
+      <%= text_field_tag "#{param_prefix}[number]", '', options_hash.merge(id: 'card_number', class: 'harpiya-flat-input cardNumber', size: 19, maxlength: 19, autocomplete: "off", placeholder: Harpiya.t(:card_number)) %>
+      <span id="card_type" style="display:none;">
+        ( <span id="looks_like"><%= Harpiya.t(:card_type_is) %> <span id="type"></span></span>
+          <span id="unrecognized"><%= Harpiya.t(:unrecognized_card_type) %></span>
+        )
+      </span>
+    </div>
+    <div class="payment-gateway-half-fields d-flex justify-content-between">
+      <div class="payment-gateway-field checkout-content-inner-field" data-hook="card_expiration">
+        <%= text_field_tag "#{param_prefix}[expiry]", '', id: 'card_expiry', class: 'harpiya-flat-input cardExpiry', placeholder: "MM/YYYY" %>
+      </div>
+      <div class="payment-gateway-field checkout-content-inner-field" data-hook="card_code">
+        <%= text_field_tag "#{param_prefix}[verification_value]", '', options_hash.merge(id: 'card_code', class: 'harpiya-flat-input cardCode', size: 5, placeholder: Harpiya.t(:cvv)) %>
+      </div>
+    </div>
+
+    <%= hidden_field_tag "#{param_prefix}[cc_type]", '', id: "cc_type", class: 'ccType' %>
+  </div>
+</div>