tanshu/kakawa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Build errors

Browse Source
This commit is contained in:
Amritanshu Agrawal 2025-02-17 08:06:35 +00:00
parent 058d60a86e
commit 43d16cfeca
2 changed files with 1 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/app/(storefront)/checkout/payment/stripe.tsx
View File

@ -1,101 +0,0 @@
'use client'; // include with Next.js 13+
import { CardElement, Elements, useElements, useStripe } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import { useState } from 'react';
import { useCart } from '../../providers/cart';
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK || 'temp');
export default function StripePayment() {
const { cart } = useCart();
const clientSecret = cart?.payment_collection?.payment_sessions?.[0].data.client_secret as string;
return (
<div>
<Elements
stripe={stripePromise}
options={{
clientSecret,
}}
>
<StripeForm clientSecret={clientSecret} />
</Elements>
</div>
);
}
const StripeForm = ({ clientSecret }: { clientSecret: string | undefined }) => {
const { cart, refreshCart } = useCart();
const [loading, setLoading] = useState(false);
const stripe = useStripe();
const elements = useElements();
async function handlePayment(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
e.preventDefault();
const card = elements?.getElement(CardElement);
if (!stripe || !elements || !card || !cart || !clientSecret) {
return;
}
setLoading(true);
stripe
?.confirmCardPayment(clientSecret, {
payment_method: {
card,
billing_details: {
name: cart.billing_address?.first_name,
email: cart.email,
phone: cart.billing_address?.phone,
address: {
city: cart.billing_address?.city,
country: cart.billing_address?.country_code,
line1: cart.billing_address?.address_1,
line2: cart.billing_address?.address_2,
postal_code: cart.billing_address?.postal_code,
},
},
},
})
.then(({ error }) => {
if (error) {
// TODO handle errors
console.error(error);
return;
}
fetch(`http://localhost:9000/store/carts/${cart.id}/complete`, {
credentials: 'include',
headers: {
'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || 'temp',
},
method: 'POST',
})
.then((res) => res.json())
.then(({ type, cart, order, error }) => {
if (type === 'cart' && cart) {
// an error occured
console.error(error);
} else if (type === 'order' && order) {
// TODO redirect to order success page
alert('Order placed.');
console.log(order);
refreshCart();
}
});
})
.finally(() => setLoading(false));
}
return (
<form>
<CardElement />
<button onClick={handlePayment} disabled={loading}>
Place Order
</button>
</form>
);
};

2
src/hooks/useInView.tsx
View File

@ -7,7 +7,7 @@ interface UseInViewOptions extends IntersectionObserverInit {
triggerOnce?: boolean; triggerOnce?: boolean;
} }
const useInView = (options: UseInViewOptions): [RefObject<HTMLImageElement>, boolean] => { const useInView = (options: UseInViewOptions): [RefObject<HTMLImageElement | null>, boolean] => {
const [isInView, setIsInView] = useState<boolean>(false); const [isInView, setIsInView] = useState<boolean>(false);
const elementRef = useRef<HTMLImageElement>(null); const elementRef = useRef<HTMLImageElement>(null);
const observerManager = useSharedIntersectionObserver(options); const observerManager = useSharedIntersectionObserver(options);