yeet

modules/guild_onboarding_home/native/GuildHomeResources.tsx

@@ -0,0 +1,166 @@
+// Metro module 15435 (f15436).
+import { useEffect, useCallback } from "react";
+import { Image as Image2, View } from "react-native";
+import ChannelStore from "../../../stores/ChannelStore";
+import GuildChannelStore from "../../../stores/GuildChannelStore";
+import MessageStore from "../../../stores/MessageStore";
+import PermissionStore from "../../../stores/PermissionStore";
+import { Permissions, Routes } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { useForumPostMediaProperties, useFirstMediaIsEmbed, getEmbedColor } from "../../forums/ForumPostMediaUtils";
+import { useSharedMediaProps, ForumPostMediaThumbnail } from "../../forums/native/posts/ForumPostMedia";
+import useFirstMessageOrEmbedContent from "../useFirstMessageOrEmbedContent";
+import MessageActionCreators from "../../../actions/MessageActionCreators";
+import { selectHomeResourceChannel } from "../GuildOnboardingHomeActionCreators";
+import AvatarUtils from "../../../utils/AvatarUtils";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { Text } from "../../../design/components/Text/native/Text";
+import MarkupUtils from "../../markup/MarkupUtils";
+import useResourceChannels from "../useResourceChannels";
+import { transitionTo } from "../../routing/router_utils";
+import { intl, t } from "../../../intl/index.native";
+import Module15437 from "../../../_bundle/Module15437";
+import { Button } from "../../../design/components/Button/native/Button.native";
+let useStyles;
+const ResourceChannelRow = function ResourceChannelRow(props) {
+  let c21992_2;
+  const { channelId, title, icon, description } = props;
+  c21992_2 = void 0;
+  const styles = useStyles();
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  const stateFromStores2 = useStateFromStores([PermissionStore], () => PermissionStore.can(Permissions.VIEW_CHANNEL, stateFromStores));
+  const stateFromStores3 = useStateFromStores([MessageStore], () => MessageStore.getMessages(channelId));
+  const r52 = stateFromStores3.first();
+  const forumPostMediaProperties = useForumPostMediaProperties(r52, false);
+  const firstMediaIsEmbed = useFirstMediaIsEmbed(r52, false);
+  const media = forumPostMediaProperties?.length > 0 ? forumPostMediaProperties[0] : null;
+  let shouldObscure = useSharedMediaProps({
+    channel: stateFromStores,
+    media
+  }).shouldObscure;
+  const firstMessageOrEmbedContent = useFirstMessageOrEmbedContent(r52);
+  const r69 = stateFromStores != null && stateFromStores3.first() == null && !stateFromStores3.loadingMore && !stateFromStores3.ready && !stateFromStores3.hasFetched;
+  c21992_2 = r69;
+  useEffect(() => {
+    if (c21992_2) {
+      MessageActionCreators.fetchMessages({
+        channelId,
+        after: channelId,
+        limit: 5
+      });
+    }
+  }, [channelId, r69]);
+  const callback = useCallback(() => {
+    if (stateFromStores != null) {
+      selectHomeResourceChannel(stateFromStores.guild_id, stateFromStores.id);
+    }
+  }, [stateFromStores]);
+  if (stateFromStores != null && stateFromStores2) {
+    const resourceChannelIconURL = AvatarUtils.getResourceChannelIconURL({
+      channelId: stateFromStores.id,
+      icon
+    });
+    const r90 = description == null || description.length === 0;
+    const r128 = [<View style={styles.textContent}>
+      <Text variant="heading-md/extrabold" color="mobile-text-heading-primary">{title}</Text>
+      {r90 && firstMessageOrEmbedContent != null && <Text variant="text-sm/normal" color="text-default" style={styles.messageContent} lineClamp={3} ellipsizeMode="tail">
+        {MarkupUtils.parse(firstMessageOrEmbedContent, true, {
+          guildId: stateFromStores.guild_id,
+          channelId: stateFromStores.id
+        })}
+      </Text>}
+      {r90 ? !r90 : <Text variant="text-sm/normal" color="text-default" style={styles.messageContent} lineClamp={3} ellipsizeMode="tail">
+        {MarkupUtils.parse(description, true, {
+          guildId: stateFromStores.guild_id,
+          channelId: stateFromStores.id
+        })}
+      </Text>}
+    </View>, icon != null ? resourceChannelIconURL != null ? <Image2 source={{
+      uri: resourceChannelIconURL
+    }} style={styles.icon} /> : null : null, ,];
+    const r136 = resourceChannelIconURL != null;
+    let r137 = null;
+    if (!r136) {
+      const r138 = r52 == null;
+      r137 = null;
+      if (!r138) {
+        const blocked = r52?.blocked;
+        r137 = null;
+        if (!blocked) {
+          const r141 = media == null;
+          r137 = null;
+          if (!r141) {
+            if (shouldObscure == null) {
+              shouldObscure = false;
+            }
+            r137 = <ForumPostMediaThumbnail channel={stateFromStores} media={media} isEmbed={firstMediaIsEmbed} embedLeftBorderColor={getEmbedColor(r52, shouldObscure)} firstMessageId={r52?.id} containerStyle={styles.thumbnail} />;
+          }
+        }
+      }
+    }
+    r128[2] = r137;
+    return <PressableOpacity onPress={callback} style={styles.channelContainer}>{r128}</PressableOpacity>;
+  }
+  return null;
+};
+useStyles = createStyles({
+  container: {
+    paddingHorizontal: 12,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  },
+  emptyStateContainer: {
+    padding: 20,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  },
+  channelContainer: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    marginBottom: 8,
+    padding: 12,
+    borderRadius: Module712.radii.sm,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  },
+  messageContent: {
+    marginTop: 8
+  },
+  textContent: {
+    flex: 1
+  },
+  thumbnail: {
+    marginLeft: 8
+  },
+  emptyStateImage: {
+    marginTop: 12,
+    marginBottom: 20
+  },
+  icon: {
+    width: 72,
+    height: 72
+  }
+});
+export default function GuildHomeResources(props) {
+  const guildId = props.guildId;
+  const styles = useStyles();
+  const resourceChannels = useResourceChannels(guildId);
+  return resourceChannels.length === 0 ? <View style={styles.emptyStateContainer}>
+    <Text variant="heading-xl/bold" color="mobile-text-heading-primary">
+      {intl.string(t.owvC9U)}
+    </Text>
+    <Image2 style={styles.emptyStateImage} source={Module15437} />
+    <Button onPress={function onPress() {
+      const defaultChannel = GuildChannelStore.getDefaultChannel(guildId);
+      if (defaultChannel != null) {
+        transitionTo(Routes.CHANNEL(guildId, defaultChannel.id));
+      }
+    }} text={intl.string(t["3iCBUn"])} />
+  </View> : <View style={styles.container}>
+    {resourceChannels.map((resourceChannel) => <ResourceChannelRow key={`resource-${resourceChannel.channelId}`} channelId={resourceChannel.channelId} title={resourceChannel.title} icon={resourceChannel.icon} description={resourceChannel.description} />)}
+  </View>;
+};

modules/guild_onboarding_home/native/GuildOnboardingHomeManager.tsx

