discord-decomp/modules/premium/referral_program/native/ReferralProgramPerkCard.tsx

// 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>;
}