gallium/lib/gallium_web/live/ticketing_purchase/steps/confirmation.html.heex at 5c1c45f64b810152644abf8607b6f3debb229ef9 · cesium/gallium · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<div class="flex flex-col items-center max-w-lg mx-auto my-8 px-4">
  <div class={[
    "rounded-full p-5 mb-4 shadow-sm",
    case @payment_status do
      :paid -> "bg-olive text-olive-600"
      :blocked -> "bg-red-100 text-red-600"
      _ -> "bg-amber-100 text-amber-600"
    end
  ]}>
    <.icon
      name={
        case @payment_status do
          :paid -> "hero-check-circle"
          :blocked -> "hero-no-symbol"
          _ -> "hero-clock"
        end
      }
      class={
        case @payment_status do
          :paid -> "size-10 text-white"
          :blocked -> "size-10 text-red-600"
          _ -> "size-10 text-amber-600"
        end
      }
    />
  </div>

  <h1 class={[
    "text-5xl font-amarante mb-4 text-center uppercase",
    case @payment_status do
      :paid -> "text-olive"
      :blocked -> "text-red-600"
      _ -> "text-amber-600"
    end
  ]}>
    <%= case @payment_status do %>
      <% :paid -> %>
        Bilhete Confirmado!
      <% :blocked -> %>
        Pagamento Bloqueado
      <% _ -> %>
        Pagamento Pendente
    <% end %>
  </h1>

  <p class="font-cormorant text-gray-600 text-center mb-8">
    <%= case @payment_status do %>
      <% :paid -> %>
        O teu pagamento foi recebido. Até já na Quinta Vinha do Cabo!
      <% :blocked -> %>
        O limite de 100 lugares pagos já foi atingido, incluindo acompanhantes. Contacta a organização para regularizar a situação.
      <% _ -> %>
        A tua reserva foi registada. Efetua o pagamento via MBWay para confirmares o teu bilhete.
    <% end %>
  </p>

  <div class="w-full border-2 border-olive-200 p-8 bg-white rounded-box relative mb-8">
    <h2 class="font-amarante text-olive uppercase text-xl mb-6">Detalhes da Reserva</h2>

    <div class="mb-5 flex flex-row gap-3 justify-between">
      <div>
        <p class="text-gray-600 text-xs font-cormorant uppercase mb-1">Participante</p>
        <p class="text-gray-800 font-cormorant text-lg leading-none mb-1">
          {@form_data.data.full_name}
        </p>
        <p class="text-gray-600 font-cormorant text-sm">
          {@current_scope.user.email}
        </p>
      </div>

      <%= if @has_accompany? and @form_data.data.accompany do %>
        <div>
          <p class="text-gray-600 text-xs font-cormorant uppercase mb-1">Acompanhante</p>
          <p class="text-gray-800 font-cormorant text-lg leading-none mb-1">
            {@form_data.data.accompany.full_name}
          </p>
          <p class="text-gray-600 font-cormorant text-sm">
            {@form_data.data.accompany.email}
          </p>
        </div>
      <% end %>
    </div>

    <hr class="w-full border-t border-gray-300 my-4" />

    <div class="mb-5">
      <p class="text-gray-600 text-xs font-cormorant uppercase mb-2">Evento</p>
      <div class="flex items-center gap-2 font-cormorant mb-2">
        <span>5 de Junho, 2026</span>
      </div>
      <div class="flex items-center gap-2 font-cormorant">
        <span>Quinta Vinha do Cabo, Guimarães</span>
      </div>
    </div>

    <hr class="w-full border-t border-gray-300 my-4" />

    <div class="mb-5">
      <p class="text-gray-600 text-xs font-cormorant uppercase mb-2">Bilhetes</p>
      <div class="flex justify-between font-cormorant text-base">
        <span>
          {if @has_accompany?, do: "2", else: "1"}
          {if @form_data.data.is_cesium_member, do: " x Bilhete Sócio", else: " x Bilhete Normal"}
        </span>
      </div>
    </div>

    <hr class="w-full border-t border-gray-300 my-4" />

    <div class="flex justify-between items-end mt-2">
      <div>
        <p class="text-gray-600 text-xs font-cormorant uppercase mb-1">Total a Pagar</p>
        <p class="font-cormorant text-xs">
          {if @has_accompany?, do: "2 bilhetes", else: "1 bilhete"}
        </p>
      </div>
      <span class="font-amarante text-olive text-3xl">
        {@amount_to_pay} €
      </span>
    </div>
  </div>

  <div class="flex flex-col sm:flex-row gap-4 w-full sm:justify-center">
    <div>
      <.primary_button
        type="button"
        phx-click="to_home"
        text="Voltar ao Início"
        color={:blue}
        icon="hero-home"
        class="font-cormorant"
        iconpos={:right}
      />
    </div>
  </div>

  <p class="font-cormorant text-gray-500 text-xs sm:text-sm mt-6 text-center">
    Efetua o pagamento via MBWay para o número indicado. O teu bilhete será confirmado após validação do pagamento.
  </p>
</div>