From 4d3c2a8307129d262d329758a120dbc258496dff Mon Sep 17 00:00:00 2001
From: panhachom <panhachom@gmail.com>
Date: Thu, 19 Dec 2024 18:01:02 +0700
Subject: [PATCH] close #2174 dynamic kyc fields

---
 app/controllers/spree/admin/kyc_controller.rb | 13 ++-
 .../api/v2/storefront/guests_controller.rb    |  3 +-
 .../admin/kyc/_dynamic_kyc_fields.html.erb    | 14 +++
 .../admin/kyc/_dynamic_kyc_form.html.erb      | 90 +++++++++++++++++++
 app/views/spree/admin/kyc/edit.html.erb       | 41 ++++-----
 config/routes.rb                              |  1 +
 ...025924_add_dynamic_kyc_to_spree_product.rb |  7 ++
 ...ic_field_to_spree_cm_commissioner_guest.rb |  7 ++
 8 files changed, 154 insertions(+), 22 deletions(-)
 create mode 100644 app/views/spree/admin/kyc/_dynamic_kyc_fields.html.erb
 create mode 100644 app/views/spree/admin/kyc/_dynamic_kyc_form.html.erb
 create mode 100644 db/migrate/20241219025924_add_dynamic_kyc_to_spree_product.rb
 create mode 100644 db/migrate/20241219105707_add_dynamic_field_to_spree_cm_commissioner_guest.rb

diff --git a/app/controllers/spree/admin/kyc_controller.rb b/app/controllers/spree/admin/kyc_controller.rb
index cf1bc6248..a62e68c07 100644
--- a/app/controllers/spree/admin/kyc_controller.rb
+++ b/app/controllers/spree/admin/kyc_controller.rb
@@ -11,8 +11,19 @@ class KycController < Spree::Admin::ResourceController
       # @overrided
       def permitted_resource_params
         kyc_result = calculate_kyc_value(params[:product])
+        params.require(:product).permit(:allowed_upload_later, dynamic_kyc: %i[key label attype]).merge(kyc: kyc_result)
+      end
+
+      def remove_field
+        key = params[:key]
+
+        @product.dynamic_kyc.reject! { |field| field['key'] == key }
 
-        params.require(:product).permit(:allowed_upload_later).merge(kyc: kyc_result)
+        if @product.save
+          render json: { success: true }
+        else
+          render json: { success: false, errors: @product.errors.full_messages }, status: :unprocessable_entity
+        end
       end
 
       def flash_error
diff --git a/app/controllers/spree/api/v2/storefront/guests_controller.rb b/app/controllers/spree/api/v2/storefront/guests_controller.rb
index 323d67fcb..e1259234e 100644
--- a/app/controllers/spree/api/v2/storefront/guests_controller.rb
+++ b/app/controllers/spree/api/v2/storefront/guests_controller.rb
@@ -73,7 +73,8 @@ def guest_params
               :address,
               :other_organization,
               :expectation,
-              :upload_later
+              :upload_later,
+              :dynamic_field
             )
           end
         end
