From 73380e0883569e1db132e143e7a3fee5714a352b 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?= <itkataev@gmail.com>
Date: Sat, 6 Apr 2024 20:40:38 +0000
Subject: [PATCH] Preview/advisors

---
 src/api/api.ts                                |  2 +-
 src/components/App/index.tsx                  | 38 +++++++++++++++-
 src/components/App/styles.css                 |  9 ++++
 src/components/pages/AdvisorChat/index.tsx    | 20 ++++++++-
 .../components/AssistantCard/index.tsx        |  2 +-
 .../AssistantCard/styles.module.css           |  3 +-
 src/components/pages/Advisors/index.tsx       |  2 +-
 .../SuccessPaymentPage/index.tsx              |  2 +-
 src/hooks/useSchemeColorByElement.tsx         | 30 +++++++++++++
 src/services/color-formatter/index.ts         | 44 +++++++++++++++++++
 10 files changed, 143 insertions(+), 9 deletions(-)
 create mode 100644 src/hooks/useSchemeColorByElement.tsx
 create mode 100644 src/services/color-formatter/index.ts

diff --git a/src/api/api.ts b/src/api/api.ts
index 547ea56..435efe1 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -26,7 +26,7 @@ import {
   AIRequestsV2,
   Assistants,
   OpenAI,
-  SinglePayment
+  SinglePayment,
 } from './resources'
 
 const api = {
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 7103ae9..32c2b4f 100755
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   Routes,
   Route,
@@ -109,6 +109,7 @@ import AdvisorChatPage from "../pages/AdvisorChat";
 import PaymentWithEmailPage from "../pages/PaymentWithEmailPage";
 import SuccessPaymentPage from "../pages/PaymentWithEmailPage/ResultPayment/SuccessPaymentPage";
 import FailPaymentPage from "../pages/PaymentWithEmailPage/ResultPayment/FailPaymentPage";
+import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
 import GetInformationPartnerPage from "../pages/GetInformationPartner";
 
 const isProduction = import.meta.env.MODE === "production";
@@ -228,6 +229,26 @@ function App(): JSX.Element {
     }
   }, [dispatch]);
 
+  // useEffect(() => {
+  //   const motion = window.matchMedia("(prefers-reduced-motion: no-preference)");
+  //   if (motion.matches) {
+  //     const scheme = document.querySelector('meta[name="theme-color"]');
+  //     console.log(document.querySelectorAll("section.page")[0]);
+  // let hue = 0;
+  // let color;
+  // const backgroundColor =
+  //   window.getComputedStyle(document.querySelectorAll("section.page")[0])
+  //     .backgroundColor || "#ffffff";
+  // scheme?.setAttribute("content", backgroundColor);
+
+  // setInterval(() => {
+  //   color = `hsl(${(hue += 5)} 50% 30%)`;
+  //   document.body.style.background = color;
+  //   scheme?.setAttribute("content", color);
+  // }, 50);
+  //   }
+  // }, []);
+
   return (
     <Routes>
       <Route element={<Layout setIsSpecialOfferOpen={setIsSpecialOfferOpen} />}>
@@ -550,6 +571,19 @@ function Layout({ setIsSpecialOfferOpen }: LayoutProps): JSX.Element {
   const changeIsSpecialOfferOpen = () => setIsSpecialOfferOpen(true);
   const homeConfig = useSelector(selectors.selectHome);
   const showNavbarFooter = homeConfig.isShowNavbar;
+  const mainRef = useRef<HTMLDivElement>(null);
+  // console.log(
+  //   mainRef.current?.querySelectorAll("section.page, .page, section")
+  // );
+  useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
+    location,
+  ]);
+  // useEffect(() => {
+  //   console.log(
+  //     "###$",
+  //     mainRef.current?.querySelectorAll("section.page, .page, section")[0]
+  //   );
+  // }, [location]);
 
   const birthdate = useSelector(selectors.selectBirthdate);
   const dataItems = useMemo(() => [birthdate], [birthdate]);
@@ -644,7 +678,7 @@ function Layout({ setIsSpecialOfferOpen }: LayoutProps): JSX.Element {
           <FullDataModal onClose={onCloseFullDataModal} />
         </Modal>
       )}
