yeet

modules/premium/referral_program/native/ProgressWheel.tsx

@@ -0,0 +1,46 @@
+// Metro module 12482 (f12483).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { useToken } from "../../../../design/tokens/native/useToken";
+import Module712 from "../../../../_bundle/Module712";
+import { MAX_REFERRALS_SENT } from "../hooks/useReferralProgramBannerDetails";
+import FastImage from "../../../../components_native/common/FastImage";
+import Module12483 from "../../../../_bundle/Module12483";
+import Module8531, { Circle } from "../../../../_bundle/Module8531";
+import Module12484 from "../../../../_bundle/Module12484";
+const width = 160;
+const strokeDasharray = 2 * Math.PI * 77;
+const useStyles = createStyles({
+  progressCircleContainer: {
+    width: 160,
+    height: 160,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 24
+  },
+  progressCircleImage: {
+    position: "absolute",
+    width: 93,
+    height: 93,
+    borderRadius: 46.5
+  },
+  glowImage: {
+    position: "absolute",
+    width: 180,
+    height: 180
+  }
+});
+export default function ProgressWheel(props) {
+  const nReferralsSent = props.nReferralsSent;
+  const styles = useStyles();
+  return <View style={styles.progressCircleContainer}>
+    {nReferralsSent === MAX_REFERRALS_SENT && <FastImage source={Module12483} style={styles.glowImage} />}
+    <Module8531 width={width} height={width}>
+      <Circle cx={80} cy={80} r={77} stroke={useToken(Module712.colors.BACKGROUND_MOD_STRONG)} strokeWidth={6} fill={useToken(Module712.colors.BACKGROUND_SURFACE_HIGH)} />
+      <Circle cx={80} cy={80} r={77} stroke="#53ac66" strokeWidth={6} fill="transparent" strokeDasharray={strokeDasharray} strokeDashoffset={strokeDasharray * (1 - 33.3 * nReferralsSent / 100)} strokeLinecap="round" rotation={-90} origin="80, 80" />
+    </Module8531>
+    <FastImage source={{
+      uri: Module12484
+    }} style={styles.progressCircleImage} />
+  </View>;
+};

modules/premium/referral_program/native/ReferralProgramPerkCard.tsx

