workarea-haven_theme 1.3.0

data/app/views/workarea/storefront/checkouts/_checkout_progress.html.haml

@@ -0,0 +1,26 @@
+%nav.checkout-progress
+  .checkout-progress__step{ class: ('checkout-progress__step--active' if @checkout_step == 'addresses') }
+    - if @checkout_step == 'addresses'
+      %span.checkout-progress__text
+        %span.checkout-progress__step-number= t('workarea.storefront.checkouts.addresses_step_number')
+        = t('workarea.storefront.checkouts.addresses_step_text')
+    - else
+      = link_to checkout_addresses_path, class: 'checkout-progress__link' do
+        %span.checkout-progress__step-number= inline_svg('workarea/storefront/icons/checkmark.svg', class: 'checkout-progress__step-checkmark')
+
+        = t('workarea.storefront.checkouts.addresses_step_text')
+  .checkout-progress__divider
+  .checkout-progress__step{ class: ('checkout-progress__step--active' if @checkout_step == 'shipping') }
+    - if @checkout_step.in?(%w(addresses shipping))
+      %span.checkout-progress__text
+        %span.checkout-progress__step-number= t('workarea.storefront.checkouts.shipping_step_number')
+        = t('workarea.storefront.checkouts.shipping_step_text')
+    - else
+      = link_to checkout_shipping_path, class: 'checkout-progress__link' do
+        %span.checkout-progress__step-number= inline_svg('workarea/storefront/icons/checkmark.svg', class: 'checkout-progress__step-checkmark')
+        = t('workarea.storefront.checkouts.shipping_step_text')
+  .checkout-progress__divider
+  .checkout-progress__step{ class: ('checkout-progress__step--active' if @checkout_step == 'payment') }
+    %span.checkout-progress__text
+      %span.checkout-progress__step-number= t('workarea.storefront.checkouts.payment_step_number')
+      = t('workarea.storefront.checkouts.payment_step_text')

data/app/views/workarea/storefront/checkouts/_gift_card_payment.html.haml

@@ -0,0 +1,34 @@
+.checkout-payment__secondary-method{ class: step.gift_card? ? 'checkout-payment__secondary-method--visible' : nil }
+
+  - if step.gift_card?
+    .message.message--info
+      %p.message__type
+        %span.message__icon= t('workarea.storefront.messages.info')
+      %p.message__text
+        #{t('workarea.storefront.gift_cards.balance_html', amount: number_to_currency(step.gift_card_balance))}
+        #{t('workarea.storefront.gift_cards.applied_to_order_html', amount: number_to_currency(step.gift_card_amount))}
+
+        - if step.tender_required?
+          #{t('workarea.storefront.gift_cards.tender_required_html', amount: number_to_currency(step.order_balance))}
+        - else
+          #{t('workarea.storefront.gift_cards.place_order')}
+
+  = optional_field(t('workarea.storefront.gift_cards.enter_gift_card_prompt'), step.gift_cards, step.failed_gift_card) do
+
+    %h2.checkout-payment__heading= t('workarea.storefront.gift_cards.gift_card')
+
+    = form_tag checkout_gift_cards_path, method: 'patch', id: 'gift_card_form', class: 'inline-form' do
+
+      .value.value--block
+        = text_field_tag 'gift_card_number', step.failed_gift_card&.number, class: 'text-box', autocomplete: 'off', title: t('workarea.storefront.gift_cards.gift_card_number'), placeholder: t('workarea.storefront.gift_cards.gift_card_number')
+        - if step.failed_gift_card && step.failed_gift_card.errors[:number].present?
+          %span.value__error= step.failed_gift_card.errors[:number].first
+        .value__button= button_tag t('workarea.storefront.gift_cards.apply_gift_card'), value: 'apply_gift_card', class: 'button button--small'
+
+    .applied-gift-cards
+      - step.gift_cards.each do |gift_card|
+        %p.applied-gift-card
+          %strong.applied-gift-card__number= gift_card.display_number
+          = link_to t('workarea.storefront.gift_cards.remove'), checkout_gift_cards_path(gift_card_id: gift_card.id), data: { method: :delete, confirm: t('workarea.storefront.gift_cards.remove_confirmation') }, class: 'applied-gift-card__remove-link'
+          %br
+          %span.applied-gift-card__applied= t('workarea.storefront.gift_cards.balance_applied_html', amount: number_to_currency(gift_card.amount), balance: number_to_currency(gift_card.balance))

