Merge branch 'develop' into 'main'
Develop See merge request witapp/aura-webapp!164
This commit is contained in:
commit
1253b152f2
@ -4,4 +4,5 @@ AURA_DAPI_PREFIX=v2
|
||||
AURA_SITE_HOST=https://aura.wit.life
|
||||
AURA_PREFIX=api/v1
|
||||
AURA_OPEN_AI_HOST=https://api.openai.com
|
||||
AURA_OPEN_AI_PREFIX=v1
|
||||
AURA_OPEN_AI_PREFIX=v1
|
||||
AURA_YANDEX_COUNTER_NUMBER=95799066
|
||||
@ -4,4 +4,5 @@ AURA_DAPI_PREFIX=v2
|
||||
AURA_SITE_HOST=https://aura.wit.life
|
||||
AURA_PREFIX=api/v1
|
||||
AURA_OPEN_AI_HOST=https://api.openai.com
|
||||
AURA_OPEN_AI_PREFIX=v1
|
||||
AURA_OPEN_AI_PREFIX=v1
|
||||
AURA_YANDEX_COUNTER_NUMBER=95799066
|
||||
41
index.html
41
index.html
@ -42,30 +42,6 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- <script type="text/javascript">
|
||||
window.smartlook ||
|
||||
(function (d) {
|
||||
var o = (smartlook = function () {
|
||||
o.api.push(arguments);
|
||||
}),
|
||||
h = d.getElementsByTagName("head")[0];
|
||||
var c = d.createElement("script");
|
||||
o.api = new Array();
|
||||
c.async = true;
|
||||
c.type = "text/javascript";
|
||||
c.charset = "utf-8";
|
||||
c.src = "https://web-sdk.smartlook.com/recorder.js";
|
||||
h.appendChild(c);
|
||||
})(document);
|
||||
smartlook("init", "2162354c75f8e0cb315634bc429aced457d3230c", {
|
||||
region: "eu",
|
||||
});
|
||||
</script> -->
|
||||
<!-- <script
|
||||
type="text/javascript"
|
||||
src="//script.crazyegg.com/pages/scripts/0121/5622.js"
|
||||
async="async"
|
||||
></script> -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- Yandex.Metrika counter -->
|
||||
@ -91,16 +67,9 @@
|
||||
window,
|
||||
document,
|
||||
"script",
|
||||
"https://mc.yandex.ru/metrika/tag.js",
|
||||
"https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js",
|
||||
"ym"
|
||||
);
|
||||
|
||||
ym(95799066, "init", {
|
||||
clickmap: true,
|
||||
trackLinks: true,
|
||||
accurateTrackBounce: true,
|
||||
webvisor: true,
|
||||
});
|
||||
</script>
|
||||
<noscript>
|
||||
<div>
|
||||
@ -113,14 +82,6 @@
|
||||
</noscript>
|
||||
<!-- /Yandex.Metrika counter -->
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<noscript
|
||||
><div>
|
||||
<img
|
||||
src="https://mc.yandex.ru/watch/95799066"
|
||||
style="position: absolute; left: -9999px"
|
||||
alt=""
|
||||
/></div
|
||||
></noscript>
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript
|
||||
><iframe
|
||||
|
||||
@ -7,6 +7,8 @@ interface Payload {
|
||||
|
||||
export interface PayloadPost extends Payload {
|
||||
productId: string;
|
||||
placementId: string;
|
||||
paywallId: string;
|
||||
}
|
||||
|
||||
interface ResponsePostSuccess {
|
||||
@ -37,10 +39,12 @@ interface ResponsePostError {
|
||||
|
||||
export type ResponsePost = ResponsePostSuccess | ResponsePostError;
|
||||
|
||||
export const createRequestPost = ({ token, productId }: PayloadPost): Request => {
|
||||
export const createRequestPost = ({ token, productId, placementId, paywallId }: PayloadPost): Request => {
|
||||
const url = new URL(routes.server.makePayment());
|
||||
const body = JSON.stringify({
|
||||
productId
|
||||
productId,
|
||||
placementId,
|
||||
paywallId
|
||||
});
|
||||
return new Request(url, { method: "POST", headers: getAuthHeaders(token), body });
|
||||
};
|
||||
|
||||
@ -17,7 +17,9 @@ export enum EPlacementKeys {
|
||||
"aura.placement.palmistry.main" = "aura.placement.palmistry.main"
|
||||
}
|
||||
|
||||
interface ResponseGetSuccess {
|
||||
export interface ResponseGetSuccess {
|
||||
placementId: string,
|
||||
paywallId: string,
|
||||
paywall: IPaywall;
|
||||
}
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@ import { useAuthentication } from "@/hooks/authentication/use-authentication";
|
||||
import { ESourceAuthorization } from "@/api/resources/User";
|
||||
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
|
||||
import { usePaywall } from "@/hooks/paywall/usePaywall";
|
||||
import metricService from "@/services/metric/metricService";
|
||||
|
||||
interface IEmailEnterPage {
|
||||
redirectUrl?: string;
|
||||
@ -88,8 +89,7 @@ function EmailEnterPage({
|
||||
|
||||
const handleClick = () => {
|
||||
authorize();
|
||||
if (typeof window.ym === "function")
|
||||
window.ym(95799066, "reachGoal", "EnteredEmail");
|
||||
metricService.reachGoal("EnteredEmail");
|
||||
};
|
||||
|
||||
const authorize = async () => {
|
||||
|
||||
@ -7,19 +7,20 @@ import MainButton from "@/components/MainButton";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { actions } from "@/store";
|
||||
import { useEffect } from "react";
|
||||
import metricService from "@/services/metric/metricService";
|
||||
|
||||
function PaymentSuccessPage(): JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleNext = () => {
|
||||
dispatch(actions.status.update("subscribed"));
|
||||
navigate(routes.client.addReport());
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window.ym === "function")
|
||||
window.ym(95799066, "reachGoal", "PaymentSuccess");
|
||||
metricService.reachGoal("PaymentSuccess");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
||||
@ -18,6 +18,7 @@ import { ESourceAuthorization } from "@/api/resources/User";
|
||||
import { useAuthentication } from "@/hooks/authentication/use-authentication";
|
||||
import { usePaywall } from "@/hooks/paywall/usePaywall";
|
||||
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
|
||||
import metricService from "@/services/metric/metricService";
|
||||
|
||||
interface IEmailEnterPage {
|
||||
redirectUrl?: string;
|
||||
@ -93,8 +94,7 @@ function EmailEnterPage({
|
||||
|
||||
const handleClick = () => {
|
||||
authorize();
|
||||
if (typeof window.ym === "function")
|
||||
window.ym(95799066, "reachGoal", "EnteredEmail");
|
||||
metricService.reachGoal("EnteredEmail");
|
||||
};
|
||||
|
||||
const authorize = async () => {
|
||||
|
||||
@ -40,6 +40,8 @@ function PaymentModal({
|
||||
|
||||
const activeProductFromStore = useSelector(selectors.selectActiveProduct);
|
||||
const _activeProduct = activeProduct ? activeProduct : activeProductFromStore;
|
||||
const { products, paywallId, placementId } = usePaywall({ placementKey });
|
||||
|
||||
const {
|
||||
paymentIntentId,
|
||||
clientSecret,
|
||||
@ -50,8 +52,9 @@ function PaymentModal({
|
||||
error,
|
||||
} = useMakePayment({
|
||||
productId: _activeProduct?._id || "",
|
||||
returnPaidUrl:
|
||||
returnUrl
|
||||
paywallId,
|
||||
placementId,
|
||||
returnPaidUrl: returnUrl,
|
||||
});
|
||||
|
||||
if (checkoutUrl?.length) {
|
||||
@ -66,8 +69,6 @@ function PaymentModal({
|
||||
EPaymentMethod.PAYMENT_BUTTONS
|
||||
);
|
||||
|
||||
const { products } = usePaywall({ placementKey });
|
||||
|
||||
const onSelectPaymentMethod = (method: EPaymentMethod) => {
|
||||
setSelectedPaymentMethod(method);
|
||||
};
|
||||
|
||||
@ -7,6 +7,7 @@ import { actions } from "@/store";
|
||||
import { useEffect } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import metricService from "@/services/metric/metricService";
|
||||
|
||||
interface IGenderPageProps {
|
||||
productKey?: EProductKeys;
|
||||
@ -20,11 +21,9 @@ function GenderPage({ productKey }: IGenderPageProps): JSX.Element {
|
||||
useEffect(() => {
|
||||
const isShowTryApp = targetId === "i";
|
||||
dispatch(actions.userConfig.addIsShowTryApp(isShowTryApp));
|
||||
if (targetId && typeof window.ym === "function" && targetId !== "i") {
|
||||
window.ym(95799066, "userParams", {
|
||||
genderFrom: targetId,
|
||||
});
|
||||
}
|
||||
metricService.userParams({
|
||||
genderFrom: targetId,
|
||||
});
|
||||
}, [dispatch, targetId]);
|
||||
|
||||
const selectGender = (gender: Gender) => {
|
||||
|
||||
@ -5,6 +5,7 @@ import MainButton from "@/components/MainButton";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import routes from "@/routes";
|
||||
import { useEffect } from "react";
|
||||
import metricService from "@/services/metric/metricService";
|
||||
|
||||
function SuccessPaymentPage(): JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
@ -15,8 +16,7 @@ function SuccessPaymentPage(): JSX.Element {
|
||||
: "The information has been sent to your email";
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window.ym === "function")
|
||||
window.ym(95799066, "reachGoal", "PaymentSuccess");
|
||||
metricService.reachGoal("PaymentSuccess");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
||||
@ -38,7 +38,7 @@ function PaymentModal({
|
||||
const [stripePromise, setStripePromise] =
|
||||
useState<Promise<Stripe | null> | null>(null);
|
||||
|
||||
const { products } = usePaywall({
|
||||
const { products, placementId, paywallId } = usePaywall({
|
||||
placementKey,
|
||||
});
|
||||
const activeProductFromStore = useSelector(selectors.selectActiveProduct);
|
||||
@ -54,6 +54,8 @@ function PaymentModal({
|
||||
error,
|
||||
} = useMakePayment({
|
||||
productId: _activeProduct?._id || "",
|
||||
placementId,
|
||||
paywallId,
|
||||
returnPaidUrl: returnUrl,
|
||||
});
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@ import Title from "@/components/Title";
|
||||
import Loader, { LoaderColor } from "@/components/Loader";
|
||||
import { useAuthentication } from "@/hooks/authentication/use-authentication";
|
||||
import { ESourceAuthorization } from "@/api/resources/User";
|
||||
import metricService from "@/services/metric/metricService";
|
||||
|
||||
const emailRegex = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
|
||||
|
||||
@ -43,8 +44,7 @@ export default function StepEmail() {
|
||||
|
||||
const authorize = async () => {
|
||||
await authorization(email, ESourceAuthorization["aura.palmistry"]);
|
||||
if (typeof window.ym === "function")
|
||||
window.ym(95799066, "reachGoal", "EnteredEmail");
|
||||
metricService.reachGoal("EnteredEmail");
|
||||
setIsAuth(true);
|
||||
};
|
||||
|
||||
|
||||
5
src/env.d.ts
vendored
5
src/env.d.ts
vendored
@ -4,6 +4,7 @@ interface ImportMetaEnv {
|
||||
AURA_DAPI_PREFIX: string,
|
||||
AURA_SITE_HOST: string,
|
||||
AURA_PREFIX: string,
|
||||
AURA_OPEN_AI_HOST: number,
|
||||
AURA_OPEN_AI_PREFIX: string
|
||||
AURA_OPEN_AI_HOST: string,
|
||||
AURA_OPEN_AI_PREFIX: string,
|
||||
AURA_YANDEX_COUNTER_NUMBER: string
|
||||
}
|
||||
@ -5,10 +5,17 @@ import { useSelector } from "react-redux";
|
||||
|
||||
interface IUseMakePaymentProps {
|
||||
productId: string;
|
||||
placementId: string;
|
||||
paywallId: string;
|
||||
returnPaidUrl?: string;
|
||||
}
|
||||
|
||||
export const useMakePayment = ({ productId, returnPaidUrl = `https://${window.location.host}/payment/result/` }: IUseMakePaymentProps) => {
|
||||
export const useMakePayment = ({
|
||||
productId,
|
||||
placementId,
|
||||
paywallId,
|
||||
returnPaidUrl = `https://${window.location.host}/payment/result/`
|
||||
}: IUseMakePaymentProps) => {
|
||||
const api = useApi();
|
||||
const token = useSelector(selectors.selectToken);
|
||||
const [paymentIntentId, setPaymentIntentId] = useState<string>();
|
||||
@ -20,14 +27,16 @@ export const useMakePayment = ({ productId, returnPaidUrl = `https://${window.lo
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const makePayment = useCallback(async () => {
|
||||
if (!productId?.length) {
|
||||
if (!productId?.length || !placementId?.length || !paywallId?.length) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const res = await api.makePayment({
|
||||
token,
|
||||
productId
|
||||
productId,
|
||||
placementId,
|
||||
paywallId
|
||||
});
|
||||
|
||||
if (res.status === "paid") {
|
||||
@ -52,7 +61,7 @@ export const useMakePayment = ({ productId, returnPaidUrl = `https://${window.lo
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [api, productId, returnPaidUrl, token])
|
||||
}, [api, paywallId, placementId, productId, returnPaidUrl, token])
|
||||
|
||||
useEffect(() => {
|
||||
makePayment()
|
||||
|
||||
@ -33,6 +33,8 @@ export function usePaywall({ placementKey }: IUsePaywallProps) {
|
||||
);
|
||||
const isMustUpdate = useSelector(selectors.selectPaywallsIsMustUpdate);
|
||||
const paywalls = useSelector(selectors.selectPaywalls);
|
||||
const [placementId, setPlacementId] = useState<string>("");
|
||||
const [paywallId, setPaywallId] = useState<string>("");
|
||||
|
||||
const getPaywallByPlacementKey = useCallback(
|
||||
async (placementKey: EPlacementKeys) => {
|
||||
@ -45,9 +47,11 @@ export function usePaywall({ placementKey }: IUsePaywallProps) {
|
||||
});
|
||||
if ("paywall" in paywall && paywall.paywall) {
|
||||
setPaywall(paywall.paywall);
|
||||
setPaywallId(paywall.paywallId || "");
|
||||
setPlacementId(paywall.placementId || "");
|
||||
dispatch(
|
||||
actions.paywalls.updatePaywall({
|
||||
[placementKey]: paywall.paywall,
|
||||
[placementKey]: paywall,
|
||||
})
|
||||
);
|
||||
dispatch(
|
||||
@ -68,11 +72,12 @@ export function usePaywall({ placementKey }: IUsePaywallProps) {
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isMustUpdate[placementKey] || !paywalls[placementKey]) {
|
||||
if (isMustUpdate[placementKey] || !paywalls[placementKey]?.paywall) {
|
||||
getPaywallByPlacementKey(placementKey);
|
||||
} else {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
setPaywall(paywalls[placementKey]!);
|
||||
setPaywall(paywalls[placementKey]?.paywall);
|
||||
setPaywallId(paywalls[placementKey]?.paywallId || "");
|
||||
setPlacementId(paywalls[placementKey]?.placementId || "");
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [getPaywallByPlacementKey, placementKey, isMustUpdate]);
|
||||
@ -117,8 +122,19 @@ export function usePaywall({ placementKey }: IUsePaywallProps) {
|
||||
error,
|
||||
products,
|
||||
properties,
|
||||
placementId,
|
||||
paywallId,
|
||||
getText,
|
||||
}),
|
||||
[error, isLoading, paywall, products, properties, getText]
|
||||
[
|
||||
paywall,
|
||||
isLoading,
|
||||
error,
|
||||
products,
|
||||
properties,
|
||||
placementId,
|
||||
paywallId,
|
||||
getText,
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
15
src/init.tsx
15
src/init.tsx
@ -10,6 +10,9 @@ import { ApiContext, createApi } from "./api";
|
||||
import { LegalContext, buildLegal } from "./legal";
|
||||
import { getClientLocale, buildResources, fallbackLng } from "./locales";
|
||||
import App from "./components/App";
|
||||
import metricService from "./services/metric/metricService";
|
||||
|
||||
const environments = import.meta.env;
|
||||
|
||||
const init = async () => {
|
||||
const api = createApi();
|
||||
@ -35,23 +38,19 @@ const init = async () => {
|
||||
.use(new ReactPostprocessor())
|
||||
.init(options);
|
||||
|
||||
const isProduction = import.meta.env.MODE === "production";
|
||||
const isProduction = environments.MODE === "production";
|
||||
|
||||
// SCRIPTS TO HEAD
|
||||
// const yandexMetric = () => {
|
||||
// const script = document.createElement("script");
|
||||
// script.setAttribute("src", "/metrics/yandex.js");
|
||||
// document.head.appendChild(script);
|
||||
// };
|
||||
|
||||
const smartLook = () => {
|
||||
if (!config.smartlook_manage) return;
|
||||
const script = document.createElement("script");
|
||||
script.setAttribute("src", "/metrics/smartlook.js");
|
||||
document.head.appendChild(script);
|
||||
};
|
||||
|
||||
metricService.initMetric();
|
||||
|
||||
if (isProduction) {
|
||||
// yandexMetric();
|
||||
smartLook();
|
||||
}
|
||||
|
||||
|
||||
45
src/services/metric/metricService.ts
Normal file
45
src/services/metric/metricService.ts
Normal file
@ -0,0 +1,45 @@
|
||||
interface IUserParams {
|
||||
UserID: number;
|
||||
genderFrom: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
const environments = import.meta.env
|
||||
const metricCounterNumber = Number(environments.AURA_YANDEX_COUNTER_NUMBER)
|
||||
|
||||
const setUserID = (userId: string) => {
|
||||
if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
|
||||
|
||||
window.ym(metricCounterNumber, "setUserID", userId)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}
|
||||
|
||||
const userParams = (parameters: Partial<IUserParams>) => {
|
||||
if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
|
||||
|
||||
window.ym(metricCounterNumber, "userParams", parameters)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}
|
||||
|
||||
const reachGoal = (goal: "EnteredEmail" | "PaymentSuccess") => {
|
||||
if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
|
||||
|
||||
window.ym(metricCounterNumber, "reachGoal", goal)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}
|
||||
|
||||
const initMetric = () => {
|
||||
if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
|
||||
|
||||
window.ym(metricCounterNumber, "init", {
|
||||
clickmap: true,
|
||||
trackLinks: true,
|
||||
accurateTrackBounce: true,
|
||||
webvisor: true,
|
||||
});
|
||||
console.log("Metric initialized");
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}
|
||||
|
||||
export default { setUserID, userParams, reachGoal, initMetric }
|
||||
@ -1,4 +1,4 @@
|
||||
import { EPlacementKeys, IPaywall } from '@/api/resources/Paywall'
|
||||
import { EPlacementKeys, ResponseGetSuccess } from '@/api/resources/Paywall'
|
||||
import { createSlice, createSelector } from '@reduxjs/toolkit'
|
||||
import type { PayloadAction } from '@reduxjs/toolkit'
|
||||
|
||||
@ -9,11 +9,11 @@ type TAdditionalParameters = {
|
||||
}
|
||||
|
||||
type TPaywalls = {
|
||||
[key in EPlacementKeys]: IPaywall | null;
|
||||
[key in EPlacementKeys]: ResponseGetSuccess | null;
|
||||
} & TAdditionalParameters
|
||||
|
||||
type IPayloadUpdatePaywall = {
|
||||
[key in EPlacementKeys]: IPaywall
|
||||
[key in EPlacementKeys]: ResponseGetSuccess
|
||||
}
|
||||
|
||||
const initialState: TPaywalls = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user