@@ -0,0 +1,137 @@
+// Metro module 12473 (f12474).
+import { useCallback } from "react";
+import { View } from "react-native";
+import ReferralTrialStore from "../../ReferralTrialStore";
+import { AnalyticEvents, HelpdeskArticles } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { Avatar, AvatarSizes } from "../../../../design/void/native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { MAX_REFERRALS_SENT, useReferralProgramBannerDetails } from "../hooks/useReferralProgramBannerDetails";
+import { intl, t } from "../../../../intl/index.native";
+import HelpdeskUtils from "../../../../utils/HelpdeskUtils";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import { ReferralOfferStatus } from "../../ReferralTrialActionCreators";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+import ProgressWheel from "./ProgressWheel";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+let useStyles, AvailableReferralSlot, ProgressIndicator;
+const ReferredFriendAvatar = function ReferredFriendAvatar(props) {
+  const user = props.user;
+  return <View style={useStyles().referredFriendAvatar}>
+    <Avatar source={user.getAvatarSource(void 0, false, 24)} size={AvatarSizes.XSMALL} />
+  </View>;
+};
+AvailableReferralSlot = function AvailableReferralSlot(props) {
+  const slotIndex = props.slotIndex;
+  return <View style={useStyles().availableReferralSlot}>
+    <Text variant="text-xs/medium" color="text-strong">{slotIndex}</Text>
+  </View>;
+};
+ProgressIndicator = function ProgressIndicator(props) {
+  const referralSentUsers = props.referralSentUsers;
+  const styles = useStyles();
+  const r10 = [];
+  let r0 = 0;
+  if (0 < MAX_REFERRALS_SENT) {
+    do {
+      const r21 = referralSentUsers[r0];
+      const key = r0;
+      if (r21 != null) {
+        r10.push(<ReferredFriendAvatar key={referralSentUsers[key].id} user={referralSentUsers[key]} />);
+      } else {
+        r10.push(<AvailableReferralSlot key={key} slotIndex={key + 1} />);
+      }
+      r0 = key + 1;
+    } while (r0 < MAX_REFERRALS_SENT);
+  }
+  return <View style={styles.progressIndicatorContainer}>{r10}</View>;
+};
+useStyles = createStyles({
+  container: {
+    width: 320,
+    borderRadius: Module712.radii.sm,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    alignItems: "center",
+    ...Module712.shadows.SHADOW_LOW
+  },
+  progressIndicatorContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 8,
+    marginTop: 16,
+    marginLeft: 24
+  },
+  availableReferralSlot: {
+    width: 24,
+    height: 24,
+    borderRadius: Module712.radii.xxl,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  referredFriendAvatar: {
+    borderWidth: 2,
+    borderColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    borderRadius: Module712.radii.round
+  },
+  contentContainer: {
+    alignItems: "flex-start",
+    paddingHorizontal: 24,
+    gap: 8,
+    marginTop: 12
+  },
+  heading: {
+    textAlign: "left"
+  },
+  bodyText: {
+    textAlign: "left"
+  },
+  buttonContainer: {
+    paddingHorizontal: Module712.space.PX_16,
+    width: "100%",
+    marginTop: Module712.space.PX_24,
+    marginBottom: Module712.space.PX_16
+  }
+});
+export function ReferralProgramPerkCard() {
+  let analyticsLocations;
+  const styles = useStyles();
+  const referralSentUsers = useReferralProgramBannerDetails().referralSentUsers;
+  const stateFromStores2 = useStateFromStores([ReferralTrialStore], () => ReferralTrialStore.getRecipientStatus());
+  const stateFromStores = useStateFromStores([ReferralTrialStore], () => ReferralTrialStore.getHasEligibleFriends());
+  analyticsLocations = useAnalyticsLocations(AnalyticsLocation.PREMIUM_MARKETING_REFERALL_PROGRAM_PROGRESS_BAR).analyticsLocations;
+  const r22 = stateFromStores2.size === MAX_REFERRALS_SENT && [...stateFromStores2.values()].every((item) => item === ReferralOfferStatus.REDEEMED);
+  const size = stateFromStores2.size;
+  const callback = useCallback(() => {
+    AnalyticsUtils.track(AnalyticEvents.REFERRAL_PROGRAM_SHARE_MODAL_CTA_CLICKED, {
+      location_stack: analyticsLocations
+    });
+    ActionSheetActionCreators.openLazy(import("./ReferralProgramShareActionSheet"), "referral-program-share-action-sheet");
+  }, [analyticsLocations]);
+  const r77 = [<ProgressWheel nReferralsSent={stateFromStores2.size} />, <ProgressIndicator referralSentUsers={referralSentUsers} />, , ,];
+  const r94 = [<Text variant="heading-lg/semibold" color="text-strong" style={styles.heading}>
+    {intl.string(t.USo4s7)}
+  </Text>, ,];
+  const length = referralSentUsers.length;
+  r94[1] = <Text variant="text-md/medium" color="text-subtle" style={styles.bodyText}>
+    {stateFromStores !== false ? length === MAX_REFERRALS_SENT ? r22 ? intl.format(t["1aEjsH"], {
+      helpdeskArticle: HelpdeskUtils.getArticleURL(HelpdeskArticles.REFERRAL_PROGRAM)
+    }) : intl.format(t["+u3AOO"], {
+      helpdeskArticle: HelpdeskUtils.getArticleURL(HelpdeskArticles.REFERRAL_PROGRAM)
+    }) : intl.format(t["omMr+V"], {
+      helpdeskArticle: HelpdeskUtils.getArticleURL(HelpdeskArticles.REFERRAL_PROGRAM)
+    }) : intl.format(t["zWhX/Q"], {
+      helpdeskArticle: HelpdeskUtils.getArticleURL(HelpdeskArticles.REFERRAL_PROGRAM)
+    })}
+  </Text>;
+  r77[2] = <View style={styles.contentContainer}>{r94}</View>;
+  r77[3] = <View style={styles.buttonContainer}>
+    <Button variant="primary" size="sm" disabled={stateFromStores === false || size === MAX_REFERRALS_SENT} text={intl.string(t.Lm2nFc)} onPress={callback} />
+  </View>;
+  return <View style={styles.container}>{r77}</View>;
+}

modules/premium/referral_program/native/ReferralProgramShareActionSheet.tsx

