feat(frontend): add warning to SO line calcs (#11296)

src/frontend/lib/types/Forms.tsx

@@ -111,6 +111,8 @@ export type ApiFormFieldType = {
   read_only?: boolean;
   placeholder?: string;
   placeholderAutofill?: boolean;
+  placeholderWarningCompare?: string | number;
+  placeholderWarning?: string;
   description?: string;
   preFieldContent?: JSX.Element;
   postFieldContent?: JSX.Element;

src/frontend/src/components/forms/fields/ApiFormField.tsx

@@ -179,6 +179,10 @@ export function ApiFormField({
             fieldName={fieldName}
             definition={reducedDefinition}
             placeholderAutofill={fieldDefinition.placeholderAutofill ?? false}
+            placeholderWarningCompare={
+              fieldDefinition.placeholderWarningCompare ?? undefined
+            }
+            placeholderWarning={fieldDefinition.placeholderWarning ?? undefined}
             onChange={(value: any) => {
               onChange(value);
             }}

src/frontend/src/components/forms/fields/AutoFillRightSection.tsx

@@ -1,6 +1,6 @@
 import { t } from '@lingui/core/macro';
 import { Tooltip } from '@mantine/core';
-import { IconCopyCheck, IconX } from '@tabler/icons-react';
+import { IconCopyCheck, IconExclamationMark, IconX } from '@tabler/icons-react';
 
 /**
  * Custom "RightSection" component for form fields,
@@ -55,3 +55,21 @@ export default function AutoFillRightSection({
     );
   }
 }
+
+export function AutoFillWarning({
+  fieldName,
+  message
+}: {
+  fieldName: string;
+  message: string;
+}) {
+  return (
+    <Tooltip label={message} position='top-end'>
+      <IconExclamationMark
+        aria-label={`field-${fieldName}-palceholder-warning`}
+        size='1rem'
+        color='orange'
+      />
+    </Tooltip>
+  );
+}

src/frontend/src/components/forms/fields/NumberField.tsx

@@ -1,7 +1,7 @@
 import { NumberInput } from '@mantine/core';
 import { useId, useMemo } from 'react';
 import type { FieldValues, UseControllerReturn } from 'react-hook-form';
-import AutoFillRightSection from './AutoFillRightSection';
+import AutoFillRightSection, { AutoFillWarning } from './AutoFillRightSection';
 
 /**
  * Custom implementation of the mantine <NumberInput> component,
@@ -12,12 +12,16 @@ export default function NumberField({
   fieldName,
   definition,
   placeholderAutofill,
+  placeholderWarningCompare,
+  placeholderWarning,
   onChange
 }: Readonly<{
   controller: UseControllerReturn<FieldValues, any>;
   definition: any;
   fieldName: string;
   placeholderAutofill?: boolean;
+  placeholderWarningCompare?: number | string;
+  placeholderWarning?: string;
   onChange: (value: any) => void;
 }>) {
   const fieldId = useId();
@@ -56,6 +60,43 @@ export default function NumberField({
     return val;
   }, [definition.field_type, value]);
 
+  const rightSection = useMemo(() => {
+    if (
+      definition.placeholder &&
+      placeholderAutofill &&
+      numericalValue == null
+    ) {
+      return (
+        <AutoFillRightSection
+          value={field.value}
+          fieldName={field.name}
+          definition={definition}
+          onChange={onChange}
+        />
+      );
+    } else if (placeholderWarning && numericalValue != null) {
+      if (
+        placeholderWarningCompare != null &&
+        numericalValue === placeholderWarningCompare
+      ) {
+        return undefined;
+      }
+      return (
+        <AutoFillWarning fieldName={field.name} message={placeholderWarning} />
+      );
+    }
+    return undefined;
+  }, [
+    definition,
+    placeholderAutofill,
+    placeholderWarning,
+    placeholderWarningCompare,
+    numericalValue,
+    field.name,
+    field.value,
+    onChange
+  ]);
+
   return (
     <NumberInput
       {...definition}
@@ -74,18 +115,7 @@ export default function NumberField({
           onChange(value);
         }
       }}
-      rightSection={
-        definition.placeholder &&
-        placeholderAutofill &&
-        numericalValue == null && (
-          <AutoFillRightSection
-            value={field.value}
-            fieldName={field.name}
-            definition={definition}
-            onChange={onChange}
-          />
-        )
-      }
+      rightSection={rightSection}
     />
   );
 }

src/frontend/src/forms/SalesOrderForms.tsx

@@ -174,7 +174,9 @@ export function useSalesOrderLineItemFields({
       },
       sale_price: {
         placeholder: salePrice,
-        placeholderAutofill: true
+        placeholderAutofill: true,
+        placeholderWarningCompare: salePrice,
+        placeholderWarning: t`Price based on part and quantity differs${salePrice ? `; suggested: (${salePrice})` : '.'}`
       },
       sale_price_currency: {
         icon: <IconCoins />,