Refactor confirm modal conponent to handle forms

openfoodfoundation · Oct 23, 2024 · 74ebcb2 · 74ebcb2
1 parent 7af0ac6
commit 74ebcb2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 40 deletions.
diff --git a/app/components/confirm_modal_component.rb b/app/components/confirm_modal_component.rb
@@ -8,7 +8,7 @@ def initialize(
     controller: nil,
     message: nil,
     confirm_actions: nil,
-    confirm_reflexes: nil,
+    form_url: nil,
     confirm_button_class: :primary,
     confirm_button_text: I18n.t('js.admin.modals.confirm'),
     cancel_button_text: I18n.t('js.admin.modals.cancel'),
@@ -17,7 +17,7 @@ def initialize(
     super(id:, close_button: true)
     @confirm_actions = confirm_actions
     @reflex = reflex
-    @confirm_reflexes = confirm_reflexes
+    @form_url = form_url
     @controller = controller
     @message = message
     @confirm_button_class = confirm_button_class

diff --git a/app/components/confirm_modal_component/confirm_modal_component.html.haml b/app/components/confirm_modal_component/confirm_modal_component.html.haml
@@ -1,10 +1,19 @@
 %div{ id: @id, "data-controller": "modal #{@controller}", "data-action": "keyup@document->modal#closeIfEscapeKey", "data-#{@controller}-reflex-value": @reflex }
   .reveal-modal-bg.fade{ "data-modal-target": "background", "data-action": "click->modal#close" }
   .reveal-modal.fade.tiny.modal-component{ "data-modal-target": "modal" }
-    = content
+    - if @confirm_actions
+      = content
 
-    = render @message if @message
+      = render @message if @message
 
-    %div{ class: "modal-actions #{@actions_alignment_class}" }
-      %input{ class: "button icon-plus #{close_button_class}", type: 'button', value: @cancel_button_text, "data-action": "click->modal#close" }
-      %input{ id: 'modal-confirm-button', class: "button icon-plus #{@confirm_button_class}", type: 'button', value: @confirm_button_text, "data-action": @confirm_actions, "data-reflex": @confirm_reflexes }
+      %div{ class: "modal-actions #{@actions_alignment_class}" }
+        %input{ class: "button icon-plus #{close_button_class}", type: 'button', value: @cancel_button_text, "data-action": "click->modal#close" }
+        %input{ id: 'modal-confirm-button', class: "button icon-plus #{@confirm_button_class}", type: 'button', value: @confirm_button_text, "data-action": @confirm_actions }
+    - elsif @form_url
+      = form_with(url: @form_url, method: :post, data: { turbo: true, controller: 'bulk-actions' }) do
+        = content
+        %p{ class: "modal-actions #{@actions_alignment_class}" }
+          %button.button.secondary{ type: "button", 'data-action': 'click->modal#close' }
+            = @cancel_button_text
+          %button.button.primary{ type: 'submit' }
+            = @confirm_button_text
diff --git a/app/views/spree/admin/orders/index.html.haml b/app/views/spree/admin/orders/index.html.haml
@@ -21,36 +21,16 @@
 
 = render 'spree/admin/shared/custom-confirm'
 
-= render ModalComponent.new(id: "resend_confirmation", modal_class: 'tiny', close_button: false) do
-  = form_with(url: resend_confirmation_emails_admin_orders_path, method: :post, data: { turbo: true, controller: 'bulk-actions' }) do
-    .margin-bottom-30
-      = t('.resend_confirmation_confirm_html')
-    %p.modal-actions.justify-space-around
-      %button.button.secondary{ type: "button", 'data-action': 'click->modal#close' }
-        = t('js.admin.modals.cancel')
-      %button.button.primary{ type: 'submit' }
-        = t('js.admin.modals.confirm')
-
-= render ModalComponent.new(id: "send_invoice", modal_class: 'tiny', close_button: false) do
-  = form_with(url: send_invoices_admin_orders_path, method: :post, data: { turbo: true, controller: 'bulk-actions' }) do
-    .margin-bottom-30
-      = t('.send_invoice_confirm_html')
-    %p.modal-actions.justify-space-around
-      %button.button.secondary{ type: "button", 'data-action': 'click->modal#close' }
-        = t('js.admin.modals.cancel')
-      %button.button.primary{ type: 'submit' }
-        = t('js.admin.modals.confirm')
-
-
-= render ModalComponent.new(id: "cancel_orders", modal_class: 'tiny', close_button: false) do
-  = form_with(url: cancel_orders_admin_orders_path, method: :post, data: { turbo: true, controller: 'bulk-actions' }) do
-    .margin-bottom-30
-      = t("js.admin.orders.cancel_the_order_html")
-    .margin-bottom-30
-      = render partial: "spree/admin/orders/messages/cancel_orders"
-
-    %p.modal-actions.justify-space-around
-      %button.button.secondary{ type: "button", 'data-action': 'click->modal#close' }
-        = t('js.admin.modals.cancel')
-      %button.button.primary{ type: 'submit' }
-        = t('js.admin.modals.confirm')
+= render ConfirmModalComponent.new(id: "resend_confirmation", form_url: resend_confirmation_emails_admin_orders_path) do
+  .margin-bottom-30
+    = t('.resend_confirmation_confirm_html')
+
+= render ConfirmModalComponent.new(id: "send_invoice", form_url: send_invoices_admin_orders_path) do
+  .margin-bottom-30
+    = t('.send_invoice_confirm_html')
+
+= render ConfirmModalComponent.new(id: "cancel_orders", form_url: cancel_orders_admin_orders_path) do
+  .margin-bottom-30
+    = t("js.admin.orders.cancel_the_order_html")
+  .margin-bottom-30
+    = render partial: "spree/admin/orders/messages/cancel_orders"