+ 
setIsOpenPrivacyModal(false)}
+ />
+
+
+ setIsOpenPrivacyModal(false)}
+ />
+
+
Special offer
@@ -47,7 +71,8 @@ function PaymentTable({ subPlan, buttonClick }: IPaymentTableProps) {
if you don't cancel prior to the end of the 3-day trial for the $
{getPriceFromTrial(subPlan?.trial)} you will automatically be charged
$19 every 2 weeks until you cancel in settings. Learn more about
- cancellation and refund policy in Subscription policy
+ cancellation and refund policy in{" "}
+ Subscription policy
);
diff --git a/src/components/pages/TrialPayment/components/PaymentTable/styles.module.css b/src/components/pages/TrialPayment/components/PaymentTable/styles.module.css
index 14f1a9c..6a8dd3d 100755
--- a/src/components/pages/TrialPayment/components/PaymentTable/styles.module.css
+++ b/src/components/pages/TrialPayment/components/PaymentTable/styles.module.css
@@ -80,6 +80,7 @@
.policy > a {
text-decoration: underline;
font-weight: 600;
+ cursor: pointer;
}
.discount {
@@ -91,3 +92,27 @@
color: rgb(130, 130, 130);
margin-right: 4px;
}
+
+.modal-container,
+.iframe {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.iframe {
+ pointer-events: all;
+}
+
+.cross {
+ position: fixed;
+ top: 60px;
+ right: 20px;
+ width: 36px;
+ height: 36px;
+ padding: 8px;
+ border-radius: 100%;
+ background-color: #fff;
+ z-index: 10;
+ cursor: pointer;
+}
diff --git a/src/components/pages/TryApp/components/AccessCodeApp/index.tsx b/src/components/pages/TryApp/components/AccessCodeApp/index.tsx
new file mode 100644
index 0000000..e8d1129
--- /dev/null
+++ b/src/components/pages/TryApp/components/AccessCodeApp/index.tsx
@@ -0,0 +1,19 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+
+function AccessCodeApp() {
+ return (
+ (360);
+
+ useEffect(() => {
+ if (["relationship", "married"].includes(flowChoice)) {
+ setMarginTopTitle(460);
+ setSingleOrWithPartner("partner");
+ return;
+ }
+ setSingleOrWithPartner("single");
+ setMarginTopTitle(340);
+ }, [flowChoice]);
+
+ const downloadApp = () => {
+ // TODO
+ window.location.href =
+ "https://apps.apple.com/us/app/aura-astrology-horoscope/id1601978549";
+ };
+
+ return (
+
+
+ Your Personalized Clarity & Love Reading is ready and available in the
+ app for your iPhone!
+
+ 
+ 1. Download App
+
+ Users love us
+
+
+ );
+}
+
+export default TryAppPage;
diff --git a/src/components/pages/TryApp/styles.module.css b/src/components/pages/TryApp/styles.module.css
new file mode 100644
index 0000000..2b74882
--- /dev/null
+++ b/src/components/pages/TryApp/styles.module.css
@@ -0,0 +1,48 @@
+.page {
+ background-color: #fff0f0;
+ height: fit-content;
+ min-height: 100vh;
+ min-height: 100dvh;
+ padding-top: 62px;
+ padding-bottom: 62px;
+}
+
+.download-app-title {
+ font-size: 24px;
+ line-height: 145%;
+ color: #333333;
+ font-weight: 700;
+ text-align: center;
+ margin-top: 32px;
+ margin-bottom: 16px;
+}
+
+.download-app-image {
+ width: 80%;
+ max-width: 270px;
+ height: 80px;
+ object-fit: cover;
+}
+
+.code-container {
+ font-size: 28px;
+ font-weight: 600;
+ padding: 12px;
+ width: 100%;
+ max-width: 200px;
+ background-color: rgba(175, 149, 241, 0.48);
+ border-radius: 48px;
+ text-align: center;
+}
+
+.code-description {
+ text-align: center;
+ line-height: 1.3;
+ font-weight: 500;
+ font-size: 18px;
+ margin-top: 12px;
+}
+
+.title {
+ font-weight: 700;
+}
diff --git a/src/components/pages/WorksForUs/styles.module.css b/src/components/pages/WorksForUs/styles.module.css
index 2b294a6..b87bb69 100644
--- a/src/components/pages/WorksForUs/styles.module.css
+++ b/src/components/pages/WorksForUs/styles.module.css
@@ -13,6 +13,7 @@
background-size: cover;
color: #fff;
padding-top: 64px;
+ background-color: #171717;
}
.title {
diff --git a/src/index.css b/src/index.css
index 4c9d270..14688f7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -168,7 +168,7 @@ div[class^="divider"] {
}
::-webkit-scrollbar {
- /* width: 13px; */
+ width: 0px;
}
::-webkit-scrollbar-track {
diff --git a/src/routes.ts b/src/routes.ts
index 8f35750..f4ba80c 100755
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -77,6 +77,8 @@ const routes = {
trialPaymentWithDiscount: () =>
[host, "trial-payment-with-discount"].join("/"),
+ tryApp: () => [host, "try-app"].join("/"),
+
// Email letters
email: (path: string) => [host, "email", path].join("/"),
notFound: () => [host, "404"].join("/"),
@@ -230,6 +232,7 @@ export const withoutFooterRoutes = [
routes.client.trialPaymentWithDiscount(),
routes.client.email("marketing-landing"),
routes.client.email("marketing-trial-payment"),
+ routes.client.tryApp(),
];
export const withoutFooterPartOfRoutes = [routes.client.questionnaire()];
@@ -294,6 +297,7 @@ export const withoutHeaderRoutes = [
routes.client.trialPaymentWithDiscount(),
routes.client.email("marketing-landing"),
routes.client.email("marketing-trial-payment"),
+ routes.client.tryApp(),
];
export const hasNoHeader = (path: string) => {
let result = true;
diff --git a/src/store/index.ts b/src/store/index.ts
index 68cdcd6..7eeca3f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -41,6 +41,11 @@ import compatibility, {
actions as compatibilityActions,
selectSelfName,
} from "./compatibility";
+import userConfig, {
+ actions as userConfigActions,
+ selectUserDeviceType,
+ selectIsShowTryApp,
+} from "./userConfig";
import compatibilities, {
actions as compatibilitiesActions,
selectCompatibilities,
@@ -72,6 +77,7 @@ export const actions = {
userCallbacks: userCallbacksActions,
onboardingConfig: onboardingConfigActions,
questionnaire: questionnaireActions,
+ userConfig: userConfigActions,
reset: createAction("reset"),
};
export const selectors = {
@@ -97,6 +103,8 @@ export const selectors = {
selectOnboardingNavbarFooter,
selectCompatibilities,
selectQuestionnaire,
+ selectUserDeviceType,
+ selectIsShowTryApp,
...formSelectors,
};
@@ -114,6 +122,7 @@ export const reducer = combineReducers({
siteConfig,
onboardingConfig,
questionnaire,
+ userConfig,
});
export type RootState = ReturnType;
diff --git a/src/store/siteConfig.ts b/src/store/siteConfig.ts
index 902ab51..485aacf 100644
--- a/src/store/siteConfig.ts
+++ b/src/store/siteConfig.ts
@@ -2,9 +2,9 @@ import { createSlice, createSelector } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";
export enum EPathsFromHome {
- compatibility,
- breath,
- navbar
+ compatibility,
+ breath,
+ navbar,
}
interface ISiteConfig {
@@ -17,7 +17,7 @@ interface ISiteConfig {
const initialState: ISiteConfig = {
home: {
isShowNavbar: false,
- pathFromHome: EPathsFromHome.compatibility
+ pathFromHome: EPathsFromHome.compatibility,
},
};
diff --git a/src/store/userConfig.ts b/src/store/userConfig.ts
new file mode 100644
index 0000000..e722eab
--- /dev/null
+++ b/src/store/userConfig.ts
@@ -0,0 +1,47 @@
+import { createSlice, createSelector } from "@reduxjs/toolkit";
+import type { PayloadAction } from "@reduxjs/toolkit";
+
+export enum EUserDeviceType {
+ ios,
+ android,
+}
+
+interface IUserConfig {
+ deviceType: EUserDeviceType;
+ isShowTryApp: boolean;
+}
+
+const initialState: IUserConfig = {
+ deviceType: EUserDeviceType.ios,
+ isShowTryApp: false,
+};
+
+const userConfigSlice = createSlice({
+ name: "userConfig",
+ initialState,
+ reducers: {
+ update(state, action: PayloadAction>) {
+ return { ...initialState, ...state, ...action.payload };
+ },
+ addDeviceType(state, action: PayloadAction) {
+ state.deviceType = action.payload;
+ return state;
+ },
+ addIsShowTryApp(state, action: PayloadAction) {
+ state.isShowTryApp = action.payload;
+ return state;
+ },
+ },
+ extraReducers: (builder) => builder.addCase("reset", () => initialState),
+});
+
+export const { actions } = userConfigSlice;
+export const selectUserDeviceType = createSelector(
+ (state: { userConfig: IUserConfig }) => state.userConfig.deviceType,
+ (userConfig) => userConfig
+);
+export const selectIsShowTryApp = createSelector(
+ (state: { userConfig: IUserConfig }) => state.userConfig.isShowTryApp,
+ (userConfig) => userConfig
+);
+export default userConfigSlice.reducer;
+
+ );
+}
+
+export default AccessCodeApp;
diff --git a/src/components/pages/TryApp/components/AccessCodeApp/styles.module.css b/src/components/pages/TryApp/components/AccessCodeApp/styles.module.css
new file mode 100644
index 0000000..44ca91f
--- /dev/null
+++ b/src/components/pages/TryApp/components/AccessCodeApp/styles.module.css
@@ -0,0 +1,45 @@
+.container {
+ margin-top: 32px;
+ border-radius: 24px;
+ min-height: 140px;
+ background-color: #fff;
+ justify-content: start;
+ width: 100%;
+}
+
+.container .header-container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+}
+
+.header-container {
+ background-color: rgb(153, 116, 246);
+ border-top-left-radius: 24px;
+ border-top-right-radius: 24px;
+}
+
+.title {
+ text-transform: capitalize;
+ margin: 0;
+ font-size: 20px;
+ line-height: 145%;
+ color: #fff;
+ font-weight: 500;
+}
+
+.code-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: calc(100% - 29px);
+}
+
+.code {
+ font-size: 36px;
+ font-weight: 800;
+}
diff --git a/src/components/pages/TryApp/index.tsx b/src/components/pages/TryApp/index.tsx
new file mode 100644
index 0000000..202b132
--- /dev/null
+++ b/src/components/pages/TryApp/index.tsx
@@ -0,0 +1,120 @@
+import { useEffect, useState } from "react";
+import Header from "../TrialPayment/components/Header";
+import PersonalInformation from "../TrialPayment/components/PersonalInformation";
+import WithPartnerInformation from "../TrialPayment/components/WithPartnerInformation";
+import styles from "./styles.module.css";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+import Title from "@/components/Title";
+import Goal from "../TrialPayment/components/Goal";
+import Reviews from "../TrialPayment/components/Reviews";
+import { trialPaymentReviews } from "@/data/reviews";
+import AccessCodeApp from "./components/AccessCodeApp";
+import YourReading from "../TrialPayment/components/YourReading";
+import PointsList from "../TrialPayment/components/PointsList";
+import OftenAsk from "../TrialPayment/components/OftenAsk";
+import { trialPaymentPointsList } from "@/data/pointsLists";
+
+function TryAppPage() {
+ const birthdate = useSelector(selectors.selectBirthdate);
+ const zodiacSign = getZodiacSignByDate(birthdate);
+ const {
+ gender,
+ birthPlace,
+ partnerBirthPlace,
+ partnerBirthdate,
+ partnerGender,
+ goal,
+ flowChoice,
+ } = useSelector(selectors.selectQuestionnaire);
+ const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate);
+ const [singleOrWithPartner, setSingleOrWithPartner] = useState<
+ "single" | "partner"
+ >("single");
+ const [marginTopTitle, setMarginTopTitle] = useState
+
+ Your access code
+
+
+
+ FV1HBP
+
+
+ 1. Download App
+ FV1HBP
+ + Enter your access code in the app to access Your Personalized Reading. + Do not share your code with anyone +
+ +