Switch help modals from angular templates to use ViewComponent and St…

…imulusJs

app/components/help_modal_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class HelpModalComponent < ViewComponent::Base
+  def initialize(id:, close_button: true)
+    @id = id
+    @close_button = close_button
+  end
+
+  private
+
+  def close_button_class
+    if namespace == "admin"
+      "red"
+    else
+      "primary"
+    end
+  end
+
+  def close_button?
+    !!@close_button
+  end
+
+  def namespace
+    helpers.controller_path.split("/").first
+  end
+end

app/components/help_modal_component/help_modal_component.html.haml

@@ -0,0 +1,8 @@
+%div{ id: @id, "data-controller": "help-modal", "data-action": "keyup@document->help-modal#closeIfEscapeKey" }
+  .reveal-modal-bg.fade{ "data-help-modal-target": "background", "data-action": "click->help-modal#close" }
+  .reveal-modal.fade.small.help-modal{ "data-help-modal-target": "modal" }
+    = content
+
+    - if close_button?
+      .text-center
+        %input{ class: "button icon-plus #{close_button_class}", type: 'button', value: t('js.admin.modals.got_it'), "data-action": "click->help-modal#close" }

app/components/help_modal_component/help_modal_component.scss

@@ -0,0 +1,10 @@
+.help-modal {
+  visibility: visible;
+  position: fixed;
+  top: 3em;
+}
+
+/* prevent arrow on selected admin menu item appearing above modal */
+body.modal-open #admin-menu li.selected a::after {
+  z-index: 0;
+}

app/views/admin/enterprises/form/_business_address.html.haml

@@ -1,15 +1,14 @@
 .row
   .three.columns.alpha
     = bf.label :company, t(".company_legal_name")
-    %i.text-big.icon-question-sign.help-modal{ template: 'admin/modals/business_address_info.html' }
+    %i.text-big.icon-question-sign{ "data-controller": "help-modal-link", "data-action": "click->help-modal-link#open", "data-help-modal-link-target-value": "business_address_info_modal" }
   .eight.columns.omega
     = bf.text_field :company, { placeholder: t(".company_placeholder") }
 
 .row
   .three.columns.alpha
     = bf.label :address1, t('.address1')
-    %i.text-big.icon-question-sign.help-modal{ template: 'admin/modals/business_address_info.html' }
-  .eight.columns.omega
+    %i.text-big.icon-question-sign{ "data-controller": "help-modal-link", "data-action": "click->help-modal-link#open", "data-help-modal-link-target-value": "business_address_info_modal" }
     = bf.text_field :address1, { placeholder: t(".address1_placeholder") }
 .row
   .alpha.three.columns
@@ -40,7 +39,11 @@
 .row
   .three.columns.alpha
     = bf.label :phone, t(".legal_phone_number")
-    %i.text-big.icon-question-sign.help-modal{ template: 'admin/modals/business_address_info.html' }
+    %i.text-big.icon-question-sign{ "data-controller": "help-modal-link", "data-action": "click->help-modal-link#open", "data-help-modal-link-target-value": "business_address_info_modal" }
   .eight.columns.omega
     = bf.text_field :phone, { placeholder: t(".phone_placeholder") }
 
+= render HelpModalComponent.new(id: "business_address_info_modal") do
+  .margin-bottom-30
+    = t('js.admin.modals.business_address_info.message')
+

app/views/admin/enterprises/form/_business_details.html.haml

@@ -35,7 +35,7 @@
 .row
   .alpha.three.columns
     = f.label :terms_and_conditions, t('.terms_and_conditions')
-    %i.text-big.icon-question-sign.help-modal{ template: 'admin/modals/terms_and_conditions_info.html' }
+    %i.text-big.icon-question-sign{ "data-controller": "help-modal-link", "data-action": "click->help-modal-link#open", "data-help-modal-link-target-value": "terms_and_conditions_info_modal" }
 
   .omega.eight.columns
     %a{ href: '{{ Enterprise.terms_and_conditions }}', target: '_blank', ng: { if: 'Enterprise.terms_and_conditions' } }
@@ -69,5 +69,16 @@
     = f.radio_button :preferred_invoice_order_by_supplier, true, 'ng-model' => 'Enterprise.preferred_invoice_order_by_supplier', 'ng-value' => 'true'
     = f.label :preffered_invoice_order_by_supplier, t('.enabled'), value: :true
   .five.columns.omega
-    = f.radio_button :preferred_invoice_order_by_supplier, false, 'ng-model' => 'Enterprise.preferred_invoice_order_by_supplier', 'ng-value' => 'false' 
+    = f.radio_button :preferred_invoice_order_by_supplier, false, 'ng-model' => 'Enterprise.preferred_invoice_order_by_supplier', 'ng-value' => 'false'
     = f.label :preferred_invoice_order_by_name, t('.disabled'), value: :false
