| 1 | 'use client' |
| 2 | |
| 3 | import { useRouter } from '@bprogress/next/app' |
| 4 | import { zodResolver } |
| 5 | import { Mail } |
| 6 | import { useAction } |
| 7 | import { Controller, useForm |
| 8 | import { toast } |
| 9 | import { z } |
| 10 | import { Button } |
| 11 | import { Checkbox } |
| 12 | import { |
| 13 | Dialog, |
| 14 | DialogContent, |
| 15 | DialogDescription, |
| 16 | DialogHeader, |
| 17 | DialogTitle, |
| 18 | } from '@/components/ui/dialog' |
| 19 | import { Input } |
| 20 | import { Label } |
| 21 | import { RateInput } |
| 22 | import { |
| 23 | Select, |
| 24 | SelectContent, |
| 25 | SelectItem, |
| 26 | SelectTrigger, |
| 27 | SelectValue, |
| 28 | } from '@/components/ui/select' |
| 29 | import { analyticsService } |
| 30 | import { inviteOrgMemberAction } |
| 31 | |
| 32 | const formSchema = z |
| 33 | email: z.email |
| 34 | role: z.enum |
| 35 | rate: z.number |
| 36 | currency: z.string |
| 37 | setAsOrgDefault: z.boolean |
| 38 | }) |
| 39 | |
| 40 | type FormValues |
| 41 | |
| 42 | const defaultValues: FormValues |
| 43 | email: '', |
| 44 | role: 'member', |
| 45 | rate: undefined, |
| 46 | currency: '', |
| 47 | setAsOrgDefault: false, |
| 48 | } |
| 49 | |
| 50 | export default function InviteDialog |
| 51 | open, |
| 52 | onOpenChange, |
| 53 | organizationId, |
| 54 | defaultMemberRate, |
| 55 | defaultCurrency, |
| 56 | }: { |
| 57 | open: boolean |
| 58 | onOpenChange: (open |
| 59 | organizationId: string |
| 60 | defaultMemberRate: number |
| 61 | defaultCurrency: string |
| 62 | }) { |
| 63 | const router = |
| 64 | const form = |
| 65 | resolver: zodResolver(formSchema |
| 66 | defaultValues, |
| 67 | }) |
| 68 | |
| 69 | const { execute, |
| 70 | onSuccess({ input |
| 71 | toast.success(`Invitation sent to |
| 72 | form.reset(defaultValues |
| 73 | onOpenChange(false) |
| 74 | router.refresh() |
| 75 | analyticsService.track('member_invited |
| 76 | }, |
| 77 | onError({ error |
| 78 | toast.error(error |
| 79 | }, |
| 80 | }) |
| 81 | |
| 82 | const email = |
| 83 | const rate = |
| 84 | const currency = |
| 85 | |
| 86 | const handleInvite = |
| 87 | const resolvedCurrency = |
| 88 | |
| 89 | let finalRate = |
| 90 | let finalCurrency = |
| 91 | |
| 92 | if (finalRate === |
| 93 | if (defaultMemberRate > |
| 94 | finalRate = finalRate |
| 95 | finalCurrency = finalCurrency |
| 96 | } else { |
| 97 | toast.error( |
| 98 | 'No base rate set. Enter a rate or set an workspace wide default in Settings.' |
| 99 | ) |
| 100 | return |
| 101 | } |
| 102 | } |
| 103 | |
| 104 | execute({ |
| 105 | organizationId, |
| 106 | email: data.email |
| 107 | role: data.role |
| 108 | payRate: finalRate, |
| 109 | payCurrency: finalCurrency, |
| 110 | setAsOrgDefault: data.setAsOrgDefault |
| 111 | }) |
| 112 | } |
| 113 | |
| 114 | return ( |
| 115 | <Dialog onOpenChange={ |
| 116 | <DialogContent className=' |
| 117 | <DialogHeader> |
| 118 | <DialogTitle>Invite Member</DialogTitle |
| 119 | <DialogDescription> |
| 120 | Send an invitation email. They'll join the workspace once they |
| 121 | accept. |
| 122 | </DialogDescription> |
| 123 | </DialogHeader> |
| 124 | <form className='space-y-4 |
| 125 | <Controller |
| 126 | control={form.control |
| 127 | name='email' |
| 128 | render={({ field |
| 129 | <div className='space-y-2 |
| 130 | <Label>Email address</Label |
| 131 | <Input |
| 132 | {...field} |
| 133 | autoFocus |
| 134 | placeholder='name@example.com' |
| 135 | type='email' |
| 136 | /> |
| 137 | </div> |
| 138 | )} |
| 139 | /> |
| 140 | <Controller |
| 141 | control={form.control |
| 142 | name='role' |
| 143 | render={({ field |
| 144 | <div className='space-y-2 |
| 145 | <Label>Role</Label |
| 146 | <Select onValueChange={ |
| 147 | <SelectTrigger> |
| 148 | <SelectValue /> |
| 149 | </SelectTrigger> |
| 150 | <SelectContent> |
| 151 | <SelectItem value=' |
| 152 | <SelectItem value=' |
| 153 | </SelectContent> |
| 154 | </Select> |
| 155 | </div> |
| 156 | )} |
| 157 | /> |
| 158 | <div className='space-y-2 |
| 159 | <Label> |
| 160 | Hourly rate |
| 161 | {defaultMemberRate > 0 |
| 162 | <span className='ml-1 font-normal text-muted-foreground |
| 163 | (default: {(defaultMemberRate / 100 |
| 164 | </span> |
| 165 | )} |
| 166 | </Label> |
| 167 | <RateInput |
| 168 | allowEmpty |
| 169 | currency={currency || |
| 170 | frequencies={['hourly' |
| 171 | frequency='hourly' |
| 172 | onCurrencyChange={(c) |
| 173 | onFrequencyChange={() => |
| 174 | // hourly-only in this flow |
| 175 | }} |
| 176 | onValueChange={(v) |
| 177 | placeholder={ |
| 178 | defaultMemberRate > 0 |
| 179 | ? (defaultMemberRate / |
| 180 | : '0.00' |
| 181 | } |
| 182 | useFrequencyShorthand |
| 183 | value={rate} |
| 184 | /> |
| 185 | </div> |
| 186 | <Controller |
| 187 | control={form.control |
| 188 | name='setAsOrgDefault' |
| 189 | render={({ field |
| 190 | <div className='flex items-center gap-2 |
| 191 | <Checkbox |
| 192 | checked={field.value |
| 193 | onCheckedChange={(checked) |
| 194 | field.onChange(checked |
| 195 | } |
| 196 | /> |
| 197 | <Label className=' |
| 198 | Set this as the workspace wide default rate |
| 199 | </Label> |
| 200 | </div> |
| 201 | )} |
| 202 | /> |
| 203 | <div className='flex justify-end gap-2 |
| 204 | <Button |
| 205 | onClick={() => |
| 206 | type='button' |
| 207 | variant='outline' |
| 208 | > |
| 209 | Cancel |
| 210 | </Button> |
| 211 | <Button disabled={ |
| 212 | <Mail className=' |
| 213 | Send Invite |
| 214 | </Button> |
| 215 | </div> |
| 216 | </form> |
| 217 | </DialogContent> |
| 218 | </Dialog> |
| 219 | ) |
| 220 | } |