Merge pull request #7463 from 4ian/youtube-sub-badge

New badge can be unlocked when subscribing to YouTube channel

Author: ClementPasteau

newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/EarnCredits.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Trans } from '@lingui/macro';
 import Text from '../../../../UI/Text';
 import {
+  ColumnStackLayout,
   LineStackLayout,
   ResponsiveLineStackLayout,
 } from '../../../../UI/Layout';
@@ -34,6 +35,9 @@ type FeedbackInfo = {|
 type CreditItem = BadgeInfo | FeedbackInfo;
 
 const styles = {
+  widgetContainer: {
+    maxWidth: 1800, // To avoid taking too much space on large screens.
+  },
   badgeContainer: {
     position: 'relative',
     width: 65,
@@ -111,7 +115,7 @@ const FeedbackItem = () => {
 const allBadgesInfo: BadgeInfo[] = [
   {
     id: 'github-star',
-    label: <Trans>Star GDevelop</Trans>,
+    label: 'Star GDevelop', // Do not translate "Star".
     linkUrl: 'https://github.com/4ian/GDevelop',
     type: 'badge',
   },
@@ -127,6 +131,12 @@ const allBadgesInfo: BadgeInfo[] = [
     linkUrl: 'https://x.com/GDevelopApp',
     type: 'badge',
   },
+  {
+    id: 'youtube-subscription',
+    label: <Trans>Subscribe</Trans>,
+    linkUrl: 'https://x.com/GDevelopApp',
+    type: 'badge',
+  },
 ];
 
 const getAllBadgesWithOwnedStatus = (badges: ?Array<Badge>): BadgeInfo[] => {
@@ -235,9 +245,8 @@ export const EarnCredits = ({
   showRandomItem,
   showAllItems,
 }: Props) => {
-  const { windowSize, isMobile } = useResponsiveWindowSize();
-  const isMobileOrMediumWidth =
-    windowSize === 'small' || windowSize === 'medium';
+  const { isMobile, windowSize } = useResponsiveWindowSize();
+  const isExtraLargeScreen = windowSize === 'xlarge';
 
   const allBadgesWithOwnedStatus = React.useMemo(
     () => getAllBadgesWithOwnedStatus(badges),
@@ -318,28 +327,24 @@ export const EarnCredits = ({
     [badgesToShow, feedbackItemsToShow]
   );
 
+  const onlyOneItemDisplayed = allItemsToShow.length === 1;
+  const itemsPerRow = onlyOneItemDisplayed ? 1 : isExtraLargeScreen ? 3 : 2;
   // Slice items in arrays of two to display them in a responsive way.
-  const itemsSlicedInArraysOfTwo: CreditItem[][] = React.useMemo(
+  const itemsSlicedInArrays: CreditItem[][] = React.useMemo(
     () => {
       const slicedItems: CreditItem[][] = [];
-      for (let i = 0; i < allItemsToShow.length; i += 2) {
-        slicedItems.push(allItemsToShow.slice(i, i + 2));
+      for (let i = 0; i < allItemsToShow.length; i += itemsPerRow) {
+        slicedItems.push(allItemsToShow.slice(i, i + itemsPerRow));
       }
       return slicedItems;
     },
-    [allItemsToShow]
+    [allItemsToShow, itemsPerRow]
   );
 
-  const onlyOneItemDisplayed = allItemsToShow.length === 1;
-
   return (
-    <Column noMargin expand>
-      <ResponsiveLineStackLayout
-        noMargin
-        expand
-        forceMobileLayout={isMobileOrMediumWidth}
-      >
-        {itemsSlicedInArraysOfTwo.map((items, index) => (
+    <div style={styles.widgetContainer}>
+      <ColumnStackLayout noMargin expand>
+        {itemsSlicedInArrays.map((items, index) => (
           <ResponsiveLineStackLayout
             noMargin
             expand={onlyOneItemDisplayed}
@@ -366,12 +371,17 @@ export const EarnCredits = ({
                 return null;
               })
               .filter(Boolean)}
-            {items.length === 1 &&
+            {items.length < itemsPerRow &&
               !onlyOneItemDisplayed &&
-              isMobileOrMediumWidth && <div style={styles.itemPlaceholder} />}
+              Array.from(
+                { length: itemsPerRow - items.length },
+                (_, i) => i
+              ).map(i => (
+                <div key={`filler-${i}`} style={styles.itemPlaceholder} />
+              ))}
           </ResponsiveLineStackLayout>
         ))}
-      </ResponsiveLineStackLayout>
-    </Column>
+      </ColumnStackLayout>
+    </div>
   );
 };

newIDE/app/src/Profile/AuthenticatedUserProvider.js

@@ -1452,6 +1452,36 @@ export default class AuthenticatedUserProvider extends React.Component<
     }
   };
 
+  _onUpdateYoutubeSubscription = async (
+    communityLinks: CommunityLinks,
+    preferences: PreferencesValues
+  ) => {
+    const { authentication } = this.props;
+
+    await this._doEdit(
+      {
+        communityLinks,
+      },
+      preferences
+    );
+
+    this.setState({
+      editInProgress: true,
+    });
+    try {
+      const response = await authentication.updateYoutubeSubscription(
+        authentication.getAuthorizationHeader
+      );
+      this._fetchUserBadges();
+
+      return response;
+    } finally {
+      this.setState({
+        editInProgress: false,
+      });
+    }
+  };
+
   render() {
     return (
       <PreferencesContext.Consumer>
@@ -1509,6 +1539,12 @@ export default class AuthenticatedUserProvider extends React.Component<
                   onUpdateTwitterFollow={communityLinks =>
                     this._onUpdateTwitterFollow(communityLinks, preferences)
                   }
+                  onUpdateYoutubeSubscription={communityLinks =>
+                    this._onUpdateYoutubeSubscription(
+                      communityLinks,
+                      preferences
+                    )
+                  }
                   onDelete={this._doDeleteAccount}
                   actionInProgress={
                     this.state.editInProgress || this.state.deleteInProgress

newIDE/app/src/Profile/EditProfileDialog.js

@@ -14,6 +14,7 @@ import {
   type UpdateGitHubStarResponse,
   type UpdateTiktokFollowResponse,
   type UpdateTwitterFollowResponse,
+  type UpdateYoutubeSubscriptionResponse,
 } from '../Utils/GDevelopServices/Authentication';
 import {
   communityLinksConfig,
@@ -69,6 +70,9 @@ export type EditProfileDialogProps = {|
   onUpdateTwitterFollow: (
     communityLinks: CommunityLinks
   ) => Promise<UpdateTwitterFollowResponse>,
+  onUpdateYoutubeSubscription: (
+    communityLinks: CommunityLinks
+  ) => Promise<UpdateYoutubeSubscriptionResponse>,
   onDelete: () => Promise<void>,
   actionInProgress: boolean,
   error: ?AuthError,
@@ -252,6 +256,7 @@ const EditProfileDialog = ({
   onUpdateGitHubStar,
   onUpdateTiktokFollow,
   onUpdateTwitterFollow,
+  onUpdateYoutubeSubscription,
   onDelete,
   actionInProgress,
   error,
@@ -551,6 +556,27 @@ const EditProfileDialog = ({
                     translatableHintText={t`username`}
                     icon={communityLinksConfig.twitterUsername.icon}
                   />
+                  <CommunityLinkWithFollow
+                    badges={badges}
+                    achievements={achievements}
+                    achievementId="youtube-subscription"
+                    value={youtubeUsername}
+                    onChange={setYoutubeUsername}
+                    onUpdateFollow={() =>
+                      onUpdateYoutubeSubscription(updatedCommunityLinks)
+                    }
+                    getMessageFromUpdate={
+                      communityLinksConfig.youtubeUsername.getMessageFromUpdate
+                    }
+                    disabled={actionInProgress}
+                    maxLength={communityLinksConfig.youtubeUsername.maxLength}
+                    prefix={communityLinksConfig.youtubeUsername.prefix}
+                    getRewardMessage={
+                      communityLinksConfig.youtubeUsername.getRewardMessage
+                    }
+                    translatableHintText={t`username`}
+                    icon={communityLinksConfig.youtubeUsername.icon}
+                  />
                   <CommunityLinkWithFollow
                     badges={badges}
                     achievements={achievements}
@@ -599,15 +625,6 @@ const EditProfileDialog = ({
                     }}
                     disabled={actionInProgress}
                   />
-                  <CommunityLinkLine
-                    id="youtubeUsername"
-                    value={youtubeUsername}
-                    translatableHintText={t`username`}
-                    onChange={(e, value) => {
-                      setYoutubeUsername(value);
-                    }}
-                    disabled={actionInProgress}
-                  />
                   <CommunityLinkLine
                     id="instagramUsername"
                     value={instagramUsername}

newIDE/app/src/Utils/GDevelopServices/Authentication.js

@@ -134,6 +134,14 @@ export type UpdateTwitterFollowResponse = {|
     | 'twitter-follow/user-not-found',
 |};
 
+export type UpdateYoutubeSubscriptionResponse = {|
+  +code:
+    | 'youtube-subscription/badge-already-given'
+    | 'youtube-subscription/badge-given'
+    | 'youtube-subscription/channel-not-subscribed'
+    | 'youtube-subscription/user-not-found',
+|};
+
 export type IdentityProvider = 'google' | 'apple' | 'github';
 
 export default class Authentication {
@@ -499,6 +507,31 @@ export default class Authentication {
     return response.data;
   };
 
+  updateYoutubeSubscription = async (
+    getAuthorizationHeader: () => Promise<string>
+  ): Promise<UpdateYoutubeSubscriptionResponse> => {
+    const { currentUser } = this.auth;
+    if (!currentUser)
+      throw new Error(
+        'Tried to update youtube subscription while not authenticated.'
+      );
+    const { uid } = currentUser;
+
+    const authorizationHeader = await getAuthorizationHeader();
+    const response = await axios.post(
+      `${
+        GDevelopUserApi.baseUrl
+      }/user/${uid}/action/update-youtube-subscription`,
+      {},
+      {
+        params: { userId: uid },
+        headers: { Authorization: authorizationHeader },
+      }
+    );
+
+    return response.data;
+  };
+
   acceptGameStatsEmail = async (
     getAuthorizationHeader: () => Promise<string>,
     value: boolean

newIDE/app/src/Utils/GDevelopServices/User.js

@@ -656,8 +656,37 @@ export const communityLinksConfig = {
   },
   youtubeUsername: {
     icon: <YouTube />,
-    prefix: 'https://youtube.com/',
+    prefix: 'https://youtube.com/@',
     maxLength: 100,
+    getMessageFromUpdate: (responseCode: string) => {
+      if (
+        responseCode === 'youtube-subscription/badge-given' ||
+        responseCode === 'youtube-subscription/badge-already-given'
+      ) {
+        return {
+          title: t`You're awesome!`,
+          message: t`Thanks for following GDevelop. We added credits to your account as a thank you gift.`,
+        };
+      } else if (
+        responseCode === 'youtube-subscription/channel-not-subscribed'
+      ) {
+        return {
+          title: t`We could not check your subscription`,
+          message: t`Make sure you subscribed to the GDevelop channel and try again.`,
+        };
+      } else if (responseCode === 'youtube-subscription/user-not-found') {
+        return {
+          title: t`We could not find your user`,
+          message: t`Make sure your username is correct, subscribe to the GDevelop channel and try again.`,
+        };
+      }
+
+      return null;
+    },
+    getRewardMessage: (hasBadge: boolean, rewardValueInCredits: string) =>
+      !hasBadge
+        ? t`[Subscribe to GDevelop](https://youtube.com/@gdevelopapp) and enter your YouTube username here to get ${rewardValueInCredits} free credits as a thank you!`
+        : t`Thank you for supporting GDevelop. Credits were added to your account as a thank you.`,
   },
   tiktokUsername: {
     icon: <TikTok />,

newIDE/app/src/stories/componentStories/Profile/EditProfileDialog.stories.js

@@ -31,6 +31,9 @@ const defaultProps: EditProfileDialogProps = {
   onUpdateTwitterFollow: async () => ({
     code: 'twitter-follow/badge-already-given',
   }),
+  onUpdateYoutubeSubscription: async () => ({
+    code: 'youtube-subscription/badge-already-given',
+  }),
   achievements: fakeAchievements,
   badges: [
     {