spree_cm_commissioner 2.3.0.pre.pre15 → 2.3.0.pre.pre17

data/app/models/concerns/spree_cm_commissioner/variant_options_concern.rb

@@ -29,10 +29,18 @@ module SpreeCmCommissioner
                :bib_pre_generation_on_create?,
                :seat_number_positions,
                :seat_number_layouts,
+               :color,
+               :ticket_type,
                :seat_type,
                to: :options
     end
 
+    # Override variant.rb to return cached formatted options text, avoiding repeated database queries.
+    # Falls back to database queries & computing the format if preload data is unavailable.
+    def options_text
+      @options_text ||= public_metadata[:preload_options_text].presence || Spree::Variants::VisableOptionsPresenter.new(self).to_sentence
+    end
+
     def options
       @options ||= VariantOptions.new(self)
     end
@@ -87,17 +95,23 @@ module SpreeCmCommissioner
       options.payment_option == 'post-paid'
     end
 
-    # save optins to public_metadata so we don't have to query option types & option values when needed them.
-    # once variant changed, we update metadata.
     def set_options_to_public_metadata
       self.public_metadata ||= {}
 
-      latest_options_in_hash = option_values.each_with_object({}) do |option_value, hash|
+      # Cache option values as a hash to avoid N+1 queries when accessing options.
+      # Stores {option_type_name => option_value_name} pairs that can be retrieved
+      # without loading option_types and option_values associations.
+      # Example: "Red, 256GB" - formatted options for quick display
+      self.public_metadata[:cm_options] = option_values.each_with_object({}) do |option_value, hash|
         option_type_name = option_value.option_type.name
         hash[option_type_name] = find_option_value_name_for(option_type_name: option_type_name)
       end
 
-      self.public_metadata[:cm_options] = latest_options_in_hash
+      # Cache formatted options text for quick retrieval via #options_text.
+      # Precomputes the human-readable format (e.g., "Red, 256GB") to avoid
+      # repeated formatting and association queries.
+      # Example: {"color" => "red", "storage" => "256GB"} - option_type_name => option_value_name pairs
+      self.public_metadata[:preload_options_text] = Spree::Variants::VisableOptionsPresenter.new(self).to_sentence
     end
 
     def set_options_to_public_metadata!

data/app/models/spree_cm_commissioner/block.rb

@@ -25,6 +25,8 @@ module SpreeCmCommissioner
     validates :y, presence: true, numericality: true
     validates :rotation, presence: true, numericality: { greater_than_or_equal_to: -360, less_than_or_equal_to: 360 }
 
+    validate :cannot_unassign_variant_with_active_blocks
+
     before_validation :assign_layout_from_section, if: -> { seat_layout.nil? && seat_section.present? }
 
     def label_required?
@@ -50,5 +52,22 @@ module SpreeCmCommissioner
     def assign_layout_from_section
       self.seat_layout = seat_section.seat_layout
     end
+
+    private
+
+    def cannot_unassign_variant_with_active_blocks
+      return if variant_id_was.blank? || variant_id.present?
+
+      active_blocks = all_reserved_blocks.reserved_or_on_hold
+      return unless active_blocks.exists?
+
+      block_count = active_blocks.count
+      block_statuses = active_blocks.pluck(:status).uniq.map { |s| s.humanize.downcase }
+
+      errors.add(
+        :variant,
+        "cannot be unassigned because #{block_count} #{block_count == 1 ? 'block is' : 'blocks are'} #{block_statuses.join(' and ')} by guests"
+      )
+    end
   end
 end

data/app/models/spree_cm_commissioner/product_decorator.rb

@@ -7,6 +7,7 @@ module SpreeCmCommissioner
       base.include SpreeCmCommissioner::Metafield
       base.include SpreeCmCommissioner::TenantUpdatable
       base.include SpreeCmCommissioner::ServiceType
+      base.include SpreeCmCommissioner::ServiceRecommendations
 
       base.has_many :variant_kind_option_types, -> { where(kind: :variant).order(:position) },
                     through: :product_option_types, source: :option_type

data/app/models/spree_cm_commissioner/variant_decorator.rb

@@ -68,11 +68,6 @@ module SpreeCmCommissioner
       )
     end
 
