Improve bad input error message

components/profile/details/ProfileInfo/ProfileInfo.tsx

@@ -1,13 +1,12 @@
 import { useAuth0 } from "@auth0/auth0-react";
 import { useContext, useState } from "react";
-import { AlertCircle, Check } from "react-feather";
-import { toast } from "react-toastify";
 import { Donor } from "../../../../models";
-import style from "./ProfileInfo.module.scss";
-import { DonorContext } from "../../layout/donorProvider";
-import { saveDonor } from "../../_queries";
 import { EffektButton } from "../../../shared/components/EffektButton/EffektButton";
 import { EffektCheckbox } from "../../../shared/components/EffektCheckbox/EffektCheckbox";
+import { DonorContext } from "../../layout/donorProvider";
+import { failureToast, successToast } from "../../shared/toast";
+import { saveDonor } from "../../_queries";
+import style from "./ProfileInfo.module.scss";
 
 export const ProfileInfo: React.FC = () => {
   const { getAccessTokenSilently, user } = useAuth0();
@@ -65,7 +64,3 @@ export const ProfileInfo: React.FC = () => {
     </>
   );
 };
-
-const successToast = () => toast.success("Lagret", { icon: <Check size={24} color={"black"} /> });
-const failureToast = () =>
-  toast.error("Noe gikk galt", { icon: <AlertCircle size={24} color={"black"} /> });

components/profile/layout/MissingNameModal/MissingNameModal.tsx

@@ -1,12 +1,11 @@
+import { useAuth0 } from "@auth0/auth0-react";
 import { useContext, useEffect, useState } from "react";
-import { DonorContext } from "../donorProvider";
-import { Lightbox } from "../../../shared/components/Lightbox/Lightbox";
 import { EffektTextInput } from "../../../shared/components/EffektTextInput/EffektTextInput";
+import { Lightbox } from "../../../shared/components/Lightbox/Lightbox";
 import { saveDonor } from "../../_queries";
-import { useAuth0 } from "@auth0/auth0-react";
-import { AlertCircle, Check } from "react-feather";
-import { toast } from "react-toastify";
+import { DonorContext } from "../donorProvider";
 
+import { failureToast, successToast } from "../../shared/toast";
 import styles from "./MissingNameModal.module.scss";
 
 export const MissingNameModal: React.FC = () => {
@@ -62,7 +61,3 @@ export const MissingNameModal: React.FC = () => {
     </Lightbox>
   );
 };
-
-const successToast = () => toast.success("Lagret", { icon: <Check size={24} color={"black"} /> });
-const failureToast = () =>
-  toast.error("Noe gikk galt", { icon: <AlertCircle size={24} color={"black"} /> });

components/profile/shared/TaxUnitModal/TaxUnitCreateModal.tsx

@@ -4,14 +4,13 @@ import { TaxUnit } from "../../../../models";
 import { Lightbox } from "../../../shared/components/Lightbox/Lightbox";
 import { RadioButtonGroup } from "../../../shared/components/RadioButton/RadioButtonGroup";
 import { createTaxUnit } from "../../_queries";
-import { toast } from "react-toastify";
 
-import styles from "./TaxUnitModal.module.scss";
-import { AlertCircle, Check } from "react-feather";
 import { validateOrg, validateSsn } from "@ssfbank/norwegian-id-validators";
-import { Spinner } from "../../../shared/components/Spinner/Spinner";
 import { useTaxUnits } from "../../../../_queries";
 import { EffektTextInput } from "../../../shared/components/EffektTextInput/EffektTextInput";
+import { Spinner } from "../../../shared/components/Spinner/Spinner";
+import { failureToast, successToast } from "../toast";
+import styles from "./TaxUnitModal.module.scss";
 
 export enum TaxUnitTypes {
   PERSON = 1,
@@ -132,7 +131,3 @@ export const TaxUnitCreateModal: React.FC<{
     </Lightbox>
   );
 };
-
-const successToast = () => toast.success("Lagret", { icon: <Check size={24} color={"black"} /> });
-const failureToast = () =>
-  toast.error("Noe gikk galt", { icon: <AlertCircle size={24} color={"black"} /> });

components/profile/shared/TaxUnitModal/TaxUnitDeleteModal.tsx

@@ -1,16 +1,12 @@
 import { useAuth0 } from "@auth0/auth0-react";
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useState } from "react";
 import AnimateHeight from "react-animate-height";
