Add odyssey_product_picker component with JS hook

A reusable product picker with all/specific toggle and checkbox selection.
Includes OdysseyProductPicker JS hook for client-side form sync.

Author: coladarci

assets/js/odyssey.js

@@ -35,6 +35,37 @@ const OdysseyHooks = {
         })
       }
     }
+  },
+  OdysseyProductPicker: {
+    mounted () {
+      this.el.addEventListener('click', (event) => {
+        if (event.target.classList.contains('product-picker-checkbox')) {
+          event.stopPropagation()
+        }
+      })
+
+      this.el.addEventListener('change', (event) => {
+        if (event.target.classList.contains('product-picker-checkbox')) {
+          event.preventDefault()
+          event.stopPropagation()
+
+          const checkboxes = this.el.querySelectorAll('.product-picker-checkbox:checked')
+          const selectedIds = Array.from(checkboxes).map(cb => cb.dataset.productId)
+
+          const hiddenInput = this.el.querySelector('input[type="hidden"]')
+          hiddenInput.value = selectedIds.join(',')
+          hiddenInput.dispatchEvent(new Event('input', { bubbles: true }))
+        }
+      })
+
+      this.handleEvent('update-product-selection', ({ field_id, value }) => {
+        const hiddenInput = document.getElementById(field_id)
+        if (hiddenInput) {
+          hiddenInput.value = value
+          hiddenInput.dispatchEvent(new Event('input', { bubbles: true }))
+        }
+      })
+    }
   }
 }
 

lib/peek_app_sdk/ui/odyssey.ex

@@ -12,6 +12,7 @@ defmodule PeekAppSDK.UI.Odyssey do
   defdelegate odyssey_icon(assigns), to: PeekAppSDK.UI.Odyssey.Icon
   defdelegate odyssey_tabs(assigns), to: PeekAppSDK.UI.Odyssey.Tabs
   defdelegate odyssey_toggle_button(assigns), to: PeekAppSDK.UI.Odyssey.ToggleButton
+  defdelegate odyssey_product_picker(assigns), to: PeekAppSDK.UI.Odyssey.ProductPicker
   defdelegate odyssey_prefix_input(assigns), to: PeekAppSDK.UI.Odyssey.PrefixInput
   defdelegate odyssey_date_picker(assigns), to: PeekAppSDK.UI.Odyssey.DatePicker
   defdelegate odyssey_tooltip(assigns), to: PeekAppSDK.UI.Odyssey.Tooltip

lib/peek_app_sdk/ui/odyssey/product_picker.ex

