yeet

modules/user_profile/native/EditNameplateActionSheet.tsx

@@ -0,0 +1,156 @@
+// Metro module 13731 (f13732).
+import { useCallback, useMemo, useState } from "react";
+import { View } from "react-native";
+import CollectiblesPurchaseStore from "../../collectibles/CollectiblesPurchaseStore";
+import { isNameplateRecord } from "../../collectibles/records/NameplateRecord";
+import GuildMemberStore from "../../../stores/GuildMemberStore";
+import { AnalyticEvents } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useBottomSheetRef } from "../../../design/components/Sheet/native/useBottomSheetRef";
+import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { setPendingChanges } from "../UserProfileSettingsActionCreators";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import EditCollectiblesCTAButton from "./EditCollectiblesCTAButton";
+import { useGetOrFetchCollectiblesCategoriesAndPurchases } from "../../collectibles/hooks/useFetchCollectiblesCategoriesAndPurchases";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useNameplateSections from "../../collectibles/nameplates/useNameplateSections";
+import { getProfilePreviewValue } from "../../profile_customization/ProfileCustomizationUtils";
+import { EditNameplateRow } from "../../collectibles/nameplates/native/EditNameplateSection";
+import EditCollectiblesPreviewDetails from "./EditCollectiblesPreviewDetails";
+import { EditCollectiblesPickerList } from "../../collectibles/native/EditCollectiblesPickerList";
+import useCollectiblesData from "../../collectibles/hooks/useCollectiblesData";
+import { NameplateDummyUserPreview } from "../../collectibles/nameplates/native/NameplateDummyUserPreview";
+import Module4611 from "../../../_bundle/Module4611";
+import { NameplatePreview } from "../../collectibles/nameplates/native/NameplatePreview";
+let useStyles, NameplateActionSheetPreview;
+const EditNameplateInner = function EditNameplateInner(props) {
+  const { user, selectedNameplate, setSelectedNameplate, guildId } = props;
+  useGetOrFetchCollectiblesCategoriesAndPurchases();
+  const stateFromStores2 = useStateFromStores([CollectiblesPurchaseStore], () => CollectiblesPurchaseStore.isFetching);
+  const nameplateSections = useNameplateSections();
+  const stateFromStores = useStateFromStores([GuildMemberStore], () => guildId != null ? GuildMemberStore.getMember(guildId, user.id) : null);
+  const profilePreviewValue = getProfilePreviewValue({
+    pendingValue: selectedNameplate,
+    userValue: user == null ? void 0 : user.collectibles?.nameplate,
+    guildValue: stateFromStores == null ? void 0 : stateFromStores.collectibles?.nameplate,
+    guildId
+  });
+  const callback = useCallback((a0) => <EditNameplateRow items={a0.items} size={a0.size} selectedSkuId={a0.selectedSkuId} setSelectedNameplate={setSelectedNameplate} guildId={guildId} />, [setSelectedNameplate, guildId]);
+  return <>
+    {[<NameplateActionSheetPreview previewSkuId={profilePreviewValue?.skuId} user={user} guildId={guildId} />, <EditCollectiblesPreviewDetails user={user} previewSkuId={profilePreviewValue?.skuId} nitroJoinCTA={intl.string(t["V+IE93"])} nitroUpgradeCTA={intl.string(t.a6SrkR)} />, <EditCollectiblesPickerList sections={nameplateSections} selectedSkuId={selectedNameplate?.skuId} renderRow={callback} isFetching={stateFromStores2} />]}
+  </>;
+};
+NameplateActionSheetPreview = function NameplateActionSheetPreview(props) {
+  const { previewSkuId, user: user2, guildId: guildId3 } = props;
+  const styles = useStyles();
+  const collectiblesData = useCollectiblesData(previewSkuId);
+  const { product, purchase } = collectiblesData;
+  const memo = useMemo(() => {
+    let r3 = product == null ? void 0 : product.items[0];
+    if (r3 == null) {
+      r3 = purchase == null ? void 0 : purchase.items[0];
+    }
+    return isNameplateRecord(r3) ? r3 : null;
+  }, [purchase, product]);
+  return <View style={styles.nameplatePreviewContainer} accessibilityLabel={memo != null ? intl.formatToPlainString(t.YJig7C, {
+    a11y_text: memo.label
+  }) : intl.string(t.aqlsGS)} accessibilityRole="image" accessible>
+    <View style={styles.nameplateGradientContainer}>
+      <NameplateDummyUserPreview width={100} />
+      <NameplateDummyUserPreview width={140} />
+      <Module4611 style={styles.nameplatePreviewGradient} start={{
+        x: 0,
+        y: 0.1
+      }} end={{
+        x: 0,
+        y: 0.8
+      }} colors={[styles.nameplatePreviewGradient.color, `${styles.nameplatePreviewGradient.color}00`]} />
+    </View>
+    <NameplatePreview nameplate={memo} user={user2} guildId={guildId3} animate aria-hidden />
+    <View style={styles.nameplateGradientContainer}>
+      <NameplateDummyUserPreview width={140} />
+      <NameplateDummyUserPreview width={100} />
+      <Module4611 style={styles.nameplatePreviewGradient} start={{
+        x: 0,
+        y: 0.2
+      }} end={{
+        x: 0,
+        y: 0.9
+      }} colors={[`${styles.nameplatePreviewGradient.color}00`, styles.nameplatePreviewGradient.color]} />
+    </View>
+  </View>;
+};
+useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
+  },
+  bounceOffset: {
+    position: "absolute",
+    top: -250,
+    height: 250,
+    right: 0,
+    left: 0
+  },
+  title: {
+    alignSelf: "center",
+    color: Module712.colors.MOBILE_TEXT_HEADING_PRIMARY,
+    margin: 25
+  },
+  nameplatePreviewContainer: {
+    width: "80%",
+    alignSelf: "center",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  nameplateGradientContainer: {
+    width: "100%"
+  },
+  nameplatePreviewGradient: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    color: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
+  }
+});
+export default function EditNameplateActionSheet(props) {
+  const { user: user2, currentNameplate, guildId: guildId2 } = props;
+  const styles = useStyles();
+  const bottomSheetRef = useBottomSheetRef().bottomSheetRef;
+  const [state, setSelectedNameplate2] = useState(void 0);
+  const selectedNameplate = state !== void 0 ? state : currentNameplate;
+  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.EDIT_NAMEPLATE_SHEET).analyticsLocations;
+  const callback = useCallback(() => {
+    AnalyticsUtils.track(AnalyticEvents.OPEN_POPOUT, {
+      type: AnalyticsLocation.EDIT_NAMEPLATE_SHEET,
+      is_fullscreen: true
+    });
+  }, []);
+  const callback2 = useCallback(() => {
+    let nameplate = state;
+    if (state == null) {
+      nameplate = null;
+    }
+    setPendingChanges({
+      guildId: guildId2,
+      nameplate
+    });
+  }, [state, guildId2]);
+  return <AnalyticsLocationProvider value={analyticsLocations}>
+    <BottomSheet scrollable ref={bottomSheetRef} onExpand={callback} startExpanded>
+      <View style={styles.container}>
+        <View style={styles.bounceOffset} />
+        <Text variant="redesign/heading-18/bold" style={styles.title} accessibilityRole="header">
+          {intl.string(t.BwdeM1)}
+        </Text>
+        <EditNameplateInner user={user2} selectedNameplate={selectedNameplate} setSelectedNameplate={setSelectedNameplate2} guildId={guildId2} />
+      </View>
+      <EditCollectiblesCTAButton user={user2} currentSkuId={currentNameplate?.skuId} selectedSkuId={selectedNameplate?.skuId} onApply={callback2} analyticsLocations={analyticsLocations} analyticsSource={AnalyticsLocation.EDIT_NAMEPLATE_SHEET} />
+    </BottomSheet>
+  </AnalyticsLocationProvider>;
+};