feat: add payPal button
This commit is contained in:
Денис Катаев
Victor Ershov
parent
a120f4a387
commit
99c61bdce9
24
public/paypal-logo.svg
Normal file
24
public/paypal-logo.svg
Normal file
@ -0,0 +1,24 @@
|
||||
<svg width="120" height="36" viewBox="0 0 120 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_354_89)">
|
||||
<mask id="mask0_354_89" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-65" y="-22" width="250" height="82">
|
||||
<path d="M-64.605 59.4773H184.605V-21.476H-64.605V59.4773Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_354_89)">
|
||||
<path d="M24.7788 7.16727C23.4993 5.70893 21.1865 5.08371 18.2277 5.08371H9.64049C9.3476 5.08355 9.06427 5.18794 8.84148 5.37808C8.61869 5.56822 8.47108 5.83162 8.42521 6.1209L4.8512 28.7994C4.83463 28.9046 4.84106 29.0121 4.87005 29.1146C4.89905 29.2171 4.94991 29.3121 5.01915 29.393C5.08838 29.4739 5.17434 29.5389 5.27109 29.5834C5.36785 29.6279 5.4731 29.6509 5.57961 29.6508H10.881L12.2125 21.2057L12.1712 21.4702C12.2162 21.1815 12.3628 20.9183 12.5846 20.7282C12.8065 20.538 13.0889 20.4333 13.3811 20.433H15.9004C20.8494 20.433 24.7246 18.4228 25.8565 12.6078C25.8902 12.4358 25.9192 12.2684 25.9444 12.1048C26.2807 9.95555 25.9421 8.49262 24.7796 7.16804" fill="#003087"/>
|
||||
<path d="M89.6797 17.9589C89.3556 20.0868 87.7306 20.0868 86.1592 20.0868H85.2649L85.8924 16.1138C85.9306 15.8738 86.137 15.6972 86.3801 15.6972H86.7905C87.8606 15.6972 88.871 15.6972 89.3923 16.3064C89.7034 16.671 89.7974 17.2121 89.6797 17.9589ZM88.9956 12.4068H83.0674C82.8711 12.4069 82.6812 12.4769 82.5319 12.6044C82.3826 12.7319 82.2836 12.9084 82.2527 13.1023L79.8573 28.3025C79.8462 28.373 79.8506 28.445 79.87 28.5137C79.8894 28.5823 79.9235 28.6459 79.9698 28.7001C80.0161 28.7544 80.0736 28.798 80.1384 28.8279C80.2031 28.8578 80.2736 28.8734 80.3449 28.8735H83.3869C83.6705 28.8735 83.912 28.6671 83.9564 28.3874L84.6366 24.0766C84.6993 23.6768 85.0448 23.381 85.4499 23.381H87.3255C91.2313 23.381 93.4845 21.4924 94.073 17.7464C94.3383 16.1092 94.0837 14.822 93.3171 13.9209C92.4741 12.9303 90.9798 12.406 88.9964 12.406" fill="#009CDE"/>
|
||||
<path d="M47.3969 17.9589C47.0728 20.0868 45.4479 20.0868 43.8756 20.0868H42.9814L43.6089 16.1138C43.6471 15.8738 43.8535 15.6972 44.0965 15.6972H44.507C45.577 15.6972 46.5875 15.6972 47.1088 16.3064C47.4206 16.671 47.5146 17.2121 47.3969 17.9589ZM46.7128 12.4068H40.7847C40.3796 12.4068 40.0341 12.7018 39.9707 13.1023L37.5745 28.3025C37.5633 28.373 37.5676 28.4451 37.587 28.5138C37.6063 28.5825 37.6404 28.6461 37.6867 28.7004C37.7331 28.7547 37.7906 28.7983 37.8554 28.8281C37.9203 28.858 37.9908 28.8735 38.0621 28.8735H40.8932C41.2983 28.8735 41.643 28.5785 41.7065 28.178L42.3538 24.0773C42.4165 23.6768 42.762 23.3818 43.1671 23.3818H45.0428C48.9485 23.3818 51.2017 21.4924 51.7903 17.7464C52.0555 16.1092 51.801 14.822 51.0344 13.9209C50.1913 12.9303 48.697 12.406 46.7136 12.406M60.4761 23.4162C60.201 25.0381 58.9146 26.1273 57.2721 26.1273C56.4489 26.1273 55.7893 25.862 55.3658 25.3606C54.9454 24.8638 54.788 24.1553 54.921 23.3673C55.1763 21.7591 56.4848 20.6355 58.1021 20.6355C58.9085 20.6355 59.562 20.9031 59.9946 21.409C60.4295 21.9189 60.6007 22.6312 60.4761 23.4162ZM64.4323 17.8901H61.5936C61.4756 17.8899 61.3614 17.932 61.2717 18.0087C61.182 18.0853 61.1227 18.1916 61.1044 18.3082L60.9806 19.1015L60.7819 18.8141C60.1673 17.9222 58.7969 17.6233 57.4287 17.6233C54.2927 17.6233 51.6137 20.0004 51.0924 23.3329C50.8211 24.9968 51.2063 26.5859 52.1495 27.6949C53.0155 28.7138 54.2514 29.138 55.7243 29.138C58.2527 29.138 59.6545 27.5145 59.6545 27.5145L59.5276 28.3033C59.5164 28.3739 59.5207 28.446 59.5401 28.5147C59.5595 28.5835 59.5936 28.6472 59.6401 28.7015C59.6865 28.7557 59.7442 28.7993 59.8091 28.8291C59.874 28.859 59.9446 28.8744 60.016 28.8743H62.5719C62.977 28.8743 63.3225 28.58 63.3859 28.1787L64.9207 18.4618C64.9318 18.3912 64.9274 18.319 64.9079 18.2503C64.8883 18.1816 64.8542 18.1179 64.8077 18.0636C64.7612 18.0093 64.7035 17.9658 64.6386 17.936C64.5736 17.9061 64.503 17.8907 64.4315 17.8908" fill="#003087"/>
|
||||
<path d="M102.759 23.4162C102.484 25.0381 101.197 26.1273 99.5549 26.1273C98.7317 26.1273 98.0721 25.862 97.6486 25.3606C97.2282 24.8638 97.0708 24.1553 97.2038 23.3673C97.4591 21.7591 98.7668 20.6355 100.385 20.6355C101.191 20.6355 101.845 20.9031 102.277 21.409C102.712 21.9189 102.884 22.6312 102.759 23.4162ZM106.715 17.8901H103.876C103.758 17.8899 103.644 17.932 103.554 18.0087C103.465 18.0853 103.405 18.1916 103.387 18.3082L103.263 19.1015L103.065 18.8141C102.45 17.9222 101.08 17.6233 99.7115 17.6233C96.5763 17.6233 93.8973 20.0004 93.3752 23.3329C93.1039 24.9968 93.4899 26.5859 94.4331 27.6949C95.2991 28.7138 96.535 29.138 98.0079 29.138C100.537 29.138 101.939 27.5145 101.939 27.5145L101.812 28.3033C101.801 28.3738 101.805 28.4459 101.824 28.5146C101.843 28.5834 101.877 28.6471 101.923 28.7014C101.97 28.7557 102.027 28.7993 102.092 28.8292C102.157 28.859 102.227 28.8744 102.299 28.8743H104.854C105.259 28.8743 105.605 28.58 105.669 28.1787L107.204 18.4618C107.215 18.3912 107.21 18.319 107.191 18.2503C107.171 18.1816 107.137 18.1179 107.09 18.0636C107.044 18.0093 106.986 17.9658 106.921 17.936C106.856 17.9061 106.786 17.8907 106.714 17.8908" fill="#009CDE"/>
|
||||
<path d="M79.5515 17.8908H76.6975C76.4247 17.8908 76.1701 18.0261 76.0173 18.2524L72.081 24.049L70.4124 18.4786C70.3615 18.3087 70.2572 18.1597 70.115 18.0537C69.9728 17.9477 69.8003 17.8903 69.6229 17.8901H66.8186C66.7399 17.8901 66.6624 17.9089 66.5925 17.9449C66.5226 17.9809 66.4623 18.033 66.4165 18.097C66.3708 18.1609 66.341 18.2349 66.3295 18.3127C66.3181 18.3905 66.3254 18.4699 66.3508 18.5443L69.4922 27.7667L66.5373 31.9362C66.4851 32.0102 66.4542 32.0971 66.448 32.1875C66.4418 32.2778 66.4606 32.3682 66.5022 32.4486C66.5438 32.529 66.6068 32.5965 66.6841 32.6436C66.7615 32.6907 66.8503 32.7157 66.9409 32.7158H69.7918C70.0608 32.7158 70.3138 32.5836 70.4682 32.3619L79.9566 18.6666C80.0082 18.5926 80.0384 18.5059 80.0441 18.4159C80.0498 18.3259 80.0308 18.236 79.989 18.156C79.9473 18.0761 79.8844 18.0091 79.8073 17.9624C79.7302 17.9156 79.6417 17.8909 79.5515 17.8908Z" fill="#003087"/>
|
||||
<path d="M110.061 12.8248L107.627 28.3033C107.616 28.3738 107.62 28.4459 107.64 28.5146C107.659 28.5833 107.693 28.6469 107.74 28.7012C107.786 28.7554 107.844 28.799 107.909 28.8289C107.973 28.8588 108.044 28.8742 108.115 28.8743H110.562C110.967 28.8743 111.313 28.5792 111.376 28.1787L113.775 12.9777C113.786 12.9072 113.782 12.835 113.763 12.7663C113.743 12.6975 113.709 12.6338 113.663 12.5796C113.616 12.5253 113.559 12.4817 113.494 12.4519C113.429 12.4221 113.358 12.4067 113.287 12.4068H110.549C110.431 12.4065 110.317 12.4484 110.228 12.525C110.138 12.6015 110.079 12.7084 110.061 12.8248Z" fill="#009CDE"/>
|
||||
<path d="M24.7788 7.16727C23.4993 5.70893 21.1865 5.08371 18.2277 5.08371H9.64049C9.3476 5.08355 9.06427 5.18794 8.84148 5.37808C8.61869 5.56822 8.47108 5.83162 8.42521 6.1209L4.8512 28.7994C4.83463 28.9046 4.84106 29.0121 4.87005 29.1146C4.89905 29.2171 4.94991 29.3121 5.01915 29.393C5.08838 29.4739 5.17434 29.5389 5.27109 29.5834C5.36785 29.6279 5.4731 29.6509 5.57961 29.6508H10.881L12.2125 21.2057L12.1712 21.4702C12.2162 21.1815 12.3628 20.9183 12.5846 20.7282C12.8065 20.538 13.0889 20.4333 13.3811 20.433H15.9004C20.8494 20.433 24.7246 18.4228 25.8565 12.6078C25.8902 12.4358 25.9192 12.2684 25.9444 12.1048C26.2807 9.95555 25.9421 8.49262 24.7796 7.16804" fill="#003087"/>
|
||||
<path d="M13.6426 12.1331C13.6827 11.8804 13.8117 11.6502 14.0062 11.4839C14.2008 11.3176 14.4483 11.2262 14.7042 11.2259H21.4364C22.2336 11.2259 22.9773 11.2778 23.6568 11.3864C24.0283 11.4461 24.3959 11.5283 24.7575 11.6325C25.1681 11.7479 25.5654 11.9063 25.9429 12.1049C26.2808 9.95479 25.9414 8.49263 24.7789 7.16728C23.4986 5.7097 21.1865 5.08447 18.2278 5.08447H9.63976C9.34713 5.08468 9.06416 5.18923 8.84169 5.37934C8.61922 5.56945 8.47184 5.83265 8.426 6.12167L4.85047 28.7978C4.83378 28.903 4.8401 29.0106 4.869 29.1131C4.89789 29.2156 4.94867 29.3107 5.01783 29.3917C5.08699 29.4727 5.1729 29.5377 5.26962 29.5823C5.36635 29.6269 5.47159 29.65 5.57811 29.6501H10.8803L12.2117 21.2042L13.6426 12.1331Z" fill="#003087"/>
|
||||
<path d="M25.9437 12.1041C25.9174 12.2723 25.8881 12.4399 25.8558 12.607C24.7238 18.4213 20.8486 20.4322 15.8996 20.4322H13.3796C13.0875 20.4324 12.805 20.5371 12.5833 20.7273C12.3615 20.9175 12.2151 21.1807 12.1704 21.4694L10.8802 29.6493L10.5134 31.9698C10.4988 32.0619 10.5043 32.1561 10.5297 32.2459C10.555 32.3357 10.5995 32.4189 10.6601 32.4898C10.7207 32.5607 10.7959 32.6176 10.8807 32.6566C10.9654 32.6956 11.0575 32.7158 11.1508 32.7158H15.6199C16.1488 32.7158 16.5982 32.3306 16.6815 31.8085L16.7251 31.5808L17.5674 26.2427L17.6209 25.9476C17.6609 25.6947 17.7899 25.4643 17.9847 25.298C18.1795 25.1317 18.4272 25.0403 18.6833 25.0404H19.3521C23.6813 25.0404 27.0711 23.2824 28.0616 18.195C28.4744 16.0702 28.2604 14.2947 27.1674 13.048C26.8203 12.6615 26.4056 12.3417 25.9437 12.1041Z" fill="#009CDE"/>
|
||||
<path d="M24.7582 11.6325C24.5855 11.5813 24.4074 11.5354 24.224 11.4949C24.0405 11.4544 23.851 11.4185 23.6568 11.3879C22.9766 11.2771 22.2336 11.2251 21.4357 11.2251H14.7042C14.448 11.2248 14.2001 11.3162 14.0054 11.4827C13.8107 11.6492 13.682 11.88 13.6426 12.1331L12.2117 21.2057L12.1705 21.4694C12.2151 21.1807 12.3616 20.9175 12.5833 20.7273C12.8051 20.5371 13.0875 20.4324 13.3796 20.4322H15.8996C20.8487 20.4322 24.7238 18.422 25.8558 12.607C25.8894 12.435 25.9177 12.2684 25.9437 12.1041C25.6448 11.9477 25.3334 11.8163 25.0128 11.7112C24.9294 11.6837 24.8446 11.6585 24.7582 11.6325Z" fill="#012169"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_354_89">
|
||||
<rect width="120" height="36" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.3 KiB |
@ -26,7 +26,9 @@ export interface StripeReceiptPayload extends AuthPayload {
|
||||
}
|
||||
|
||||
export interface PayPalReceiptPayload extends AuthPayload {
|
||||
itemInterval: "week" | "month" | "year";
|
||||
subscription_receipt: {
|
||||
sub_plan_id: string;
|
||||
};
|
||||
way: "paypal";
|
||||
}
|
||||
|
||||
@ -82,8 +84,8 @@ function createRequest({
|
||||
function createRequest({
|
||||
token,
|
||||
receiptData,
|
||||
autorenewable = true,
|
||||
sandbox = true,
|
||||
autorenewable,
|
||||
sandbox,
|
||||
}: AppleReceiptPayload): Request;
|
||||
function createRequest({ token }: StripeReceiptPayload): Request;
|
||||
function createRequest(payload: Payload): Request;
|
||||
@ -123,7 +125,7 @@ function getDataPayload(payload: Payload) {
|
||||
return {
|
||||
way: "paypal",
|
||||
subscription_receipt: {
|
||||
item_interval: payload.itemInterval,
|
||||
sub_plan_id: payload.subscription_receipt.sub_plan_id,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -28,17 +28,15 @@ function PriceListPage(): JSX.Element {
|
||||
(async () => {
|
||||
const { sub_plans } = await api.getSubscriptionPlans({ locale });
|
||||
const plans = sub_plans
|
||||
.filter(
|
||||
(plan: ISubscriptionPlan) => plan.provider === "stripe" && plan.trial
|
||||
)
|
||||
.filter((plan: ISubscriptionPlan) => plan.provider === "stripe")
|
||||
.sort((a, b) => {
|
||||
if (!a.trial || !b.trial) {
|
||||
return 0;
|
||||
}
|
||||
if (a.trial.price_cents < b.trial.price_cents) {
|
||||
if (a.trial?.price_cents < b.trial?.price_cents) {
|
||||
return -1;
|
||||
}
|
||||
if (a.trial.price_cents > b.trial.price_cents) {
|
||||
if (a.trial?.price_cents > b.trial?.price_cents) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
|
||||
@ -22,7 +22,6 @@ function ApplePayButton({ activeSubPlan }: ApplePayButtonProps) {
|
||||
const [paymentRequest, setPaymentRequest] = useState<PaymentRequest | null>(
|
||||
null
|
||||
);
|
||||
// const [test, setTest] = useState<string>("");
|
||||
|
||||
const getAmountFromSubPlan = (subPlan: ISubscriptionPlan) => {
|
||||
if (subPlan.trial) {
|
||||
@ -46,33 +45,14 @@ function ApplePayButton({ activeSubPlan }: ApplePayButtonProps) {
|
||||
requestPayerName: true,
|
||||
requestPayerEmail: true,
|
||||
});
|
||||
console.log("paymentRequest: ", pr);
|
||||
|
||||
// Check the availability of the Payment Request API.
|
||||
pr.canMakePayment().then((result) => {
|
||||
console.log("canMakePayment: ", result);
|
||||
// setTest("canMakePayment: " + JSON.stringify(result));
|
||||
|
||||
if (result) {
|
||||
setPaymentRequest(pr);
|
||||
}
|
||||
});
|
||||
|
||||
pr.on("paymentmethod", async (e) => {
|
||||
// const { error: backendError, clientSecret } = await fetch(
|
||||
// "/create-payment-intent",
|
||||
// {
|
||||
// method: "POST",
|
||||
// headers: {
|
||||
// "Content-Type": "application/json",
|
||||
// },
|
||||
// body: JSON.stringify({
|
||||
// paymentMethodType: "card",
|
||||
// currency: "usd",
|
||||
// }),
|
||||
// }
|
||||
// ).then((r) => r.json());
|
||||
|
||||
const { subscription_receipt } = await api.createSubscriptionReceipt({
|
||||
token,
|
||||
way: "stripe",
|
||||
@ -109,11 +89,13 @@ function ApplePayButton({ activeSubPlan }: ApplePayButtonProps) {
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* {test} */}
|
||||
{paymentRequest && (
|
||||
<PaymentRequestButtonElement
|
||||
className={styles["stripe-element"]}
|
||||
options={{ paymentRequest }}
|
||||
options={{
|
||||
paymentRequest,
|
||||
style: { paymentRequestButton: { height: "60px" } },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -11,15 +11,21 @@ import { selectors } from "@/store";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import routes from "@/routes";
|
||||
import SubPlanInformation from "../SubPlanInformation";
|
||||
import ApplePayButton from "./ApplePayButton";
|
||||
import Title from "../Title";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
|
||||
|
||||
export function StripePage(): JSX.Element {
|
||||
const { i18n } = useTranslation();
|
||||
const api = useApi();
|
||||
const { token } = useAuth();
|
||||
const locale = i18n.language;
|
||||
const navigate = useNavigate();
|
||||
const activeSubPlan = useSelector(selectors.selectActiveSubPlan);
|
||||
const email = useSelector(selectors.selectEmail);
|
||||
const [stripePromise, setStripePromise] =
|
||||
useState<Promise<Stripe | null> | null>(null);
|
||||
const [subPlans, setSubPlans] = useState<ISubscriptionPlan[] | null>(null);
|
||||
const [clientSecret, setClientSecret] = useState<string>("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
if (!activeSubPlan) {
|
||||
@ -40,8 +46,16 @@ export function StripePage(): JSX.Element {
|
||||
(async () => {
|
||||
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
|
||||
);
|
||||
if (!activeSubPlan || !isActiveSubPlan) {
|
||||
navigate(routes.client.priceList());
|
||||
}
|
||||
})();
|
||||
}, [api]);
|
||||
}, [activeSubPlan, api, locale, navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
@ -60,23 +74,29 @@ export function StripePage(): JSX.Element {
|
||||
|
||||
return (
|
||||
<div className={`${styles.page} page`}>
|
||||
{/* <img
|
||||
className={`${styles.cross}`}
|
||||
src="/cross.png"
|
||||
alt="Cross"
|
||||
onClick={() => navigate(routes.client.home())}
|
||||
/> */}
|
||||
{isLoading ? (
|
||||
<div className={styles["payment-loader"]}>
|
||||
<Loader />
|
||||
</div>
|
||||
) : null}
|
||||
{!isLoading && (
|
||||
<>
|
||||
<Title variant="h2" className={styles.title}>
|
||||
Pay
|
||||
</Title>
|
||||
<p className={styles.email}>{email}</p>
|
||||
</>
|
||||
)}
|
||||
{stripePromise && clientSecret && (
|
||||
<Elements stripe={stripePromise} options={{ clientSecret }}>
|
||||
<CheckoutForm>
|
||||
<>
|
||||
<ApplePayButton activeSubPlan={activeSubPlan} />
|
||||
{activeSubPlan && <SubPlanInformation subPlan={activeSubPlan} />}
|
||||
{activeSubPlan && (
|
||||
<SubPlanInformation
|
||||
subPlan={activeSubPlan}
|
||||
subPlans={subPlans}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</CheckoutForm>
|
||||
</Elements>
|
||||
|
||||
@ -3,11 +3,10 @@
|
||||
position: static;
|
||||
/* height: calc(100vh - 50px);
|
||||
max-height: -webkit-fill-available; */
|
||||
flex: auto;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 96px;
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.payment-loader {
|
||||
@ -25,3 +24,15 @@
|
||||
cursor: pointer;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 27px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.email {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
@ -2,9 +2,16 @@ import { useTranslation } from "react-i18next";
|
||||
import styles from "./styles.module.css";
|
||||
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
|
||||
import TotalToday from "./TotalToday";
|
||||
import ApplePayButton from "../StripePage/ApplePayButton";
|
||||
import MainButton from "../MainButton";
|
||||
import { useApi } from "@/api";
|
||||
import { useAuth } from "@/auth";
|
||||
import { useEffect, useState } from "react";
|
||||
import Loader from "../Loader";
|
||||
|
||||
interface ISubPlanInformationProps {
|
||||
subPlan: ISubscriptionPlan;
|
||||
subPlans: ISubscriptionPlan[] | null;
|
||||
}
|
||||
|
||||
const getPrice = (plan: ISubscriptionPlan): string => {
|
||||
@ -15,14 +22,76 @@ const getPrice = (plan: ISubscriptionPlan): string => {
|
||||
|
||||
function SubPlanInformation({
|
||||
subPlan,
|
||||
subPlans,
|
||||
}: 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.open(link.href, "_blank");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<TotalToday total={getPrice(subPlan)} />
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -14,3 +14,18 @@
|
||||
line-height: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.pay-pal-button {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #ffc43a;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.errors {
|
||||
color: red;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -62,8 +62,8 @@ function SubscriptionPage(): JSX.Element {
|
||||
const targetSubPlan = subPlans.find(
|
||||
(sub_plan) =>
|
||||
String(
|
||||
sub_plan.trial?.price_cents
|
||||
? Math.floor(sub_plan.trial?.price_cents / 100)
|
||||
sub_plan?.trial?.price_cents
|
||||
? Math.floor(sub_plan?.trial?.price_cents / 100)
|
||||
: sub_plan.id.replace(".", "")
|
||||
) === subPlan
|
||||
);
|
||||
@ -181,16 +181,16 @@ function SubscriptionPage(): JSX.Element {
|
||||
const { sub_plans } = await api.getSubscriptionPlans({ locale });
|
||||
const plans = sub_plans
|
||||
.filter(
|
||||
(plan: ISubscriptionPlan) => plan.provider === "stripe" && plan.trial
|
||||
(plan: ISubscriptionPlan) => plan.provider === "stripe"
|
||||
)
|
||||
.sort((a, b) => {
|
||||
if (!a.trial || !b.trial) {
|
||||
return 0;
|
||||
}
|
||||
if (a.trial.price_cents < b.trial.price_cents) {
|
||||
if (a?.trial?.price_cents < b?.trial?.price_cents) {
|
||||
return -1;
|
||||
}
|
||||
if (a.trial.price_cents > b.trial.price_cents) {
|
||||
if (a?.trial?.price_cents > b?.trial?.price_cents) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user