72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
import { useSearchParams } from "react-router-dom";
|
|
import styles from "./styles.module.scss";
|
|
import { HTMLAttributes, useState } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import PaymentModalNew from "@/components/PaymentModalNew";
|
|
import { EPlacementKeys } from "@/api/resources/Paywall";
|
|
import routes from "@/routes";
|
|
|
|
function PaymentModal(props: HTMLAttributes<HTMLDivElement>) {
|
|
const activeProductFromStore = useSelector(selectors.selectActiveProduct);
|
|
|
|
const [searchParams] = useSearchParams();
|
|
const subscriptionStatus =
|
|
searchParams.get("redirect_status") === "succeeded" ? "subscribed" : "lead";
|
|
const [height, setHeight] = useState(
|
|
subscriptionStatus === "subscribed" ? 246 : 146
|
|
);
|
|
|
|
const returnUrl = window.location.origin + routes.client.palmistryV1Payment();
|
|
|
|
return (
|
|
<>
|
|
{activeProductFromStore && (
|
|
<div
|
|
{...props}
|
|
className={styles.container}
|
|
style={{ minHeight: `${height}px`, ...props.style }}
|
|
>
|
|
<div
|
|
className={`${styles.widget} ${
|
|
subscriptionStatus === "subscribed"
|
|
? styles["widget_success"]
|
|
: ""
|
|
} ${props.className}`}
|
|
>
|
|
{subscriptionStatus !== "subscribed" && (
|
|
<PaymentModalNew
|
|
setHeight={setHeight}
|
|
activeProduct={activeProductFromStore}
|
|
returnUrl={returnUrl}
|
|
placementKey={EPlacementKeys["aura.placement.palmistry.main"]}
|
|
/>
|
|
)}
|
|
|
|
{subscriptionStatus === "subscribed" && (
|
|
<div className={styles.success}>
|
|
<svg
|
|
className={styles.icon}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="512"
|
|
height="512"
|
|
viewBox="0 0 52 52"
|
|
>
|
|
<path
|
|
fill="#4ec794"
|
|
d="M26 0C11.664 0 0 11.663 0 26s11.664 26 26 26 26-11.663 26-26S40.336 0 26 0zm14.495 17.329-16 18a1.997 1.997 0 0 1-2.745.233l-10-8a2 2 0 0 1 2.499-3.124l8.517 6.813L37.505 14.67a2.001 2.001 0 0 1 2.99 2.659z"
|
|
/>
|
|
</svg>
|
|
|
|
<div className={styles.text}>Payment success</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default PaymentModal;
|