@@ -0,0 +1,278 @@
+// Metro module 12475 (f12476).
+import _slicedToArray from "../../../../_bundle/_slicedToArray";
+import { useRef, useState, useMemo, useLayoutEffect, useCallback } from "react";
+import { View } from "react-native";
+import UserStore from "../../../../stores/UserStore";
+import ReferralTrialStore from "../../ReferralTrialStore";
+import { AnalyticEvents } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import useDebounce from "../../../../hooks/useDebounce";
+import Module38 from "../../../../_bundle/Module38";
+import { isNotNullish } from "../../../../utils/GlobalUtils";
+import makeUserListPillData from "../../../main_tabs_v2/native/shared_components/user_list/makeUserListPillData";
+import { useReferralProgramEligibleUsers } from "../hooks/useReferralProgramEligibleUsers";
+import { intl, t } from "../../../../intl/index.native";
+import { AccessibilityAnnouncer } from "../../../../_bundle/Module3902";
+import { buildReferralUserRow } from "./ReferralProgramShareActionSheetUtils";
+import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import { createReferralTrials } from "../../ReferralTrialActionCreators";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+import "../../../../_bundle/asyncRequire";
+import { presentError } from "../../../toast/native/ToastUtils";
+import { BottomSheetTitleHeader } from "../../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import FastImage from "../../../../components_native/common/FastImage";
+import Module12480 from "../../../../_bundle/Module12480";
+import Module12481 from "../../../../_bundle/Module12481";
+import { useUserListActionsProps } from "../../../main_tabs_v2/native/shared_components/user_list/SearchableUserListActions";
+import { ActivityIndicator } from "../../../../design/components/ActivityIndicator/native/ActivityIndicator.native";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
+import TagListInput_native from "../../../../design/components/TagListInput/native/TagListInput.native";
+import { UsersFastList } from "../../../main_tabs_v2/native/shared_components/user_list/UsersFastList";
+let useStyles;
+let env8621 = {};
+const mapToUser = function mapToUser(a0) {
+  return [a0, UserStore.getUser(a0)];
+};
+useStyles = createStyles({
+  searchBarContainer: {
+    paddingHorizontal: Module712.space.PX_16,
+    paddingBottom: Module712.space.PX_24
+  },
+  searchBarRowContainer: {
+    paddingTop: Module712.space.PX_8
+  },
+  header: {
+    height: Module712.space.PX_64
+  },
+  subtitle: {
+    textAlign: "center",
+    paddingHorizontal: Module712.space.PX_16,
+    paddingBottom: Module712.space.PX_8
+  },
+  centeredContainer: {
+    alignItems: "center"
+  },
+  errorImage: {
+    height: 200,
+    width: 180,
+    marginVertical: Module712.space.PX_16
+  },
+  emptyImage: {
+    height: 200,
+    width: 240,
+    marginTop: Module712.space.PX_16
+  },
+  footer: {
+    paddingHorizontal: Module712.space.PX_16,
+    paddingBottom: Module712.space.PX_48
+  }
+});
+export default function ReferralProgramShareActionSheet() {
+  let c19857_0;
+  let env19856 = {
+    $parent: env8621
+  };
+  const styles = useStyles();
+  const ref = useRef(null);
+  env19856[0] = ref;
+  const stateFromStores = useStateFromStores([ReferralTrialStore], () => ReferralTrialStore.getReferralsRemaining());
+  env19856[1] = stateFromStores;
+  const [state, onChangeText] = useState("");
+  const r49 = _slicedToArray(useState([]), 2);
+  const r30 = r49[0];
+  env19856[2] = r30;
+  env19856[3] = r49[1];
+  const debounce = useDebounce(state, 400);
+  const r56 = _slicedToArray(useState(false), 2);
+  let loading = r56[0];
+  env19856[4] = r56[1];
+  Module38(stateFromStores != null, "Referrals remaining should not be null");
+  const memo = useMemo(() => {
+    const r3 = Map;
+    const r5 = env19856[2];
+    return new r3(r5 == null ? void 0 : r5.map(mapToUser));
+  }, [r30]);
+  env19856[5] = memo;
+  const memo3 = useMemo(() => Array.from(env19856[5].values()).filter(isNotNullish).map(makeUserListPillData), [memo]);
+  env19856[6] = memo3;
+  useLayoutEffect(() => {
+    const current = env19856[0].current;
+    if (current != null) {
+      current.scrollToTop(false);
+    }
+  }, [state]);
+  const referralProgramEligibleUsers = useReferralProgramEligibleUsers({
+    searchQuery: debounce,
+    selectedUsers: memo,
+    limit: 15
+  });
+  const eligibleUsers = referralProgramEligibleUsers.eligibleUsers;
+  env19856[7] = eligibleUsers;
+  const fetchUsers = referralProgramEligibleUsers.fetchUsers;
+  env19856[8] = fetchUsers;
+  const isFetching = referralProgramEligibleUsers.isFetching;
+  env19856[9] = isFetching;
+  const hasError = referralProgramEligibleUsers.hasError;
+  env19856[10] = hasError;
+  const resendUsers = referralProgramEligibleUsers.resendUsers;
+  env19856[11] = resendUsers;
+  const memo4 = useMemo(() => env19856[2].filter((item) => !env19856[11].has(item)), [r30, resendUsers]);
+  env19856[12] = memo4;
+  const memo2 = useMemo(() => env19856[9] && !env19856[10] && env19856[7].length === 0, [isFetching, hasError, eligibleUsers]);
+  const r34 = intl.string(t.DXgoi2);
+  const callback2 = useCallback((c27293_0) => {
+    (0, env19856[3])((a0) => {
+      const indexOf = a0.indexOf;
+      const r9 = indexOf.call(a0, c27293_0.id);
+      const r10 = [...a0];
+      if (r9 === -1) {
+        r10.push(c27293_0.id);
+      } else {
+        r10.splice(r9, 1);
+      }
+      return r10;
+    });
+  }, []);
+  env19856[13] = callback2;
+  const callback = useCallback((a0) => {
+    const r7 = env19856[6][a0];
+    const user = UserStore.getUser(r7.id);
+    if (user != null) {
+      (0, env19856[13])(user);
+      AccessibilityAnnouncer.announce(intl.formatToPlainString(t.srlxB8, {
+        text: r7.text
+      }));
+    }
+  }, [callback2, memo3]);
+  const memo5 = useMemo(() => [env19856[7].length], [eligibleUsers]);
+  const callback3 = useCallback(() => ({
+    type: "section",
+    props: {
+      hideTitle: true
+    }
+  }), []);
+  const callback4 = useCallback((a0, a1) => buildReferralUserRow({
+    eligibleUsers: env19856[7],
+    row: a1,
+    selectedUserIds: env19856[2],
+    resendUsers: env19856[11],
+    referralsRemaining: env19856[1],
+    selectedNotResendUsers: env19856[12],
+    onSelectUser: env19856[13]
+  }), [eligibleUsers, callback2, r30, resendUsers, stateFromStores, memo4]);
+  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.PREMIUM_MARKETING_REFERALL_PROGRAM_SHARE_MODAL).analyticsLocations;
+  env19856[14] = analyticsLocations;
+  c19857_0 = void 0;
+  c19857_0 = async (c30521_0) => {
+    let c30521_1, c30521_2;
+    let c30521_3 = 0;
+    const r15 = void 0;
+    L10: {
+      try {
+        let env31656;
+        c30521_2 = r15;
+        const r31 = env31656 = {};
+        c30521_1 = r31;
+        env31656[0] = c30521_0;
+        env31656[1] = void 0;
+        c30521_3 = 1;
+        (0, env19856[4])(true);
+        AnalyticsUtils.track(AnalyticEvents.REFERRAL_PROGRAM_SHARE_CTA_CLICKED, {
+          location_stack: env19856[14]
+        });
+        env31656[1] = await createReferralTrials(c30521_0.map((item) => item.id));
+        (0, env19856[4])(false);
+        ActionSheetActionCreators.openLazy(import("./ReferralProgramShareConfirmationActionSheet"), "referral-program-share-action-sheet", {
+          selectedUsers: env31656[0],
+          trialCreationResult: env31656[1]
+        });
+        c30521_3 = 0;
+      } catch ($e) {
+        let r30 = $e;
+        if (c30521_3 !== 0) {
+          while (true) {
+            try {
+              c30521_3 = 0;
+              (0, env19856[4])(false);
+              presentError(intl.string(t.R0RpRX));
+              break L10;
+            } catch ($e) {
+              r30 = $e;
+              if (c30521_3 === 0) {
+                break;
+              }
+            }
+          }
+        }
+        throw r30;
+      }
+    }
+  };
+  env19856[15] = useCallback(function() {
+    return c19857_0.apply(this, arguments);
+  }, [analyticsLocations]);
+  const r144 = <View style={styles.header}>
+    <BottomSheetTitleHeader title={useMemo(() => env19856[1] === 0 ? intl.string(t.SY9tyI) : intl.string(t["2dVCLl"]), [stateFromStores])} />
+    <Text variant="text-xs/medium" color="text-default" lineClamp={2} style={styles.subtitle}>{r34}</Text>
+  </View>;
+  const header = hasError ? <View style={styles.centeredContainer}>
+    <FastImage source={{
+      uri: Module12480
+    }} resizeMode="contain" style={styles.errorImage} />
+    <Text variant="heading-xl/bold" style={styles.subtitle}>
+      {intl.string(t.a9HOKg)}
+    </Text>
+    <Text variant="text-md/medium" color="text-default" style={styles.subtitle}>
+      {intl.string(t.JjjeZb)}
+    </Text>
+  </View> : eligibleUsers.length === 0 && debounce.length > 0 ? <View style={styles.centeredContainer}>
+    <FastImage source={{
+      uri: Module12481
+    }} resizeMode="contain" style={styles.emptyImage} />
+    <Text variant="heading-xl/bold" style={styles.subtitle}>
+      {intl.string(t["PFp+aJ"])}
+    </Text>
+    <Text variant="text-md/medium" color="text-default" style={styles.subtitle}>
+      {intl.string(t.eBIGB4)}
+    </Text>
+  </View> : r144;
+  const userListActionsProps = useUserListActionsProps({
+    actions: [],
+    style: state.trim().length > 0 ? void 0 : styles.searchBarRowContainer
+  });
+  const { renderHeader, headerSize } = userListActionsProps;
+  const callback5 = useCallback((a0) => {
+    if (a0.nativeEvent.contentOffset.y + a0.nativeEvent.layoutMeasurement.height >= a0.nativeEvent.contentSize.height - 150) {
+      (0, env19856[8])();
+    }
+  }, [fetchUsers]);
+  const r254 = <ActivityIndicator />;
+  const props = {
+    size: "lg",
+    text: intl.string(t.ItpQxk),
+    onPress: () => {
+      (0, env19856[15])(Array.from(env19856[5].values()));
+    },
+    loading,
+    disabled: null
+  };
+  if (!loading) {
+    loading = r30.length === 0;
+  }
+  props.disabled = loading;
+  return <BottomSheet scrollable startExpanded header={header} footer={<View style={[styles.footer]}>
+    <Button {...props} />
+  </View>}>
+    <View style={styles.searchBarContainer}>
+      <TagListInput_native onChangeText={onChangeText} onRemove={callback} tags={memo3} placeholder={intl.string(t.Kd5RaI)} />
+    </View>
+    {memo2 ? r254 : null}
+    <UsersFastList ref={ref} inActionSheet sections={memo5} getItemProps={callback4} getSectionProps={callback3} renderListHeader={renderHeader} listHeaderSize={headerSize} insetEnd={80} onScroll={callback5} />
+  </BottomSheet>;
+};

