Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: scanner redeems page #508

Merged
merged 7 commits into from
Feb 9, 2025
Merged

feat: scanner redeems page #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4b4bc60
feat: scanner redeems page
joaodiaslobo Feb 9, 2025
55e9615
fix: update stream
joaodiaslobo Feb 9, 2025
892b98b
feat: protect event
joaodiaslobo Feb 9, 2025
5b3e432
fix: pages ui
joaodiaslobo Feb 9, 2025
d368835
feat: improve purchases page
joaodiaslobo Feb 9, 2025
9e2b2bb
fix: ci
joaodiaslobo Feb 9, 2025
a9b2623
fix: button roundness
joaodiaslobo Feb 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 106 additions & 0 deletions lib/safira_web/components/tabs.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
defmodule SafiraWeb.Components.Tabs do
@moduledoc false
use SafiraWeb, :component

attr :class, :string, default: "", doc: "The class to apply to the tabs"
attr :underline, :boolean, default: true, doc: "Whether to show a bottom border on the tabs"
attr :rest, :global
slot :inner_block, required: false

def tabs(assigns) do
~H"""
<div
{@rest}
class={[
"flex gap-x-8 gap-y-2",
@underline && "border-b border-lightShade dark:border-darkShade",
@class
]}
aria-label="Tabs"
>
<%= render_slot(@inner_block) %>
</div>
"""
end

attr :class, :string, default: "", doc: "The class to apply to the tab"
attr :label, :string, default: nil, doc: "The label for the tab"
attr :number, :integer, default: nil, doc: "Displays a number next to the tab label"
attr :underline, :boolean, default: true, doc: "Whether to show a bottom border on the tab"
attr :active, :boolean, default: false, doc: "Whether the tab is active"
attr :disabled, :boolean, default: false, doc: "Whether the tab is disabled"
attr :rest, :global
slot :inner_block, required: false

def tab(assigns) do
~H"""
<button class={tab_class(@active, @underline) ++ [@class]} disabled={@disabled} {@rest}>
<%= if @number do %>
<%= render_slot(@inner_block) || @label %>
<span class={number_class(@active, @underline)}>
<%= @number %>
</span>
<% else %>
<%= render_slot(@inner_block) || @label %>
<% end %>
</button>
"""
end

defp tab_class(active, false) do
base_classes =
"flex items-center px-3 py-2 text-sm font-medium rounded-md whitespace-nowrap w-full justify-center"

active_classes =
if active,
do: "text-dark dark:text-light dark:bg-light/5",
else: "text-zinc-500 hover:text-zinc-600 dark:text-darkMuted"

[base_classes, active_classes]
end

defp tab_class(active, underline) do
base_classes =
"flex items-center px-3 py-3 text-sm font-medium border-b-2 whitespace-nowrap w-full justify-center"

active_classes =
if active,
do: "border-dark text-dark dark:text-light dark:border-light",
else:
"text-zinc-500 border-transparent hover:border-zinc-300 hover:text-zinc-600 dark:text-darkMuted"

underline_classes =
if active && underline,
do: "",
else: "hover:border-zinc-300"

[base_classes, active_classes, underline_classes]
end

defp number_class(active, true) do
base_classes = "whitespace-nowrap ml-2 py-0.5 px-2 rounded-full text-xs font-normal"

active_classes =
if active,
do: "text-white bg-orange-600",
else: "text-white bg-zinc-500"

underline_classes =
if active,
do: "bg-orange-100 text-orange-600",
else: "text-zinc-500 bg-zinc-100"

[base_classes, active_classes, underline_classes]
end

defp number_class(active, false) do
base_classes = "whitespace-nowrap ml-2 py-0.5 px-2 rounded-full text-xs font-normal"

active_classes =
if active,
do: "text-white bg-primary-600",
else: "text-white bg-zinc-500"

[base_classes, active_classes]
end
end
75 changes: 46 additions & 29 deletions lib/safira_web/live/backoffice/scanner_live/badge_live/index.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,56 @@ defmodule SafiraWeb.Backoffice.ScannerLive.BadgeLive.Index do

alias Safira.{Accounts, Contest}

import SafiraWeb.Components.Tabs

