yeet

modules/checkout/native/gifting/LockedRecipientField.tsx

@@ -0,0 +1,27 @@
+// Metro module 8809 (f8810).
+import { View } from "react-native";
+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 UserUtils from "../../../../utils/UserUtils";
+const useStyles = createStyles({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginLeft: Module712.space.PX_16
+  },
+  avatar: {
+    marginEnd: Module712.space.PX_8
+  }
+});
+export default function LockedRecipientField(props) {
+  const user = props.user;
+  const styles = useStyles();
+  return <View style={styles.container}>
+    <Avatar style={styles.avatar} user={user} guildId={void 0} size={AvatarSizes.NORMAL} />
+    <Text variant="text-md/semibold">
+      {UserUtils.getName(user)}
+    </Text>
+  </View>;
+};

modules/checkout/native/gifting/SelectedUserField.tsx

@@ -0,0 +1,80 @@
+// Metro module 8810 (f8811).
+import { Pressable, View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { InputFieldContainer } from "../../../../design/components/Input/native/InputFieldContainer.native";
+import { intl, t } from "../../../../intl/index.native";
+import UserUtils from "../../../../utils/UserUtils";
+import { MagnifyingGlassIcon } from "../../../../design/components/Icon/native/redesign/generated/MagnifyingGlassIcon";
+import { Avatar, AvatarSizes } from "../../../../design/void/native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { CircleXIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleXIcon";
+const useStyles = createStyles({
+  container: {
+    marginHorizontal: Module712.space.PX_16
+  },
+  content: {
+    flexDirection: "row",
+    overflow: "hidden",
+    alignItems: "center",
+    display: "flex"
+  },
+  opener: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    paddingHorizontal: Module712.space.PX_16,
+    paddingVertical: 6
+  },
+  openerWithClearButton: {
+    paddingRight: 0
+  },
+  searchIcon: {
+    marginRight: Module712.space.PX_8
+  },
+  userPill: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    borderRadius: Module712.radii.lg,
+    paddingVertical: 6,
+    paddingHorizontal: 6
+  },
+  userPillText: {
+    marginLeft: 6
+  },
+  clearButton: {
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 44,
+    minHeight: 44,
+    paddingRight: Module712.space.PX_16,
+    paddingLeft: Module712.space.PX_8
+  }
+});
+export default function SelectedUserField(props) {
+  const { selectedUser, onPress: onPress2, setSelectedUser } = props;
+  const styles = useStyles();
+  return <View style={styles.container}>
+    <InputFieldContainer>
+      <View style={styles.content}>
+        <Pressable style={[styles.opener, selectedUser != null && styles.openerWithClearButton]} onPress={onPress2} accessibilityRole="button" accessibilityLabel={selectedUser != null ? `${intl.string(t.xFn72s)}, ${UserUtils.getName(selectedUser)}` : `${intl.string(t.xFn72s)}, ${intl.string(t.R0vK0N)}`}>
+          <MagnifyingGlassIcon style={styles.searchIcon} size="xs" color="interactive-text-default" />
+          {selectedUser != null ? <View style={styles.userPill}>
+            <Avatar user={selectedUser} guildId={void 0} size={AvatarSizes.XSMALL_20} />
+            <Text variant="text-md/medium" style={styles.userPillText}>
+              {UserUtils.getName(selectedUser)}
+            </Text>
+          </View> : <Text variant="text-sm/semibold" color="text-subtle" style={styles.userPillText}>
+            {intl.string(t.R0vK0N)}
+          </Text>}
+        </Pressable>
+        {selectedUser != null ? <Pressable style={styles.clearButton} onPress={() => setSelectedUser(void 0)} accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(t["0Vb9FQ"], {
+          text: UserUtils.getName(selectedUser)
+        })}>
+          <CircleXIcon size="xs" />
+        </Pressable> : null}
+      </View>
+    </InputFieldContainer>
+  </View>;
+};

modules/checkout/native/gifting/UnifiedGiftModal.tsx

