Add space image shape configuration

src/apis/space/types.ts

@@ -30,6 +30,7 @@ export interface Space {
   todayViews: number;
   contactPoints: SpaceContactPoint[];
   description?: string;
+  imageConfig?: SpaceImageConfig;
   defaultLanguage: string;
   profileCreateConfig?: SpaceProfileCreateConfig;
   profileCategoryConfig?: SpaceProfileCategoryConfig;
@@ -47,6 +48,13 @@ export interface SpaceContactPoint {
   value: string;
 }
 
+export interface SpaceImageConfig {
+  fitType?: string;
+  borderRadius?: number;
+  width?: string;
+  height?: string;
+}
+
 export interface SpaceProfileCreateConfig {
   defaultLanguage: string;
   supportedSocials?: SpaceSupportedSocial[];

src/services/umoh/edit/space-edit.service.ts

@@ -43,6 +43,11 @@ import {
   SpacePermissions,
   getSpacePermissionValue,
 } from '../../../utils/space-permission';
+import {
+  SpaceImageShapeType,
+  SpaceImageShapes,
+  getSpaceImageShapeValue,
+} from '../../../utils/space-image-shape';
 
 export class SpaceEditService implements SlashCommandService {
   readonly slashCommandName = SLASH_COMMANDS.UMOH;
@@ -155,6 +160,7 @@ export class SpaceEditService implements SlashCommandService {
               ({ language }) => language === space.defaultLanguage
             )?.text,
           maxCategorySelections: space.profileCategoryConfig?.maxItemNumber,
+          imageShape: getSpaceImageShapeValue(space).value,
           defaultLanguage: space.defaultLanguage,
           socialLinks: space.profileCreateConfig?.supportedSocials,
           subtitlePlaceholder:
@@ -231,6 +237,7 @@ export class SpaceEditService implements SlashCommandService {
       inputTitle,
       inputDescription,
       inputContacts,
+      inputImageShape,
       inputDefaultLanguage,
       inputCategorySelectPlaceholder,
       inputMaxCategorySelections,
@@ -248,6 +255,8 @@ export class SpaceEditService implements SlashCommandService {
       inputContacts?.split(/[\n,]+/).map((value) => getContactPoint(value)) ||
       [];
 
+    const imageShape = SpaceImageShapes[inputImageShape as SpaceImageShapeType];
+
     const defaultLanguage = inputDefaultLanguage || space.defaultLanguage;
     const localizedCategoryLabels = updateLocalizedTexts(
       space.profileCategoryConfig?.localizedCategoryLabels || [],
@@ -273,6 +282,7 @@ export class SpaceEditService implements SlashCommandService {
       title: inputTitle || space.title,
       description: inputDescription,
       contactPoints,
+      ...imageShape.criteria,
       defaultLanguage,
       profileCreateConfig: {
         ...space.profileCreateConfig,
@@ -369,6 +379,7 @@ export class SpaceEditService implements SlashCommandService {
                   `*${capitalizeFirstLetter(type)}*\n${value}`
               )
               .join('\n')}\n` +
+            `*Image shape*\n${getSpaceImageShapeValue(spaceUpdated).label}\n` +
             `*Default language*\n${spaceUpdated.defaultLanguage}`,
         },
       },

src/services/umoh/edit/space-edit.view.ts

@@ -10,6 +10,7 @@ import { ViewBuilder } from '../../../interfaces/view-builder';
 import { getSpaceUrl } from '../../../utils/space';
 import { getValuesFromState } from '../../../utils/slack';
 import { SpacePermissions } from '../../../utils/space-permission';
+import { SpaceImageShapes } from '../../../utils/space-image-shape';
 
 export interface SpaceCategoryOverflowActionValue {
   type: 'edit' | 'delete';
@@ -55,6 +56,7 @@ export class SpaceEditView implements ViewBuilder {
     inputTitle: 'input-title',
     inputDescription: 'input-description',
     inputContacts: 'input-contacts',
+    inputImageShape: 'input-image-shape',
     inputDefaultLanguage: 'input-default-language',
     inputCategorySelectPlaceholder: 'input-category-select-placeholder',
     inputMaxCategorySelections: 'input-max-category-selections',
@@ -88,6 +90,7 @@ export class SpaceEditView implements ViewBuilder {
         title: values.inputTitle || '',
         description: values.inputDescription,
         contacts: values.inputContacts,
+        imageShape: values.inputImageShape || '',
         defaultLanguage: values.inputDefaultLanguage || '',
         categorySelectPlaceholder: values.inputCategorySelectPlaceholder,
         maxCategorySelections: values.inputMaxCategorySelections
@@ -110,6 +113,7 @@ export class SpaceEditView implements ViewBuilder {
       title: string;
       description?: string;
       contacts?: string;
+      imageShape: string;
       defaultLanguage: string;
       categorySelectPlaceholder?: string;
       maxCategorySelections?: number;
@@ -152,6 +156,18 @@ export class SpaceEditView implements ViewBuilder {
       },
     ];
 
+    const imageShapeOptions: PlainTextOption[] = Object.values(
+      SpaceImageShapes
+    ).map((shape) => {
+      return {
+        value: shape.value,
+        text: {
+          type: 'plain_text',
+          text: shape.label,
+        },
+      };
+    });
+
     const socialOptions: PlainTextOption[] = Object.values(
       SpaceSupportedSocials
     ).map((social) => {
@@ -338,6 +354,22 @@ export class SpaceEditView implements ViewBuilder {
             },
           },
         },
+        {
+          type: 'section',
+          block_id: this.blockIds.inputImageShape,
+          text: {
+            type: 'mrkdwn',
+            text: '*Image Shape*',
+          },
+          accessory: {
+            type: 'static_select',
+            action_id: this.actionIds.selectIgnore,
+            initial_option: imageShapeOptions.find(
+              (option) => option.value === initialValues.imageShape
+            ),
+            options: imageShapeOptions,
+          },
+        },
         {
           type: 'section',
           block_id: this.blockIds.inputDefaultLanguage,

src/utils/space-image-shape.ts

@@ -0,0 +1,57 @@
+import { isEqual } from 'lodash';
+import { Space } from '../apis/space/types';
+
+export interface SpaceImageShape {
+  label: string;
+  value: string;
+  criteria?: Pick<Space, 'imageConfig'>;
+}
+
+export const SpaceImageShapes: Record<string, SpaceImageShape> = {
+  CIRCLE_DEFAULT: {
+    label: 'Circle (Default)',
+    value: 'CIRCLE_DEFAULT',
+    criteria: {
+      imageConfig: undefined,
+    },
+  },
+  RECTANGLE_HEIGHT_200: {
+    label: 'Rectangle (Height: 200px)',
+    value: 'RECTANGLE_HEIGHT_200',
+    criteria: {
+      imageConfig: {
+        fitType: 'contain',
+        borderRadius: 0,
+        width: '100%',
+        height: '200px',
+      },
+    },
+  },
+  RECTANGLE_HEIGHT_300: {
+    label: 'Rectangle (Height: 300px)',
+    value: 'RECTANGLE_HEIGHT_300',
+    criteria: {
+      imageConfig: {
+        fitType: 'contain',
+        borderRadius: 0,
+        width: '100%',
+        height: '300px',
+      },
+    },
+  },
+  CUSTOM: {
+    label: 'Custom',
+    value: 'CUSTOM',
+  },
+};
+
+export type SpaceImageShapeType = keyof typeof SpaceImageShapes;
+
+export const getSpaceImageShapeValue = (
+  criteria: SpaceImageShape['criteria']
+): SpaceImageShape => {
+  const imageShape = Object.values(SpaceImageShapes).find((shape) =>
+    isEqual(shape.criteria?.imageConfig, criteria?.imageConfig)
+  );
+  return imageShape || SpaceImageShapes.CUSTOM;
+};

src/utils/space.ts

@@ -1,7 +1,6 @@
 import Color from 'color';
 import {
   LocalizedText,
-  Space,
   SpaceContactPoint,
   SpaceProfileCategoryItem,
 } from '../apis/space/types';