yeet

modules/app_launcher/native/onboarding/banner/ActivitiesBanner.tsx

@@ -0,0 +1,15 @@
+// Metro module 11223 (f11224).
+import { useActivityApplications } from "../hooks/useActivityApplications";
+import ApplicationsImage from "./ApplicationsImage";
+import BannerBase from "./BannerBase";
+import { intl, t } from "../../../../../intl/index.native";
+export default function ActivitiesBanner(props) {
+  const [firstApplication, secondApplication] = useActivityApplications({
+    guildId: props.context.channel.guild_id,
+    fetchesShelf: false
+  });
+  const image = <ApplicationsImage firstApplication={firstApplication} secondApplication={secondApplication} />;
+  return firstApplication == null ? null : secondApplication == null ? null : <BannerBase image={image} text={intl.formatToPlainString(t.zHMWuV, {
+    activityName: firstApplication.name
+  })} />;
+};

modules/app_launcher/native/onboarding/banner/AppLauncherGlobalSearchOnboardingBanner.tsx

@@ -0,0 +1,56 @@
+// Metro module 11289 (f11290).
+import { useEffect } from "react";
+import { View } from "react-native";
+import { DEFAULT_CONTENT_PADDING } from "../../AppLauncherNativeConstants";
+import { ContentDismissActionType } from "../../../../dismissible_content/DismissibleContentConstants";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import { AppsIcon } from "../../../../../design/components/Icon/native/redesign/generated/AppsIcon";
+import { Coachmark } from "../../../../../design/components/Coachmark/native/Coachmark.native";
+import { intl, t } from "../../../../../intl/index.native";
+const useStyles = createStyles({
+  appsIcon: {
+    height: 40,
+    width: 40,
+    backgroundColor: Module712.colors.BACKGROUND_BRAND,
+    borderRadius: Module712.radii.round,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  appsIconImage: {
+    height: 24,
+    width: 24,
+    tintColor: Module712.unsafe_rawColors.WHITE
+  }
+});
+export default function GlobalSearchCoachmark(props) {
+  const { markAsDismissed, visible, windowDimensions } = props;
+  const styles = useStyles();
+  const width = windowDimensions.width - 2 * DEFAULT_CONTENT_PADDING;
+  useEffect(() => () => {
+    if (visible) {
+      markAsDismissed({
+        actionType: ContentDismissActionType.USER_DISMISS
+      });
+    }
+  }, [markAsDismissed, visible]);
+  return visible ? <Coachmark renderImgComponent={function appsIcon() {
+    return <View style={styles.appsIcon}>
+      <AppsIcon style={styles.appsIconImage} color={Module712.colors.INTERACTIVE_TEXT_ACTIVE} />
+    </View>;
+  }} title={intl.string(t.bCPN5y)} description={intl.string(t["0TBExc"])} onDismiss={() => {
+    markAsDismissed({
+      actionType: ContentDismissActionType.TAKE_ACTION
+    });
+  }} targetMeasurements={{
+    x: 0,
+    y: -40,
+    width,
+    height: 40
+  }} surfaceMeasurements={{
+    x: -140,
+    y: -40,
+    width,
+    height: windowDimensions.height
+  }} position="bottom" /> : null;
+};

modules/app_launcher/native/onboarding/banner/AppLauncherOnboardingBanner.tsx

@@ -0,0 +1,18 @@
+// Metro module 11222 (f11223).
+import { DismissibleContent } from "../../../../../_bundle/Module1358";
+import ActivitiesBanner from "./ActivitiesBanner";
+import AppsBanner from "./AppsBanner";
+import BotsBanner from "./BotsBanner";
+export default function AppLauncherOnboardingBanner(props) {
+  const { context, visibleContent } = props;
+  if (DismissibleContent.APP_LAUNCHER_ONBOARDING_ACTIVITIES_BANNER === visibleContent) {
+    return <ActivitiesBanner context={context} />;
+  }
+  if (DismissibleContent.APP_LAUNCHER_ONBOARDING_APPS_BANNER === visibleContent) {
+    return <AppsBanner />;
+  }
+  if (DismissibleContent.APP_LAUNCHER_ONBOARDING_BOTS_BANNER === visibleContent) {
+    return <BotsBanner context={context} />;
+  }
+  return null;
+};

modules/app_launcher/native/onboarding/banner/AppLauncherOnboardingLayer.tsx

@@ -0,0 +1,27 @@
+// Metro module 11221 (f11222).
+import { memo } from "react";
+import { View } from "react-native";
+import { useBestActiveChatInputContainerHeight } from "../../../../chat_input/native/useChatBottomManagerUIStore";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import AppLauncherOnboardingBanner from "./AppLauncherOnboardingBanner";
+const useStyles = createStyles({
+  container: {
+    opacity: 1,
+    width: "100%",
+    position: "absolute",
+    left: 0,
+    top: 0,
+    backgroundColor: Module712.colors.BACKGROUND_SCRIM
+  }
+});
+const r36 = memo(function({ context, visibleContent, bottomOffset }) {
+  const styles = useStyles();
+  const bestActiveChatInputContainerHeight = useBestActiveChatInputContainerHeight();
+  return visibleContent != null ? <View style={[styles.container, {
+    bottom: bestActiveChatInputContainerHeight + bottomOffset
+  }]}>
+    <AppLauncherOnboardingBanner context={context} visibleContent={visibleContent} />
+  </View> : null;
+});
+export default r36;

modules/app_launcher/native/onboarding/banner/ApplicationsImage.tsx

@@ -0,0 +1,45 @@
+// Metro module 11224 (f11225).
+import { View } from "react-native";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import { getAppLauncherIconSource } from "../../AppLauncherNativeUtils";
+import FastImage from "../../../../../components_native/common/FastImage";
+const useStyles = createStyles({
+  appIconContainer: {
+    backgroundColor: Module712.colors.BACKGROUND_BRAND,
+    borderRadius: Module712.radii.sm + 3,
+    position: "absolute",
+    padding: 3
+  },
+  appIconLeftContainer: {
+    transform: [{
+      rotate: "-10deg"
+    }]
+  },
+  appIconRightContainer: {
+    left: Module712.space.PX_32,
+    transform: [{
+      rotate: "15deg"
+    }]
+  },
+  appIcon: {
+    borderRadius: Module712.radii.sm,
+    width: 36,
+    height: 36
+  }
+});
+export default function ApplicationsImage(props) {
+  const { firstApplication, secondApplication } = props;
+  const styles = useStyles();
+  const source = firstApplication != null ? getAppLauncherIconSource(firstApplication) : null;
+  const source2 = secondApplication != null ? getAppLauncherIconSource(secondApplication) : null;
+  return <>
+    <View style={[styles.appIconContainer, styles.appIconLeftContainer]}>
+      {source2 != null && <FastImage style={styles.appIcon} source={source2} />}
+    </View>
+    <View style={[styles.appIconContainer, styles.appIconRightContainer]}>
+      {source != null && <FastImage style={styles.appIcon} source={source} />}
+    </View>
+  </>;
+};
+export const APP_ICON_SIZE = 36;

modules/app_launcher/native/onboarding/banner/AppsBanner.tsx

@@ -0,0 +1,22 @@
+// Metro module 11237 (f11238).
+import { View } from "react-native";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import OnboardingAppsRocket from "../../images/OnboardingAppsRocket";
+import BannerBase from "./BannerBase";
+import { intl, t } from "../../../../../intl/index.native";
+const useStyles = createStyles({
+  rocketIconContainer: {
+    position: "absolute",
+    top: -20
+  },
+  rocketIcon: {
+    width: 90,
+    height: 90
+  }
+});
+export default function AppsBaner() {
+  const styles = useStyles();
+  return <BannerBase image={<View style={styles.rocketIconContainer}>
+    <OnboardingAppsRocket style={styles.rocketIcon} />
+  </View>} text={intl.string(t.sjRwMJ)} />;
+};

modules/app_launcher/native/onboarding/banner/BannerBase.tsx

@@ -0,0 +1,131 @@
+// Metro module 11235 (f11236).
+import { useState } from "react";
+import { View } from "react-native";
+import AccessibilityStore from "../../../../a11y/AccessibilityStore";
+import Module712 from "../../../../../_bundle/Module712";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import { APP_ICON_SIZE } from "./ApplicationsImage";
+import * as _ReanimatedRexport from "../../../../reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../../reanimated/ReanimatedRexport";
+import useWindowDimensions_native from "../../../../screen/useWindowDimensions.native";
+import { hexOpacityToRgba } from "../../../../../utils/ColorUtils";
+import { useStateFromStores } from "../../../../../_bundle/Module589";
+import * as _spring from "../../../../../design/animation/reanimated/spring/spring";
+import Module4611 from "../../../../../_bundle/Module4611";
+import LottieAnimationView from "../../../../../components_native/common/LottieAnimationView";
+import * as _Module11236 from "../../../../../_bundle/Module11236";
+import { Text } from "../../../../../design/components/Text/native/Text";
+const PX_12 = Module712.space.PX_12;
+const SPRING_CONFIG = {
+  mass: 1,
+  stiffness: 100,
+  damping: 15
+};
+const useStyles = createStyles({
+  banner: {
+    backgroundColor: Module712.colors.BACKGROUND_BRAND,
+    position: "absolute",
+    borderRadius: Module712.radii.lg,
+    paddingHorizontal: Module712.space.PX_16,
+    paddingVertical: PX_12,
+    flexDirection: "row",
+    minHeight: APP_ICON_SIZE + 2 * PX_12 + 4,
+    bottom: Module712.space.PX_16,
+    left: Module712.space.PX_16
+  },
+  bannerGradientColor: {
+    backgroundColor: "#7eaaff"
+  },
+  bannerBackgroundGradient: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    borderRadius: Module712.radii.lg
+  },
+  imageContainer: {
+    width: 72
+  },
+  trinketsLottie: {
+    width: 175,
+    height: 175,
+    position: "absolute",
+    top: -38,
+    left: -27,
+    zIndex: 1,
+    pointerEvents: "none"
+  },
+  bannerTextContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: Module712.space.PX_12,
+    flexShrink: 1
+  },
+  bannerText: {
+    width: "100%"
+  }
+});
+const __initData = {
+  code: "function BannerBaseTsx1(){const{bannerMeasured,withDelay,withSpring,SPRING_CONFIG}=this.__closure;return{opacity:bannerMeasured.get()?withDelay(150,withSpring(1,SPRING_CONFIG)):0,transform:[{translateY:bannerMeasured.get()?withDelay(150,withSpring(0,SPRING_CONFIG)):30}]};}"
+};
+export default function BannerBase(props) {
+  const { image, text } = props;
+  const styles = useStyles();
+  let opacity = 0;
+  const [height, setState] = useState(0);
+  const sharedValue = useSharedValue(false);
+  const width = useWindowDimensions_native().width - 2 * Module712.space.PX_16;
+  const backgroundColor = styles.bannerGradientColor.backgroundColor;
+  const colors = [hexOpacityToRgba(backgroundColor, 0.2), hexOpacityToRgba(backgroundColor, 0)];
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const _ = function _() {
+    return {
+      opacity: sharedValue.get() ? _ReanimatedRexport.withDelay(150, _spring.withSpring(1, SPRING_CONFIG)) : 0,
+      transform: [{
+        translateY: sharedValue.get() ? _ReanimatedRexport.withDelay(150, _spring.withSpring(0, SPRING_CONFIG)) : 30
+      }]
+    };
+  };
+  _.__closure = {
+    bannerMeasured: sharedValue,
+    withDelay: _ReanimatedRexport.withDelay,
+    withSpring: _spring.withSpring,
+    SPRING_CONFIG
+  };
+  _.__workletHash = 5314641176204;
+  _.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(_);
+  const style = [styles.banner, , ,];
+  if (height > 0) {
+    opacity = 1;
+  }
+  style[1] = {
+    opacity,
+    width
+  };
+  style[2] = animatedStyle;
+  return <ReanimatedRexport.View style={style} onLayout={function onLayout(event) {
+    const height = event.nativeEvent.layout?.height;
+    if (height > 0) {
+      setState(height);
+      sharedValue.set(true);
+    }
+  }}>
+    <Module4611 start={{
+      x: 0,
+      y: 0
+    }} end={{
+      x: 0,
+      y: 1
+    }} colors={colors} style={[styles.bannerBackgroundGradient, {
+      height,
+      width
+    }]} />
+    <View style={styles.imageContainer}>
+      <LottieAnimationView style={styles.trinketsLottie} source={_Module11236} autoPlay={!stateFromStores} />
+      {image}
+    </View>
+    <View style={styles.bannerTextContainer}>
+      <Text variant="text-md/semibold" color="text-overlay-light" style={styles.bannerText}>{text}</Text>
+    </View>
+  </ReanimatedRexport.View>;
+};

modules/app_launcher/native/onboarding/banner/BotsBanner.tsx

@@ -0,0 +1,16 @@
+// Metro module 11239 (f11240).
+import { useBannerBots } from "../hooks/useBannerBots";
+import ApplicationsImage from "./ApplicationsImage";
+import BannerBase from "./BannerBase";
+import { intl, t } from "../../../../../intl/index.native";
+export default function BotsBanner(props) {
+  const bannerBots = useBannerBots({
+    context: props.context
+  });
+  const { firstBotApplication, secondBotApplication } = bannerBots;
+  const image = <ApplicationsImage firstApplication={firstBotApplication} secondApplication={secondBotApplication} />;
+  return firstBotApplication == null ? null : secondBotApplication == null ? null : <BannerBase image={image} text={intl.formatToPlainString(t["9SN0xw"], {
+    firstApplicationName: firstBotApplication.name,
+    secondApplicationName: secondBotApplication.name
+  })} />;
+};