@@ -0,0 +1,43 @@
+// Metro module 8773 (f8774).
+import { useState, useCallback } from "react";
+import ModalActionCreators from "../../../../actions/ModalActionCreators";
+import { Navigator, useNavigatorScreens } from "../../../../design/components/Navigator/native/Navigator.native";
+import { UnifiedGiftModalScreens } from "./UnifiedGiftModalTypes";
+import { intl, t } from "../../../../intl/index.native";
+import { getHeaderCloseButton, getHeaderBackButton } from "../../../../design/components/Navigator/native/NavigatorHeader.native";
+import UnifiedGiftModalDetailsScreen from "./UnifiedGiftModalDetailsScreen";
+import UnifiedGiftModalRecipientSelectScreen from "./UnifiedGiftModalRecipientSelectScreen";
+import { AnalyticsLocationProvider } from "../../../app_analytics/useAnalyticsLocations";
+export default function UnifiedGiftModal(props) {
+  const { skuId: skuId2, applicationId: applicationId2, analyticsLocations, lockedRecipientUser: lockedRecipientUser2, onGiftModalDismiss: onGiftModalDismiss2, validateRecipient: validateRecipient2, renderProductDetails: renderProductDetails2, renderPurchaseSection: renderPurchaseSection2 } = props;
+  const skuId = skuId2;
+  const applicationId = applicationId2;
+  const lockedRecipientUser = lockedRecipientUser2;
+  const onGiftModalDismiss = onGiftModalDismiss2;
+  const validateRecipient = validateRecipient2;
+  const renderProductDetails = renderProductDetails2;
+  const renderPurchaseSection = renderPurchaseSection2;
+  const [state, setState] = useState(lockedRecipientUser);
+  const callback = useCallback(() => {
+    ModalActionCreators.pop();
+    if (onGiftModalDismiss != null) {
+      onGiftModalDismiss();
+    }
+  }, [onGiftModalDismiss]);
+  return <AnalyticsLocationProvider value={analyticsLocations}>
+    <Navigator initialRouteName={UnifiedGiftModalScreens.GIFT_DETAIL} screens={useNavigatorScreens(() => {
+      const r1 = {};
+      r1[UnifiedGiftModalScreens.GIFT_DETAIL] = {
+        title: intl.string(t["JCFN/y"]),
+        headerLeft: getHeaderCloseButton(callback),
+        render: () => <UnifiedGiftModalDetailsScreen skuId={skuId} applicationId={applicationId} recipientUser={state} setRecipientUser={setState} lockedRecipient={lockedRecipientUser != null} validateRecipient={validateRecipient} renderProductDetails={renderProductDetails} renderPurchaseSection={renderPurchaseSection} />
+      };
+      r1[UnifiedGiftModalScreens.RECIPENT_SELECT] = {
+        title: intl.string(t.R0vK0N),
+        headerLeft: getHeaderBackButton(),
+        render: () => <UnifiedGiftModalRecipientSelectScreen setRecipientUser={setState} />
+      };
+      return r1;
+    }, [lockedRecipientUser, state, skuId, applicationId, callback, validateRecipient, renderProductDetails, renderPurchaseSection])} />
+  </AnalyticsLocationProvider>;
+};

modules/checkout/native/gifting/UnifiedGiftModalDetailsScreen.tsx