-    # override
-    def options_text
-      @options_text ||= Spree::Variants::VisableOptionsPresenter.new(self).to_sentence
-    end
-
     def selected_option_value_ids
       option_value_variants.pluck(:option_value_id)
     end

data/app/models/spree_cm_commissioner/variant_options.rb

@@ -139,6 +139,14 @@ module SpreeCmCommissioner
       @seat_number_layouts ||= option_value_name_for(option_type_name: 'seat-number-layouts')&.split(',')
     end
 
+    def color
+      @color ||= option_value_name_for(option_type_name: 'color')
+    end
+
+    def ticket_type
+      @ticket_type ||= option_value_name_for(option_type_name: 'ticket-type')
+    end
+
     def seat_type
       @seat_type ||= option_value_name_for(option_type_name: 'seat-type')
     end

data/app/models/spree_cm_commissioner/vendor_decorator.rb

@@ -16,6 +16,8 @@ module SpreeCmCommissioner
 
       base.before_save :generate_code, if: :code.nil?
 
+      base.after_create :send_telegram_vendor_creation_alert
+
       base.has_many :photos, -> { order(:position) }, as: :viewable, dependent: :destroy, class_name: 'SpreeCmCommissioner::VendorPhoto'
       base.has_many :option_values, through: :products
       base.has_many :vendor_option_types, class_name: 'SpreeCmCommissioner::VendorOptionType'
@@ -201,6 +203,10 @@ module SpreeCmCommissioner
       vendor_kind_option_values.where(option_type_id: rules_option_type.id)
     end
 
+    def send_telegram_vendor_creation_alert
+      VendorCreationTelegramAlertSenderJob.perform_later(id)
+    end
+
     delegate :present?, to: :tenant, prefix: true
   end
 end

data/app/overrides/spree/admin/variants/_form/add_permanent_stock.html.erb.deface

@@ -1,6 +1,7 @@
 <!-- insert_bottom "[data-hook='admin_variant_form_additional_fields']" -->
 
-<div class="form-group">
+<%# deprecated no longer used, should be removed entirely along with table column, just hide for now. %>
+<div class="form-group d-none">
   <%= f.field_container :permanent_stock do %>
     <%= f.label :permanent_stock, Spree.t(:permanent_stock) %>
     <%= f.number_field :permanent_stock, class: 'form-control' %>

data/app/serializers/spree_cm_commissioner/v2/storefront/intercity_taxi_cart_serializer.rb

@@ -0,0 +1,12 @@
+module SpreeCmCommissioner
+  module V2
+    module Storefront
+      class IntercityTaxiCartSerializer < Spree::V2::Storefront::CartSerializer
+        has_many :line_items,
+                 serializer: SpreeCmCommissioner::V2::Storefront::IntercityTaxiLineItemSerializer
+
+        cache_options store: nil
+      end
+    end
+  end
+end

data/app/serializers/spree_cm_commissioner/v2/storefront/intercity_taxi_line_item_serializer.rb

@@ -0,0 +1,31 @@
+module SpreeCmCommissioner
+  module V2
+    module Storefront
+      class IntercityTaxiLineItemSerializer < BaseSerializer
+        attributes :pickup_place_name,
+                   :drop_off_place_name,
+                   :pickup_lat,
+                   :pickup_lng,
+                   :drop_off_lat,
+                   :drop_off_lng,
+                   :passenger_count,
+                   :distance_km,
+                   :ordered_points,
+                   :base_km,
+                   :detour_pickup_km,
+                   :detour_dropoff_km,
+                   :extra_pickup_km,
+                   :extra_dropoff_km,
+                   :extra_pickup_charge_usd,
+                   :extra_dropoff_charge_usd,
+                   :estimated_time_minutes,
+                   :from_date,
+                   :to_date,
+                   :direction,
+                   :trip_id
+
+        cache_options store: nil
+      end
+    end
+  end
+end

data/app/serializers/spree_cm_commissioner/v2/storefront/trip_result_serializer.rb

@@ -4,6 +4,17 @@ module SpreeCmCommissioner
       class TripResultSerializer < BaseSerializer
         set_type :trip_result
 
