workarea-haven_theme 1.3.0

data/app/views/workarea/storefront/style_guides/settings/color_schemes/_haven_color_scheme.html.haml

@@ -0,0 +1,8 @@
+.style-guide__example-block
+  .grid.grid--auto
+    - colors = %w(midnight purple-blue dark-purple-blue highlighter gray medium-gray light-gray)
+    - colors.each do |color|
+      .grid__cell
+        .color-box
+          .color-box__swatch{ class: "color-box__swatch--#{color}" }
+          .color-box__swatch-name $#{color}

data/app/views/workarea/storefront/style_guides/settings/color_schemes/_lagoon_color_scheme.html.haml

@@ -0,0 +1,8 @@
+.style-guide__example-block
+  .grid.grid--auto
+    - colors = %w(darkest-teal dark-teal teal light-teal lightest-teal gray medium-gray light-gray)
+    - colors.each do |color|
+      .grid__cell
+        .color-box
+          .color-box__swatch{ class: "color-box__swatch--#{color}" }
+          .color-box__swatch-name $#{color}

data/app/views/workarea/storefront/style_guides/typography/_fonts.html.haml

@@ -0,0 +1,13 @@
+#fonts.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'fonts')
+
+  %p These are the fonts available to the front-end.
+
+  %p Primary font, used site wide:
+  .style-guide__example-block
+    %p{ style: "font-family: #{Workarea.config.theme[:font_stacks][Workarea.config.theme[:primary_font_family].to_sym]};" } Primary Font
+
+  %p Secondary font, used for content headings only:
+  .style-guide__example-block
+    %p{ style: "font-family: #{Workarea.config.theme[:font_stacks][Workarea.config.theme[:secondary_font_family].to_sym]};" } Secondary Font

data/app/views/workarea/storefront/style_guides/typography/_headings.html.haml

@@ -0,0 +1,53 @@
+#headings.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'headings')
+
+  %p Sets up the element to be styled the same as an <code>h1-6</code>, using the <code>heading</code> class in combination with a <code>heading--X</code> modifier, where <code>X</code> is the
+
+  %p Can be used on any inline or block-level element to visually present the element as a heading. Frequently applied when, semantically speaking, using a given <code>h1-6</code> tag wouldn't be appropriate.
+
+  .style-guide__example-block
+    .grid
+      .grid__cell.grid__cell--50-at-medium
+        %p Site wide heading styles:
+        %h1 Heading 1
+        %h2 Heading 2
+        %h3 Heading 3
+        %h4 Heading 4
+        %h5 Heading 5
+        %h6 Heading 6
+      .grid__cell.grid__cell--50-at-medium
+        %p Headings within content blocks receive different styles:
+        .content-block
+          %h1 Heading 1
+          %h2 Heading 2
+          %h3 Heading 3
+          %h4 Heading 4
+          %h5 Heading 5
+          %h6 Heading 6
+
+  %p In the following examples we have a variety of text-wrapping elements:
+  %p should style a variety of elements properly.
+  .style-guide__example-block
+    %h1 Heading 1
+    %span.heading.heading--1 Heading 1
+    %h2 Heading 2
+    %p.heading.heading--2 Heading 2
+    %h3 Heading 3
+    %strong.heading.heading--3 Heading 3
+    %h4 Heading 4
+    %h6.heading.heading--4 Heading 4
+    %h5 Heading 5
+    %h3.heading.heading--5 Heading 5
+    %h6 Heading 6
+    %h1.heading.heading--6 Heading 6
+
+#heading--no-margin.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'heading__no_margin')
+
+  %p Removes bottom margin from heading
+
+  %p should remove bottom margin:
+  .style-guide__example-block
+    %span.heading.heading--1.heading--no-margin I should have no margin

data/app/views/workarea/storefront/style_guides/typography/_links.html.haml

