medreport_mrb2b/app/auth/update-account/_components/update-account-form.tsx

'use client';

import Link from 'next/link';
import { useTranslation } from 'react-i18next';
import { useRouter } from 'next/navigation';
import { z } from 'zod';

import { ExternalLink } from '@/public/assets/external-link';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';

import { Button } from '@kit/ui/button';
import { Checkbox } from '@kit/ui/checkbox';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@kit/ui/form';
import { Input } from '@kit/ui/input';
import { Trans } from '@kit/ui/trans';

import { UpdateAccountSchemaClient } from '../_lib/schemas/update-account.schema';
import { onUpdateAccount } from '../_lib/server/update-account';
import { toast } from '@kit/ui/sonner';
import { pathsConfig } from '@/packages/shared/src/config';

type UpdateAccountFormValues = z.infer<ReturnType<typeof UpdateAccountSchemaClient>>;

export function UpdateAccountForm({
  defaultValues,
  isEmailUser,
}: {
  defaultValues: UpdateAccountFormValues,
  isEmailUser: boolean,
}) {
  const router = useRouter();
  const { t } = useTranslation('account');

  const form = useForm({
    resolver: zodResolver(UpdateAccountSchemaClient({ isEmailUser })),
    mode: 'onChange',
    defaultValues,
  });

  const { firstName, lastName, personalCode, email, userConsent } = defaultValues;

  const defaultValues_weight = "weight" in defaultValues ? defaultValues.weight : null;
  const defaultValues_height = "height" in defaultValues ? defaultValues.height : null;

  const hasFirstName = !!firstName;
  const hasLastName = !!lastName;
  const hasPersonalCode = !!personalCode;
  const hasEmail = !!email;

  const onUpdateAccountOptions = async (values: UpdateAccountFormValues) => {
    const loading = toast.loading(t('updateAccount.updateAccountLoading'));
    try {
      const response = await onUpdateAccount({
        firstName: values.firstName || firstName,
        lastName: values.lastName || lastName,
        personalCode: values.personalCode || personalCode,
        email: values.email || email,
        phone: values.phone,
        weight: ((("weight" in values && values.weight) ?? defaultValues_weight) || null) as number,
        height: ((("height" in values && values.height) ?? defaultValues_height) || null) as number,
        userConsent: values.userConsent ?? userConsent,
        city: values.city,
      });
      if (!response) {
        throw new Error('Failed to update account');
      }
      toast.dismiss(loading);
      toast.success(t('updateAccount.updateAccountSuccess'));

      if (response.hasUnseenMembershipConfirmation) {
        router.push(pathsConfig.auth.membershipConfirmation);
      } else {
        router.push(pathsConfig.app.selectPackage);
      }
    } catch (error) {
      console.info("promiseresult error", error);
      toast.error(t('updateAccount.updateAccountError'));
      toast.dismiss(loading);
    }
  };

  return (
    <Form {...form}>
      <form
        className="flex flex-col gap-6 px-6 pt-10 text-left"
        onSubmit={form.handleSubmit(onUpdateAccountOptions)}
      >
        <FormField
          name="firstName"
          disabled={hasFirstName && !isEmailUser}
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <Trans i18nKey={'common:formField:firstName'} />
              </FormLabel>
              <FormControl>
                <Input {...field} autoFocus={!hasFirstName} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          name="lastName"
          disabled={hasLastName && !isEmailUser}
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <Trans i18nKey={'common:formField:lastName'} />
              </FormLabel>
              <FormControl>
                <Input {...field} autoFocus={hasFirstName && !hasLastName} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          name="personalCode"
          disabled={hasPersonalCode && !isEmailUser}
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <Trans i18nKey={'common:formField:personalCode'} />
              </FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          name="email"
          disabled={hasEmail}
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <Trans i18nKey={'common:formField:email'} />
              </FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          name="phone"
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                <Trans i18nKey={'common:formField:phone'} />
              </FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        {!isEmailUser && (
          <>
            <FormField
              name="city"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>
                    <Trans i18nKey={'common:formField:city'} />
                  </FormLabel>
                  <FormControl>
                    <Input {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <div className="flex flex-row justify-between gap-4">
              <FormField
                name="weight"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>
                      <Trans i18nKey={'common:formField:weight'} />
                    </FormLabel>
                    <FormControl>
                      <Input
                        type="number"
                        placeholder="kg"
                        {...field}
                        value={field.value ?? ''}
                        onChange={(e) =>
                          field.onChange(
                            e.target.value === '' ? null : Number(e.target.value),
                          )
                        }
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                name="height"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>
                      <Trans i18nKey={'common:formField:height'} />
                    </FormLabel>
                    <FormControl>
                      <Input
                        placeholder="cm"
                        type="number"
                        {...field}
                        value={field.value ?? ''}
                        onChange={(e) =>
                          field.onChange(
                            e.target.value === '' ? null : Number(e.target.value),
                          )
                        }
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
          </>
        )}

        <FormField
          name="userConsent"
          render={({ field }) => (
            <FormItem>
              <div className="flex flex-row items-center gap-2 pb-1">
                <FormControl>
                  <Checkbox
                    checked={field.value}
                    onCheckedChange={field.onChange}
                  />
                </FormControl>
                <FormLabel>
                  <Trans i18nKey={'account:updateAccount:userConsentLabel'} />
                </FormLabel>
              </div>

              <Link
                href={''}
                className="flex flex-row items-center gap-2 text-sm hover:underline"
                target="_blank"
              >
                <ExternalLink />
                <Trans i18nKey={'account:updateAccount:userConsentUrlTitle'} />
              </Link>
            </FormItem>
          )}
        />

        <Button disabled={form.formState.isSubmitting} type="submit">
          <Trans i18nKey={'account:updateAccount:button'} />
        </Button>
      </form>
    </Form>
  );
}