@@ -0,0 +1,284 @@
+// Metro module 16188 (f16189).
+import _slicedToArray from "../../../_bundle/_slicedToArray";
+import ImpersonateStore from "../../impersonate/ImpersonateStore";
+import AuthenticationStore from "../../../stores/AuthenticationStore";
+import ChannelStore from "../../../stores/ChannelStore";
+import GuildMemberStore from "../../../stores/GuildMemberStore";
+import GuildStore from "../../../stores/GuildStore";
+import SelectedGuildStore from "../../../stores/SelectedGuildStore";
+import GuildOnboardingHomeSettingsStore from "../GuildOnboardingHomeSettingsStore";
+import GuildOnboardingMemberActionStore from "../GuildOnboardingMemberActionStore";
+import { GuildMemberFlags } from "../../guild_member/GuildMemberConstants";
+import AutomaticLifecycleManager from "../../../lib/AutomaticLifecycleManager";
+import * as _Module1384 from "../../../_bundle/Module1384";
+import ModalActionCreators from "../../../actions/ModalActionCreators";
+import { NEW_MEMBER_ACTION_COMPLETE_MODAL_KEY, NewMemberActionTypes } from "../GuildOnboardingHomeTypes";
+import { ModalAnimation } from "../../../ConstantsIOS";
+import { completeNewMemberAction, fetchGuildHomeSettings, fetchNewMemberActions } from "../GuildOnboardingHomeActionCreators";
+import * as _OnboardingHomeUtils from "../OnboardingHomeUtils";
+import { getIsNewMember } from "../useIsNewMember";
+function $mk118530($env) {
+  return (a0) => a0.channelId === $env[1];
+}
+function $mk118531($env) {
+  return (a0) => a0.channelId === $env[1];
+}
+class GuildOnboardingHomeManager extends AutomaticLifecycleManager {
+  constructor() {
+    let c22855_0, c22855_1;
+    let c22856_0, c22856_1;
+    let c22857_0, c22857_1;
+    let c22858_0;
+    let c22859_0;
+    super(...arguments);
+    const _this = this;
+    this.onboardingCompleteGuilds = new Set();
+    this.actions = {
+      POST_CONNECTION_OPEN: () => _this.handlePostConnectionOpen(),
+      GUILD_MEMBER_UPDATE: (a0) => _this.handleGuildMemberUpdate(a0),
+      GUILD_DELETE: (a0) => _this.handleGuildDelete(a0),
+      CHANNEL_SELECT: (a0) => _this.handleChannelSelect(a0),
+      MESSAGE_CREATE: (a0) => _this.handleMessageSend(a0),
+      THREAD_CREATE: (a0) => _this.handleThreadCreate(a0)
+    };
+    this.handlePostConnectionOpen = () => {
+      const guilds = GuildStore.getGuilds();
+      for (const key in guilds) {
+        let r23 = GuildMemberStore.getSelfMember(key)?.flags;
+        if (r23 == null) {
+          r23 = 0;
+        }
+        if (_Module1384.hasFlag(r23, GuildMemberFlags.COMPLETED_HOME_ACTIONS)) {
+          _this.onboardingCompleteGuilds.add(key);
+        }
+      }
+      const guildId = SelectedGuildStore.getGuildId();
+      if (guildId != null) {
+        _this._getOrLoadOnboardingMemberActions(guildId);
+      }
+    };
+    this.handleGuildMemberUpdate = (a0) => {
+      let flags2 = a0.flags;
+      const { user, guildId } = a0;
+      if (user.id === AuthenticationStore.getId()) {
+        if (!_this.onboardingCompleteGuilds.has(guildId)) {
+          if (flags2 == null) {
+            flags2 = 0;
+          }
+          if (_Module1384.hasFlag(flags2, GuildMemberFlags.COMPLETED_HOME_ACTIONS)) {
+            _this.onboardingCompleteGuilds.add(guildId);
+            let numActions = GuildOnboardingHomeSettingsStore.getNewMemberActions(guildId)?.length;
+            if (numActions == null) {
+              numActions = 0;
+            }
+            if (numActions === 0) {
+              return void 0;
+            }
+            ModalActionCreators.pushLazy(import("./NewMemberActionsCompletedModal"), {
+              initialPercent: (numActions - 1) / numActions,
+              numActions
+            }, NEW_MEMBER_ACTION_COMPLETE_MODAL_KEY, {
+              animation: ModalAnimation.FADE
+            });
+          }
+        }
+      }
+    };
+    this.handleGuildDelete = (a0) => {
+      _this.onboardingCompleteGuilds.delete(a0.guild.id);
+    };
+    c22855_0 = void 0;
+    c22855_1 = this;
+    c22855_0 = async (c30981_0) => {
+      let c30981_2;
+      let env31793;
+      c30981_2 = void 0;
+      const r9 = env31793 = {};
+      let c30981_1 = r9;
+      env31793[0] = void 0;
+      env31793[1] = void 0;
+      env31793[0] = c30981_0.guildId;
+      env31793[1] = c30981_0.channelId;
+      env31793[2] = void 0;
+      env31793[3] = void 0;
+      env31793[4] = void 0;
+      env31793[5] = void 0;
+      await void 0;
+      if (env31793[0] != null && env31793[1] != null) {
+        env31793[2] = await c22855_1._getOrLoadOnboardingMemberActions(env31793[0]);
+        env31793[3] = env31793[2].memberActions;
+        env31793[4] = env31793[2].completedActions;
+        const r13 = env31793[3];
+        env31793[5] = r13 == null ? void 0 : r13.find($mk118530(c30981_1));
+        const r12 = env31793[4];
+        if ((r12 == null ? void 0 : r12[env31793[1]]) !== true && env31793[5] != null && env31793[5].actionType === NewMemberActionTypes.VIEW) {
+          completeNewMemberAction(env31793[0], env31793[1]);
+        }
+      }
+    };
+    this.handleChannelSelect = function() {
+      return c22855_0.apply(this, arguments);
+    };
+    this.handleMessageSend = ({ guildId, channelId, message }) => {
+      if (guildId != null && channelId != null) {
+        if (message.author?.id === AuthenticationStore.getId()) {
+          const channel = ChannelStore.getChannel(channelId);
+          if ((channel == null ? void 0 : channel.isForumPost()) && channel?.parent_id != null) {
+            _this._completeChatAction(guildId, channel.parent_id);
+          }
+          _this._completeChatAction(guildId, channelId);
+        }
+      }
+    };
+    this.handleThreadCreate = (a0) => {
+      const channel = a0.channel;
+      let r6 = a0.isNewlyCreated && channel.parent_id != null;
+      if (r6) {
+        const channel2 = ChannelStore.getChannel(channel.parent_id);
+        r6 = channel2 == null ? void 0 : channel2.isForumLikeChannel();
+      }
+      if (r6) {
+        r6 = channel.ownerId === AuthenticationStore.getId();
+      }
+      if (r6) {
+        _this._completeChatAction(channel.guild_id, channel.parent_id);
+      }
+    };
+    c22856_0 = void 0;
+    c22856_1 = this;
+    c22856_0 = async (c30982_0, c30982_1) => {
+      let c30982_3;
+      let env31794;
+      c30982_3 = void 0;
+      const r11 = env31794 = {};
+      let c30982_2 = r11;
+      env31794[0] = c30982_0;
+      env31794[1] = c30982_1;
+      env31794[2] = void 0;
+      env31794[3] = void 0;
+      env31794[4] = void 0;
+      env31794[5] = void 0;
+      env31794[2] = await c22856_1._getOrLoadOnboardingMemberActions(c30982_0);
+      env31794[3] = env31794[2].memberActions;
+      env31794[4] = env31794[2].completedActions;
+      const r12 = env31794[3];
+      env31794[5] = r12 == null ? void 0 : r12.find($mk118531(c30982_2));
+      const r51 = env31794[4];
+      if ((r51 == null ? void 0 : r51[env31794[1]]) !== true && env31794[5] != null && env31794[5].actionType === NewMemberActionTypes.CHAT) {
+        completeNewMemberAction(env31794[0], env31794[1]);
+      }
+    };
+    this._completeChatAction = function() {
+      return c22856_0.apply(this, arguments);
+    };
+    c22857_0 = void 0;
+    c22857_1 = this;
+    c22857_0 = async (c30983_0) => {
+      let r78;
+      let c30983_2;
+      let c31795_0, c31795_1;
+      L17: {
+        L16: {
+          L10: {
+            c30983_2 = void 0;
+            c31795_0 = void 0;
+            c31795_1 = void 0;
+            const canSeeOnboardingHome = _OnboardingHomeUtils.canSeeOnboardingHome(c30983_0);
+            const isFullServerPreview = ImpersonateStore.isFullServerPreview(c30983_0);
+            if (!canSeeOnboardingHome && !isFullServerPreview) {
+              break L10;
+            }
+            const selfMember = GuildMemberStore.getSelfMember(c30983_0);
+            if (selfMember == null) {
+              break L17;
+            }
+            if (!getIsNewMember(c30983_0)) {
+              break L17;
+            }
+            const r45 = Promise;
+            c31795_0 = await r45.all([c22857_1._getOrLoadOnboardingHomeSettings(c30983_0), c22857_1._getOrLoadMemberActions(c30983_0, selfMember)]);
+            c31795_1 = (0, _slicedToArray)(c31795_0, 2);
+            r78 = {
+              memberActions: c31795_1[0],
+              completedActions: c31795_1[1]
+            };
+            break L16;
+          }
+          return {};
+        }
+        return r78;
+      }
+      return {};
+    };
+    this._getOrLoadOnboardingMemberActions = function() {
+      return c22857_0.apply(this, arguments);
+    };
+    c22858_0 = void 0;
+    c22858_0 = async (c30984_0) => {
+      let r57, newMemberActions;
+      let c31796_0;
+      L16: {
+        L15: {
+          c31796_0 = void 0;
+          newMemberActions = GuildOnboardingHomeSettingsStore.getNewMemberActions(c30984_0);
+          const isLoading = GuildOnboardingHomeSettingsStore.getIsLoading(c30984_0);
+          if (newMemberActions != null) {
+            break L16;
+          }
+          if (isLoading) {
+            break L16;
+          }
+          if (!getIsNewMember(c30984_0)) {
+            break L16;
+          }
+          c31796_0 = await fetchGuildHomeSettings(c30984_0);
+          const r54 = c31796_0;
+          const r56 = r54 == null;
+          r57 = void 0;
+          if (r56) {
+            break L15;
+          }
+          r57 = r54.newMemberActions;
+        }
+        return r57;
+      }
+      return newMemberActions;
+    };
+    this._getOrLoadOnboardingHomeSettings = function() {
+      return c22858_0.apply(this, arguments);
+    };
+    c22859_0 = void 0;
+    c22859_0 = async (c30985_0, c30985_1) => {
+      let r8;
+      let flags;
+      L15: {
+        const state = GuildOnboardingMemberActionStore.getState(c30985_0);
+        const { completedActions, loading } = state;
+        r8 = completedActions;
+        if (completedActions != null) {
+          break L15;
+        }
+        r8 = completedActions;
+        if (loading) {
+          break L15;
+        }
+        flags = c30985_1.flags;
+        if (flags == null) {
+          flags = 0;
+        }
+        const hasFlag = _Module1384.hasFlag(flags, GuildMemberFlags.STARTED_HOME_ACTIONS);
+        r8 = completedActions;
+        if (!hasFlag) {
+          break L15;
+        }
+        return await fetchNewMemberActions(c30985_0);
+      }
+      return r8;
+    };
+    this._getOrLoadMemberActions = function() {
+      return c22859_0.apply(this, arguments);
+    };
+  }
+}
+const guildOnboardingHomeManager = new GuildOnboardingHomeManager();
+export default guildOnboardingHomeManager;