@@ -0,0 +1,125 @@
+// Metro module 8775 (f8776).
+import * as Module19 from "react";
+import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import { ScrollView, View } from "react-native";
+import { AnalyticEvents } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
+import { UnifiedGiftModalScreens } from "./UnifiedGiftModalTypes";
+import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
+import useInitialValue from "../../../../hooks/useInitialValue";
+import { v4 } from "../../../../_bundle/Module514";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import { useGiftStyles } from "../../../premium/gifting/hooks/useGiftStyles";
+import { GiftBackgroundSelect } from "../../../premium/native/gifting/PremiumGiftBackgroundSelect";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import LockedRecipientField from "./LockedRecipientField";
+import SelectedUserField from "./SelectedUserField";
+import { GiftCustomMessage } from "../../../premium/native/gifting/PremiumGiftCustomMessage";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    paddingTop: Module712.space.PX_12,
+    alignItems: "stretch"
+  },
+  scrollView: {
+    paddingBottom: Module712.space.PX_24
+  },
+  sectionHeader: {
+    marginTop: Module712.space.PX_24,
+    marginBottom: Module712.space.PX_8,
+    paddingHorizontal: Module712.space.PX_16,
+    textTransform: "capitalize"
+  }
+});
+const r58 = Module19.memo(function({ skuId, applicationId, recipientUser, setRecipientUser, lockedRecipient, validateRecipient, renderProductDetails, renderPurchaseSection }) {
+  let analyticsLocations, load_id, memo, state, ref, state2, state3;
+  analyticsLocations = void 0;
+  load_id = void 0;
+  memo = void 0;
+  state = void 0;
+  ref = void 0;
+  state2 = void 0;
+  state3 = void 0;
+  const styles = useStyles();
+  const navigation = useNavigation();
+  const [isValidRecipient, setState] = useState(true);
+  const [state4, setState2] = useState(false);
+  const callback2 = useCallback(() => {
+    navigation.navigate(UnifiedGiftModalScreens.RECIPENT_SELECT);
+  }, [navigation]);
+  analyticsLocations = useAnalyticsLocations().analyticsLocations;
+  load_id = useInitialValue(() => v4());
+  memo = useMemo(() => ({
+    is_gift: true,
+    location_stack: analyticsLocations,
+    payment_type: "sku",
+    sku_id: skuId,
+    application_id: applicationId,
+    load_id
+  }), [analyticsLocations, skuId, applicationId, load_id]);
+  useEffect(() => {
+    setState(true);
+    if (recipientUser != null) {
+      setState2(true);
+      validateRecipient(recipientUser.id).then((result) => {
+        setState(result);
+      }).finally(() => {
+        setState2(false);
+      });
+    }
+  }, [recipientUser, skuId, validateRecipient]);
+  useEffect(() => {
+    AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_STARTED, memo);
+    AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_LOADED, {
+      ...memo,
+      initial_step: "gift_customization"
+    });
+  }, [memo]);
+  let setGiftStyle;
+  [state, setGiftStyle] = useState(useGiftStyles()[0]);
+  ref = useRef(null);
+  let setMessagePosition;
+  [state2, setMessagePosition] = useState(0);
+  let setCustomGiftMessage;
+  [state3, setCustomGiftMessage] = useState(void 0);
+  const callback = useCallback(() => {
+    setTimeout(() => {
+      const current = ref.current;
+      return current == null ? void 0 : current.scrollTo({
+        y: state2,
+        animated: true
+      });
+    }, 100);
+  }, [state2]);
+  const memo2 = useMemo(() => ({
+    gift_style: state,
+    recipient_id: recipientUser?.id,
+    custom_message: state3
+  }), [state, recipientUser, state3]);
+  return <View style={styles.container}>
+    <ScrollView ref={ref} contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}>
+      <GiftBackgroundSelect giftStyle={state} setGiftStyle={setGiftStyle} withConsistentHeight={false} />
+      <Text variant="text-sm/semibold" style={styles.sectionHeader}>
+        {intl.string(t.xFn72s)}
+      </Text>
+      {lockedRecipient && recipientUser != null ? <LockedRecipientField user={recipientUser} /> : <SelectedUserField selectedUser={recipientUser} onPress={callback2} setSelectedUser={setRecipientUser} />}
+      <Text variant="text-sm/semibold" style={styles.sectionHeader}>
+        {intl.string(t.PpoJzt)}
+      </Text>
+      {renderProductDetails({
+        recipientUser,
+        isValidRecipient
+      })}
+      <GiftCustomMessage onFocusMessage={callback} setMessagePosition={setMessagePosition} customGiftMessage={state3} setCustomGiftMessage={setCustomGiftMessage} />
+    </ScrollView>
+    {renderPurchaseSection({
+      isPurchaseDisabled: recipientUser == null || state4 || !isValidRecipient,
+      giftOptions: memo2,
+      baseAnalyticsFields: memo
+    })}
+  </View>;
+});
+export default r58;

modules/checkout/native/gifting/UnifiedGiftModalRecipientSelectScreen.tsx