data/app/views/workarea/storefront/checkouts/_summary.html.haml

@@ -0,0 +1,175 @@
+.checkout-step-summary
+  .checkout-step-summary__items
+    %h6.checkout-step-summary__heading= t('workarea.storefront.checkouts.summary.products')
+
+    %ul.product-list.product-list--narrow
+      - cart.items.each_with_index do |item, index|
+        %li.product-list__item
+          .product-list__summary
+            .product-list__media= link_to image_tag(product_image_url(item.image, :small_thumb), alt: item.product_name, class: 'product-list__media-image'), product_url(item.product, sku: item.sku), class: 'product-list__media-link'
+
+            .product-list__info
+              %p.product-list__name= link_to item.product_name, product_path(item.product, sku: item.sku)
+              - if item.has_options?
+                .product-list__option-group
+                  - item.details.each do |name, value|
+                    %p.product-list__option #{name.titleize}: #{value}
+              - item.customizations.each do |name, value|
+                %p.product-list__customization #{name.titleize}: #{value}
+              = append_partials('storefront.cart_item_details', item: item, index: index)
+          .product-list__prices
+            = render 'workarea/storefront/carts/pricing', item: item, css_block: 'product-prices'
+            - if item.total_adjustments.many?
+              .product-prices__discounts
+                - item.total_adjustments.drop(1).each do |adjustment|
+                  .product-prices__discount
+                    - if item.total_adjustments.many?
+                      %span.product-prices__label= adjustment.description
+
+                    - if adjustment.discount?
+                      %strong.product-prices__discount-price= number_to_currency(adjustment.amount)
+                    - else
+                      .product-list__total-price
+                        %span= number_to_currency(adjustment.amount)
+
+                .product-list__total-price
+                  %span.product-prices__label= t('workarea.storefront.orders.item_total')
+                  %span= number_to_currency(item.total_price)
+          .product-list__actions
+            %p.product-list__quantity
+              %span.product-list__quantity-text= t('workarea.storefront.orders.item_quantity')
+              = item.quantity
+
+      - cart.free_gifts.each_with_index do |item, index|
+        %li.order-item
+          %p.order-item__media= link_to image_tag(product_image_url(item.image, :small_thumb), alt: item.product_name, class: 'order-item__media-image'), product_url(item.product, sku: item.sku), class: 'order-item__media-link'
+
+          .order-item__info
+            %p.order-item__name= link_to item.product_name, product_path(item.product, sku: item.sku)
+            - if item.has_options?
+              .order-item__option-group
+                - item.details.each do |name, value|
+                  %p.order-item__option #{name.titleize}: #{value}
+            - item.customizations.each do |name, value|
+              %p.order-item__customization #{name.titleize}: #{value}
+            = append_partials('storefront.cart_item_details', item: item, index: index)
+            .order-item__prices
+              %p.order-item__quantity
+                %span.order-item__quantity-text= t('workarea.storefront.orders.item_quantity')
+                = item.quantity
+              .order-item__price
+                = t('workarea.storefront.carts.free_gift')
+
+  .checkout-step-summary__totals
+    %h6.checkout-step-summary__heading= t('workarea.storefront.checkouts.totals')
+    %table.table.table--totals
+      %tbody
+        %tr
+          %th
+            %span= t('workarea.storefront.orders.subtotal')
+          %td= number_to_currency(cart.subtotal_price)
+        - if cart.total_adjustments.any?
+          - cart.total_adjustments.each do |adjustment|
+            %tr
+              %th
+                %span= adjustment.description
+              %td
+                - if adjustment.discount?
+                  %strong= number_to_currency(adjustment.amount)
+                - else
+                  %span= number_to_currency(adjustment.amount)
+
+        %tr
+          %th
+            %span= t('workarea.storefront.orders.shipping')
+          %td
+            - if !cart.requires_shipping?
+              = t('workarea.storefront.checkouts.not_applicable')
+            - elsif !summary.shipping_determined?
+              = t('workarea.storefront.checkouts.to_be_determined')
+            - else
+              = number_to_currency(cart.shipping_total)
+
+        %tr
+          %th
+            %span= t('workarea.storefront.orders.tax')
+          %td
+            - if summary.taxes_determined?
+              = number_to_currency(cart.tax_total)
+            - else
+              = t('workarea.storefront.checkouts.to_be_determined')
+
+        - if summary.store_credit?
+          %tr
+            %th
+              %span= t('workarea.storefront.orders.store_credit')
+            %td
+              %strong.table__price-discount −#{number_to_currency(summary.store_credit_amount)}
+
+        = append_partials('storefront.checkout_summary_payment', summary: summary)
+
+        %tr.table__total
+          %th
+            %span= t('workarea.storefront.orders.total')
+          %td= number_to_currency(summary.order_balance)
+
+  - unless @checkout_step == 'payment'
+    .checkout-step-summary__promo-code
+      = optional_field(t('workarea.storefront.carts.enter_promo_code_prompt'), params[:promo_code]) do
+        %h2.checkout-step-summary__promo-code-heading= t('workarea.storefront.orders.promo_code')
+        = form_tag add_promo_code_to_cart_path, id: 'promo_code_form', class: 'inline-form', method: 'post' do
+          .value.value--block
+            = text_field_tag :promo_code, params[:promo_code], class: 'text-box', autocomplete: 'off', autocorrect: 'off', autocapitalize: 'off', required: true, placeholder: t('workarea.storefront.orders.promo_code'), title: t('workarea.storefront.orders.promo_code')
+            .value__button= button_tag t('workarea.storefront.carts.add'), value: 'add_promo_code', class: 'button button--small'
+
+  .checkout-step-summary__step
+
+    - if summary.show_addresses?
+      %h2.checkout-step-summary__step-heading= t('workarea.storefront.checkouts.addresses')
+
+      .checkout-step-summary__section
+        %h3.checkout-step-summary__section-heading= t('workarea.storefront.checkouts.email')
+        %p.checkout-step-summary__section-content= summary.email
+
+        - unless current_page?(checkout_addresses_path)
+          %p.checkout-step-summary__section-action= link_to t('workarea.storefront.forms.edit'), checkout_addresses_path, class: 'button button--small', data: { analytics: checkout_edit_analytics_data('addresses') }
+
+      - if summary.show_shipping_address?
+        .checkout-step-summary__section
+          %h3.checkout-step-summary__section-heading= t('workarea.storefront.checkouts.shipping_address')
+          %p.checkout-step-summary__section-content= formatted_address(summary.shipping_address)
+
+          - unless current_page?(checkout_addresses_path)
+            %p.checkout-step-summary__section-action= link_to t('workarea.storefront.forms.edit'), checkout_addresses_path, class: 'button button--small', data: { analytics: checkout_edit_analytics_data('addresses') }
+
+      .checkout-step-summary__section
+        %h3.checkout-step-summary__section-heading= t('workarea.storefront.checkouts.billing_address')
+        %p.checkout-step-summary__section-content= formatted_address(summary.billing_address)
+
+        - unless current_page?(checkout_addresses_path)
+          %p.checkout-step-summary__section-action= link_to t('workarea.storefront.forms.edit'), checkout_addresses_path, class: 'button button--small', data: { analytics: checkout_edit_analytics_data('addresses') }
+
+    = append_partials('storefront.checkout_summary_addresses', summary: summary)
+
+  .checkout-step-summary__step.checkout-step-summary__step--hidden-for-small
+
+    - if summary.show_shipping_options?
+      %h2.checkout-step-summary__step-heading= t('workarea.storefront.checkouts.shipping_options')
+
+      - summary.shippings.each_with_index do |shipping, index|
+        - if shipping.show_options?
+          .checkout-step-summary__section
+            %h3.checkout-step-summary__section-heading
+              - if shipping.partial?
+                = t('workarea.storefront.checkouts.shipping_service_with_index', index: index + 1)
+              - else
+                = t('workarea.storefront.checkouts.shipping_service')
+            %p.checkout-step-summary__section-content #{shipping.shipping_service.name} - #{number_to_currency(shipping.shipping_total)}
+
+            - unless checkout_shipping_path == request.original_fullpath
+              %p.checkout-step-summary__section-action= link_to t('workarea.storefront.forms.edit'), checkout_shipping_path, class: 'button button--small', data: { analytics: checkout_edit_analytics_data('shipping') }
+
+          = append_partials('storefront.checkout_summary_shipping_attributes', summary: summary, shipping: shipping, index: index)
+
+
+    = append_partials('storefront.checkout_summary_shipping', summary: summary)

