@spaceinvoices/react-ui 0.4.12 → 0.4.32

package/src/components/recurring-invoices/create-recurring-invoice-form/create-recurring-invoice-form.tsx

@@ -1,6 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import type { CreateRecurringInvoiceBody, RecurringInvoice } from "@spaceinvoices/js-sdk";
+import type { CreateRecurringInvoiceBody, RecurringInvoice, UpdateRecurringInvoiceBody } from "@spaceinvoices/js-sdk";
 import { CalendarIcon } from "lucide-react";
+import { useEffect, useMemo } from "react";
 import { useForm, useWatch } from "react-hook-form";
 import { Button } from "@/ui/components/ui/button";
 import { Calendar } from "@/ui/components/ui/calendar";
@@ -23,27 +24,45 @@ import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
 import { cn } from "@/ui/lib/utils";
 
-import { useCreateRecurringInvoice } from "../recurring-invoices.hooks";
+import { useCreateRecurringInvoice, useUpdateRecurringInvoice } from "../recurring-invoices.hooks";
+import bg from "./locales/bg";
+import cs from "./locales/cs";
 import de from "./locales/de";
+import en from "./locales/en";
 import es from "./locales/es";
+import et from "./locales/et";
+import fi from "./locales/fi";
 import fr from "./locales/fr";
 import hr from "./locales/hr";
+import is from "./locales/is";
 import it from "./locales/it";
+import nb from "./locales/nb";
 import nl from "./locales/nl";
 import pl from "./locales/pl";
 import pt from "./locales/pt";
+import sk from "./locales/sk";
 import sl from "./locales/sl";
