Allow passing in keys of values

Author: coladarci

lib/peek_app_sdk/ui/odyssey/product_picker.ex

@@ -107,21 +107,22 @@ defmodule PeekAppSDK.UI.Odyssey.ProductPicker do
           id={"#{@id}_checkboxes"}
         >
           <div :for={product <- @products} class="flex items-center gap-3">
+            <% product_id = product[@id_key] %>
             <input
               type="checkbox"
-              id={"#{@id}_product_#{product.id}"}
-              checked={product.id in @selected_ids}
-              data-product-id={product.id}
+              id={"#{@id}_product_#{product_id}"}
+              checked={product_id in @selected_ids}
+              data-product-id={product_id}
               disabled={@disabled}
               class="checkbox checkbox-sm product-picker-checkbox"
             />
             <div
               class="w-3 h-3 rounded-sm flex-shrink-0"
-              style={"background-color: #{product.color_hex}"}
+              style={"background-color: #{product[@color_key] || "#888888"}"}
             >
             </div>
-            <label for={"#{@id}_product_#{product.id}"} class="text-sm text-gray-700 cursor-pointer">
-              {product.name}
+            <label for={"#{@id}_product_#{product_id}"} class="text-sm text-gray-700 cursor-pointer">
+              {product[@name_key]}
             </label>
           </div>
         </div>
@@ -174,10 +175,14 @@ defmodule PeekAppSDK.UI.Odyssey.ProductPicker do
   """
   attr :field, :any, required: true, doc: "a Phoenix.HTML.FormField struct"
   attr :id, :string, doc: "component id, defaults to form_field_product_picker"
-  attr :products, :list, required: true, doc: "list of %{id, name, color_hex} maps"
+
+  attr :products, :list, required: true, doc: "list of product maps"
 
   attr :selected_ids, :list, doc: "list of pre-selected product IDs (auto-extracted from field value when omitted)"
 
+  attr :id_key, :atom, default: :id, doc: "key to read product ID from each product map"
+  attr :name_key, :atom, default: :name, doc: "key to read product name from each product map"
+  attr :color_key, :atom, default: :color_hex, doc: "key to read product color hex from each product map"
   attr :all_label, :string, default: "All Products", doc: "label for the 'all' toggle option"
   attr :specific_label, :string, default: "Specific Products", doc: "label for the 'specific' toggle option"
   attr :label, :string, required: false, doc: "label for the toggle button"

test/peek_app_sdk/ui/odyssey/product_picker_test.exs

@@ -247,6 +247,66 @@ defmodule PeekAppSDK.UI.Odyssey.ProductPickerTest do
     end
   end
 
+  describe "custom key attrs" do
+    test "uses custom color_key" do
+      form = to_form(%{"p" => nil}, as: :t)
+      products = [%{id: "1", name: "A", hex: "#AA0000"}]
+
+      html =
+        render_component(
+          fn assigns ->
+            ~H"""
+            <.odyssey_product_picker field={@form[:p]} products={@products} selected_ids={["1"]} color_key={:hex} />
+            """
+          end,
+          %{form: form, products: products}
+        )
+
+      assert html =~ "background-color: #AA0000"
+    end
+
+    test "uses custom id_key and name_key" do
+      form = to_form(%{"p" => nil}, as: :t)
+      products = [%{product_id: "x1", title: "Kayak", color_hex: "#000"}]
+
+      html =
+        render_component(
+          fn assigns ->
+            ~H"""
+            <.odyssey_product_picker
+              field={@form[:p]}
+              products={@products}
+              selected_ids={["x1"]}
+              id_key={:product_id}
+              name_key={:title}
+            />
+            """
+          end,
+          %{form: form, products: products}
+        )
+
+      assert html =~ "Kayak"
+      assert html =~ "data-product-id=\"x1\""
+    end
+
+    test "falls back to #888888 when color key is missing" do
+      form = to_form(%{"p" => nil}, as: :t)
+      products = [%{id: "1", name: "A"}]
+
+      html =
+        render_component(
+          fn assigns ->
+            ~H"""
+            <.odyssey_product_picker field={@form[:p]} products={@products} selected_ids={["1"]} />
+            """
+          end,
+          %{form: form, products: products}
+        )
+
+      assert html =~ "background-color: #888888"
+    end
+  end
+
   describe "extract_ids_from_field/1" do
     alias PeekAppSDK.UI.Odyssey.ProductPicker