Allow to enter Twitter username in profile (#6591)

* If you follow the GDevelop Twitter account, a badge and some credits will be given to your account as a thank you!

newIDE/app/src/Profile/AuthenticatedUserProvider.js

@@ -1330,6 +1330,36 @@ export default class AuthenticatedUserProvider extends React.Component<
     }
   };
 
+  _onUpdateTwitterFollow = async (
+    communityLinks: CommunityLinks,
+    preferences: PreferencesValues
+  ) => {
+    const { authentication } = this.props;
+
+    await this._doEdit(
+      {
+        communityLinks,
+      },
+      preferences
+    );
+
+    this.setState({
+      editInProgress: true,
+    });
+    try {
+      const response = await authentication.updateTwitterFollow(
+        authentication.getAuthorizationHeader
+      );
+      this._fetchUserBadges();
+
+      return response;
+    } finally {
+      this.setState({
+        editInProgress: false,
+      });
+    }
+  };
+
   render() {
     return (
       <PreferencesContext.Consumer>
@@ -1377,6 +1407,9 @@ export default class AuthenticatedUserProvider extends React.Component<
                   onUpdateTiktokFollow={communityLinks =>
                     this._onUpdateTiktokFollow(communityLinks, preferences)
                   }
+                  onUpdateTwitterFollow={communityLinks =>
+                    this._onUpdateTwitterFollow(communityLinks, preferences)
+                  }
                   onDelete={this._doDeleteAccount}
                   actionInProgress={
                     this.state.editInProgress || this.state.deleteInProgress

newIDE/app/src/Profile/EditProfileDialog.js

@@ -13,6 +13,7 @@ import {
   type Profile,
   type UpdateGitHubStarResponse,
   type UpdateTiktokFollowResponse,
+  type UpdateTwitterFollowResponse,
 } from '../Utils/GDevelopServices/Authentication';
 import {
   communityLinksConfig,
@@ -63,6 +64,9 @@ export type EditProfileDialogProps = {|
   onUpdateTiktokFollow: (
     communityLinks: CommunityLinks
   ) => Promise<UpdateTiktokFollowResponse>,
+  onUpdateTwitterFollow: (
+    communityLinks: CommunityLinks
+  ) => Promise<UpdateTwitterFollowResponse>,
   onDelete: () => Promise<void>,
   actionInProgress: boolean,
   error: ?AuthError,
@@ -244,6 +248,7 @@ const EditProfileDialog = ({
   onEdit,
   onUpdateGitHubStar,
   onUpdateTiktokFollow,
+  onUpdateTwitterFollow,
   onDelete,
   actionInProgress,
   error,
@@ -505,6 +510,27 @@ const EditProfileDialog = ({
                 translatableHintText={t`username`}
                 icon={communityLinksConfig.githubUsername.icon}
               />
+              <CommunityLinkWithFollow
+                badges={badges}
+                achievements={achievements}
+                achievementId="twitter-follow"
+                value={twitterUsername}
+                onChange={setTwitterUsername}
+                onUpdateFollow={() =>
+                  onUpdateTwitterFollow(updatedCommunityLinks)
+                }
+                getMessageFromUpdate={
+                  communityLinksConfig.twitterUsername.getMessageFromUpdate
+                }
+                disabled={actionInProgress}
+                maxLength={communityLinksConfig.twitterUsername.maxLength}
+                prefix={communityLinksConfig.twitterUsername.prefix}
+                getRewardMessage={
+                  communityLinksConfig.twitterUsername.getRewardMessage
+                }
+                translatableHintText={t`username`}
+                icon={communityLinksConfig.twitterUsername.icon}
+              />
               <CommunityLinkWithFollow
                 badges={badges}
                 achievements={achievements}
@@ -544,15 +570,6 @@ const EditProfileDialog = ({
                 }}
                 disabled={actionInProgress}
               />
-              <CommunityLinkLine
-                id="twitterUsername"
-                value={twitterUsername}
-                translatableHintText={t`username`}
-                onChange={(e, value) => {
-                  setTwitterUsername(value);
-                }}
-                disabled={actionInProgress}
-              />
               <CommunityLinkLine
                 id="facebookUsername"
                 value={facebookUsername}

newIDE/app/src/Profile/ProfileDetails.js

@@ -120,6 +120,10 @@ const ProfileDetails = ({
     (achievements &&
       achievements.find(achievement => achievement.id === 'tiktok-follow')) ||
     null;
+  const twitterFollowAchievement =
+    (achievements &&
+      achievements.find(achievement => achievement.id === 'twitter-follow')) ||
+    null;
 
   const [
     discordUsernameSyncStatus,
@@ -281,6 +285,23 @@ const ProfileDetails = ({
                     isNotFilled: !githubUsername,
                     icon: communityLinksConfig.githubUsername.icon,
                   },
+                  {
+                    text: !twitterUsername ? (
+                      <MarkdownText
+                        translatableSource={communityLinksConfig.twitterUsername.getRewardMessage(
+                          false,
+                          twitterFollowAchievement &&
+                            twitterFollowAchievement.rewardValueInCredits
+                            ? twitterFollowAchievement.rewardValueInCredits.toString()
+                            : '-'
+                        )}
+                      />
+                    ) : (
+                      twitterUsername
+                    ),
+                    isNotFilled: !twitterUsername,
+                    icon: communityLinksConfig.twitterUsername.icon,
+                  },
                   {
                     text: !tiktokUsername ? (
                       <MarkdownText
@@ -306,10 +327,6 @@ const ProfileDetails = ({
                     text: personalWebsite2Link,
                     icon: communityLinksConfig.personalWebsite2Link.icon,
                   },
-                  {
-                    text: twitterUsername,
-                    icon: communityLinksConfig.twitterUsername.icon,
-                  },
                   {
                     text: facebookUsername,
                     icon: communityLinksConfig.facebookUsername.icon,

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

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

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

@@ -469,6 +469,33 @@ export const communityLinksConfig = {
     icon: <Twitter />,
     prefix: 'https://twitter.com/',
     maxLength: 15,
+    getMessageFromUpdate: (responseCode: string) => {
+      if (
+        responseCode === 'twitter-follow/badge-given' ||
+        responseCode === 'twitter-follow/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 === 'twitter-follow/account-not-followed') {
+        return {
+          title: t`We could not check your follow`,
+          message: t`Make sure you follow the GDevelop account and try again.`,
+        };
+      } else if (responseCode === 'twitter-follow/user-not-found') {
+        return {
+          title: t`We could not find your user`,
+          message: t`Make sure your username is correct, follow the GDevelop account and try again.`,
+        };
+      }
+
+      return null;
+    },
+    getRewardMessage: (hasBadge: boolean, rewardValueInCredits: string) =>
+      !hasBadge
+        ? t`[Follow GDevelop](https://twitter.com/GDevelopApp) and enter your Twitter 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.`,
   },
   facebookUsername: {
     icon: <Facebook />,

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

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