335 lines
16 KiB
TypeScript
335 lines
16 KiB
TypeScript
// Metro module 13746 (f13747).
|
|
import { useRef } from "react";
|
|
import { ScrollView, View } from "react-native";
|
|
import GuildMemberStore from "../../../stores/GuildMemberStore";
|
|
import UserProfileStore from "../UserProfileStore";
|
|
import { FLOATING_UPSELL_HEIGHT } from "./Constants";
|
|
import { AnalyticsObjects, AnalyticsSections, BIO_MAX_LENGTH, DISPLAY_NAME_MAX_LENGTH, PRONOUNS_MAX_LENGTH, UpsellTypes, AnalyticsPages } from "../../../Constants";
|
|
import { PremiumUpsellTypes } from "../../premium/PremiumConstants";
|
|
import PremiumUtils from "../../../utils/PremiumUtils";
|
|
import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
|
|
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
|
|
import UserProfileEditBannerButton from "./UserProfileEditBannerButton";
|
|
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
|
|
import * as _ProfileCustomizationUtils from "../../profile_customization/ProfileCustomizationUtils";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { setPendingChanges } from "../UserProfileSettingsActionCreators";
|
|
import PremiumUpsellUtils from "../../../utils/native/PremiumUpsellUtils";
|
|
import UserProfileSharedStyles from "./UserProfileSharedStyles";
|
|
import UserProfileEditFormSharedStyles from "./UserProfileEditFormSharedStyles";
|
|
import useKeyboardIsOpen from "../../keyboard/native/useKeyboardIsOpen";
|
|
import useSafeAreaInsetsKeyboardAware_native from "../../safe_area/useSafeAreaInsetsKeyboardAware.native";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import useSafeAreaAvoidingInputs_native from "../../safe_area/useSafeAreaAvoidingInputs.native";
|
|
import useGuildProfileEditForm from "../../user_settings/profiles/native/useGuildProfileEditForm";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import useDisplayProfile from "../hooks/useDisplayProfile";
|
|
import { useCustomStatusActivity } from "../../custom_status/utils/userSettingToActivity";
|
|
import useBadges from "../hooks/useBadges";
|
|
import { getPendingAvatarSrc } from "../../recent_avatars/RecentAvatarUtils";
|
|
import { useGuildActionSheetPermissions } from "../../guild_action_sheet/native/GuildActionSheetUtils";
|
|
import * as _GuildIdentitySettingsUtils from "../../guild_identity/GuildIdentitySettingsUtils";
|
|
import useProfileTheme from "../hooks/useProfileTheme";
|
|
import { useUserProfileColors } from "../hooks/native/useUserProfileColors";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { ThemeContextProvider } from "../../../_bundle/Module3901";
|
|
import EditGuildIdentityAvatar from "../../guild_identity/native/EditGuildIdentityAvatar";
|
|
import UserProfileGradientContainer from "./UserProfileGradientContainer";
|
|
import UserProfileCustomStatusBubble from "./UserProfileCustomStatusBubble";
|
|
import UserProfilePrimaryInfo from "./UserProfilePrimaryInfo";
|
|
import UserProfileEditFormTextField from "./UserProfileEditFormTextField";
|
|
import UserUtils from "../../../utils/UserUtils";
|
|
import UserProfileDisplayNameStylesEditButton from "./UserProfileDisplayNameStylesEditButton";
|
|
import UserProfileEditTheme from "./UserProfileEditTheme";
|
|
import UserProfileAvatarDecorationEditButton from "./UserProfileAvatarDecorationEditButton";
|
|
import UserProfileEffectEditButton from "./UserProfileEffectEditButton";
|
|
import UserProfileFrameEditButton from "./UserProfileFrameEditButton";
|
|
import UserProfileNameplateEditButton from "./UserProfileNameplateEditButton";
|
|
import UserProfileUpsellCard from "./UserProfileUpsellCard";
|
|
import openPremiumModal from "../../../components_native/premium/openPremiumModal";
|
|
import { PremiumFeatureCardOrder } from "../../user_settings/premium/native/PremiumFeaturesCards";
|
|
let _excluded, c9561_20;
|
|
const EditGuildProfileBanner = function EditGuildProfileBanner(props) {
|
|
const { user, displayProfile, guildId, guildMember, guildMemberProfile, pendingAvatarSrc, pendingBanner, pendingThemeColors, disabled } = props;
|
|
let showEditButton = PremiumUtils.canUsePremiumGuildMemberProfile(user);
|
|
const canUsePremiumGuildMemberProfile = showEditButton;
|
|
const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.EDIT_BANNER).analyticsLocations;
|
|
if (canUsePremiumGuildMemberProfile) {
|
|
showEditButton = guildMember != null;
|
|
}
|
|
return <AnalyticsLocationProvider value={analyticsLocations}>
|
|
<UserProfileEditBannerButton user={user} displayProfile={displayProfile} pendingBanner={pendingBanner} pendingAvatarSrc={pendingAvatarSrc} pendingThemeColors={pendingThemeColors} showProfilePreviewButton={false} showEditButton={showEditButton} onPressEdit={function onPressEdit() {
|
|
if (canUsePremiumGuildMemberProfile) {
|
|
ActionSheetActionCreators.openLazy(import("./ChangeBannerActionSheet"), "Change Banner", {
|
|
user,
|
|
analyticsLocations,
|
|
showRemoveBanner: _ProfileCustomizationUtils.showRemoveBanner(pendingBanner, guildMemberProfile?.banner),
|
|
removeText: intl.string(t.jHlJNS),
|
|
onBannerChange: (a0, a1) => setPendingChanges({
|
|
guildId,
|
|
banner: a0,
|
|
bannerOriginalMd5: a1
|
|
})
|
|
});
|
|
} else {
|
|
PremiumUpsellUtils.handleShowUpsellAlert({
|
|
initialUpsellKey: UpsellTypes.PREMIUM_GUILD_PROFILE,
|
|
analyticsLocation: {
|
|
section: AnalyticsSections.PREMIUM_GUILD_MEMBER_PROFILE,
|
|
object: AnalyticsObjects.EDIT_GUILD_PROFILE_BANNER
|
|
},
|
|
analyticsLocations,
|
|
analyticsProperties: {
|
|
type: PremiumUpsellTypes.PREMIUM_GUILD_IDENTITY_MODAL
|
|
}
|
|
});
|
|
}
|
|
}} editButtonAccessibilityLabel={intl.string(t["95hPAe"])} editDisabled={disabled} />
|
|
</AnalyticsLocationProvider>;
|
|
};
|
|
_excluded = ["nick", "bio", "guild_tag"];
|
|
c9561_20 = {
|
|
page: AnalyticsPages.USER_SETTINGS,
|
|
section: AnalyticsSections.SETTINGS_CUSTOMIZE_PROFILE
|
|
};
|
|
export default function GuildProfileEditForm(props) {
|
|
let analyticsLocations2;
|
|
const currentUser = props.currentUser;
|
|
analyticsLocations2 = void 0;
|
|
const styles2 = UserProfileSharedStyles();
|
|
const styles = UserProfileEditFormSharedStyles();
|
|
const keyboardIsOpen = useKeyboardIsOpen();
|
|
const ref = useRef(null);
|
|
const ref4 = useRef(null);
|
|
const ref3 = useRef(null);
|
|
const ref2 = useRef(null);
|
|
const insets = useSafeAreaInsetsKeyboardAware_native({
|
|
includeKeyboardHeight: true
|
|
}).insets;
|
|
const PX_16 = Module712.space.PX_16;
|
|
const onFocus = useSafeAreaAvoidingInputs_native({
|
|
insets,
|
|
inputs: [{
|
|
ref: ref4,
|
|
offset: {
|
|
type: "toRef",
|
|
ref: ref3,
|
|
extraOffset: PX_16
|
|
}
|
|
}, {
|
|
ref: ref3,
|
|
offset: {
|
|
type: "toRef",
|
|
ref: ref2,
|
|
extraOffset: PX_16
|
|
}
|
|
}, {
|
|
ref: ref2,
|
|
offset: {
|
|
type: "toValue",
|
|
value: Module712.space.PX_64
|
|
}
|
|
}],
|
|
scrollViewRef: ref
|
|
}).onFocus;
|
|
const guildProfileEditForm = useGuildProfileEditForm();
|
|
const { guild, errors, isDisabled } = guildProfileEditForm;
|
|
let pendingNickname = guildProfileEditForm.pendingNickname;
|
|
const { pendingAvatar, pendingBanner: pendingBanner2, pendingThemeColors } = guildProfileEditForm;
|
|
let pendingPronouns = guildProfileEditForm.pendingPronouns;
|
|
let pendingBio = guildProfileEditForm.pendingBio;
|
|
const { pendingAvatarDecoration, pendingProfileEffect, pendingProfileFrame, pendingNameplate, pendingDisplayNameStyles } = guildProfileEditForm;
|
|
const stateFromStores2 = useStateFromStores([GuildMemberStore], () => guild != null ? GuildMemberStore.getMember(guild.id, currentUser.id) : null);
|
|
const stateFromStores = useStateFromStores([UserProfileStore], () => guild != null ? UserProfileStore.getGuildMemberProfile(currentUser.id, guild?.id) : null);
|
|
const displayProfile = useDisplayProfile(currentUser.id, guild?.id);
|
|
const customStatusActivity = useCustomStatusActivity();
|
|
const badges = useBadges(displayProfile);
|
|
const pendingAvatarSrc = getPendingAvatarSrc({
|
|
userId: currentUser.id,
|
|
image: pendingAvatar
|
|
});
|
|
const canEditNickname = useGuildActionSheetPermissions(guild).canEditNickname;
|
|
const canUsePremiumGuildMemberProfile2 = PremiumUtils.canUsePremiumGuildMemberProfile(currentUser);
|
|
const canResetThemeColors = _GuildIdentitySettingsUtils.canResetThemeColors(pendingThemeColors, stateFromStores?.themeColors);
|
|
let r11 = canUsePremiumGuildMemberProfile2 ? !canUsePremiumGuildMemberProfile2 : !keyboardIsOpen;
|
|
let r56 = stateFromStores2?.nick;
|
|
if (r56 == null) {
|
|
r56 = "";
|
|
}
|
|
let r141 = stateFromStores?.pronouns;
|
|
if (r141 == null) {
|
|
r141 = "";
|
|
}
|
|
let placeholder2 = displayProfile == null ? void 0 : displayProfile._userProfile.pronouns;
|
|
if (placeholder2 == null) {
|
|
placeholder2 = "";
|
|
}
|
|
if (pendingPronouns == null) {
|
|
pendingPronouns = r141;
|
|
}
|
|
let r47 = stateFromStores?.bio;
|
|
if (r47 == null) {
|
|
r47 = "";
|
|
}
|
|
let placeholder = displayProfile == null ? void 0 : displayProfile._userProfile.bio;
|
|
if (placeholder == null) {
|
|
placeholder = "";
|
|
}
|
|
analyticsLocations2 = useAnalyticsLocations([AnalyticsLocation.USER_SETTINGS]).analyticsLocations;
|
|
const profileTheme = useProfileTheme({
|
|
user: currentUser,
|
|
displayProfile,
|
|
pendingThemeColors
|
|
});
|
|
const { theme, primaryColor, secondaryColor } = profileTheme;
|
|
const userProfileColors = useUserProfileColors({
|
|
theme,
|
|
primaryColor,
|
|
secondaryColor
|
|
});
|
|
const { gradientFallbackBackground, gradientSecondaryBackground, containerBackground, avatarBackground } = userProfileColors;
|
|
const paddingBottom = insets.bottom + (r11 ? FLOATING_UPSELL_HEIGHT : 0) + Module712.space.PX_16;
|
|
const statusStyle = {
|
|
backgroundColor: avatarBackground
|
|
};
|
|
const { nick, bio, guild_tag, ...rest } = errors;
|
|
const errorMessage3 = nick == null ? void 0 : nick[0];
|
|
const pronouns = errors.pronouns;
|
|
const errorMessage2 = pronouns == null ? void 0 : pronouns[0];
|
|
const errorMessage = bio == null ? void 0 : bio[0];
|
|
let r61 = guild_tag == null ? void 0 : guild_tag[0];
|
|
if (guild == null) {
|
|
return null;
|
|
}
|
|
const r197 = [<View style={styles.bounceOffset} />, ,];
|
|
const r202 = [<EditGuildProfileBanner user={currentUser} displayProfile={displayProfile} guildId={guild.id} guildMember={stateFromStores2} guildMemberProfile={stateFromStores} pendingAvatarSrc={pendingAvatarSrc} pendingBanner={pendingBanner2} pendingThemeColors={pendingThemeColors} disabled={isDisabled} />, ,];
|
|
const r218 = [guild == null ? null : <View style={[styles2.avatarBackground, styles2.avatarPosition, styles.avatarContainer, statusStyle]}>
|
|
<EditGuildIdentityAvatar userId={currentUser.id} disabled={isDisabled ? isDisabled : !canUsePremiumGuildMemberProfile2} disableStatus={false} guildId={guild?.id} statusStyle={statusStyle} />
|
|
</View>, ,];
|
|
const r233 = [<UserProfileCustomStatusBubble customStatusActivity={customStatusActivity} hasCustomProfileTheme={primaryColor != null} style={styles2.customStatusBubble} emojiOnlyStyle={styles2.emojiOnlyCustomStatusBubble} editEnabled />, <UserProfilePrimaryInfo user={currentUser} displayName={pendingNickname == null ? r56 : pendingNickname} pronouns={pendingPronouns !== "" ? pendingPronouns : placeholder2} badges={badges} badgeContainerBackground={containerBackground} displayNameAccessibilityRole="header" guildId={guild.id} pendingDisplayNameStyles={pendingDisplayNameStyles} />, ,];
|
|
const r242 = guild == null;
|
|
let r243 = null;
|
|
if (!r242) {
|
|
const r248 = errorMessage != null;
|
|
let r249 = null;
|
|
if (!r248) {
|
|
const r250 = errorMessage3 != null;
|
|
r249 = null;
|
|
if (!r250) {
|
|
if (r61 == null) {
|
|
r61 = Object.keys(rest).length > 0 ? intl.string(t.s35OuK) : null;
|
|
}
|
|
r249 = r61 == null ? null : r61 !== "" ? <View style={styles.errorContainer}>
|
|
<Text variant="text-sm/bold" color="text-feedback-critical">{r61}</Text>
|
|
</View> : null;
|
|
}
|
|
}
|
|
const r275 = [r249, , , , , , , , , ,];
|
|
const props2 = {
|
|
inputRef: ref4,
|
|
label: intl.string(t.me1lRk),
|
|
errorMessage: errorMessage3,
|
|
value: null,
|
|
onFocus: null,
|
|
onChange: null,
|
|
placeholder: null,
|
|
maxLength: null,
|
|
isDisabled: null
|
|
};
|
|
if (pendingNickname == null) {
|
|
pendingNickname = r56;
|
|
}
|
|
props2.value = pendingNickname;
|
|
props2.onFocus = onFocus;
|
|
props2.onChange = (a0) => setPendingChanges({
|
|
guildId: guild.id,
|
|
nickname: a0
|
|
});
|
|
props2.placeholder = UserUtils.getName(currentUser);
|
|
props2.maxLength = DISPLAY_NAME_MAX_LENGTH;
|
|
props2.isDisabled = canEditNickname ? isDisabled : !canEditNickname;
|
|
r275[1] = <UserProfileEditFormTextField {...props2} />;
|
|
r275[2] = canUsePremiumGuildMemberProfile2 && <UserProfileDisplayNameStylesEditButton user={currentUser} guildId={guild.id} />;
|
|
r275[3] = <UserProfileEditFormTextField inputRef={ref3} label={intl.string(t["+T3RI/"])} errorMessage={errorMessage2} description={intl.string(t.NZqtIp)} value={pendingPronouns} onFocus={onFocus} onChange={(event) => setPendingChanges({
|
|
guildId: guild.id,
|
|
pronouns: event
|
|
})} placeholder={placeholder2} maxLength={PRONOUNS_MAX_LENGTH} isDisabled={isDisabled} />;
|
|
let r325 = null;
|
|
if (canUsePremiumGuildMemberProfile2) {
|
|
const props3 = {
|
|
inputRef: ref2,
|
|
label: intl.string(t.ZzAR2Y),
|
|
errorMessage,
|
|
description: intl.string(t.S5O8U2),
|
|
value: null,
|
|
onFocus: null,
|
|
onChange: null,
|
|
placeholder: null,
|
|
maxLength: null,
|
|
numberOfLines: 5,
|
|
isDisabled: null
|
|
};
|
|
if (pendingBio == null) {
|
|
pendingBio = r47;
|
|
}
|
|
props3.value = pendingBio;
|
|
props3.onFocus = onFocus;
|
|
props3.onChange = (a0) => setPendingChanges({
|
|
guildId: guild.id,
|
|
bio: a0
|
|
});
|
|
props3.placeholder = placeholder;
|
|
props3.maxLength = BIO_MAX_LENGTH;
|
|
props3.isDisabled = isDisabled;
|
|
r325 = <UserProfileEditFormTextField {...props3} />;
|
|
}
|
|
r275[4] = r325;
|
|
r275[5] = <UserProfileEditTheme pendingAvatarSrc={pendingAvatarSrc} pendingThemeColors={pendingThemeColors} user={currentUser} guildId={guild.id} onProfileThemeColorsChanged={(event) => setPendingChanges({
|
|
guildId: guild.id,
|
|
themeColors: event
|
|
})} showResetMenu={canResetThemeColors} />;
|
|
r275[6] = <UserProfileAvatarDecorationEditButton user={currentUser} guildId={guild.id} pendingAvatarDecoration={pendingAvatarDecoration} />;
|
|
r275[7] = <UserProfileEffectEditButton user={currentUser} guildId={guild.id} pendingProfileEffect={pendingProfileEffect} displayProfile={displayProfile} />;
|
|
r275[8] = <UserProfileFrameEditButton user={currentUser} guildId={guild.id} pendingProfileFrame={pendingProfileFrame} displayProfile={displayProfile} />;
|
|
r275[9] = <UserProfileNameplateEditButton user={currentUser} pendingNameplate={pendingNameplate} guildId={guild.id} />;
|
|
r243 = <View style={[styles.formContainer, {
|
|
backgroundColor: containerBackground,
|
|
paddingBottom: 20
|
|
}]}>{r275}</View>;
|
|
}
|
|
r233[2] = r243;
|
|
r218[1] = <UserProfileGradientContainer fallbackBackground={gradientFallbackBackground} primaryColor={primaryColor} secondaryColor={secondaryColor} containerStyle={[styles2.profileContentWrapper, styles2.profileContent, {
|
|
paddingTop: 0,
|
|
paddingBottom
|
|
}]}>{r233}</UserProfileGradientContainer>;
|
|
r202[1] = <View>{r218}</View>;
|
|
r197[1] = <View style={{
|
|
backgroundColor: gradientSecondaryBackground
|
|
}}>{r202}</View>;
|
|
const r380 = [<ScrollView ref={ref}>{r197}</ScrollView>, ,];
|
|
if (r11) {
|
|
r11 = <UserProfileUpsellCard style={[styles.floatingUpsell, {
|
|
bottom: Module712.space.PX_16 + insets.bottom
|
|
}]} ctaText={intl.string(t.pj0XBN)} onPress={function onPress() {
|
|
openPremiumModal({
|
|
analyticsLocation: {
|
|
...c9561_20,
|
|
object: AnalyticsObjects.BUTTON_CTA
|
|
},
|
|
analyticsLocations: analyticsLocations2,
|
|
premiumFeatureCardOrder: PremiumFeatureCardOrder.TIER_2_LEADING
|
|
});
|
|
}}>
|
|
<Text variant="text-sm/normal">
|
|
{intl.string(t.YIZS5B)}
|
|
</Text>
|
|
</UserProfileUpsellCard>;
|
|
}
|
|
r380[1] = r11;
|
|
return <ThemeContextProvider theme={theme} primaryColor={primaryColor} secondaryColor={secondaryColor}>
|
|
<View style={[styles.container, {
|
|
backgroundColor: gradientSecondaryBackground
|
|
}]}>{r380}</View>
|
|
</ThemeContextProvider>;
|
|
};
|