Display notifications to the user (4ian#6432)

Author: AlexandreSi

newIDE/app/scripts/theme-templates/theme.json

@@ -343,6 +343,11 @@
           "value": "#494952"
         }
       }
+    },
+    "notification": {
+      "badge-color": {
+        "value": "#6BAFFF"
+      }
     }
   },
   "input": {

newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/ProjectFileListItem.js

@@ -156,7 +156,14 @@ const ListItemLastModification = ({
             {isCurrentProjectOpened ? (
               <Trans>Modifying</Trans>
             ) : (
-              getRelativeOrAbsoluteDisplayDate(i18n, lastModifiedAt)
+              getRelativeOrAbsoluteDisplayDate({
+                i18n,
+                dateAsNumber: lastModifiedAt,
+                sameDayFormat: 'todayAndHour',
+                dayBeforeFormat: 'yesterdayAndHour',
+                relativeLimit: 'currentWeek',
+                sameWeekFormat: 'thisWeek',
+              })
             )}
           </Text>
         </LineStackLayout>

newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageHeader.js

@@ -15,6 +15,7 @@ import { useResponsiveWindowSize } from '../../../UI/Responsive/ResponsiveWindow
 import TextButton from '../../../UI/TextButton';
 import IconButton from '../../../UI/IconButton';
 import { isNativeMobileApp } from '../../../Utils/Platform';
+import NotificationChip from '../../../UI/User/NotificationChip';
 const electron = optionalRequire('electron');
 
 type Props = {|
@@ -81,6 +82,7 @@ export const HomePageHeader = ({
                 />
               )}
               <UserChip onOpenProfile={onOpenProfile} />
+              <NotificationChip />
               <TextButton
                 label={i18n.language.toUpperCase()}
                 onClick={onOpenLanguageDialog}

newIDE/app/src/Profile/AuthenticatedUserContext.js

@@ -14,6 +14,7 @@ import { type CloudProjectWithUserAccessInfo } from '../Utils/GDevelopServices/P
 import { User as FirebaseUser } from 'firebase/auth';
 import { type Badge } from '../Utils/GDevelopServices/Badge';
 import { type Recommendation } from '../Utils/GDevelopServices/User';
+import { type Notification } from '../Utils/GDevelopServices/Notification';
 import {
   type Limits,
   type Usages,
@@ -41,6 +42,7 @@ export type AuthenticatedUser = {|
   gameTemplatePurchases: ?Array<Purchase>,
   assetPackPurchases: ?Array<Purchase>,
   recommendations: ?Array<Recommendation>,
+  notifications: ?Array<Notification>,
   limits: ?Limits,
   authenticationError: ?AuthError,
   usages: ?Usages,
@@ -71,6 +73,7 @@ export type AuthenticatedUser = {|
   onRefreshLimits: () => Promise<void>,
   onRefreshGameTemplatePurchases: () => Promise<void>,
   onRefreshAssetPackPurchases: () => Promise<void>,
+  onRefreshNotifications: () => Promise<void>,
   onPurchaseSuccessful: () => Promise<void>,
   onSendEmailVerification: () => Promise<void>,
   onOpenEmailVerificationDialog: ({|
@@ -96,6 +99,7 @@ export const initialAuthenticatedUser = {
   gameTemplatePurchases: null,
   assetPackPurchases: null,
   recommendations: null,
+  notifications: null,
   subscription: null,
   usages: null,
   limits: null,
@@ -119,6 +123,7 @@ export const initialAuthenticatedUser = {
   onRefreshLimits: async () => {},
   onRefreshGameTemplatePurchases: async () => {},
   onRefreshAssetPackPurchases: async () => {},
+  onRefreshNotifications: async () => {},
   onPurchaseSuccessful: async () => {},
   onSendEmailVerification: async () => {},
   onOpenEmailVerificationDialog: () => {},

newIDE/app/src/Profile/AuthenticatedUserProvider.js

@@ -58,6 +58,7 @@ import { extractGDevelopApiErrorStatusAndCode } from '../Utils/GDevelopServices/
 import { showErrorBox } from '../UI/Messages/MessageBox';
 import { userCancellationErrorName } from '../LoginProvider/Utils';
 import { listUserPurchases } from '../Utils/GDevelopServices/Shop';
+import { listNotifications } from '../Utils/GDevelopServices/Notification';
 
 type Props = {|
   authentication: Authentication,
@@ -94,6 +95,7 @@ const cleanUserTracesOnDevice = async () => {
 };
 
 const TEN_SECONDS = 10 * 1000;
+const ONE_MINUTE = 6 * TEN_SECONDS;
 
 export default class AuthenticatedUserProvider extends React.Component<
   Props,
@@ -123,6 +125,7 @@ export default class AuthenticatedUserProvider extends React.Component<
   _automaticallyUpdateUserProfile = true;
   _hasNotifiedUserAboutEmailVerification = false;
   _abortController: ?AbortController = null;
+  _notificationPollingIntervalId: ?IntervalID = null;
 
   // Cloud projects are requested in 2 different places at app opening.
   // - First one comes from user authenticating and automatically fetching
@@ -212,6 +215,7 @@ export default class AuthenticatedUserProvider extends React.Component<
         onRefreshLimits: this._fetchUserLimits,
         onRefreshGameTemplatePurchases: this._fetchUserGameTemplatePurchases,
         onRefreshAssetPackPurchases: this._fetchUserAssetPackPurchases,
+        onRefreshNotifications: this._fetchUserNotifications,
         onPurchaseSuccessful: this._fetchUserProducts,
         onSendEmailVerification: this._doSendEmailVerification,
         onOpenEmailVerificationDialog: ({
@@ -239,6 +243,10 @@ export default class AuthenticatedUserProvider extends React.Component<
   // - When the user logs out.
   // - When the user deletes their account.
   _markAuthenticatedUserAsLoggedOut() {
+    if (this._notificationPollingIntervalId) {
+      clearInterval(this._notificationPollingIntervalId);
+      this._notificationPollingIntervalId = null;
+    }
     this.setState(({ authenticatedUser }) => ({
       authenticatedUser: {
         ...authenticatedUser,
@@ -267,6 +275,10 @@ export default class AuthenticatedUserProvider extends React.Component<
     try {
       const firebaseUser = await authentication.getFirebaseUser();
       if (!firebaseUser) {
+        if (this._notificationPollingIntervalId) {
+          clearInterval(this._notificationPollingIntervalId);
+          this._notificationPollingIntervalId = null;
+        }
         this.setState(({ authenticatedUser }) => ({
           authenticatedUser: {
             ...authenticatedUser,
@@ -503,6 +515,7 @@ export default class AuthenticatedUserProvider extends React.Component<
       }
     );
     this._fetchUserBadges();
+    this._fetchUserNotifications();
 
     // Load and wait for the user profile to be fetched.
     // (and let the error propagate if any).
@@ -523,6 +536,15 @@ export default class AuthenticatedUserProvider extends React.Component<
       }
     }
 
+    if (!this._notificationPollingIntervalId) {
+      this._notificationPollingIntervalId = setInterval(() => {
+        // This property is correctly updated by Electron, browsers and capacitor.
+        if (document.visibilityState === 'visible') {
+          this._fetchUserNotifications();
+        }
+      }, 10 * ONE_MINUTE);
+    }
+
     this.setState(
       ({ authenticatedUser }) => ({
         authenticatedUser: {
@@ -561,6 +583,28 @@ export default class AuthenticatedUserProvider extends React.Component<
     }
   };
 
+  _fetchUserNotifications = async () => {
+    const { authentication } = this.props;
+    const firebaseUser = this.state.authenticatedUser.firebaseUser;
+    if (!firebaseUser) return;
+
+    try {
+      const notifications = await listNotifications(
+        authentication.getAuthorizationHeader,
+        { userId: firebaseUser.uid }
+      );
+
+      this.setState(({ authenticatedUser }) => ({
+        authenticatedUser: {
+          ...authenticatedUser,
+          notifications,
+        },
+      }));
+    } catch (error) {
+      console.error('Error while loading user notifications:', error);
+    }
+  };
+
   _fetchUserUsages = async () => {
     const { authentication } = this.props;
     const firebaseUser = this.state.authenticatedUser.firebaseUser;

newIDE/app/src/UI/Badge.js

@@ -1,13 +1,30 @@
 // @flow
 import * as React from 'react';
 import MuiBadge from '@material-ui/core/Badge';
+import { makeStyles } from '@material-ui/core/styles';
 
 type Props = {|
   children: React.Node,
-  badgeContent: React.Node,
-  color: 'error' | 'primary' | 'secondary' | 'default',
+  badgeContent?: React.Node,
+  color?: 'error' | 'primary' | 'secondary' | 'default',
+  variant?: 'dot',
+  forcedColor?: string,
+  invisible?: boolean,
+  overlap?: 'circle',
 |};
 
-const Badge = (props: Props) => <MuiBadge {...props} />;
+const Badge = ({ forcedColor, ...otherProps }: Props) => {
+  const stylesForBadge = React.useMemo(
+    () =>
+      forcedColor
+        ? makeStyles({
+            badge: { backgroundColor: forcedColor },
+          })
+        : () => {},
+    [forcedColor]
+  );
+  const classes = stylesForBadge();
+  return <MuiBadge {...otherProps} classes={classes} />;
+};
 
 export default Badge;

newIDE/app/src/UI/CustomSvgIcons/Annotation.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+export default React.memo(props => (
+  <SvgIcon {...props} width="32" height="32" viewBox="0 0 32 32" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.00004 7.33331C8.07957 7.33331 7.33337 8.0795 7.33337 8.99998V19C7.33337 19.9205 8.07956 20.6666 9.00004 20.6666H12.5C12.7884 20.6666 13.0627 20.7911 13.2526 21.0081L16 24.1481L18.7475 21.0081C18.9374 20.7911 19.2117 20.6666 19.5 20.6666H23C23.9206 20.6666 24.6667 19.9205 24.6667 19V8.99998C24.6667 8.07949 23.9205 7.33331 23 7.33331H9.00004ZM5.33337 8.99998C5.33337 6.97493 6.975 5.33331 9.00004 5.33331H23C25.0251 5.33331 26.6667 6.97494 26.6667 8.99998V19C26.6667 21.0251 25.0251 22.6666 23 22.6666H19.9538L16.7526 26.3252C16.5627 26.5422 16.2884 26.6666 16 26.6666C15.7117 26.6666 15.4374 26.5422 15.2475 26.3252L12.0463 22.6666H9.00004C6.97501 22.6666 5.33337 21.0251 5.33337 19V8.99998Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.6667 14.6666C10.6667 13.9304 11.2636 13.3333 12 13.3333C12.7365 13.3333 13.3334 13.9304 13.3334 14.6666C13.3334 15.4029 12.7365 16 12 16C11.2636 16 10.6667 15.4029 10.6667 14.6666Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.6667 14.6666C14.6667 13.9303 15.2637 13.3333 16 13.3333C16.7364 13.3333 17.3334 13.9303 17.3334 14.6666C17.3334 15.403 16.7364 16 16 16C15.2637 16 14.6667 15.403 14.6667 14.6666Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M18.6667 14.6666C18.6667 13.9303 19.2637 13.3333 20 13.3333C20.7364 13.3333 21.3334 13.9303 21.3334 14.6666C21.3334 15.403 20.7364 16 20 16C19.2637 16 18.6667 15.403 18.6667 14.6666Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));

newIDE/app/src/UI/CustomSvgIcons/Bell.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+export default React.memo(props => (
+  <SvgIcon {...props} width="17" height="16" viewBox="0 0 17 16" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.66707 6.66663C4.66707 4.45749 6.45794 2.66663 8.66707 2.66663C10.8762 2.66663 12.6671 4.45748 12.6671 6.66663V7.88819L13.9528 10.6204C14.0257 10.7753 14.0143 10.9567 13.9226 11.1012C13.8309 11.2457 13.6716 11.3333 13.5004 11.3333H3.83374C3.66257 11.3333 3.50329 11.2457 3.41157 11.1012C3.31986 10.9567 3.30845 10.7753 3.38133 10.6204L4.66707 7.88819V6.66663ZM8.66707 3.66663C7.01022 3.66663 5.66707 5.00978 5.66707 6.66663V7.99996C5.66707 8.07356 5.65082 8.14626 5.61948 8.21286L4.62163 10.3333H12.7125L11.7147 8.21286C11.6833 8.14626 11.6671 8.07356 11.6671 7.99996V6.66663C11.6671 5.00977 10.3239 3.66663 8.66707 3.66663Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.16706 11.1623C7.16472 10.8881 6.94177 10.6666 6.66707 10.6666C6.39093 10.6666 6.16707 10.8905 6.16707 11.1666H6.66707C6.16707 11.1666 6.16707 11.1663 6.16707 11.1666L6.16708 11.1679L6.16708 11.1693L6.1671 11.1726L6.16723 11.1811C6.16735 11.1876 6.16758 11.1957 6.16796 11.2053C6.16873 11.2246 6.17016 11.2501 6.17281 11.2809C6.17808 11.3424 6.18826 11.4262 6.20803 11.5251C6.24722 11.721 6.32626 11.9871 6.48833 12.2572C6.83186 12.8298 7.49768 13.3333 8.66707 13.3333C9.83646 13.3333 10.5023 12.8298 10.8458 12.2572C11.0079 11.9871 11.0869 11.721 11.1261 11.5251C11.1459 11.4262 11.1561 11.3424 11.1613 11.2809C11.164 11.2501 11.1654 11.2246 11.1662 11.2053C11.1666 11.1957 11.1668 11.1876 11.1669 11.1811L11.167 11.1726L11.1671 11.1693L11.1671 11.1679C11.1671 11.1676 11.1671 11.1666 10.6671 11.1666H11.1671C11.1671 10.8905 10.9432 10.6666 10.6671 10.6666C10.3924 10.6666 10.1694 10.8881 10.1671 11.1623"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));

newIDE/app/src/UI/CustomSvgIcons/Cart.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+export default React.memo(props => (
+  <SvgIcon {...props} width="32" height="32" viewBox="0 0 32 32" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.33337 6.33331C5.33337 5.78103 5.78109 5.33331 6.33337 5.33331H9.33337C9.79224 5.33331 10.1922 5.64561 10.3035 6.09078L11.1142 9.33331H25.6667C25.9722 9.33331 26.261 9.47296 26.4506 9.71244C26.6403 9.95193 26.7101 10.265 26.6401 10.5624L24.4572 19.8398C24.0674 21.496 22.5896 22.6666 20.888 22.6666H15.386C13.7223 22.6666 12.2671 21.5465 11.8414 19.9383L9.36724 10.5914C9.36614 10.5872 9.36507 10.5831 9.36402 10.579C9.36376 10.5779 9.36349 10.5769 9.36323 10.5758L8.5526 7.33331H6.33337C5.78109 7.33331 5.33337 6.8856 5.33337 6.33331ZM11.6325 11.3333L13.7748 19.4265C13.7748 19.4265 13.7748 19.4265 13.7748 19.4265C13.9683 20.1575 14.6298 20.6666 15.386 20.6666H20.888C21.6614 20.6666 22.3332 20.1346 22.5104 19.3817L24.4041 11.3333H11.6325Z"
+      fill="currentColor"
+    />
+    <path
+      d="M13.3334 26.6666C14.0698 26.6666 14.6667 26.0697 14.6667 25.3333C14.6667 24.5969 14.0698 24 13.3334 24C12.597 24 12 24.5969 12 25.3333C12 26.0697 12.597 26.6666 13.3334 26.6666Z"
+      fill="currentColor"
+    />
+    <path
+      d="M22.6667 26.6666C23.4031 26.6666 24 26.0697 24 25.3333C24 24.5969 23.4031 24 22.6667 24C21.9303 24 21.3334 24.5969 21.3334 25.3333C21.3334 26.0697 21.9303 26.6666 22.6667 26.6666Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));