data/app/views/workarea/storefront/checkouts/addresses.html.haml

@@ -0,0 +1,56 @@
+- @title = t('workarea.storefront.checkouts.addresses_title')
+- @checkout_step = 'addresses'
+
+- content_for :page_aside do
+  %h1.visually-hidden= t('workarea.storefront.checkouts.addresses_title')
+  = render 'summary', cart: @cart, summary: @summary
+
+.checkout-addresses.view{ data: { analytics: checkout_addresses_view_analytics_data(@cart).to_json } }
+  - unless request.get?
+    - if @step.order.errors.any?
+      - @step.order.errors.full_messages.each do |message|
+        = render_message 'error', message, data: { analytics: validation_error_analytics_data('order').to_json }
+    - if @step.billing_address.errors.any?
+      - @step.billing_address.errors.full_messages.each do |message|
+        = render_message 'error', data: { analytics: validation_error_analytics_data('billing_address').to_json } do
+          #{t('workarea.storefront.checkouts.billing_address')}: #{message}
+    - if @step.shipping_address.errors.any?
+      - @step.shipping_address.errors.full_messages.each do |message|
+        = render_message 'error', data: { analytics: validation_error_analytics_data('shipping_address').to_json } do
+          #{t('workarea.storefront.checkouts.shipping_address')}: #{message}
+
+  = append_partials('storefront.checkout_addresses_top', step: @step)
+
+  = form_tag checkout_addresses_path, method: :patch, id: 'checkout_form', data: { checkout_addresses_form: { defaultShippingAddressId: @step.default_shipping_address_id, defaultBillingAddressId: @step.default_billing_address_id, savedAddresses: @step.saved_addresses }.to_json } do
+
+    - if @step.show_email_field?
+      .checkout-addresses__section.checkout-addresses__section--email
+        %h2.checkout-addresses__heading= t('workarea.storefront.checkouts.email')
+        .property
+          = label_tag 'email', nil, class: 'property__name' do
+            %span.property__requirement.property__requirement--required= t('workarea.storefront.forms.required')
+            %span.property__text= t('workarea.storefront.checkouts.email')
+          .value.value--block
+            = email_field_tag 'email', @step.email, class: 'text-box', required: true, autocapitalize: 'off', autocomplete: 'email', placeholder: t('workarea.storefront.forms.email_placeholder')
+            - if @step.order.errors[:email].present?
+              %span.value__error= @step.order.errors[:email].first
+        %p
+          = t('workarea.storefront.checkouts.login_prompt')
+          = link_to t('workarea.storefront.checkouts.login_title'), login_path(return_to: checkout_path), data: { analytics: checkout_login_analytics_data.to_json }
+
+    - if @step.show_shipping_address?
+      .checkout-addresses__section.checkout-addresses__section--shipping
+        %h2.checkout-addresses__heading= t('workarea.storefront.checkouts.shipping_address')
+        = append_partials('storefront.checkout_shipping_address_top', step: @step)
+        .checkout-addresses__fields= render 'workarea/storefront/shared/address_fields', label: 'shipping_address', address: @step.shipping_address
+
+    .checkout-addresses__section.checkout-addresses__section--billing
+      %h2.checkout-addresses__heading= t('workarea.storefront.checkouts.billing_address')
+      .checkout-addresses__fields.hidden-if-js-enabled= render 'workarea/storefront/shared/address_fields', label: 'billing_address', address: @step.billing_address
+
+    = append_partials('storefront.checkout_addresses_form', step: @step)
+
+    - if @step.show_shipping_address?
+      %p= button_tag t('workarea.storefront.checkouts.continue_to_shipping'), value: 'continue', class: 'button button--large', data: { disable_with: loading_indicator(t('workarea.storefront.checkouts.continue_to_shipping_disabled_text')) }
+    - else
+      %p= button_tag t('workarea.storefront.checkouts.continue_to_payment'), value: 'continue', class: 'button button--large', data: { disable_with: loading_indicator(t('workarea.storefront.checkouts.continue_to_payment_disabled_text')) }

