Add banner to encourage to fill the github username in the profile

4ian · Apr 24, 2024 · e0fb618 · e0fb618
1 parent e64ab94
commit e0fb618
Show file tree

Hide file tree

Showing 14 changed files with 435 additions and 189 deletions.
diff --git a/newIDE/app/public/res/github-star-credits.svg b/newIDE/app/public/res/github-star-credits.svg
diff --git a/newIDE/app/src/AssetStore/AssetsHome.js b/newIDE/app/src/AssetStore/AssetsHome.js
@@ -28,6 +28,10 @@ import {
 import { useDebounce } from '../Utils/UseDebounce';
 import PromotionsSlideshow from '../Promotions/PromotionsSlideshow';
 import { ColumnStackLayout } from '../UI/Layout';
+import {
+  GithubStarCard,
+  shouldDisplayGithubStarCard,
+} from '../Profile/GithubStarCard';
 
 const cellSpacing = 2;
 
@@ -160,6 +164,7 @@ type Props = {|
   openedShopCategory: string | null,
   hideGameTemplates?: boolean,
   displayPromotions?: boolean,
+  onOpenProfile: () => void,
 |};
 
 export const AssetsHome = React.forwardRef<Props, AssetsHomeInterface>(
@@ -175,13 +180,17 @@ export const AssetsHome = React.forwardRef<Props, AssetsHomeInterface>(
       openedShopCategory,
       hideGameTemplates,
       displayPromotions,
+      onOpenProfile,
     }: Props,
     ref
   ) => {
     const { windowSize, isLandscape } = useResponsiveWindowSize();
-    const { receivedAssetPacks, receivedGameTemplates } = React.useContext(
-      AuthenticatedUserContext
-    );
+    const {
+      receivedAssetPacks,
+      receivedGameTemplates,
+      badges,
+      achievements,
+    } = React.useContext(AuthenticatedUserContext);
 
     const scrollView = React.useRef<?ScrollViewInterface>(null);
     React.useImperativeHandle(ref, () => ({
@@ -394,6 +403,12 @@ export const AssetsHome = React.forwardRef<Props, AssetsHomeInterface>(
             </Text>
 
             <PromotionsSlideshow />
+            {shouldDisplayGithubStarCard({ badges }) && (
+              <GithubStarCard
+                achievements={achievements}
+                onOpenProfile={onOpenProfile}
+              />
+            )}
           </ColumnStackLayout>
         ) : null}
         {allBundleTiles.length ? (

diff --git a/newIDE/app/src/AssetStore/index.js b/newIDE/app/src/AssetStore/index.js
@@ -61,6 +61,7 @@ type Props = {|
   onOpenPrivateGameTemplateListingData?: (
     privateGameTemplateListingData: PrivateGameTemplateListingData
   ) => void,
+  onOpenProfile: () => void,
 |};
 
 export type AssetStoreInterface = {|
@@ -98,6 +99,7 @@ export const AssetStore = React.forwardRef<Props, AssetStoreInterface>(
       hideGameTemplates,
       displayPromotions,
       onOpenPrivateGameTemplateListingData,
+      onOpenProfile,
     }: Props,
     ref
   ) => {
@@ -698,6 +700,7 @@ export const AssetStore = React.forwardRef<Props, AssetStoreInterface>(
                 openedShopCategory={openedShopCategory}
                 hideGameTemplates={hideGameTemplates}
                 displayPromotions={displayPromotions}
+                onOpenProfile={onOpenProfile}
               />
             ) : (
               <PlaceholderLoader />

diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/RecommendationList.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/RecommendationList.js
@@ -34,6 +34,10 @@ import { SurveyCard } from './SurveyCard';
 import PlaceholderLoader from '../../../../UI/PlaceholderLoader';
 import PromotionsSlideshow from '../../../../Promotions/PromotionsSlideshow';
 import { PrivateTutorialViewDialog } from '../../../../AssetStore/PrivateTutorials/PrivateTutorialViewDialog';
+import {
+  GithubStarCard,
+  shouldDisplayGithubStarCard,
+} from '../../../../Profile/GithubStarCard';
 
 const styles = {
   textTutorialContent: {
@@ -178,6 +182,7 @@ type Props = {|
   subscriptionPlansWithPricingSystems: ?(SubscriptionPlanWithPricingSystems[]),
   onStartSurvey: null | (() => void),
   hasFilledSurveyAlready: boolean,
+  onOpenProfile: () => void,
 |};
 
 const RecommendationList = ({
@@ -186,8 +191,15 @@ const RecommendationList = ({
   subscriptionPlansWithPricingSystems,
   onStartSurvey,
   hasFilledSurveyAlready,
+  onOpenProfile,
 }: Props) => {
-  const { recommendations, subscription, limits } = authenticatedUser;
+  const {
+    recommendations,
+    subscription,
+    limits,
+    badges,
+    achievements,
+  } = authenticatedUser;
   const { tutorials } = React.useContext(TutorialContext);
   const { getTutorialProgress } = React.useContext(PreferencesContext);
 
@@ -323,6 +335,13 @@ const RecommendationList = ({
             </Text>
             <Spacer />
             <PromotionsSlideshow />
+            <Spacer />
+            {shouldDisplayGithubStarCard({ badges }) && (
+              <GithubStarCard
+                achievements={achievements}
+                onOpenProfile={onOpenProfile}
+              />
+            )}
           </SectionRow>
         );
 

diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/SurveyCard.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/SurveyCard.js
@@ -1,27 +1,11 @@
 // @flow
 import * as React from 'react';
-import GDevelopThemeContext from '../../../../UI/Theme/GDevelopThemeContext';
 import RaisedButton from '../../../../UI/RaisedButton';
 import { Trans } from '@lingui/macro';
 import { Line, Spacer } from '../../../../UI/Grid';
-import {
-  ColumnStackLayout,
-  ResponsiveLineStackLayout,
-} from '../../../../UI/Layout';
+import { ColumnStackLayout } from '../../../../UI/Layout';
 import Text from '../../../../UI/Text';
-
-const styles = {
-  subscriptionContainer: {
-    display: 'flex',
-    borderRadius: 10,
-    alignItems: 'center',
-    padding: 16,
-  },
-  surveyIcon: {
-    width: 200,
-    height: 105,
-  },
-};
+import { CalloutCard } from '../../../../UI/CalloutCard';
 
 type Props = {|
   onStartSurvey: () => void,
@@ -32,52 +16,42 @@ export const SurveyCard = ({
   onStartSurvey,
   hasFilledSurveyAlready,
 }: Props) => {
-  const gdevelopTheme = React.useContext(GDevelopThemeContext);
-
-  const subscriptionContainerStyle = {
-    ...styles.subscriptionContainer,
-    border: `1px solid ${gdevelopTheme.palette.secondary}`,
-  };
-
   return (
-    <div style={subscriptionContainerStyle}>
-      <ResponsiveLineStackLayout noMargin>
-        <img
-          src="res/start-survey.svg"
-          style={styles.surveyIcon}
-          alt="Survey"
-        />
-        <Line noMargin expand>
-          <ColumnStackLayout alignItems="flex-start" expand>
-            <Text noMargin size="block-title">
-              {hasFilledSurveyAlready ? (
-                <Trans>Have you changed your usage of GDevelop?</Trans>
+    <CalloutCard
+      renderImage={style => (
+        <img src="res/start-survey.svg" style={style} alt="Survey" />
+      )}
+    >
+      <Line noMargin expand>
+        <ColumnStackLayout alignItems="flex-start" expand>
+          <Text noMargin size="block-title">
+            {hasFilledSurveyAlready ? (
+              <Trans>Have you changed your usage of GDevelop?</Trans>
+            ) : (
+              <Trans>Personalize your suggested content</Trans>
+            )}
+          </Text>
+          <Text noMargin size="body">
+            <Trans>
+              Answer a 1-minute survey to personalize your “Get started”
+              content.
+            </Trans>
+          </Text>
+          <Spacer />
+          <RaisedButton
+            label={
+              hasFilledSurveyAlready ? (
+                <Trans>Redo the survey</Trans>
               ) : (
-                <Trans>Personalize your suggested content</Trans>
-              )}
-            </Text>
-            <Text noMargin size="body">
-              <Trans>
-                Answer a 1-minute survey to personalize your “Get started”
-                content.
-              </Trans>
-            </Text>
-            <Spacer />
-            <RaisedButton
-              label={
-                hasFilledSurveyAlready ? (
-                  <Trans>Redo the survey</Trans>
-                ) : (
-                  <Trans>Start the survey!</Trans>
-                )
-              }
-              primary
-              onClick={onStartSurvey}
-            />
-            <Spacer />
-          </ColumnStackLayout>
-        </Line>
-      </ResponsiveLineStackLayout>
-    </div>
+                <Trans>Start the survey!</Trans>
+              )
+            }
+            primary
+            onClick={onStartSurvey}
+          />
+          <Spacer />
+        </ColumnStackLayout>
+      </Line>
+    </CalloutCard>
   );
 };
diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/index.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/index.js
@@ -90,13 +90,15 @@ type Props = {|
   onUserSurveyHidden: () => void,
   selectInAppTutorial: (tutorialId: string) => void,
   subscriptionPlansWithPricingSystems: ?(SubscriptionPlanWithPricingSystems[]),
+  onOpenProfile: () => void,
 |};
 
 const GetStartedSection = ({
   selectInAppTutorial,
   onUserSurveyStarted,
   onUserSurveyHidden,
   subscriptionPlansWithPricingSystems,
+  onOpenProfile,
 }: Props) => {
   const isFillingOutSurvey = hasStartedUserSurvey();
   const isOnline = useOnlineStatus();
@@ -639,6 +641,7 @@ const GetStartedSection = ({
             subscriptionPlansWithPricingSystems={
               subscriptionPlansWithPricingSystems
             }
+            onOpenProfile={onOpenProfile}
             onStartSurvey={
               profile
                 ? () => {

diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/EducationCard.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/EducationCard.js
@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react';
-import GDevelopThemeContext from '../../../../UI/Theme/GDevelopThemeContext';
 import RaisedButton from '../../../../UI/RaisedButton';
 import { Trans } from '@lingui/macro';
 import { Spacer } from '../../../../UI/Grid';
@@ -11,75 +10,53 @@ import {
 import Text from '../../../../UI/Text';
 import TextButton from '../../../../UI/TextButton';
 import Window from '../../../../Utils/Window';
-
-const styles = {
-  container: {
-    display: 'flex',
-    borderRadius: 10,
-    alignItems: 'center',
-    padding: 16,
-  },
-  educationIcon: {
-    width: 200,
-    height: 105,
-  },
-};
+import { CalloutCard } from '../../../../UI/CalloutCard';
 
 type Props = {|
   onSeeResources: () => void,
 |};
 
 export const EducationCard = ({ onSeeResources }: Props) => {
-  const gdevelopTheme = React.useContext(GDevelopThemeContext);
-
-  const containerStyle = {
-    ...styles.container,
-    border: `1px solid ${gdevelopTheme.palette.secondary}`,
-  };
-
   return (
-    <div style={containerStyle}>
-      <ResponsiveLineStackLayout noMargin expand>
+    <CalloutCard
+      renderImage={style => (
         <img
           src="res/education-resources.svg"
-          style={styles.educationIcon}
+          style={style}
           alt="Content for teachers"
         />
-        <ResponsiveLineStackLayout noMargin expand alignItems="stretch">
-          <ColumnStackLayout alignItems="flex-start" expand noMargin>
-            <Text noMargin size="block-title">
-              <Trans>Content for Teachers</Trans>
-            </Text>
-            <Text noMargin size="body">
-              <Trans>
-                Access GDevelop’s resources for teaching game development and
-                promote careers in technology.
-              </Trans>
-            </Text>
-            <Spacer />
-          </ColumnStackLayout>
+      )}
+    >
+      <ResponsiveLineStackLayout noMargin expand alignItems="stretch">
+        <ColumnStackLayout alignItems="flex-start" expand noMargin>
+          <Text noMargin size="block-title">
+            <Trans>Content for Teachers</Trans>
+          </Text>
+          <Text noMargin size="body">
+            <Trans>
+              Access GDevelop’s resources for teaching game development and
+              promote careers in technology.
+            </Trans>
+          </Text>
           <Spacer />
-          <ColumnStackLayout
-            justifyContent="center"
-            alignItems="center"
-            noMargin
-          >
-            <RaisedButton
-              label={<Trans>See resources</Trans>}
-              primary
-              fullWidth
-              onClick={onSeeResources}
-            />
-            <TextButton
-              label={<Trans>About education plan</Trans>}
-              fullWidth
-              onClick={() => {
-                Window.openExternalURL('https://gdevelop.io/pricing/education');
-              }}
-            />
-          </ColumnStackLayout>
-        </ResponsiveLineStackLayout>
+        </ColumnStackLayout>
+        <Spacer />
+        <ColumnStackLayout justifyContent="center" alignItems="center" noMargin>
+          <RaisedButton
+            label={<Trans>See resources</Trans>}
+            primary
+            fullWidth
+            onClick={onSeeResources}
+          />
+          <TextButton
+            label={<Trans>About education plan</Trans>}
+            fullWidth
+            onClick={() => {
+              Window.openExternalURL('https://gdevelop.io/pricing/education');
+            }}
+          />
+        </ColumnStackLayout>
       </ResponsiveLineStackLayout>
-    </div>
+    </CalloutCard>
   );
 };