diff --git a/app/views/spree/admin/kyc/_dynamic_kyc_fields.html.erb b/app/views/spree/admin/kyc/_dynamic_kyc_fields.html.erb
new file mode 100644
index 000000000..9c4a18faa
--- /dev/null
+++ b/app/views/spree/admin/kyc/_dynamic_kyc_fields.html.erb
@@ -0,0 +1,14 @@
+<div class="d-flex align-items-center mb-2">
+
+  <input type="text" class="form-control mx-1 my-1" name="product[dynamic_kyc][][key]" value="<%= key %>" placeholder="Key">
+  <input type="text" class="form-control mx-1 my-1" name="product[dynamic_kyc][][label]" value="<%= label %>" placeholder="Label">
+  <select class="form-control mx-1 my-1" name="product[dynamic_kyc][][attype]">
+    <option value="string" <%= 'selected' if attype == 'string' %>>String</option>
+    <option value="integer" <%= 'selected' if attype == 'integer' %>>Integer</option>
+    <option value="float" <%= 'selected' if attype == 'float' %>>Float</option>
+    <option value="array" <%= 'selected' if attype == 'array' %>>Array</option>
+    <option value="datetime" <%= 'selected' if attype == 'datetime' %>>Datetime</option>
+    <option value="date" <%= 'selected' if attype == 'date' %>>Date</option>
+  </select>
+  <button type="button" class="btn btn-danger remove-field btn-sm">Remove</button>
+</div>
diff --git a/app/views/spree/admin/kyc/_dynamic_kyc_form.html.erb b/app/views/spree/admin/kyc/_dynamic_kyc_form.html.erb
new file mode 100644
index 000000000..ffff8158b
--- /dev/null
+++ b/app/views/spree/admin/kyc/_dynamic_kyc_form.html.erb
@@ -0,0 +1,90 @@
+<div class="d-flex align-items-center justify-content-between">
+  <h5 class="mx-1">Dynamic KYC Fields</h5>
+  <button type="button" id="add-dynamic-kyc-field" class="btn btn-primary mx-1">Add New Field</button>
+</div>
+
+<div id="dynamic-kyc-fields" class="my-2">
+  <div class="form-group">
+    <div class="d-flex flex-column">
+      <% if @product.dynamic_kyc.empty? %>
+          <%= render partial: 'dynamic_kyc_fields', locals: { key: '', label: '', attype: '' } %>
+      <% else %>
+        <% @product.dynamic_kyc.each_with_index do |item, index| %>
+          <%= render partial: 'dynamic_kyc_fields', locals: {  key: item['key'], label: item['label'], attype: item['attype'] } %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+
+
+<script>
+
+document.addEventListener('DOMContentLoaded', () => {
+  const $addFieldButton = document.getElementById('add-dynamic-kyc-field');
+  const $fieldsContainer = document.getElementById('dynamic-kyc-fields');
+  const $form = document.querySelector('form');
+
+  const generateNewFieldHTML = () => `
+    <div class="d-flex align-items-center mb-2">
+      <input type="text" class="form-control mx-1 my-1" name="product[dynamic_kyc][][key]" placeholder="Key">
+      <input type="text" class="form-control mx-1 my-1" name="product[dynamic_kyc][][label]" placeholder="Label">
+      <select class="form-control mx-1 my-1" name="product[dynamic_kyc][][attype]">
+        <option value="string">String</option>
+        <option value="integer">Integer</option>
+        <option value="float">Float</option>
+        <option value="array">Array</option>
+        <option value="datetime">Datetime</option>
+        <option value="date">Date</option>
+      </select>
+      <button type="button" class="btn btn-danger remove-field btn-sm">Remove</button>
+    </div>
+  `;
+
+  const getProductSlug = () => "<%= @product.slug %>";
+
+  const removeKycField = (key) => {
+    return fetch(`/admin/products/${getProductSlug()}/remove_field`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+      },
+      body: JSON.stringify({ key })
+    });
+  };
+
+  const handleAddFieldClick = () => {
+    $fieldsContainer.querySelector('.form-group .d-flex').insertAdjacentHTML('beforeend', generateNewFieldHTML());
+  };
+
+  const handleRemoveFieldClick = (event) => {
+    if (event.target.classList.contains('remove-field')) {
+      const $fieldElement = event.target.closest('.d-flex');
+      const key = $fieldElement.querySelector('input[name*="[key]"]').value;
+
+      removeKycField(key)
+        .then(response => {
+          if (response.ok) $fieldElement.remove();
+          else alert('Failed to remove the field');
+        });
+    }
+  };
+
+  const handleSubmit = (event) => {
+    $fieldsContainer.querySelectorAll('.d-flex').forEach(field => {
+      const $keyField = field.querySelector('input[name*="[key]"]');
+      const $labelField = field.querySelector('input[name*="[label]"]');
+      if (!$keyField.value.trim() && !$labelField.value.trim()) field.remove();
+    });
+  };
+
+  $addFieldButton.addEventListener('click', handleAddFieldClick);
+  $fieldsContainer.addEventListener('click', handleRemoveFieldClick);
+  $form.addEventListener('submit', handleSubmit);
+});
+
+
+
+</script>
diff --git a/app/views/spree/admin/kyc/edit.html.erb b/app/views/spree/admin/kyc/edit.html.erb
index 2e49a7b3a..07d7a4fce 100644
--- a/app/views/spree/admin/kyc/edit.html.erb
+++ b/app/views/spree/admin/kyc/edit.html.erb
@@ -1,31 +1,32 @@
 <%= render partial: 'spree/admin/shared/product_tabs', locals: { current: :kyc } %>
