import { useEffect, useState } from 'preact/hooks';
import { ProBadge } from './ProBadge';
import { HStack, Stack, VStack } from './Stack';
import Switch from './Switch';
import { alertsService } from '../notifications';
import { A, Button } from './common';
import { useCheckout } from '../hooks/useCheckout';
import { Text } from './Text';
import { Icon } from './Icons';
import { showConfetti } from '../utils';
import { trackEvent } from '../analytics';
const checkoutIds = {
monthly: '1601bc00-9623-435b-b1de-2a70a2445c13',
annual: 'aae95d78-05c8-46f5-b11e-2d40ddd211d3',
generic: 'd1d2da1a-ae8f-4222-bbaf-6e07da8954bf' //'f8c64e50-7734-438b-a122-3510156f14ed'
};
export function Pro({ user, onLoginClick, onBuyFromExtensionClick }) {
const hasCheckoutLoaded = useCheckout();
const [isAnnual, setIsAnnual] = useState(true);
useEffect(() => {
if (hasCheckoutLoaded) {
window.LemonSqueezy.Setup({
eventHandler: e => {
console.log('eventHandler', e);
if (e.event === 'Checkout.Success') {
showConfetti(2);
alertsService.add(
'You are now PRO! 🎉. Reloading your superpowers...'
);
setTimeout(() => {
window.location.reload();
}, 2000);
}
}
});
window.LemonSqueezy.Refresh();
}
}, [hasCheckoutLoaded]);
let upgradeActionEl;
if (window.IS_EXTENSION) {
upgradeActionEl = (
);
} else if (window.user) {
upgradeActionEl = (
{
trackEvent('ui', 'buyBtnClick');
}}
>
Go PRO
);
} else {
upgradeActionEl = (
);
}
return (
{/*
{
setIsAnnual(e.target.checked);
}}
/>
*/}
30 days refund policy if not satisfied.
);
}
const Card = ({ bg, name, price, subTitle, action, features }) => {
return (
{name}
{/*
{price}
{subTitle}
*/}
{action}
{!action && (
s
)}
{features.map(f => (
{f}
))}
);
};