feat(app-board): add trigger review flow

packages/game-app/src/_shared/components/Button/Button.tsx

@@ -4,26 +4,14 @@ import { ButtonContent, NotHoverIconWrapper, StyledButton, Variants } from './Bu
 type Props = {
   id?: string;
   label: string;
-  hoverLabel?: string;
   variant?: Variants;
   onClick: () => void;
   disabled?: boolean;
   leftIcon?: React.ReactElement;
-  leftIconHover?: React.ReactElement;
   color?: React.ComponentProps<typeof StyledButton>['color'];
 };
 
-const Button: React.FC<Props> = ({
-  variant = 'default',
-  label,
-  onClick,
-  id,
-  disabled,
-  hoverLabel,
-  leftIcon,
-  leftIconHover,
-  color,
-}) => {
+const Button: React.FC<Props> = ({ variant = 'default', label, onClick, id, disabled, leftIcon, color }) => {
   return (
     <StyledButton
       type="button"

packages/game-app/src/_shared/components/Dialog/Dialog.tsx

@@ -17,23 +17,34 @@ type Props = {
    * Content placed inside the dialog under the title
    */
   children?: React.ReactNode;
+  DialogContainerComponent?: React.ElementType;
+  // TODO improve types
+  DialogContainerProps?: object;
 };
 
 /**
  * Dialog component that appears at the center of the screen with animation inside a {{GlassOverlay}}
  *
  */
-const Dialog: React.FC<Props> = ({ open, title, children }) => {
+const Dialog: React.FC<Props> & { DialogContainer: typeof DialogContainer } = ({
+  open,
+  title,
+  DialogContainerComponent = DialogContainer,
+  DialogContainerProps = {},
+  children,
+}) => {
   return (
     <GlassOverlay open={open}>
-      <DialogContainer>
+      <DialogContainerComponent {...DialogContainerProps}>
         <Typography variant="dialogHead">{title}</Typography>
         {children}
-      </DialogContainer>
+      </DialogContainerComponent>
     </GlassOverlay>
   );
 };
 
 Dialog.displayName = 'Dialog';
 
+Dialog.DialogContainer = DialogContainer;
+
 export default Dialog;

packages/game-app/src/_shared/components/ExpandableTopPanel/ExpandableTopPanel.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { ExpandIcon, PanelContent, PanelContentWrapper, PanelHeader, PanelWrapper } from './ExpandableTopPanel.styled';
+import Typography from '../Typography';
 
 type Props = {
   className?: string;
@@ -23,7 +24,9 @@ const ExpandableTopPanel: React.FC<Props> = ({ className, label, children }) =>
   return (
     <PanelWrapper className={className} onClick={() => setCollapsed(c => !c)}>
       <PanelHeader>
-        {label}
+        <Typography variant="content" fontWeight="600">
+          {label}
+        </Typography>
         <ExpandIcon collapsed={collapsed}>^</ExpandIcon>
       </PanelHeader>
       <PanelContentWrapper collapsed={collapsed}>

packages/game-app/src/_shared/components/Input/Input.tsx

@@ -13,7 +13,7 @@ type Props = {
 const Input: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>(
   ({ variant = 'default', className, iconLeft, iconRight, ...rest }, ref) => {
     return (
-      <Box position="relative">
+      <Box position="relative" width="100%">
         <StyledInput
           ref={ref}
           data-cy={rest.id}

packages/game-app/src/assets/i18n/en.ts

@@ -28,6 +28,15 @@ const translations = {
     },
     backToGame: 'Back to game',
     rules: 'Game Rules',
+    triggerReview: {
+      title: 'Trigger reivew',
+      subtitle: 'If you continue, the players will be asked to review their pipeline.',
+      buttonText: 'Trigger reivew',
+      reviewTime: "It's review-time!",
+      reviewUnlocked:
+        'You have unlocked the review, which can be found beside the scenario on your screen. Use it to reflect on your pipeline with your team.',
+      understood: 'Understood',
+    },
   },
   login: {
     title: 'Sign in to play',

packages/game-app/src/customeTheme.d.ts

@@ -25,6 +25,7 @@ declare module 'styled-components' {
       activeAccent: string;
       activeAccentLight: string;
       textColor: string;
+      buttonGrey: string;
     };
     cardsTypes: {
       [key: string]: string;

packages/game-app/src/gameView/components/BottomWidgetsRow/BottomWidgetsRow.styled.tsx

@@ -8,7 +8,7 @@ export const BottomWidgetsRowContainer = styled.div`
   flex-direction: row;
   align-items: flex-end;
   & > *:not(:first-child) {
-    margin-left: 50px;
+    margin-left: 24px;
   }
 `;
 

packages/game-app/src/gameView/components/BottomWidgetsRow/BottomWidgetsRow.tsx

@@ -11,11 +11,13 @@ import { useZoomPanRefs } from '../ZoomPanContext';
 import { calculatePanAndZoomToFitWindow } from '../../utils/fitToWindow';
 import { useSelector } from 'react-redux';
 import { selectors } from '../../slice';
+import ReviewPanel from '../ReviewPanel';
 
 type Props = {};
 
 const BottomWidgetsRowStyled: React.FC<Props> = () => {
   const state = useSelector(selectors.getCardStateForUI);
+  const review = useSelector(selectors.getReview);
 
   const { setScaleAndPanRef, zoomRef } = useZoomPanRefs();
 
@@ -57,6 +59,7 @@ const BottomWidgetsRowStyled: React.FC<Props> = () => {
   return (
     <BottomWidgetsRowContainer>
       <ScenarioPanel />
+      {review && <ReviewPanel />}
       <PoweredByContainer>
         <Typography variant="label" color="#9F998F" as="span">
           Powered By

packages/game-app/src/gameView/components/ReviewPanel/ReviewPanel.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ExpandableTopPanel, Typography } from '@pipeline/components';
+
+type Props = {};
+
+// TODO add real review content
+const ReviewPanel: React.FC<Props> = () => {
+  return (
+    <ExpandableTopPanel label="Review">
+      <Typography variant="contentHead" as="div" mt={2}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua
+      </Typography>
+    </ExpandableTopPanel>
+  );
+};
+
+ReviewPanel.displayName = 'ReviewPanel';
+
+export default ReviewPanel;

packages/game-app/src/gameView/components/ReviewPanel/index.ts

@@ -0,0 +1,3 @@
+import ReviewPanel from './ReviewPanel';
+
+export default ReviewPanel;

packages/game-app/src/gameView/components/ShareGameDialog/ShareGameDialog.tsx

@@ -36,7 +36,7 @@ const ShareGameDialog: React.FC<Props> = ({ isOpen, close }) => {
         {t('game.share.subtitle')}
       </Typography>
       <Box display="flex" flexDirection="row" mt={4}>
-        <Input readOnly variant="clear" color="activeAccentLight" value={url} />
+        <Input flex={1} readOnly variant="clear" color="activeAccentLight" value={url} />
         <IconButton variant="clear" onClick={() => copy(url)}>
           <CopyIcon />
         </IconButton>

packages/game-app/src/gameView/components/TopWidgetsRow/TopWidgetsRow.tsx

@@ -11,6 +11,7 @@ import { RoutingPath } from '@pipeline/routing';
 import { useTranslate } from '@pipeline/i18n';
 import ShareGameDialog from '../ShareGameDialog';
 import RulesOverlay from '../RulesOverlay';
+import TriggerReviewDialog from '../TriggerReviewDialog';
 
 type Props = {
   toggleBackGround: () => void;
@@ -21,13 +22,12 @@ const TopWidgetsRow: React.FC<Props> = ({ toggleBackGround }) => {
 
   const shareDialog = useDialog();
   const rulesOverlay = useDialog();
+  const triggerReviewOverlay = useDialog();
 
   const t = useTranslate();
 
   const exitGame = () => history.replace(RoutingPath.Dashboard);
 
-  // TODO
-  const triggerReview = () => toggleBackGround();
   // TODO
   const contactUs = () => ({});
 
@@ -49,14 +49,15 @@ const TopWidgetsRow: React.FC<Props> = ({ toggleBackGround }) => {
             <RulesIcon />
           </IconButton>
 
-          <IconButton variant="clear" onClick={triggerReview}>
+          <IconButton variant="clear" onClick={triggerReviewOverlay.open}>
             <TriggerReviewIcon />
           </IconButton>
         </ButtonsBar>
         <Button onClick={contactUs} label={t('game.contactUs')} />
       </TopRowContainer>
       <ShareGameDialog isOpen={shareDialog.isOpen} close={shareDialog.close} />
       <RulesOverlay isOpen={rulesOverlay.isOpen} close={rulesOverlay.close} />
+      <TriggerReviewDialog isOpen={triggerReviewOverlay.isOpen} close={triggerReviewOverlay.close} />
     </>
   );
 };

packages/game-app/src/gameView/components/TriggerReviewDialog/TriggerReviewDialog.styled.tsx

@@ -0,0 +1,23 @@
+import styled, { css } from 'styled-components';
+import { Dialog } from '@pipeline/components';
+
+export const TriggerDialogContainer = styled(Dialog.DialogContainer)<{ showReviewPosition: boolean }>`
+  transition: all 0.5s;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 650px;
+
+  ${props =>
+    props.showReviewPosition &&
+    css`
+      position: absolute;
+      top: unset;
+      left: 200px;
+      bottom: 55px;
+      transform: unset;
+    `}
+`;
+
+TriggerDialogContainer.displayName = 'TriggerDialogContainer';

packages/game-app/src/gameView/components/TriggerReviewDialog/TriggerReviewDialog.tsx

@@ -0,0 +1,51 @@
+import React, { useCallback, useState } from 'react';
+import { Box, Button, Dialog, Typography } from '@pipeline/components';
+import { useTranslate } from '@pipeline/i18n';
+import { TriggerDialogContainer } from './TriggerReviewDialog.styled';
+import { useDispatch } from 'react-redux';
+import { actions } from '../../slice';
+
+type Props = {
+  isOpen: boolean;
+  close: () => void;
+};
+
+const TriggerReviewDialog: React.FC<Props> = ({ isOpen, close }) => {
+  const t = useTranslate();
+
+  const [showReviewPosition, setShowReviewPosition] = useState(false);
+
+  const dispatch = useDispatch();
+
+  const trigger = useCallback(() => {
+    dispatch(actions.setReview(true));
+    setShowReviewPosition(true);
+  }, [dispatch]);
+
+  return (
+    <Dialog
+      open={isOpen}
+      title={t(!showReviewPosition ? 'game.triggerReview.title' : 'game.triggerReview.reviewTime')}
+      DialogContainerComponent={TriggerDialogContainer}
+      DialogContainerProps={{ showReviewPosition }}
+    >
+      <Typography mt={4} variant="content">
+        {t(!showReviewPosition ? 'game.triggerReview.subtitle' : 'game.triggerReview.reviewUnlocked')}
+      </Typography>
+      <Box display="flex" justifyContent="center" mt={5}>
+        <Button
+          label={t(!showReviewPosition ? 'game.triggerReview.buttonText' : 'game.triggerReview.understood')}
+          onClick={!showReviewPosition ? trigger : close}
+        />
+      </Box>
+      {!showReviewPosition && (
+        <Box display="flex" justifyContent="center" mt={2}>
+          <Button variant="clear" color="buttonGrey" label={t('general.cancel')} onClick={close} />
+        </Box>
+      )}
+    </Dialog>
+  );
+};
+TriggerReviewDialog.displayName = 'TriggerReviewDialog';
+
+export default TriggerReviewDialog;

packages/game-app/src/gameView/components/TriggerReviewDialog/index.ts

@@ -0,0 +1,3 @@
+import TriggerReviewDialog from './TriggerReviewDialog';
+
+export default TriggerReviewDialog;

packages/game-app/src/gameView/sagas/loadGame.ts

@@ -25,6 +25,7 @@ function* executeLoadGame(action: ReturnType<typeof actions.loadGame>) {
     deckCards: cards.filter(c => c.type === CardTypes.PipelineStep).map(c => c.id),
     cardsState: {},
     maxZIndex: -1000,
+    review: false,
   };
   yield put(
     actions.setInitialGameState({

packages/game-app/src/gameView/slice.ts

@@ -51,6 +51,8 @@ export interface GameState {
    * max z-index, the z-index of the last placed cards inside the board
    */
   maxZIndex: number;
+
+  review: boolean;
 }
 
 export interface State {
@@ -139,6 +141,9 @@ const slice = createSlice({
     setSearchText(state, action: PayloadAction<string>) {
       state.searchText = action.payload;
     },
+    setReview(state, action: PayloadAction<boolean>) {
+      state.gameState!.review = action.payload;
+    },
   },
 });
 
@@ -228,6 +233,8 @@ const getFilteredDeckCardsIds = createSelector(
   },
 );
 
+const getReview = createSelector(getGameState, gameState => gameState?.review);
+
 export const reducer = slice.reducer;
 export const name = slice.name;
 
@@ -250,4 +257,5 @@ export const selectors = {
   getGame,
   getFilteredDeckCardsIds,
   getSearchedText,
+  getReview,
 };

packages/game-app/src/theme.ts

@@ -26,6 +26,7 @@ const theme: DefaultTheme = {
     activeAccent: '#00867c',
     activeAccentLight: '#36B2AF',
     textColor: '#101820',
+    buttonGrey: '#B4AEA9',
   },
   space: [0, 4, 8, 16, 24, 32],
   cardsTypes: {