+        # Enable serializer-level caching
+        # Longer TTL than controller cache (5min) because:
+        # - Individual trips change less frequently
+        # - Same trip can be reused across multiple searches
+        # - Cache invalidation handled by cache_key_with_version
+        cache_options(
+          store: Rails.cache,
+          namespace: 'trip-result-serializer',
+          expires_in: 30.minutes
+        )
+
         attributes :origin_place, :destination_place, :boarding, :drop_off, :price, :compare_at_amount, :currency, :quantity_available, :max_capacity,
                    :allow_seat_selection, :departure_time, :route_type, :distance
         attribute :duration_in_hms, &:duration_in_hms

data/app/services/spree_cm_commissioner/checkout/advance_decorator.rb

@@ -1,12 +1,16 @@
 module SpreeCmCommissioner
   module Checkout
     module AdvanceDecorator
-      # override
+      # override to capture seats error only, other errors is fine we can return success with latest order object instead of throw error.
+      # seat is special case because we want to return error message.
       def call(order:)
         Spree::Dependencies.checkout_next_service.constantize.call(order: order) until cannot_make_transition?(order)
-        success(order)
-      rescue StandardError => e
-        failure(order, e.message)
+
+        if order.errors[:seats].present?
+          failure(order)
+        else
+          success(order)
+        end
       end
     end
   end

data/app/services/spree_cm_commissioner/intercity_taxi_order/create.rb

@@ -0,0 +1,67 @@
+module SpreeCmCommissioner
+  module IntercityTaxiOrder
+    class Create
+      attr_reader :trip_id, :from_date, :to_date, :user_id, :quantity
+
+      def self.call(trip_id:, from_date:, to_date:, user_id: nil, quantity: 1)
+        new(
+          trip_id: trip_id,
+          from_date: from_date,
+          to_date: to_date,
+          user_id: user_id,
+          quantity: quantity
+        ).call
+      end
+
+      def initialize(trip_id:, from_date:, to_date:, user_id:, quantity:)
+        @trip_id = trip_id
+        @from_date = from_date
+        @to_date = to_date
+        @user_id = user_id
+        @quantity = quantity.to_i <= 0 ? 1 : quantity.to_i
+      end
+
+      def call
+        validate!
+
+        ActiveRecord::Base.transaction do
+          trip = SpreeCmCommissioner::Trip.find(trip_id)
+          variant = trip.product.variants.first
+          raise ArgumentError, 'No variant found for trip' if variant.blank?
+
+          order = Spree::Order.new(state: 'cart', use_billing: true, user_id: user_id)
+
+          line_item = order.line_items.new(
+            variant_id: variant.id,
+            quantity: quantity,
+            from_date: from_date,
+            to_date: to_date,
+            private_metadata: {
+              trip_id: trip.id
+            }
+          )
+
+          build_guests_for!(line_item, quantity)
+
+          order.save!
+          order.update_with_updater!
+
+          order
+        end
+      end
+
+      private
+
+      def validate!
+        raise ArgumentError, 'trip_id is required' if trip_id.blank?
+        raise ArgumentError, 'from_date is required' if from_date.blank?
+        raise ArgumentError, 'to_date is required' if to_date.blank?
+        raise ArgumentError, 'to_date must be after from_date' if from_date.present? && to_date.present? && to_date < from_date
+      end
+
+      def build_guests_for!(line_item, qty)
+        Array.new(qty) { line_item.guests.new }
+      end
+    end
+  end
+end

data/app/services/spree_cm_commissioner/intercity_taxi_order/update.rb

