gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix build errors

Browse Source
This commit is contained in:
Evgenij Ponomarev 2024-03-11 02:19:05 +07:00
parent ee47242834
commit 40adddb432
6 changed files with 6 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/palmistry/apple-pay-button/apple-pay-button.css
View File

@ -1,4 +0,0 @@
.apple-pay-button {
width: 100%;
margin-bottom: 10px;
}

88
src/components/palmistry/apple-pay-button/apple-pay-button.tsx
View File

@ -1,88 +0,0 @@
import './apple-pay-button.css';
import React from 'react';
import {
PaymentRequestButtonElement,
useStripe,
useElements,
} from '@stripe/react-stripe-js';
import { PaymentRequest } from '@stripe/stripe-js';
import { SubscriptionPlan } from '../../../hooks/palmistry/use-subscription-plans';
type Props = {
subscriptionPlan: SubscriptionPlan | null;
paymentResultUrl: string;
clientSecret: string;
subscriptionReceiptId?: string;
}
const redirectDelay = 3000;
export default function ApplePayButton(props: Props) {
const stripe = useStripe();
const elements = useElements();
const [paymentRequest, setPaymentRequest] = React.useState<PaymentRequest | null>(null);
React.useEffect(() => {
if (!stripe || !elements || !props.subscriptionPlan) return;
const pr = stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Subscription',
amount: props.subscriptionPlan.trial.price_cents,
},
requestPayerName: true,
requestPayerEmail: true,
});
pr.canMakePayment().then((result) => {
if (result) setPaymentRequest(pr);
});
pr.on('paymentmethod', async (e) => {
const { error: stripeError } = await stripe.confirmCardPayment(
props.clientSecret,
{ payment_method: e.paymentMethod.id },
{ handleActions: false },
);
if (stripeError) {
e.complete('fail');
setTimeout(() => {
document.location.href = `${props.paymentResultUrl}/?redirect_status=failed`;
}, redirectDelay);
return;
}
e.complete('success');
setTimeout(() => {
document.location.href = `${props.paymentResultUrl}/?redirect_status=succeeded`;
}, redirectDelay);
});
}, [
props.subscriptionPlan,
props.clientSecret,
elements,
stripe,
props.subscriptionReceiptId,
props.paymentResultUrl,
]);
if (!paymentRequest) return null;
return (
<PaymentRequestButtonElement
className="apple-pay-button"
options={{
paymentRequest,
style: { paymentRequestButton: { height: '60px' } },
}}
/>
);
}

80
src/components/palmistry/payment-widget/payment-widget.tsx
View File

@ -1,80 +0,0 @@
import React from 'react';
import { Stripe, StripeError, loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';
import { SubscriptionPlanId, SubscriptionPlan } from '../../../hooks/palmistry/use-subscription-plans';
import ApplePayButton from '../apple-pay-button/apple-pay-button';
import StipeForm from '../stripe-form/stripe-form';
import Loader from '../loader/loader';
import AlertModal from '../alert-modal/alert-modal';
type Props = {
subscriptionPlanId: SubscriptionPlanId;
storedSubscriptionPlan: SubscriptionPlan | null;
};
export default function PaymentWidget(props: Props) {
const [stripePromise, setStripePromise] = React.useState<Promise<Stripe | null> | null>(null);
const [subscriptionReceiptId, setSubscriptionReceiptId] = React.useState<string | null>(null);
const [clientSecret, setClientSecret] = React.useState<string | undefined>(undefined);
const [isProcessing, setIsProcessing] = React.useState(true);
const [errorMessage, setErrorMessage] = React.useState<string>('');
const initStripe = async () => {
// const siteConfig = await getAppsAuraweb();
// setStripePromise(loadStripe(siteConfig.data.stripe_public_key));
};
React.useEffect(() => {
const getSubscriptionReceipt = async () => {
try {
// const { subscription_receipt } = await postSubscriptionReceipts(props.subscriptionPlanId, 'stripe');
// setSubscriptionReceiptId(subscription_receipt.id);
// setClientSecret(subscription_receipt.data.client_secret);
} catch (error) {
console.error(error);
}
};
Promise.all([initStripe(), getSubscriptionReceipt()]).then(() => setIsProcessing(false));
}, [props.subscriptionPlanId]);
const stripeElementsOptions = React.useMemo(() => ({ clientSecret }), [clientSecret]);
const paymentResultUrl = `https://aura.witapps.us/payment/result/${subscriptionReceiptId}/`;
return (
<div className="payment-widget">
{subscriptionReceiptId && stripePromise && clientSecret && (
<Elements stripe={stripePromise} options={stripeElementsOptions}>
<ApplePayButton
subscriptionPlan={props.storedSubscriptionPlan}
paymentResultUrl={paymentResultUrl}
clientSecret={clientSecret}
subscriptionReceiptId={subscriptionReceiptId}
/>
<StipeForm
isProcessing={isProcessing}
subscriptionReceiptId={subscriptionReceiptId}
paymentResultUrl={paymentResultUrl}
onSubmit={() => setIsProcessing(true)}
onSuccess={() => {
setIsProcessing(false);
document.location.href = 'https://aura.witapps.us/payment/success/';
}}
onError={(error: StripeError) => {
setIsProcessing(false);
console.error(error);
setErrorMessage(error.message || 'An error occurred. Please try again.');
}}
/>
</Elements>
)}
{isProcessing && <Loader transparent fixed/>}
{errorMessage && (
<AlertModal onClose={() => setErrorMessage('')} title="Error">{errorMessage}</AlertModal>
)}
</div>
);
}

2
src/components/palmistry/step-paywall/step-paywall.tsx
View File

@ -18,7 +18,7 @@ export default function StepPaywall() {
}, [storedEmail]);
const onNext = () => {
steps.saveToStorage('lastPassedStep', steps.current);
steps.saveToStorage('lastPassedStep', steps.current as Step);
navigate('/palmistry/payment');
};