+
+= render HelpModalComponent.new(id: "terms_and_conditions_info_modal") do
+  .margin-bottom-30.text-center
+    .text-big
+      = t('js.admin.modals.terms_and_conditions_info.title')
+  .margin-bottom-30
+    %p
+      = t('js.admin.modals.terms_and_conditions_info.message_1')
+  .margin-bottom-30
+    %p
+      = t('js.admin.modals.terms_and_conditions_info.message_2')

app/views/admin/enterprises/form/_stripe_connect.html.haml

@@ -1,4 +1,3 @@
-= render 'admin/enterprises/form/stripe_connect/confirm_modal'
 
 - if @stripe_account = @enterprise.stripe_account
   .stripe-info
@@ -11,5 +10,8 @@
     .six.columns.alpha
       =t('.stripe_connect_intro')
     .five.columns.omega.text-right
-      %a.stripe-connect.help-modal{ template: 'admin/modals/stripe_connect_confirm.html' }
+      %a.stripe-connect{ "data-controller": "help-modal-link", "data-action": "click->help-modal-link#open", "data-help-modal-link-target-value": "stripe_connect_confirm_modal" }
         %span= t('.connect_with_stripe')
+
+  = render HelpModalComponent.new(id: "stripe_connect_confirm_modal", close_button: false) do
+    = render 'admin/enterprises/form/stripe_connect/confirm_modal'

app/views/admin/enterprises/form/_users.html.haml

@@ -70,5 +70,28 @@
           %a= t('admin.whats_this')
       .eight.columns.omega
         .row
-          %a.button.help-modal{template: 'admin/modals/invite_manager.html'}
+          %a.button{ "data-controller": "help-modal-link", "data-action": "click->help-modal-link#open", "data-help-modal-link-target-value": "invite-manager-modal" }
             = t('.add_unregistered_user')
+
+-# add to admin footer to avoid nesting invitation form inside enterprise form
+- content_for :admin_footer do
+  = render HelpModalComponent.new(id: "invite-manager-modal", close_button: false) do
+    %div{ng: {app: 'admin.enterprises', controller: 'enterpriseCtrl'}}
+
+      .margin-bottom-30.text-center
+        .text-big
+          = t('js.admin.modals.invite_title')
+
+      %p.alert-box.ok{ng: {show: 'invite_success'}}
+        {{invite_success}}
+
+      %p.alert-box.error{ng: {show: 'invite_errors'}}
+        {{invite_errors}}
+
+      %input#invite_email.fullwidth.margin-bottom-20{ng: {model: 'newUser'}}
+
+      .margin-bottom-20.text-center
+        %button.text-center.margin-top-10{ng: {show: '!invite_success', click: 'inviteManager()'}}
+          = t('js.admin.modals.invite')
+        %button.text-center.margin-top-10{"data-action": "click->help-modal#close", ng: {show: 'invite_success', click: 'resetModal();'}}
+          = t('js.admin.modals.close')

app/views/admin/enterprises/form/stripe_connect/_confirm_modal.html.haml

@@ -1,27 +1,26 @@
-%script{ type: "text/ng-template", id: "admin/modals/stripe_connect_confirm.html" }
-  -# Recommended info to impart (from Stripe Connect docs):
-  -# indicate to the user what you’re responsible for and what they’ll be expected to do. It’s particularly important to communicate:
-  -# That they’ll need to create and maintain their Stripe account.
-  -# That they’ll need to handle chargebacks and all customer service issues.
-  -# Who is responsible for paying the Stripe fees.
-  -# What, if any, fees the platform charges.
+-# Recommended info to impart (from Stripe Connect docs):
+-# indicate to the user what you’re responsible for and what they’ll be expected to do. It’s particularly important to communicate:
+-# That they’ll need to create and maintain their Stripe account.
+-# That they’ll need to handle chargebacks and all customer service issues.
+-# Who is responsible for paying the Stripe fees.
+-# What, if any, fees the platform charges.
 
-  #stripe-connect-confirm
-    .margin-bottom-30.text-center
-      .text-big
-        = t('.title')
+#stripe-connect-confirm
+  .margin-bottom-30.text-center
+    .text-big
+      = t('.title')
 
-    .margin-bottom-30
-      %p= t('.part1')
+  .margin-bottom-30
+    %p= t('.part1')
 
-    .margin-bottom-30
-      %p= t('.part2')
+  .margin-bottom-30
+    %p= t('.part2')
 