@impl true
def render(assigns) do
~H"""
<div>
<.page>
<div class="absolute flex justify-center inset-0 z-10 top-20 select-none">
<span class="bg-dark text-light dark:bg-light dark:text-dark py-4 px-6 rounded-full font-semibold text-xl h-min">
<%= gettext("Giving badge %{badge_name}", badge_name: @badge.name) %>
</span>
</div>
<div
id="qr-scanner"
phx-hook="QrScanner"
data-ask_perm="permission-button"
data-open_on_mount
data-on_start="document.getElementById('scan-info').style.display = 'none'"
data-on_success="scan"
class="relative"
>
</div>
<div id="scan-info" class="flex flex-col items-center gap-8 text-center py-40">
<p id="loadingMessage">
<%= gettext("Unable to access camera.") %>
<%= gettext(
"Make sure you allow the use of your camera on this browser and that it isn't being used elsewhere."
) %>
</p>
<.button id="permission-button" type="button">
<%= gettext("Request Permission") %>
</.button>
</div>
</.page>

<div class="-translate-y-4 sm:translate-y-0">
<.tabs class="sm:hidden mb-4">
<.link patch={~p"/dashboard/scanner"} class="w-full">
<.tab active class="gap-2">
<.icon name="hero-check-badge" />
<%= gettext("Badges") %>
</.tab>
</.link>
<.link patch={~p"/dashboard/scanner/redeems"} class="w-full">
<.tab class="gap-2">
<.icon name="hero-gift" />
<%= gettext("Redeems") %>
</.tab>
</.link>
</.tabs>
<.page>
<div class="absolute flex justify-center inset-0 z-10 top-20 select-none">
<span class="bg-dark text-light dark:bg-light dark:text-dark py-4 px-6 rounded-full font-semibold text-xl h-min">
<%= gettext("Giving badge %{badge_name}", badge_name: @badge.name) %>
</span>
</div>
<div
id="qr-scanner"
phx-hook="QrScanner"
data-ask_perm="permission-button"
data-open_on_mount
data-on_start="document.getElementById('scan-info').style.display = 'none'"
data-on_success="scan"
class="relative"
>
</div>
<div id="scan-info" class="flex flex-col items-center gap-8 text-center py-40">
<p id="loadingMessage">
<%= gettext("Unable to access camera.") %>
<%= gettext(
"Make sure you allow the use of your camera on this browser and that it isn't being used elsewhere."
) %>
</p>
<.button id="permission-button" type="button">
<%= gettext("Request Permission") %>
</.button>
</div>
</.page>
</div>
<.modal
:if={@modal_data != nil}
id="modal-scan-error"
Expand Down
2 changes: 1 addition & 1 deletion lib/safira_web/live/backoffice/scanner_live/index.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ defmodule SafiraWeb.Backoffice.ScannerLive.Index do

alias Safira.Contest

import SafiraWeb.Components.{Badge, TableSearch}
import SafiraWeb.Components.{Badge, TableSearch, Tabs}

@impl true
def mount(_params, _session, socket) do
Expand Down
68 changes: 44 additions & 24 deletions lib/safira_web/live/backoffice/scanner_live/index.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,46 @@
<.page title={gettext("Give Badge")}>
<:actions>
<div class="flex flex-row gap-4 justify-center items-center">
<.table_search
id="badge-table-name-search"
params={@params}
field={:name}
path={~p"/dashboard/scanner"}
placeholder={gettext("Search for badges")}
/>
</div>
</:actions>
<div class="flex w-full items-center justify-center flex-col mt-6">
<div
id="badges-grid"
phx-update="stream"
class="grid grid-cols-1 gap-x-10 gap-y-5 xs:grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
>
<%= for {id, badge} <- @streams.badges do %>
<.link id={id} patch={~p"/dashboard/scanner/badge/#{badge.id}/give"}>
<.badge id={badge.id} badge={badge} hover_zoom />
<div class="-translate-y-4 sm:translate-y-0">
<.tabs class="sm:hidden mb-4">
<.tab active class="gap-2">
<.icon name="hero-check-badge" />
<%= gettext("Badges") %>
</.tab>
<.link patch={~p"/dashboard/scanner/redeems"} class="w-full">
<.tab class="gap-2">
<.icon name="hero-gift" />
<%= gettext("Redeems") %>
</.tab>
</.link>
</.tabs>
<.page title={gettext("Give Badge")}>
<:actions>
<div class="flex flex-row gap-4 justify-center items-center">
<.link patch={~p"/dashboard/scanner/redeems"} class="hidden sm:block w-full">
<.button class="flex gap-2">
<.icon name="hero-gift" />
<%= gettext("Redeems") %>
</.button>
</.link>
<% end %>
<.table_search
id="badge-table-name-search"
params={@params}
field={:name}
path={~p"/dashboard/scanner"}
placeholder={gettext("Search for badges")}
/>
</div>
</:actions>
<div class="flex w-full items-center justify-center flex-col mt-6">
<div
id="badges-grid"
phx-update="stream"
class="grid grid-cols-1 gap-x-10 gap-y-5 xs:grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
>
<%= for {id, badge} <- @streams.badges do %>
<.link id={id} patch={~p"/dashboard/scanner/badge/#{badge.id}/give"}>
<.badge id={badge.id} badge={badge} hover_zoom />
</.link>
<% end %>
</div>
</div>
</div>
</.page>
</.page>
</div>
110 changes: 110 additions & 0 deletions lib/safira_web/live/backoffice/scanner_live/inventory_live/index.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
defmodule SafiraWeb.Backoffice.ScannerLive.InventoryLive.Index do
use SafiraWeb, :backoffice_view

alias Safira.Accounts

import SafiraWeb.Components.Tabs

@impl true
def render(assigns) do
~H"""
<div>
<div class="-translate-y-4 sm:translate-y-0">
<.tabs class="sm:hidden mb-4">
<.link patch={~p"/dashboard/scanner"} class="w-full">
<.tab class="gap-2">
<.icon name="hero-check-badge" />
<%= gettext("Badges") %>
</.tab>
</.link>
<.tab active class="gap-2">
<.icon name="hero-gift" />
<%= gettext("Redeems") %>
</.tab>
</.tabs>
<.page title={gettext("Attendee Redeems")}>
<div
id="qr-scanner"
phx-hook="QrScanner"
data-ask_perm="permission-button"
data-open_on_mount
data-on_start="document.getElementById('scan-info').style.display = 'none'"
data-on_success="scan"
class="relative"
>
</div>
<div id="scan-info" class="flex flex-col items-center gap-8 text-center py-40">
<p id="loadingMessage">
<%= gettext("Unable to access camera.") %>
<%= gettext(
"Make sure you allow the use of your camera on this browser and that it isn't being used elsewhere."
) %>
</p>
<.button id="permission-button" type="button">
<%= gettext("Request Permission") %>
</.button>
</div>
</.page>
</div>
<.modal
:if={@modal_data != nil}
id="modal-scan-error"
show
on_cancel={JS.push("close-modal")}
wrapper_class="px-4"
>
<div class="flex flex-row gap-4 items-center">
<.icon name="hero-x-circle" class="text-red-500 w-8" />
<p>
<%= if @modal_data do %>
<%= error_message(@modal_data) %>
<% end %>
</p>
</div>
</.modal>
</div>
"""
end

@impl true
def mount(_params, _session, socket) do
{:ok,
socket
|> assign(:current_page, :scanner)
|> assign(:modal_data, nil)}
end

@impl true
def handle_event("scan", data, socket) do
case safely_extract_id_from_url(data) do
{:ok, id} -> check_credential(id, socket)
{:error, _} -> {:noreply, assign(socket, :modal_data, :invalid)}
end
end

defp check_credential(id, socket) do
if Accounts.credential_exists?(id) do
handle_attendee_lookup(id, socket)
else
{:noreply, assign(socket, :modal_data, :not_found)}
end
end

defp handle_attendee_lookup(id, socket) do
case Accounts.get_attendee_from_credential(id) do
nil ->
{:noreply, assign(socket, :modal_data, :not_linked)}

attendee ->
{:noreply, push_navigate(socket, to: ~p"/dashboard/scanner/redeems/#{attendee.id}")}
end
end

defp error_message(:not_found),
do: gettext("This credential is not registered in the event's system! (404)")

defp error_message(:not_linked),
do: gettext("This credential is not linked to any attendee! (400)")

defp error_message(:invalid), do: gettext("Not a valid credential! (400)")
end
Loading