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

feat: add yandex metric, smartlook manage

Browse Source
This commit is contained in:
Денис Катаев 2023-12-08 02:25:53 +00:00 committed by Victor Ershov
parent 1f46636339
commit 1db2ca1151
9 changed files with 126 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -39,7 +39,7 @@
} }
} }
</style> </style>
<script type="text/javascript"> <!-- <script type="text/javascript">
window.smartlook || window.smartlook ||
(function (d) { (function (d) {
var o = (smartlook = function () { var o = (smartlook = function () {
@ -57,10 +57,18 @@
smartlook("init", "2162354c75f8e0cb315634bc429aced457d3230c", { smartlook("init", "2162354c75f8e0cb315634bc429aced457d3230c", {
region: "eu", region: "eu",
}); });
</script> </script> -->
</head> </head>
<body> <body>
<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>
<div id="root"> <div id="root">
<div class="splash-screen"> <div class="splash-screen">
<img src="/leo.png" alt="Aura - Energy of your Horoscope" /> <img src="/leo.png" alt="Aura - Energy of your Horoscope" />

18
public/metrics/smartlook.js Normal file
View File

@ -0,0 +1,18 @@
/* eslint-disable no-undef */
window.smartlook ||
(function (d) {
var o = (smartlook = function () {
o.api.push(arguments);
}),
h = d.getElementsByTagName("head")[0];
var c = d.createElement("script");
o.api = [];
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",
});

14
public/metrics/yandex.js Normal file
View File

@ -0,0 +1,14 @@
(function (m, e, t, r, i, k, a) {
m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
m[i].l = 1 * new Date();
for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } }
k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
// eslint-disable-next-line no-undef
ym(95799066, "init", {
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true
});

1
src/api/resources/Apps.ts
View File

@ -18,6 +18,7 @@ export interface Response {
runs_before_subscription_popup: number runs_before_subscription_popup: number
appirater_alerts: AppiraterAlertAppiraterAlert[] appirater_alerts: AppiraterAlertAppiraterAlert[]
stripe_public_key: string stripe_public_key: string
smartlook_manage: boolean
} }
} }

1
src/components/Compatibility/DatePicker.module.css
View File

@ -65,6 +65,7 @@
.date-picker-scroll { .date-picker-scroll {
padding: 0; padding: 0;
touch-action: none; touch-action: none;
user-select: none;
} }
/* Individual items in the scrollable components */ /* Individual items in the scrollable components */

52
src/components/Compatibility/DatePickerItem.tsx
View File

@ -29,6 +29,8 @@ const DatePickerItem: React.FC<DatePickerItemProps> = ({
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const scrollRef = useRef<HTMLDivElement | null>(null); const scrollRef = useRef<HTMLDivElement | null>(null);
const [isMouseDown, setIsMouseDown] = useState<boolean>(false);
const [touchY, setTouchY] = useState<number>(0); const [touchY, setTouchY] = useState<number>(0);
const [translateY, setTranslateY] = useState<number>( const [translateY, setTranslateY] = useState<number>(
(data.indexOf(selectedValue) + (unit === "month" ? 12 : 0)) * -ITEM_HEIGHT (data.indexOf(selectedValue) + (unit === "month" ? 12 : 0)) * -ITEM_HEIGHT
@ -38,6 +40,11 @@ const DatePickerItem: React.FC<DatePickerItemProps> = ({
setTouchY(event.touches[0].clientY); setTouchY(event.touches[0].clientY);
}; };
const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
setTouchY(event.clientY);
setIsMouseDown(true);
};
const handleTouchMove = (event: React.TouchEvent<HTMLDivElement>) => { const handleTouchMove = (event: React.TouchEvent<HTMLDivElement>) => {
if (isMobile && touchY !== null) { if (isMobile && touchY !== null) {
const deltaY = event.touches[0].clientY - touchY; const deltaY = event.touches[0].clientY - touchY;
@ -47,11 +54,20 @@ const DatePickerItem: React.FC<DatePickerItemProps> = ({
} }
}; };
useEffect(() => { const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
setTranslateY( if (!isMobile && touchY !== null && isMouseDown) {
(data.indexOf(selectedValue) + (unit === "month" ? 12 : 0)) * -ITEM_HEIGHT const deltaY = event.clientY - touchY;
); wheelScroll(deltaY);
}, [selectedValue, data, unit]);
setTouchY(event.clientY);
}
};
// useEffect(() => {
// setTranslateY(
// (data.indexOf(selectedValue) + (unit === "month" ? 12 : 0)) * -ITEM_HEIGHT
// );
// }, [selectedValue, data, unit]);
useEffect(() => { useEffect(() => {
if (unit === "month") { if (unit === "month") {
@ -83,6 +99,27 @@ const DatePickerItem: React.FC<DatePickerItemProps> = ({
} }
}; };
const handleMouseEnd = () => {
if (!isMobile && scrollRef.current) {
const selectedIndex = Math.round(-translateY / ITEM_HEIGHT);
onSelect(data[selectedIndex]);
// Limit the translateY to ensure it aligns with a valid item
setTranslateY(-selectedIndex * ITEM_HEIGHT);
setTouchY(0);
}
setIsMouseDown(false);
};
const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
const deltaY = event.deltaY > 0 ? ITEM_HEIGHT : -ITEM_HEIGHT;
wheelScroll(-deltaY);
const selectedIndex = Math.round(
-translateY / ITEM_HEIGHT + (event.deltaY > 0 ? 1 : -1)
);
onSelect(data[selectedIndex]);
};
const wheelScroll = (deltaY: number) => { const wheelScroll = (deltaY: number) => {
const newTranslateY = translateY + deltaY; const newTranslateY = translateY + deltaY;
@ -108,7 +145,10 @@ const DatePickerItem: React.FC<DatePickerItemProps> = ({
onTouchStart={handleTouchStart} onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove} onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd} onTouchEnd={handleTouchEnd}
// onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseEnd}
onWheel={handleWheel}
ref={scrollRef} ref={scrollRef}
style={{ style={{
transform: `translateY(${translateY}px)`, transform: `translateY(${translateY}px)`,

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

@ -8,7 +8,9 @@ interface ISubPlanInformationProps {
} }
const getPrice = (plan: ISubscriptionPlan): string => { const getPrice = (plan: ISubscriptionPlan): string => {
return `$${(plan.trial?.price_cents || 0) / 100}`; return `$${
(plan.trial?.price_cents === 100 ? 99 : plan.trial?.price_cents || 0) / 100
}`;
}; };
function SubPlanInformation({ function SubPlanInformation({

30
src/components/SubscriptionPage/index.tsx
View File

@ -26,7 +26,7 @@ const getPriceFromTrial = (trial: ITrial | null) => {
if (!trial) { if (!trial) {
return 0; return 0;
} }
return (trial.price_cents || 0) / 100; return (trial.price_cents === 100 ? 99 : trial.price_cents || 0) / 100;
}; };
function SubscriptionPage(): JSX.Element { function SubscriptionPage(): JSX.Element {
@ -55,6 +55,7 @@ function SubscriptionPage(): JSX.Element {
); );
const { subPlan } = useParams(); const { subPlan } = useParams();
const birthday = useSelector(selectors.selectBirthday); const birthday = useSelector(selectors.selectBirthday);
console.log(nameError)
useEffect(() => { useEffect(() => {
if (subPlan) { if (subPlan) {
@ -129,16 +130,16 @@ function SubscriptionPage(): JSX.Element {
} }
}; };
// const email = useSelector(selectors.selectEmail);
const handleClick = async () => { const handleClick = async () => {
setIsSubmit(true); setIsSubmit(true);
if (!isValidEmail(email) || !isValidName(name)) { if (
!isValidEmail(email)
// || !isValidName(name)
) {
return; return;
} }
await authorization(); await authorization();
console.log("sdvdvsdv");
// navigate(routes.client.paymentMethod())
}; };
// const handleCross = () => setIsOpenModal(true); // const handleCross = () => setIsOpenModal(true);
const policyLink = ( const policyLink = (
@ -214,9 +215,10 @@ function SubscriptionPage(): JSX.Element {
<div className={styles["inputs-container"]}> <div className={styles["inputs-container"]}>
<div className={styles["inputs-container__input-container"]}> <div className={styles["inputs-container__input-container"]}>
<input <input
className={`${styles["inputs-container__input"]} ${ className={`${styles["inputs-container__input"]}`}
nameError && isSubmit && styles["inputs-container__input-error"] // ${
}`} // nameError && isSubmit && styles["inputs-container__input-error"]
// }
type="name" type="name"
name="name" name="name"
id="name" id="name"
@ -224,11 +226,11 @@ function SubscriptionPage(): JSX.Element {
onChange={handleChangeName} onChange={handleChangeName}
placeholder="Your name" placeholder="Your name"
/> />
{isSubmit && !!nameError && ( {/* {isSubmit && !!nameError && (
<span className={styles["inputs-container__label-error"]}> <span className={styles["inputs-container__label-error"]}>
{nameError} {nameError}
</span> </span>
)} )} */}
</div> </div>
<div className={styles["inputs-container__input-container"]}> <div className={styles["inputs-container__input-container"]}>
<input <input
@ -250,10 +252,10 @@ function SubscriptionPage(): JSX.Element {
</span> </span>
)} )}
</div> </div>
{isLoading && {isLoading && isSubmit && isValidEmail(email) && (
isSubmit && // isValidName(name) &&
isValidEmail(email) && <Loader />
isValidName(name) && <Loader />} )}
{(error || apiError) && ( {(error || apiError) && (
<Title variant="h3" style={{ color: "red", margin: 0 }}> <Title variant="h3" style={{ color: "red", margin: 0 }}>
Something went wrong Something went wrong

17
src/init.tsx
View File

@ -36,6 +36,23 @@ const init = async () => {
.use(new ReactPostprocessor()) .use(new ReactPostprocessor())
.init(options); .init(options);
window.Chargebee.init(config.chargebee); window.Chargebee.init(config.chargebee);
// SCRIPTS TO HEAD
const yandexMetric = () => {
const script = document.createElement("script");
script.setAttribute("src", "/metrics/yandex.js");
document.head.appendChild(script);
};
yandexMetric();
const smartLook = () => {
if (!config.smartlook_manage) return;
const script = document.createElement("script");
script.setAttribute("src", "/metrics/smartlook.js");
document.head.appendChild(script);
};
smartLook();
return ( return (
<React.Fragment> <React.Fragment>
<I18nextProvider i18n={i18nextInstance}> <I18nextProvider i18n={i18nextInstance}>