@@ -0,0 +1,25 @@
+// Metro module 8812 (f8813).
+import { View } from "react-native";
+import { UserRowModes } from "../../../main_tabs_v2/native/shared_components/user_list/UserRowConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
+import SearchableUserList from "../../../main_tabs_v2/native/shared_components/user_list/SearchableUserList";
+import { UnifiedGiftModalScreens } from "./UnifiedGiftModalTypes";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    paddingTop: 16,
+    backgroundColor: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
+  }
+});
+export default function UnifiedGiftModalRecipientSelectScreen(props) {
+  const setRecipientUser = props.setRecipientUser;
+  const navigation = useNavigation();
+  return <View style={useStyles().container}>
+    <SearchableUserList onSelectUser={(event) => {
+      setRecipientUser(event);
+      navigation.navigate(UnifiedGiftModalScreens.GIFT_DETAIL);
+    }} rowMode={UserRowModes.NONE} disableGradient disableThemedGradient />
+  </View>;
+};

modules/checkout/native/gifting/UnifiedGiftModalSuccessScreen.tsx

@@ -0,0 +1,71 @@
+// Metro module 11889 (f11890).
+import { useCallback } from "react";
+import { Image as Image2 } from "react-native";
+import { UserSettingsSections } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { GIFT_STYLE_IMG } from "../../../premium/native/gifting/PremiumGiftBackgroundSelectTile";
+import { GiftingBadgeExperiment } from "../../../premium/gifting/experiments/GiftingBadgeExperiment";
+import ModalActionCreators from "../../../../actions/ModalActionCreators";
+import { openUserSettings } from "../../../user_settings/core/native/openUserSettings";
+import Alert from "../../../../components_native/common/Alert";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import { BaseTextButton } from "../../../../design/components/Button/native/BaseTextButton.native";
+const useStyles = createStyles({
+  alertContainer: {
+    paddingHorizontal: Module712.space.PX_24,
+    paddingBottom: Module712.space.PX_24,
+    alignItems: "center"
+  },
+  image: {
+    position: "relative",
+    top: -50
+  },
+  title: {
+    marginTop: -Module712.space.PX_24,
+    marginBottom: Module712.space.PX_8
+  },
+  description: {
+    marginBottom: Module712.space.PX_24
+  }
+});
+export default function UnifiedGiftModalSuccessScreen(props) {
+  const { giftStyle, giftBadgeProgress, onClose } = props;
+  const styles = useStyles();
+  const source = GIFT_STYLE_IMG[giftStyle];
+  const enabled = GiftingBadgeExperiment.useConfig({
+    location: "UnifiedGiftModalSuccessScreen"
+  }).enabled;
+  const callback2 = useCallback(() => {
+    onClose();
+    let r9 = enabled;
+    if (enabled) {
+      r9 = giftBadgeProgress != null;
+    }
+    if (r9) {
+      ModalActionCreators.pushLazy(import("../../../collectibles/native/CollectiblesShopGiftBadgePostPurchaseModal"), {
+        giftBadgeProgress
+      }, "collectibles_shop_gift_badge_modal");
+    }
+  }, [enabled, giftBadgeProgress, onClose]);
+  const callback = useCallback(() => {
+    onClose();
+    openUserSettings({
+      screen: UserSettingsSections.PREMIUM_GIFTING,
+      params: {}
+    });
+  }, [onClose]);
+  return <Alert onClose={callback2} noDefaultButtons style={styles.alertContainer}>
+    <Image2 source={source} style={styles.image} />
+    <Text variant="heading-lg/bold" style={styles.title}>
+      {intl.string(t.MqZXbv)}
+    </Text>
+    <Text variant="text-md/medium" style={styles.description}>
+      {intl.format(t.YS2J4S, {
+        onClick: callback
+      })}
+    </Text>
+    <BaseTextButton onPress={callback2} text={intl.string(enabled && giftBadgeProgress != null ? t.PDTjLN : t.cpT0Cq)} textVariant="text-md/semibold" grow />
+  </Alert>;
+};

modules/checkout/native/gifting/UnifiedGiftModalTypes.tsx

@@ -0,0 +1,6 @@
+// Metro module 8774 (f8775).
+const r8 = {
+  GIFT_DETAIL: "GiftDetail",
+  RECIPENT_SELECT: "RecipientSelect"
+};
+export { r8 as UnifiedGiftModalScreens };