@@ -0,0 +1,79 @@
+module SpreeCmCommissioner
+  module IntercityTaxiOrder
+    class Update
+      attr_reader :order_number, :params
+
+      def self.call(order_number:, params:)
+        new(order_number: order_number, params: params).call
+      end
+
+      def initialize(order_number:, params:)
+        @order_number = order_number
+        @params = ensure_parameters(params)
+      end
+
+      def call
+        order = Spree::Order.find_by!(number: order_number)
+        order.update!(order_params)
+
+        create_billing_address_if_missing(order)
+
+        order
+      end
+
+      private
+
+      def ensure_parameters(params)
+        return params if params.is_a?(::ActionController::Parameters)
+
+        ::ActionController::Parameters.new(params)
+      end
+
+      def create_billing_address_if_missing(order)
+        return if order.bill_address.present?
+
+        SpreeCmCommissioner::BillingAddressCreator.call(order: order)
+      end
+
+      def order_params
+        params.require(:order).permit(
+          :intel_phone_number,
+          :email,
+          line_items_attributes: [
+            :id,
+            :pickup_place_name,
+            :drop_off_place_name,
+            :from_date,
+            :pickup_lat,
+            :pickup_lng,
+            :pickup_oob_confirmed,
+            :drop_off_lat,
+            :drop_off_lng,
+            :drop_off_oob_confirmed,
+            :distance_km,
+            :ordered_points,
+            :base_km,
+            :detour_pickup_km,
+            :detour_dropoff_km,
+            :extra_pickup_km,
+            :extra_dropoff_km,
+            :extra_pickup_charge_usd,
+            :extra_dropoff_charge_usd,
+            :estimated_time_minutes,
+            :remark,
+            :passenger_count,
+            { guests_attributes: %i[
+              id
+              first_name
+              last_name
+              gender
+              nationality_id
+              age
+            ]
+            }
+          ]
+        )
+      end
+    end
+  end
+end

data/app/services/spree_cm_commissioner/{transit/base_route_order_metrics_updater.rb → routes/base_update_order_metrics.rb}

@@ -1,6 +1,6 @@
 module SpreeCmCommissioner
-  module Transit
-    class BaseRouteOrderMetricsUpdater
+  module Routes
+    class BaseUpdateOrderMetrics
       attr_reader :order, :attribute
 
       SUPPORTED_ATTRIBUTES = %i[order_count fulfilled_order_count].freeze

data/app/services/spree_cm_commissioner/{transit/route_previous_trip_count_decrementer_service.rb → routes/decrement_previous_trip_count.rb}

@@ -1,6 +1,6 @@
 module SpreeCmCommissioner
-  module Transit
-    class RoutePreviousTripCountDecrementerService
+  module Routes
+    class DecrementPreviousTripCount
       prepend ::Spree::ServiceModule::Base
 
       def call(previous_route_id:)
@@ -12,7 +12,7 @@ module SpreeCmCommissioner
           # Build a trip-like object that responds to :route and :vendor so the delegated
           # service can locate vendor routes correctly.
           trip_like = Struct.new(:route, :vendor).new(previous_route, previous_route.vendors.first)
-          result = SpreeCmCommissioner::Transit::RouteTripCountDecrementerService.call(trip: trip_like)
+          result = SpreeCmCommissioner::Routes::DecrementTripCount.call(trip: trip_like)
           return result if result.failure?
         else
           previous_route.with_lock do

data/app/services/spree_cm_commissioner/{transit/route_trip_count_decrementer_service.rb → routes/decrement_trip_count.rb}

@@ -1,6 +1,6 @@
 module SpreeCmCommissioner
-  module Transit
-    class RouteTripCountDecrementerService
+  module Routes
+    class DecrementTripCount
       prepend ::Spree::ServiceModule::Base
 
       def call(trip:)

data/app/services/spree_cm_commissioner/{transit/route_fulfilled_order_count_incrementer_service.rb → routes/increment_fulfilled_order_count.rb}

@@ -1,12 +1,12 @@
 module SpreeCmCommissioner
-  module Transit
-    class RouteFulfilledOrderCountIncrementerService
+  module Routes
+    class IncrementFulfilledOrderCount
       prepend ::Spree::ServiceModule::Base
 
       def call(order:)
         return failure(nil, 'Order not found') unless order
 
-        SpreeCmCommissioner::Transit::BaseRouteOrderMetricsUpdater
+        SpreeCmCommissioner::Routes::BaseUpdateOrderMetrics
           .call(order: order, attribute: :fulfilled_order_count)
 
         success(order: order)

data/app/services/spree_cm_commissioner/{transit/route_order_count_incrementer_service.rb → routes/increment_order_count.rb}

@@ -1,12 +1,12 @@
 module SpreeCmCommissioner
-  module Transit
-    class RouteOrderCountIncrementerService
+  module Routes
+    class IncrementOrderCount
       prepend ::Spree::ServiceModule::Base
 
       def call(order:)
         return failure(nil, 'Order not found') unless order
 
-        SpreeCmCommissioner::Transit::BaseRouteOrderMetricsUpdater
+        SpreeCmCommissioner::Routes::BaseUpdateOrderMetrics
           .new(order: order, attribute: :order_count)
           .call
 