@@ -0,0 +1,151 @@
+defmodule PeekAppSDK.UI.Odyssey.ProductPicker do
+  @moduledoc """
+  A live component for selecting products with a toggle between "All" and "Specific".
+  When "Specific" is selected, displays checkboxes for each product.
+
+  Integrates with forms via a hidden input field and a JS hook.
+
+  ## Examples
+
+      <.odyssey_product_picker
+        field={@form[:whitelisted_products]}
+        products={@products}
+        selected_ids={@selected_ids}
+      />
+  """
+
+  use Phoenix.LiveComponent
+  use Phoenix.Component
+
+  import PeekAppSDK.UI.Odyssey.ToggleButton, only: [odyssey_toggle_button: 1]
+
+  @impl true
+  def mount(socket) do
+    {:ok, socket}
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    socket = assign(socket, assigns)
+
+    socket =
+      socket
+      |> assign_new(:apply_to_mode, fn -> determine_mode(socket.assigns.selected_ids) end)
+
+    {:ok, socket}
+  end
+
+  defp determine_mode([]), do: "all"
+  defp determine_mode(_), do: "specific"
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div id={@id} phx-hook="OdysseyProductPicker" data-integration="product-picker">
+      <input
+        type="hidden"
+        name={@field.name}
+        value={encode_selected_products(@selected_ids)}
+        id={"#{@id}_hidden_field"}
+      />
+
+      <div class="space-y-4">
+        <.odyssey_toggle_button
+          options={[
+            %{value: "all", label: @all_label},
+            %{value: "specific", label: @specific_label}
+          ]}
+          selected={@apply_to_mode}
+          on_change="toggle_apply_to"
+          phx-target={@myself}
+          label={@label}
+          disabled={@disabled}
+        />
+
+        <div
+          :if={@apply_to_mode == "specific"}
+          class="space-y-2 pl-4 max-h-64 overflow-y-auto"
+          phx-update="ignore"
+          id={"#{@id}_checkboxes"}
+        >
+          <div :for={product <- @products} class="flex items-center gap-3">
+            <input
+              type="checkbox"
+              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}"}
+            >
+            </div>
+            <label for={"#{@id}_product_#{product.id}"} class="text-sm text-gray-700 cursor-pointer">
+              {product.name}
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    """
+  end
+
+  @impl true
+  def handle_event("toggle_apply_to", %{"value" => mode}, socket) do
+    selected_ids =
+      case mode do
+        "all" -> []
+        "specific" -> socket.assigns.selected_ids
+      end
+
+    socket =
+      socket
+      |> assign(:apply_to_mode, mode)
+      |> assign(:selected_ids, selected_ids)
+      |> push_event("update-product-selection", %{
+        field_id: "#{socket.assigns.id}_hidden_field",
+        value: encode_selected_products(selected_ids)
+      })
+
+    {:noreply, socket}
+  end
+
+  defp encode_selected_products([]), do: ""
+  defp encode_selected_products(ids), do: Enum.join(ids, ",")
+
+  @doc """
+  Renders a product picker component.
+
+  ## Examples
+
+      <.odyssey_product_picker
+        field={@form[:whitelisted_products]}
+        products={@products}
+        selected_ids={["prod_1", "prod_2"]}
+      />
+  """
+  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 :selected_ids, :list, default: [], doc: "list of pre-selected product IDs"
+  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"
+  attr :disabled, :boolean, default: false, doc: "whether the picker is disabled"
+
+  def odyssey_product_picker(assigns) do
+    assigns =
+      assigns
+      |> assign_new(:id, fn %{field: field} ->
+        "#{field.form.name}_#{field.field}_product_picker"
+      end)
+      |> assign_new(:label, fn -> nil end)
+      |> assign(:module, __MODULE__)
+
+    ~H"""
+    <.live_component {assigns} />
+    """
+  end
+end

test/peek_app_sdk/ui/odyssey/product_picker_test.exs

@@ -0,0 +1,182 @@
+defmodule PeekAppSDK.UI.Odyssey.ProductPickerTest do
+  use ExUnit.Case, async: true
+
+  import Phoenix.Component
+  import Phoenix.LiveViewTest
+  import PeekAppSDK.UI.Odyssey
+
+  describe "odyssey_product_picker/1" do
+    test "renders with products and no selection (all mode)" do
+      form = to_form(%{"whitelisted_products" => nil}, as: :campaign)
+
+      products = [
+        %{id: "p1", name: "Kayak Tour", color_hex: "#FF5733"},
+        %{id: "p2", name: "Snorkel Trip", color_hex: "#33FF57"}
+      ]
+
+      html =
+        render_component(
+          fn assigns ->
+            ~H"""
+            <.form for={@form}>
+              <.odyssey_product_picker field={@form[:whitelisted_products]} products={@products} />
+            </.form>
+            """
+          end,
+          %{form: form, products: products}
+        )
+
+      assert html =~ ~r/<input[^>]*type="hidden"[^>]*name="campaign\[whitelisted_products\]"/
+      assert html =~ "All Products"
+      assert html =~ "Specific Products"
+      refute html =~ "Kayak Tour"
+    end
+
+    test "renders with selected_ids in specific mode" do
+      form = to_form(%{"whitelisted_products" => nil}, as: :campaign)
+
+      products = [
+        %{id: "p1", name: "Kayak Tour", color_hex: "#FF5733"},
+        %{id: "p2", name: "Snorkel Trip", color_hex: "#33FF57"}
+      ]
+
+      html =
+        render_component(
+          fn assigns ->
+            ~H"""
+            <.odyssey_product_picker
+              field={@form[:whitelisted_products]}
+              products={@products}
+              selected_ids={["p1"]}
+            />
+            """
+          end,
+          %{form: form, products: products}
+        )
+
+      assert html =~ "Kayak Tour"
+      assert html =~ "Snorkel Trip"
+      assert html =~ ~r/value="p1"/
+      assert html =~ "#FF5733"
+      assert html =~ "#33FF57"
+    end
+
+    test "renders with custom toggle labels" do
+      form = to_form(%{"products" => nil}, as: :test)
+
+      html =
+        render_component(
+          fn assigns ->
+            ~H"""
+            <.odyssey_product_picker
+              field={@form[:products]}
+              products={[]}
+              all_label="All Events"
+              specific_label="Specific Events"
+            />
+            """
+          end,
+          %{form: form}
+        )
+
+      assert html =~ "All Events"
+      assert html =~ "Specific Events"
+    end
+
+    test "renders disabled state" do
+      form = to_form(%{"products" => nil}, as: :test)
+
+      products = [%{id: "p1", name: "Tour", color_hex: "#000"}]
+
+      html =
+        render_component(
+          fn assigns ->
+            ~H"""
+            <.odyssey_product_picker
+              field={@form[:products]}
+              products={@products}
+              selected_ids={["p1"]}
+              disabled={true}
+            />
+            """
+          end,
+          %{form: form, products: products}
+        )
+
+      assert html =~ "disabled"
+    end
+
+    test "generates unique component ID based on form field" do
+      form = to_form(%{"activity_ids" => nil}, as: :booking)
+
+      html =
+        render_component(
+          fn assigns ->
+            ~H"""
+            <.odyssey_product_picker field={@form[:activity_ids]} products={[]} />
+            """
+          end,
+          %{form: form}
+        )
+
+      assert html =~ ~r/id="booking_activity_ids_product_picker"/
+    end
+
+    test "renders with custom id" do
+      form = to_form(%{"products" => nil}, as: :test)
+
+      html =
+        render_component(
+          fn assigns ->
+            ~H"""
+            <.odyssey_product_picker field={@form[:products]} products={[]} id="my-custom-picker" />
+            """
+          end,
+          %{form: form}
+        )
+
+      assert html =~ ~r/id="my-custom-picker"/
+    end
+
+    test "renders with label" do
+      form = to_form(%{"products" => nil}, as: :test)
+
+      html =
+        render_component(
+          fn assigns ->
+            ~H"""
+            <.odyssey_product_picker field={@form[:products]} products={[]} label="Apply Products" />
+            """
+          end,
+          %{form: form}
+        )
+
+      assert html =~ "Apply Products"
+    end
+
+    test "encodes multiple selected_ids as comma-separated value" do
+      form = to_form(%{"products" => nil}, as: :test)
+
+      products = [
+        %{id: "p1", name: "Tour A", color_hex: "#111"},
+        %{id: "p2", name: "Tour B", color_hex: "#222"}
+      ]
+
+      html =
+        render_component(
+          fn assigns ->
+            ~H"""
+            <.odyssey_product_picker
+              field={@form[:products]}
+              products={@products}
+              selected_ids={["p1", "p2"]}
+            />
+            """
+          end,
+          %{form: form, products: products}
+        )
+
+      assert html =~ ~r/value="p1,p2"/
+    end
+  end
+end