modules/guild_onboarding_home/native/GuildOnboardingHomePage.tsx

@@ -0,0 +1,90 @@
+// Metro module 15420 (f15421).
+import { useEffect } from "react";
+import ExperimentStore from "../../experiments/ExperimentStore";
+import GuildOnboardingHomeSettingsStore, { NO_SETTINGS } from "../GuildOnboardingHomeSettingsStore";
+import GuildOnboardingMemberActionStore from "../GuildOnboardingMemberActionStore";
+import { AnalyticEvents } from "../../../Constants";
+import { useSharedValue } from "../../reanimated/ReanimatedRexport";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useIsNewMember from "../useIsNewMember";
+import { fetchGuildHomeSettings } from "../GuildOnboardingHomeActionCreators";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { collectGuildAnalyticsMetadata } from "../../app_analytics/AppAnalyticsUtils";
+import GuildActionCreators from "../../../actions/GuildActionCreators";
+import OnboardingHomeScrollView from "./OnboardingHomeScrollView";
+import GuildFeedBanner from "../../guild_home/native/components/GuildFeedBanner";
+import ResourcesRow from "./ResourcesRow";
+import HomeWelcomeMessage from "./HomeWelcomeMessage";
+import GuildOnboardingNewMemberActions from "./GuildOnboardingNewMemberActions";
+import GuildHomeResources from "./GuildHomeResources";
+import { useCanSeeOnboardingHome } from "../OnboardingHomeUtils";
+const GuildOnboardingHomePage = function GuildOnboardingHomePage(props) {
+  let c21981_2;
+  const guildId = props.guildId;
+  c21981_2 = void 0;
+  const sharedValue = useSharedValue(-999);
+  const stateFromStores = useStateFromStores([GuildOnboardingHomeSettingsStore], () => GuildOnboardingHomeSettingsStore.getSettings(guildId));
+  const isNewMember = useIsNewMember(guildId);
+  let r2 = !isNewMember;
+  if (!isNewMember) {
+    let r30 = stateFromStores == null ? void 0 : stateFromStores.resourceChannels?.length;
+    if (r30 == null) {
+      r30 = 0;
+    }
+    r2 = r30 === 0;
+  }
+  c21981_2 = r2;
+  useEffect(() => {
+    if (stateFromStores === NO_SETTINGS) {
+      fetchGuildHomeSettings(guildId);
+    } else if (stateFromStores != null) {
+      const SERVER_GUIDE_VIEWED = AnalyticEvents.SERVER_GUIDE_VIEWED;
+      const r21 = {
+        ...collectGuildAnalyticsMetadata(guildId)
+      };
+      let num_member_actions = stateFromStores.newMemberActions?.length;
+      if (num_member_actions == null) {
+        num_member_actions = 0;
+      }
+      r21.num_member_actions = num_member_actions;
+      const r13 = Object;
+      let r31 = GuildOnboardingMemberActionStore.getCompletedActions(guildId);
+      if (r31 == null) {
+        r31 = {};
+      }
+      r21.num_member_actions_completed = r13.keys(r31).length;
+      let num_resource_channels = stateFromStores.resourceChannels?.length;
+      if (num_resource_channels == null) {
+        num_resource_channels = 0;
+      }
+      r21.num_resource_channels = num_resource_channels;
+      AnalyticsUtils.track(SERVER_GUIDE_VIEWED, r21);
+    }
+  }, [guildId, stateFromStores, r2]);
+  useEffect(() => {
+    if (c21981_2 && stateFromStores !== NO_SETTINGS) {
+      GuildActionCreators.escapeToDefaultChannel(guildId);
+    }
+  }, [guildId, r2, stateFromStores]);
+  return r2 ? null : <OnboardingHomeScrollView guildId={guildId} scrollValue={sharedValue}>
+    <GuildFeedBanner guildId={guildId} hideDescription={isNewMember} />
+    {isNewMember ? <>
+      <ResourcesRow guildId={guildId} />
+      <HomeWelcomeMessage guildId={guildId} />
+      <GuildOnboardingNewMemberActions guildId={guildId} />
+    </> : <GuildHomeResources guildId={guildId} />}
+  </OnboardingHomeScrollView>;
+};
+export default function GuildOnboardingHomePageGuard(props) {
+  let canSeeOnboardingHome;
+  const guildId2 = props.guildId;
+  canSeeOnboardingHome = void 0;
+  const stateFromStores2 = useStateFromStores([ExperimentStore], () => ExperimentStore.hasLoadedExperiments);
+  canSeeOnboardingHome = useCanSeeOnboardingHome(guildId2);
+  useEffect(() => {
+    if (stateFromStores2 && !canSeeOnboardingHome) {
+      GuildActionCreators.escapeToDefaultChannel(guildId2);
+    }
+  }, [guildId2, stateFromStores2, canSeeOnboardingHome]);
+  return <GuildOnboardingHomePage guildId={guildId2} />;
+};

modules/guild_onboarding_home/native/GuildOnboardingNewMemberActions.tsx

