373 lines
15 KiB
TypeScript
373 lines
15 KiB
TypeScript
// Metro module 5179 (f5180).
|
|
import { useMemo, useState, useCallback } from "react";
|
|
import { FlatList, Image as Image2, ScrollView, View } from "react-native";
|
|
import EmojiStore from "../../emojis/EmojiStore";
|
|
import MemberVerificationFormStore from "../../guild_member_verification/MemberVerificationFormStore";
|
|
import GuildStore from "../../../stores/GuildStore";
|
|
import GuildOnboardingPromptsStore from "../GuildOnboardingPromptsStore";
|
|
import { GuildOnboardingModalStates } from "./GuildOnboardingConstants";
|
|
import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import { NAV_BAR_HEIGHT } from "../../../design/components/Navigator/native/NavigatorConstants.native";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
|
|
import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/Module589";
|
|
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
|
|
import { useToken } from "../../../design/tokens/native/useToken";
|
|
import Module689 from "../../../_bundle/Module689";
|
|
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
|
|
import TermsFieldList from "../../guild_member_verification/native/components/form_fields/TermsFieldList";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
import MemberVerificationActionCreators from "../../guild_member_verification/MemberVerificationActionCreators";
|
|
import Module4611 from "../../../_bundle/Module4611";
|
|
import { VerticalGradient } from "../../../ConstantsIOS";
|
|
import { getSelectedRoleIds, getSelectedChannelIds } from "../GuildOnboardingUtils";
|
|
import usePromptHelpText from "../usePromptHelpText";
|
|
import GuildOnboardingPromptOptionButton from "./GuildOnboardingPromptOptionButton";
|
|
import Emoji from "../../emojis/native/Emoji";
|
|
import AvatarUtils from "../../../utils/AvatarUtils";
|
|
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
|
|
import { PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
|
|
import Module5505 from "../../../_bundle/Module5505";
|
|
let useStyles, PromptFooter, formattedNameHighlight, DropdownOption;
|
|
const PromptHeader = function PromptHeader(props) {
|
|
const { currentPrompt: currentPrompt3, numberOfPrompts, currentPromptIndex } = props;
|
|
const styles = useStyles();
|
|
return <>
|
|
<View style={styles.promptHeader}>
|
|
<Text style={styles.countText} variant="text-sm/medium" color="text-muted">
|
|
{intl.format(t.isV0NW, {
|
|
currentQuestion: currentPromptIndex + 1,
|
|
questionCount: numberOfPrompts
|
|
})}
|
|
</Text>
|
|
{currentPrompt3?.required ? <>
|
|
<View style={styles.requiredSeparator} />
|
|
<Text variant="text-sm/medium" color="text-brand">
|
|
{intl.string(t.Ur8Vrt)}
|
|
</Text>
|
|
</> : null}
|
|
</View>
|
|
<Text style={styles.title} accessibilityRole="header" variant="heading-xl/semibold" color="mobile-text-heading-primary">{currentPrompt3.title}</Text>
|
|
</>;
|
|
};
|
|
PromptFooter = function PromptFooter(props) {
|
|
let c14713_2;
|
|
const { guildId, currentPrompt: currentPrompt3, selectedOptionIds, handleOnPress, lastPrompt } = props;
|
|
c14713_2 = void 0;
|
|
const styles = useStyles();
|
|
const stateFromStores4 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
|
|
const r2 = selectedOptionIds.length === 0 && !currentPrompt3?.required;
|
|
const text = lastPrompt ? `${intl.string(t["8SuVoE"])} 🎉` : r2 ? intl.string(t["5Wxrcd"]) : intl.string(t.PDTjLN);
|
|
const disabled = selectedOptionIds.length === 0 && currentPrompt3?.required;
|
|
const r55 = currentPrompt3 == null;
|
|
let r19 = void 0;
|
|
if (!r55) {
|
|
const options = currentPrompt3.options;
|
|
r19 = options == null ? void 0 : options.filter((option) => selectedOptionIds.includes(option.id));
|
|
}
|
|
c14713_2 = r19;
|
|
const promptHelpText = usePromptHelpText({
|
|
guild: stateFromStores4,
|
|
prompt: currentPrompt3,
|
|
selectedRoleIds: useMemo(() => c14713_2 != null ? getSelectedRoleIds(c14713_2) : new Set(), [r19]),
|
|
selectedChannelIds: useMemo(() => c14713_2 != null ? getSelectedChannelIds(c14713_2) : new Set(), [r19]),
|
|
itemHook: formattedNameHighlight
|
|
});
|
|
const { helpText, helpTextAdditional } = promptHelpText;
|
|
const token = useToken(Module712.colors.BACKGROUND_BASE_LOWER);
|
|
return <View style={styles.footer}>
|
|
<Module4611 style={[styles.scrollContainerGradient]} start={VerticalGradient.START} end={VerticalGradient.END} colors={[Module689(token).alpha(0).hex(), Module689(token).alpha(1).hex()]} pointerEvents="none" />
|
|
<View style={styles.footerContent}>
|
|
{disabled ? <Text style={styles.helpText} variant="text-xs/medium" color="text-default">
|
|
{intl.string(t.dA1dSf)}
|
|
</Text> : null}
|
|
{helpText === "" ? helpTextAdditional !== "" ? <Text style={styles.helpText} variant="text-xs/medium" color="text-default">
|
|
{helpText}
|
|
{" "}
|
|
{helpTextAdditional}
|
|
</Text> : null : <Text style={styles.helpText} variant="text-xs/medium" color="text-default">
|
|
{helpText}
|
|
{" "}
|
|
{helpTextAdditional}
|
|
</Text>}
|
|
<Button variant={r2 ? lastPrompt ? "primary" : "secondary" : "primary"} size="md" grow text={text} onPress={handleOnPress} disabled={disabled} />
|
|
</View>
|
|
</View>;
|
|
};
|
|
formattedNameHighlight = function formattedNameHighlight(a0, a1) {
|
|
return <Text key={a1} variant="text-xs/medium" color="mobile-text-heading-primary">
|
|
{a0}
|
|
</Text>;
|
|
};
|
|
DropdownOption = function DropdownOption(props) {
|
|
const option = props.option;
|
|
const styles = useStyles();
|
|
const stateFromStores4 = useStateFromStores([EmojiStore], () => option.emoji?.id != null ? EmojiStore.getUsableCustomEmojiById(option.emoji?.id) : null);
|
|
const src = stateFromStores4 != null ? AvatarUtils.getEmojiURL({
|
|
id: stateFromStores4.id,
|
|
animated: stateFromStores4.animated,
|
|
size: EMOJI_URL_BASE_SIZE
|
|
}) : void 0;
|
|
let name = option.emoji?.name;
|
|
if (name == null) {
|
|
name = "";
|
|
}
|
|
return <View style={styles.dropdownPill}>
|
|
<View style={styles.emojiContainer}>
|
|
<Emoji textEmojiStyle={styles.optionTextEmoji} fastImageStyle={styles.optionImageEmoji} src={src} name={name} />
|
|
</View>
|
|
<Text variant="text-md/semibold">{option.title}</Text>
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
flex: {
|
|
flex: 1
|
|
},
|
|
container: {
|
|
display: "flex",
|
|
flex: 1,
|
|
flexGrow: 1,
|
|
marginTop: NAV_BAR_HEIGHT,
|
|
marginBottom: 16,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
|
|
},
|
|
scrollContainer: {
|
|
display: "flex",
|
|
flexGrow: 1,
|
|
justifyContent: "center",
|
|
paddingHorizontal: 16,
|
|
paddingTop: 0,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
|
|
},
|
|
scrollContainerGradient: {
|
|
position: "absolute",
|
|
height: 48,
|
|
width: "100%",
|
|
left: 0,
|
|
top: -48
|
|
},
|
|
promptHeader: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 8
|
|
},
|
|
requiredSeparator: {
|
|
flexShrink: 0,
|
|
marginHorizontal: 8,
|
|
color: Module712.colors.BORDER_SUBTLE,
|
|
backgroundColor: Module712.colors.BORDER_SUBTLE,
|
|
width: 4,
|
|
height: 4,
|
|
borderRadius: Module712.radii.xs
|
|
},
|
|
countText: {},
|
|
title: {
|
|
marginBottom: 32
|
|
},
|
|
helpText: {
|
|
marginTop: 8,
|
|
marginBottom: 8,
|
|
textAlign: "center"
|
|
},
|
|
footer: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "flex-end",
|
|
alignItems: "center",
|
|
bottom: 0,
|
|
paddingBottom: 8,
|
|
position: "absolute",
|
|
width: "100%",
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
|
|
},
|
|
footerText: {
|
|
paddingHorizontal: 16,
|
|
paddingBottom: 8,
|
|
paddingTop: 8
|
|
},
|
|
footerContent: {
|
|
width: "100%",
|
|
paddingHorizontal: 16
|
|
},
|
|
optionTextEmoji: {
|
|
fontSize: 18,
|
|
lineHeight: 22,
|
|
marginRight: 6
|
|
},
|
|
optionImageEmoji: {
|
|
height: 22,
|
|
width: 22,
|
|
marginRight: 6
|
|
},
|
|
emojiContainer: {
|
|
display: "flex",
|
|
alignItems: "center"
|
|
},
|
|
dropdownContainer: {
|
|
borderRadius: Module712.radii.sm,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
|
|
padding: 8,
|
|
paddingRight: 32,
|
|
minHeight: 48,
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
alignItems: "center",
|
|
position: "relative"
|
|
},
|
|
emptyDropdownText: {
|
|
marginTop: 16
|
|
},
|
|
dropdownPill: {
|
|
borderRadius: Module712.radii.sm,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
padding: 6,
|
|
marginRight: 8,
|
|
marginTop: 8,
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
dropdownIconContainer: {
|
|
position: "absolute",
|
|
right: 4,
|
|
top: 8
|
|
},
|
|
dropdownIcon: {
|
|
height: 32,
|
|
width: 32
|
|
}
|
|
});
|
|
export function RulesPrompt(props) {
|
|
let stateFromStores2, stateFromStores3, setState;
|
|
const guildId2 = props.guildId;
|
|
stateFromStores2 = void 0;
|
|
stateFromStores3 = void 0;
|
|
setState = void 0;
|
|
const styles = useStyles();
|
|
const navigation = useNavigation();
|
|
const stateFromStores = useStateFromStores([MemberVerificationFormStore], () => MemberVerificationFormStore.getRulesPrompt(guildId2));
|
|
stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId2)?.rulesChannelId);
|
|
const bottom = useSafeAreaInsets_native().bottom;
|
|
const r44 = 64 + bottom;
|
|
stateFromStores3 = useStateFromStores([MemberVerificationFormStore], () => MemberVerificationFormStore.get(guildId2));
|
|
let state;
|
|
[state, setState] = useState(false);
|
|
const token = useToken(Module712.colors.BACKGROUND_BASE_LOWER);
|
|
const colors = [Module689(token).alpha(0).hex(), Module689(token).alpha(1).hex()];
|
|
let r82 = null;
|
|
if (stateFromStores != null) {
|
|
const paddingBottom = r44 + 8;
|
|
r82 = <SafeAreaPaddingView top style={[styles.flex, styles.container]}>
|
|
<View style={styles.flex}>
|
|
<FlatList contentContainerStyle={[styles.scrollContainer, {
|
|
paddingBottom
|
|
}]} data={[0]} renderItem={() => <TermsFieldList rules={stateFromStores.values} rulesChannelId={stateFromStores2} />} onEndReached={() => setState(true)} />
|
|
<View style={[styles.footer, styles.footerContent, {
|
|
paddingBottom: bottom
|
|
}]}>
|
|
<Text style={styles.footerText} variant="text-xs/medium">
|
|
{state ? intl.string(t.arAe3I) : intl.string(t.D0CVAc)}
|
|
</Text>
|
|
<Button variant="primary" size="md" grow disabled={!state} text={intl.string(t["0KL0ot"])} onPress={function onPress() {
|
|
if (stateFromStores != null && stateFromStores3 != null) {
|
|
MemberVerificationActionCreators.submitVerificationForm(guildId2, {
|
|
...stateFromStores3,
|
|
formFields: [{
|
|
...stateFromStores,
|
|
response: true
|
|
}]
|
|
});
|
|
navigation.push(GuildOnboardingModalStates.COMPLETED);
|
|
}
|
|
}} />
|
|
</View>
|
|
</View>
|
|
<Module4611 style={[styles.scrollContainerGradient, {
|
|
bottom: paddingBottom
|
|
}]} start={VerticalGradient.START} end={VerticalGradient.END} colors={colors} pointerEvents="none" />
|
|
</SafeAreaPaddingView>;
|
|
}
|
|
return r82;
|
|
}
|
|
export function MultipleChoicePrompt(props) {
|
|
const { guildId: guildId3, currentPrompt, lastPrompt, currentPromptIndex, numberOfPrompts, selectOption, handleOnPress } = props;
|
|
const styles = useStyles();
|
|
const bottom = useSafeAreaInsets_native().bottom;
|
|
const stateFromStoresArray = useStateFromStoresArray([GuildOnboardingPromptsStore], () => currentPrompt != null ? GuildOnboardingPromptsStore.getOnboardingResponsesForPrompt(guildId3, currentPrompt.id) : [], [guildId3, currentPrompt]);
|
|
return <>
|
|
<ScrollView contentContainerStyle={[styles.scrollContainer, {
|
|
paddingBottom: 64 + bottom + 48 + 48,
|
|
position: "relative"
|
|
}]}>
|
|
<PromptHeader currentPrompt={currentPrompt} numberOfPrompts={numberOfPrompts} currentPromptIndex={currentPromptIndex} />
|
|
<View>
|
|
{currentPrompt.options.map((a0) => {
|
|
let selected = stateFromStoresArray.includes(a0.id);
|
|
if (selected == null) {
|
|
selected = false;
|
|
}
|
|
return <GuildOnboardingPromptOptionButton key={a0.id} option={a0} guildId={guildId3} onSelect={(event) => {
|
|
let r4 = event;
|
|
const id = currentPrompt.id;
|
|
const id2 = a0.id;
|
|
if (event == null) {
|
|
r4 = false;
|
|
}
|
|
return selectOption(id, id2, r4);
|
|
}} selected={selected} />;
|
|
})}
|
|
</View>
|
|
</ScrollView>
|
|
<PromptFooter guildId={guildId3} currentPrompt={currentPrompt} selectedOptionIds={stateFromStoresArray} handleOnPress={handleOnPress} lastPrompt={lastPrompt} />
|
|
</>;
|
|
}
|
|
export function DropdownPrompt(props) {
|
|
const { guildId: guildId4, currentPrompt: currentPrompt2, lastPrompt, currentPromptIndex, numberOfPrompts, selectOption: selectOption2, handleOnPress } = props;
|
|
const styles = useStyles();
|
|
const bottom = useSafeAreaInsets_native().bottom;
|
|
const stateFromStoresArray2 = useStateFromStoresArray([GuildOnboardingPromptsStore], () => currentPrompt2 != null ? GuildOnboardingPromptsStore.getOnboardingResponsesForPrompt(guildId4, currentPrompt2.id) : [], [guildId4, currentPrompt2]);
|
|
const r3 = currentPrompt2 == null;
|
|
let r24 = void 0;
|
|
if (!r3) {
|
|
const options = currentPrompt2.options;
|
|
r24 = options == null ? void 0 : options.filter((option) => stateFromStoresArray2.includes(option.id));
|
|
}
|
|
return <>
|
|
<ScrollView contentContainerStyle={[styles.scrollContainer, {
|
|
paddingBottom: 64 + bottom + 48 + 48,
|
|
position: "relative"
|
|
}]}>
|
|
<PromptHeader currentPrompt={currentPrompt2} numberOfPrompts={numberOfPrompts} currentPromptIndex={currentPromptIndex} />
|
|
<View>
|
|
<PressableHighlight style={styles.dropdownContainer} onPress={useCallback(() => {
|
|
ActionSheetActionCreators.openLazy(import("./DropdownOptionsActionSheet"), "DropdownOptions", {
|
|
guildId: guildId4,
|
|
promptId: currentPrompt2.id,
|
|
onSelect: (a0, a1) => {
|
|
let r4 = a1;
|
|
const id = currentPrompt2.id;
|
|
const id2 = a0.id;
|
|
if (a1 == null) {
|
|
r4 = false;
|
|
}
|
|
return selectOption2(id, id2, r4);
|
|
}
|
|
});
|
|
}, [guildId4, currentPrompt2.id, selectOption2])}>
|
|
{r24.length === 0 && <Text style={styles.emptyDropdownText} variant="text-sm/normal" color="text-muted">No answers selected.</Text>}
|
|
{r24.map((item) => <DropdownOption key={item.id} option={item} />)}
|
|
<View style={styles.dropdownIconContainer}>
|
|
<Image2 style={styles.dropdownIcon} source={Module5505} />
|
|
</View>
|
|
</PressableHighlight>
|
|
</View>
|
|
</ScrollView>
|
|
<PromptFooter guildId={guildId4} currentPrompt={currentPrompt2} selectedOptionIds={stateFromStoresArray2} handleOnPress={handleOnPress} lastPrompt={lastPrompt} />
|
|
</>;
|
|
}
|