-import { AlertCircle, Check } from "react-feather";
-import { toast } from "react-toastify";
-import { mutate } from "swr";
 import { TaxUnit } from "../../../../models";
 import { EffektCheckbox } from "../../../shared/components/EffektCheckbox/EffektCheckbox";
 import { Lightbox } from "../../../shared/components/Lightbox/Lightbox";
-import { RadioButtonGroup } from "../../../shared/components/RadioButton/RadioButtonGroup";
-import { DonorContext } from "../../layout/donorProvider";
-import { createTaxUnit, deleteTaxUnit } from "../../_queries";
+import { deleteTaxUnit } from "../../_queries";
 import { TaxUnitSelector } from "../TaxUnitSelector/TaxUnitSelector";
+import { failureToast, successToast } from "../toast";
 import { TaxUnitCreateModal } from "./TaxUnitCreateModal";
 
 import styles from "./TaxUnitModal.module.scss";
@@ -120,7 +116,3 @@ export const TaxUnitDeleteModal: React.FC<{
     </Lightbox>
   );
 };
-
-const successToast = () => toast.success("Lagret", { icon: <Check size={24} color={"black"} /> });
-const failureToast = () =>
-  toast.error("Noe gikk galt", { icon: <AlertCircle size={24} color={"black"} /> });

components/profile/shared/TaxUnitModal/TaxUnitEditModal.tsx

@@ -11,6 +11,7 @@ import styles from "./TaxUnitModal.module.scss";
 import { AlertCircle, Check } from "react-feather";
 import { useTaxUnits } from "../../../../_queries";
 import { Spinner } from "../../../shared/components/Spinner/Spinner";
+import { failureToast, successToast } from "../toast";
 
 export enum TaxUnitTypes {
   PERSON = 1,
@@ -145,7 +146,3 @@ export const TaxUnitEditModal: React.FC<{
     </Lightbox>
   );
 };
-
-const successToast = () => toast.success("Lagret", { icon: <Check size={24} color={"black"} /> });
-const failureToast = () =>
-  toast.error("Noe gikk galt", { icon: <AlertCircle size={24} color={"black"} /> });

components/profile/shared/lists/agreementList/AgreementDetails.tsx

@@ -1,6 +1,13 @@
+import { useAuth0 } from "@auth0/auth0-react";
 import React, { useEffect, useState } from "react";
+import { useSWRConfig } from "swr";
 import { Distribution, TaxUnit } from "../../../../../models";
