Fix build errors
This commit is contained in:
Evgenij Ponomarev
parent
ee47242834
commit
40adddb432
@ -1,4 +0,0 @@
|
|||||||
.apple-pay-button {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
@ -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' } },
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -18,7 +18,7 @@ export default function StepPaywall() {
|
|||||||
}, [storedEmail]);
|
}, [storedEmail]);
|
||||||
|
|
||||||
const onNext = () => {
|
const onNext = () => {
|
||||||
steps.saveToStorage('lastPassedStep', steps.current);
|
steps.saveToStorage('lastPassedStep', steps.current as Step);
|
||||||
navigate('/palmistry/payment');
|
navigate('/palmistry/payment');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -153,10 +153,10 @@ export default function useSteps() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function goNext(choice?: Choice) {
|
function goNext(choice?: Choice) {
|
||||||
setLastPassedStep(current);
|
setLastPassedStep(current as Step);
|
||||||
|
|
||||||
if (currentNumber >= sortedList.indexOf(lastPassedStep)) {
|
if (currentNumber >= sortedList.indexOf(lastPassedStep as Step)) {
|
||||||
saveToStorage('lastPassedStep', current);
|
saveToStorage('lastPassedStep', current as Step);
|
||||||
}
|
}
|
||||||
|
|
||||||
navigate(`/palmistry/${getNextStep(choice)}`);
|
navigate(`/palmistry/${getNextStep(choice)}`);
|
||||||
@ -180,7 +180,7 @@ export default function useSteps() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function saveCurrent(value: string) {
|
function saveCurrent(value: string) {
|
||||||
saveToStorage(current, value);
|
saveToStorage(current as Step, value);
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -193,7 +193,7 @@ export default function useSteps() {
|
|||||||
defaultStep,
|
defaultStep,
|
||||||
currentNumber,
|
currentNumber,
|
||||||
isInvalid,
|
isInvalid,
|
||||||
storedValue: storedValues[current],
|
storedValue: storedValues[current as Step],
|
||||||
lastPassedStep,
|
lastPassedStep,
|
||||||
goBack,
|
goBack,
|
||||||
goNext,
|
goNext,
|
||||||
|
|||||||
@ -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,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user