@@ -0,0 +1,27 @@
+#links.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'links')
+
+  %p Provides styles for link elements as well as a .link selector which is designed to be a baseline for any link modifiers you may need in your project.
+
+  %p should style <code>a</code> elements.
+  .style-guide__example-block
+    = link_to('A link', 'www.example.com')
+
+  %p should style <code>link</code> classes.
+  .style-guide__example-block
+    %span.link Not really a link
+
+#link--with-arrow.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'link__with_arrow')
+
+  %p Optionally add an arrow icon next to a link on hover
+
+  %p should style <code>a</code> elements.
+  .style-guide__example-block
+    = link_to('A link', 'www.example.com', class: 'link link--with-arrow')
+
+  %p should style <code>link</code> classes.
+  .style-guide__example-block
+    %span.link.link--with-arrow Not really a link

data/app/views/workarea/storefront/style_guides/typography/_text.html.haml

@@ -0,0 +1,27 @@
+#text.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'text')
+
+  %p Provides a set of modifiers to be used on body text.
+
+  %p should provide a bottom margin for <code>p</code>, <code>blockquote</code>, and <code>pre</code> tags:
+  .style-guide__example-block
+    %p I'm a Paragraph
+    %blockquote I'm a Blockquote
+    %pre I'm a Pre
+
+  %p <code>.text</code> should reset text to default, adding <code>letter-spacing</code>:
+  .style-guide__example-block
+    %p.text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis provident veritatis nam qui fugit incidunt omnis voluptatum officiis, eligendi pariatur nisi deleniti facere quae alias velit illo doloribus, quibusdam aspernatur.
+
+  %p .text--small modifier
+  .style-guide__example-block
+    %p.text.text--small Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis provident veritatis nam qui fugit incidunt omnis voluptatum officiis, eligendi pariatur nisi deleniti facere quae alias velit illo doloribus, quibusdam aspernatur.
+
+  %p .text--large modifier
+  .style-guide__example-block
+    %p.text.text--large Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis provident veritatis nam qui fugit incidunt omnis voluptatum officiis, eligendi pariatur nisi deleniti facere quae alias velit illo doloribus, quibusdam aspernatur.
+
+  %p .text--no-margin modifier
+  .style-guide__example-block
+    %p.text.text--no-margin Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis provident veritatis nam qui fugit incidunt omnis voluptatum officiis, eligendi pariatur nisi deleniti facere quae alias velit illo doloribus, quibusdam aspernatur.

data/app/views/workarea/storefront/users/_haven_current_user.json.jbuilder

@@ -0,0 +1 @@
+json.first_name current_user.try(:first_name)

data/app/views/workarea/storefront/users/accounts/edit.html.haml

@@ -0,0 +1,48 @@
+- @title = t('workarea.storefront.users.edit_title')
+
+- content_for :breadcrumbs do
+  %p.breadcrumbs__node-group
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.layouts.home'), root_path, rel: 'home', class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.users.account'), users_account_path, class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      %span.breadcrumbs__text= t('workarea.storefront.users.edit_title')
+
+.view
+
+  %h1.heading.heading--3.heading--upcase= t('workarea.storefront.users.edit_title')
+
+  = form_tag users_account_path, method: :patch, id: 'info_form' do
+    .grid
+      .grid__cell
+        .property
+          = label_tag :email, nil, class: 'property__name' do
+            %span.property__text= t('workarea.storefront.users.email')
+          .value.value--block= email_field_tag :email, @user.email, class: 'text-box', autocapitalize: 'off', autocomplete: 'email', required: true, placeholder: t('workarea.storefront.forms.email_placeholder')
+      .grid__cell.grid__cell--50-at-medium
+        .property
+          = label_tag :first_name, nil, class: 'property__name' do
+            %span.property__text= t('workarea.storefront.users.first_name')
+          .value.value--block= text_field_tag :first_name, @user.first_name, class: 'text-box', autocomplete: 'given-name'
+      .grid__cell.grid__cell--50-at-medium
+        .property
+          = label_tag :last_name, nil, class: 'property__name' do
+            %span.property__text= t('workarea.storefront.users.last_name')
+          .value.value--block= text_field_tag :last_name, @user.last_name, class: 'text-box', autocomplete: 'family-name'
+      .grid__cell
+        .property
+          = label_tag :password, nil, class: 'property__name' do
+            %span.property__text= t('workarea.storefront.users.new_password')
+          .value.value--block= password_field_tag :password, nil, class: 'text-box', minlength: minimum_password_length, autocomplete: 'off'
+      .grid__cell
+        = append_partials('storefront.edit_account_details', user: @user)
+    .button-property
+      .value
+        = hidden_field_tag :email_signup, false, id: nil
+        = check_box_tag :email_signup, true, @user.email_signup?
+      = label_tag :email_signup, nil, class: 'button-property__name' do
+        %span.property__text= t('workarea.storefront.users.sign_up_for_email')
+    .grid.grid--auto.grid--middle
+      %p.grid__cell= button_tag t('workarea.storefront.forms.save'), value: 'save_info', class: 'button'
+      %p.grid__cell= link_to t('workarea.storefront.forms.cancel'), users_account_path, class: "text-button", data: { dialog_close_button: '' }

