Add new screens in palmistry
This commit is contained in:
Evgenij Ponomarev
parent
d6022cd880
commit
99ace176e4
113
src/components/palmistry/discount-screen/discount-screen.css
Normal file
113
src/components/palmistry/discount-screen/discount-screen.css
Normal file
@ -0,0 +1,113 @@
|
||||
.discount-screen {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
max-width: 428px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.discount-screen__header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 24px 0 11px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.discount-screen__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 32px 32px;
|
||||
}
|
||||
|
||||
.discount-screen__content * {
|
||||
font-family: OpenSans Regular;
|
||||
}
|
||||
|
||||
.discount-screen__title {
|
||||
font-size: 20px;
|
||||
margin-top: 23px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.discount-screen__blocks {
|
||||
gap: 7px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.discount-screen__block {
|
||||
gap: 12px;
|
||||
width: 160px;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.discount-screen__block:first-child {
|
||||
border: 2px solid #c7c7c7;
|
||||
}
|
||||
|
||||
.discount-screen__block:last-child {
|
||||
padding-top: 0;
|
||||
border: 2px solid #066fde;
|
||||
}
|
||||
|
||||
.discount-screen__price-block {
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.discount-screen__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.discount-screen__details-name {
|
||||
color: #8e8e93;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.discount-screen__details-value {
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.discount-screen__button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 132px;
|
||||
height: fit-content;
|
||||
min-height: 38px;
|
||||
background: #066fde;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.discount-screen__header-block {
|
||||
top: 0;
|
||||
color: #fff;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
background: #066fde;
|
||||
align-items: center;
|
||||
width: calc(100% + 32px);
|
||||
justify-content: center;
|
||||
}
|
||||
78
src/components/palmistry/discount-screen/discount-screen.tsx
Normal file
78
src/components/palmistry/discount-screen/discount-screen.tsx
Normal file
@ -0,0 +1,78 @@
|
||||
import React from "react";
|
||||
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import './discount-screen.css';
|
||||
|
||||
import routes from '@/routes';
|
||||
import HeaderLogo from '@/components/palmistry/header-logo/header-logo';
|
||||
|
||||
export default function DiscountScreen() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const userHasWeeklySubscription = false;
|
||||
|
||||
const goPremiumBundle = () => {
|
||||
navigate(routes.client.palmistryPremiumBundle());
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
if (userHasWeeklySubscription) {
|
||||
goPremiumBundle();
|
||||
}
|
||||
}, [userHasWeeklySubscription]);
|
||||
|
||||
return (
|
||||
<div className="discount-screen">
|
||||
<div className="discount-screen__header">
|
||||
<HeaderLogo />
|
||||
</div>
|
||||
|
||||
<div className="discount-screen__content">
|
||||
<span className="discount-screen__title">
|
||||
Not planning on looking back?
|
||||
</span>
|
||||
|
||||
<div className="discount-screen__blocks">
|
||||
<section className="discount-screen__block">
|
||||
<span className="discount-screen__price-block">€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>
|
||||
</div>
|
||||
|
||||
<div className="discount-screen__details">
|
||||
<span className="discount-screen__details-name">7-day trial</span>
|
||||
<span className="discount-screen__details-value">yes</span>
|
||||
</div>
|
||||
|
||||
<button className="discount-screen__button" style={{ minHeight: '38px' }} onClick={goPremiumBundle}>
|
||||
Start trial
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section className="discount-screen__block">
|
||||
<div className="discount-screen__header-block">save 33%</div>
|
||||
|
||||
<span className="discount-screen__price-block">€12.73 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>
|
||||
</div>
|
||||
|
||||
<div className="discount-screen__details">
|
||||
<span className="discount-screen__details-name">3-day trial</span>
|
||||
<span className="discount-screen__details-value">no</span>
|
||||
</div>
|
||||
|
||||
<button className="discount-screen__button">
|
||||
Pay now and <br /> skip trial
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -572,6 +572,13 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.palmistry-container_type_payment {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.palmistry-container_type_discount {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes personal-statement-fade-in {
|
||||
0% {
|
||||
|
||||
@ -26,15 +26,6 @@
|
||||
font-family: OpenSans Regular;
|
||||
}
|
||||
|
||||
.payment-screen__widget {
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
box-shadow: 0 -2px 16px rgba(18, 22, 32, .1);
|
||||
max-width: 428px;
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.payment-screen__about-us {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
@ -191,3 +182,47 @@
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.payment-screen__widget {
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
box-shadow: 0 -2px 16px rgba(18, 22, 32, .1);
|
||||
max-width: 428px;
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.payment-screen__widget_success {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.payment-screen__success {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.payment-screen__success-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
max-width: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.payment-screen__success-text {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
color: #121620;
|
||||
}
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import React from "react";
|
||||
|
||||
import { useSelector } from "react-redux";
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import './payment-screen.css';
|
||||
|
||||
import routes from '@/routes';
|
||||
import useSteps, { Step } from '@/hooks/palmistry/use-steps';
|
||||
import useTimer from '@/hooks/palmistry/use-timer';
|
||||
import HeaderLogo from '@/components/palmistry/header-logo/header-logo';
|
||||
@ -15,11 +17,22 @@ const getFormattedPrice = (price: number) => {
|
||||
}
|
||||
|
||||
export default function PaymentScreen() {
|
||||
const navigate = useNavigate();
|
||||
const time = useTimer();
|
||||
const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
|
||||
// const subscriptionStatus = useSelector(selectors.selectStatus);
|
||||
const subscriptionStatus = "subscribed";
|
||||
|
||||
const steps = useSteps();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (subscriptionStatus === "subscribed") {
|
||||
setTimeout(() => {
|
||||
navigate(routes.client.palmistryDiscount());
|
||||
}, 1500);
|
||||
}
|
||||
}, [subscriptionStatus]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!activeSubPlanFromStore) {
|
||||
steps.setFirstUnpassedStep(Step.SubscriptionPlan);
|
||||
@ -40,8 +53,8 @@ export default function PaymentScreen() {
|
||||
<div className="payment-screen__content">
|
||||
<div className="payment-screen__about-us">
|
||||
<span>
|
||||
The #1 Astrology app trusted by over{' '}
|
||||
<span className="payment-screen__about-us-accent">25 million</span>{' '}
|
||||
The #1 Astrology app trusted by over{" "}
|
||||
<span className="payment-screen__about-us-accent">25 million</span>{" "}
|
||||
people.
|
||||
</span>
|
||||
|
||||
@ -114,7 +127,9 @@ export default function PaymentScreen() {
|
||||
<div className="payment-screen__total-today">
|
||||
<span>Total today</span>
|
||||
|
||||
<span className="payment-screen__trial-price">${getFormattedPrice(trialPrice)}</span>
|
||||
<span className="payment-screen__trial-price">
|
||||
${getFormattedPrice(trialPrice)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="payment-screen__promocode">
|
||||
@ -144,11 +159,13 @@ export default function PaymentScreen() {
|
||||
|
||||
<div className="payment-screen__prices">
|
||||
<span>
|
||||
You will be charged only <b>${getFormattedPrice(trialPrice)} for your 7-day trial.</b>
|
||||
You will be charged only{" "}
|
||||
<b>${getFormattedPrice(trialPrice)} for your 7-day trial.</b>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Then <s>${getFormattedPrice(fullPrice)}</s> ${getFormattedPrice(trialPrice)} per week. Save $
|
||||
Then <s>${getFormattedPrice(fullPrice)}</s> $
|
||||
{getFormattedPrice(trialPrice)} per week. Save $
|
||||
{getFormattedPrice(fullPrice - trialPrice)} every week.
|
||||
</span>
|
||||
|
||||
@ -224,8 +241,27 @@ export default function PaymentScreen() {
|
||||
<style>{`.palmistry-payment-modal { max-height: calc(100dvh - 40px) }`}</style>
|
||||
|
||||
{activeSubPlanFromStore && (
|
||||
<div className="payment-screen__widget">
|
||||
<PaymentModal />
|
||||
<div className={`payment-screen__widget${subscriptionStatus === "subscribed" ? " payment-screen__widget_success" : ""}`}>
|
||||
{subscriptionStatus !== "subscribed" && <PaymentModal />}
|
||||
|
||||
{subscriptionStatus === "subscribed" && (
|
||||
<div className="payment-screen__success">
|
||||
<svg
|
||||
className="payment-screen__success-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="payment-screen__success-text">Payment success</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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 (
|
||||
<div className="premium-bundle-screen">
|
||||
<div className="premium-bundle-screen__header">
|
||||
<HeaderLogo />
|
||||
</div>
|
||||
|
||||
<div className="premium-bundle-screen__content">
|
||||
<button className="premium-bundle-screen__button-skip" onClick={goHome}>Skip ></button>
|
||||
|
||||
<span className="premium-bundle-screen__title">Get extra insights with our Premium Bundle</span>
|
||||
|
||||
<span className="premium-bundle-screen__subtitle">
|
||||
Exclusive offer: recommended for get more insights about what future
|
||||
holds for you.
|
||||
</span>
|
||||
|
||||
<div className="premium-bundle-screen__block-description">
|
||||
<span className="premium-bundle-screen__list-title">What your Premium Bundle will include:</span>
|
||||
|
||||
<div className="premium-bundle-screen__item">
|
||||
<div className="premium-bundle-screen__icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_840_6840)">
|
||||
<path
|
||||
d="M19.4064 7.01573L15.4441 6.43996L13.672 2.84952C12.9876 1.46263 11.0085 1.46306 10.3243 2.84948L8.55231 6.43992L4.59001 7.01573C3.0594 7.2381 2.44844 9.12037 3.55553 10.1996L6.42269 12.9944L5.74586 16.9406C5.48444 18.465 7.08564 19.6277 8.45425 18.9084L11.9982 17.0451L15.5423 18.9084C16.909 19.6268 18.512 18.4648 18.2507 16.9406L17.5738 12.9944L20.441 10.1996C21.5483 9.11995 20.9363 7.23806 19.4064 7.01573ZM19.324 9.0539L16.1557 12.1422C15.9672 12.326 15.8812 12.5908 15.9257 12.8503L16.6736 17.2111C16.7111 17.4301 16.4833 17.5955 16.2867 17.4922L12.3704 15.4334C12.1374 15.3109 11.8589 15.3109 11.6259 15.4334L7.70964 17.4922C7.51295 17.5956 7.28519 17.4301 7.32273 17.2111L8.07067 12.8503C8.11516 12.5908 8.02914 12.326 7.84061 12.1422L4.67228 9.0539C4.51314 8.89879 4.60019 8.63104 4.82008 8.59902L9.19858 7.96279C9.45911 7.92491 9.68439 7.76132 9.80092 7.52521L11.7591 3.55757C11.8574 3.35845 12.139 3.35831 12.2373 3.55762L14.1955 7.52521C14.312 7.76132 14.5373 7.92496 14.7978 7.96279L19.1763 8.59902C19.3961 8.63104 19.4831 8.89884 19.324 9.0539Z"
|
||||
fill="#FF9649"
|
||||
/>
|
||||
<path
|
||||
d="M6.31805 2.21025L5.36128 0.893391C5.1015 0.536016 4.60125 0.456703 4.24388 0.716484C3.88646 0.976172 3.80719 1.47647 4.06692 1.83389L5.02369 3.1507C5.28357 3.50827 5.78381 3.58725 6.1411 3.32761C6.49852 3.06797 6.57778 2.56767 6.31805 2.21025Z"
|
||||
fill="#FF9649"
|
||||
/>
|
||||
<path
|
||||
d="M3.13954 14.0113C3.00309 13.5911 2.55177 13.361 2.13149 13.4977L0.551992 14.0109C0.131805 14.1475 -0.0981173 14.5987 0.0383827 15.019C0.175117 15.4399 0.62718 15.669 1.04643 15.5326L2.62593 15.0194C3.04616 14.8828 3.27609 14.4315 3.13954 14.0113Z"
|
||||
fill="#FF9649"
|
||||
/>
|
||||
<path
|
||||
d="M19.7573 0.716518C19.3999 0.456831 18.8996 0.536002 18.6399 0.893424L17.6831 2.21024C17.4234 2.56766 17.5027 3.068 17.8601 3.32764C18.2176 3.58742 18.7179 3.50802 18.9775 3.15074L19.9342 1.83392C20.1939 1.4765 20.1147 0.976159 19.7573 0.716518Z"
|
||||
fill="#FF9649"
|
||||
/>
|
||||
<path
|
||||
d="M23.4452 14.0109L21.8658 13.4977C21.4456 13.3609 20.9943 13.5911 20.8577 14.0113C20.7212 14.4315 20.9511 14.8829 21.3713 15.0194L22.9508 15.5326C23.3701 15.669 23.8221 15.4398 23.9588 15.019C24.0954 14.5988 23.8654 14.1475 23.4452 14.0109Z"
|
||||
fill="#FF9649"
|
||||
/>
|
||||
<path
|
||||
d="M12.0021 20.2128C11.5603 20.2128 11.2021 20.5709 11.2021 21.0127V22.6364C11.2021 23.0782 11.5603 23.4364 12.0021 23.4364C12.4439 23.4364 12.8021 23.0782 12.8021 22.6364V21.0127C12.8021 20.5709 12.4439 20.2128 12.0021 20.2128Z"
|
||||
fill="#FF9649"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_840_6840">
|
||||
<rect width="24" height="24" fill="white"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p>Guide to Modern Astrology</p>
|
||||
</div>
|
||||
|
||||
<div className="premium-bundle-screen__item">
|
||||
<div className="premium-bundle-screen__icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_840_6862)">
|
||||
<path
|
||||
d="M21.0843 1.45852C20.8093 0.613031 20.0141 0 19.0781 0C18.1615 0 17.3799 0.587906 17.0897 1.40625H13.9884C13.6982 0.587906 12.9166 0 12 0C11.0834 0 10.3018 0.587906 10.0116 1.40625H6.91031C6.62006 0.587906 5.83852 0 4.92188 0C3.98587 0 3.19073 0.613031 2.91572 1.45852C1.26216 1.74413 0 3.18792 0 4.92188V21.8906C0 23.0537 0.946266 24 2.10938 24H21.8906C23.0537 24 24 23.0537 24 21.8906V4.92188C24 3.18792 22.7378 1.74413 21.0843 1.45852ZM18.375 2.10938C18.375 1.72167 18.6904 1.40625 19.0781 1.40625C19.4658 1.40625 19.7812 1.72167 19.7812 2.10938V3.51562C19.7812 3.90333 19.4658 4.21875 19.0781 4.21875C18.6904 4.21875 18.375 3.90333 18.375 3.51562V2.10938ZM11.2969 2.10938C11.2969 1.72167 11.6123 1.40625 12 1.40625C12.3877 1.40625 12.7031 1.72167 12.7031 2.10938V3.51562C12.7031 3.90333 12.3877 4.21875 12 4.21875C11.6123 4.21875 11.2969 3.90333 11.2969 3.51562V2.10938ZM4.21875 2.10938C4.21875 1.72167 4.53417 1.40625 4.92188 1.40625C5.30958 1.40625 5.625 1.72167 5.625 2.10938V3.51562C5.625 3.90333 5.30958 4.21875 4.92188 4.21875C4.53417 4.21875 4.21875 3.90333 4.21875 3.51562V2.10938ZM22.5938 21.8906C22.5938 22.2783 22.2783 22.5938 21.8906 22.5938H2.10938C1.72167 22.5938 1.40625 22.2783 1.40625 21.8906V8.48438H22.5938V21.8906ZM22.5938 7.07812H1.40625V4.92188C1.40625 4.00523 1.99411 3.22369 2.8125 2.93344V3.51562C2.8125 4.67873 3.75877 5.625 4.92188 5.625C6.08498 5.625 7.03125 4.67873 7.03125 3.51562V2.8125H9.89062V3.51562C9.89062 4.67873 10.8369 5.625 12 5.625C13.1631 5.625 14.1094 4.67873 14.1094 3.51562V2.8125H16.9688V3.51562C16.9688 4.67873 17.915 5.625 19.0781 5.625C20.2412 5.625 21.1875 4.67873 21.1875 3.51562V2.93344C22.0059 3.22369 22.5938 4.00523 22.5938 4.92188V7.07812Z"
|
||||
fill="#FF9649"
|
||||
/>
|
||||
<path
|
||||
d="M9.34435 14.2438L11.091 12.4972C11.5319 12.0562 11.2198 11.2969 10.5938 11.2969H6.375C5.98669 11.2969 5.67188 11.6117 5.67188 12C5.67188 12.3883 5.98669 12.7031 6.375 12.7031H8.89628L7.2841 14.3153C6.8431 14.7563 7.15524 15.5156 7.78126 15.5156H8.48438C9.25979 15.5156 9.89064 16.1465 9.89064 16.9219C9.89064 17.6973 9.25979 18.3281 8.48438 18.3281C7.70898 18.3281 7.07813 17.6973 7.07813 16.9219C7.07813 16.5336 6.76332 16.2188 6.375 16.2188C5.98669 16.2188 5.67188 16.5336 5.67188 16.9219C5.67188 18.4727 6.93357 19.7344 8.48438 19.7344C10.0352 19.7344 11.2969 18.4727 11.2969 16.9219C11.2969 15.6708 10.4759 14.608 9.34435 14.2438Z"
|
||||
fill="#FF9649"
|
||||
/>
|
||||
<path
|
||||
d="M19.0312 18.3283H16.9219V12.0001C16.9219 11.3766 16.1641 11.0602 15.7216 11.503L12.9091 14.3155C12.6345 14.5901 12.6345 15.0352 12.9091 15.3098C13.1836 15.5844 13.6289 15.5844 13.9035 15.3098L15.5156 13.6976V18.3283H13.4062C13.0179 18.3283 12.7031 18.6431 12.7031 19.0314C12.7031 19.4197 13.0179 19.7345 13.4062 19.7345H19.0312C19.4196 19.7345 19.7344 19.4197 19.7344 19.0314C19.7344 18.6431 19.4196 18.3283 19.0312 18.3283Z"
|
||||
fill="#FF9649"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_840_6862">
|
||||
<rect width="24" height="24" fill="white"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p>Annual Forecast for 2024</p>
|
||||
</div>
|
||||
|
||||
<div className="premium-bundle-screen__subsection">
|
||||
<span className="premium-bundle-screen__one-time-price">One-time price of €19!</span>
|
||||
<p>Original price is €45. Save 58%!</p>
|
||||
</div>
|
||||
|
||||
<div className="premium-bundle-screen__subsection">
|
||||
<p>
|
||||
These plans are <b>yours to keep</b> even if you decide Hint isn’t
|
||||
right for you.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="premium-bundle-screen__button premium-bundle-screen__button-active premium-bundle-screen__buy-button">
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -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();
|
||||
|
||||
@ -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 (
|
||||
<div className="steps-manager">
|
||||
{steps.currentNumber >= steps.progressBarRange[0] && steps.currentNumber <= steps.progressBarRange[1] && (
|
||||
@ -79,13 +87,15 @@ export default function StepsManager() {
|
||||
)}
|
||||
|
||||
<main className="steps-manager__main">
|
||||
{steps.current === Step.Payment && (
|
||||
{nonSliderSteps.includes(steps.current as Step) && (
|
||||
<PalmistryContainerWrapper currentStep={steps.current as Step}>
|
||||
<PaymentScreen/>
|
||||
{steps.current === Step.Payment && <PaymentScreen/>}
|
||||
{steps.current === Step.Discount && <DiscountScreen/>}
|
||||
{steps.current === Step.PremiumBundle && <PremiumBundleScreen/>}
|
||||
</PalmistryContainerWrapper>
|
||||
)}
|
||||
|
||||
{steps.current !== Step.Payment && (
|
||||
{!nonSliderSteps.includes(steps.current as Step) && (
|
||||
<AnimatePresence
|
||||
mode="wait"
|
||||
initial={false}
|
||||
|
||||
@ -23,6 +23,8 @@ export enum Step {
|
||||
SubscriptionPlan = 'subscription-plan',
|
||||
Paywall = 'paywall',
|
||||
Payment = 'payment',
|
||||
Discount = 'discount',
|
||||
PremiumBundle = 'premium-bundle',
|
||||
}
|
||||
|
||||
export const sortedList = [
|
||||
@ -44,6 +46,8 @@ export const sortedList = [
|
||||
Step.SubscriptionPlan,
|
||||
Step.Paywall,
|
||||
Step.Payment,
|
||||
Step.Discount,
|
||||
Step.PremiumBundle,
|
||||
];
|
||||
|
||||
export enum GenderChoice {
|
||||
|
||||
@ -27,6 +27,8 @@ const routes = {
|
||||
palmistrySubscriptionPlan: () => [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(),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user