Class: Www::LeadFormModalComponent

Inherits:
ApplicationComponent show all
Includes:
ActionView::Helpers::TagHelper, ActionView::Helpers::UrlHelper, IconHelper, Turbo::FramesHelper
Defined in:
app/components/www/lead_form_modal_component.rb

Overview

Lazy-loading contact form modal component

Displays a compact CTA card/button/link that opens a modal with the contact form.
The form content (including turnstile and uppy) is loaded via Turbo Frame only
when the modal opens, reducing initial page load.

Usage:

<%# Basic usage %>
<%= render Www::LeadFormModalComponent.new %>

<%# With custom title and button %>
<%= render Www::LeadFormModalComponent.new(
header_title: 'Get a Free Quote',
header_intro: 'Our experts will respond within 24 hours',
button_text: 'Request Quote',
button_icon: 'calculator'
) %>

<%# Compact button variant (no card wrapper) %>
<%= render Www::LeadFormModalComponent.new(variant: :button) %>

<%# Inline link variant (for use in paragraphs) %>
Please <%= render Www::LeadFormModalComponent.new(variant: :link, button_text: 'contact us') %> for help.

Constant Summary collapse

VARIANTS =

Variants.

%w[card button link modal_only].freeze

Constants included from IconHelper

IconHelper::CUSTOM_ICON_MAP, IconHelper::CUSTOM_SVG_DIR, IconHelper::DEFAULT_FAMILY

Instance Method Summary collapse

Methods included from IconHelper

#account_nav_icon, #fa_icon, #star_rating_html

Methods inherited from ApplicationComponent

#cms_link, #fetch_or_fallback, #image_asset_tag, #image_tag, #number_to_currency, #number_with_delimiter, #post_path, #post_url, #strip_tags

Constructor Details

#initialize(modal_id: nil, header_title: "Hi, I'm Rae!", header_intro: "Tell me about your project and I'll connect you with the right expert.", button_text: 'Send Message', button_icon: 'envelope', button_class: 'btn btn-primary btn-lg', link_class: nil, show_upload: true, business_focused: false, submit_label: 'Send Message', application_type: nil, about_project: nil, variant: :card) ⇒ LeadFormModalComponent

Returns a new instance of LeadFormModalComponent.

Parameters:

  • modal_id (String, nil) (defaults to: nil) —

    DOM id for the modal; auto-generated when nil

  • header_title (String) (defaults to: "Hi, I'm Rae!") —

    heading shown at the top of the modal

  • header_intro (String) (defaults to: "Tell me about your project and I'll connect you with the right expert.") —

    intro copy shown under the header title

  • button_text (String) (defaults to: 'Send Message') —

    label for the CTA button/link that opens the modal

  • button_icon (String) (defaults to: 'envelope') —

    icon name rendered inside the CTA

  • button_class (String) (defaults to: 'btn btn-primary btn-lg') —

    CSS classes for the button variant CTA

  • link_class (String, nil) (defaults to: nil) —

    CSS classes for the link variant CTA

  • show_upload (Boolean) (defaults to: true) —

    whether the contact form offers file upload

  • business_focused (Boolean) (defaults to: false) —

    whether the form is tailored to business inquiries

  • submit_label (String) (defaults to: 'Send Message') —

    label for the form's submit button

  • application_type (String, nil) (defaults to: nil) —

    pre-selected application type for the form

  • about_project (String, nil) (defaults to: nil) —

    pre-filled project description for the form

  • variant (Symbol, String) (defaults to: :card) —

    CTA presentation; one of VARIANTS



51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
# File 'app/components/www/lead_form_modal_component.rb', line 51

def initialize(
  modal_id: nil,
  header_title: "Hi, I'm Rae!",
  header_intro: "Tell me about your project and I'll connect you with the right expert.",
  button_text: 'Send Message',
  button_icon: 'envelope',
  button_class: 'btn btn-primary btn-lg',
  link_class: nil,
  show_upload: true,
  business_focused: false,
  submit_label: 'Send Message',
  application_type: nil,
  about_project: nil,
  variant: :card
)
  super()
  @modal_id = modal_id || "lead-form-modal-#{SecureRandom.hex(4)}"
  @header_title = header_title
  @header_intro = header_intro
  @button_text = button_text
  @button_icon = button_icon
  @button_class = button_class
  @link_class = link_class
  @show_upload = show_upload
  @business_focused = business_focused
  @submit_label = submit_label
  @application_type = application_type
  @about_project = about_project
  @variant = fetch_or_fallback(variant.to_s, VARIANTS, 'card')
end

Instance Method Details

#button_variant? ⇒ Boolean

Returns whether the CTA renders as a standalone button.

Returns:

  • (Boolean) —

    whether the CTA renders as a standalone button



111
112
113
 
# File 'app/components/www/lead_form_modal_component.rb', line 111

def button_variant?
  @variant == 'button'
end

#card_variant? ⇒ Boolean

Returns whether the CTA renders as a card.

Returns:

  • (Boolean) —

    whether the CTA renders as a card



106
107
108
 
# File 'app/components/www/lead_form_modal_component.rb', line 106

def card_variant?
  @variant == 'card'
end

#form_content_url ⇒ String

Builds the URL that lazy-loads the form content into the Turbo Frame.

Returns:

  • (String) —

    contact form content path with query params



85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
# File 'app/components/www/lead_form_modal_component.rb', line 85

def form_content_url
  url_params = {
    show_upload: @show_upload,
    business_focused: @business_focused,
    submit_label: @submit_label,
    frame_id: frame_id
  }
  url_params[:application_type] = @application_type if @application_type.present?
  url_params[:header_title] = @header_title if @header_title.present?
  url_params[:header_intro] = @header_intro if @header_intro.present?
  url_params[:about_project] = @about_project if @about_project.present?

  helpers.contact_form_content_path(url_params)
end

#frame_id ⇒ String

Returns DOM id of the Turbo Frame wrapping the form content.

Returns:

  • (String) —

    DOM id of the Turbo Frame wrapping the form content



101
102
103
 
# File 'app/components/www/lead_form_modal_component.rb', line 101

def frame_id
  "#{@modal_id}-frame"
end

#link_variant? ⇒ Boolean

Returns whether the CTA renders as an inline link.

Returns:

  • (Boolean) —

    whether the CTA renders as an inline link



116
117
118
 
# File 'app/components/www/lead_form_modal_component.rb', line 116

def link_variant?
  @variant == 'link'
end

#modal_only_variant? ⇒ Boolean

Returns whether only the modal markup renders (no CTA).

Returns:

  • (Boolean) —

    whether only the modal markup renders (no CTA)



121
122
123
 
# File 'app/components/www/lead_form_modal_component.rb', line 121

def modal_only_variant?
  @variant == 'modal_only'
end