Add idealCustomerProfile to company show page (#1312)

* Add idealCustomerProfile to company show page

* remove editMode

* add xUrl

front/src/modules/ui/editable-field/components/GenericEditableBooleanField.tsx

@@ -0,0 +1,27 @@
+import { useContext } from 'react';
+
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext';
+import { FieldRecoilScopeContext } from '../states/recoil-scope-contexts/FieldRecoilScopeContext';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldBooleanMetadata } from '../types/FieldMetadata';
+
+import { EditableField } from './EditableField';
+import { GenericEditableBooleanFieldDisplayMode } from './GenericEditableBooleanFieldDisplayMode';
+
+export function GenericEditableBooleanField() {
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldBooleanMetadata>;
+
+  return (
+    <RecoilScope SpecificContext={FieldRecoilScopeContext}>
+      <EditableField
+        iconLabel={currentEditableFieldDefinition.icon}
+        displayModeContent={<GenericEditableBooleanFieldDisplayMode />}
+        displayModeContentOnly
+      />
+    </RecoilScope>
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableBooleanFieldDisplayMode.tsx

@@ -0,0 +1,69 @@
+import { useContext } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { IconCheck, IconX } from '@/ui/icon';
+
+import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext';
+import { EditableFieldEntityIdContext } from '../contexts/EditableFieldEntityIdContext';
+import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { genericEntityFieldFamilySelector } from '../states/selectors/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldBooleanMetadata } from '../types/FieldMetadata';
+
+const StyledEditableBooleanFieldContainer = styled.div`
+  cursor: pointer;
+  display: flex;
+`;
+const StyledBooleanFieldIcon = styled.div``;
+const StyledEditableBooleanFieldValue = styled.div`
+  margin-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+export function GenericEditableBooleanFieldDisplayMode() {
+  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldBooleanMetadata>;
+
+  const [fieldValue, setFieldValue] = useRecoilState<boolean>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEditableFieldEntityId ?? '',
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
+    }),
+  );
+
+  const theme = useTheme();
+  const updateField = useUpdateGenericEntityField();
+
+  function toggleValue() {
+    const newToggledValue = !fieldValue;
+    setFieldValue(newToggledValue);
+
+    if (currentEditableFieldEntityId && updateField) {
+      updateField(
+        currentEditableFieldEntityId,
+        currentEditableFieldDefinition,
+        newToggledValue,
+      );
+    }
+  }
+
+  return (
+    <StyledEditableBooleanFieldContainer onClick={toggleValue}>
+      <StyledBooleanFieldIcon>
+        {fieldValue ? (
+          <IconCheck size={theme.icon.size.sm} />
+        ) : (
+          <IconX size={theme.icon.size.sm} />
+        )}
+      </StyledBooleanFieldIcon>
+      <StyledEditableBooleanFieldValue>
+        {fieldValue ? 'True' : 'False'}
+      </StyledEditableBooleanFieldValue>
+    </StyledEditableBooleanFieldContainer>
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableField.tsx

@@ -1,6 +1,7 @@
 import { useContext } from 'react';
 
 import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext';
+import { isFieldBoolean } from '../types/guards/isFieldBoolean';
 import { isFieldDate } from '../types/guards/isFieldDate';
 import { isFieldNumber } from '../types/guards/isFieldNumber';
 import { isFieldPhone } from '../types/guards/isFieldPhone';
@@ -9,6 +10,7 @@ import { isFieldRelation } from '../types/guards/isFieldRelation';
 import { isFieldText } from '../types/guards/isFieldText';
 import { isFieldURL } from '../types/guards/isFieldURL';
 
+import { GenericEditableBooleanField } from './GenericEditableBooleanField';
 import { GenericEditableDateField } from './GenericEditableDateField';
 import { GenericEditableNumberField } from './GenericEditableNumberField';
 import { GenericEditablePhoneField } from './GenericEditablePhoneField';
@@ -34,6 +36,8 @@ export function GenericEditableField() {
     return <GenericEditableTextField />;
   } else if (isFieldPhone(fieldDefinition)) {
     return <GenericEditablePhoneField />;
+  } else if (isFieldBoolean(fieldDefinition)) {
+    return <GenericEditableBooleanField />;
   } else {
     console.warn(
       `Unknown field metadata type: ${fieldDefinition.type} in GenericEditableField`,