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

AW-45-deletePayPal

Browse Source
This commit is contained in:
Денис Катаев 2024-04-24 14:53:38 +00:00 committed by Daniil Chemerkin
parent 73d34b7bfd
commit 38e1779cf6
14 changed files with 51 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/api/resources/UserSubscriptionReceipts.ts
View File

@ -19,17 +19,9 @@ export interface StripeReceiptPayload extends AuthPayload {
};
}
export interface PayPalReceiptPayload extends AuthPayload {
subscription_receipt: {
sub_plan_id: string;
};
way: "paypal";
}
export type Payload =
| AppleReceiptPayload
| StripeReceiptPayload
| PayPalReceiptPayload;
export interface Response {
subscription_receipt: SubscriptionReceipt;
@ -58,19 +50,12 @@ export interface SubscriptionReceipt {
app_bundle_id: string;
autorenewable: boolean;
error: string;
links?: IPayPalLink[];
stripe_status?: string;
checkout_url?: string;
checkout_session?: unknown;
};
}
interface IPayPalLink {
href: string;
rel: "approve" | "edit" | "self";
method: "GET" | "PATCH";
}
function createRequest({
token,
receiptData,
@ -101,14 +86,6 @@ function getDataPayload(payload: Payload) {
},
};
}
if ("way" in payload && payload.way === "paypal") {
return {
way: "paypal",
subscription_receipt: {
sub_plan_id: payload.subscription_receipt.sub_plan_id,
},
};
}
if ("way" in payload && payload.way === "stripe") {
return {
way: "stripe",

15
src/components/PaymentPage/methods/PayPal/Button.tsx
View File

@ -1,15 +0,0 @@
import { useTranslation } from "react-i18next";
import MainButton from "@/components/MainButton";
interface IPayPalButtonProps {
onClick: () => void;
}
export function PayPalButton({ onClick }: IPayPalButtonProps): JSX.Element {
const { t } = useTranslation();
return (
<MainButton color="blue" onClick={onClick}>
{t("payPal")}
</MainButton>
);
}

6
src/components/PaymentPage/methods/Stripe/Modal.tsx
View File

@ -14,7 +14,6 @@ import ApplePayButton from "@/components/StripePage/ApplePayButton";
import SubPlanInformation from "@/components/SubPlanInformation";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import routes from "@/routes";
interface StripeModalProps {
@ -39,7 +38,6 @@ StripeModalProps): JSX.Element {
const email = useSelector(selectors.selectUser).email;
const [stripePromise, setStripePromise] =
useState<Promise<Stripe | null> | null>(null);
const [subPlans, setSubPlans] = useState<ISubscriptionPlan[] | null>(null);
const [clientSecret, setClientSecret] = useState<string>("");
const [subscriptionReceiptId, setSubscriptionReceiptId] =
useState<string>("");
@ -53,7 +51,6 @@ StripeModalProps): JSX.Element {
const siteConfig = await api.getAppConfig({ bundleId: "auraweb" });
setStripePromise(loadStripe(siteConfig.data.stripe_public_key));
const { sub_plans } = await api.getSubscriptionPlans({ locale });
setSubPlans(sub_plans);
const isActiveSubPlan = sub_plans.find(
(subPlan) => subPlan.id === activeSubPlan?.id
);
@ -78,6 +75,7 @@ StripeModalProps): JSX.Element {
setClientSecret(client_secret);
setIsLoading(false);
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [api, token]);
const handleClose = () => {
@ -107,7 +105,7 @@ StripeModalProps): JSX.Element {
subscriptionReceiptId={subscriptionReceiptId}
/>
{activeSubPlan && (
<SubPlanInformation subPlan={activeSubPlan} subPlans={subPlans} />
<SubPlanInformation subPlan={activeSubPlan} />
)}
<CheckoutForm subscriptionReceiptId={subscriptionReceiptId} />
</Elements>

7
src/components/StripePage/ApplePayButton/index.tsx
View File

@ -16,6 +16,7 @@ interface ApplePayButtonProps {
client_secret: string;
subscriptionReceiptId?: string;
returnUrl?: string;
setCanMakePayment?: (isCanMakePayment: boolean) => void;
}
function ApplePayButton({
@ -23,6 +24,7 @@ function ApplePayButton({
client_secret,
subscriptionReceiptId,
returnUrl,
setCanMakePayment,
}: ApplePayButtonProps) {
const stripe = useStripe();
const elements = useElements();
@ -58,6 +60,7 @@ function ApplePayButton({
pr.canMakePayment().then((result) => {
if (result) {
setPaymentRequest(pr);
setCanMakePayment?.(true);
}
});
@ -80,7 +83,8 @@ function ApplePayButton({
return e.complete("fail");
}
navigate(
returnUrl || `${routes.client.paymentResult()}/${subscriptionReceiptId}/?redirect_status=succeeded`
returnUrl ||
`${routes.client.paymentResult()}/${subscriptionReceiptId}/?redirect_status=succeeded`
);
e.complete("success");
// Show a success message to your customer
@ -89,6 +93,7 @@ function ApplePayButton({
// payment_intent.succeeded event that handles any business critical
// post-payment actions.
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
activeSubPlan,
client_secret,

6
src/components/StripePage/index.tsx
View File

@ -13,7 +13,6 @@ import routes from "@/routes";
import SubPlanInformation from "../SubPlanInformation";
import Title from "../Title";
import { useTranslation } from "react-i18next";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import ApplePayButton from "./ApplePayButton";
export function StripePage(): JSX.Element {
@ -26,7 +25,6 @@ export function StripePage(): JSX.Element {
const email = useSelector(selectors.selectUser).email;
const [stripePromise, setStripePromise] =
useState<Promise<Stripe | null> | null>(null);
const [subPlans, setSubPlans] = useState<ISubscriptionPlan[] | null>(null);
const [clientSecret, setClientSecret] = useState<string>("");
const [subscriptionReceiptId, setSubscriptionReceiptId] =
useState<string>("");
@ -40,7 +38,6 @@ export function StripePage(): JSX.Element {
const siteConfig = await api.getAppConfig({ bundleId: "auraweb" });
setStripePromise(loadStripe(siteConfig.data.stripe_public_key));
const { sub_plans } = await api.getSubscriptionPlans({ locale });
setSubPlans(sub_plans);
const isActiveSubPlan = sub_plans.find(
(subPlan) => subPlan.id === activeSubPlan?.id
);
@ -65,6 +62,7 @@ export function StripePage(): JSX.Element {
setClientSecret(client_secret);
setIsLoading(false);
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [api, token]);
return (
@ -90,7 +88,7 @@ export function StripePage(): JSX.Element {
subscriptionReceiptId={subscriptionReceiptId}
/>
{activeSubPlan && (
<SubPlanInformation subPlan={activeSubPlan} subPlans={subPlans} />
<SubPlanInformation subPlan={activeSubPlan} />
)}
<CheckoutForm subscriptionReceiptId={subscriptionReceiptId} />
</Elements>

67
src/components/SubPlanInformation/index.tsx
View File

@ -2,16 +2,10 @@ import { useTranslation } from "react-i18next";
import styles from "./styles.module.css";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import TotalToday from "./TotalToday";
import MainButton from "../MainButton";
import { useApi } from "@/api";
import { useAuth } from "@/auth";
import { useEffect, useState } from "react";
import Loader from "../Loader";
import ApplePayButton from "../StripePage/ApplePayButton";
interface ISubPlanInformationProps {
subPlan: ISubscriptionPlan;
subPlans: ISubscriptionPlan[] | null;
client_secret?: string;
}
@ -23,58 +17,9 @@ const getPrice = (plan: ISubscriptionPlan): string => {
function SubPlanInformation({
subPlan,
subPlans,
client_secret,
}: ISubPlanInformationProps): JSX.Element {
const { t } = useTranslation();
const api = useApi();
const { token } = useAuth();
const [payPalSubPlan, setPayPalSubPlan] = useState<ISubscriptionPlan>();
const [errors, setErrors] = useState<string>("");
const [isLoading, setIsLoading] = useState<boolean>(false);
useEffect(() => {
if (!subPlans) return;
const paypalPlan = subPlans
.filter((plan: ISubscriptionPlan) => plan.provider === "paypal")
.filter((plan: ISubscriptionPlan) => {
if (subPlan?.trial && plan?.trial) return true;
if (!subPlan?.trial && !plan?.trial) return true;
return false;
})
.find((plan: ISubscriptionPlan) => {
if (subPlan?.trial && plan?.trial) {
return plan?.trial?.price_cents === subPlan?.trial?.price_cents;
}
if (!subPlan?.trial && !plan?.trial) {
return plan?.name === subPlan?.name;
}
return false;
});
setPayPalSubPlan(paypalPlan);
}, [subPlan?.name, subPlan?.trial, subPlans]);
const handlePayPalButton = async () => {
setIsLoading(true);
const {
subscription_receipt: { data },
} = await api.createSubscriptionReceipt({
token,
way: "paypal",
subscription_receipt: {
sub_plan_id: payPalSubPlan?.id || "paypal.6",
},
});
if (!data?.links) {
return setErrors("Something went wrong. Please try again later.");
}
const link = data.links.find((link) => link.rel === "approve");
if (!link) {
return setErrors("Something went wrong. Please try again later.");
}
setIsLoading(false);
window.location.href = link.href;
};
return (
<div className={styles.container}>
@ -82,21 +27,9 @@ function SubPlanInformation({
{client_secret && (
<ApplePayButton activeSubPlan={subPlan} client_secret={client_secret} />
)}
{payPalSubPlan && (
<MainButton
type="button"
className={styles["pay-pal-button"]}
onClick={handlePayPalButton}
>
{!isLoading && <img src="/paypal-logo.svg" alt="PayPal Button" />}
{isLoading && <Loader />}
</MainButton>
)}
{/* <ApplePayButton activeSubPlan={subPlan} /> */}
<p className={styles.description}>
{t("auweb.pay.information").replaceAll("%@", getPrice(subPlan))}.
</p>
{!!errors.length && <p className={styles.errors}>{errors}</p>}
</div>
);
}

4
src/components/pages/TrialPayment/components/PaymentMethodsChoice/index.tsx
View File

@ -1,13 +1,15 @@
import { EPaymentMethod, paymentMethods } from "@/data/paymentMethods";
import { EPaymentMethod, IPaymentMethod } from "@/data/paymentMethods";
import styles from "./styles.module.css";
interface IPaymentMethodsChoiceProps {
selectedPaymentMethod: EPaymentMethod;
onSelectPaymentMethod: (method: EPaymentMethod) => void;
paymentMethods: IPaymentMethod[];
}
function PaymentMethodsChoice({
selectedPaymentMethod,
paymentMethods,
onSelectPaymentMethod,
}: IPaymentMethodsChoiceProps) {
return (

2
src/components/pages/TrialPayment/components/PaymentMethodsChoice/styles.module.css
View File

@ -1,7 +1,7 @@
.payment-methods {
width: 100%;
display: flex;
justify-content: space-between;
justify-content: space-around;
gap: 8px;
}

28
src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/index.tsx
View File

@ -1,28 +0,0 @@
import MainButton from "@/components/MainButton";
import styles from "./styles.module.css";
import Loader from "@/components/Loader";
interface IPayPalButton {
isLoading: boolean;
handlePayPalButton: () => void;
}
function PayPalButton({ isLoading, handlePayPalButton }: IPayPalButton) {
return (
<MainButton
type="button"
className={styles["pay-pal-button"]}
onClick={handlePayPalButton}
>
{!isLoading && (
<div className={styles.content}>
<img src="/paypal-logo.svg" alt="PayPal Button" />
<p>Buy Now</p>
</div>
)}
{isLoading && <Loader />}
</MainButton>
);
}
export default PayPalButton;

36
src/components/pages/TrialPayment/components/PaymentModal/components/PayPalButton/styles.module.css
View File

@ -1,36 +0,0 @@
.pay-pal-button {
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffc43a;
border-radius: 7px;
max-width: 300px;
}
.content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.content > p {
margin-top: 6px;
font-size: 18px;
color: #2f2e37;
}
.content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.content > p {
margin-top: 6px;
font-size: 18px;
color: #2f2e37;
}

97
src/components/pages/TrialPayment/components/PaymentModal/index.tsx
View File

@ -1,8 +1,8 @@
import Title from "@/components/Title";
import styles from "./styles.module.css";
import PaymentMethodsChoice from "../PaymentMethodsChoice";
import { useEffect, useState } from "react";
import { EPaymentMethod } from "@/data/paymentMethods";
import { useEffect, useMemo, useState } from "react";
import { EPaymentMethod, paymentMethods } from "@/data/paymentMethods";
import { Elements } from "@stripe/react-stripe-js";
import ApplePayButton from "@/components/StripePage/ApplePayButton";
import CheckoutForm from "@/components/PaymentPage/methods/Stripe/CheckoutForm";
@ -18,7 +18,6 @@ import { useAuth } from "@/auth";
import Loader from "@/components/Loader";
import { getPriceFromTrial } from "@/services/price";
import SecurityPayments from "../SecurityPayments";
import PayPalButton from "./components/PayPalButton";
interface IPaymentModalProps {
activeSubscriptionPlan?: ISubscriptionPlan;
@ -26,7 +25,11 @@ interface IPaymentModalProps {
returnUrl?: string;
}
function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentModalProps) {
function PaymentModal({
activeSubscriptionPlan,
noTrial,
returnUrl,
}: IPaymentModalProps) {
const { i18n } = useTranslation();
const locale = i18n.language;
const api = useApi();
@ -36,20 +39,29 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo
const activeSubPlan = activeSubscriptionPlan
? activeSubscriptionPlan
: activeSubPlanFromStore;
const [payPalSubPlan, setPayPalSubPlan] = useState<ISubscriptionPlan>();
const [stripePromise, setStripePromise] =
useState<Promise<Stripe | null> | null>(null);
const [clientSecret, setClientSecret] = useState<string>("");
const [subscriptionReceiptId, setSubscriptionReceiptId] =
useState<string>("");
const [subPlans, setSubPlans] = useState<ISubscriptionPlan[] | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [isLoadingPayPal, setIsLoadingPayPal] = useState(false);
const [errors, setErrors] = useState<string>("");
const [isError, setIsError] = useState<boolean>(false);
const [isStripePaymentButtonEnabled, setIsStripePaymentButtonEnabled] =
useState<boolean>(false);
const paymentMethodsButtons = useMemo(() => {
if (!isStripePaymentButtonEnabled) {
return paymentMethods.filter(
(method) => method.id !== EPaymentMethod.PAYMENT_BUTTONS
);
}
return paymentMethods;
}, [isStripePaymentButtonEnabled]);
const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(
EPaymentMethod.PAYPAL_OR_APPLE_PAY
isStripePaymentButtonEnabled
? EPaymentMethod.PAYMENT_BUTTONS
: EPaymentMethod.CREDIT_CARD
);
const onSelectPaymentMethod = (method: EPaymentMethod) => {
@ -59,12 +71,8 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo
useEffect(() => {
(async () => {
const siteConfig = await api.getAppConfig({ bundleId: "auraweb" });
// const isProduction = import.meta.env.MODE === "production";
// const stripePublicKey = isProduction ? siteConfig.data.stripe_public_key : "pk_test_51Ndqf4IlX4lgwUxrlLWqfYWpo0Ic0BV7DfiZxfMYy838IZP8NLrwwZ5i0HhhbOQBGoQZe4Rrel1ziEk8mhQ2TE3500ETWZPBva";
// setStripePromise(loadStripe(stripePublicKey));
setStripePromise(loadStripe(siteConfig.data.stripe_public_key));
const { sub_plans } = await api.getSubscriptionPlans({ locale });
setSubPlans(sub_plans);
const isActiveSubPlan = sub_plans.find(
(subPlan) => subPlan.id === activeSubPlan?.id
);
@ -100,50 +108,6 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo
})();
}, [activeSubPlan?.id, api, token]);
useEffect(() => {
if (!subPlans) return;
const paypalPlan = subPlans
.filter((plan: ISubscriptionPlan) => plan.provider === "paypal")
.filter((plan: ISubscriptionPlan) => {
if (activeSubPlan?.trial && plan?.trial) return true;
if (!activeSubPlan?.trial && !plan?.trial) return true;
return false;
})
.find((plan: ISubscriptionPlan) => {
if (activeSubPlan?.trial && plan?.trial) {
return plan?.trial?.price_cents === activeSubPlan?.trial?.price_cents;
}
if (!activeSubPlan?.trial && !plan?.trial) {
return plan?.name === activeSubPlan?.name;
}
return false;
});
setPayPalSubPlan(paypalPlan);
}, [activeSubPlan?.name, activeSubPlan?.trial, subPlans]);
const handlePayPalButton = async () => {
setIsLoadingPayPal(true);
const {
subscription_receipt: { data },
} = await api.createSubscriptionReceipt({
token,
way: "paypal",
subscription_receipt: {
sub_plan_id: payPalSubPlan?.id || "paypal.6",
},
});
if (!data?.links) {
return setErrors("Something went wrong. Please try again later.");
}
const link = data.links.find((link) => link.rel === "approve");
if (!link) {
return setErrors("Something went wrong. Please try again later.");
}
setIsLoadingPayPal(false);
window.location.href = link.href;
// window.open(link.href, '_blank');
};
if (isLoading) {
return (
<div className={styles["payment-modal"]}>
@ -170,6 +134,7 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo
Choose payment method
</Title>
<PaymentMethodsChoice
paymentMethods={paymentMethodsButtons}
selectedPaymentMethod={selectedPaymentMethod}
onSelectPaymentMethod={onSelectPaymentMethod}
/>
@ -180,7 +145,8 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo
<p className={styles["sub-plan-description"]}>
You will be charged only{" "}
<b>
${getPriceFromTrial(activeSubPlan?.trial)} for your 3-day trial.
${getPriceFromTrial(activeSubPlan?.trial)} for your 3-day
trial.
</b>
</p>
<p className={styles["sub-plan-description"]}>
@ -197,26 +163,23 @@ function PaymentModal({ activeSubscriptionPlan, noTrial, returnUrl }: IPaymentMo
<div className={styles["payment-method-container"]}>
{stripePromise && clientSecret && (
<Elements stripe={stripePromise} options={{ clientSecret }}>
{selectedPaymentMethod === EPaymentMethod.PAYPAL_OR_APPLE_PAY && (
{selectedPaymentMethod === EPaymentMethod.PAYMENT_BUTTONS && (
<div className={styles["payment-method"]}>
{payPalSubPlan && (
<PayPalButton
isLoading={isLoadingPayPal}
handlePayPalButton={handlePayPalButton}
/>
)}
<ApplePayButton
activeSubPlan={activeSubPlan}
client_secret={clientSecret}
subscriptionReceiptId={subscriptionReceiptId}
returnUrl={window.location.href}
setCanMakePayment={setIsStripePaymentButtonEnabled}
/>
{!!errors.length && <p className={styles.errors}>{errors}</p>}
</div>
)}
{selectedPaymentMethod === EPaymentMethod.CREDIT_CARD && (
<CheckoutForm subscriptionReceiptId={subscriptionReceiptId} returnUrl={returnUrl} />
<CheckoutForm
subscriptionReceiptId={subscriptionReceiptId}
returnUrl={returnUrl}
/>
)}
</Elements>
)}

5
src/components/ui/PaymentMethodsButtons/PayPayOrApplePay/index.tsx → src/components/ui/PaymentMethodsButtons/PaymentButtons/index.tsx
View File

@ -1,10 +1,9 @@
import styles from "./styles.module.css";
function PayPalOrApplePay() {
function PaymentButtons() {
return <div className={styles.container}>
<img src="/paypal.webp" alt="PayPal" />
<img src="/applepay.webp" alt="ApplePay" />
</div>;
}
export default PayPalOrApplePay;
export default PaymentButtons;

0
src/components/ui/PaymentMethodsButtons/PayPayOrApplePay/styles.module.css → src/components/ui/PaymentMethodsButtons/PaymentButtons/styles.module.css
View File

10
src/data/paymentMethods.tsx
View File

@ -1,20 +1,20 @@
import CreditCard from "@/components/ui/PaymentMethodsButtons/CreditCard";
import PayPalOrApplePay from "@/components/ui/PaymentMethodsButtons/PayPayOrApplePay";
import PaymentButtons from "@/components/ui/PaymentMethodsButtons/PaymentButtons";
export enum EPaymentMethod {
CREDIT_CARD = "card",
PAYPAL_OR_APPLE_PAY = "payPalOrApplePay",
PAYMENT_BUTTONS = "paymentButtons",
}
interface IPaymentMethod {
export interface IPaymentMethod {
id: EPaymentMethod;
component: JSX.Element;
}
export const paymentMethods: IPaymentMethod[] = [
{
id: EPaymentMethod.PAYPAL_OR_APPLE_PAY,
component: <PayPalOrApplePay />,
id: EPaymentMethod.PAYMENT_BUTTONS,
component: <PaymentButtons />,
},
{
id: EPaymentMethod.CREDIT_CARD,