data/app/views/workarea/storefront/users/accounts/show.html.haml

@@ -0,0 +1,119 @@
+- @title = t('workarea.storefront.users.account')
+
+- content_for :breadcrumbs do
+  %p.breadcrumbs__node-group
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.layouts.home'), root_path, rel: 'home', class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      %span.breadcrumbs__text= t('workarea.storefront.users.account')
+
+.view
+
+  %h1.visually-hidden= t('workarea.storefront.users.account')
+
+  .grid.grid--large
+    .grid__cell.grid__cell--50-at-medium
+      .box
+        .box__header
+          .box__action= link_to t('workarea.storefront.forms.update'), edit_users_account_path, class: 'button', data: { dialog_button: '' }
+          %h2.box__heading= t('workarea.storefront.users.details')
+        .box__body
+          %table.table
+            %tbody
+              %tr
+                %th
+                  %span= t('workarea.storefront.users.email')
+                %td= @user.email
+              %tr
+                %th
+                  %span= t('workarea.storefront.users.name')
+                %td #{@user.first_name} #{@user.last_name}
+              %tr
+                %th
+                  %span= t('workarea.storefront.users.password')
+                %td ********
+              = append_partials('storefront.show_account_details', user: @user)
+
+      .box
+        .box__header
+          .box__action= link_to t('workarea.storefront.users.order_history'), users_orders_path, class: 'button'
+          %h2.box__heading= t('workarea.storefront.users.recent_orders')
+        .box__body
+          - unless @user.recent_orders.any?
+            %p= t('workarea.storefront.users.no_orders')
+          - else
+            - @user.recent_orders.each do |order|
+              = render 'workarea/storefront/users/orders/summary', order: order
+
+      = append_partials('storefront.account_section_left', user: @user)
+
+    .grid__cell.grid__cell--50-at-medium
+      .box
+        .box__header
+          .box__action= link_to t('workarea.storefront.users.add_credit_card'), new_users_credit_card_path, class: 'button', data: { dialog_button: '' }
+          %h2.box__heading= t('workarea.storefront.users.credit_cards')
+
+        .box__body
+          - unless @user.has_credit_card?
+            %p= t('workarea.storefront.users.no_saved_credit_cards')
+          - else
+            .grid.grid--large
+              - @user.credit_cards.each do |credit_card|
+                .grid__cell.grid__cell--50-at-medium
+                  .data-card
+                    .data-card__cell
+                      %p.data-card__line.data-card__credit-card{ class: (credit_card.default?) ? 'data-card__credit-card--default' : nil }
+                        = credit_card_issuer_icon(card_icon_name(credit_card.issuer))
+                        %span.data-card__credit-card-number
+                          = t('workarea.storefront.credit_cards.summary', issuer: nil, number: credit_card.display_number.slice(-4..-1))
+                      %p.data-card__line
+                        %strong= t('workarea.storefront.credit_cards.expires')
+                        %span
+                          = t('workarea.storefront.credit_cards.expiry', month: credit_card.month, year: credit_card.year)
+                          - if credit_card.expired?
+                            %strong= t('workarea.storefront.credit_cards.expired')
+                      %p.data-card__line
+                        %strong= t('workarea.storefront.credit_cards.name_on_card')
+                        %span #{credit_card.first_name} #{credit_card.last_name}
+                    .data-card__cell
+                      .grid.grid--auto
+                        .grid__cell= link_to t('workarea.storefront.forms.edit'), edit_users_credit_card_path(credit_card), class: 'button button--small', data: { dialog_button: '' }
+                        = form_tag users_credit_card_path(credit_card), method: 'delete', class: 'grid__cell' do
+                          = button_tag t('workarea.storefront.forms.delete'), class: 'button button--small'
+
+      .box
+        .box__header
+          .box__action= link_to t('workarea.storefront.users.add_address'), new_users_address_path, class: 'button', data: { dialog_button: '' }
+          %h2.box__heading= t('workarea.storefront.users.addresses')
+        .box__body
+          - unless @user.has_default_addresses?
+            %p= t('workarea.storefront.users.no_saved_addresses')
+          - else
+            .grid.grid--large
+              - @user.addresses.each do |address|
+                .grid__cell.grid__cell--50-at-medium
+                  .data-card
+                    .data-card__cell
+                      %p.data-card__line= formatted_address(address)
+
+                    .data-card__cell
+                      .grid.grid--auto
+                        .grid__cell= link_to t('workarea.storefront.forms.edit'), edit_users_address_path(address), class: 'button button--small', data: { dialog_button: '' }
+                        = form_tag users_address_path(address), method: 'delete', class: 'grid__cell' do
+                          = button_tag t('workarea.storefront.forms.delete'), class: 'button button--small'
+
+      = append_partials('storefront.account_section_right', user: @user)
+
+    = append_partials('storefront.account_grid_cell', user: @user)
+
+  = append_partials('storefront.account_section', user: @user)
+
+  - if @recommendations.any?
+    .personalized-recommendations-content-block
+      .content-wrapper
+        %h2.personalized-recommendations-content-block__heading= t('workarea.storefront.users.recommendations')
+        .grid
+          - @recommendations.each do |product|
+            .grid__cell.grid__cell--50.grid__cell--25-at-medium
+              .product-summary.product-summary--small
+                = render 'workarea/storefront/products/summary', product: product

