gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into 'main'

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
environments/.env.develop
View File

@ -4,4 +4,5 @@ AURA_DAPI_PREFIX=v2
AURA_SITE_HOST=https://aura.wit.life AURA_SITE_HOST=https://aura.wit.life
AURA_PREFIX=api/v1 AURA_PREFIX=api/v1
AURA_OPEN_AI_HOST=https://api.openai.com AURA_OPEN_AI_HOST=https://api.openai.com
AURA_OPEN_AI_PREFIX=v1 AURA_OPEN_AI_PREFIX=v1
AURA_YANDEX_COUNTER_NUMBER=95799066

3
environments/.env.production
View File

@ -4,4 +4,5 @@ AURA_DAPI_PREFIX=v2
AURA_SITE_HOST=https://aura.wit.life AURA_SITE_HOST=https://aura.wit.life
AURA_PREFIX=api/v1 AURA_PREFIX=api/v1
AURA_OPEN_AI_HOST=https://api.openai.com 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
View File

@ -42,30 +42,6 @@
} }
} }
</style> </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> </head>
<body> <body>
<!-- Yandex.Metrika counter --> <!-- Yandex.Metrika counter -->
@ -91,16 +67,9 @@
window, window,
document, document,
"script", "script",
"https://mc.yandex.ru/metrika/tag.js", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js",
"ym" "ym"
); );
ym(95799066, "init", {
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true,
});
</script> </script>
<noscript> <noscript>
<div> <div>
@ -113,14 +82,6 @@
</noscript> </noscript>
<!-- /Yandex.Metrika counter --> <!-- /Yandex.Metrika counter -->
<noscript>You need to enable JavaScript to run this app.</noscript> <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) --> <!-- Google Tag Manager (noscript) -->
<noscript <noscript
><iframe ><iframe

8
src/api/resources/Payment.ts
View File

