- You will be charged only ${getFormattedPrice(trialPrice)} for your 7-day trial.
+ You will be charged only{" "}
+ ${getFormattedPrice(trialPrice)} for your 7-day trial.
- Then ${getFormattedPrice(fullPrice)} ${getFormattedPrice(trialPrice)} per week. Save $
+ Then ${getFormattedPrice(fullPrice)} $
+ {getFormattedPrice(trialPrice)} per week. Save $
{getFormattedPrice(fullPrice - trialPrice)} every week.
@@ -224,8 +241,27 @@ export default function PaymentScreen() {
{activeSubPlanFromStore && (
-
-
+
+ {subscriptionStatus !== "subscribed" &&
}
+
+ {subscriptionStatus === "subscribed" && (
+
+
+
+
+
+
Payment success
+
+ )}
)}
diff --git a/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.css b/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.css
new file mode 100644
index 0000000..b015746
--- /dev/null
+++ b/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.css
@@ -0,0 +1,139 @@
+.premium-bundle-screen {
+ margin: 0 auto;
+ position: relative;
+ max-width: 428px;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.premium-bundle-screen__header {
+ display: flex;
+ width: 100%;
+ padding: 24px 0 11px;
+ justify-content: center;
+}
+
+.premium-bundle-screen__content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ padding: 0 32px 32px;
+ padding-bottom: 20px;
+}
+
+.premium-bundle-screen__button-skip {
+ height: 30px;
+ border: none;
+ display: flex;
+ padding: 0 8px;
+ color: #066fde;
+ margin-top: 12px;
+ font-weight: 600;
+ margin-left: auto;
+ align-items: center;
+ background: #eff2fd;
+ border-radius: 20px;
+}
+
+.premium-bundle-screen__title {
+ margin: 8px 0;
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 26px;
+ text-align: center;
+ letter-spacing: .2px;
+}
+
+.premium-bundle-screen__subtitle {
+ font-size: 16px;
+ line-height: 18px;
+ text-align: center;
+}
+
+.premium-bundle-screen__block-description {
+ width: 100%;
+ position: relative;
+ background: white;
+ z-index: 3;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ box-shadow: 0 0 8px #0003;
+ border-radius: 8px;
+ padding: 16px;
+ text-align: center;
+ margin: 24px 0;
+ gap: 12px;
+}
+
+.premium-bundle-screen__block-description p {
+ font-size: 14px;
+ line-height: 18px;
+}
+
+.premium-bundle-screen__list-title {
+ font-size: 14px;
+ line-height: 18px;
+ font-weight: 700;
+}
+
+.premium-bundle-screen__item {
+ display: flex;
+ align-items: center;
+ align-self: flex-start;
+}
+
+.premium-bundle-screen__icon {
+ display: flex;
+ width: 40px;
+ height: 40px;
+ background: #ffeede;
+ border-radius: 20px;
+ margin-right: 16px;
+ align-items: center;
+ justify-content: center;
+}
+
+.premium-bundle-screen__subsection {
+ width: 100%;
+ padding: 12px;
+ border-top: 2px solid #e0e3eb;
+ margin-bottom: -12px;
+}
+
+.premium-bundle-screen__one-time-price {
+ color: #066fde;
+ font-weight: 600;
+ line-height: 24px;
+}
+
+.premium-bundle-screen__button {
+ font-weight: 500;
+ background: #eff2fd;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ padding: 12px 16px;
+ max-width: 400px;
+ min-width: 250px;
+ width: 100%;
+ min-height: 60px;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ font-size: 18px;
+ line-height: 20px;
+ color: #121620;
+ position: relative;
+ background: #066fde;
+ color: #fff!important;
+ position: relative;
+}
+
+.premium-bundle-screen__button svg {
+ fill: #fff;
+ margin-right: 8px;
+}
diff --git a/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.tsx b/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.tsx
new file mode 100644
index 0000000..bed1891
--- /dev/null
+++ b/src/components/palmistry/premium-bundle-screen/premium-bundle-screen.tsx
@@ -0,0 +1,156 @@
+import React from "react";
+
+import { useNavigate } from 'react-router-dom';
+
+import './premium-bundle-screen.css';
+
+import routes from '@/routes';
+import HeaderLogo from '@/components/palmistry/header-logo/header-logo';
+
+export default function PremiumBundleScreen() {
+ const navigate = useNavigate();
+
+ const userHasPremiumBundle = false;
+
+ React.useEffect(() => {
+ if (userHasPremiumBundle) {
+ navigate(routes.client.home());
+ }
+ }, [userHasPremiumBundle]);
+
+ const goHome = () => {
+ navigate(routes.client.home());
+ };
+
+ return (
+
+
+
+
+
+
+
Skip >
+
+
Get extra insights with our Premium Bundle
+
+
+ Exclusive offer: recommended for get more insights about what future
+ holds for you.
+
+
+
+
What your Premium Bundle will include:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Guide to Modern Astrology
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Annual Forecast for 2024
+
+
+
+
One-time price of €19!
+
Original price is €45. Save 58%!
+
+
+
+
+ These plans are yours to keep even if you decide Hint isn’t
+ right for you.
+
+
+
+
+
+
+
+
+ {" "}
+ Buy now
+
+
+
+ );
+}
diff --git a/src/components/palmistry/step-upload/step-upload.tsx b/src/components/palmistry/step-upload/step-upload.tsx
index e20db97..55674ef 100644
--- a/src/components/palmistry/step-upload/step-upload.tsx
+++ b/src/components/palmistry/step-upload/step-upload.tsx
@@ -52,6 +52,14 @@ export default function StepUpload(props: Props) {
React.useEffect(() => {
if (palmPhoto) {
+ fetch(
+ 'https://palmistry.hint.app/api/processing',
+ {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ image: palmPhoto }),
+ },
+ );
setIsUpladProcessing(false);
steps.saveCurrent(palmPhoto);
steps.goNext();
diff --git a/src/components/palmistry/steps-manager/steps-manager.tsx b/src/components/palmistry/steps-manager/steps-manager.tsx
index 11b17e8..dfc43c1 100644
--- a/src/components/palmistry/steps-manager/steps-manager.tsx
+++ b/src/components/palmistry/steps-manager/steps-manager.tsx
@@ -29,6 +29,8 @@ import StepEmail from '@/components/palmistry/step-email/step-email';
import StepSubscriptionPlan from '@/components/palmistry/step-subscription-plan/step-subscription-plan';
import StepPaywall from '@/components/palmistry/step-paywall/step-paywall';
import PaymentScreen from '@/components/palmistry/payment-screen/payment-screen';
+import DiscountScreen from '@/components/palmistry/discount-screen/discount-screen';
+import PremiumBundleScreen from '@/components/palmistry/premium-bundle-screen/premium-bundle-screen';
const PalmistryContainerWrapper = (props: { children: React.ReactNode, currentStep: Step }) => {
return (
@@ -62,7 +64,7 @@ export default function StepsManager() {
}, [steps.isInited]);
React.useEffect(() => {
- if (subscriptionStatus === "subscribed") {
+ if (subscriptionStatus === "subscribed" && steps.current !== Step.Payment) {
navigate(routes.client.home());
}
}, [subscriptionStatus]);
@@ -72,6 +74,12 @@ export default function StepsManager() {
modalIsOpen ? 'steps-manager__motion-div_no-transform' : '',
];
+ const nonSliderSteps = [
+ Step.Payment,
+ Step.Discount,
+ Step.PremiumBundle,
+ ];
+
return (
{steps.currentNumber >= steps.progressBarRange[0] && steps.currentNumber <= steps.progressBarRange[1] && (
@@ -79,13 +87,15 @@ export default function StepsManager() {
)}
- {steps.current === Step.Payment && (
+ {nonSliderSteps.includes(steps.current as Step) && (
-
+ {steps.current === Step.Payment && }
+ {steps.current === Step.Discount && }
+ {steps.current === Step.PremiumBundle && }
)}
- {steps.current !== Step.Payment && (
+ {!nonSliderSteps.includes(steps.current as Step) && (
[host, "palmistry", "subscription-plan"].join("/"),
palmistryPaywall: () => [host, "palmistry", "paywall"].join("/"),
palmistryPayment: () => [host, "palmistry", "payment"].join("/"),
+ palmistryDiscount: () => [host, "palmistry", "discount"].join("/"),
+ palmistryPremiumBundle: () => [host, "palmistry", "premium-bundle"].join("/"),
birthday: () => [host, "birthday"].join("/"),
didYouKnow: () => [host, "did-you-know"].join("/"),
freePeriodInfo: () => [host, "free-period"].join("/"),
@@ -289,6 +291,8 @@ export const hasNavbarFooter = (path: string) =>
export const withoutHeaderRoutes = [
routes.client.palmistryPayment(),
+ routes.client.palmistryDiscount(),
+ routes.client.palmistryPremiumBundle(),
routes.client.compatibility(),
routes.client.subscription(),
routes.client.paymentMethod(),