yeet

modules/premium/gifting/native/views/promotions/GiftingPromotionCoachmark.tsx

@@ -0,0 +1,78 @@
+// Metro module 15756 (f15757).
+import { useCallback } from "react";
+import { View } from "react-native";
+import AccessibilityStore from "../../../../../a11y/AccessibilityStore";
+import { AnalyticsObjects, AnalyticsPages, AnalyticsSections } from "../../../../../../Constants";
+import { ContentDismissActionType } from "../../../../../dismissible_content/DismissibleContentConstants";
+import { createStyles } from "../../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../../_bundle/Module712";
+import { useStateFromStores } from "../../../../../../_bundle/Module589";
+import { useThemeAndReducedMotionAwareAssetUrl } from "../../../../promotions/MarketingComponentHooks";
+import useAnalyticsLocations from "../../../../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../../../../app_analytics/AnalyticsLocation";
+import ActionSheetActionCreators from "../../../../../action_sheet/native/ActionSheetActionCreators";
+import { openGiftModal } from "../../../../native/utils/openGiftModal";
+import { BottomSheet } from "../../../../../../design/components/Sheet/native/BottomSheet.native";
+import { isAndroid } from "../../../../../../utils/PlatformUtils";
+import Module6208 from "../../../../../../_bundle/Module6208";
+import FastImage from "../../../../../../components_native/common/FastImage";
+import { Text } from "../../../../../../design/components/Text/native/Text";
+import { Button } from "../../../../../../design/components/Button/native/Button.native";
+import { intl, t } from "../../../../../../intl/index.native";
+const useStyles = createStyles({
+  container: {
+    alignItems: "center",
+    padding: Module712.space.PX_16
+  },
+  textContainer: {
+    gap: Module712.space.PX_8,
+    paddingHorizontal: Module712.space.PX_16,
+    paddingVertical: Module712.space.PX_24
+  },
+  text: {
+    textAlign: "center"
+  },
+  imageShared: {
+    height: 188,
+    width: 335,
+    borderRadius: Module712.radii.sm
+  },
+  imageWrapperAndroid: {
+    overflow: "hidden"
+  }
+});
+export default function GiftingPromotionCoachmarkActionSheet(props) {
+  let analyticsLocations;
+  const { coachmarkComponent, markAsDismissed } = props;
+  analyticsLocations = void 0;
+  const styles = useStyles();
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const themeAndReducedMotionAwareAssetUrl = useThemeAndReducedMotionAwareAssetUrl(coachmarkComponent?.asset);
+  analyticsLocations = useAnalyticsLocations(AnalyticsLocation.GIFTING_PROMOTION_COACHMARK).analyticsLocations;
+  const callback = useCallback(() => {
+    ActionSheetActionCreators.hideActionSheet();
+    markAsDismissed(ContentDismissActionType.TAKE_ACTION);
+    openGiftModal({
+      analyticsLocation: {
+        page: AnalyticsPages.PREMUIM_UPSELL_GIFTING_PROMOTION,
+        section: AnalyticsSections.FOOTER,
+        object: AnalyticsObjects.BUTTON_CTA
+      },
+      analyticsLocations
+    });
+  }, [analyticsLocations, markAsDismissed]);
+  return coachmarkComponent == null ? null : <BottomSheet startExpanded onDismiss={() => markAsDismissed(ContentDismissActionType.USER_DISMISS)}>
+    <View style={styles.container}>
+      {themeAndReducedMotionAwareAssetUrl != null && (isAndroid() && !stateFromStores ? <View style={[styles.imageShared, styles.imageWrapperAndroid]}>
+        <Module6208 url={themeAndReducedMotionAwareAssetUrl} style={styles.imageShared} />
+      </View> : <FastImage source={{
+        uri: themeAndReducedMotionAwareAssetUrl
+      }} style={styles.imageShared} />)}
+      <View style={styles.textContainer}>
+        <Text style={styles.text} variant="heading-xl/extrabold" color="mobile-text-heading-primary">{coachmarkComponent.header}</Text>
+        <Text style={styles.text} variant="text-md/normal" color="text-default">{coachmarkComponent.body}</Text>
+      </View>
+      <Button grow text={intl.string(t.RzWDqY)} onPress={callback} />
+    </View>
+  </BottomSheet>;
+};

