Develop
This commit is contained in:
Daniil Chemerkin
parent
e9782af7cb
commit
33bb873ccc
@ -106,6 +106,10 @@
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.discount-screen__loader {
|
||||
scale: .75;
|
||||
}
|
||||
|
||||
.discount-screen__header-block {
|
||||
top: 0;
|
||||
color: #fff;
|
||||
|
||||
@ -13,6 +13,7 @@ import { useAuth } from "@/auth";
|
||||
import HeaderLogo from "@/components/palmistry/header-logo/header-logo";
|
||||
import CheckoutForm from "@/components/PaymentPage/methods/CheckoutForm";
|
||||
import { ResponseGet } from "@/api/resources/SinglePayment";
|
||||
import Loader, { LoaderColor } from "@/components/Loader";
|
||||
|
||||
const currentProductKey = "skip.trial.subscription.aura";
|
||||
const returnUrl = `${window.location.host}/palmistry/premium-bundle`;
|
||||
@ -31,6 +32,7 @@ export default function DiscountScreen() {
|
||||
const [product, setProduct] = React.useState<ResponseGet>();
|
||||
const [clientSecret, setClientSecret] = React.useState<string | null>(null);
|
||||
const [stripePublicKey, setStripePublicKey] = React.useState<string>("");
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
|
||||
const goPremiumBundle = () => {
|
||||
navigate(routes.client.palmistryPremiumBundle());
|
||||
@ -78,34 +80,42 @@ export default function DiscountScreen() {
|
||||
key,
|
||||
};
|
||||
|
||||
const response = await api.createSinglePayment({
|
||||
token: token,
|
||||
data: {
|
||||
user: {
|
||||
id: user.id,
|
||||
email: user.email,
|
||||
name: user.username || "",
|
||||
sign: user.profile?.sign?.sign || "",
|
||||
age: user.profile.age?.years || 0,
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await api.createSinglePayment({
|
||||
token: token,
|
||||
data: {
|
||||
user: {
|
||||
id: user.id,
|
||||
email: user.email,
|
||||
name: user.username || "",
|
||||
sign: user.profile?.sign?.sign || "",
|
||||
age: user.profile.age?.years || 0,
|
||||
},
|
||||
partner: {
|
||||
sign: "",
|
||||
age: 0,
|
||||
},
|
||||
paymentInfo,
|
||||
return_url: returnUrl,
|
||||
},
|
||||
partner: {
|
||||
sign: "",
|
||||
age: 0,
|
||||
},
|
||||
paymentInfo,
|
||||
return_url: returnUrl,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
if (
|
||||
("paymentIntent" in response &&
|
||||
response.paymentIntent.status === "paid") ||
|
||||
("payment" in response && response.payment.status === "paid")
|
||||
) {
|
||||
goPremiumBundle();
|
||||
} else if ("paymentIntent" in response) {
|
||||
setClientSecret(response.paymentIntent.data.client_secret);
|
||||
setStripePublicKey(response.paymentIntent.data.public_key);
|
||||
if (
|
||||
("paymentIntent" in response &&
|
||||
response.paymentIntent.status === "paid") ||
|
||||
("payment" in response && response.payment.status === "paid") ||
|
||||
("invoiceId" in response && response.invoiceId === "paid")
|
||||
) {
|
||||
goPremiumBundle();
|
||||
} else if ("paymentIntent" in response) {
|
||||
setClientSecret(response.paymentIntent.data.client_secret);
|
||||
setStripePublicKey(response.paymentIntent.data.public_key);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Error: ", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
@ -123,14 +133,14 @@ export default function DiscountScreen() {
|
||||
<div className="discount-screen__blocks">
|
||||
<section className="discount-screen__block">
|
||||
<span className="discount-screen__price-block">
|
||||
€19 for <br /> 1-week plan
|
||||
$19 for <br /> 1-week plan
|
||||
</span>
|
||||
|
||||
<div className="discount-screen__details">
|
||||
<span className="discount-screen__details-name">
|
||||
Total savings
|
||||
</span>
|
||||
<span className="discount-screen__details-value">€0</span>
|
||||
<span className="discount-screen__details-value">$0</span>
|
||||
</div>
|
||||
|
||||
<div className="discount-screen__details">
|
||||
@ -151,14 +161,14 @@ export default function DiscountScreen() {
|
||||
<div className="discount-screen__header-block">save 33%</div>
|
||||
|
||||
<span className="discount-screen__price-block">
|
||||
€{price} for <br /> 1-week plan
|
||||
${price} for <br /> 1-week plan
|
||||
</span>
|
||||
|
||||
<div className="discount-screen__details">
|
||||
<span className="discount-screen__details-name">
|
||||
Total savings
|
||||
</span>
|
||||
<span className="discount-screen__details-value">€6.27</span>
|
||||
<span className="discount-screen__details-value">$6.27</span>
|
||||
</div>
|
||||
|
||||
<div className="discount-screen__details">
|
||||
@ -166,8 +176,21 @@ export default function DiscountScreen() {
|
||||
<span className="discount-screen__details-value">no</span>
|
||||
</div>
|
||||
|
||||
<button className="discount-screen__button" onClick={buy}>
|
||||
Pay now and <br /> skip trial
|
||||
<button
|
||||
className="discount-screen__button"
|
||||
onClick={buy}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader
|
||||
color={LoaderColor.White}
|
||||
className="discount-screen__loader"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
Pay now and <br /> skip trial
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -12,6 +12,7 @@ import { useApi } from "@/api";
|
||||
import { useAuth } from "@/auth";
|
||||
import CheckoutForm from "@/components/PaymentPage/methods/CheckoutForm";
|
||||
import { ResponseGet } from "@/api/resources/SinglePayment";
|
||||
import Loader, { LoaderColor } from "@/components/Loader";
|
||||
|
||||
const currentProductKey = "premium.bundle.aura";
|
||||
const returnUrl = window.location.host;
|
||||
@ -27,6 +28,7 @@ export default function PremiumBundleScreen() {
|
||||
const [isSuccess] = React.useState(false);
|
||||
const [clientSecret, setClientSecret] = React.useState<string | null>(null);
|
||||
const [stripePublicKey, setStripePublicKey] = React.useState<string>("");
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
(async () => {
|
||||
@ -40,7 +42,7 @@ export default function PremiumBundleScreen() {
|
||||
setProduct(product);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
@ -54,37 +56,45 @@ export default function PremiumBundleScreen() {
|
||||
|
||||
const { _id, key } = product;
|
||||
|
||||
const response = await api.createSinglePayment({
|
||||
token: token,
|
||||
data: {
|
||||
user: {
|
||||
id: user.id,
|
||||
email: user.email,
|
||||
name: user.username || "",
|
||||
sign: user.profile?.sign?.sign || "",
|
||||
age: user.profile.age?.years || 0,
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await api.createSinglePayment({
|
||||
token: token,
|
||||
data: {
|
||||
user: {
|
||||
id: user.id,
|
||||
email: user.email,
|
||||
name: user.username || "",
|
||||
sign: user.profile?.sign?.sign || "",
|
||||
age: user.profile.age?.years || 0,
|
||||
},
|
||||
partner: {
|
||||
sign: "",
|
||||
age: 0,
|
||||
},
|
||||
paymentInfo: {
|
||||
productId: _id,
|
||||
key,
|
||||
},
|
||||
return_url: returnUrl,
|
||||
},
|
||||
partner: {
|
||||
sign: "",
|
||||
age: 0,
|
||||
},
|
||||
paymentInfo: {
|
||||
productId: _id,
|
||||
key,
|
||||
},
|
||||
return_url: returnUrl,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
if (
|
||||
("paymentIntent" in response &&
|
||||
response.paymentIntent.status === "paid") ||
|
||||
("payment" in response && response.payment.status === "paid")
|
||||
) {
|
||||
goHome();
|
||||
} else if ("paymentIntent" in response) {
|
||||
setClientSecret(response.paymentIntent.data.client_secret);
|
||||
setStripePublicKey(response.paymentIntent.data.public_key);
|
||||
if (
|
||||
("paymentIntent" in response &&
|
||||
response.paymentIntent.status === "paid") ||
|
||||
("payment" in response && response.payment.status === "paid") ||
|
||||
("invoiceId" in response && response.invoiceId === "paid")
|
||||
) {
|
||||
goHome();
|
||||
} else if ("paymentIntent" in response) {
|
||||
setClientSecret(response.paymentIntent.data.client_secret);
|
||||
setStripePublicKey(response.paymentIntent.data.public_key);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Error: ", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
@ -199,9 +209,9 @@ export default function PremiumBundleScreen() {
|
||||
|
||||
<div className="premium-bundle-screen__subsection">
|
||||
<span className="premium-bundle-screen__one-time-price">
|
||||
One-time price of €19!
|
||||
One-time price of $19!
|
||||
</span>
|
||||
<p>Original price is €45. Save 58%!</p>
|
||||
<p>Original price is $45. Save 58%!</p>
|
||||
</div>
|
||||
|
||||
<div className="premium-bundle-screen__subsection">
|
||||
@ -215,21 +225,31 @@ export default function PremiumBundleScreen() {
|
||||
<button
|
||||
className="premium-bundle-screen__button premium-bundle-screen__button-active premium-bundle-screen__buy-button"
|
||||
onClick={buy}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<svg
|
||||
width="13"
|
||||
height="16"
|
||||
viewBox="0 0 13 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M11.5556 6.24219H1.44444C0.6467 6.24219 0 6.97481 0 7.87855V13.6058C0 14.5096 0.6467 15.2422 1.44444 15.2422H11.5556C12.3533 15.2422 13 14.5096 13 13.6058V7.87855C13 6.97481 12.3533 6.24219 11.5556 6.24219Z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M6.5 0.242188C4.29086 0.242188 2.5 2.03305 2.5 4.24219V8.24219H10.5V4.24219C10.5 2.03305 8.70914 0.242188 6.5 0.242188ZM6.5 1.24219C4.84315 1.24219 3.5 2.58533 3.5 4.24219V7.24219H9.5V4.24219C9.5 2.58533 8.15685 1.24219 6.5 1.24219Z"
|
||||
{isLoading ? (
|
||||
<Loader
|
||||
color={LoaderColor.White}
|
||||
className="discount-screen__loader"
|
||||
/>
|
||||
</svg>{" "}
|
||||
Buy now
|
||||
) : (
|
||||
<>
|
||||
<svg
|
||||
width="13"
|
||||
height="16"
|
||||
viewBox="0 0 13 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M11.5556 6.24219H1.44444C0.6467 6.24219 0 6.97481 0 7.87855V13.6058C0 14.5096 0.6467 15.2422 1.44444 15.2422H11.5556C12.3533 15.2422 13 14.5096 13 13.6058V7.87855C13 6.97481 12.3533 6.24219 11.5556 6.24219Z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M6.5 0.242188C4.29086 0.242188 2.5 2.03305 2.5 4.24219V8.24219H10.5V4.24219C10.5 2.03305 8.70914 0.242188 6.5 0.242188ZM6.5 1.24219C4.84315 1.24219 3.5 2.58533 3.5 4.24219V7.24219H9.5V4.24219C9.5 2.58533 8.15685 1.24219 6.5 1.24219Z"
|
||||
/>
|
||||
</svg>{" "}
|
||||
Buy now
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user