Add square mask for workspace image upload

src/CONST.js

@@ -800,6 +800,11 @@ const CONST = {
     ICON_TYPE_AVATAR: 'avatar',
     ICON_TYPE_WORKSPACE: 'workspace',
 
+    IMAGE_CROP_MASK_TYPE: {
+        CIRCLE: 'circle',
+        SQUARE: 'square',
+    },
+
     AVATAR_SIZE: {
         LARGE: 'large',
         MEDIUM: 'medium',

src/components/AvatarCropModal/AvatarCropModal.js

@@ -50,6 +50,9 @@ const propTypes = {
     /** Modal visibility */
     isVisible: PropTypes.bool.isRequired,
 
+    /** Type of image crop mask */
+    imageCropMaskType: PropTypes.oneOf([CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, CONST.IMAGE_CROP_MASK_TYPE.SQUARE]),
+
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
 };
@@ -60,6 +63,7 @@ const defaultProps = {
     imageType: '',
     onClose: () => {},
     onSave: () => {},
+    imageCropMaskType: CONST.IMAGE_CROP_MASK_TYPE.CIRCLE,
 };
 
 // This component can't be written using class since reanimated API uses hooks.
@@ -339,6 +343,7 @@ const AvatarCropModal = (props) => {
                                 translateY={translateY}
                                 translateX={translateX}
                                 rotation={rotation}
+                                imageCropMaskType={props.imageCropMaskType}
                             />
                             <View style={[styles.mt5, styles.justifyContentBetween, styles.alignItemsCenter, styles.flexRow, StyleUtils.getWidthStyle(imageContainerSize)]}>
                                 <Icon src={Expensicons.Zoom} fill={themeColors.icons} />

src/components/AvatarCropModal/ImageCropView.js

@@ -9,6 +9,7 @@ import * as Expensicons from '../Icon/Expensicons';
 import * as StyleUtils from '../../styles/StyleUtils';
 import gestureHandlerPropTypes from './gestureHandlerPropTypes';
 import ControlSelection from '../../libs/ControlSelection';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** Link to image for cropping   */
@@ -37,12 +38,16 @@ const propTypes = {
 
     /** React-native-reanimated lib handler which executes when the user is panning image */
     panGestureEventHandler: gestureHandlerPropTypes,
+
+    /** Type of image crop mask */
+    imageCropMaskType: PropTypes.oneOf([CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, CONST.IMAGE_CROP_MASK_TYPE.SQUARE]),
 };
 
 const defaultProps = {
     imageUri: '',
     containerSize: 0,
     panGestureEventHandler: () => {},
+    imageCropMaskType: CONST.IMAGE_CROP_MASK_TYPE.CIRCLE,
 };
 
 const ImageCropView = (props) => {
@@ -64,14 +69,18 @@ const ImageCropView = (props) => {
         };
     }, [props.originalImageHeight, props.originalImageWidth]);
 
+    // If image crop mask type is square then apply border around View
+    const maskStyles = props.imageCropMaskType === CONST.IMAGE_CROP_MASK_TYPE.SQUARE ? styles.imageCropViewBorder : {};
+
     // We're preventing text selection with ControlSelection.blockElement to prevent safari
     // default behaviour of cursor - I-beam cursor on drag. See https://github.com/Expensify/App/issues/13688
     return (
         <PanGestureHandler onGestureEvent={props.panGestureEventHandler}>
             <Animated.View ref={ControlSelection.blockElement} style={[containerStyle, styles.imageCropContainer]}>
                 <Animated.Image style={[imageStyle, styles.h100, styles.w100]} source={{uri: props.imageUri}} resizeMode="contain" />
-                <View style={[containerStyle, styles.l0, styles.b0, styles.pAbsolute]}>
-                    <Icon src={Expensicons.ImageCropMask} width={props.containerSize} height={props.containerSize} />
+                <View style={[containerStyle, styles.l0, styles.b0, styles.pAbsolute, maskStyles]}>
+                    {props.imageCropMaskType === CONST.IMAGE_CROP_MASK_TYPE.CIRCLE
+                        && <Icon src={Expensicons.ImageCropMask} width={props.containerSize} height={props.containerSize} />}
                 </View>
             </Animated.View>
         </PanGestureHandler>

src/components/AvatarWithImagePicker.js

@@ -60,6 +60,9 @@ const propTypes = {
     /** Denotes whether it is an avatar or a workspace avatar */
     type: PropTypes.oneOf([CONST.ICON_TYPE_AVATAR, CONST.ICON_TYPE_WORKSPACE]),
 
+    /** Type of image crop mask */
+    imageCropMaskType: PropTypes.oneOf([CONST.IMAGE_CROP_MASK_TYPE.CIRCLE, CONST.IMAGE_CROP_MASK_TYPE.SQUARE]),
+
     ...withLocalizePropTypes,
 };
 
@@ -74,6 +77,7 @@ const defaultProps = {
     size: CONST.AVATAR_SIZE.DEFAULT,
     fallbackIcon: Expensicons.FallbackAvatar,
     type: CONST.ICON_TYPE_AVATAR,
+    imageCropMaskType: CONST.IMAGE_CROP_MASK_TYPE.CIRCLE,
 };
 
 class AvatarWithImagePicker extends React.Component {
@@ -309,6 +313,7 @@ class AvatarWithImagePicker extends React.Component {
                     imageUri={this.state.imageUri}
                     imageName={this.state.imageName}
                     imageType={this.state.imageType}
+                    imageCropMaskType={this.props.imageCropMaskType}
                 />
             </View>
         );

src/pages/workspace/WorkspaceSettingsPage.js

@@ -116,6 +116,7 @@ class WorkspaceSettingsPage extends React.Component {
                                 isUsingDefaultAvatar={!lodashGet(this.props.policy, 'avatar', null)}
                                 onImageSelected={file => Policy.updateWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''), file)}
                                 onImageRemoved={() => Policy.deleteWorkspaceAvatar(lodashGet(this.props.policy, 'id', ''))}
+                                imageCropMaskType={CONST.IMAGE_CROP_MASK_TYPE.SQUARE}
                             />
                         </OfflineWithFeedback>
                         <OfflineWithFeedback

src/styles/styles.js

@@ -2821,6 +2821,12 @@ const styles = {
         cursor: 'move',
     },
 
+    imageCropViewBorder: {
+        borderRadius: variables.cropViewBorderRadius,
+        borderWidth: 2,
+        borderColor: themeColors.text,
+    },
+
     sliderKnob: {
         backgroundColor: themeColors.success,
         position: 'absolute',

src/styles/variables.js

@@ -28,6 +28,7 @@ export default {
     componentBorderRadiusCard: 12,
     componentBorderRadiusRounded: 20,
     buttonBorderRadius: 100,
+    cropViewBorderRadius: 12,
     avatarSizeLarge: 80,
     avatarSizeHeader: 40,
     avatarSizeLargeBordered: 88,