-import { toast } from "react-toastify";
+import {
+  EffektButton,
+  EffektButtonVariant,
+} from "../../../../shared/components/EffektButton/EffektButton";
+import { Lightbox } from "../../../../shared/components/Lightbox/Lightbox";
+import style from "./AgreementDetails.module.scss";
 import {
   cancelAutoGiroAgreement,
   cancelAvtaleGiroAgreement,
@@ -13,24 +20,17 @@ import {
   updateVippsAgreementDistribution,
   updateVippsAgreementPrice,
 } from "./_queries";
-import { useAuth0 } from "@auth0/auth0-react";
-import { useSWRConfig } from "swr";
-import { AlertCircle, Check, Info } from "react-feather";
-import style from "./AgreementDetails.module.scss";
-import {
-  EffektButton,
-  EffektButtonVariant,
-} from "../../../../shared/components/EffektButton/EffektButton";
-import { Lightbox } from "../../../../shared/components/Lightbox/Lightbox";
-import { checkPaymentDate } from "../../../../../util/dates";
+
 import { getUserId } from "../../../../../lib/user";
-import { AgreementSingleCauseAreaDetails } from "./singleCauseAreaDetails/AgreementSingleCauseAreaDetails";
+import { checkPaymentDate } from "../../../../../util/dates";
 import { useCauseAreas } from "../../../../../_queries";
+import { DatePickerInputConfiguration } from "../../../../shared/components/DatePicker/DatePickerInput";
+import { failureToast, noChangesToast, successToast } from "../../toast";
 import {
   AgreementMultipleCauseAreaDetails,
   AgreementMultipleCauseAreaDetailsConfiguration,
 } from "./multipleCauseAreasDetails/AgreementMultipleCauseAreasDetails";
-import { DatePickerInputConfiguration } from "../../../../shared/components/DatePicker/DatePickerInput";
+import { AgreementSingleCauseAreaDetails } from "./singleCauseAreaDetails/AgreementSingleCauseAreaDetails";
 
 export type AgreementDetailsConfiguration = {
   save_button_text: string;
@@ -41,6 +41,7 @@ export type AgreementDetailsConfiguration = {
   toasts_configuration: {
     success_text: string;
     failure_text: string;
+    bad_input_failure_text?: string;
     no_changes_text: string;
   };
   agreement_cancel_lightbox: {
@@ -140,7 +141,13 @@ export const AgreementDetails: React.FC<{
     setLoadingChanges(true);
 
     if (type == "Vipps") {
-      let result = null;
+      let result: Awaited<
+        ReturnType<
+          | typeof updateVippsAgreementDistribution
+          | typeof updateVippsAgreementDay
+          | typeof updateVippsAgreementPrice
+        >
+      > = null;
 
       if (distributionChanged) {
         result = await updateVippsAgreementDistribution(endpoint, distribution, token);
@@ -154,17 +161,26 @@ export const AgreementDetails: React.FC<{
         result = await updateVippsAgreementPrice(endpoint, sum, token);
       }
 
-      if (result != null) {
+      if (result?.ok) {
         successToast(configuration.toasts_configuration.success_text);
         mutate(`/donors/${getUserId(user)}/recurring/vipps/`);
         setLoadingChanges(false);
         setLastSavedDistribution(JSON.parse(JSON.stringify(distribution)));
       } else {
-        failureToast(configuration.toasts_configuration.failure_text);
+        failureToast(
+          (result?.status === 400 && configuration.toasts_configuration.bad_input_failure_text) ||
+            configuration.toasts_configuration.failure_text,
+        );
         setLoadingChanges(false);
       }
     } else if (type == "AvtaleGiro") {
-      let result = null;
+      let result: Awaited<
+        ReturnType<
+          | typeof updateAvtalegiroAgreementDistribution
+          | typeof updateAvtaleagreementPaymentDay
+          | typeof updateAvtaleagreementAmount
+        >
+      > = null;
 
       if (distributionChanged) {
         result = await updateAvtalegiroAgreementDistribution(endpoint, distribution, token);
@@ -178,13 +194,16 @@ export const AgreementDetails: React.FC<{
         result = await updateAvtaleagreementAmount(endpoint, sum * 100, token);
       }
 
-      if (result !== null) {
+      if (result?.ok) {
         successToast(configuration.toasts_configuration.success_text);
         mutate(`/donors/${getUserId(user)}/recurring/avtalegiro/`);
         setLoadingChanges(false);
         setLastSavedDistribution(JSON.parse(JSON.stringify(distribution)));
       } else {
-        failureToast(configuration.toasts_configuration.failure_text);
+        failureToast(
+          (result?.status === 400 && configuration.toasts_configuration.bad_input_failure_text) ||
+            configuration.toasts_configuration.failure_text,
+        );
         setLoadingChanges(false);
       }
     } else if (type == "AutoGiro") {
@@ -202,11 +221,14 @@ export const AgreementDetails: React.FC<{
         setLoadingChanges(false);
         setLastSavedDistribution(JSON.parse(JSON.stringify(distribution)));
       } else {
-        failureToast(configuration.toasts_configuration.failure_text);
+        failureToast(
+          (result?.status === 400 && configuration.toasts_configuration.bad_input_failure_text) ||
+            configuration.toasts_configuration.failure_text,
+        );
         setLoadingChanges(false);
       }
     } else {
-      failureToast("Uknown agreement type");
+      failureToast("Unknown agreement type");
       setLoadingChanges(false);
     }
   };
@@ -241,7 +263,7 @@ export const AgreementDetails: React.FC<{
         failureToast(configuration.toasts_configuration.failure_text);
       }
     } else {
-      failureToast("Uknown agreement type");
+      failureToast("Unknown agreement type");
     }
   };
 
@@ -332,16 +354,3 @@ export const AgreementDetails: React.FC<{
     );
   }
 };
-
-const saveAvtaleGiroAgreement = async () => {};
-
-const successToast = (text: string) =>
-  toast.success(text, { icon: <Check size={24} color={"black"} /> });
-const failureToast = (text: string) =>
-  toast.error(text, {
-    icon: <AlertCircle size={24} color={"black"} />,
-  });
-const noChangesToast = (text: string) =>
-  toast.error(text, {
-    icon: <Info size={24} color={"black"} />,
-  });