10
src/hooks/palmistry/use-steps.ts
View File

@ -153,10 +153,10 @@ export default function useSteps() {
}
function goNext(choice?: Choice) {
setLastPassedStep(current);
setLastPassedStep(current as Step);
if (currentNumber >= sortedList.indexOf(lastPassedStep)) {
saveToStorage('lastPassedStep', current);
if (currentNumber >= sortedList.indexOf(lastPassedStep as Step)) {
saveToStorage('lastPassedStep', current as Step);
}
navigate(`/palmistry/${getNextStep(choice)}`);
@ -180,7 +180,7 @@ export default function useSteps() {
}
function saveCurrent(value: string) {
saveToStorage(current, value);
saveToStorage(current as Step, value);
}
return {
@ -193,7 +193,7 @@ export default function useSteps() {
defaultStep,
currentNumber,
isInvalid,
storedValue: storedValues[current],
storedValue: storedValues[current as Step],
lastPassedStep,
goBack,
goNext,

80
src/hooks/palmistry/use-subscription-plans.ts
View File

@ -1,80 +0,0 @@
import React from 'react';
import { useTranslation } from "react-i18next";
import useSteps, { Step } from '@/hooks/palmistry/use-steps';
import { useApi } from "@/api";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
export enum SubscriptionPlanId {
// for test
// Stripe28 = 'stripe.28',
// Stripe29 = 'stripe.29',
// Stripe30 = 'stripe.30',
// Stripe31 = 'stripe.31',
// for prod
Stripe12 = 'stripe.12',
Stripe13 = 'stripe.13',
Stripe14 = 'stripe.14',
Stripe15 = 'stripe.15',
}
export type SubscriptionPlan = {
id: string;
trial: {
price_cents: number;
};
formattedPrice: string;
price_cents: number;
};
const subscriptionPlanIds = Object.values(SubscriptionPlanId);
const bestPlanId = [...subscriptionPlanIds].reverse()[0];
function formatPrice(cents: number) {
return (cents / 100).toFixed(2);
}
export default function useSubscriptionPlans() {
const steps = useSteps();
const api = useApi();
const { t, i18n } = useTranslation();
const locale = i18n.language;
const [subscriptionPlans, setSubscriptionPlans] = React.useState<Array<ISubscriptionPlan | {
ISubscriptionPlan: string;
}>>([]);
const storedSubscriptionPlanId = steps.getStoredValue(Step.SubscriptionPlan) as SubscriptionPlanId;
const fillSubscriptionPlans = async () => {
const { sub_plans } = await api.getSubscriptionPlans({ locale });
setSubscriptionPlans(subscriptionPlanIds
.map((id) => {
const plan = sub_plans.find((p: ISubscriptionPlan) => p.id === id) as ISubscriptionPlan;
if (!plan) {
return null;
}
return {
...plan,
formattedPrice: formatPrice(plan.trial.price_cents),
};
}),
);
};
React.useEffect(() => {
fillSubscriptionPlans();
}, []);
return {
subscriptionPlans,
bestPlanId,
storedSubscriptionPlanId,
storedSubscriptionPlan: subscriptionPlans.find((p) => p.id === storedSubscriptionPlanId) || null,
};
}