+import sv from "./locales/sv";
 
 const translations = {
+  en,
   sl,
+  bg,
+  cs,
   de,
-  it,
-  fr,
   es,
-  pt,
+  et,
+  fi,
+  fr,
+  hr,
+  is,
+  it,
+  nb,
   nl,
   pl,
-  hr,
+  pt,
+  sk,
+  sv,
 } as const;
 
 const FREQUENCY_LABELS: Record<string, string> = {
@@ -88,6 +107,7 @@ function formatDateToYMD(date: Date): string {
 type CreateRecurringInvoiceFormProps = {
   entityId: string;
   documentId: string;
+  recurringInvoice?: RecurringInvoice | null;
   onSuccess?: (recurringInvoice: RecurringInvoice) => void;
   onError?: (error: Error) => void;
   allowDrafts?: boolean;
@@ -97,6 +117,7 @@ type CreateRecurringInvoiceFormProps = {
 export default function CreateRecurringInvoiceForm({
   entityId,
   documentId,
+  recurringInvoice,
   onSuccess,
   onError,
   allowDrafts = true,
@@ -110,25 +131,34 @@ export default function CreateRecurringInvoiceForm({
   const formatDisplayDate = (value?: string) =>
     value ? new Date(`${value}T00:00:00`).toLocaleDateString(i18nProps.locale) : undefined;
 
+  const defaultValues = useMemo<CreateRecurringInvoiceSchema>(
+    () => ({
+      document_id: documentId,
+      name: recurringInvoice?.name ?? "",
+      frequency: recurringInvoice?.frequency ?? "monthly",
+      interval: recurringInvoice?.interval ?? 1,
+      day_of_week: recurringInvoice?.day_of_week ?? null,
+      day_of_month: recurringInvoice?.day_of_month ?? null,
+      month_of_year: recurringInvoice?.month_of_year ?? null,
+      start_date: recurringInvoice?.start_date ?? formatDateToYMD(new Date()),
+      end_date: recurringInvoice?.end_date ?? undefined,
+      auto_send: recurringInvoice?.auto_send ?? false,
+      create_as_draft: recurringInvoice?.create_as_draft ?? false,
+    }),
+    [documentId, recurringInvoice],
+  );
+
   const form = useForm<CreateRecurringInvoiceSchema>({
     resolver: zodResolver(createRecurringInvoiceSchema),
-    defaultValues: {
-      document_id: documentId,
-      name: "",
-      frequency: "monthly",
-      interval: 1,
-      day_of_week: null,
-      day_of_month: null,
-      month_of_year: null,
-      start_date: formatDateToYMD(new Date()),
-      end_date: undefined,
-      auto_send: false,
-      create_as_draft: false,
-    },
+    defaultValues,
   });
 
   const frequency = useWatch({ control: form.control, name: "frequency" });
 
+  useEffect(() => {
+    form.reset(defaultValues);
+  }, [defaultValues, form]);
+
   const { mutate: createRecurringInvoice, isPending } = useCreateRecurringInvoice({
     entityId,
     onSuccess: (recurringInvoice, _variables, _context) => {
@@ -144,8 +174,54 @@ export default function CreateRecurringInvoiceForm({
     },
   });
 
+  const { mutate: updateRecurringInvoice, isPending: isUpdating } = useUpdateRecurringInvoice({
+    entityId,
+    onSuccess: (updatedRecurringInvoice, _variables, _context) => {
+      onSuccess?.(updatedRecurringInvoice);
+    },
+    onError: (error, _variables, _context) => {
+      form.setError("root", {
+        type: "submit",
+        message: t("There was an error creating the schedule"),
+      });
+      onError?.(error);
+    },
+  });
+
+  const buildSubmitPayload = (values: CreateRecurringInvoiceSchema) => {
+    const payload: CreateRecurringInvoiceBody = {
+      document_id: documentId,
+      name: values.name,
+      frequency: values.frequency,
+      interval: values.interval,
+      start_date: values.start_date,
+      end_date: values.end_date,
+      auto_send: values.auto_send,
+      create_as_draft: values.create_as_draft,
+      day_of_week: values.frequency === "weekly" ? values.day_of_week : null,
+      day_of_month: values.frequency === "monthly" || values.frequency === "yearly" ? values.day_of_month : null,
+      month_of_year: values.frequency === "yearly" ? values.month_of_year : null,
+    };
+
+    return payload;
+  };
+
   const onSubmit = async (values: CreateRecurringInvoiceSchema) => {
-    createRecurringInvoice(values as CreateRecurringInvoiceBody);
+    const payload = buildSubmitPayload(values);
+
+    if (recurringInvoice) {
+      const { document_id, ...updateData } = payload;
+      updateRecurringInvoice({
+        id: recurringInvoice.id,
+        data: {
+          ...updateData,
+          end_date: updateData.end_date ?? null,
+        } satisfies UpdateRecurringInvoiceBody,
+      });
+      return;
+    }
+
+    createRecurringInvoice(payload);
   };
 
   const handleSubmitClick = () => {
@@ -182,7 +258,7 @@ export default function CreateRecurringInvoiceForm({
                   {t("Frequency")}
                   <span className="ml-1 text-red-500">*</span>
                 </FormLabel>
-                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <Select onValueChange={field.onChange} value={field.value}>
                   <FormControl>
                     <SelectTrigger>
                       <SelectValue placeholder={t("Select frequency")}>
@@ -415,7 +491,7 @@ export default function CreateRecurringInvoiceForm({
         ) : null}
 
         {renderSubmitButton?.({
-          isSubmitting: isPending || form.formState.isSubmitting,
+          isSubmitting: isPending || isUpdating || form.formState.isSubmitting,
           submit: handleSubmitClick,
         })}
       </form>

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/bg.ts

@@ -1,25 +1,25 @@
 export default {
   Name: "Име",
-  "Enter schedule name": "Enter schedule name",
-  Frequency: "Frequency",
-  "Select frequency": "Select frequency",
-  Daily: "Daily",
-  Weekly: "Weekly",
+  "Enter schedule name": "Въведете име на графика",
+  Frequency: "Честота",
+  "Select frequency": "Изберете честота",
+  Daily: "Дневно",
+  Weekly: "Седмично",
   Monthly: "Месечно",
   Yearly: "Годишно",
-  Interval: "Interval",
-  "Day of Week": "Day of Week",
-  "Select day": "Select day",
-  Sunday: "Sunday",
-  Monday: "Monday",
-  Tuesday: "Tuesday",
-  Wednesday: "Wednesday",
-  Thursday: "Thursday",
-  Friday: "Friday",
-  Saturday: "Saturday",
-  "Day of Month": "Day of Month",
+  Interval: "Интервал",
+  "Day of Week": "Ден от седмицата",
+  "Select day": "Изберете ден",
+  Sunday: "Неделя",
+  Monday: "Понеделник",
+  Tuesday: "Вторник",
+  Wednesday: "Сряда",
+  Thursday: "Четвъртък",
+  Friday: "Петък",
+  Saturday: "Събота",
+  "Day of Month": "Ден от месеца",
   Month: "Месец",
-  "Select month": "Select month",
+  "Select month": "Изберете месец",
   January: "Януари",
   February: "Февруари",
   March: "Март",
@@ -32,13 +32,13 @@ export default {
   October: "Октомври",
   November: "Ноември",
   December: "Декември",
-  "Start Date": "Start Date",
-  "End Date": "End Date",
-  "Pick a date": "Pick a date",
-  "No end date": "No end date",
-  "Auto-send": "Auto-send",
-  "Automatically email generated invoices": "Automatically email generated invoices",
-  "Create as draft": "Create as draft",
-  "Generated invoices will be drafts for review": "Generated invoices will be drafts for review",
-  "There was an error creating the schedule": "There was an error creating the schedule",
+  "Start Date": "Начална дата",
+  "End Date": "Крайна дата",
+  "Pick a date": "Изберете дата",
+  "No end date": "Без крайна дата",
+  "Auto-send": "Автоматично изпращане",
+  "Automatically email generated invoices": "Автоматично изпращайте генерираните фактури по имейл",
+  "Create as draft": "Създай като чернова",
+  "Generated invoices will be drafts for review": "Генерираните фактури ще бъдат чернови за преглед",
+  "There was an error creating the schedule": "Възникна грешка при създаването на графика",
 } as const;

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/cs.ts

@@ -1,25 +1,25 @@
 export default {
   Name: "Jméno",
-  "Enter schedule name": "Enter schedule name",
-  Frequency: "Frequency",
-  "Select frequency": "Select frequency",
-  Daily: "Daily",
-  Weekly: "Weekly",
+  "Enter schedule name": "Zadejte název plánu",
+  Frequency: "Frekvence",
+  "Select frequency": "Vyberte frekvenci",
+  Daily: "Denně",
+  Weekly: "Týdně",
   Monthly: "Měsíčně",
   Yearly: "Ročně",
   Interval: "Interval",
-  "Day of Week": "Day of Week",
-  "Select day": "Select day",
-  Sunday: "Sunday",
-  Monday: "Monday",
-  Tuesday: "Tuesday",
-  Wednesday: "Wednesday",
-  Thursday: "Thursday",
-  Friday: "Friday",
-  Saturday: "Saturday",
-  "Day of Month": "Day of Month",
+  "Day of Week": "Den v týdnu",
+  "Select day": "Vyberte den",
+  Sunday: "Neděle",
+  Monday: "Pondělí",
+  Tuesday: "Úterý",
+  Wednesday: "Středa",
+  Thursday: "Čtvrtek",
+  Friday: "Pátek",
+  Saturday: "Sobota",
+  "Day of Month": "Den v měsíci",
   Month: "Měsíc",
-  "Select month": "Select month",
+  "Select month": "Vyberte měsíc",
   January: "Leden",
   February: "Únor",
   March: "Březen",
@@ -32,13 +32,13 @@ export default {
   October: "Říjen",
   November: "Listopad",
   December: "Prosinec",
-  "Start Date": "Start Date",
-  "End Date": "End Date",
-  "Pick a date": "Pick a date",
-  "No end date": "No end date",
-  "Auto-send": "Auto-send",
-  "Automatically email generated invoices": "Automatically email generated invoices",
-  "Create as draft": "Create as draft",
-  "Generated invoices will be drafts for review": "Generated invoices will be drafts for review",
-  "There was an error creating the schedule": "There was an error creating the schedule",
+  "Start Date": "Datum zahájení",
+  "End Date": "Datum ukončení",
+  "Pick a date": "Vyberte datum",
+  "No end date": "Bez data ukončení",
+  "Auto-send": "Automatické odeslání",
+  "Automatically email generated invoices": "Automaticky posílat vygenerované faktury e-mailem",
+  "Create as draft": "Vytvořit jako koncept",
+  "Generated invoices will be drafts for review": "Vygenerované faktury budou koncepty ke kontrole",
+  "There was an error creating the schedule": "Při vytváření plánu došlo k chybě",
 } as const;

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/et.ts

@@ -1,25 +1,25 @@
 export default {
   Name: "Nimi",
-  "Enter schedule name": "Enter schedule name",
-  Frequency: "Frequency",
-  "Select frequency": "Select frequency",
-  Daily: "Daily",
-  Weekly: "Weekly",
+  "Enter schedule name": "Sisesta ajakava nimi",
+  Frequency: "Sagedus",
+  "Select frequency": "Vali sagedus",
+  Daily: "Iga päev",
+  Weekly: "Iga nädal",
   Monthly: "Kuutasuga",
   Yearly: "Aastatasuga",
-  Interval: "Interval",
-  "Day of Week": "Day of Week",
-  "Select day": "Select day",
-  Sunday: "Sunday",
-  Monday: "Monday",
-  Tuesday: "Tuesday",
-  Wednesday: "Wednesday",
-  Thursday: "Thursday",
-  Friday: "Friday",
-  Saturday: "Saturday",
-  "Day of Month": "Day of Month",
+  Interval: "Intervall",
+  "Day of Week": "Nädalapäev",
+  "Select day": "Vali päev",
+  Sunday: "Pühapäev",
+  Monday: "Esmaspäev",
+  Tuesday: "Teisipäev",
+  Wednesday: "Kolmapäev",
+  Thursday: "Neljapäev",
+  Friday: "Reede",
+  Saturday: "Laupäev",
+  "Day of Month": "Kuupäev kuus",
   Month: "Kuu",
-  "Select month": "Select month",
+  "Select month": "Vali kuu",
   January: "Jaanuar",
   February: "Veebruar",
   March: "Märts",
@@ -32,13 +32,13 @@ export default {
   October: "Oktoober",
   November: "November",
   December: "Detsember",
-  "Start Date": "Start Date",
-  "End Date": "End Date",
-  "Pick a date": "Pick a date",
-  "No end date": "No end date",
-  "Auto-send": "Auto-send",
-  "Automatically email generated invoices": "Automatically email generated invoices",
-  "Create as draft": "Create as draft",
-  "Generated invoices will be drafts for review": "Generated invoices will be drafts for review",
-  "There was an error creating the schedule": "There was an error creating the schedule",
+  "Start Date": "Alguskuupäev",
+  "End Date": "Lõppkuupäev",
+  "Pick a date": "Vali kuupäev",
+  "No end date": "Lõppkuupäeva pole",
+  "Auto-send": "Automaatne saatmine",
+  "Automatically email generated invoices": "Saada genereeritud arved automaatselt e-postiga",
+  "Create as draft": "Loo mustandina",
+  "Generated invoices will be drafts for review": "Genereeritud arved luuakse ülevaatuseks mustanditena",
+  "There was an error creating the schedule": "Ajakava loomisel tekkis viga",
 } as const;

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/fi.ts

@@ -1,44 +1,44 @@
 export default {
   Name: "Nimi",
-  "Enter schedule name": "Enter schedule name",
-  Frequency: "Frequency",
-  "Select frequency": "Select frequency",
-  Daily: "Daily",
-  Weekly: "Weekly",
+  "Enter schedule name": "Anna aikataulun nimi",
+  Frequency: "Toistuvuus",
+  "Select frequency": "Valitse toistuvuus",
+  Daily: "Päivittäin",
+  Weekly: "Viikoittain",
   Monthly: "Kuukausittain",
   Yearly: "Vuosittain",
-  Interval: "Interval",
-  "Day of Week": "Day of Week",
-  "Select day": "Select day",
-  Sunday: "Sunday",
-  Monday: "Monday",
-  Tuesday: "Tuesday",
-  Wednesday: "Wednesday",
-  Thursday: "Thursday",
-  Friday: "Friday",
-  Saturday: "Saturday",
-  "Day of Month": "Day of Month",
-  Month: "Month",
-  "Select month": "Select month",
-  January: "January",
-  February: "February",
-  March: "March",
+  Interval: "Väli",
+  "Day of Week": "Viikonpäivä",
+  "Select day": "Valitse päivä",
+  Sunday: "Sunnuntai",
+  Monday: "Maanantai",
+  Tuesday: "Tiistai",
+  Wednesday: "Keskiviikko",
+  Thursday: "Torstai",
+  Friday: "Perjantai",
+  Saturday: "Lauantai",
+  "Day of Month": "Päivä kuukaudessa",
+  Month: "Kuukausi",
+  "Select month": "Valitse kuukausi",
+  January: "Tammikuu",
+  February: "Helmikuu",
+  March: "Maaliskuu",
   April: "April",
-  May: "May",
-  June: "June",
-  July: "July",
+  May: "Toukokuu",
+  June: "Kesäkuu",
+  July: "Heinäkuu",
   August: "August",
   September: "September",
-  October: "October",
-  November: "November",
-  December: "December",
-  "Start Date": "Start Date",
-  "End Date": "End Date",
-  "Pick a date": "Pick a date",
-  "No end date": "No end date",
-  "Auto-send": "Auto-send",
-  "Automatically email generated invoices": "Automatically email generated invoices",
-  "Create as draft": "Create as draft",
-  "Generated invoices will be drafts for review": "Generated invoices will be drafts for review",
-  "There was an error creating the schedule": "There was an error creating the schedule",
+  October: "Lokakuu",
+  November: "Marraskuu",
+  December: "Joulukuu",
+  "Start Date": "Aloituspäivä",
+  "End Date": "Päättymispäivä",
+  "Pick a date": "Valitse päivämäärä",
+  "No end date": "Ei päättymispäivää",
+  "Auto-send": "Lähetä automaattisesti",
+  "Automatically email generated invoices": "Lähetä luodut laskut automaattisesti sähköpostilla",
+  "Create as draft": "Luo luonnoksena",
+  "Generated invoices will be drafts for review": "Luodut laskut tallennetaan luonnoksiksi tarkistusta varten",
+  "There was an error creating the schedule": "Aikataulun luomisessa tapahtui virhe",
 } as const;

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/is.ts

@@ -1,25 +1,25 @@
 export default {
   Name: "Nafn",
-  "Enter schedule name": "Enter schedule name",
-  Frequency: "Frequency",
-  "Select frequency": "Select frequency",
-  Daily: "Daily",
-  Weekly: "Weekly",
+  "Enter schedule name": "Sláðu inn heiti áætlunar",
+  Frequency: "Tíðni",
+  "Select frequency": "Veldu tíðni",
+  Daily: "Daglega",
+  Weekly: "Vikulega",
   Monthly: "Mánaðarlega",
   Yearly: "Árlega",
-  Interval: "Interval",
-  "Day of Week": "Day of Week",
-  "Select day": "Select day",
-  Sunday: "Sunday",
-  Monday: "Monday",
-  Tuesday: "Tuesday",
-  Wednesday: "Wednesday",
-  Thursday: "Thursday",
-  Friday: "Friday",
-  Saturday: "Saturday",
-  "Day of Month": "Day of Month",
+  Interval: "Bil",
+  "Day of Week": "Dagur vikunnar",
+  "Select day": "Veldu dag",
+  Sunday: "Sunnudagur",
+  Monday: "Mánudagur",
+  Tuesday: "Þriðjudagur",
+  Wednesday: "Miðvikudagur",
+  Thursday: "Fimmtudagur",
+  Friday: "Föstudagur",
+  Saturday: "Laugardagur",
+  "Day of Month": "Dagur mánaðar",
   Month: "Mánuður",
-  "Select month": "Select month",
+  "Select month": "Veldu mánuð",
   January: "Janúar",
   February: "Febrúar",
   March: "Mars",
@@ -32,13 +32,13 @@ export default {
   October: "Október",
   November: "Nóvember",
   December: "Desember",
-  "Start Date": "Start Date",
-  "End Date": "End Date",
-  "Pick a date": "Pick a date",
-  "No end date": "No end date",
-  "Auto-send": "Auto-send",
-  "Automatically email generated invoices": "Automatically email generated invoices",
-  "Create as draft": "Create as draft",
-  "Generated invoices will be drafts for review": "Generated invoices will be drafts for review",
-  "There was an error creating the schedule": "There was an error creating the schedule",
+  "Start Date": "Upphafsdagur",
+  "End Date": "Lokadagur",
+  "Pick a date": "Veldu dagsetningu",
+  "No end date": "Enginn lokadagur",
+  "Auto-send": "Senda sjálfkrafa",
+  "Automatically email generated invoices": "Senda sjálfkrafa tölvupóst með útbúnum reikningum",
+  "Create as draft": "Vista sem uppkast",
+  "Generated invoices will be drafts for review": "Útbúnir reikningar verða vistir sem uppköst til yfirferðar",
+  "There was an error creating the schedule": "Villa kom upp við að búa til áætlunina",
 } as const;

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/nb.ts

@@ -1,25 +1,25 @@
 export default {
   Name: "Navn",
-  "Enter schedule name": "Enter schedule name",
-  Frequency: "Frequency",
-  "Select frequency": "Select frequency",
-  Daily: "Daily",
-  Weekly: "Weekly",
+  "Enter schedule name": "Skriv inn navn på planen",
+  Frequency: "Frekvens",
+  "Select frequency": "Velg frekvens",
+  Daily: "Daglig",
+  Weekly: "Ukentlig",
   Monthly: "Månedlig",
   Yearly: "Årlig",
-  Interval: "Interval",
-  "Day of Week": "Day of Week",
-  "Select day": "Select day",
-  Sunday: "Sunday",
-  Monday: "Monday",
-  Tuesday: "Tuesday",
-  Wednesday: "Wednesday",
-  Thursday: "Thursday",
-  Friday: "Friday",
-  Saturday: "Saturday",
-  "Day of Month": "Day of Month",
+  Interval: "Intervall",
+  "Day of Week": "Ukedag",
+  "Select day": "Velg dag",
+  Sunday: "Søndag",
+  Monday: "Mandag",
+  Tuesday: "Tirsdag",
+  Wednesday: "Onsdag",
+  Thursday: "Torsdag",
+  Friday: "Fredag",
+  Saturday: "Lørdag",
+  "Day of Month": "Dag i måneden",
   Month: "Måned",
-  "Select month": "Select month",
+  "Select month": "Velg måned",
   January: "Januar",
   February: "Februar",
   March: "Mars",
@@ -32,13 +32,13 @@ export default {
   October: "Oktober",
   November: "November",
   December: "Desember",
-  "Start Date": "Start Date",
-  "End Date": "End Date",
-  "Pick a date": "Pick a date",
-  "No end date": "No end date",
-  "Auto-send": "Auto-send",
-  "Automatically email generated invoices": "Automatically email generated invoices",
-  "Create as draft": "Create as draft",
-  "Generated invoices will be drafts for review": "Generated invoices will be drafts for review",
-  "There was an error creating the schedule": "There was an error creating the schedule",
+  "Start Date": "Startdato",
+  "End Date": "Sluttdato",
+  "Pick a date": "Velg en dato",
+  "No end date": "Ingen sluttdato",
+  "Auto-send": "Send automatisk",
+  "Automatically email generated invoices": "Send genererte fakturaer automatisk på e-post",
+  "Create as draft": "Opprett som utkast",
+  "Generated invoices will be drafts for review": "Genererte fakturaer opprettes som utkast for gjennomgang",
+  "There was an error creating the schedule": "Det oppstod en feil ved opprettelse av planen",
 } as const;