fix billing

src/components/Assets.jsx

@@ -207,19 +207,11 @@ const Assets = ({ onProBtnClick, onLoginBtnClick }) => {
 			<VStack align="stretch" gap={2}>
 				<p>Assets feature is available in PRO plan.</p>
 				<button
-					class="btn  btn--primary"
+					class="btn  btn--pro"
 					onClick={window.user ? onProBtnClick : onLoginBtnClick}
 				>
 					<HStack gap={1} fullWidth justify="center">
-						{window.user ? (
+						{window.user ? <>Upgrade to PRO</> : <>Login & upgrade to PRO</>}
-							<>
-								Upgrade to <ProBadge />
-							</>
-						) : (
-							<>
-								Login & upgrade to <ProBadge />
-							</>
-						)}
 					</HStack>
 				</button>
 			</VStack>

src/components/Pro.jsx

@@ -11,7 +11,8 @@ import { showConfetti } from '../utils';
 
 const checkoutIds = {
 	monthly: '1601bc00-9623-435b-b1de-2a70a2445c13',
-	annual: 'aae95d78-05c8-46f5-b11e-2d40ddd211d3'
+	annual: 'aae95d78-05c8-46f5-b11e-2d40ddd211d3',
+	generic: 'f8c64e50-7734-438b-a122-3510156f14ed'
 };
 export function Pro({ user }) {
 	const hasCheckoutLoaded = useCheckout();
@@ -38,7 +39,7 @@ export function Pro({ user }) {
 	}, [hasCheckoutLoaded]);
 	return (
 		<VStack gap={2} align="stretch">
-			<Stack justify="center">
+			{/* <Stack justify="center">
 				<Switch
 					labels={['Monthly', 'Annually']}
 					checked={isAnnual}
@@ -47,7 +48,7 @@ export function Pro({ user }) {
 						setIsAnnual(e.target.checked);
 					}}
 				/>
-			</Stack>
+			</Stack> */}
 			<Stack gap={2} align="stretch">
 				<Card
 					price="Free"
@@ -60,17 +61,15 @@ export function Pro({ user }) {
 				/>
 				<Card
 					bg="#674dad"
-					price={!isAnnual ? '$8/mo' : '$65/yr'}
+					price={'Starting $6/mo'}
 					name="Pro"
 					action={
 						<A
-							class="btn btn--primary lemonsqueezy-button d-f jc-c ai-c"
+							class="btn btn--pro lemonsqueezy-button d-f jc-c ai-c"
 							style="gap:0.2rem"
-							href={`https://web-maker.lemonsqueezy.com/checkout/buy/${
+							href={`https://web-maker.lemonsqueezy.com/checkout/buy/${checkoutIds.generic}?embed=1&checkout[custom][userId]=${user?.uid}`}
-								checkoutIds[isAnnual ? 'annual' : 'monthly']
-							}?embed=1&checkout[custom][userId]=${user?.uid}`}
 						>
-							Go <ProBadge />
+							Go PRO
 						</A>
 					}
 					features={[

src/components/Profile.jsx

@@ -53,7 +53,11 @@ export function Profile({ user, logoutBtnHandler }) {
 				setIsFetchingSubscription(false);
 
 				const creationEvent = events
-					.filter(event => event.type === 'subscription_created')
+					.filter(
+						event =>
+							event.type === 'subscription_created' ||
+							event.type === 'order_created'
+					)
 					.sort((a, b) => b.timestamp.seconds - a.timestamp.seconds)[0];
 				if (creationEvent) {
 					console.log(creationEvent);
@@ -69,7 +73,7 @@ export function Profile({ user, logoutBtnHandler }) {
 			{window.user?.isPro && (
 				<Panel>
 					{isFetchingSubscription ? (
-						<LoaderWithText>Loading subscription details...</LoaderWithText>
+						<LoaderWithText>Loading billing details...</LoaderWithText>
 					) : null}
 					{currentSubscription ? (
 						<VStack align="stretch" gap={1}>
@@ -77,31 +81,39 @@ export function Profile({ user, logoutBtnHandler }) {
 								Plan:
 								<Text weight="700">
 									{' '}
-									{currentSubscription.attributes.product_name}
+									Web Maker PRO (
+									{currentSubscription.attributes.first_order_item.variant_name}
+									)
 								</Text>
 							</Text>
 							<Text>
 								Subscription Status:{' '}
 								<Text weight="700">
-									{currentSubscription.attributes.status}
+									{currentSubscription.attributes.status === 'paid'
+										? 'PRO for life ❤️'
+										: currentSubscription.attributes.status}
 								</Text>
 							</Text>
 
 							<Text>
 								Renews on:{' '}
 								<Text weight="700">
-									{getHumanReadableDate(
+									{currentSubscription.attributes.status === 'paid'
+										? 'Never ever'
+										: getHumanReadableDate(
 												currentSubscription.attributes.renews_at
 										  )}
 								</Text>
 							</Text>
 
+							{currentSubscription.attributes.status === 'paid' ? null : (
 								<a
 									target="_blank"
 									href={currentSubscription.attributes.urls.customer_portal}
 								>
 									Cancel subscription
 								</a>
+							)}
 							{/* <a
 							target="_blank"
 							href={

src/style.css

@@ -478,6 +478,31 @@ a > svg {
 	margin-right: 12px;
 }
 
+@property --angle {
+	syntax: '<angle>';
+	initial-value: 0deg;
+	inherits: false;
+}
+.btn--pro {
+	background: linear-gradient(
+		var(--angle),
+		var(--color-pro-1),
+		var(--color-pro-2)
+	);
+	color: #222;
+	border: 0;
+	font-weight: 700;
+	animation: gradient_move 3s ease infinite;
+}
+@keyframes gradient_move {
+	from {
+		--angle: 0deg;
+	}
+	to {
+		--angle: 360deg;
+	}
+}
+
 .btn-loader {
 	display: none;
 }
@@ -2228,7 +2253,7 @@ while the theme CSS file is loading */
 	padding: 0.1rem 0.3rem;
 	background: crimson;
 	border-radius: 1rem;
-	font-size: 0.7em;
+	font-size: 0.75em;
 	color: #222;
 	font-weight: 800;
 	line-height: 1;