Add action events + fix css alignement

src/components/Action/ActionCard.tsx

@@ -7,6 +7,11 @@ import './actionList.scss'
 import { Button } from '@material-ui/core'
 import EcogestureModal from 'components/Ecogesture/EcogestureModal'
 import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
+import UsageEventService from 'services/usageEvent.service'
+import { useClient } from 'cozy-client'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
 
 interface ActionCardProps {
   action: Ecogesture
@@ -21,7 +26,10 @@ const ActionCard: React.FC<ActionCardProps> = ({
 }: ActionCardProps) => {
   const [actionIcon, setActionIcon] = useState<string>('')
   const [openEcogestureModal, setOpenEcogestureModal] = useState<boolean>(false)
-
+  const client = useClient()
+  const { currentChallenge } = useSelector(
+    (state: AppStore) => state.ecolyo.challenge
+  )
   const toggleModal = useCallback(() => {
     setOpenEcogestureModal(prev => !prev)
   }, [])
@@ -29,8 +37,20 @@ const ActionCard: React.FC<ActionCardProps> = ({
   const selectEcogesture = useCallback(() => {
     setSelectedAction(action)
     setShowList(false)
+    UsageEventService.addEvent(client, {
+      type: UsageEventType.ACTION_CHANGE_EVENT,
+      target: action.id,
+      context: currentChallenge ? currentChallenge.id : '',
+    })
     toggleModal()
-  }, [setSelectedAction, setShowList, action, toggleModal])
+  }, [
+    setSelectedAction,
+    setShowList,
+    action,
+    toggleModal,
+    currentChallenge,
+    client,
+  ])
 
   useEffect(() => {
     importIconbyId(action.id, 'ecogesture').then(icon => {

src/components/Action/ActionDone.tsx

@@ -12,6 +12,8 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import starFilled from 'assets/icons/visu/challenge/starFilled.svg'
 import './actionDone.scss'
 import { toggleChallengeActionNotification } from 'store/global/global.actions'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import UsageEventService from 'services/usageEvent.service'
 interface ActionDoneProps {
   currentChallenge: UserChallenge
 }
@@ -29,6 +31,13 @@ const ActionDone: React.FC<ActionDoneProps> = ({
       currentChallenge,
       UserChallengeUpdateFlag.ACTION_DONE
     )
+    await UsageEventService.addEvent(client, {
+      type: UsageEventType.ACTION_END_EVENT,
+      target: currentChallenge.action.ecogesture
+        ? currentChallenge.action.ecogesture.id
+        : '',
+      context: currentChallenge.id,
+    })
     dispatch(toggleChallengeActionNotification(false))
     dispatch(updateUserChallengeList(updatedChallenge))
     history.goBack()

src/components/Action/ActionModal.tsx

@@ -12,6 +12,8 @@ import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import { updateUserChallengeList } from 'store/challenge/challenge.actions'
 import chronoMini from 'assets/icons/visu/action/chrono-mini.svg'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import UsageEventService from 'services/usageEvent.service'
 
 interface ActionModalProps {
   open: boolean
@@ -38,6 +40,11 @@ const ActionModal: React.FC<ActionModalProps> = ({
       undefined,
       action
     )
+    await UsageEventService.addEvent(client, {
+      type: UsageEventType.ACTION_LAUNCH_EVENT,
+      target: action.id,
+      context: userChallenge.id,
+    })
     dispatch(updateUserChallengeList(updatedChallenge))
   }, [action, client, dispatch, userChallenge])
 

src/components/Challenge/challengeCardOnGoing.scss

@@ -63,6 +63,7 @@
     flex-direction: column;
     align-self: center;
     justify-content: space-between;
+    align-items: flex-start;
     span {
       margin-bottom: 0.3em;
     }