-
 <% content_for :page_actions do %>
   <%= button_link_to Spree.t(:edit_icons),
     admin_vectors_option_values_url,
     { icon: 'spree-icon.svg', id: 'admin-option-values-icons-index' }
   %>
 <% end %>
-
 <%= form_with model: @product, url: update_kyc_admin_product_path(@product), method: :put do |form| %>
-    <small class="form-text text-muted">
-      <%= raw I18n.t('kyc.allowed_upload_later') %>
-    </small>
-    <div class="d-flex flex-column my-4">
-      <div class="form-check form-check-inline">
-        <%= form.field_container :allowed_upload_later do %>
-          <%= form.check_box :allowed_upload_later, class: 'form-check-input', checked: form.object.allowed_upload_later? %>
-          <%= form.label :allowed_upload_later, Spree.t(:allowed_upload_later), class: 'form-check-label' %>
-          <%= form.error_message_on :allowed_upload_later, class: 'text-danger' %>
-        <% end %>
-      </div>
+  <small class="form-text text-muted">
+    <%= raw I18n.t('kyc.allowed_upload_later') %>
+  </small>
+  <div class="d-flex flex-column my-4">
+    <div class="form-check form-check-inline">
+      <%= form.field_container :allowed_upload_later do %>
+        <%= form.check_box :allowed_upload_later, class: 'form-check-input', checked: form.object.allowed_upload_later? %>
+        <%= form.label :allowed_upload_later, Spree.t(:allowed_upload_later), class: 'form-check-label' %>
+        <%= form.error_message_on :allowed_upload_later, class: 'text-danger' %>
+      <% end %>
     </div>
+  </div>
+  <small class="form-text text-muted">
+    <%= raw I18n.t('kyc.note') %>
+  </small>
+  <%= render partial: 'form', locals: { form: form } %>
+  <%= render partial: 'dynamic_kyc_form' %>
 
-    <small class="form-text text-muted">
-        <%= raw I18n.t('kyc.note') %>
-    </small>
-    <%= render partial: 'form', locals: { form: form } %>
-      <div class='form-actions' data-hook='buttons'>
-        <%= button Spree.t('actions.update'), 'save.svg', 'submit', { class: 'btn-success', data: { disable_with: "#{ Spree.t(:saving) }..." }} %>
-    </div>
+  <div class="form-actions" data-hook="buttons">
+    <%= button Spree.t('actions.update'), 'save.svg', 'submit', { class: 'btn-success', data: { disable_with: "#{ Spree.t(:saving) }..." }} %>
+  </div>
 <% end %>
+
+
diff --git a/config/routes.rb b/config/routes.rb
index b898c0cce..744e652b5 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -99,6 +99,7 @@
         delete 'remove_metafield', to: 'metafields#remove_metafield'
         get 'edit_kyc', to: 'kyc#edit'
         put 'update_kyc', to: 'kyc#update'
+        delete 'remove_field', to: 'kyc#remove_field'
       end
 
       resources :variant_guest_card_classes
diff --git a/db/migrate/20241219025924_add_dynamic_kyc_to_spree_product.rb b/db/migrate/20241219025924_add_dynamic_kyc_to_spree_product.rb
new file mode 100644
index 000000000..cf48e572b
--- /dev/null
+++ b/db/migrate/20241219025924_add_dynamic_kyc_to_spree_product.rb
@@ -0,0 +1,7 @@
+class AddDynamicKycToSpreeProduct < ActiveRecord::Migration[7.0]
+  def change
+    unless column_exists?(:spree_products, :dynamic_kyc)
+      add_column :spree_products, :dynamic_kyc, :jsonb, default: {}
+    end
+  end
+end
diff --git a/db/migrate/20241219105707_add_dynamic_field_to_spree_cm_commissioner_guest.rb b/db/migrate/20241219105707_add_dynamic_field_to_spree_cm_commissioner_guest.rb
new file mode 100644
index 000000000..632f6da28
--- /dev/null
+++ b/db/migrate/20241219105707_add_dynamic_field_to_spree_cm_commissioner_guest.rb
@@ -0,0 +1,7 @@
+class AddDynamicFieldToSpreeCmCommissionerGuest < ActiveRecord::Migration[7.0]
+  def change
+    unless column_exists?(:cm_guests, :dynamic_field)
+      add_column :cm_guests, :dynamic_field, :jsonb, default: {}
+    end
+  end
+end