data/app/views/workarea/storefront/checkouts/confirmation.html.haml

@@ -0,0 +1,56 @@
+- @title = @content.title
+
+- content_for :page_aside do
+  = render 'workarea/storefront/orders/summary', order: @order
+
+.checkout-confirmation.view{ data: { analytics: checkout_order_placed_analytics_data(@order).to_json } }
+  .checkout-confirmation__content>
+    .checkout-confirmation__checkmark
+      = inline_svg('workarea/storefront/icons/checkmark.svg', class: 'checkout-confirmation__checkmark-icon', title: t('workarea.storefront.users.account'))
+    %h1.heading.heading--4.heading--upcase= @content.title
+    - if @content.content_blocks_for('confirmation').present?
+      = render_content_blocks(@content.content_blocks_for('confirmation'))
+    %p= t('workarea.storefront.checkouts.confirmation_text', email: @order.email)
+    = append_partials('storefront.checkout_confirmation_text')
+
+  .checkout-confirmation__account
+    - if @order.user.present?
+      .grid.grid--center
+        .grid__cell.grid__cell--50
+          %p= link_to t('workarea.storefront.checkouts.go_to_account'), users_account_path, class: 'button button--full'
+
+    - elsif @order.render_signup_form?
+      %h2.heading.heading--6.heading--upcase= t('workarea.storefront.checkouts.create_an_account')
+      - if @content.content_blocks_for('confirmation_signup').present?
+        = render_content_blocks(@content.content_blocks_for('confirmation_signup'))
+
+      = form_tag users_account_path, id: 'signup_form', method: :post, data: { analytics: checkout_signup_analytics_data.to_json } do
+        = hidden_field_tag :email, @order.email
+        = hidden_field_tag :first_name, @order.billing_address.first_name
+        = hidden_field_tag :last_name, @order.billing_address.last_name
+        .property
+          = label_tag :password, nil, class: 'property__name' do
+            %span.property__requirement.property__requirement--required= t('workarea.storefront.forms.required')
+            %span.property__text= t('workarea.storefront.users.password')
+          .value.value--block= password_field_tag :password, nil, class: 'text-box', required: true, minlength: minimum_password_length, autocomplete: 'off'
+        .button-property
+          .value= check_box_tag :email_signup, true, params[:email_signup]
+          = label_tag :email_signup, nil, class: 'button-property__name' do
+            %span.button-property__text= t('workarea.storefront.users.sign_up_for_email')
+        %p= button_tag t('workarea.storefront.users.create_account'), value: 'sign_up', class: 'button', data: { disable_with: loading_indicator(t('workarea.storefront.users.create_account_disabled_text')) }
+
+  = render 'workarea/storefront/orders/details', order: @order
+
+  - if @recommendations.present?
+    .hidden.hidden--for-small-only
+      .recommendations
+        .content-wrapper
+          %h2.recommendations__heading= t('workarea.storefront.recommendations.you_may_also_like')
+          .grid
+            - @recommendations.each do |product|
+              .grid__cell.grid__cell--50.grid__cell--25-at-medium
+                .product-summary.product-summary--small{ itemscope: true, itemtype: 'http://schema.org/Product' }
+                  = render 'workarea/storefront/products/summary', product: product
+
+
+  = append_partials('storefront.checkout_confirmation')