data/app/services/spree_cm_commissioner/{transit/route_trip_count_incrementer_service.rb → routes/increment_trip_count.rb}

@@ -1,6 +1,6 @@
 module SpreeCmCommissioner
-  module Transit
-    class RouteTripCountIncrementerService
+  module Routes
+    class IncrementTripCount
       prepend ::Spree::ServiceModule::Base
 
       def call(trip:)

data/app/services/spree_cm_commissioner/trips/search.rb

@@ -0,0 +1,65 @@
+module SpreeCmCommissioner
+  module Trips
+    class Search
+      prepend ::Spree::ServiceModule::Base
+
+      REFRESH_RATE_LIMIT_INTERVAL = 30.seconds
+      SEARCH_CACHE_TTL = 5.minutes
+
+      def self.cache_key_for(params, vendor)
+        new.send(:cache_key, params, vendor)
+      end
+
+      def call(params:, vendor:, is_intercity_taxi: false)
+        return success(results: []) unless valid_search?(params)
+
+        cache_key = cache_key(params, vendor)
+
+        results = Rails.cache.fetch(cache_key, expires_in: SEARCH_CACHE_TTL) do
+          trips = SpreeCmCommissioner::TripQuery.new(
+            origin_id: origin_id(params),
+            destination_id: destination_id(params),
+            vendor_id: vendor.id,
+            number_of_guests: params[:number_of_guests] || 1,
+            date: search_date(params).to_date
+          ).call
+
+          is_intercity_taxi || taxi?(params) ? filter_intercity(trips) : trips
+        end
+
+        success(results: results)
+      rescue StandardError => e
+        failure(nil, e.message)
+      end
+
+      private
+
+      def valid_search?(params)
+        params[:origin].present? && params[:destination].present? && params[:outbound_date].present?
+      end
+
+      def filter_intercity(results)
+        Array(results).select do |res|
+          res.respond_to?(:trips) && res.trips.any? { |t| t.route_type.to_s == 'intercity_taxi' }
+        end
+      end
+
+      def origin_id(params)      = outbound?(params) ? params[:origin]      : params[:destination]
+      def destination_id(params) = outbound?(params) ? params[:destination] : params[:origin]
+      def search_date(params)    = outbound?(params) ? params[:outbound_date] : params[:inbound_date]
+      def outbound?(params)      = params[:direction] == 'outbound' || params[:direction].blank?
+      def taxi?(params)          = params[:service_type] == 'intercity_taxi'
+
+      def cache_key(params, vendor)
+        [
+          'search_trips',
+          "vendor:#{vendor.id}",
+          "dir:#{params[:direction] || 'outbound'}",
+          "o:#{origin_id(params)}",
+          "d:#{destination_id(params)}",
+          "date:#{search_date(params)}"
+        ].join(':')
+      end
+    end
+  end
+end

data/app/views/blazer/queries/embed/_content.html.erb

@@ -1,7 +1,7 @@
 <div class="topbar">
   <div class="row" style="padding-top: 13px; margin: 0;">
     <div class="col-sm-9"></div>
-    <div class="col-sm-3 text-right">
+    <div class="text-right col-sm-3">
       <%= render partial: 'blazer/queries/embed/download_button' %>
     </div>
   </div>
@@ -12,9 +12,58 @@
   <div id="results" style="font-family: 'Poppins', sans-serif;"></div>
 
   <script>
