yeet

modules/premium/native/discounts/PremiumDiscountOfferActionSheet.tsx

@@ -0,0 +1,80 @@
+// Metro module 15762 (f15763).
+import { useMemo, useEffect, useCallback } from "react";
+import { PremiumTypes, SubscriptionPlanInfo } from "../../PremiumConstants";
+import * as _Constants from "../../../../Constants";
+import { AnalyticEvents } from "../../../../Constants";
+import { ContentDismissActionType } from "../../../dismissible_content/DismissibleContentConstants";
+import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import { acknowledgeUserOffer } from "../../UserOfferActionCreators";
+import openPremiumModal from "../../../../components_native/premium/openPremiumModal";
+import openPremiumPlanSelectionActionSheet from "../openPremiumPlanSelectionActionSheet";
+import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
+import PremiumDiscountOfferActionSheetContent from "./PremiumDiscountOfferActionSheetContent";
+const { AnalyticsObjectTypes, AnalyticsPages, AnalyticsSections } = _Constants;
+const analyticsLocation = {
+  page: AnalyticsPages.USER_SETTINGS,
+  section: AnalyticsSections.SETTINGS_PREMIUM,
+  objectType: AnalyticsObjectTypes.BUY
+};
+export default ({ markAsDismissed, userDiscountOffer }) => {
+  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.PREMIUM_DISCOUNT_OFFER_ACTION_SHEET).analyticsLocations;
+  const memo = useMemo(() => {
+    const r1 = userDiscountOffer == null;
+    let r5 = void 0;
+    if (!r1) {
+      const discount = userDiscountOffer.discount;
+      const r7 = discount == null;
+      r5 = void 0;
+      if (!r7) {
+        const planIds = discount.planIds;
+        r5 = planIds == null ? void 0 : planIds[0];
+      }
+    }
+    let r14 = (r5 != null ? SubscriptionPlanInfo[r5] : null)?.premiumType;
+    if (r14 == null) {
+      r14 = PremiumTypes.TIER_2;
+    }
+    return r14;
+  }, [userDiscountOffer]);
+  useEffect(() => {
+    if (userDiscountOffer != null) {
+      AnalyticsUtils.track(AnalyticEvents.PREMIUM_DISCOUNT_OFFER_ACTION_SHEET_VIEWED, {
+        location: analyticsLocations,
+        discount_offer_id: userDiscountOffer.id
+      });
+      acknowledgeUserOffer(void 0, userDiscountOffer);
+    }
+  }, []);
+  useEffect(() => {
+    if (userDiscountOffer == null) {
+      markAsDismissed(ContentDismissActionType.AUTO_DISMISS);
+    }
+  }, [userDiscountOffer, markAsDismissed]);
+  const callback = useCallback(() => {
+    AnalyticsUtils.track(AnalyticEvents.PREMIUM_DISCOUNT_OFFER_ACTION_SHEET_DISMISSED, {
+      location: analyticsLocations,
+      discount_offer_id: userDiscountOffer?.id
+    });
+    markAsDismissed(ContentDismissActionType.USER_DISMISS);
+  }, [analyticsLocations, markAsDismissed, userDiscountOffer]);
+  const callback2 = useCallback(() => {
+    AnalyticsUtils.track(AnalyticEvents.PREMIUM_DISCOUNT_OFFER_ACTION_SHEET_CTA_CLICKED, {
+      location: analyticsLocations,
+      discount_offer_id: userDiscountOffer?.id
+    });
+    markAsDismissed(ContentDismissActionType.TAKE_ACTION);
+    openPremiumModal({
+      analyticsLocations
+    });
+    openPremiumPlanSelectionActionSheet({
+      analyticsLocation,
+      analyticsLocations,
+      premiumType: memo
+    });
+  }, [analyticsLocations, markAsDismissed, userDiscountOffer, memo]);
+  return userDiscountOffer == null ? null : <BottomSheet key={userDiscountOffer?.id} startExpanded onDismiss={callback}>
+    <PremiumDiscountOfferActionSheetContent discountOffer={userDiscountOffer} onConfirm={callback2} />
+  </BottomSheet>;
+};

modules/premium/native/discounts/PremiumDiscountOfferActionSheetContent.tsx

@@ -0,0 +1,77 @@
+// Metro module 15763 (f15764).
+import { memo } from "react";
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { UserIcon } from "../../../../design/components/Icon/native/redesign/generated/UserIcon";
+import { intl, t } from "../../../../intl/index.native";
+import { ChatSmileIcon } from "../../../../design/components/Icon/native/redesign/generated/ChatSmileIcon";
+import { FolderIcon } from "../../../../design/components/Icon/native/redesign/generated/FolderIcon";
+import { NitroWumpusFlightRight3dIllustration } from "../../../../design/assets/native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import PremiumPerksList from "../../../../components_native/premium/PremiumPerksList";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { NitroWheelIcon } from "../../../../design/components/Icon/native/redesign/generated/NitroWheelIcon";
+const useStyles = createStyles({
+  contentContainer: {
+    paddingHorizontal: 36,
+    paddingTop: 18,
+    paddingBottom: 36,
+    width: "100%",
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    alignItems: "flex-start",
+    display: "flex",
+    flexDirection: "column",
+    gap: 0
+  },
+  buttonContainer: {
+    marginVertical: 6,
+    width: "100%",
+    height: 48
+  },
+  title: {
+    width: "100%",
+    textAlign: "center"
+  },
+  heroIllustrationContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    height: 188,
+    width: "100%"
+  }
+});
+const r37 = memo(function PremiumDiscountOfferActionSheetContent(props) {
+  const { discountOffer, onConfirm } = props;
+  const styles = useStyles();
+  const perks = [{
+    IconComponent: UserIcon,
+    label: intl.string(t.kpMomJ),
+    description: intl.string(t.uVUtPw)
+  }, {
+    IconComponent: ChatSmileIcon,
+    label: intl.string(t["R2IV/Q"]),
+    description: intl.string(t["3SUJLd"])
+  }, {
+    IconComponent: FolderIcon,
+    label: intl.string(t["u/NJKc"]),
+    description: intl.string(t.i1UuMk)
+  }];
+  const amount = discountOffer.discount.amount;
+  return <View style={styles.contentContainer}>
+    <View style={styles.heroIllustrationContainer}>
+      <NitroWumpusFlightRight3dIllustration width={180} height={180} />
+    </View>
+    <Text variant="heading-xl/bold" color="mobile-text-heading-primary" style={styles.title}>
+      {intl.formatToPlainString(t.qowbUk, {
+        percent: amount
+      })}
+    </Text>
+    <PremiumPerksList perks={perks} />
+    <View style={styles.buttonContainer}>
+      <Button size="lg" text={intl.formatToPlainString(t.bkQ4bH, {
+        percent: amount
+      })} onPress={onConfirm} grow icon={<NitroWheelIcon size="md" color={Module712.unsafe_rawColors.WHITE} />} />
+    </View>
+  </View>;
+});
+export default r37;