data/app/views/workarea/storefront/users/addresses/edit.html.haml

@@ -0,0 +1,24 @@
+- @title = t('workarea.storefront.users.edit_address')
+
+- content_for :breadcrumbs do
+  %p.breadcrumbs__node-group
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.layouts.home'), root_path, rel: 'home', class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.users.account'), users_account_path, class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      %span.breadcrumbs__text= t('workarea.storefront.users.edit_address')
+
+.view
+
+  %h1.heading.heading--3.heading--upcase= t('workarea.storefront.users.edit_address')
+
+  - if @address.errors.any?
+    - @address.errors.full_messages.each do |message|
+      = render_message 'error', message, data: { analytics: validation_error_analytics_data('users').to_json }
+
+  = form_tag users_address_path(@address.id), method: :patch, id: 'address_form', data: { account_dashboard_ajax: 'addresses' } do
+    = render 'workarea/storefront/shared/address_fields', label: 'address', address: @address
+    .grid.grid--auto.grid--middle
+      %p.grid__cell= button_tag t('workarea.storefront.forms.save'), value: 'save_address', class: 'button'
+      %p.grid__cell= link_to t('workarea.storefront.forms.cancel'), users_account_path, class: 'text-button', data: { dialog_close_button: '' }

data/app/views/workarea/storefront/users/addresses/new.html.haml

