feat: add yandex metric, smartlook manage

2023-12-08 02:25:53 +00:00 · 2023-12-08 02:25:53 +00:00 · 1db2ca1151
commit 1db2ca1151
parent 1f46636339
9 changed files with 126 additions and 23 deletions
--- a/index.html
+++ b/index.html
@ -39,7 +39,7 @@
        }
      }
    </style>
-    <script type="text/javascript">
+    <!-- <script type="text/javascript">
      window.smartlook ||
        (function (d) {
          var o = (smartlook = function () {
@ -57,10 +57,18 @@
      smartlook("init", "2162354c75f8e0cb315634bc429aced457d3230c", {
        region: "eu",
      });
-    </script>
+    </script> -->
  </head>
  <body>
    <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 class="splash-screen">
        <img src="/leo.png" alt="Aura - Energy of your Horoscope" />
--- a/public/metrics/smartlook.js
+++ 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",
+});
--- a/public/metrics/yandex.js
+++ 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
+});
--- 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
  }
 }

--- 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 */
--- a/src/components/Compatibility/DatePickerItem.tsx
+++ b/src/components/Compatibility/DatePickerItem.tsx
@ -29,6 +29,8 @@ const DatePickerItem: React.FC<DatePickerItemProps> = ({
  const isMobile = useIsMobile();
  const scrollRef = useRef<HTMLDivElement | null>(null);

+  const [isMouseDown, setIsMouseDown] = useState<boolean>(false);
+
  const [touchY, setTouchY] = useState<number>(0);
  const [translateY, setTranslateY] = useState<number>(
    (data.indexOf(selectedValue) + (unit === "month" ? 12 : 0)) * -ITEM_HEIGHT
@ -38,6 +40,11 @@ const DatePickerItem: React.FC<DatePickerItemProps> = ({
    setTouchY(event.touches[0].clientY);
  };

+  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+    setTouchY(event.clientY);
+    setIsMouseDown(true);
+  };
+
  const handleTouchMove = (event: React.TouchEvent<HTMLDivElement>) => {
    if (isMobile && touchY !== null) {
      const deltaY = event.touches[0].clientY - touchY;
@ -47,11 +54,20 @@ const DatePickerItem: React.FC<DatePickerItemProps> = ({
    }
  };

-  useEffect(() => {
-    setTranslateY(
-      (data.indexOf(selectedValue) + (unit === "month" ? 12 : 0)) * -ITEM_HEIGHT
-    );
-  }, [selectedValue, data, unit]);
+  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
+    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<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 newTranslateY = translateY + deltaY;

@ -108,7 +145,10 @@ const DatePickerItem: React.FC<DatePickerItemProps> = ({
          onTouchStart={handleTouchStart}
          onTouchMove={handleTouchMove}
          onTouchEnd={handleTouchEnd}
-          //   onMouseDown={handleMouseDown}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseEnd}
+          onWheel={handleWheel}
          ref={scrollRef}
          style={{
            transform: `translateY(${translateY}px)`,
--- 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({
--- 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 {
        <div className={styles["inputs-container"]}>
          <div className={styles["inputs-container__input-container"]}>
            <input
-              className={`${styles["inputs-container__input"]} ${
-                nameError && isSubmit && styles["inputs-container__input-error"]
-              }`}
+              className={`${styles["inputs-container__input"]}`}
+              // ${
+              //   nameError && isSubmit && styles["inputs-container__input-error"]
+              // }
              type="name"
              name="name"
              id="name"
@ -224,11 +226,11 @@ function SubscriptionPage(): JSX.Element {
              onChange={handleChangeName}
              placeholder="Your name"
            />
-            {isSubmit && !!nameError && (
+            {/* {isSubmit && !!nameError && (
              <span className={styles["inputs-container__label-error"]}>
                {nameError}
              </span>
-            )}
+            )} */}
          </div>
          <div className={styles["inputs-container__input-container"]}>
            <input
@ -250,10 +252,10 @@ function SubscriptionPage(): JSX.Element {
              </span>
            )}
          </div>
-          {isLoading &&
-            isSubmit &&
-            isValidEmail(email) &&
-            isValidName(name) && <Loader />}
+          {isLoading && isSubmit && isValidEmail(email) && (
+            // isValidName(name) &&
+            <Loader />
+          )}
          {(error || apiError) && (
            <Title variant="h3" style={{ color: "red", margin: 0 }}>
              Something went wrong
--- 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}>