Add the ability to remove OOO events by clicking on a button

src/CONST.js

@@ -301,6 +301,7 @@ const CONST = {
                 CREATED: 'CREATED',
                 IOU: 'IOU',
                 RENAMED: 'RENAMED',
+                CHRONOSOOOLIST: 'CHRONOSOOOLIST',
             },
         },
         ARCHIVE_REASON: {

src/components/ReportActionItem/ChronosOOOListActions.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
+import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
+import styles from '../../styles/styles';
+import Text from '../Text';
+import Button from '../Button';
+import * as Chronos from '../../libs/actions/Chronos';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import DateUtils from '../../libs/DateUtils';
+import OfflineWithFeedback from '../OfflineWithFeedback';
+
+const propTypes = {
+    /** The ID of the report */
+    reportID: PropTypes.string.isRequired,
+
+    /** All the data of the action */
+    action: PropTypes.shape(reportActionPropTypes).isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+const ChronosOOOListActions = (props) => {
+    const events = lodashGet(props.action, 'originalMessage.events', []);
+
+    if (!events.length) {
+        return (
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.pt, styles.ml18]}>
+                <Text>You haven&apos;t created any events</Text>
+            </View>
+        );
+    }
+
+    return (
+        <OfflineWithFeedback
+            pendingAction={lodashGet(props.action, 'pendingAction', null)}
+        >
+            <View style={[styles.chatItemMessage]}>
+                {_.map(events, (event) => {
+                    const start = DateUtils.getLocalMomentFromDatetime(props.preferredLocale, lodashGet(event, 'start.date', ''));
+                    const end = DateUtils.getLocalMomentFromDatetime(props.preferredLocale, lodashGet(event, 'end.date', ''));
+                    return (
+                        <View key={event.id} style={[styles.flexRow, styles.pt, styles.ml18, styles.pr4, styles.alignItemsCenter]}>
+                            <Text style={[styles.flexShrink1]}>
+                                {event.lengthInDays > 0 ? (
+                                    props.translate('chronos.oooEventSummaryFullDay', {
+                                        summary: event.summary,
+                                        dayCount: event.lengthInDays,
+                                        date: end.format('dddd LL'),
+                                    })
+                                ) : (
+                                    props.translate('chronos.oooEventSummaryPartialDay', {
+                                        summary: event.summary,
+                                        timePeriod: `${start.format('LT')} - ${end.format('LT')}`,
+                                        date: end.format('dddd LL'),
+                                    })
+                                )}
+                            </Text>
+                            <Button
+                                small
+                                style={[styles.pl2]}
+                                onPress={() => Chronos.removeEvent(props.reportID, props.action.reportActionID, event.id, events)}
+                                ContentComponent={() => (
+                                    <Text style={styles.buttonSmallText}>
+                                        {props.translate('common.remove')}
+                                    </Text>
+                                )}
+                            />
+                        </View>
+                    );
+                })}
+            </View>
+        </OfflineWithFeedback>
+    );
+};
+
+ChronosOOOListActions.propTypes = propTypes;
+ChronosOOOListActions.displayName = 'ChronosOOOListActions';
+
+export default withLocalize(ChronosOOOListActions);

src/languages/en.js

@@ -1175,6 +1175,10 @@ export default {
     report: {
         genericAddCommentFailureMessage: 'Unexpected error while posting the comment, please try again later',
     },
+    chronos: {
+        oooEventSummaryFullDay: ({summary, dayCount, date}) => `${summary} for ${dayCount} ${dayCount === 1 ? 'day' : 'days'} until ${date}`,
+        oooEventSummaryPartialDay: ({summary, timePeriod, date}) => `${summary} from ${timePeriod} on ${date}`,
+    },
     footer: {
         features: 'Features',
         expenseManagement: 'Expense Management',

src/languages/es.js

@@ -1176,6 +1176,10 @@ export default {
     report: {
         genericAddCommentFailureMessage: 'Error inesperado al agregar el comentario, por favor inténtalo más tarde',
     },
+    chronos: {
+        oooEventSummaryFullDay: ({summary, dayCount, date}) => `${summary} por ${dayCount} ${dayCount === 1 ? 'día' : 'días'} hasta el ${date}`,
+        oooEventSummaryPartialDay: ({summary, timePeriod, date}) => `${summary} de ${timePeriod} del ${date}`,
+    },
     footer: {
         features: 'Características',
         expenseManagement: 'Gestión de Gastos',

src/libs/actions/Chronos.js

@@ -0,0 +1,62 @@
+import _ from 'underscore';
+import CONST from '../../CONST';
+import ONYXKEYS from '../../ONYXKEYS';
+import * as API from '../API';
+
+/**
+ * @param {String} reportID
+ * @param {String} reportActionID
+ * @param {String} eventID
+ * @param {Object[]} events
+ */
+const removeEvent = (reportID, reportActionID, eventID, events) => {
+    const optimisticData = [
+        {
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
+            value: {
+                [reportActionID]: {
+                    pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                    originalMessage: {
+                        events: _.reject(events, event => event.id === eventID),
+                    },
+                },
+            },
+        },
+    ];
+
+    const successData = [
+        {
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
+            value: {
+                [reportActionID]: {
+                    pendingAction: null,
+                },
+            },
+        },
+    ];
+
+    const failureData = [
+        {
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
+            value: {
+                [reportActionID]: {
+                    originalMessage: {events},
+                    pendingAction: null,
+                },
+            },
+        },
+    ];
+
+    API.write('Chronos_RemoveOOOEvent', {
+        googleEventID: eventID,
+        reportActionID,
+    }, {optimisticData, successData, failureData});
+};
+
+export {
+    // eslint-disable-next-line import/prefer-default-export
+    removeEvent,
+};

src/pages/home/report/ReportActionItem.js

@@ -35,6 +35,7 @@ import * as ReportActions from '../../../libs/actions/ReportActions';
 import reportPropTypes from '../../reportPropTypes';
 import {ShowContextMenuContext} from '../../../components/ShowContextMenuContext';
 import focusTextInputAfterAnimation from '../../../libs/focusTextInputAfterAnimation';
+import ChronosOOOListActions from '../../../components/ReportActionItem/ChronosOOOListActions';
 import ReportActionItemReactions from '../../../components/Reactions/ReportActionItemReactions';
 import * as Report from '../../../libs/actions/Report';
 
@@ -224,7 +225,9 @@ class ReportActionItem extends Component {
         if (this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED) {
             return <RenameAction action={this.props.action} />;
         }
-
+        if (this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CHRONOSOOOLIST) {
+            return <ChronosOOOListActions action={this.props.action} reportID={this.props.report.reportID} />;
+        }
         return (
             <PressableWithSecondaryInteraction
                 pointerEvents={this.props.action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE ? 'none' : 'auto'}

src/styles/utilities/spacing.js

@@ -141,6 +141,10 @@ export default {
         marginLeft: 40,
     },
 
+    ml18: {
+        marginLeft: 72,
+    },
+
     mln5: {
         marginLeft: -20,
     },