modules/premium/referral_program/native/ReferralProgramShareActionSheetUtils.tsx

@@ -0,0 +1,35 @@
+// Metro module 12478 (f12479).
+import RelationshipStore from "../../../../stores/RelationshipStore";
+import { UserRowModes } from "../../../main_tabs_v2/native/shared_components/user_list/UserRowConstants";
+export function buildReferralUserRow({ eligibleUsers, row, selectedUserIds, resendUsers, referralsRemaining, selectedNotResendUsers, onSelectUser }) {
+  const user = eligibleUsers[row];
+  if (user != null) {
+    let disabled = selectedNotResendUsers.length >= referralsRemaining;
+    const selected = selectedUserIds.includes(user.id);
+    const r23 = resendUsers.has(user.id);
+    const props = {
+      type: RelationshipStore.getRelationshipType(user.id),
+      user,
+      onPress: onSelectUser,
+      selected,
+      disabled: null,
+      mode: null,
+      start: null,
+      end: null
+    };
+    if (disabled) {
+      disabled = !selected;
+    }
+    if (disabled) {
+      disabled = !r23;
+    }
+    props.disabled = disabled;
+    props.mode = UserRowModes.TOGGLE;
+    props.start = row === 0;
+    props.end = row === eligibleUsers.length - 1;
+    return {
+      type: "user",
+      props
+    };
+  }
+}