-    .margin-bottom-30
-      %p= t('.part3')
+  .margin-bottom-30
+    %p= t('.part3')
 
-    .text-center
-      %a.button.icon-ok{ href: main_app.connect_admin_stripe_accounts_path(enterprise_id: @enterprise) }
-        = t('.i_agree')
-      %a.button.red.icon-remove{ href: 'javascript:void(0)', ng: { click: 'close()' } }
-        = t('.cancel')
+  .text-center
+    %a.button.icon-ok{ href: main_app.connect_admin_stripe_accounts_path(enterprise_id: @enterprise) }
+      = t('.i_agree')
+    %a.button.red.icon-remove{ "data-action": "click->help-modal#close" }
+      = t('.cancel')

app/views/admin/enterprises/form/tag_rules/_default_rules.html.haml

@@ -7,9 +7,34 @@
         %td
           %h5
             = t('.by_default')
-          %i.text-big.icon-question-sign.help-modal{ template: 'admin/modals/tag_rule_help.html' }
+          %i.text-big.icon-question-sign{ "data-controller": "help-modal-link", "data-action": "click->help-modal-link#open", "data-help-modal-link-target-value": "tag_rule_help_modal" }
   .no_rules{ ng: { show: "defaultTagGroup.rules.length == 0" } }
     = t('.no_rules_yet')
   .tag_rule{ ng: { repeat: "rule in defaultTagGroup.rules" } }
   .add_rule.text-center
     %input.button.icon-plus{ type: 'button', value: t('.add_new_button'), "add-new-rule-to" => "addNewRuleTo", "tag-group" => "defaultTagGroup", "new-tag-rule-dialog" => true }
+
+= render HelpModalComponent.new(id: "tag_rule_help_modal") do
+  #tag-rule-help
+    .margin-bottom-30.text-center
+      .text-big
+        = t('js.admin.modals.tag_rule_help.title')
+
+    .margin-bottom-30
+      .text-normal
+        = t('js.admin.modals.tag_rule_help.overview')
+      %p
+        = t('js.admin.modals.tag_rule_help.overview_text')
+
+    .margin-bottom-30
+      .text-normal
+        = t('js.admin.modals.tag_rule_help.by_default_rules')
+      %p
+        = t('js.admin.modals.tag_rule_help.by_default_rules_text')
+
+    .margin-bottom-30
+      .text-normal
+        = t('js.admin.modals.tag_rule_help.customer_tagged_rules')
+      %p
+        = t('js.admin.modals.tag_rule_help.customer_tagged_rules_text')
+

app/views/spree/layouts/_admin_body.html.haml

@@ -71,3 +71,5 @@
   = raw "Spree.api_key = \"#{spree_current_user.try(:spree_api_key).to_s}\";"
 
 = render "layouts/matomo_tag"
+
+= yield :admin_footer

app/views/spree/users/_cards.html.haml

@@ -4,7 +4,7 @@
       .small-12.medium-6.columns
         %h3
           = t(:saved_cards)
-          %button.button.secondary.tiny.help-btn.ng-scope{ "help-modal" => t('.saved_cards_popover') }
+          %button.button.secondary.tiny.help-btn{ "data-controller": "help-modal-link", "data-action": "click->help-modal-link#open", "data-help-modal-link-target-value": "saved_cards_modal" }
             %i.ofn-i_013-help
 
         .saved_cards{ ng: { show: 'savedCreditCards.length > 0' } }
@@ -22,3 +22,9 @@
           %h3
             = t('.authorised_shops')
           = render 'authorised_shops'
+
+      = render HelpModalComponent.new(id: "saved_cards_modal") do
+        %p.text-center.text-vbig
+          %i.ofn-i_013-help
+        %p
+          = t('.saved_cards_popover')

app/webpacker/controllers/help_modal_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = ["background", "modal"]
+
+  open() {
+    this.backgroundTarget.style.display = "block"
+    this.modalTarget.style.display = "block"
+
+    setTimeout(() => {
+      this.modalTarget.classList.add("in")
+      this.backgroundTarget.classList.add("in")
+      document.querySelector("body").classList.add("modal-open")
+    })
+  }
+
+  close() {
+    this.modalTarget.classList.remove("in")
+    this.backgroundTarget.classList.remove("in")
+    document.querySelector("body").classList.remove("modal-open")
+
+    setTimeout(() => {
+      this.backgroundTarget.style.display = "none"
+      this.modalTarget.style.display = "none"
+    }, 200)
+  }
+
+  closeIfEscapeKey(e) {
+    if (e.code == "Escape") {
+      this.close()
+    }
+  }
+}