Merge branch 'develop' into 'main'

Develop

See merge request witapp/aura-webapp!164
This commit is contained in:
Daniil Chemerkin 2024-06-03 18:45:02 +00:00
commit 1253b152f2
19 changed files with 129 additions and 87 deletions

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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 });
};

View File

@ -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;
}

View File

@ -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 () => {

View File

@ -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 (

View File

@ -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 () => {

View File

@ -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);
};

View File

@ -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) => {

View File

@ -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 (

View File

@ -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,
});

View File

@ -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
View File

@ -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
}

View File

@ -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()

View File

@ -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,
]
);
}

View File

@ -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();
}

View 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 }

View File

@ -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 = {