data/app/views/workarea/storefront/checkouts/payment.html.haml

@@ -0,0 +1,110 @@
+- @title = t('workarea.storefront.checkouts.payment_title')
+- @checkout_step = 'payment'
+
+- content_for :page_aside do
+  %h1.visually-hidden= t('workarea.storefront.checkouts.payment_title')
+  = render 'summary', cart: @cart, summary: @summary
+
+.checkout-payment.view{ data: { analytics: checkout_payment_view_analytics_data(@cart).to_json } }
+  = append_partials('storefront.checkout_payment_top', step: @step)
+
+  - unless request.get?
+    - if @step.payment.errors.any?
+      - @step.payment.errors.full_messages.each do |message|
+        = render_message 'error', message, data: { analytics: validation_error_analytics_data('payment').to_json }
+    - if @step.credit_card? && @step.credit_card.errors.any?
+      - @step.credit_card.errors.full_messages.each do |message|
+        = render_message 'error', message, data: { analytics: validation_error_analytics_data('credit_card').to_json }
+    = append_partials('storefront.payment_error', step: @step)
+
+  .checkout-payment__section
+
+    .checkout-payment__secondary.checkout-payment__secondary--promo-code
+
+      = optional_field(t('workarea.storefront.carts.enter_promo_code_prompt'), params[:promo_code]) do
+        .checkout-payment__secondary-method
+          %h2.checkout-payment__heading= t('workarea.storefront.orders.promo_code')
+          = form_tag add_promo_code_to_cart_path, id: 'promo_code_form', class: 'inline-form', method: 'post' do
+            .value.value--block
+              = text_field_tag :promo_code, params[:promo_code], class: 'text-box', autocomplete: 'off', autocorrect: 'off', autocapitalize: 'off', required: true, placeholder: t('workarea.storefront.orders.promo_code'), title: t('workarea.storefront.orders.promo_code')
+              .value__button= button_tag t('workarea.storefront.carts.add'), value: 'add_promo_code', class: 'button button--small'
+
+      = append_partials('storefront.secondary_payment', step: @step)
+
+  .checkout-payment__section
+    .checkout-payment__primary{ data: { checkout_primary_payment: '' } }
+
+      %h2.checkout-payment__heading= t('workarea.storefront.checkouts.payment_method')
+
+      - if @step.store_credit?
+        = render_message 'success' do
+          = t('workarea.storefront.checkouts.store_credit_applied', amount: number_to_currency(@step.store_credit_amount))
+          - if @step.order_covered_by_store_credit?
+            = t('workarea.storefront.checkouts.store_credit_balance', amount: number_to_currency(@step.store_credit_balance))
+
+      = form_tag checkout_place_order_path, method: :patch, id: 'checkout_form', data: { single_submit_form: '' } do
+        - unless @step.order_covered_by_advance_payments?
+          .checkout-payment__primary-method-group
+
+            -# Saved Cards
+            - if @step.credit_cards.present?
+              - @step.credit_cards.each do |card|
+                .checkout-payment__primary-method.checkout-payment__primary-method--saved-card{ class: card.selected? ? 'checkout-payment__primary-method--selected': nil }
+                  .button-property
+                    .value= radio_button_tag 'payment', card.id, card.selected?, data: { analytics: checkout_payment_selected_analytics_data('saved card').to_json }
+                    = label_tag "payment[#{card.id}]", nil, class: 'button-property__name' do
+                      = credit_card_issuer_icon(card_icon_name(card.issuer))
+                      %span.button-property__text= t('workarea.storefront.credit_cards.summary', issuer: card.issuer, number: card.display_number.slice(-4, 4))
+                  %p.checkout-payment__primary-method-description
+                    %span= t('workarea.storefront.credit_cards.expires')
+                    %span= t('workarea.storefront.credit_cards.expiry', month: card.month, year: card.year)
+                    %span.checkout-payment__primary-method-name-on-card= t('workarea.storefront.credit_cards.name_on_card_name', name: "#{card.first_name} #{card.last_name}")
+
+            -# New Card
+            .checkout-payment__primary-method.checkout-payment__primary-method--new-card{ class: @step.using_new_card? ? 'checkout-payment__primary-method--selected': nil}
+              .button-property
+                .value= radio_button_tag 'payment', 'new_card', @step.using_new_card?, data: { analytics: checkout_payment_selected_analytics_data('new card').to_json }
+                = label_tag 'payment[new_card]', nil, class: 'button-property__name' do
+                  %span.button-property__text= t('workarea.storefront.checkouts.new_credit_card')
+                  .checkout-payment__all-payment-icons
+                    = all_payment_icons
+              .checkout-payment__primary-method-edit
+                .grid
+                  .grid__cell
+                    .property
+                      = label_tag 'credit_card[number]', nil, class: 'property__name' do
+                        %span.property__requirement.property__requirement--required= t('workarea.storefront.forms.required')
+                        %span.property__text= t('workarea.storefront.credit_cards.card_number')
+                      .value.value--block
+                        = text_field_tag 'credit_card[number]', nil, class: 'text-box', inputmode: 'numeric', pattern: '[0-9\s]*', required: true, autocorrect: 'off', autocomplete: 'cc-number'
+                        - if @step.credit_card? && @step.credit_card.errors[:number].present?
+                          %span.value__error= @step.credit_card.errors[:number].first
+                  .grid__cell.grid__cell--66-at-medium
+                    .property
+                      %strong.property__name
+                        %span= t('workarea.storefront.credit_cards.expiration_date')
+                      .value.value--block
+                        .grid
+                          .grid__cell.grid__cell--50
+                            = select_tag 'credit_card[month]', options_for_select(1..12, @step.credit_card.try(:month)), title: t('workarea.storefront.credit_cards.expiration_month')
+                          .grid__cell.grid__cell--50
+                            = select_tag 'credit_card[year]', options_for_select(Time.current.year..Time.current.year + 10, @step.credit_card.try(:year)), title: t('workarea.storefront.credit_cards.expiration_year')
+                        - if @step.credit_card? && @step.credit_card.errors[:year].present?
+                          %span.value__error= @step.credit_card.errors[:year].first
+                  .grid__cell.grid__cell--33-at-medium
+                    .property
+                      = label_tag 'credit_card[cvv]', nil, class: 'property__name' do
+                        %span.property__requirement.property__requirement--required
+                          = t('workarea.storefront.forms.required')
+                        %span.property__text
+                          = t('workarea.storefront.credit_cards.security_code')
+                      .value.value--block
+                        = text_field_tag 'credit_card[cvv]', nil, class: 'text-box text-box--small', required: true, inputmode: 'numeric', pattern: '[0-9]*', autocorrect: 'off', autocomplete: 'cc-csc'
+                        - if @step.saved_card_id.blank? && @step.credit_card && @step.credit_card.errors[:cvv].present?
+                          %span.value__error= @step.credit_card.errors[:cvv].first
+                        %span.value__note= link_to t('workarea.storefront.credit_cards.whats_this'), page_path('credit-card-security-code'), data: { dialog_button: '' }
+
+            = append_partials('storefront.payment_method', step: @step)
+
+        .checkout-payment__section
+          %p.checkout-payment__place-order= button_tag t('workarea.storefront.checkouts.place_order'), value: 'place_order', class: 'button button--large', data: { disable_with: loading_indicator(t('workarea.storefront.checkouts.place_order_disabled_text')) }