@@ -13,6 +13,7 @@ defmodule AlgoraWeb.Forms.ContractForm do
13
13
field :amount , USD
14
14
field :hourly_rate , USD
15
15
field :hours_per_week , :integer
16
+ field :marketplace? , :boolean , default: false
16
17
field :type , Ecto.Enum , values: [ :fixed , :hourly ] , default: :fixed
17
18
field :title , :string
18
19
field :description , :string
@@ -56,68 +57,160 @@ defmodule AlgoraWeb.Forms.ContractForm do
56
57
phx-change = "validate_contract_main "
57
58
>
58
59
< div class = "space-y-4 " >
60
+ <%= if contractor = get_field ( @ form . source , :contractor ) do %>
61
+ < . card >
62
+ < . card_content >
63
+ < div class = "flex items-center gap-4 " >
64
+ < . avatar class = "h-16 w-16 rounded-full " >
65
+ < . avatar_image src = { contractor . avatar_url } alt = { contractor . name } />
66
+ < . avatar_fallback class = "rounded-lg " >
67
+ { Algora.Util . initials ( contractor . name ) }
68
+ </ . avatar_fallback >
69
+ </ . avatar >
70
+
71
+ < div >
72
+ < div class = "flex items-center gap-1 text-base text-foreground " >
73
+ < span class = "font-semibold " > { contractor . name } </ span >
74
+ { Algora.Misc.CountryEmojis . get ( contractor . country ) }
75
+ </ div >
76
+
77
+ < div
78
+ :if = { contractor . provider_meta }
79
+ class = "pt-0.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground sm:text-sm "
80
+ >
81
+ < . link
82
+ :if = { contractor . provider_login }
83
+ href = { "https://github.com/#{ contractor . provider_login } " }
84
+ target = "_blank "
85
+ class = "flex items-center gap-1 hover:underline "
86
+ >
87
+ < . icon name = "github " class = "h-4 w-4 " />
88
+ < span class = "whitespace-nowrap " > { contractor . provider_login } </ span >
89
+ </ . link >
90
+ < . link
91
+ :if = { contractor . provider_meta [ "twitter_handle" ] }
92
+ href = { "https://x.com/#{ contractor . provider_meta [ "twitter_handle" ] } " }
93
+ target = "_blank "
94
+ class = "flex items-center gap-1 hover:underline "
95
+ >
96
+ < . icon name = "tabler-brand-x " class = "h-4 w-4 " />
97
+ < span class = "whitespace-nowrap " >
98
+ { contractor . provider_meta [ "twitter_handle" ] }
99
+ </ span >
100
+ </ . link >
101
+ < div :if = { contractor . provider_meta [ "location" ] } class = "flex items-center gap-1 " >
102
+ < . icon name = "tabler-map-pin " class = "h-4 w-4 " />
103
+ < span class = "whitespace-nowrap " >
104
+ { contractor . provider_meta [ "location" ] }
105
+ </ span >
106
+ </ div >
107
+ < div :if = { contractor . provider_meta [ "company" ] } class = "flex items-center gap-1 " >
108
+ < . icon name = "tabler-building " class = "h-4 w-4 " />
109
+ < span class = "whitespace-nowrap " >
110
+ { contractor . provider_meta [ "company" ] |> String . trim_leading ( "@" ) }
111
+ </ span >
112
+ </ div >
113
+ </ div >
114
+ </ div >
115
+ </ div >
116
+ < div class = "pt-6 flex flex-wrap gap-2 line-clamp-1 " >
117
+ <%= for tech <- contractor . tech_stack do %>
118
+ < div class = "rounded-lg bg-foreground/5 px-2 py-1 text-xs font-medium text-foreground ring-1 ring-inset ring-foreground/25 " >
119
+ { tech }
120
+ </ div >
121
+ <% end %>
122
+ </ div >
123
+ </ . card_content >
124
+ </ . card >
125
+ <% end %>
126
+
59
127
< . input label = "Title " field = { @ form [ :title ] } />
60
128
< . input label = "Description (optional) " field = { @ form [ :description ] } type = "textarea " />
61
- < div >
62
- < label class = "block text-sm font-semibold leading-6 text-foreground mb-2 " >
63
- Payment
64
- </ label >
65
- < div class = "grid grid-cols-2 gap-4 " phx-update = "ignore " id = "main-contract-form-tabs " >
66
- <%= for { label , value } <- type_options ( ) do %>
67
- < label class = { [
68
- "group relative flex cursor-pointer rounded-lg px-3 py-2 shadow-sm focus:outline-none" ,
69
- "border-2 bg-background transition-all duration-200 hover:border-primary hover:bg-primary/10" ,
70
- "border-border has-[:checked]:border-primary has-[:checked]:bg-primary/10"
71
- ] } >
72
- < . input
73
- id = { "main-contract-form-type-#{ value } " }
74
- type = "radio "
75
- field = { @ form [ :type ] }
76
- checked = { @ form [ :type ] . value == value }
77
- value = { value }
78
- class = "sr-only "
79
- phx-click = {
80
- % JS { }
81
- |> JS . hide ( to: "#main-contract-form [data-tab]:not([data-tab=#{ value } ])" )
82
- |> JS . show ( to: "#main-contract-form [data-tab=#{ value } ]" )
83
- }
84
- />
85
- < span class = "flex flex-1 items-center justify-between " >
86
- < span class = "text-sm font-medium " > { label } </ span >
87
- < . icon
88
- name = "tabler-check "
89
- class = "invisible size-5 text-primary group-has-[:checked]:visible "
129
+
130
+ <%= if not get_field ( @ form . source , :marketplace? ) do %>
131
+ < div >
132
+ < label class = "block text-sm font-semibold leading-6 text-foreground mb-2 " >
133
+ Payment
134
+ </ label >
135
+ < div class = "grid grid-cols-2 gap-4 " phx-update = "ignore " id = "main-contract-form-tabs " >
136
+ <%= for { label , value } <- type_options ( ) do %>
137
+ < label class = { [
138
+ "group relative flex cursor-pointer rounded-lg px-3 py-2 shadow-sm focus:outline-none" ,
139
+ "border-2 bg-background transition-all duration-200 hover:border-primary hover:bg-primary/10" ,
140
+ "border-border has-[:checked]:border-primary has-[:checked]:bg-primary/10"
141
+ ] } >
142
+ < . input
143
+ id = { "main-contract-form-type-#{ value } " }
144
+ type = "radio "
145
+ field = { @ form [ :type ] }
146
+ checked = { @ form [ :type ] . value == value }
147
+ value = { value }
148
+ class = "sr-only "
149
+ phx-click = {
150
+ % JS { }
151
+ |> JS . hide ( to: "#main-contract-form [data-tab]:not([data-tab=#{ value } ])" )
152
+ |> JS . show ( to: "#main-contract-form [data-tab=#{ value } ]" )
153
+ }
90
154
/>
91
- </ span >
92
- </ label >
93
- <% end %>
155
+ < span class = "flex flex-1 items-center justify-between " >
156
+ < span class = "text-sm font-medium " > { label } </ span >
157
+ < . icon
158
+ name = "tabler-check "
159
+ class = "invisible size-5 text-primary group-has-[:checked]:visible "
160
+ />
161
+ </ span >
162
+ </ label >
163
+ <% end %>
164
+ </ div >
94
165
</ div >
95
- </ div >
96
-
97
- < div data-tab = " fixed " >
98
- < . input label = " Amount " icon = " tabler-currency-dollar " field = { @ form [ :amount ] } / >
99
- </ div >
100
- < div data-tab = " hourly " class = "hidden " >
101
- < div class = " grid grid-cols-1 sm:grid-cols-2 gap-4 " >
102
- < . input label = "Hourly rate " icon = " tabler-currency-dollar " field = { @ form [ :hourly_rate ] } />
103
- < . input label = " Hours per week " field = { @ form [ :hours_per_week ] } / >
166
+
167
+ < div data-tab = " fixed " >
168
+ < . input label = " Amount " icon = " tabler-currency-dollar " field = { @ form [ :amount ] } / >
169
+ </ div >
170
+ < div data-tab = " hourly " class = " hidden " >
171
+ < div class = "grid grid-cols-1 sm:grid-cols-2 gap-4 " >
172
+ < . input label = " Hourly rate " icon = " tabler-currency-dollar " field = { @ form [ :hourly_rate ] } / >
173
+ < . input label = "Hours per week " field = { @ form [ :hours_per_week ] } />
174
+ </ div >
104
175
</ div >
105
- </ div >
106
-
107
- < div class = "relative " >
108
- < . input
109
- label = "GitHub handle "
110
- field = { @ form [ :contractor_handle ] }
111
- phx-debounce = "500 "
112
- class = "pl-10 "
113
- />
114
- < div class = "pointer-events-none absolute left-0 top-9 flex items-center justify-center pl-3 h-7 w-7 " >
115
- < . avatar :if = { get_field ( @ form . source , :contractor ) } class = "h-7 w-7 " >
116
- < . avatar_image src = { get_field ( @ form . source , :contractor ) . avatar_url } />
117
- </ . avatar >
118
- < . icon name = "github " class = "h-7 w-7 text-muted-foreground " />
176
+ < div class = "relative " >
177
+ < . input
178
+ label = "GitHub handle "
179
+ field = { @ form [ :contractor_handle ] }
180
+ phx-debounce = "500 "
181
+ class = "pl-10 "
182
+ />
183
+ < div class = "pointer-events-none absolute left-0 top-9 flex items-center justify-center pl-3 h-7 w-7 " >
184
+ < . avatar :if = { get_field ( @ form . source , :contractor ) } class = "h-7 w-7 " >
185
+ < . avatar_image src = { get_field ( @ form . source , :contractor ) . avatar_url } />
186
+ </ . avatar >
187
+ < . icon name = "github " class = "h-7 w-7 text-muted-foreground " />
188
+ </ div >
119
189
</ div >
120
- </ div >
190
+ <% end %>
191
+
192
+ <%= if get_field ( @ form . source , :marketplace? ) do %>
193
+ < . input type = "hidden " field = { @ form [ :amount ] } />
194
+ < . input type = "hidden " field = { @ form [ :hourly_rate ] } />
195
+ < . input type = "hidden " field = { @ form [ :hours_per_week ] } />
196
+ < . input type = "hidden " field = { @ form [ :contractor_handle ] } />
197
+
198
+ < dl class = "space-y-4 " >
199
+ < div class = "flex justify-between " >
200
+ < dt class = "text-foreground " >
201
+ Total amount for
202
+ < span class = "font-semibold " > { get_change ( @ form . source , :hours_per_week ) } </ span >
203
+ hours
204
+ < div class = "text-xs text-muted-foreground " >
205
+ (includes all platform and payment processing fees)
206
+ </ div >
207
+ </ dt >
208
+ < dd class = "font-display font-semibold tabular-nums text-lg " >
209
+ { Money . to_string! ( Money . mult! ( get_change ( @ form . source , :amount ) , Decimal . new ( "1.13" ) ) ) }
210
+ </ dd >
211
+ </ div >
212
+ </ dl >
213
+ <% end %>
121
214
</ div >
122
215
< div class = "pt-4 ml-auto flex gap-4 " >
123
216
< . button variant = "secondary " phx-click = "close_share_drawer " type = "button " >
0 commit comments