modules/premium/gifting/native/views/promotions/GiftingSKUCardsGrid.tsx

@@ -0,0 +1,116 @@
+// Metro module 9779 (f9780).
+import * as Module19 from "react";
+import { useMemo } from "react";
+import { View } from "react-native";
+import { isAvatarDecorationRecord } from "../../../../../collectibles/records/AvatarDecorationRecord";
+import { isNameplateRecord } from "../../../../../collectibles/records/NameplateRecord";
+import { createStyles } from "../../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../../_bundle/Module712";
+import { useCurrentUser } from "../../../../../collectibles/hooks/useCurrentUser";
+import { useRadioA11yNative } from "../../../../../../_bundle/Module3907";
+import { useFetchCollectiblesProduct } from "../../../../../collectibles/hooks/useFetchCollectiblesProduct";
+import { PressableOpacity } from "../../../../../../design/void/Pressables/native/Pressables";
+import NameplateCardPreview from "../../../../../collectibles/nameplates/native/NameplateCardPreview";
+import AvatarDecorationSampleV2 from "../../../../../collectibles/native/AvatarDecorationSampleV2";
+import { CheckmarkLargeBoldIcon } from "../../../../../../design/components/Icon/native/redesign/generated/CheckmarkLargeBoldIcon";
+import { Text } from "../../../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../../../intl/index.native";
+let useStyles2;
+const useStyles = createStyles({
+  card: {
+    height: 178,
+    width: 150,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderRadius: Module712.radii.sm,
+    overflow: "hidden",
+    borderColor: Module712.colors.BORDER_SUBTLE,
+    margin: Module712.space.PX_4
+  },
+  overlayContainer: {
+    position: "absolute",
+    top: 10,
+    zIndex: 2,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "75%"
+  },
+  selected: {
+    borderColor: Module712.colors.BACKGROUND_BRAND
+  },
+  claimed: {
+    opacity: 0.4
+  },
+  checkmark: {
+    position: "absolute",
+    opacity: 1,
+    fontWeight: "bold"
+  },
+  checkmarkContainer: {
+    position: "absolute",
+    top: 10,
+    zIndex: 3,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "75%"
+  },
+  textContainer: {
+    position: "absolute",
+    bottom: 20,
+    left: 0,
+    right: 0,
+    paddingHorizontal: Module712.space.PX_16,
+    alignItems: "flex-start"
+  }
+});
+let Component = Module19.memo(function({ rewardSkuId, claimed, onSelect, isSelected }) {
+  const styles = useStyles();
+  const currentUser = useCurrentUser();
+  const radioA11yNative = useRadioA11yNative({
+    selected: isSelected
+  });
+  const { accessibilityRole, accessibilityState } = radioA11yNative;
+  const product = useFetchCollectiblesProduct(rewardSkuId).product;
+  const memo = useMemo(() => isSelected ? currentUser.getAvatarSource(null, true, 100) : void 0, [isSelected, currentUser]);
+  if (product == null) {
+    return null;
+  }
+  const item = product.items[0];
+  const style = [styles.card, isSelected ? styles.selected : isSelected];
+  return <PressableOpacity style={style} onPress={() => onSelect(rewardSkuId)} activeOpacity={0.8} disabled={claimed} accessibilityRole={accessibilityRole} accessibilityState={accessibilityState}>
+    <View style={[styles.overlayContainer, claimed ? styles.claimed : claimed]}>
+      {isNameplateRecord(item) ? <NameplateCardPreview item={item} animate={isSelected} /> : isAvatarDecorationRecord(item) ? <AvatarDecorationSampleV2 item={item} size={100} animate={isSelected} avatarSource={memo} /> : void 0}
+    </View>
+    {claimed && <View style={styles.checkmarkContainer}>
+      <CheckmarkLargeBoldIcon size="lg" style={styles.checkmark} />
+    </View>}
+    <View style={styles.textContainer}>
+      <Text variant="heading-sm/bold" color="mobile-text-heading-primary" lineClamp={1} accessibilityRole="header">{product.name}</Text>
+      <Text variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1}>
+        {claimed ? intl.string(t["6cfuDj"]) : intl.string(t.QQsaCc)}
+      </Text>
+    </View>
+  </PressableOpacity>;
+});
+useStyles2 = createStyles({
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center"
+  }
+});
+export default function GiftingSKUCardsGrid(props) {
+  const { rewardsToDisplay, claimableRewards, onSelect: onSelect2, highlightedSkuId } = props;
+  return <View style={useStyles2().grid}>
+    {rewardsToDisplay.map((item) => {
+      return <Component key={item} rewardSkuId={item} claimed={!claimableRewards.some((claimableReward) => claimableReward === item)} isSelected={highlightedSkuId === item} onSelect={onSelect2} />;
+    })}
+  </View>;
+};

