Feat/add other metadata types v2 (#2224)

* Fix view fetch bug

* Finished types

* Removed console.log

* Fixed todo

* Reactivate no console

* Change no-console to warn

front/src/modules/ui/data/field/components/FieldDisplay.tsx

@@ -6,6 +6,7 @@ import { DateFieldDisplay } from '../meta-types/display/components/DateFieldDisp
 import { DoubleTextChipFieldDisplay } from '../meta-types/display/components/DoubleTextChipFieldDisplay';
 import { DoubleTextFieldDisplay } from '../meta-types/display/components/DoubleTextFieldDisplay';
 import { EmailFieldDisplay } from '../meta-types/display/components/EmailFieldDisplay';
+import { MoneyAmountV2FieldDisplay } from '../meta-types/display/components/MoneyAmountV2FieldDisplay';
 import { MoneyFieldDisplay } from '../meta-types/display/components/MoneyFieldDisplay';
 import { NumberFieldDisplay } from '../meta-types/display/components/NumberFieldDisplay';
 import { PhoneFieldDisplay } from '../meta-types/display/components/PhoneFieldDisplay';
@@ -19,6 +20,7 @@ import { isFieldDoubleText } from '../types/guards/isFieldDoubleText';
 import { isFieldDoubleTextChip } from '../types/guards/isFieldDoubleTextChip';
 import { isFieldEmail } from '../types/guards/isFieldEmail';
 import { isFieldMoney } from '../types/guards/isFieldMoney';
+import { isFieldMoneyAmountV2 } from '../types/guards/isFieldMoneyAmountV2';
 import { isFieldNumber } from '../types/guards/isFieldNumber';
 import { isFieldPhone } from '../types/guards/isFieldPhone';
 import { isFieldRelation } from '../types/guards/isFieldRelation';
@@ -47,6 +49,8 @@ export const FieldDisplay = () => {
         <URLFieldDisplay />
       ) : isFieldURLV2(fieldDefinition) ? (
         <URLV2FieldDisplay />
+      ) : isFieldMoneyAmountV2(fieldDefinition) ? (
+        <MoneyAmountV2FieldDisplay />
       ) : isFieldPhone(fieldDefinition) ? (
         <PhoneFieldDisplay />
       ) : isFieldChip(fieldDefinition) ? (

front/src/modules/ui/data/field/components/FieldInput.tsx

@@ -9,6 +9,7 @@ import { DateFieldInput } from '../meta-types/input/components/DateFieldInput';
 import { DoubleTextChipFieldInput } from '../meta-types/input/components/DoubleTextChipFieldInput';
 import { DoubleTextFieldInput } from '../meta-types/input/components/DoubleTextFieldInput';
 import { EmailFieldInput } from '../meta-types/input/components/EmailFieldInput';
+import { MoneyAmountV2FieldInput } from '../meta-types/input/components/MoneyAmountV2FieldInput';
 import { MoneyFieldInput } from '../meta-types/input/components/MoneyFieldInput';
 import { NumberFieldInput } from '../meta-types/input/components/NumberFieldInput';
 import { PhoneFieldInput } from '../meta-types/input/components/PhoneFieldInput';
@@ -25,6 +26,7 @@ import { isFieldDoubleText } from '../types/guards/isFieldDoubleText';
 import { isFieldDoubleTextChip } from '../types/guards/isFieldDoubleTextChip';
 import { isFieldEmail } from '../types/guards/isFieldEmail';
 import { isFieldMoney } from '../types/guards/isFieldMoney';
+import { isFieldMoneyAmountV2 } from '../types/guards/isFieldMoneyAmountV2';
 import { isFieldNumber } from '../types/guards/isFieldNumber';
 import { isFieldPhone } from '../types/guards/isFieldPhone';
 import { isFieldProbability } from '../types/guards/isFieldProbability';
@@ -108,6 +110,14 @@ export const FieldInput = ({
           onTab={onTab}
           onShiftTab={onShiftTab}
         />
+      ) : isFieldMoneyAmountV2(fieldDefinition) ? (
+        <MoneyAmountV2FieldInput
+          onEnter={onEnter}
+          onEscape={onEscape}
+          onClickOutside={onClickOutside}
+          onTab={onTab}
+          onShiftTab={onShiftTab}
+        />
       ) : isFieldPhone(fieldDefinition) ? (
         <PhoneFieldInput
           onEnter={onEnter}

front/src/modules/ui/data/field/hooks/usePersistField.ts

@@ -16,6 +16,8 @@ import { isFieldDoubleTextValue } from '../types/guards/isFieldDoubleTextValue';
 import { isFieldEmail } from '../types/guards/isFieldEmail';
 import { isFieldEmailValue } from '../types/guards/isFieldEmailValue';
 import { isFieldMoney } from '../types/guards/isFieldMoney';
+import { isFieldMoneyAmountV2 } from '../types/guards/isFieldMoneyAmountV2';
+import { isFieldMoneyAmountV2Value } from '../types/guards/isFieldMoneyAmountV2Value';
 import { isFieldMoneyValue } from '../types/guards/isFieldMoneyValue';
 import { isFieldNumber } from '../types/guards/isFieldNumber';
 import { isFieldNumberValue } from '../types/guards/isFieldNumberValue';
@@ -85,6 +87,10 @@ export const usePersistField = () => {
         const fieldIsMoney =
           isFieldMoney(fieldDefinition) && isFieldMoneyValue(valueToPersist);
 
+        const fieldIsMoneyAmountV2 =
+          isFieldMoneyAmountV2(fieldDefinition) &&
+          isFieldMoneyAmountV2Value(valueToPersist);
+
         const fieldIsPhone =
           isFieldPhone(fieldDefinition) && isFieldPhoneValue(valueToPersist);
 
@@ -160,7 +166,8 @@ export const usePersistField = () => {
           fieldIsMoney ||
           fieldIsDate ||
           fieldIsPhone ||
-          fieldIsURLV2
+          fieldIsURLV2 ||
+          fieldIsMoneyAmountV2
         ) {
           const fieldName = fieldDefinition.metadata.fieldName;
 

front/src/modules/ui/data/field/meta-types/display/components/MoneyAmountV2FieldDisplay.tsx

@@ -0,0 +1,8 @@
+import { useMoneyAmountV2Field } from '../../hooks/useMoneyAmountV2Field';
+import { MoneyAmountV2Display } from '../content-display/components/MoneyAmountV2Display';
+
+export const MoneyAmountV2FieldDisplay = () => {
+  const { fieldValue } = useMoneyAmountV2Field();
+
+  return <MoneyAmountV2Display value={fieldValue} />;
+};

front/src/modules/ui/data/field/meta-types/display/content-display/components/MoneyAmountV2Display.tsx

@@ -0,0 +1,15 @@
+import { FieldMoneyAmountV2Value } from '@/ui/data/field/types/FieldMetadata';
+
+import { EllipsisDisplay } from './EllipsisDisplay';
+
+type MoneyAmountV2DisplayProps = {
+  value?: FieldMoneyAmountV2Value;
+};
+
+export const MoneyAmountV2Display = ({ value }: MoneyAmountV2DisplayProps) => {
+  return (
+    <EllipsisDisplay>
+      {value?.amount} {value?.currency}
+    </EllipsisDisplay>
+  );
+};

front/src/modules/ui/data/field/meta-types/hooks/useMoneyAmountV2Field.ts

@@ -0,0 +1,43 @@
+import { useContext } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { FieldContext } from '../../contexts/FieldContext';
+import { usePersistField } from '../../hooks/usePersistField';
+import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector';
+import { FieldMoneyAmountV2Value } from '../../types/FieldMetadata';
+import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
+import { isFieldMoneyAmountV2 } from '../../types/guards/isFieldMoneyAmountV2';
+import { isFieldMoneyAmountV2Value } from '../../types/guards/isFieldMoneyAmountV2Value';
+
+export const useMoneyAmountV2Field = () => {
+  const { entityId, fieldDefinition, hotkeyScope } = useContext(FieldContext);
+
+  assertFieldMetadata('moneyAmountV2', isFieldMoneyAmountV2, fieldDefinition);
+
+  const fieldName = fieldDefinition.metadata.fieldName;
+
+  const [fieldValue, setFieldValue] = useRecoilState<FieldMoneyAmountV2Value>(
+    entityFieldsFamilySelector({
+      entityId: entityId,
+      fieldName: fieldName,
+    }),
+  );
+
+  const persistField = usePersistField();
+
+  const persistMoneyAmountV2Field = (newValue: FieldMoneyAmountV2Value) => {
+    if (!isFieldMoneyAmountV2Value(newValue)) {
+      return;
+    }
+
+    persistField(newValue);
+  };
+
+  return {
+    fieldDefinition,
+    fieldValue,
+    setFieldValue,
+    hotkeyScope,
+    persistMoneyAmountV2Field,
+  };
+};

front/src/modules/ui/data/field/meta-types/input/components/MoneyAmountV2FieldInput.tsx

@@ -0,0 +1,93 @@
+import { DoubleTextInput } from '@/ui/data/field/meta-types/input/components/internal/DoubleTextInput';
+
+import { usePersistField } from '../../../hooks/usePersistField';
+import { FieldDoubleText } from '../../../types/FieldDoubleText';
+import { useMoneyAmountV2Field } from '../../hooks/useMoneyAmountV2Field';
+
+import { FieldInputOverlay } from './internal/FieldInputOverlay';
+import { FieldInputEvent } from './DateFieldInput';
+
+export type MoneyAmountV2FieldInputProps = {
+  onClickOutside?: FieldInputEvent;
+  onEnter?: FieldInputEvent;
+  onEscape?: FieldInputEvent;
+  onTab?: FieldInputEvent;
+  onShiftTab?: FieldInputEvent;
+};
+
+export const MoneyAmountV2FieldInput = ({
+  onEnter,
+  onEscape,
+  onClickOutside,
+  onTab,
+  onShiftTab,
+}: MoneyAmountV2FieldInputProps) => {
+  const { fieldValue, hotkeyScope } = useMoneyAmountV2Field();
+
+  const persistField = usePersistField();
+
+  const handleEnter = (newDoubleText: FieldDoubleText) => {
+    onEnter?.(() =>
+      persistField({
+        amount: parseFloat(newDoubleText.firstValue),
+        currency: newDoubleText.secondValue,
+      }),
+    );
+  };
+
+  const handleEscape = (newDoubleText: FieldDoubleText) => {
+    onEscape?.(() =>
+      persistField({
+        amount: parseFloat(newDoubleText.firstValue),
+        currency: newDoubleText.secondValue,
+      }),
+    );
+  };
+
+  const handleClickOutside = (
+    event: MouseEvent | TouchEvent,
+    newDoubleText: FieldDoubleText,
+  ) => {
+    onClickOutside?.(() =>
+      persistField({
+        amount: parseFloat(newDoubleText.firstValue),
+        currency: newDoubleText.secondValue,
+      }),
+    );
+  };
+
+  const handleTab = (newDoubleText: FieldDoubleText) => {
+    onTab?.(() =>
+      persistField({
+        amount: parseFloat(newDoubleText.firstValue),
+        currency: newDoubleText.secondValue,
+      }),
+    );
+  };
+
+  const handleShiftTab = (newDoubleText: FieldDoubleText) => {
+    onShiftTab?.(() =>
+      persistField({
+        amount: parseFloat(newDoubleText.firstValue),
+        currency: newDoubleText.secondValue,
+      }),
+    );
+  };
+
+  return (
+    <FieldInputOverlay>
+      <DoubleTextInput
+        firstValue={fieldValue.amount?.toString() ?? ''}
+        secondValue={fieldValue.currency ?? ''}
+        firstValuePlaceholder="Amount"
+        secondValuePlaceholder="Currency"
+        onClickOutside={handleClickOutside}
+        onEnter={handleEnter}
+        onEscape={handleEscape}
+        onShiftTab={handleShiftTab}
+        onTab={handleTab}
+        hotkeyScope={hotkeyScope}
+      />
+    </FieldInputOverlay>
+  );
+};

front/src/modules/ui/data/field/types/FieldMetadata.ts

@@ -37,6 +37,12 @@ export type FieldMoneyMetadata = {
   isPositive?: boolean;
 };
 
+export type FieldMoneyAmountV2Metadata = {
+  fieldName: string;
+  placeHolder: string;
+  isPositive?: boolean;
+};
+
 export type FieldEmailMetadata = {
   fieldName: string;
   placeHolder: string;
@@ -90,6 +96,7 @@ export type FieldMetadata =
   | FieldURLV2Metadata
   | FieldNumberMetadata
   | FieldMoneyMetadata
+  | FieldMoneyAmountV2Metadata
   | FieldEmailMetadata
   | FieldDateMetadata
   | FieldProbabilityMetadata
@@ -104,6 +111,8 @@ export type FieldURLValue = string;
 export type FieldURLV2Value = { link: string; text: string };
 export type FieldNumberValue = number | null;
 export type FieldMoneyValue = number | null;
+export type FieldMoneyAmountV2Value = { currency: string; amount: number };
+
 export type FieldEmailValue = string;
 export type FieldProbabilityValue = number;
 export type FieldBooleanValue = boolean;

front/src/modules/ui/data/field/types/FieldType.ts

@@ -12,4 +12,6 @@ export type FieldType =
   | 'url'
   | 'urlV2'
   | 'probability'
-  | 'moneyAmount';
+  | 'moneyAmountV2'
+  | 'moneyAmount'
+  | 'money';

front/src/modules/ui/data/field/types/guards/assertFieldMetadata.ts

@@ -7,6 +7,7 @@ import {
   FieldDoubleTextMetadata,
   FieldEmailMetadata,
   FieldMetadata,
+  FieldMoneyAmountV2Metadata,
   FieldMoneyMetadata,
   FieldNumberMetadata,
   FieldPhoneMetadata,
@@ -48,6 +49,8 @@ type AssertFieldMetadataFunction = <
     ? FieldProbabilityMetadata
     : E extends 'moneyAmount'
     ? FieldMoneyMetadata
+    : E extends 'moneyAmountV2'
+    ? FieldMoneyAmountV2Metadata
     : never,
 >(
   fieldType: E,

front/src/modules/ui/data/field/types/guards/isFieldMoneyAmountV2.ts

@@ -0,0 +1,7 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldMetadata, FieldMoneyAmountV2Metadata } from '../FieldMetadata';
+
+export const isFieldMoneyAmountV2 = (
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldMoneyAmountV2Metadata> =>
+  field.type === 'moneyAmountV2';

front/src/modules/ui/data/field/types/guards/isFieldMoneyAmountV2Value.ts

@@ -0,0 +1,13 @@
+import { z } from 'zod';
+
+import { FieldMoneyValue } from '../FieldMetadata';
+
+const moneyAmountV2Schema = z.object({
+  currency: z.string(),
+  amount: z.number(),
+});
+
+export const isFieldMoneyAmountV2Value = (
+  fieldValue: unknown,
+): fieldValue is FieldMoneyValue =>
+  moneyAmountV2Schema.safeParse(fieldValue).success;