@ -7,6 +7,8 @@ interface Payload {
export interface PayloadPost extends Payload { export interface PayloadPost extends Payload {
productId: string; productId: string;
placementId: string;
paywallId: string;
} }
interface ResponsePostSuccess { interface ResponsePostSuccess {
@ -37,10 +39,12 @@ interface ResponsePostError {
export type ResponsePost = ResponsePostSuccess | 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 url = new URL(routes.server.makePayment());
const body = JSON.stringify({ const body = JSON.stringify({
productId productId,
placementId,
paywallId
}); });
return new Request(url, { method: "POST", headers: getAuthHeaders(token), body }); return new Request(url, { method: "POST", headers: getAuthHeaders(token), body });
}; };

4
src/api/resources/Paywall.ts
View File

@ -17,7 +17,9 @@ export enum EPlacementKeys {
"aura.placement.palmistry.main" = "aura.placement.palmistry.main" "aura.placement.palmistry.main" = "aura.placement.palmistry.main"
} }
interface ResponseGetSuccess { export interface ResponseGetSuccess {
placementId: string,
paywallId: string,
paywall: IPaywall; paywall: IPaywall;
} }

4
src/components/EmailEnterPage/index.tsx
View File

@ -15,6 +15,7 @@ import { useAuthentication } from "@/hooks/authentication/use-authentication";
import { ESourceAuthorization } from "@/api/resources/User"; import { ESourceAuthorization } from "@/api/resources/User";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall"; import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall"; import { usePaywall } from "@/hooks/paywall/usePaywall";
import metricService from "@/services/metric/metricService";
interface IEmailEnterPage { interface IEmailEnterPage {
redirectUrl?: string; redirectUrl?: string;
@ -88,8 +89,7 @@ function EmailEnterPage({
const handleClick = () => { const handleClick = () => {
authorize(); authorize();
if (typeof window.ym === "function") metricService.reachGoal("EnteredEmail");
window.ym(95799066, "reachGoal", "EnteredEmail");
}; };
const authorize = async () => { const authorize = async () => {

5
src/components/PaymentPage/results/SuccessPage/index.tsx
View File

@ -7,19 +7,20 @@ import MainButton from "@/components/MainButton";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { actions } from "@/store"; import { actions } from "@/store";
import { useEffect } from "react"; import { useEffect } from "react";
import metricService from "@/services/metric/metricService";
function PaymentSuccessPage(): JSX.Element { function PaymentSuccessPage(): JSX.Element {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch(); const dispatch = useDispatch();
const handleNext = () => { const handleNext = () => {
dispatch(actions.status.update("subscribed")); dispatch(actions.status.update("subscribed"));
navigate(routes.client.addReport()); navigate(routes.client.addReport());
}; };
useEffect(() => { useEffect(() => {
if (typeof window.ym === "function") metricService.reachGoal("PaymentSuccess");
window.ym(95799066, "reachGoal", "PaymentSuccess");
}, []); }, []);
return ( return (

4
src/components/pages/ABDesign/v1/pages/EmailEnterPage/index.tsx
View File

@ -18,6 +18,7 @@ import { ESourceAuthorization } from "@/api/resources/User";
import { useAuthentication } from "@/hooks/authentication/use-authentication"; import { useAuthentication } from "@/hooks/authentication/use-authentication";
import { usePaywall } from "@/hooks/paywall/usePaywall"; import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall"; import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
import metricService from "@/services/metric/metricService";
interface IEmailEnterPage { interface IEmailEnterPage {
redirectUrl?: string; redirectUrl?: string;
@ -93,8 +94,7 @@ function EmailEnterPage({
const handleClick = () => { const handleClick = () => {
authorize(); authorize();
if (typeof window.ym === "function") metricService.reachGoal("EnteredEmail");
window.ym(95799066, "reachGoal", "EnteredEmail");
}; };
const authorize = async () => { const authorize = async () => {

9
src/components/pages/ABDesign/v1/pages/TrialPayment/components/PaymentModal/index.tsx
View File

@ -40,6 +40,8 @@ function PaymentModal({
const activeProductFromStore = useSelector(selectors.selectActiveProduct); const activeProductFromStore = useSelector(selectors.selectActiveProduct);
const _activeProduct = activeProduct ? activeProduct : activeProductFromStore; const _activeProduct = activeProduct ? activeProduct : activeProductFromStore;
const { products, paywallId, placementId } = usePaywall({ placementKey });
const { const {
paymentIntentId, paymentIntentId,
clientSecret, clientSecret,
@ -50,8 +52,9 @@ function PaymentModal({
error, error,
} = useMakePayment({ } = useMakePayment({
productId: _activeProduct?._id || "", productId: _activeProduct?._id || "",
returnPaidUrl: paywallId,
returnUrl placementId,
returnPaidUrl: returnUrl,
}); });
if (checkoutUrl?.length) { if (checkoutUrl?.length) {
@ -66,8 +69,6 @@ function PaymentModal({
EPaymentMethod.PAYMENT_BUTTONS EPaymentMethod.PAYMENT_BUTTONS
); );
const { products } = usePaywall({ placementKey });
const onSelectPaymentMethod = (method: EPaymentMethod) => { const onSelectPaymentMethod = (method: EPaymentMethod) => {
setSelectedPaymentMethod(method); setSelectedPaymentMethod(method);
}; };

9
src/components/pages/Gender/index.tsx
View File

@ -7,6 +7,7 @@ import { actions } from "@/store";
import { useEffect } from "react"; import { useEffect } from "react";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import metricService from "@/services/metric/metricService";
interface IGenderPageProps { interface IGenderPageProps {
productKey?: EProductKeys; productKey?: EProductKeys;
@ -20,11 +21,9 @@ function GenderPage({ productKey }: IGenderPageProps): JSX.Element {
useEffect(() => { useEffect(() => {
const isShowTryApp = targetId === "i"; const isShowTryApp = targetId === "i";
dispatch(actions.userConfig.addIsShowTryApp(isShowTryApp)); dispatch(actions.userConfig.addIsShowTryApp(isShowTryApp));
if (targetId && typeof window.ym === "function" && targetId !== "i") { metricService.userParams({
window.ym(95799066, "userParams", { genderFrom: targetId,
genderFrom: targetId, });
});
}
}, [dispatch, targetId]); }, [dispatch, targetId]);
const selectGender = (gender: Gender) => { const selectGender = (gender: Gender) => {

4
src/components/pages/SinglePaymentPage/ResultPayment/SuccessPaymentPage/index.tsx
View File

@ -5,6 +5,7 @@ import MainButton from "@/components/MainButton";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import routes from "@/routes"; import routes from "@/routes";
import { useEffect } from "react"; import { useEffect } from "react";
import metricService from "@/services/metric/metricService";
function SuccessPaymentPage(): JSX.Element { function SuccessPaymentPage(): JSX.Element {
const { t } = useTranslation(); const { t } = useTranslation();
@ -15,8 +16,7 @@ function SuccessPaymentPage(): JSX.Element {
: "The information has been sent to your email"; : "The information has been sent to your email";
useEffect(() => { useEffect(() => {
if (typeof window.ym === "function") metricService.reachGoal("PaymentSuccess");
window.ym(95799066, "reachGoal", "PaymentSuccess");
}, []); }, []);
return ( return (

4
src/components/pages/TrialPayment/components/PaymentModal/index.tsx
View File

@ -38,7 +38,7 @@ function PaymentModal({
const [stripePromise, setStripePromise] = const [stripePromise, setStripePromise] =
useState<Promise<Stripe | null> | null>(null); useState<Promise<Stripe | null> | null>(null);
const { products } = usePaywall({ const { products, placementId, paywallId } = usePaywall({
placementKey, placementKey,
}); });
const activeProductFromStore = useSelector(selectors.selectActiveProduct); const activeProductFromStore = useSelector(selectors.selectActiveProduct);
@ -54,6 +54,8 @@ function PaymentModal({
error, error,
} = useMakePayment({ } = useMakePayment({
productId: _activeProduct?._id || "", productId: _activeProduct?._id || "",
placementId,
paywallId,
returnPaidUrl: returnUrl, returnPaidUrl: returnUrl,
}); });

4
src/components/palmistry/step-email/step-email.tsx
View File

@ -9,6 +9,7 @@ import Title from "@/components/Title";
import Loader, { LoaderColor } from "@/components/Loader"; import Loader, { LoaderColor } from "@/components/Loader";
import { useAuthentication } from "@/hooks/authentication/use-authentication"; import { useAuthentication } from "@/hooks/authentication/use-authentication";
import { ESourceAuthorization } from "@/api/resources/User"; import { ESourceAuthorization } from "@/api/resources/User";
import metricService from "@/services/metric/metricService";
const emailRegex = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; const emailRegex = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
@ -43,8 +44,7 @@ export default function StepEmail() {
const authorize = async () => { const authorize = async () => {
await authorization(email, ESourceAuthorization["aura.palmistry"]); await authorization(email, ESourceAuthorization["aura.palmistry"]);
if (typeof window.ym === "function") metricService.reachGoal("EnteredEmail");
window.ym(95799066, "reachGoal", "EnteredEmail");
setIsAuth(true); setIsAuth(true);
}; };

5
src/env.d.ts vendored
View File

@ -4,6 +4,7 @@ interface ImportMetaEnv {
AURA_DAPI_PREFIX: string, AURA_DAPI_PREFIX: string,
AURA_SITE_HOST: string, AURA_SITE_HOST: string,
AURA_PREFIX: string, AURA_PREFIX: string,
AURA_OPEN_AI_HOST: number, AURA_OPEN_AI_HOST: string,
AURA_OPEN_AI_PREFIX: string AURA_OPEN_AI_PREFIX: string,
AURA_YANDEX_COUNTER_NUMBER: string
} }

17
src/hooks/payment/useMakePayment.ts
View File

@ -5,10 +5,17 @@ import { useSelector } from "react-redux";
interface IUseMakePaymentProps { interface IUseMakePaymentProps {
productId: string; productId: string;
placementId: string;
paywallId: string;
returnPaidUrl?: 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 api = useApi();
const token = useSelector(selectors.selectToken); const token = useSelector(selectors.selectToken);
const [paymentIntentId, setPaymentIntentId] = useState<string>(); const [paymentIntentId, setPaymentIntentId] = useState<string>();
@ -20,14 +27,16 @@ export const useMakePayment = ({ productId, returnPaidUrl = `https://${window.lo
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const makePayment = useCallback(async () => { const makePayment = useCallback(async () => {
if (!productId?.length) { if (!productId?.length || !placementId?.length || !paywallId?.length) {
return; return;
} }
try { try {
setIsLoading(true); setIsLoading(true);
const res = await api.makePayment({ const res = await api.makePayment({
token, token,
productId productId,
placementId,
paywallId
}); });
if (res.status === "paid") { if (res.status === "paid") {
@ -52,7 +61,7 @@ export const useMakePayment = ({ productId, returnPaidUrl = `https://${window.lo
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
}, [api, productId, returnPaidUrl, token]) }, [api, paywallId, placementId, productId, returnPaidUrl, token])
useEffect(() => { useEffect(() => {
makePayment() makePayment()

26
src/hooks/paywall/usePaywall.tsx
View File

@ -33,6 +33,8 @@ export function usePaywall({ placementKey }: IUsePaywallProps) {
); );
const isMustUpdate = useSelector(selectors.selectPaywallsIsMustUpdate); const isMustUpdate = useSelector(selectors.selectPaywallsIsMustUpdate);
const paywalls = useSelector(selectors.selectPaywalls); const paywalls = useSelector(selectors.selectPaywalls);
const [placementId, setPlacementId] = useState<string>("");
const [paywallId, setPaywallId] = useState<string>("");
const getPaywallByPlacementKey = useCallback( const getPaywallByPlacementKey = useCallback(
async (placementKey: EPlacementKeys) => { async (placementKey: EPlacementKeys) => {
@ -45,9 +47,11 @@ export function usePaywall({ placementKey }: IUsePaywallProps) {
}); });
if ("paywall" in paywall && paywall.paywall) { if ("paywall" in paywall && paywall.paywall) {
setPaywall(paywall.paywall); setPaywall(paywall.paywall);
setPaywallId(paywall.paywallId || "");
setPlacementId(paywall.placementId || "");
dispatch( dispatch(
actions.paywalls.updatePaywall({ actions.paywalls.updatePaywall({
[placementKey]: paywall.paywall, [placementKey]: paywall,
}) })
); );
dispatch( dispatch(
@ -68,11 +72,12 @@ export function usePaywall({ placementKey }: IUsePaywallProps) {
); );
useEffect(() => { useEffect(() => {
if (isMustUpdate[placementKey] || !paywalls[placementKey]) { if (isMustUpdate[placementKey] || !paywalls[placementKey]?.paywall) {
getPaywallByPlacementKey(placementKey); getPaywallByPlacementKey(placementKey);
} else { } else {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion setPaywall(paywalls[placementKey]?.paywall);
setPaywall(paywalls[placementKey]!); setPaywallId(paywalls[placementKey]?.paywallId || "");
setPlacementId(paywalls[placementKey]?.placementId || "");
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [getPaywallByPlacementKey, placementKey, isMustUpdate]); }, [getPaywallByPlacementKey, placementKey, isMustUpdate]);
@ -117,8 +122,19 @@ export function usePaywall({ placementKey }: IUsePaywallProps) {
error, error,
products, products,
properties, properties,
placementId,
paywallId,
getText, getText,
}), }),
[error, isLoading, paywall, products, properties, getText] [
paywall,
isLoading,
error,
products,
properties,
placementId,
paywallId,
getText,
]
); );
} }

15
src/init.tsx
View File

@ -10,6 +10,9 @@ import { ApiContext, createApi } from "./api";
import { LegalContext, buildLegal } from "./legal"; import { LegalContext, buildLegal } from "./legal";
import { getClientLocale, buildResources, fallbackLng } from "./locales"; import { getClientLocale, buildResources, fallbackLng } from "./locales";
import App from "./components/App"; import App from "./components/App";
import metricService from "./services/metric/metricService";
const environments = import.meta.env;
const init = async () => { const init = async () => {
const api = createApi(); const api = createApi();
@ -35,23 +38,19 @@ const init = async () => {
.use(new ReactPostprocessor()) .use(new ReactPostprocessor())
.init(options); .init(options);
const isProduction = import.meta.env.MODE === "production"; const isProduction = environments.MODE === "production";
// SCRIPTS TO HEAD // SCRIPTS TO HEAD
// const yandexMetric = () => {
// const script = document.createElement("script");
// script.setAttribute("src", "/metrics/yandex.js");
// document.head.appendChild(script);
// };
const smartLook = () => { const smartLook = () => {
if (!config.smartlook_manage) return; if (!config.smartlook_manage) return;
const script = document.createElement("script"); const script = document.createElement("script");
script.setAttribute("src", "/metrics/smartlook.js"); script.setAttribute("src", "/metrics/smartlook.js");
document.head.appendChild(script); document.head.appendChild(script);
}; };
metricService.initMetric();
if (isProduction) { if (isProduction) {
// yandexMetric();
smartLook(); smartLook();
} }

45
src/services/metric/metricService.ts Normal file
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 }

6
src/store/paywalls.ts
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 { createSlice, createSelector } from '@reduxjs/toolkit'
import type { PayloadAction } from '@reduxjs/toolkit' import type { PayloadAction } from '@reduxjs/toolkit'
@ -9,11 +9,11 @@ type TAdditionalParameters = {
} }
type TPaywalls = { type TPaywalls = {
[key in EPlacementKeys]: IPaywall | null; [key in EPlacementKeys]: ResponseGetSuccess | null;
} & TAdditionalParameters } & TAdditionalParameters
type IPayloadUpdatePaywall = { type IPayloadUpdatePaywall = {
[key in EPlacementKeys]: IPaywall [key in EPlacementKeys]: ResponseGetSuccess
} }
const initialState: TPaywalls = { const initialState: TPaywalls = {