-      <main className="content">
+      <main className="content" ref={mainRef}>
         <Outlet />
       </main>
       {showFooter ? <Footer color={showNavbar ? "black" : "white"} /> : null}
diff --git a/src/components/App/styles.css b/src/components/App/styles.css
index ec522b1..26d8438 100644
--- a/src/components/App/styles.css
+++ b/src/components/App/styles.css
@@ -29,3 +29,12 @@
 .page-responsive {
   width: 100%;
 }
+
+#color-pointer {
+  position: fixed;
+  background: transparent;
+  z-index: 12323423;
+  width: 100%;
+  height: 2px;
+  pointer-events: none;
+}
diff --git a/src/components/pages/AdvisorChat/index.tsx b/src/components/pages/AdvisorChat/index.tsx
index 297ce63..ae3b5a8 100644
--- a/src/components/pages/AdvisorChat/index.tsx
+++ b/src/components/pages/AdvisorChat/index.tsx
@@ -13,6 +13,7 @@ import { IMessage, ResponseRunThread } from "@/api/resources/OpenAI";
 import Message from "./components/Message";
 import LoaderDots from "./components/LoaderDots";
 import useDetectScroll from "@smakss/react-scroll-direction";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
 
 function AdvisorChatPage() {
   const { id } = useParams();
@@ -21,6 +22,10 @@ function AdvisorChatPage() {
   const { scrollDir, scrollPosition } = useDetectScroll();
   const token = useSelector(selectors.selectToken);
   const openAiToken = useSelector(selectors.selectOpenAiToken);
+  const birthdate = useSelector(selectors.selectBirthdate);
+  const zodiacSign = getZodiacSignByDate(birthdate);
+  const { username } = useSelector(selectors.selectUser);
+  const { gender } = useSelector(selectors.selectQuestionnaire);
   const [assistant, setAssistant] = useState<IAssistant>();
   const [messageText, setMessageText] = useState("");
   const [textareaRows, setTextareaRows] = useState(1);
@@ -192,12 +197,15 @@ function AdvisorChatPage() {
   };
 
   const createMessage = async (messageText: string, threadId: string) => {
+    const content = `#USER INFO: zodiac sign - ${zodiacSign}; gender - ${gender}; birthdate - ${birthdate}; name - ${
+      username || "unknown"
+    };# ${messageText}`;
     const message = await api.createMessage({
       token: openAiToken,
       method: "POST",
       path: routes.openAi.createMessage(threadId),
       role: "user",
-      content: messageText,
+      content: content,
     });
     return message;
   };
@@ -294,6 +302,14 @@ function AdvisorChatPage() {
 
   const getIsSelfMessage = (role: string) => role === "user";
 
+  const deleteDataFromMessage = (messageText: string) => {
+    const splittedText = messageText.split("#");
+    if (splittedText.length > 2) {
+      return splittedText.slice(2).join("#");
+    }
+    return messageText;
+  };
+
   return (
     <section className={`${styles.page} page`}>
       {isLoading && (
@@ -322,7 +338,7 @@ function AdvisorChatPage() {
             message.content.map((content) => (
               <Message
                 avatar={assistant?.photo?.th2x || ""}
-                text={content.text.value}
+                text={deleteDataFromMessage(content.text.value)}
                 advisorName={assistant?.name || ""}
                 backgroundTextColor={
                   getIsSelfMessage(message.role) ? "#0080ff" : "#c9c9c9"
diff --git a/src/components/pages/Advisors/components/AssistantCard/index.tsx b/src/components/pages/Advisors/components/AssistantCard/index.tsx
index 3c4f1a1..a5439e1 100644
--- a/src/components/pages/Advisors/components/AssistantCard/index.tsx
+++ b/src/components/pages/Advisors/components/AssistantCard/index.tsx
@@ -27,7 +27,7 @@ function AssistantCard({
         </Title>
       </div>
       <div className={styles.footer}>
-        <span className={styles.expirience}>{expirience}</span>
+        <span className={styles.experience}>{expirience}</span>
         <div className={styles["rating-container"]}>
           <div className={styles.stars}>
             {Array(stars)
diff --git a/src/components/pages/Advisors/components/AssistantCard/styles.module.css b/src/components/pages/Advisors/components/AssistantCard/styles.module.css
index 427f8d4..fc31c33 100644
--- a/src/components/pages/Advisors/components/AssistantCard/styles.module.css
+++ b/src/components/pages/Advisors/components/AssistantCard/styles.module.css
@@ -70,10 +70,11 @@
   margin-top: 8px;
 }
 
-.expirience {
+.experience {
   white-space: nowrap;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   width: 100%;
+  line-height: 150%;
 }
diff --git a/src/components/pages/Advisors/index.tsx b/src/components/pages/Advisors/index.tsx
index aa4549b..6fef90c 100644
--- a/src/components/pages/Advisors/index.tsx
+++ b/src/components/pages/Advisors/index.tsx
@@ -25,7 +25,7 @@ function Advisors() {
     setAssistants(ai_assistants);
     setIsLoading(false);
     return { ai_assistants };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [api, dispatch, token]);
 
   useApiCall<Assistants.Response>(loadData);
diff --git a/src/components/pages/PaymentWithEmailPage/ResultPayment/SuccessPaymentPage/index.tsx b/src/components/pages/PaymentWithEmailPage/ResultPayment/SuccessPaymentPage/index.tsx
index 219efb1..2efb540 100644
--- a/src/components/pages/PaymentWithEmailPage/ResultPayment/SuccessPaymentPage/index.tsx
+++ b/src/components/pages/PaymentWithEmailPage/ResultPayment/SuccessPaymentPage/index.tsx
@@ -13,7 +13,7 @@ function SuccessPaymentPage(): JSX.Element {
         style={{ minHeight: "98px" }}
       />
       <div className={styles.text}>
-        <Title variant="h1">The information has been sent to your e-mail</Title>
+        <Title variant="h1">The information has been sent to your email</Title>
         <p>{t("auweb.pay_good.text1")}</p>
       </div>
     </section>
diff --git a/src/hooks/useSchemeColorByElement.tsx b/src/hooks/useSchemeColorByElement.tsx
new file mode 100644
index 0000000..9beb1b7
--- /dev/null
+++ b/src/hooks/useSchemeColorByElement.tsx
@@ -0,0 +1,30 @@
+import { getValuesFromRGBString } from "@/services/color-formatter";
+import { useEffect } from "react";
+
+export const useSchemeColorByElement = (
+  element: Element | null,
+  searchSelectors: string,
+  dependencies: ReadonlyArray<unknown> = []
+) => {
+  useEffect(() => {
+    const pageElement = element?.querySelectorAll(searchSelectors)[0];
+    console.log("pageElement", pageElement);
+
+    const scheme = document.querySelector('meta[name="theme-color"]');
+    if (scheme && !pageElement) {
+      return scheme.setAttribute("content", "#ffffff");
+    }
+    if (!pageElement) return;
+    let backgroundColor = window.getComputedStyle(pageElement)?.backgroundColor;
+    const colorScheme = getValuesFromRGBString(backgroundColor);
+    if (colorScheme?.a === 0) {
+      backgroundColor = "#ffffff";
+    }
+    console.log("backgroundColor", backgroundColor);
+    if (scheme && backgroundColor.length) {
+      return scheme.setAttribute("content", backgroundColor);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element, ...dependencies]);
+  return null;
+};
diff --git a/src/services/color-formatter/index.ts b/src/services/color-formatter/index.ts
new file mode 100644
index 0000000..0513ae2
--- /dev/null
+++ b/src/services/color-formatter/index.ts
@@ -0,0 +1,44 @@
+const hexToRgb = (hex: string) => {
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function (_m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+};
+
+interface IRGBValues {
+  r: number;
+  g: number;
+  b: number;
+}
+
+const rgbToHex = ({ r, g, b }: IRGBValues) => {
+  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+};
+
+export const getValuesFromRGBString = (rgb: string) => {
+  const rgbValues = rgb.match(/\d+/g);
+  if (rgbValues) {
+    return {
+      r: Number(rgbValues[0]),
+      g: Number(rgbValues[1]),
+      b: Number(rgbValues[2]),
+      a: Number(rgbValues[3] || 1),
+    };
+  }
+  return null;
+};
+
+export class ColorFormatter {
+  public static rgbToHex = rgbToHex;
+  public static hexToRgb = hexToRgb;
+}