@@ -0,0 +1,24 @@
+- @title = t('workarea.storefront.users.add_address')
+
+- content_for :breadcrumbs do
+  %p.breadcrumbs__node-group
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.layouts.home'), root_path, rel: 'home', class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.users.account'), users_account_path, class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      %span.breadcrumbs__text= t('workarea.storefront.users.add_address')
+
+.view
+
+  %h1.heading.heading--3.heading--upcase= t('workarea.storefront.users.add_address')
+
+  - if @address.errors.any?
+    - @address.errors.full_messages.each do |message|
+      = render_message 'error', message, data: { analytics: validation_error_analytics_data('users').to_json }
+
+  = form_tag users_addresses_path, method: 'post', id: 'address_form', data: { account_dashboard_ajax: 'addresses' } do
+    = render 'workarea/storefront/shared/address_fields', label: 'address', address: @address
+    .grid.grid--auto.grid--middle
+      %p.grid__cell= button_tag t('workarea.storefront.forms.save'), value: 'save_address', class: 'button'
+      %p.grid__cell= link_to t('workarea.storefront.forms.cancel'), users_account_path, class: 'text-button', data: { dialog_close_button: '' }

data/app/views/workarea/storefront/users/credit_cards/edit.html.haml

@@ -0,0 +1,71 @@
+- @title = t('workarea.storefront.users.edit_credit_card')
+
+- content_for :breadcrumbs do
+  %p.breadcrumbs__node-group
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.layouts.home'), root_path, rel: 'home', class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.users.account'), users_account_path, class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      %span.breadcrumbs__text= t('workarea.storefront.users.edit_credit_card')
+
+.view
+
+  %h1.heading.heading--3.heading--upcase= t('workarea.storefront.users.edit_credit_card')
+
+  - if @credit_card.errors.any?
+    - @credit_card.errors.full_messages.each do |message|
+      = render_message 'error', message, data: { analytics: validation_error_analytics_data('users').to_json }
+
+  %table.table
+    %tbody
+      %tr
+        %th= t('workarea.storefront.credit_cards.issuer')
+        %td= @credit_card.issuer
+      %tr
+        %th= t('workarea.storefront.credit_cards.card_number')
+        %td= @credit_card.display_number
+      %tr
+        %th= t('workarea.storefront.users.default_card')
+        %td= @credit_card.default? ? 'Yes' : 'No'
+
+  = form_tag users_credit_card_path(@credit_card.id), method: :patch, id: 'credit_card_form' do
+
+    - unless @credit_card.default?
+      .button-property
+        .value= check_box_tag 'credit_card[default]', true, @credit_card.default?
+        = label_tag 'credit_card[default]', nil, class: 'button-property__name' do
+          %span.button-property__text= t('workarea.storefront.users.set_as_default_card')
+    .grid
+      .grid__cell.grid__cell--50-at-medium
+        .property
+          = label_tag 'credit_card[first_name]', nil, class: 'property__name' do
+            %span.property__text= t('workarea.storefront.users.first_name')
+          .value.value--block= text_field_tag 'credit_card[first_name]', @credit_card.first_name, class: 'text-box', autocomplete: 'given-name', required: true
+      .grid__cell.grid__cell--50-at-medium
+        .property
+          = label_tag 'credit_card[last_name]', nil, class: 'property__name' do
+            %span.property__text= t('workarea.storefront.users.last_name')
+          .value.value--block= text_field_tag 'credit_card[last_name]', @credit_card.last_name, class: 'text-box', autocomplete: 'family-name', required: true
+      .grid__cell.grid__cell--66-at-medium
+        .grid
+          .grid__cell.grid__cell--66-at-medium
+            .property
+              %span.property__name= 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, @credit_card.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, @credit_card.year), title: t('workarea.storefront.credit_cards.expiration_year')
+          .grid__cell.grid__cell--33-at-medium
+            .property
+              = label_tag 'credit_card[cvv]', nil, class: 'property__name' do
+                %span.property__text= t('workarea.storefront.credit_cards.security_code')
+              .value
+                = text_field_tag 'credit_card[cvv]', nil, class: 'text-box text-box--small', required: true, inputmode: 'numeric', pattern: '[0-9]*', autocomplete: 'cc-csc'
+                %span.value__note= link_to t('workarea.storefront.credit_cards.whats_this'), page_path('credit-card-security-code'), data: { dialog_button: '' }
+
+    .grid.grid--auto.grid--middle
+      %p.grid__cell= button_tag t('workarea.storefront.forms.save'), value: 'save_credit_card', class: 'button'
+      %p.grid__cell= link_to t('workarea.storefront.forms.cancel'), users_account_path, class: "text-button", data: { dialog_close_button: '' }

