341 lines
13 KiB
TypeScript
341 lines
13 KiB
TypeScript
// Metro module 8707 (f8708).
|
|
import { useContext, useState, useCallback, useEffect } from "react";
|
|
import { Pressable, View } from "react-native";
|
|
import AuthenticationStore from "../../../stores/AuthenticationStore";
|
|
import UserStore from "../../../stores/UserStore";
|
|
import { ShopCtaEnum } from "../CollectiblesShopConstants";
|
|
import { ThemeTypes } from "../../../_bundle/Module505";
|
|
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
|
|
import ReanimatedRexport, { useSharedValue, useAnimatedStyle, Easing } from "../../reanimated/ReanimatedRexport";
|
|
import { SMALL_BUTTON_HEIGHT, MEDIUM_BUTTON_HEIGHT } from "../../../design/components/Button/native/ButtonConstants.native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useThemeContext, setColorOpacity } from "../../../_bundle/Module3901";
|
|
import { ICON_SIZE } from "../../../design/components/Icon/IconSize";
|
|
import * as _shared from "../../../design/shared";
|
|
import { AccessibilityPreferencesContext } from "../../../_bundle/Module3908";
|
|
import ToastActionCreators from "../../toast/native/ToastActionCreators";
|
|
import * as _index_native from "../../../intl/index.native";
|
|
import { intl } from "../../../intl/index.native";
|
|
import { withTiming } from "../../../design/animation/reanimated/timing/timing";
|
|
import * as _spring from "../../../design/animation/reanimated/spring/spring";
|
|
import * as _springPresets from "../../../design/animation/reanimated/spring/springPresets";
|
|
import { HeartOutlineIcon } from "../../../design/components/Icon/native/redesign/generated/HeartOutlineIcon";
|
|
import { HeartIcon } from "../../../design/components/Icon/native/redesign/generated/HeartIcon";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import useWishlistNUXActionSheet from "./useWishlistNUXActionSheet";
|
|
import { useWishlistButtonState } from "../hooks/useWishlistButtonState";
|
|
import { useProductPurchaseState } from "../hooks/useProductPurchaseState";
|
|
import * as _CollectiblesWishlistUtils from "../../wishlists/CollectiblesWishlistUtils";
|
|
import { HermesBuiltin } from "../../../_hermes/prelude";
|
|
let c5676_14, c5676_15, c5676_16, useStyles, __initData, __initData2, __initData3, __initData4, WishlistButton;
|
|
const WishlistButtonBase = function WishlistButtonBase(props) {
|
|
const { isWishlisted, onPress, busy, disabled, accessibilityLabel, accessibilityHidden = false, style: style2, size = "sm", onTrackPress } = props;
|
|
const styles = useStyles(size);
|
|
const width = ICON_SIZE[c5676_16[size]];
|
|
const theme = useThemeContext().theme;
|
|
const isThemeLight = _shared.isThemeLight(theme);
|
|
let c16736_7 = theme === ThemeTypes.MIDNIGHT;
|
|
const light = isThemeLight ? styles.light : styles.dark;
|
|
const lightPressed = isThemeLight ? styles.lightPressed : styles.darkPressed;
|
|
const enabled = useContext(AccessibilityPreferencesContext).reducedMotion.enabled;
|
|
const [state, setState] = useState(false);
|
|
const state2 = isWishlisted ? isWishlisted : state;
|
|
const sharedValue = useSharedValue(isWishlisted ? 1 : 0);
|
|
const callback = useCallback(() => {
|
|
if (disabled) {
|
|
ToastActionCreators.open({
|
|
key: "WISHLIST_DISABLED",
|
|
content: intl.string(_index_native.t["50TX9k"])
|
|
});
|
|
} else if (!busy) {
|
|
if (onTrackPress != null) {
|
|
onTrackPress(isWishlisted ? ShopCtaEnum.REMOVE_FROM_WISHLIST : ShopCtaEnum.ADD_TO_WISHLIST);
|
|
}
|
|
let r15 = isWishlisted;
|
|
if (!isWishlisted && !enabled) {
|
|
setState(true);
|
|
} else {
|
|
if (isWishlisted) {
|
|
r15 = state;
|
|
}
|
|
if (r15) {
|
|
setState(false);
|
|
}
|
|
}
|
|
if (onPress != null) {
|
|
onPress();
|
|
}
|
|
}
|
|
}, [disabled, busy, onPress, isWishlisted, enabled, state, onTrackPress]);
|
|
useEffect(() => {
|
|
if (!state) {
|
|
sharedValue.set(isWishlisted ? 1 : 0);
|
|
}
|
|
}, [isWishlisted, state, sharedValue]);
|
|
useEffect(() => {
|
|
if (state) {
|
|
sharedValue.set(0);
|
|
let c26273_0 = requestAnimationFrame(() => {
|
|
const t = function t(a0) {
|
|
if (a0) {
|
|
_ReanimatedRexport.runOnJS(setState)(false);
|
|
}
|
|
};
|
|
t.__closure = {
|
|
runOnJS: _ReanimatedRexport.runOnJS,
|
|
setIsClickAnimating: setState
|
|
};
|
|
t.__workletHash = 13061953734403;
|
|
t.__initData = __initData;
|
|
sharedValue.set(withTiming(1, c5676_14, "animate-always", t));
|
|
});
|
|
return () => cancelAnimationFrame(c26273_0);
|
|
}
|
|
}, [state, sharedValue]);
|
|
const J = () => {
|
|
let r0 = 1;
|
|
const r4 = {
|
|
...styles.animationFill,
|
|
opacity: _spring.withSpring(state2 ? 0 : 1, _springPresets.SUBTLE_SPRING, "animate-always")
|
|
};
|
|
if (state2) {
|
|
r0 = 0.9;
|
|
}
|
|
r4.transform = [{
|
|
scale: _spring.withSpring(r0, _springPresets.SUBTLE_SPRING, "animate-always")
|
|
}];
|
|
return r4;
|
|
};
|
|
J.__closure = {
|
|
styles,
|
|
withSpring: _spring.withSpring,
|
|
showFilled: state2,
|
|
SUBTLE_SPRING: _springPresets.SUBTLE_SPRING
|
|
};
|
|
J.__workletHash = 1357254413161;
|
|
J.__initData = __initData2;
|
|
const animatedStyle = useAnimatedStyle(J);
|
|
const Y = function Y() {
|
|
const r10 = sharedValue.get();
|
|
return {
|
|
...styles.animationFill,
|
|
opacity: _spring.withSpring(state2 ? 1 : 0, _springPresets.SUBTLE_SPRING, "animate-always"),
|
|
transform: [{
|
|
scale: _ReanimatedRexport.interpolate(r10, [0, 0.625, 1], [0, 1.35, 1], _ReanimatedRexport.Extrapolation.CLAMP)
|
|
}]
|
|
};
|
|
};
|
|
Y.__closure = {
|
|
animationFillProgress: sharedValue,
|
|
styles,
|
|
withSpring: _spring.withSpring,
|
|
showFilled: state2,
|
|
SUBTLE_SPRING: _springPresets.SUBTLE_SPRING,
|
|
interpolate: _ReanimatedRexport.interpolate,
|
|
Extrapolation: _ReanimatedRexport.Extrapolation
|
|
};
|
|
Y.__workletHash = 15039903885060;
|
|
Y.__initData = __initData3;
|
|
const animatedStyle2 = useAnimatedStyle(Y);
|
|
const K = function K() {
|
|
const r8 = sharedValue.get();
|
|
return {
|
|
...styles.animationFill,
|
|
opacity: state2 ? _ReanimatedRexport.interpolate(r8, [0, 0.7], [1, 0], _ReanimatedRexport.Extrapolation.CLAMP) : 0,
|
|
transform: [{
|
|
scale: _ReanimatedRexport.interpolate(r8, [0, 0.625, 1], [0, 1.35, 1], _ReanimatedRexport.Extrapolation.CLAMP)
|
|
}]
|
|
};
|
|
};
|
|
K.__closure = {
|
|
animationFillProgress: sharedValue,
|
|
styles,
|
|
showFilled: state2,
|
|
interpolate: _ReanimatedRexport.interpolate,
|
|
Extrapolation: _ReanimatedRexport.Extrapolation
|
|
};
|
|
K.__workletHash = 12429379889426;
|
|
K.__initData = __initData4;
|
|
return <Pressable style={({ pressed }) => {
|
|
const r6 = [styles.button, light, c16736_7 && styles.midnight, , , ,];
|
|
if (pressed) {
|
|
pressed = !disabled;
|
|
}
|
|
if (pressed) {
|
|
pressed = lightPressed;
|
|
}
|
|
r6[3] = pressed;
|
|
let r10 = disabled;
|
|
if (disabled) {
|
|
r10 = styles.disabled;
|
|
}
|
|
r6[4] = r10;
|
|
r6[5] = style2;
|
|
return r6;
|
|
}} onPress={callback} accessibilityRole={accessibilityHidden ? "none" : "togglebutton"} accessibilityLabel={accessibilityHidden ? void 0 : accessibilityLabel} accessibilityState={accessibilityHidden ? void 0 : {
|
|
checked: isWishlisted,
|
|
busy,
|
|
disabled
|
|
}} accessibilityElementsHidden={accessibilityHidden} importantForAccessibility={accessibilityHidden ? "no-hide-descendants" : "auto"}>
|
|
<View style={[styles.iconContainer, {
|
|
width,
|
|
height: width
|
|
}]}>
|
|
<ReanimatedRexport.View style={animatedStyle} pointerEvents="none">
|
|
<HeartOutlineIcon size={c5676_16[size]} color={Module712.colors.INTERACTIVE_ICON_DEFAULT} />
|
|
</ReanimatedRexport.View>
|
|
<ReanimatedRexport.View style={animatedStyle2} pointerEvents="none">
|
|
<HeartIcon size={c5676_16[size]} color={Module712.unsafe_rawColors.RED_NEW_50} />
|
|
</ReanimatedRexport.View>
|
|
<ReanimatedRexport.View style={useAnimatedStyle(K)} pointerEvents="none">
|
|
<HeartIcon size={c5676_16[size]} color="white" />
|
|
</ReanimatedRexport.View>
|
|
</View>
|
|
</Pressable>;
|
|
};
|
|
WishlistButton = function WishlistButton(props) {
|
|
let shouldShowWishlistNUXActionSheet, showWishlistNUXActionSheet, content, isWishlisted2, handleToggle;
|
|
const { skuId, product, onPress: onPress2, onTrackPress: onTrackPress2 } = props;
|
|
const r23 = {};
|
|
let r2 = null;
|
|
const props2 = HermesBuiltin.copyDataProperties(r23, props, {
|
|
__proto__: null,
|
|
skuId: 0,
|
|
product: 0,
|
|
onPress: 0,
|
|
onTrackPress: 0
|
|
});
|
|
shouldShowWishlistNUXActionSheet = void 0;
|
|
showWishlistNUXActionSheet = void 0;
|
|
content = void 0;
|
|
isWishlisted2 = void 0;
|
|
handleToggle = void 0;
|
|
const stateFromStores = useStateFromStores([AuthenticationStore], () => AuthenticationStore.getId());
|
|
const stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
|
|
const wishlistNUXActionSheet = useWishlistNUXActionSheet();
|
|
shouldShowWishlistNUXActionSheet = wishlistNUXActionSheet.shouldShowWishlistNUXActionSheet;
|
|
showWishlistNUXActionSheet = wishlistNUXActionSheet.showWishlistNUXActionSheet;
|
|
const accessibilityLabel = intl.formatToPlainString(_index_native.t["7kFjeK"], {
|
|
productName: product.name
|
|
});
|
|
const callback = useCallback(() => {
|
|
if (shouldShowWishlistNUXActionSheet) {
|
|
showWishlistNUXActionSheet(product);
|
|
}
|
|
}, [shouldShowWishlistNUXActionSheet, showWishlistNUXActionSheet, product]);
|
|
content = intl.string(_index_native.t.F8FvUy);
|
|
const wishlistButtonState = useWishlistButtonState({
|
|
userId: stateFromStores,
|
|
skuId,
|
|
onAddSuccess: callback,
|
|
onError: useCallback(() => {
|
|
ToastActionCreators.open({
|
|
key: "WISHLIST_ERROR",
|
|
content
|
|
});
|
|
}, [content]),
|
|
skipAddAnnouncement: shouldShowWishlistNUXActionSheet
|
|
});
|
|
isWishlisted2 = wishlistButtonState.isWishlisted;
|
|
const isBusy = wishlistButtonState.isBusy;
|
|
handleToggle = wishlistButtonState.handleToggle;
|
|
const callback2 = useCallback(async () => {
|
|
if (onTrackPress2 != null) {
|
|
onTrackPress2(isWishlisted2 ? ShopCtaEnum.REMOVE_FROM_WISHLIST : ShopCtaEnum.ADD_TO_WISHLIST);
|
|
}
|
|
if (onPress2 != null) {
|
|
onPress2();
|
|
}
|
|
await handleToggle();
|
|
}, [onPress2, onTrackPress2, isWishlisted2, handleToggle]);
|
|
if (stateFromStores2 != null) {
|
|
r2 = <WishlistButtonBase isWishlisted={isWishlisted2} onPress={callback2} busy={isBusy} accessibilityLabel={accessibilityLabel} {...props2} />;
|
|
}
|
|
return r2;
|
|
};
|
|
c5676_14 = {
|
|
duration: 400,
|
|
easing: Easing.bezier(0.67, 0, 0.26, 1)
|
|
};
|
|
c5676_15 = {
|
|
sm: SMALL_BUTTON_HEIGHT,
|
|
md: MEDIUM_BUTTON_HEIGHT
|
|
};
|
|
c5676_16 = {
|
|
sm: "sm",
|
|
md: "md"
|
|
};
|
|
useStyles = createStyles((a0) => ({
|
|
button: {
|
|
width: c5676_15[a0],
|
|
height: c5676_15[a0],
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderRadius: Module712.radii.round,
|
|
borderWidth: 1,
|
|
borderColor: Module712.colors.CONTROL_SECONDARY_BORDER_DEFAULT
|
|
},
|
|
light: {
|
|
backgroundColor: setColorOpacity("white", 0.72)
|
|
},
|
|
lightPressed: {
|
|
backgroundColor: setColorOpacity("white", 0.62)
|
|
},
|
|
dark: {
|
|
backgroundColor: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_DEFAULT
|
|
},
|
|
darkPressed: {
|
|
backgroundColor: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_ACTIVE
|
|
},
|
|
midnight: {
|
|
borderColor: Module712.colors.BORDER_STRONG
|
|
},
|
|
disabled: {
|
|
opacity: 0.5
|
|
},
|
|
iconContainer: {
|
|
position: "relative",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
animationFill: {
|
|
position: "absolute",
|
|
inset: 0,
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
}
|
|
}));
|
|
__initData = {
|
|
code: "function WishlistButtonTsx1(done){const{runOnJS,setIsClickAnimating}=this.__closure;if(done){runOnJS(setIsClickAnimating)(false);}}"
|
|
};
|
|
__initData2 = {
|
|
code: "function WishlistButtonTsx2(){const{styles,withSpring,showFilled,SUBTLE_SPRING}=this.__closure;return{...styles.animationFill,opacity:withSpring(showFilled?0:1,SUBTLE_SPRING,'animate-always'),transform:[{scale:withSpring(showFilled?0.9:1,SUBTLE_SPRING,'animate-always')}]};}"
|
|
};
|
|
__initData3 = {
|
|
code: "function WishlistButtonTsx3(){const{animationFillProgress,styles,withSpring,showFilled,SUBTLE_SPRING,interpolate,Extrapolation}=this.__closure;const progress=animationFillProgress.get();return{...styles.animationFill,opacity:withSpring(showFilled?1:0,SUBTLE_SPRING,'animate-always'),transform:[{scale:interpolate(progress,[0,0.625,1],[0,1.35,1],Extrapolation.CLAMP)}]};}"
|
|
};
|
|
__initData4 = {
|
|
code: "function WishlistButtonTsx4(){const{animationFillProgress,styles,showFilled,interpolate,Extrapolation}=this.__closure;const progress=animationFillProgress.get();return{...styles.animationFill,opacity:showFilled?interpolate(progress,[0,0.7],[1,0],Extrapolation.CLAMP):0,transform:[{scale:interpolate(progress,[0,0.625,1],[0,1.35,1],Extrapolation.CLAMP)}]};}"
|
|
};
|
|
export default function CollectiblesWishlistButton(props) {
|
|
const { selectedProduct, onTrackPress: onTrackPress3 } = props;
|
|
const r14 = {};
|
|
let r2 = null;
|
|
const props2 = HermesBuiltin.copyDataProperties(r14, props, {
|
|
__proto__: null,
|
|
selectedProduct: 0,
|
|
onTrackPress: 0
|
|
});
|
|
const skuId = selectedProduct.skuId;
|
|
const isPurchased = useProductPurchaseState(selectedProduct).isPurchased;
|
|
const isWishlistableCollectiblesProduct = _CollectiblesWishlistUtils.isWishlistableCollectiblesProduct(selectedProduct);
|
|
if (!isPurchased) {
|
|
r2 = <WishlistButton skuId={skuId} product={selectedProduct} disabled={!isWishlistableCollectiblesProduct} onTrackPress={onTrackPress3} {...props2} />;
|
|
}
|
|
return r2;
|
|
};
|
|
export { WishlistButtonBase };
|
|
export { WishlistButton };
|