modules/premium/referral_program/native/ReferralProgramShareConfirmationActionSheet.tsx

@@ -0,0 +1,108 @@
+// Metro module 12479 (f12480).
+import { View } from "react-native";
+import { HelpdeskArticles } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import UserUtils from "../../../../utils/UserUtils";
+import { CreateReferralStatus } from "../../ReferralTrialActionCreators";
+import { Avatar, AvatarSizes } from "../../../../design/void/native";
+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 { ChatIcon } from "../../../../design/components/Icon/native/redesign/generated/ChatIcon";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+import ChannelActionCreators from "../../../../actions/ChannelActionCreators";
+import HelpdeskUtils from "../../../../utils/HelpdeskUtils";
+import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { Stack } from "../../../../design/components/Stack/native/Stack.native";
+import { FistBumpSpotIllustration } from "../../../../design/assets/native";
+let useStyles;
+const SharedUser = function SharedUser(props) {
+  const { user, trialCreationResult: trialCreationResult2 } = props;
+  const styles = useStyles();
+  const name = UserUtils.getName(user);
+  const r1 = trialCreationResult2 === CreateReferralStatus.FAIL;
+  return <View style={styles.recipientRow}>
+    <Avatar style={[styles.avatarContainer, r1 && styles.erroredAvatar]} size={AvatarSizes.REFRESH_MEDIUM_32} user={user} guildId={void 0} />
+    {r1 ? <>
+      <Text variant="text-md/medium" color="text-muted" style={styles.recipientDisplayName}>{name}</Text>
+      <Text variant="text-md/medium" color="text-muted">
+        {intl.format(t.RO3T4B, {
+          userName: name
+        })}
+      </Text>
+    </> : <Text variant="text-md/medium" color="text-strong" style={styles.recipientDisplayName}>{name}</Text>}
+    <Button variant="secondary" size="sm" text={intl.string(t["g33r/P"])} icon={<ChatIcon size="xs" color={Module712.colors.CONTROL_SECONDARY_TEXT_DEFAULT} />} onPress={function onPress() {
+      ActionSheetActionCreators.hideActionSheet();
+      ChannelActionCreators.openPrivateChannel({
+        recipientIds: user.id
+      });
+    }} />
+  </View>;
+};
+useStyles = createStyles({
+  content: {
+    paddingHorizontal: Module712.space.PX_16
+  },
+  headerAsset: {
+    alignSelf: "center"
+  },
+  header: {
+    marginTop: Module712.space.PX_16,
+    alignSelf: "center",
+    paddingHorizontal: Module712.space.PX_8,
+    textAlign: "center"
+  },
+  subheader: {
+    textAlign: "center",
+    paddingHorizontal: Module712.space.PX_8,
+    marginTop: Module712.space.PX_8
+  },
+  recipientContainer: {
+    gap: Module712.space.PX_16,
+    marginTop: Module712.space.PX_16,
+    paddingBottom: 21
+  },
+  recipientRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: Module712.space.PX_12,
+    gap: Module712.space.PX_12,
+    borderRadius: Module712.radii.md,
+    borderWidth: 1,
+    borderColor: Module712.colors.BORDER_MUTED
+  },
+  recipientDisplayName: {
+    flex: 1
+  },
+  erroredAvatar: {
+    opacity: 0.5
+  },
+  avatarContainer: {
+    alignSelf: "center",
+    justifyContent: "center"
+  }
+});
+export default function ReferralProgramShareConfirmationActionSheet(props) {
+  const { selectedUsers, trialCreationResult } = props;
+  const styles = useStyles();
+  return <BottomSheet startExpanded contentStyles={styles.content} header={<BottomSheetTitleHeader title={null} />}>
+    <Stack>
+      <View style={styles.headerAsset}>
+        <FistBumpSpotIllustration />
+      </View>
+      <Text variant="heading-lg/bold" color="mobile-text-heading-primary" style={styles.header}>
+        {Array.from(trialCreationResult.values()).filter((item) => item === CreateReferralStatus.SUCCESS).length === 0 ? intl.string(t["7VBEue"]) : intl.string(t.tKCltd)}
+      </Text>
+      <Text variant="text-md/medium" color="text-default" style={styles.subheader}>
+        {intl.format(t.AwGSWl, {
+          helpdeskArticle: HelpdeskUtils.getArticleURL(HelpdeskArticles.REFERRAL_PROGRAM)
+        })}
+      </Text>
+      <View style={styles.recipientContainer}>
+        {Array.from(selectedUsers).map((item) => <SharedUser key={item.id} user={item} trialCreationResult={trialCreationResult.get(item.id)} />)}
+      </View>
+    </Stack>
+  </BottomSheet>;
+};