From 1db2ca115175dcee467768685df817e73a3b6739 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=9A=D0=B0=D1=82=D0=B0?= =?UTF-8?q?=D0=B5=D0=B2?= Date: Fri, 8 Dec 2023 02:25:53 +0000 Subject: [PATCH] feat: add yandex metric, smartlook manage --- index.html | 12 ++++- public/metrics/smartlook.js | 18 +++++++ public/metrics/yandex.js | 14 +++++ src/api/resources/Apps.ts | 1 + .../Compatibility/DatePicker.module.css | 1 + .../Compatibility/DatePickerItem.tsx | 52 ++++++++++++++++--- src/components/SubPlanInformation/index.tsx | 4 +- src/components/SubscriptionPage/index.tsx | 30 ++++++----- src/init.tsx | 17 ++++++ 9 files changed, 126 insertions(+), 23 deletions(-) create mode 100644 public/metrics/smartlook.js create mode 100644 public/metrics/yandex.js diff --git a/index.html b/index.html index 8695d3b..ffc72ee 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@ } } - --> +
Aura - Energy of your Horoscope diff --git a/public/metrics/smartlook.js b/public/metrics/smartlook.js new file mode 100644 index 0000000..24fda88 --- /dev/null +++ b/public/metrics/smartlook.js @@ -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", +}); \ No newline at end of file diff --git a/public/metrics/yandex.js b/public/metrics/yandex.js new file mode 100644 index 0000000..d502cba --- /dev/null +++ b/public/metrics/yandex.js @@ -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 +}); \ No newline at end of file diff --git a/src/api/resources/Apps.ts b/src/api/resources/Apps.ts index 970db05..de4c19f 100644 --- a/src/api/resources/Apps.ts +++ b/src/api/resources/Apps.ts @@ -18,6 +18,7 @@ export interface Response { runs_before_subscription_popup: number appirater_alerts: AppiraterAlertAppiraterAlert[] stripe_public_key: string + smartlook_manage: boolean } } diff --git a/src/components/Compatibility/DatePicker.module.css b/src/components/Compatibility/DatePicker.module.css index 1c8f36a..b066fc3 100644 --- a/src/components/Compatibility/DatePicker.module.css +++ b/src/components/Compatibility/DatePicker.module.css @@ -65,6 +65,7 @@ .date-picker-scroll { padding: 0; touch-action: none; + user-select: none; } /* Individual items in the scrollable components */ diff --git a/src/components/Compatibility/DatePickerItem.tsx b/src/components/Compatibility/DatePickerItem.tsx index 6330e70..35c7f21 100644 --- a/src/components/Compatibility/DatePickerItem.tsx +++ b/src/components/Compatibility/DatePickerItem.tsx @@ -29,6 +29,8 @@ const DatePickerItem: React.FC = ({ const isMobile = useIsMobile(); const scrollRef = useRef(null); + const [isMouseDown, setIsMouseDown] = useState(false); + const [touchY, setTouchY] = useState(0); const [translateY, setTranslateY] = useState( (data.indexOf(selectedValue) + (unit === "month" ? 12 : 0)) * -ITEM_HEIGHT @@ -38,6 +40,11 @@ const DatePickerItem: React.FC = ({ setTouchY(event.touches[0].clientY); }; + const handleMouseDown = (event: React.MouseEvent) => { + setTouchY(event.clientY); + setIsMouseDown(true); + }; + const handleTouchMove = (event: React.TouchEvent) => { if (isMobile && touchY !== null) { const deltaY = event.touches[0].clientY - touchY; @@ -47,11 +54,20 @@ const DatePickerItem: React.FC = ({ } }; - useEffect(() => { - setTranslateY( - (data.indexOf(selectedValue) + (unit === "month" ? 12 : 0)) * -ITEM_HEIGHT - ); - }, [selectedValue, data, unit]); + const handleMouseMove = (event: React.MouseEvent) => { + if (!isMobile && touchY !== null && isMouseDown) { + const deltaY = event.clientY - touchY; + wheelScroll(deltaY); + + setTouchY(event.clientY); + } + }; + + // useEffect(() => { + // setTranslateY( + // (data.indexOf(selectedValue) + (unit === "month" ? 12 : 0)) * -ITEM_HEIGHT + // ); + // }, [selectedValue, data, unit]); useEffect(() => { if (unit === "month") { @@ -83,6 +99,27 @@ const DatePickerItem: React.FC = ({ } }; + 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) => { + 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 newTranslateY = translateY + deltaY; @@ -108,7 +145,10 @@ const DatePickerItem: React.FC = ({ onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd} - // onMouseDown={handleMouseDown} + onMouseDown={handleMouseDown} + onMouseMove={handleMouseMove} + onMouseUp={handleMouseEnd} + onWheel={handleWheel} ref={scrollRef} style={{ transform: `translateY(${translateY}px)`, diff --git a/src/components/SubPlanInformation/index.tsx b/src/components/SubPlanInformation/index.tsx index e45bbca..6a4db85 100644 --- a/src/components/SubPlanInformation/index.tsx +++ b/src/components/SubPlanInformation/index.tsx @@ -8,7 +8,9 @@ interface ISubPlanInformationProps { } 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({ diff --git a/src/components/SubscriptionPage/index.tsx b/src/components/SubscriptionPage/index.tsx index 58861be..c99fcea 100644 --- a/src/components/SubscriptionPage/index.tsx +++ b/src/components/SubscriptionPage/index.tsx @@ -26,7 +26,7 @@ const getPriceFromTrial = (trial: ITrial | null) => { if (!trial) { return 0; } - return (trial.price_cents || 0) / 100; + return (trial.price_cents === 100 ? 99 : trial.price_cents || 0) / 100; }; function SubscriptionPage(): JSX.Element { @@ -55,6 +55,7 @@ function SubscriptionPage(): JSX.Element { ); const { subPlan } = useParams(); const birthday = useSelector(selectors.selectBirthday); + console.log(nameError) useEffect(() => { if (subPlan) { @@ -129,16 +130,16 @@ function SubscriptionPage(): JSX.Element { } }; - // const email = useSelector(selectors.selectEmail); const handleClick = async () => { setIsSubmit(true); - if (!isValidEmail(email) || !isValidName(name)) { + if ( + !isValidEmail(email) + // || !isValidName(name) + ) { return; } await authorization(); - console.log("sdvdvsdv"); - // navigate(routes.client.paymentMethod()) }; // const handleCross = () => setIsOpenModal(true); const policyLink = ( @@ -214,9 +215,10 @@ function SubscriptionPage(): JSX.Element {
- {isSubmit && !!nameError && ( + {/* {isSubmit && !!nameError && ( {nameError} - )} + )} */}
)}
- {isLoading && - isSubmit && - isValidEmail(email) && - isValidName(name) && } + {isLoading && isSubmit && isValidEmail(email) && ( + // isValidName(name) && + + )} {(error || apiError) && ( Something went wrong diff --git a/src/init.tsx b/src/init.tsx index 9d32f66..9bb2393 100644 --- a/src/init.tsx +++ b/src/init.tsx @@ -36,6 +36,23 @@ const init = async () => { .use(new ReactPostprocessor()) .init(options); 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 ( <React.Fragment> <I18nextProvider i18n={i18nextInstance}>