+    // Only apply translations for Khmer locale
+    <% if I18n.locale == :km %>
+      // Column translations from Rails i18n
+      const columnTranslations = {
+        <% I18n.t('blazer.columns', locale: I18n.locale).each do |key, value| %>
+          '<%= key %>': '<%= value %>',
+        <% end %>
+      };
+
+      // Function to translate table headers
+      function translateTableHeaders() {
+        const tables = document.querySelectorAll('#results table');
+        tables.forEach(function(table) {
+          const headers = table.querySelectorAll('thead th');
+          headers.forEach(function(header) {
+            const originalText = header.textContent.trim();
+            if (columnTranslations[originalText]) {
+              header.textContent = columnTranslations[originalText];
+            }
+          });
+        });
+      }
+    <% end %>
+
     function showRun(data) {
       $("#results").html(data)
-      $("#results table").stupidtable(stupidtableCustomSettings).stickyTableHeaders({fixedOffset: 60})
+
+      // Apply table functionality
+      $("#results table").stupidtable(stupidtableCustomSettings)
+
+      <% if I18n.locale == :km %>
+        // Translate headers first, then apply sticky headers (Khmer only)
+        function waitForTable(callback) {
+          const checkTable = () => {
+            const table = document.querySelector('#results table');
+            if (table) {
+              callback();
+            } else {
+              setTimeout(checkTable, 50);
+            }
+          };
+          checkTable();
+        }
+        waitForTable(function() {
+          translateTableHeaders();
+          // Apply sticky headers after translation to ensure proper width calculation
+          $("#results table").stickyTableHeaders({fixedOffset: 60});
+        });
+      <% else %>
+        // Default behavior for English and other locales
+        $("#results table").stickyTableHeaders({fixedOffset: 60});
+      <% end %>
     }
 
     function showError(message) {

data/app/views/spree/admin/option_types/_color_field.html.erb

@@ -0,0 +1,21 @@
+<div class="input-group">
+  <%= f.text_field :name, class: "form-control color-picker-input", placeholder: "eg. #FF5733", value: f.object.name, required: true, pattern: "^#[0-9A-Fa-f]{6}$", data: { target: "color-preview-#{f.object_name}" } %>
+  <span class="input-group-text p-0 color-preview" id="color-preview-<%= f.object_name %>" style="background-color: <%= f.object.name || '#ffffff' %>; border: 1px solid #dee2e6; border-left: none; width: 45px; border-radius: 0 0.375rem 0.375rem 0;"></span>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const colorInput = document.querySelector('[data-target="color-preview-<%= f.object_name %>"]');
+    const colorPreview = document.getElementById('color-preview-<%= f.object_name %>');
+    
+    if (colorInput && colorPreview) {
+      colorInput.addEventListener('input', function() {
+        const color = this.value || '#ffffff';
+        // Validate hex color format
+        if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
+          colorPreview.style.backgroundColor = color;
+        }
+      });
+    }
+  });
+</script>

data/app/views/spree/admin/option_types/_option_value_fields.html.erb

@@ -31,6 +31,8 @@
     <td class="name"><%= f.select :name, ['post-paid', 'pre-paid'], { include_blank: true } , class: "form-control fullwidth", required: true %></td>
   <% when "delivery_option" %>
     <td class="name"><%= f.select :name, [:delivery, :pickup], { include_blank: true } , class: "form-control fullwidth", required: true %></td>
+  <% when "color" %>
+    <td class="name"><%= render partial: 'color_field', locals: { f: f } %></td>
   <% end %>
 
   <td class="presentation"><%= f.text_field :presentation, class: "form-control", required: true %></td>

data/app/views/spree/admin/variants/_color_field.html.erb

@@ -0,0 +1,28 @@
+<div class="input-group">
+  <div class="input-group-prepend">
+    <span class="input-group-text p-0 color-preview" id="color-preview-<%= f.object_name %>" style="background-color: <%= f.object.name || '#ffffff' %>; border: 1px solid #dee2e6; width: 45px;"></span>
+  </div>
+  <%= f.text_field :name, class: "form-control color-picker-input", placeholder: "eg. #FF5733", value: f.object.name, pattern: "^#[0-9A-Fa-f]{6}$", data: { target: "color-preview-#{f.object_name}" } %>
+  <div class="input-group-append">
+    <span class="input-group-text bg-light" style="cursor: pointer;" onclick="const input = this.closest('.input-group').querySelector('.color-picker-input'); input.value = ''; this.closest('.input-group').querySelector('.color-preview').style.backgroundColor = '#ffffff';" title="Click to clear">
+      <%= svg_icon name: "remove.svg", width: '14', height: '14' %>
+    </span>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const colorInput = document.querySelector('[data-target="color-preview-<%= f.object_name %>"]');
+    const colorPreview = document.getElementById('color-preview-<%= f.object_name %>');
+    
+    if (colorInput && colorPreview) {
+      colorInput.addEventListener('input', function() {
+        const color = this.value || '#ffffff';
+        // Validate hex color format
+        if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
+          colorPreview.style.backgroundColor = color;
+        }
+      });
+    }
+  });
+</script>