data/app/views/workarea/storefront/users/credit_cards/new.html.haml

@@ -0,0 +1,66 @@
+- @title = t('workarea.storefront.users.add_credit_card')
+- params[:credit_card] ||= {}
+
+- content_for :breadcrumbs do
+  %p.breadcrumbs__node-group
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.layouts.home'), root_path, rel: 'home', class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.users.account'), users_account_path, class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      %span.breadcrumbs__text= t('workarea.storefront.users.add_credit_card')
+
+.view
+
+  %h1.heading.heading--3.heading--upcase= t('workarea.storefront.users.add_credit_card')
+
+  - if @credit_card && @credit_card.errors.any?
+    - @credit_card.errors.full_messages.each do |message|
+      = render_message 'error', message, data: { analytics: validation_error_analytics_data('users').to_json }
+
+  = form_tag users_credit_cards_path, method: 'post', id: 'credit_card_form', data: { single_submit_form: '' } do
+    .grid
+      .grid__cell
+        .grid
+          .grid__cell.grid__cell--50-at-medium
+            .property
+              = label_tag 'credit_card[first_name]', nil, class: 'property__name' do
+                %span.property__text= t('workarea.storefront.users.first_name')
+              .value.value--block= text_field_tag 'credit_card[first_name]', params[:credit_card][:first_name], class: 'text-box', autocomplete: 'given-name', required: true
+          .grid__cell.grid__cell--50-at-medium
+            .property
+              = label_tag 'credit_card[last_name]', nil, class: 'property__name' do
+                %span.property__text= t('workarea.storefront.users.last_name')
+              .value.value--block= text_field_tag 'credit_card[last_name]', params[:credit_card][:last_name], class: 'text-box', autocomplete: 'family-name', required: true
+      .grid__cell
+        .property
+          = label_tag 'credit_card[number]', nil, class: 'property__name' do
+            %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, autocomplete: 'cc-number'
+      .grid__cell.grid__cell--66-at-medium
+        .grid
+          .grid__cell.grid__cell--66-at-medium
+            .property
+              %span.property__name= 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, params[:credit_card][: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, params[:credit_card][:year]), title: t('workarea.storefront.credit_cards.expiration_year')
+          .grid__cell.grid__cell--33-at-medium
+            .property
+              = label_tag 'credit_card[cvv]', nil, class: 'property__name' do
+                %span.property__text= t('workarea.storefront.credit_cards.security_code')
+              .value
+                = text_field_tag 'credit_card[cvv]', nil, class: 'text-box text-box--small', inputmode: 'numeric', pattern: '[0-9]*', autocomplete: 'cc-csc', required: true
+                %span.value__note=link_to t('workarea.storefront.credit_cards.whats_this'), page_path('credit-card-security-code'), data: { dialog_button: '' }
+
+    .button-property
+      .value= check_box_tag 'credit_card[default]', true, @user.credit_cards.empty?
+      = label_tag 'credit_card[default]', nil, class: 'button-property__name' do
+        %span.button-property__text= t('workarea.storefront.users.set_as_default_card')
+
+    .grid.grid--auto.grid--middle
+      %p.grid__cell= button_tag t('workarea.storefront.forms.save'), value: 'save_credit_card', class: 'button'
+      %p.grid__cell= link_to t('workarea.storefront.forms.cancel'), users_account_path, class: "text-button", data: { dialog_close_button: '' }