modules/premium/gifting/native/views/promotions/GiftingSKUSelectScreen.tsx

@@ -0,0 +1,88 @@
+// Metro module 9778 (f9779).
+import { useState, useCallback, useMemo, useEffect } from "react";
+import { ScrollView, View } from "react-native";
+import { createStyles } from "../../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../../_bundle/Module712";
+import useSafeAreaInsets_native from "../../../../../safe_area/useSafeAreaInsets.native";
+import { Text } from "../../../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../../../intl/index.native";
+import GiftingSKUCardsGrid from "./GiftingSKUCardsGrid";
+import { Button } from "../../../../../../design/components/Button/native/Button.native";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  scroll: {
+    flex: 1
+  },
+  contentContainer: {
+    display: "flex",
+    flexDirection: "column",
+    padding: Module712.space.PX_24
+  },
+  header: {
+    textAlign: "center",
+    padding: Module712.space.PX_8
+  },
+  subtitle: {
+    textAlign: "center"
+  },
+  buttonContainer: {
+    marginHorizontal: Module712.space.PX_16,
+    marginBottom: Module712.space.PX_24
+  },
+  headerContainer: {
+    marginBottom: Module712.space.PX_24
+  }
+});
+export default function GiftingSKUSelectScreen(props) {
+  let memo;
+  const { defaultHighlightedReward, allRewards, claimableRewards, onSelect } = props;
+  memo = void 0;
+  const styles = useStyles();
+  const bottom = useSafeAreaInsets_native().bottom;
+  const [state, setState] = useState(defaultHighlightedReward);
+  const [state2, setState2] = useState(false);
+  const callback = useCallback(() => {
+    const r5 = claimableRewards.find((claimableReward) => claimableReward === state);
+    if (r5 != null) {
+      onSelect(r5);
+    }
+  }, [onSelect, state, claimableRewards]);
+  const callback2 = useCallback((a0) => {
+    setState(a0);
+    setState2(true);
+  }, []);
+  memo = useMemo(() => state != null && claimableRewards.some((claimableReward) => claimableReward === state), [state, claimableRewards]);
+  useEffect(() => {
+    L11: {
+      if (claimableRewards.length === 0) {
+        setState(void 0);
+      } else {
+        if (memo && claimableRewards.some((claimableReward) => claimableReward === state)) {
+          break L11;
+        }
+        setState((state2 ? !state2 : defaultHighlightedReward != null) && claimableRewards.some((claimableReward) => claimableReward === defaultHighlightedReward) ? defaultHighlightedReward : void 0);
+      }
+    }
+  }, [state, claimableRewards, state2, defaultHighlightedReward, memo]);
+  return <View style={styles.container}>
+    <ScrollView style={styles.scroll} contentContainerStyle={styles.contentContainer}>
+      <View style={styles.headerContainer}>
+        <Text style={styles.header} variant="heading-xl/extrabold" color="mobile-text-heading-primary" accessibilityRole="header">
+          {intl.string(t["+ByEeM"])}
+        </Text>
+        <Text style={styles.subtitle} variant="text-md/medium" color="text-default">
+          {intl.string(t.vPeaOS)}
+        </Text>
+      </View>
+      <GiftingSKUCardsGrid rewardsToDisplay={allRewards} claimableRewards={claimableRewards} onSelect={callback2} highlightedSkuId={state} />
+    </ScrollView>
+    <View style={[styles.buttonContainer, {
+      paddingBottom: bottom
+    }]}>
+      <Button text={intl.string(t["3d0Nmb"])} onPress={callback} disabled={state == null || !memo} />
+    </View>
+  </View>;
+};