Add non-custom currencies per group

src/components/currency-selector.tsx

@@ -0,0 +1,198 @@
+import { ChevronDown, Loader2 } from 'lucide-react'
+
+import { Button, ButtonProps } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from '@/components/ui/command'
+import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { Currency } from '@/lib/currency'
+import { useMediaQuery } from '@/lib/hooks'
+import { useTranslations } from 'next-intl'
+import { forwardRef, useEffect, useState } from 'react'
+
+type Props = {
+  currencies: Currency[]
+  onValueChange: (currencyCode: Currency['code']) => void
+  /** Currency code to be selected by default. Overwriting this value will update current selection, too. */
+  defaultValue: Currency['code']
+  isLoading: boolean
+}
+
+export function CurrencySelector({
+  currencies,
+  onValueChange,
+  defaultValue,
+  isLoading,
+}: Props) {
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState<string>(defaultValue)
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+
+  // allow overwriting currently selected currency from outside
+  useEffect(() => {
+    setValue(defaultValue)
+    onValueChange(defaultValue)
+  }, [defaultValue])
+
+  const selectedCurrency =
+    currencies.find((currency) => (currency.code ?? '') === value) ??
+    currencies[0]
+
+  if (isDesktop) {
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <CurrencyButton
+            currency={selectedCurrency}
+            open={open}
+            isLoading={isLoading}
+          />
+        </PopoverTrigger>
+        <PopoverContent className="p-0" align="start">
+          <CurrencyCommand
+            currencies={currencies}
+            onValueChange={(code) => {
+              setValue(code)
+              onValueChange(code)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    )
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>
+        <CurrencyButton
+          currency={selectedCurrency}
+          open={open}
+          isLoading={isLoading}
+        />
+      </DrawerTrigger>
+      <DrawerContent className="p-0">
+        <CurrencyCommand
+          currencies={currencies}
+          onValueChange={(id) => {
+            setValue(id)
+            onValueChange(id)
+            setOpen(false)
+          }}
+        />
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+function CurrencyCommand({
+  currencies,
+  onValueChange,
+}: {
+  currencies: Currency[]
+  onValueChange: (currencyId: Currency['code']) => void
+}) {
+  const currencyGroup = (currency: Currency) => {
+    switch (currency.code) {
+      case 'USD':
+      case 'EUR':
+      case 'JPY':
+      case 'GBP':
+      case 'CNY':
+        return 'common'
+      default:
+        if (currency.code === '') return 'custom'
+        return 'other'
+    }
+  }
+  const t = useTranslations('Currencies')
+  const currenciesByGroup = currencies.reduce<Record<string, Currency[]>>(
+    (acc, currency) => ({
+      ...acc,
+      [currencyGroup(currency)]: (acc[currencyGroup(currency)] ?? []).concat([
+        currency,
+      ]),
+    }),
+    {},
+  )
+
+  return (
+    <Command>
+      <CommandInput placeholder={t('search')} className="text-base" />
+      <CommandEmpty>{t('noCurrency')}</CommandEmpty>
+      <div className="w-full max-h-[300px] overflow-y-auto">
+        {Object.entries(currenciesByGroup).map(
+          ([group, groupCurrencies], index) => (
+            <CommandGroup key={index} heading={t(`${group}.heading`)}>
+              {groupCurrencies.map((currency) => (
+                <CommandItem
+                  key={currency.code}
+                  value={`${currency.code} ${currency.name} ${currency.symbol}`}
+                  onSelect={(currentValue) => {
+                    onValueChange(currency.code)
+                  }}
+                >
+                  <CurrencyLabel currency={currency} />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          ),
+        )}
+      </div>
+    </Command>
+  )
+}
+
+type CurrencyButtonProps = {
+  currency: Currency
+  open: boolean
+  isLoading: boolean
+}
+const CurrencyButton = forwardRef<HTMLButtonElement, CurrencyButtonProps>(
+  (
+    { currency, open, isLoading, ...props }: ButtonProps & CurrencyButtonProps,
+    ref,
+  ) => {
+    const iconClassName = 'ml-2 h-4 w-4 shrink-0 opacity-50'
+    return (
+      <Button
+        variant="outline"
+        role="combobox"
+        aria-expanded={open}
+        className="flex w-full justify-between"
+        ref={ref}
+        {...props}
+      >
+        <CurrencyLabel currency={currency} />
+        {isLoading ? (
+          <Loader2 className={`animate-spin ${iconClassName}`} />
+        ) : (
+          <ChevronDown className={iconClassName} />
+        )}
+      </Button>
+    )
+  },
+)
+CurrencyButton.displayName = 'CurrencyButton'
+
+function CurrencyLabel({ currency }: { currency: Currency }) {
+  const flagUrl = `https://flagcdn.com/h24/${
+    currency?.code.length ? currency.code.slice(0, 2).toLowerCase() : 'un'
+  }.png`
+  return (
+    <div className="flex items-center gap-3">
+      <img src={flagUrl} className="w-4" alt="" />
+      {currency.name}
+      {currency.code ? ` (${currency.code})` : ''}
+    </div>
+  )
+}

src/components/group-form.tsx

@@ -30,14 +30,17 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import { Locale } from '@/i18n'
 import { getGroup } from '@/lib/api'
+import { defaultCurrencyList, getCurrency } from '@/lib/currency'
 import { GroupFormValues, groupFormSchema } from '@/lib/schemas'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Save, Trash2 } from 'lucide-react'
-import { useTranslations } from 'next-intl'
+import { useLocale, useTranslations } from 'next-intl'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useFieldArray, useForm } from 'react-hook-form'
+import { CurrencySelector } from './currency-selector'
 import { Textarea } from './ui/textarea'
 
 export type Props = {
@@ -54,6 +57,7 @@ export function GroupForm({
   onSubmit,
   protectedParticipantIds = [],
 }: Props) {
+  const locale = useLocale()
   const t = useTranslations('GroupForm')
   const form = useForm<GroupFormValues>({
     resolver: zodResolver(groupFormSchema),
@@ -62,6 +66,7 @@ export function GroupForm({
           name: group.name,
           information: group.information ?? '',
           currency: group.currency,
+          currencyCode: group.currencyCode,
           participants: group.participants,
         }
       : {
@@ -143,6 +148,41 @@ export function GroupForm({
               )}
             />
 
+            <FormField
+              control={form.control}
+              name="currencyCode"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('CurrencyCodeField.label')}</FormLabel>
+                  <CurrencySelector
+                    currencies={defaultCurrencyList(
+                      locale as Locale,
+                      t('CurrencyCodeField.customOption'),
+                    )}
+                    defaultValue={form.watch(field.name) ?? ''}
+                    onValueChange={(newCurrency) => {
+                      field.onChange(newCurrency)
+                      const currency = getCurrency(newCurrency)
+                      if (
+                        currency.code.length ||
+                        form.getFieldState('currency').isTouched
+                      )
+                        form.setValue('currency', currency.symbol, {
+                          shouldValidate: true,
+                          shouldTouch: true,
+                          shouldDirty: true,
+                        })
+                    }}
+                    isLoading={false}
+                  />
+                  <FormDescription>
+                    {t('CurrencyCodeField.description')}
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
             <FormField
               control={form.control}
               name="currency"
@@ -153,6 +193,7 @@ export function GroupForm({
                     <Input
                       className="text-base"
                       placeholder={t('CurrencyField.placeholder')}
+                      disabled={!!form.watch('currencyCode')?.length}
                       max={5}
                       {...field}
                     />

src/components/money.tsx

@@ -1,9 +1,10 @@
 'use client'
+import { Currency } from '@/lib/currency'
 import { cn, formatCurrency } from '@/lib/utils'
 import { useLocale } from 'next-intl'
 
 type Props = {
-  currency: string
+  currency: Currency
   amount: number
   bold?: boolean
   colored?: boolean