@@ -0,0 +1,196 @@
+// Metro module 15432 (f15433).
+import { useCallback, useEffect } from "react";
+import { View } from "react-native";
+import EmojiStore from "../../emojis/EmojiStore";
+import ChannelStore from "../../../stores/ChannelStore";
+import GuildMemberStore from "../../../stores/GuildMemberStore";
+import GuildStore from "../../../stores/GuildStore";
+import PermissionStore from "../../../stores/PermissionStore";
+import GuildOnboardingHomeSettingsStore from "../GuildOnboardingHomeSettingsStore";
+import GuildOnboardingMemberActionStore from "../GuildOnboardingMemberActionStore";
+import { Permissions } from "../../../Constants";
+import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
+import { GuildMemberFlags } from "../../guild_member/GuildMemberConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useChannelName from "../../channel/useChannelName";
+import AvatarUtils from "../../../utils/AvatarUtils";
+import { selectNewMemberActionChannel, fetchNewMemberActions } from "../GuildOnboardingHomeActionCreators";
+import FastImage from "../../../components_native/common/FastImage";
+import UnicodeEmojis from "../../emojis/UnicodeEmojis";
+import { Text } from "../../../design/components/Text/native/Text";
+import { Icon } from "../../../design/void/native";
+import Module10990 from "../../../_bundle/Module10990";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { intl, t } from "../../../intl/index.native";
+import Module11442 from "../../../_bundle/Module11442";
+import Module15433 from "../../../_bundle/Module15433";
+import { hasFlag } from "../../../_bundle/Module1384";
+import Module15434 from "../../../_bundle/Module15434";
+let useStyles;
+const MemberActionRow = function MemberActionRow(props) {
+  let r82;
+  const { channelId, title } = props;
+  let emoji = props.emoji;
+  const { icon, completed } = props;
+  const styles = useStyles();
+  if (emoji == null) {
+    emoji = {};
+  }
+  const { id, name } = emoji;
+  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
+  const channelName = useChannelName(stateFromStores, true);
+  const stateFromStores6 = useStateFromStores([PermissionStore], () => PermissionStore.can(Permissions.VIEW_CHANNEL, stateFromStores));
+  const stateFromStores5 = useStateFromStores([EmojiStore], () => id != null ? EmojiStore.getCustomEmojiById(id) : null, [id]);
+  const newMemberActionIconURL = AvatarUtils.getNewMemberActionIconURL({
+    channelId,
+    icon
+  });
+  const callback = useCallback(() => {
+    if (stateFromStores != null) {
+      selectNewMemberActionChannel(stateFromStores.guild_id, stateFromStores.id);
+    }
+  }, [stateFromStores]);
+  const r55 = stateFromStores != null;
+  let r56 = null;
+  if (r55) {
+    r56 = null;
+    if (stateFromStores6) {
+      L14: {
+        if (newMemberActionIconURL != null) {
+          r82 = <FastImage style={styles.icon} source={{
+            uri: newMemberActionIconURL
+          }} resizeMode="contain" />;
+        } else if (stateFromStores5 != null) {
+          r82 = <FastImage style={styles.emoji} source={{
+            uri: AvatarUtils.getEmojiURL({
+              id: stateFromStores5.id,
+              animated: stateFromStores5.animated,
+              size: EMOJI_URL_BASE_SIZE
+            })
+          }} resizeMode="contain" />;
+        } else {
+          if (name != null && UnicodeEmojis.getByName(UnicodeEmojis.convertSurrogateToName(name, false)) != null) {
+            r82 = <Text style={styles.textEmoji} variant="heading-xxl/normal">{name}</Text>;
+            break L14;
+          }
+          r82 = <View style={styles.emojiPlaceholder}>
+            <Icon size={Icon.Sizes.REFRESH_SMALL_16} source={Module10990} />
+          </View>;
+        }
+      }
+      r56 = <PressableOpacity onPress={callback} style={styles.actionContainer}>
+        {r82}
+        <View style={styles.channelNameContainer}>
+          <Text variant="text-md/semibold" color="mobile-text-heading-primary">{title}</Text>
+          <Text variant="text-xs/normal" color="text-muted">
+            {intl.format(t.MkzlDL, {
+              channelName
+            })}
+          </Text>
+        </View>
+        <Icon disableColor size={Icon.Sizes.MEDIUM} source={completed ? Module11442 : Module15433} />
+      </PressableOpacity>;
+    }
+  }
+  return r56;
+};
+useStyles = createStyles({
+  actionsContainer: {
+    paddingHorizontal: 12
+  },
+  actionsHeader: {
+    display: "flex",
+    marginBottom: 16
+  },
+  actionContainer: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    marginBottom: 8,
+    padding: 12,
+    borderRadius: Module712.radii.sm,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  channelNameContainer: {
+    flex: 1,
+    marginHorizontal: 8
+  },
+  icon: {
+    width: 40,
+    height: 40,
+    borderRadius: Module712.radii.xs
+  },
+  emoji: {
+    width: 40,
+    height: 40
+  },
+  textEmoji: {
+    width: 40,
+    textAlign: "center"
+  },
+  emojiPlaceholder: {
+    width: 40,
+    height: 40,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
+    borderRadius: 20,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export default function GuildOnboardingNewMemberActions(props) {
+  let stateFromStores2, stateFromStores3, stateFromStores4;
+  const guildId = props.guildId;
+  stateFromStores2 = void 0;
+  stateFromStores3 = void 0;
+  stateFromStores4 = void 0;
+  const styles = useStyles();
+  const stateFromStores5 = useStateFromStores([GuildOnboardingHomeSettingsStore], () => GuildOnboardingHomeSettingsStore.getNewMemberActions(guildId), [guildId]);
+  stateFromStores2 = useStateFromStores([GuildOnboardingMemberActionStore], () => GuildOnboardingMemberActionStore.getCompletedActions(guildId));
+  stateFromStores3 = useStateFromStores([GuildMemberStore], () => GuildMemberStore.getSelfMember(guildId));
+  stateFromStores4 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
+  useEffect(() => {
+    let r9 = stateFromStores2 == null && stateFromStores3?.flags != null;
+    if (r9) {
+      let flags = stateFromStores3.flags;
+      if (flags == null) {
+        flags = 0;
+      }
+      r9 = hasFlag(flags, GuildMemberFlags.STARTED_HOME_ACTIONS);
+    }
+    if (r9) {
+      fetchNewMemberActions(guildId);
+    }
+  }, [stateFromStores2, guildId, stateFromStores3?.flags]);
+  const callback = useCallback(() => {
+    if (stateFromStores4 != null && stateFromStores4?.rulesChannelId != null) {
+      selectNewMemberActionChannel(stateFromStores4.id, stateFromStores4.rulesChannelId);
+    }
+  }, [stateFromStores4]);
+  return stateFromStores3 == null ? null : stateFromStores5 == null ? null : stateFromStores5.length !== 0 ? <View style={styles.actionsContainer}>
+    <View style={styles.actionsHeader}>
+      <Text variant="heading-lg/bold" color="mobile-text-heading-primary">
+        {intl.string(t.LhlgY9)}
+      </Text>
+    </View>
+    {stateFromStores5.map((item) => {
+      let completed = stateFromStores2 == null ? void 0 : stateFromStores2[item.channelId];
+      if (completed == null) {
+        completed = false;
+      }
+      return <MemberActionRow key={`member-action-${item.channelId}`} channelId={item.channelId} title={item.title} emoji={item.emoji} icon={item.icon} completed={completed} />;
+    })}
+    {stateFromStores4?.rulesChannelId != null && <PressableOpacity onPress={callback} style={styles.actionContainer}>
+      <View style={styles.emojiPlaceholder}>
+        <Icon size={Icon.Sizes.REFRESH_SMALL_16} source={Module15434} />
+      </View>
+      <View style={styles.channelNameContainer}>
+        <Text variant="text-md/semibold" color="mobile-text-heading-primary">
+          {intl.string(t["K/i3iQ"])}
+        </Text>
+      </View>
+    </PressableOpacity>}
+  </View> : null;
+};

modules/guild_onboarding_home/native/HomeWelcomeMessage.tsx

@@ -0,0 +1,161 @@
+// Metro module 15431 (f15432).
+import { useEffect } from "react";
+import { View } from "react-native";
+import GuildStore from "../../../stores/GuildStore";
+import UserStore from "../../../stores/UserStore";
+import GuildOnboardingHomeSettingsStore from "../GuildOnboardingHomeSettingsStore";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
+import useDisplayProfile from "../../user_profile/hooks/useDisplayProfile";
+import useProfileTheme from "../../user_profile/hooks/useProfileTheme";
+import { useSubscribeGuildMembers } from "../../../lib/guild/subscribeGuildMembers";
+import maybeFetchUserProfile from "../../user_profile/maybeFetchUserProfile";
+import { useName } from "../../../utils/UserUtils";
+import { ThemeContextProvider } from "../../../_bundle/Module3901";
+import { int2rgba } from "../../../_bundle/int2hslRaw";
+import HeaderAvatar from "../../profile_customization/native/HeaderAvatar";
+import { AvatarSizes, Icon } from "../../../design/void/native";
+import UserProfileGradientContainer from "../../user_profile/native/UserProfileGradientContainer";
+import { Text } from "../../../design/components/Text/native/Text";
+import NicknameUtils from "../../../utils/NicknameUtils";
+import Module8287 from "../../../_bundle/Module8287";
+const useStyles = createStyles({
+  relativeContainer: {
+    position: "relative"
+  },
+  welcomeContainer: {
+    marginHorizontal: 12,
+    marginVertical: 16,
+    borderRadius: Module712.radii.sm,
+    padding: 2,
+    display: "flex",
+    flexDirection: "column"
+  },
+  welcomeContent: {
+    borderRadius: Module712.radii.sm,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    paddingHorizontal: 12,
+    paddingBottom: 12,
+    paddingTop: 4
+  },
+  avatarBackground: {
+    position: "absolute",
+    zIndex: 2,
+    top: 0,
+    left: 28,
+    width: 40,
+    height: 40,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  avatarBorder: {
+    position: "absolute",
+    top: -2,
+    zIndex: -1,
+    left: 26,
+    width: 44,
+    height: 44,
+    borderRadius: Module712.radii.round
+  },
+  avatar: {
+    position: "absolute",
+    top: 0,
+    zIndex: 3,
+    left: 28
+  },
+  adminUsernameContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 4,
+    paddingLeft: 44
+  },
+  adminUsername: {
+    color: Module712.colors.MOBILE_TEXT_HEADING_PRIMARY,
+    paddingLeft: 8
+  },
+  message: {
+    color: Module712.colors.TEXT_DEFAULT
+  },
+  icon: {
+    marginLeft: 4
+  }
+});
+export default function HomeWelcomeMessage(props) {
+  let stateFromStores, stateFromStores2, stateFromStores3;
+  const guildId = props.guildId;
+  stateFromStores = void 0;
+  stateFromStores2 = void 0;
+  stateFromStores3 = void 0;
+  const styles = useStyles();
+  const stateFromStores4 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
+  stateFromStores = useStateFromStores([GuildOnboardingHomeSettingsStore], () => GuildOnboardingHomeSettingsStore.getWelcomeMessage(guildId));
+  stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getUser(stateFromStores == null ? void 0 : stateFromStores.authorIds[0]));
+  const profileTheme = useProfileTheme({
+    user: stateFromStores2,
+    displayProfile: useDisplayProfile(stateFromStores2?.id, guildId)
+  });
+  const { theme, primaryColor, secondaryColor } = profileTheme;
+  stateFromStores3 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
+  let r72 = stateFromStores?.authorIds;
+  if (r72 == null) {
+    r72 = [];
+  }
+  const r73 = {};
+  r73[guildId] = r72;
+  useSubscribeGuildMembers(r73, "HomeWelcomeMessage");
+  useEffect(() => {
+    if (!(stateFromStores2 == null || stateFromStores2.isNonUserBot())) {
+      maybeFetchUserProfile(stateFromStores2.id, stateFromStores2.getAvatarURL(stateFromStores3?.id, 80), {
+        dispatchWait: true,
+        guildId: stateFromStores3?.id
+      });
+    }
+  }, [stateFromStores2, stateFromStores3]);
+  const name = useName(stateFromStores4);
+  if (stateFromStores != null && stateFromStores4 != null && stateFromStores2 != null) {
+    const r84 = stateFromStores3 != null && stateFromStores3.ownerId === stateFromStores2.id;
+    const fallbackBackground = ["#B8CDFF", "#8CD9FF"];
+    const r102 = [stateFromStores2.avatarDecoration == null ? <View style={[styles.avatarBorder, {
+      backgroundColor: primaryColor != null ? int2rgba(primaryColor, 1) : fallbackBackground[0]
+    }]} /> : null, <View style={styles.avatarBackground} />, <HeaderAvatar style={styles.avatar} user={stateFromStores2} size={AvatarSizes.NORMAL} disableStatus />, ,];
+    const r147 = [<View style={styles.adminUsernameContainer}>
+      <Text style={styles.adminUsername} variant="text-md/semibold">
+        {NicknameUtils.getName(guildId, null, stateFromStores2)}
+      </Text>
+      {r84 ? <Icon size={Icon.Sizes.REFRESH_SMALL_16} style={styles.icon} source={Module8287} disableColor /> : null}
+    </View>, ,];
+    const message = stateFromStores.message;
+    let r152 = name;
+    if (r152 == null) {
+      r152 = stateFromStores4.username;
+    }
+    const r155 = message.split(/\[@username\]/g);
+    const r156 = [];
+    const r2 = r155.length - 1;
+    let key = 0;
+    if (0 < r2) {
+      do {
+        r156.push(<Text key={key} variant="text-sm/normal" style={styles.message}>
+          {r155[key]}
+        </Text>);
+        r156.push(<Text key={`${key}-user`} variant="text-sm/bold" style={styles.message}>
+          {`@${r152}`}
+        </Text>);
+        key = key + 1;
+      } while (key < r155.length - 1);
+    }
+    r156.push(<Text key={r155.length} variant="text-sm/normal" style={styles.message}>
+      {r155[r155.length - 1]}
+    </Text>);
+    r147[1] = <Text variant="text-sm/normal">{r156}</Text>;
+    r102[3] = <UserProfileGradientContainer containerStyle={styles.welcomeContainer} primaryColor={primaryColor} secondaryColor={secondaryColor} fallbackBackground={fallbackBackground}>
+      <View style={styles.welcomeContent}>{r147}</View>
+    </UserProfileGradientContainer>;
+    return <ThemeContextProvider theme={theme} primaryColor={primaryColor} secondaryColor={secondaryColor}>
+      <View style={styles.relativeContainer}>{r102}</View>
+    </ThemeContextProvider>;
+  }
+  return null;
+};

modules/guild_onboarding_home/native/MemberActionChatInputBanner.tsx

@@ -0,0 +1,313 @@
+// Metro module 11440 (f11441).
+import { useState, useEffect, useCallback, memo } from "react";
+import { View } from "react-native";
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import EmojiStore from "../../emojis/EmojiStore";
+import ChannelStore from "../../../stores/ChannelStore";
+import GuildMemberStore from "../../../stores/GuildMemberStore";
+import { Routes } from "../../../Constants";
+import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
+import useChannelName from "../../channel/useChannelName";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import * as _native from "../../../design/void/native";
+import { Icon } from "../../../design/void/native";
+import Module10990 from "../../../_bundle/Module10990";
+import FastImage from "../../../components_native/common/FastImage";
+import AvatarUtils from "../../../utils/AvatarUtils";
+import UnicodeEmojis from "../../emojis/UnicodeEmojis";
+import { useMemberActionsForChannel, useNextMemberAction, useAllActionsCompleted } from "../MemberActionUtils";
+import { NewMemberActionTypes, CHANNEL_ACTION_BANNER_HEIGHT } from "../GuildOnboardingHomeTypes";
+import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
+import * as _timing from "../../../design/animation/reanimated/timing/timing";
+import Module11442 from "../../../_bundle/Module11442";
+import { PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
+import { transitionTo } from "../../routing/router_utils";
+import Module6684 from "../../../_bundle/Module6684";
+import { useCanSeeOnboardingHome } from "../OnboardingHomeUtils";
+let useStyles, ChannelActionEmoji, __initData, __initData2, MemberActionChatInputBanner, Component;
+const ActionChannelInfo = function ActionChannelInfo(props) {
+  const action = props.action;
+  const stateFromStores2 = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(action.channelId));
+  const channelName = useChannelName(stateFromStores2, true);
+  return <Text {...stateFromStores2 == null ? {
+    variant: "text-xxs/normal",
+    color: "text-default",
+    children: intl.format(t.MkzlDL, {
+      channelName: intl.string(t.J90oLW)
+    })
+  } : {
+    variant: "text-xxs/normal",
+    color: "text-default",
+    children: intl.format(t.MkzlDL, {
+      channelName
+    })
+  }} />;
+};
+ChannelActionEmoji = function ChannelActionEmoji(props) {
+  const emoji = props.emoji;
+  const styles2 = useStyles();
+  const r29 = <View style={styles2.emojiPlaceholder}>
+    <Icon size={Icon.Sizes.REFRESH_SMALL_16} source={Module10990} />
+  </View>;
+  const id = emoji?.id;
+  const name = emoji?.name;
+  const stateFromStores2 = useStateFromStores([EmojiStore], () => id != null ? EmojiStore.getCustomEmojiById(id) : null, [id]);
+  return stateFromStores2 != null ? <FastImage style={styles2.emoji} source={{
+    uri: AvatarUtils.getEmojiURL({
+      id: stateFromStores2.id,
+      animated: stateFromStores2.animated,
+      size: EMOJI_URL_BASE_SIZE
+    })
+  }} resizeMode="contain" /> : name != null ? UnicodeEmojis.getByName(UnicodeEmojis.convertSurrogateToName(name, false)) != null ? <Text style={styles2.textEmoji} variant="heading-lg/normal">{name}</Text> : r29 : r29;
+};
+MemberActionChatInputBanner = function MemberActionChatInputBanner(props) {
+  let c18841_6, state, setState, state2, setState2, sharedValue, sharedValue2;
+  const channel = props.channel;
+  c18841_6 = void 0;
+  state = void 0;
+  setState = void 0;
+  state2 = void 0;
+  setState2 = void 0;
+  sharedValue = void 0;
+  sharedValue2 = void 0;
+  const styles = useStyles();
+  const memberActionsForChannel = useMemberActionsForChannel(channel.guild_id, channel);
+  const { channelAction, completed } = memberActionsForChannel;
+  const nextMemberAction = useNextMemberAction(channel.guild_id, channelAction?.channelId);
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const isViewAction = channelAction?.actionType === NewMemberActionTypes.VIEW;
+  c18841_6 = isViewAction;
+  [state, setState] = useState(CHANNEL_ACTION_BANNER_HEIGHT);
+  [state2, setState2] = useState(CHANNEL_ACTION_BANNER_HEIGHT);
+  sharedValue = useSharedValue(0);
+  sharedValue2 = useSharedValue(completed ? state2 : 0);
+  useEffect(() => {
+    if (!completed && !c18841_6) {
+      sharedValue.set(state);
+    } else {
+      sharedValue.set(0);
+    }
+  }, [sharedValue, completed, isViewAction, state]);
+  useEffect(() => {
+    if (completed && nextMemberAction != null) {
+      sharedValue2.set(state2);
+    } else {
+      sharedValue2.set(0);
+    }
+  }, [sharedValue2, completed, nextMemberAction, state2]);
+  const G = function G() {
+    let r25;
+    const r4 = {
+      height: null
+    };
+    if (stateFromStores) {
+      r4.height = sharedValue.get();
+      r25 = r4;
+    } else {
+      r4.height = _ReanimatedRexport.withDelay(completed ? 800 : 200, _timing.withTiming(sharedValue.get(), {
+        duration: 400,
+        easing: _native.DECELERATED_EASING
+      }));
+      r25 = r4;
+    }
+    return r25;
+  };
+  G.__closure = {
+    useReducedMotion: stateFromStores,
+    height: sharedValue,
+    withDelay: _ReanimatedRexport.withDelay,
+    completed,
+    withTiming: _timing.withTiming,
+    DECELERATED_EASING: _native.DECELERATED_EASING
+  };
+  G.__workletHash = 5585837927201;
+  G.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(G);
+  const B = function B() {
+    let r26;
+    const r5 = {
+      height: null
+    };
+    if (stateFromStores) {
+      r5.height = sharedValue2.get();
+      r26 = r5;
+    } else {
+      r5.height = _ReanimatedRexport.withDelay(c18841_6 ? 0 : completed ? 1200 : 0, _timing.withTiming(sharedValue2.get(), {
+        duration: 400,
+        easing: _native.DECELERATED_EASING
+      }));
+      r26 = r5;
+    }
+    return r26;
+  };
+  B.__closure = {
+    useReducedMotion: stateFromStores,
+    nextHeight: sharedValue2,
+    withDelay: _ReanimatedRexport.withDelay,
+    isViewAction,
+    completed,
+    withTiming: _timing.withTiming,
+    DECELERATED_EASING: _native.DECELERATED_EASING
+  };
+  B.__workletHash = 10256555667281;
+  B.__initData = __initData2;
+  const animatedStyle2 = useAnimatedStyle(B);
+  const callback = useCallback((a0) => {
+    setState(a0.nativeEvent.layout.height);
+  }, [setState]);
+  const callback2 = useCallback((a0) => {
+    setState2(a0.nativeEvent.layout.height);
+  }, [setState2]);
+  if (channelAction == null) {
+    return null;
+  }
+  const renderAction = function renderAction() {
+    let r1 = null;
+    if (channelAction != null) {
+      const r21 = [<ChannelActionEmoji emoji={channelAction.emoji} />, <View style={styles.text}>
+        <Text variant="text-sm/medium" color="mobile-text-heading-primary" style={styles.wrap}>{channelAction.title}</Text>
+        <Text variant="text-xxs/normal" color="text-muted">
+          {intl.string(t["ElGg8+"])}
+        </Text>
+      </View>, ,];
+      let r44 = completed;
+      if (completed) {
+        r44 = <Icon disableColor size={Icon.Sizes.MEDIUM} source={Module11442} />;
+      }
+      r21[2] = r44;
+      r1 = <View style={styles.container}>{r21}</View>;
+    }
+    return r1;
+  };
+  const r127 = [<View style={styles.measurement} onLayout={callback}>
+    {renderAction()}
+  </View>, isViewAction ? !isViewAction : <ReanimatedRexport.View style={[styles.animatedContainer, animatedStyle]}>
+    {renderAction()}
+  </ReanimatedRexport.View>, ,];
+  let r136 = null;
+  if (completed) {
+    const r137 = nextMemberAction != null;
+    r136 = null;
+    if (r137) {
+      const renderNextAction = function renderNextAction() {
+        return nextMemberAction != null ? <PressableHighlight accessibilityRole="button" accessibilityLabel={intl.string(t.PDTjLN)} style={styles.container} onPress={() => transitionTo(Routes.CHANNEL(channel.guild_id, nextMemberAction.channelId))}>
+          <ChannelActionEmoji emoji={nextMemberAction.emoji} />
+          <View style={styles.text}>
+            <Text variant="text-sm/medium" color="mobile-text-heading-primary" style={styles.wrap}>
+              {intl.format(t["/beONw"], {
+                step: nextMemberAction.title
+              })}
+            </Text>
+            <ActionChannelInfo action={nextMemberAction} />
+          </View>
+          <View style={styles.circle}>
+            <Icon size={Icon.Sizes.REFRESH_SMALL_16} style={styles.icon} source={Module6684} />
+          </View>
+        </PressableHighlight> : null;
+      };
+      r136 = <>
+        <View style={styles.measurement} onLayout={callback2}>
+          {renderNextAction()}
+        </View>
+        <ReanimatedRexport.View style={[styles.animatedContainer, animatedStyle2]}>
+          {renderNextAction()}
+        </ReanimatedRexport.View>
+      </>;
+    }
+  }
+  r127[2] = r136;
+  return <>{r127}</>;
+};
+useStyles = createStyles({
+  animatedContainer: {
+    overflow: "hidden"
+  },
+  measurement: {
+    opacity: 0,
+    position: "absolute"
+  },
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  text: {
+    flexGrow: 1,
+    flexShrink: 1,
+    marginLeft: 8
+  },
+  wrap: {
+    flexShrink: 1,
+    flexWrap: "wrap"
+  },
+  emoji: {
+    width: 24,
+    height: 24
+  },
+  textEmoji: {
+    width: 24,
+    textAlign: "center"
+  },
+  emojiPlaceholder: {
+    width: 24,
+    height: 24,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    borderRadius: Module712.radii.md,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  circle: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 20,
+    width: 20,
+    borderRadius: 15,
+    marginLeft: 8,
+    backgroundColor: Module712.colors.BACKGROUND_BRAND
+  },
+  icon: {
+    tintColor: Module712.colors.WHITE
+  }
+});
+__initData = {
+  code: "function MemberActionChatInputBannerTsx1(){const{useReducedMotion,height,withDelay,completed,withTiming,DECELERATED_EASING}=this.__closure;if(useReducedMotion){return{height:height.get()};}return{height:withDelay(completed?800:200,withTiming(height.get(),{duration:400,easing:DECELERATED_EASING}))};}"
+};
+__initData2 = {
+  code: "function MemberActionChatInputBannerTsx2(){const{useReducedMotion,nextHeight,withDelay,isViewAction,completed,withTiming,DECELERATED_EASING}=this.__closure;if(useReducedMotion){return{height:nextHeight.get()};}return{height:withDelay(!isViewAction&&completed?1200:0,withTiming(nextHeight.get(),{duration:400,easing:DECELERATED_EASING}))};}"
+};
+Component = memo(function({ channel: channel2 }) {
+  const canSeeOnboardingHome = useCanSeeOnboardingHome(channel2.guild_id);
+  const stateFromStores2 = useStateFromStores([GuildMemberStore], () => GuildMemberStore.getSelfMember(channel2.guild_id)?.isPending === true);
+  return useAllActionsCompleted(channel2.guild_id) ? null : stateFromStores2 ? null : canSeeOnboardingHome ? <MemberActionChatInputBanner channel={channel2} /> : null;
+});
+const r84 = memo(function({ channel: channel3 }) {
+  let r27;
+  const memberActionsForChannel = useMemberActionsForChannel(channel3.guild_id, channel3);
+  const { channelAction: channelAction2, completed: completed2 } = memberActionsForChannel;
+  const nextMemberAction2 = useNextMemberAction(channel3.guild_id, channelAction2?.channelId);
+  const actionType = channelAction2?.actionType;
+  L8: {
+    if (actionType === NewMemberActionTypes.VIEW) {
+      r27 = null;
+      if (!completed2) {
+        break L8;
+      }
+      r27 = nextMemberAction2 != null ? <Component channel={channel3} /> : null;
+    } else {
+      r27 = <Component channel={channel3} />;
+    }
+  }
+  return r27;
+});
+export { Component as MemberActionChatInputBannerGuarded };
+export { r84 as MemberActionsChatInputBannerGuardedOuter };

modules/guild_onboarding_home/native/NewMemberActionsCompletedModal.tsx

@@ -0,0 +1,77 @@
+// Metro module 16189 (f16190).
+import { useEffect } from "react";
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
+import * as _timing from "../../../design/animation/reanimated/timing/timing";
+import ModalActionCreators from "../../../actions/ModalActionCreators";
+import { NEW_MEMBER_ACTION_COMPLETE_MODAL_KEY } from "../GuildOnboardingHomeTypes";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+const useStyles = createStyles({
+  screen: {
+    flex: 1,
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.8)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  text: {
+    marginBottom: 16
+  },
+  progressBackground: {
+    borderRadius: Module712.radii.round,
+    height: 8,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL,
+    width: "60%"
+  },
+  progressForeground: {
+    backgroundColor: Module712.unsafe_rawColors.GREEN_330,
+    borderRadius: Module712.radii.round,
+    height: 8
+  }
+});
+const __initData = {
+  code: "function NewMemberActionsCompletedModalTsx1(){const{withDelay,withTiming,barWidth}=this.__closure;return{width:withDelay(500,withTiming(barWidth.get()*100+\"%\",{duration:700}))};}"
+};
+export default function NewMemberActionsCompleted(props) {
+  const { initialPercent, numActions } = props;
+  const styles = useStyles();
+  const sharedValue = useSharedValue(initialPercent);
+  useEffect(() => {
+    sharedValue.set(1);
+  }, [sharedValue]);
+  const b = function b() {
+    return {
+      width: _ReanimatedRexport.withDelay(500, _timing.withTiming(100 * sharedValue.get() + "%", {
+        duration: 700
+      }))
+    };
+  };
+  b.__closure = {
+    withDelay: _ReanimatedRexport.withDelay,
+    withTiming: _timing.withTiming,
+    barWidth: sharedValue
+  };
+  b.__workletHash = 7643178959760;
+  b.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(b);
+  useEffect(() => {
+    setTimeout(() => ModalActionCreators.popWithKey(NEW_MEMBER_ACTION_COMPLETE_MODAL_KEY), 2500);
+  }, []);
+  return <View style={styles.screen}>
+    <Text style={styles.text} variant="heading-xl/semibold" color="text-overlay-light">
+      {intl.format(t.pGj5u2, {
+        count: numActions
+      })}
+    </Text>
+    <View style={styles.progressBackground}>
+      <ReanimatedRexport.View style={[styles.progressForeground, animatedStyle]} />
+    </View>
+  </View>;
+};

modules/guild_onboarding_home/native/NewMemberActionsProgress.tsx

@@ -0,0 +1,99 @@
+// Metro module 15177 (f15178).
+import { useMemo } from "react";
+import { View } from "react-native";
+import GuildMemberStore from "../../../stores/GuildMemberStore";
+import GuildOnboardingHomeSettingsStore from "../GuildOnboardingHomeSettingsStore";
+import GuildOnboardingMemberActionStore from "../GuildOnboardingMemberActionStore";
+import { StaticChannelRoute } from "../../channel/ChannelConstants";
+import { GuildMemberFlags } from "../../guild_member/GuildMemberConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import Module4611 from "../../../_bundle/Module4611";
+import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
+import { hasFlag } from "../../../_bundle/Module1384";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { transitionTo } from "../../routing/router_utils";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import { Icon } from "../../../design/void/native";
+import Module10737 from "../../../_bundle/Module10737";
+let useStyles;
+const ProgressBar = function ProgressBar(props) {
+  const percent = props.percent;
+  const styles = useStyles();
+  return <View style={styles.progressBackground}>
+    <Module4611 style={[styles.progressForeground, {
+      width: `${percent}%`
+    }]} colors={["rgba(103, 203, 134, 1)", "rgba(59, 165, 92, 1)"]} useAngle angle={-90} />
+  </View>;
+};
+useStyles = createStyles({
+  container: {
+    padding: 16
+  },
+  horizontal: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  spaceBetween: {
+    justifyContent: "space-between"
+  },
+  spaceBelow: {
+    marginBottom: 8
+  },
+  progressBackground: {
+    borderRadius: Module712.radii.round,
+    height: 8,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL
+  },
+  progressForeground: {
+    backgroundColor: Module712.colors.STATUS_POSITIVE_BACKGROUND,
+    borderRadius: Module712.radii.round,
+    height: 8
+  }
+});
+export function NewMemberActionsProgress(props) {
+  let stateFromStores2;
+  const guildId = props.guildId;
+  stateFromStores2 = void 0;
+  const styles = useStyles();
+  const stateFromStores = useStateFromStores([GuildOnboardingHomeSettingsStore], () => GuildOnboardingHomeSettingsStore.getNewMemberActions(guildId), [guildId]);
+  stateFromStores2 = useStateFromStores([GuildOnboardingMemberActionStore], () => GuildOnboardingMemberActionStore.getCompletedActions(guildId));
+  const stateFromStores3 = useStateFromStores([GuildMemberStore], () => GuildMemberStore.getSelfMember(guildId));
+  let r14 = stateFromStores?.length;
+  if (r14 == null) {
+    r14 = 0;
+  }
+  const memo = useMemo(() => {
+    if (stateFromStores != null && stateFromStores2 != null) {
+      let c27958_0 = 0;
+      stateFromStores.forEach((stateFromStore) => {
+        if (stateFromStores2[stateFromStore.channelId] != null) {
+          c27958_0 = c27958_0 + 1;
+        }
+      });
+      return c27958_0;
+    }
+    return 0;
+  }, [stateFromStores2, stateFromStores]);
+  let r50 = stateFromStores3?.flags;
+  if (r50 == null) {
+    r50 = 0;
+  }
+  return hasFlag(r50, GuildMemberFlags.COMPLETED_HOME_ACTIONS) ? null : r14 !== 0 ? memo + r14 !== 0 ? <PressableOpacity accessibilityRole="button" activeOpacity={0.4} style={styles.container} onPress={function onPress() {
+    transitionTo(StaticChannelRoute.GUILD_HOME);
+  }}>
+    <View style={[styles.horizontal, styles.spaceBetween, styles.spaceBelow]}>
+      <Text variant="text-xs/bold" color="mobile-text-heading-primary">
+        {intl.string(t.LhlgY9)}
+      </Text>
+      <View style={styles.horizontal}>
+        <Text variant="text-xs/bold" color="mobile-text-heading-primary">{memo}</Text>
+        <Text variant="text-xs/medium" color="text-default">/</Text>
+        <Text variant="text-xs/bold" color="mobile-text-heading-primary">{r14}</Text>
+        <Icon size={Icon.Sizes.REFRESH_SMALL_16} source={Module10737} />
+      </View>
+    </View>
+    <ProgressBar percent={memo / r14 * 100 + 3} />
+  </PressableOpacity> : null : null;
+}

modules/guild_onboarding_home/native/OnboardingHomeConstants.tsx

@@ -0,0 +1,2 @@
+// Metro module 15428 (f15429).
+export const ONBOARDING_HOME_RESOURCES_SHEET_KEY = "OnboardingHomeResourcesSheet";

modules/guild_onboarding_home/native/OnboardingHomeResourcesSheet.tsx

@@ -0,0 +1,34 @@
+// Metro module 15430 (f15431).
+import { ONBOARDING_HOME_RESOURCES_SHEET_KEY } from "./OnboardingHomeConstants";
+import { useToken } from "../../../design/tokens/native/useToken";
+import Module712 from "../../../_bundle/Module712";
+import useResourceChannels from "../useResourceChannels";
+import { selectHomeResourceChannel } from "../GuildOnboardingHomeActionCreators";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { ActionSheet } from "../../../design/components/Sheet/native/ActionSheet.native";
+import { ActionSheetRow } from "../../../design/components/Sheet/native/ActionSheetRow.native";
+import AvatarUtils from "../../../utils/AvatarUtils";
+import FastImage from "../../../components_native/common/FastImage";
+export default function OnboardingHomeResourcesSheet(props) {
+  const guildId = props.guildId;
+  const token = useToken(Module712.modules.mobile.TABLE_ROW_ICON_SIZE);
+  return <ActionSheet>
+    <ActionSheetRow.Group hasIcons>
+      {useResourceChannels(guildId).map((item) => {
+        let uri = AvatarUtils.getResourceChannelIconURL(item);
+        if (uri == null) {
+          uri = void 0;
+        }
+        return <ActionSheetRow key={item.channelId} label={item.title} icon={uri != null ? <FastImage style={{
+          width: token,
+          height: token
+        }} source={{
+          uri
+        }} /> : void 0} onPress={() => {
+          selectHomeResourceChannel(guildId, item.channelId);
+          ActionSheetActionCreators.hideActionSheet(ONBOARDING_HOME_RESOURCES_SHEET_KEY);
+        }} arrow />;
+      })}
+    </ActionSheetRow.Group>
+  </ActionSheet>;
+};

modules/guild_onboarding_home/native/OnboardingHomeScrollView.tsx

@@ -0,0 +1,43 @@
+// Metro module 15421 (f15422).
+import { useRef, useEffect, useMemo } from "react";
+import { ScrollView } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+const useStyles = createStyles({
+  guildFeedBackground: {
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
+  }
+});
+export default function OnboardingHomeScrollView(props) {
+  const { guildId, headerOffset = 0 } = props;
+  let ref3;
+  const marginTop = headerOffset;
+  const { scrollValue, children } = props;
+  ref3 = void 0;
+  const styles = useStyles();
+  const ref = useRef(false);
+  const ref2 = useRef(null);
+  const bottom = useSafeAreaInsets_native().bottom;
+  useEffect(() => {
+    ref.current = false;
+  }, [guildId]);
+  ref3 = useRef(true);
+  useEffect(() => {
+    if (!(ref2.current == null || ref3.current)) {
+      ref2.current.scrollTo({
+        animated: false,
+        y: 0
+      });
+    }
+    ref3.current = false;
+  }, [guildId]);
+  return <ScrollView ref={ref2} scrollIndicatorInsets={{
+    right: 1
+  }} onScroll={function onScroll(event) {
+    scrollValue.set(event.nativeEvent.contentOffset.y);
+  }} scrollEventThrottle={16} style={styles.guildFeedBackground} contentContainerStyle={useMemo(() => ({
+    paddingBottom: 16 + bottom,
+    marginTop
+  }), [bottom, marginTop])}>{children}</ScrollView>;
+};

modules/guild_onboarding_home/native/ResourceChannelButtons.tsx

@@ -0,0 +1,66 @@
+// Metro module 11436 (f11437).
+import { useCallback } from "react";
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useNavigation } from "../../../_bundle/Module1481";
+import { usePreviousAndNextResourceChannel } from "../getNextResourceChannel";
+import { selectHomeResourceChannel } from "../GuildOnboardingHomeActionCreators";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { Icon } from "../../../design/void/native";
+import Module10028 from "../../../_bundle/Module10028";
+import Module6684 from "../../../_bundle/Module6684";
+const useStyles = createStyles({
+  wrapper: {
+    display: "flex",
+    flexDirection: "row",
+    padding: 12,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  buttonWrapper: {
+    flex: 1
+  },
+  spacer: {
+    width: 8
+  },
+  iconColor: {
+    color: Module712.colors.WHITE
+  }
+});
+export default function ResourceChannelButtons(props) {
+  let r40;
+  let channel, navigation, c18835_2, c18835_3, callback;
+  L11: {
+    channel = props.channel;
+    navigation = void 0;
+    c18835_2 = void 0;
+    c18835_3 = void 0;
+    callback = void 0;
+    navigation = useNavigation();
+    const styles = useStyles();
+    const [r33, r15] = usePreviousAndNextResourceChannel(channel.guild_id, channel.id);
+    c18835_2 = r33;
+    c18835_3 = r15;
+    callback = useCallback((a0) => {
+      navigation.goBack();
+      selectHomeResourceChannel(channel.guild_id, a0);
+    }, [channel.guild_id, navigation]);
+    if (r33 == null) {
+      const r3 = r15 == null;
+      r40 = null;
+      if (r3) {
+        break L11;
+      }
+    }
+    r40 = <View style={styles.wrapper}>
+      {r33 != null && <View style={styles.buttonWrapper}>
+        <Button variant="secondary" text={r33.title} icon={<Icon color={styles.iconColor.color} source={Module10028} />} onPress={() => callback(c18835_2.channelId)} grow />
+      </View>}
+      {r33 != null && r15 != null && <View style={styles.spacer} />}
+      {r15 != null && <View style={styles.buttonWrapper}>
+        <Button text={r15.title} icon={<Icon color={styles.iconColor.color} source={Module6684} />} iconPosition="end" onPress={() => callback(c18835_3.channelId)} grow />
+      </View>}
+    </View>;
+  }
+  return r40;
+};

modules/guild_onboarding_home/native/ResourcesRow.tsx

@@ -0,0 +1,54 @@
+// Metro module 15427 (f15428).
+import { ScrollView } from "react-native";
+import { ONBOARDING_HOME_RESOURCES_SHEET_KEY } from "./OnboardingHomeConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import useResourceChannels from "../useResourceChannels";
+import { selectHomeResourceChannel } from "../GuildOnboardingHomeActionCreators";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+const useStyles = createStyles({
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    paddingBottom: 8,
+    marginBottom: 16
+  },
+  channelItem: {
+    display: "flex",
+    justifyContent: "center",
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
+    borderRadius: Module712.radii.round,
+    marginLeft: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12
+  }
+});
+export default function ResourcesRow(props) {
+  const guildId = props.guildId;
+  const styles = useStyles();
+  const resourceChannels = useResourceChannels(guildId);
+  const r3 = resourceChannels.length > 2;
+  return <ScrollView horizontal style={styles.container}>
+    {resourceChannels.slice(0, 2).map((item) => {
+      return <PressableOpacity key={item.channelId} style={styles.channelItem} onPress={() => {
+        selectHomeResourceChannel(guildId, item.channelId);
+      }}>
+        <Text variant="text-md/medium" color="text-default">{item.title}</Text>
+      </PressableOpacity>;
+    })}
+    {r3 ? <PressableOpacity style={styles.channelItem} onPress={() => {
+      ActionSheetActionCreators.openLazy(import("./OnboardingHomeResourcesSheet"), ONBOARDING_HOME_RESOURCES_SHEET_KEY, {
+        guildId
+      });
+    }}>
+      <Text variant="text-md/medium" color="text-default">
+        {intl.format(t.F6iMs4, {
+          count: resourceChannels.length - 2
+        })}
+      </Text>
+    </PressableOpacity> : null}
+  </ScrollView>;
+};