From 9c3c5b14d3fefcae6b119161a9132bb7e05bd161 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, 1 Jun 2024 22:39:58 +0000
Subject: [PATCH] edits

---
 index.html                                    |  2 +-
 src/api/api.ts                                |  2 +
 src/api/resources/UserSubscriptionStatus.ts   |  9 ++
 src/components/App/index.tsx                  |  7 +-
 .../CustomAnswers/Birthdate/styles.module.css |  1 +
 .../CustomAnswers/MultipleAnswers/index.tsx   | 84 ++++++++++---------
 .../MultipleAnswers/styles.module.css         | 15 ++++
 .../Questionnaire/styles.module.css           |  1 +
 .../ABDesign/v1/pages/Onboarding/index.tsx    |  6 +-
 .../v1/pages/Onboarding/styles.module.css     |  1 +
 .../RelationshipZodiacInfo/styles.module.css  | 10 ++-
 .../WithPartnerInformation/styles.module.css  |  4 +-
 .../pages/AddConsultation/index.tsx           | 59 ++++++-------
 .../pages/AddReport/index.tsx                 | 63 +++++++-------
 .../pages/UnlimitedReadings/index.tsx         | 59 ++++++-------
 src/routes.ts                                 |  2 +
 16 files changed, 188 insertions(+), 137 deletions(-)
diff --git a/index.html b/index.html
index 5a17c2b..05b8e9c 100755
--- a/index.html
+++ b/index.html
@@ -69,7 +69,7 @@
   </head>
   <body>
     <!-- Yandex.Metrika counter -->
-    <script type="text/javascript" async="async">
+    <script type="text/javascript">
       (function (m, e, t, r, i, k, a) {
         m[i] =
           m[i] ||
diff --git a/src/api/api.ts b/src/api/api.ts
index 421d668..4acb49b 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -49,6 +49,8 @@ const api = {
   getSubscriptionPlans: createMethod<SubscriptionPlans.Payload, SubscriptionPlans.Response>(SubscriptionPlans.createRequest),
   getSubscriptionCheckout: createMethod<SubscriptionCheckout.Payload, SubscriptionCheckout.Response>(SubscriptionCheckout.createRequest),
   getSubscriptionStatus: createMethod<SubscriptionStatus.Payload, SubscriptionStatus.Response>(SubscriptionStatus.createRequest),
+  // new get subscription status
+  getSubscriptionStatusNew: createMethod<SubscriptionStatus.Payload, SubscriptionStatus.ResponseNew>(SubscriptionStatus.createRequestNew),
   getAiCompatCategories: createMethod<AICompatCategories.Payload, AICompatCategories.Response>(AICompatCategories.createRequest),
   getAiCompat: createMethod<AICompats.Payload, AICompats.Response>(AICompats.createRequest),
   getAiRequest: createMethod<AIRequests.Payload, AIRequests.Response>(AIRequests.createRequest),
diff --git a/src/api/resources/UserSubscriptionStatus.ts b/src/api/resources/UserSubscriptionStatus.ts
index 32c5a79..caca009 100644
--- a/src/api/resources/UserSubscriptionStatus.ts
+++ b/src/api/resources/UserSubscriptionStatus.ts
@@ -14,3 +14,12 @@ export const createRequest = ({ token }: Payload): Request => {
   const url = new URL(routes.server.subscriptionStatus())
   return new Request(url, { method: 'GET', headers: getAuthHeaders(token) })
 }
+
+export interface ResponseNew {
+  subscription: boolean;
+}
+
+export const createRequestNew = ({ token }: Payload): Request => {
+  const url = new URL(routes.server.subscriptionStatusNew())
+  return new Request(url, { method: 'GET', headers: getAuthHeaders(token) })
+}
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 4863ec9..94b8f75 100755
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -222,10 +222,13 @@ function App(): JSX.Element {
         token,
       });
 
-      if (has_subscription && user) {
+      const { subscription: subscriptionStatusNew } =
+        await api.getSubscriptionStatusNew({ token });
+
+      if ((has_subscription || subscriptionStatusNew) && user) {
         return dispatch(actions.status.update("subscribed"));
       }
-      if (!has_subscription && user) {
+      if (!has_subscription && !subscriptionStatusNew && user) {
         return dispatch(actions.status.update("unsubscribed"));
       }
       if (!user) {
diff --git a/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/Birthdate/styles.module.css b/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/Birthdate/styles.module.css
index 7dc1781..c30f19c 100644
--- a/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/Birthdate/styles.module.css
+++ b/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/Birthdate/styles.module.css
@@ -15,4 +15,5 @@
 .image {
   position: absolute;
   bottom: 8px;
+  z-index: -1;
 }
\ No newline at end of file
diff --git a/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/index.tsx b/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/index.tsx
index 8923b56..e86b224 100644
--- a/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/index.tsx
+++ b/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/index.tsx
@@ -1,6 +1,5 @@
 import { IAnswer } from "@/data";
 import styles from "./styles.module.css";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { actions, selectors } from "@/store";
@@ -20,34 +19,36 @@ function MultiplyAnswers({ answers }: IMultiplyAnswersProps) {
   const { currentlyAffecting, gender } = useSelector(
     selectors.selectQuestionnaire
   );
-  const [selectedAnswers, setSelectedAnswers] = useState<string[]>(
-    currentlyAffecting?.split("$") || []
-  );
 
   const handleClick = (answer: IAnswer) => {
-    if (selectedAnswers.includes(answer.id)) {
-      return setSelectedAnswers((prevState) =>
-        prevState.filter((item) => item !== answer.id)
+    if (currentlyAffecting.includes(`$${answer.id}`)) {
+      return dispatch(
+        actions.questionnaire.update({
+          currentlyAffecting: currentlyAffecting.replace(`$${answer.id}`, ""),
+        })
       );
     }
     if (answer.id === "none_of_these") {
-      return setSelectedAnswers([answer.id]);
+      return dispatch(
+        actions.questionnaire.update({
+          currentlyAffecting: `$${answer.id}`,
+        })
+      );
     }
     if (
-      selectedAnswers.includes("none_of_these") &&
+      currentlyAffecting.includes("$none_of_these") &&
       answer.id !== "none_of_these"
     ) {
       return;
     }
-    return setSelectedAnswers((prevState) => [...prevState, answer.id]);
+    return dispatch(
+      actions.questionnaire.update({
+        currentlyAffecting: `${currentlyAffecting}$${answer.id}`,
+      })
+    );
   };
 
   const handleNext = () => {
-    dispatch(
-      actions.questionnaire.update({
-        currentlyAffecting: selectedAnswers.join("$"),
-      })
-    );
     navigate(
       `${routes.client.questionnaireV1()}/relationships/partnerPriority`
     );
@@ -55,30 +56,35 @@ function MultiplyAnswers({ answers }: IMultiplyAnswersProps) {
 
   return (
     <>
-      {answers.map((answer, index) => (
-        <Answer
-          key={index}
-          answer={answer}
-          disabled={
-            selectedAnswers.includes("none_of_these") &&
-            answer.id !== "none_of_these"
-          }
-          classNameContainer={
-            selectedAnswers.includes(answer.id) ? styles["answer-active"] : ""
-          }
-          type="multiply"
-          active={selectedAnswers.includes(answer.id)}
-          gender={gender}
-          onClick={() => handleClick(answer)}
-        />
-      ))}
-      <QuestionnaireGreenButton
-        className={styles.button}
-        onClick={handleNext}
-        disabled={!selectedAnswers.length}
-      >
-        {t("next")}
-      </QuestionnaireGreenButton>
+      <div className={styles["multiply-answers"]}>
+        {answers.map((answer, index) => (
+          <Answer
+            key={index}
+            answer={answer}
+            disabled={
+              currentlyAffecting.includes("$none_of_these") &&
+              answer.id !== "none_of_these"
+            }
+            classNameContainer={
+              currentlyAffecting.includes(`${answer.id}`)
+                ? styles["answer-active"]
+                : ""
+            }
+            type="multiply"
+            active={currentlyAffecting.includes(`${answer.id}`)}
+            gender={gender}
+            onClick={() => handleClick(answer)}
+          />
+        ))}
+      </div>
+      {!!currentlyAffecting.length && (
+        <QuestionnaireGreenButton
+          className={styles.button}
+          onClick={handleNext}
+        >
+          {t("next")}
+        </QuestionnaireGreenButton>
+      )}
     </>
   );
 }
diff --git a/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.css b/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.css
index fc7a13a..e8bd9e5 100644
--- a/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.css
+++ b/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.css
@@ -1,4 +1,19 @@
+.multiply-answers {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 11px;
+  z-index: 0;
+  padding-bottom: 116px;
+  width: 100%;
+}
+
+
 .button {
+  position: fixed;
+  bottom: calc(0dvh + 16px);
+  width: calc(100% - 64px);
+  max-width: 396px;
   margin-top: 8px;
 }
 
diff --git a/src/components/pages/ABDesign/v1/components/Questionnaire/styles.module.css b/src/components/pages/ABDesign/v1/components/Questionnaire/styles.module.css
index 2d5375e..e8f06ca 100644
--- a/src/components/pages/ABDesign/v1/components/Questionnaire/styles.module.css
+++ b/src/components/pages/ABDesign/v1/components/Questionnaire/styles.module.css
@@ -49,6 +49,7 @@
   align-items: center;
   gap: 11px;
   margin-top: 28px;
+  z-index: 0;
 }
 
 .description {
diff --git a/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx b/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx
index c7c57dc..5508905 100644
--- a/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx
+++ b/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx
@@ -54,7 +54,11 @@ function OnboardingPage() {
 
   return (
     <section className={`${styles.page} page`}>
-      <img className={styles.image} src="/leo.png" alt="Leo" />
+      <img
+        className={`${styles.image} ${styles[periodClassName]}`}
+        src="/leo.png"
+        alt="Leo"
+      />
       {onboardingTitles[activeIndexTitle] && (
         <Title className={`${styles.title} ${styles[periodClassName]}`}>
           {onboardingTitles[activeIndexTitle]}
diff --git a/src/components/pages/ABDesign/v1/pages/Onboarding/styles.module.css b/src/components/pages/ABDesign/v1/pages/Onboarding/styles.module.css
index dc240e5..2219e09 100644
--- a/src/components/pages/ABDesign/v1/pages/Onboarding/styles.module.css
+++ b/src/components/pages/ABDesign/v1/pages/Onboarding/styles.module.css
@@ -16,6 +16,7 @@
   margin-top: 100px;
   width: 100%;
   max-width: 273px;
+  transition: opacity 1s;
 }
 
 .title {
diff --git a/src/components/pages/ABDesign/v1/pages/RelationshipZodiacInfo/styles.module.css b/src/components/pages/ABDesign/v1/pages/RelationshipZodiacInfo/styles.module.css
index fbcf33c..ca1b4ca 100644
--- a/src/components/pages/ABDesign/v1/pages/RelationshipZodiacInfo/styles.module.css
+++ b/src/components/pages/ABDesign/v1/pages/RelationshipZodiacInfo/styles.module.css
@@ -20,15 +20,17 @@
 }
 
 .image-container {
-  display: flex;
-  justify-content: center;
+  display: grid;
   align-items: center;
+  justify-items: center;
+  grid-template-columns: calc(50% - 30px) min-content calc(50% - 30px);
   width: 100%;
-  gap: 32px;
+  gap: 6px;
 }
 
 .image-container > img {
-  max-width: 118px;
+  /* max-width: 118px; */
+  max-height: 196px;
 }
 
 .compatibility-description-container {
diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/WithPartnerInformation/styles.module.css b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/WithPartnerInformation/styles.module.css
index 1d019da..259ade7 100644
--- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/WithPartnerInformation/styles.module.css
+++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/WithPartnerInformation/styles.module.css
@@ -18,7 +18,7 @@
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
   display: grid;
-  grid-template-columns: 1fr min-content 1fr;
+  grid-template-columns: calc(50% - 28px) min-content calc(50% - 28px);
   align-items: center;
   gap: 4px;
   padding-top: 10px;
@@ -35,6 +35,8 @@
 
 .image-container > img {
   height: 196px;
+  width: 100%;
+  object-fit: contain;
 }
 
 .image-container > p {
diff --git a/src/components/pages/AdditionalPurchases/pages/AddConsultation/index.tsx b/src/components/pages/AdditionalPurchases/pages/AddConsultation/index.tsx
index bba9b94..509dbed 100644
--- a/src/components/pages/AdditionalPurchases/pages/AddConsultation/index.tsx
+++ b/src/components/pages/AdditionalPurchases/pages/AddConsultation/index.tsx
@@ -10,9 +10,7 @@ import { SinglePayment, useApi, useApiCall } from "@/api";
 import { useSelector } from "react-redux";
 import { selectors } from "@/store";
 import { useCallback, useState } from "react";
-import {
-  ResponsePost,
-} from "@/api/resources/SinglePayment";
+import { ResponsePost } from "@/api/resources/SinglePayment";
 import { createSinglePayment } from "@/services/singlePayment";
 import Modal from "@/components/Modal";
 import PaymentForm from "@/components/pages/SinglePaymentPage/PaymentForm";
@@ -25,9 +23,7 @@ function AddConsultationPage() {
   const api = useApi();
   const tokenFromStore = useSelector(selectors.selectToken);
   const [isLoading, setIsLoading] = useState(false);
-  const [paymentIntent, setPaymentIntent] = useState<
-    ResponsePost | null
-  >(null);
+  const [paymentIntent, setPaymentIntent] = useState<ResponsePost | null>(null);
   const [isError, setIsError] = useState(false);
   const returnUrl = `${window.location.protocol}//${
     window.location.host
@@ -45,29 +41,34 @@ function AddConsultationPage() {
   );
 
   const handleClick = async () => {
-    if (!userFromStore || !currentProduct) return;
-    setIsLoading(true);
-    const { _id, key } = currentProduct;
-    const paymentInfo = {
-      productId: _id,
-      key,
-    };
-    const paymentIntent = await createSinglePayment(
-      userFromStore,
-      paymentInfo,
-      tokenFromStore,
-      userFromStore.email,
-      userFromStore.profile.full_name,
-      userFromStore.profile.birthday,
-      returnUrl,
-      api
-    );
-    setPaymentIntent(paymentIntent);
-    setIsLoading(false);
-    if ("payment" in paymentIntent) {
-      if (paymentIntent.payment.status === "paid")
-        return navigate(routes.client.getInformationPartner());
-      return setIsError(true);
+    try {
+      if (!userFromStore || !currentProduct) return;
+      setIsLoading(true);
+      const { _id, key } = currentProduct;
+      const paymentInfo = {
+        productId: _id,
+        key,
+      };
+      const paymentIntent = await createSinglePayment(
+        userFromStore,
+        paymentInfo,
+        tokenFromStore,
+        userFromStore.email,
+        userFromStore.profile.full_name,
+        userFromStore.profile.birthday,
+        returnUrl,
+        api
+      );
+      setPaymentIntent(paymentIntent);
+      if ("payment" in paymentIntent) {
+        if (paymentIntent.payment.status === "paid")
+          return navigate(routes.client.getInformationPartner());
+        return setIsError(true);
+      }
+    } catch (error) {
+      setIsError(true);
+    } finally {
+      setIsLoading(false);
     }
   };
 
diff --git a/src/components/pages/AdditionalPurchases/pages/AddReport/index.tsx b/src/components/pages/AdditionalPurchases/pages/AddReport/index.tsx
index ca2df3b..ad48092 100644
--- a/src/components/pages/AdditionalPurchases/pages/AddReport/index.tsx
+++ b/src/components/pages/AdditionalPurchases/pages/AddReport/index.tsx
@@ -9,9 +9,7 @@ import FooterButton from "../../components/FooterButton";
 import routes from "@/routes";
 import PaymentAddress from "../../components/PaymentAddress";
 import { createSinglePayment } from "@/services/singlePayment";
-import {
-  ResponsePost,
-} from "@/api/resources/SinglePayment";
+import { ResponsePost } from "@/api/resources/SinglePayment";
 import { useAuth } from "@/auth";
 import { useSelector } from "react-redux";
 import { selectors } from "@/store";
@@ -26,9 +24,7 @@ function AddReportPage() {
   const { user: userFromStore } = useAuth();
   const api = useApi();
   const tokenFromStore = useSelector(selectors.selectToken);
-  const [paymentIntent, setPaymentIntent] = useState<
-    ResponsePost | null
-  >(null);
+  const [paymentIntent, setPaymentIntent] = useState<ResponsePost | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
   const [activeOffer, setActiveOffer] = useState(signUpOffers[0]);
@@ -48,31 +44,36 @@ function AddReportPage() {
   };
 
   const handleClick = async () => {
-    if (!userFromStore || !activeOffer) return;
-    const currentProduct = getCurrentProduct(activeOffer?.productKey);
-    if (!currentProduct) return;
-    setIsLoading(true);
-    const { _id, key } = currentProduct;
-    const paymentInfo = {
-      productId: _id,
-      key,
-    };
-    const paymentIntent = await createSinglePayment(
-      userFromStore,
-      paymentInfo,
-      tokenFromStore,
-      userFromStore.email,
-      userFromStore.profile.full_name,
-      userFromStore.profile.birthday,
-      returnUrl,
-      api
-    );
-    setPaymentIntent(paymentIntent);
-    setIsLoading(false);
-    if ("payment" in paymentIntent) {
-      if (paymentIntent.payment.status === "paid")
-        return navigate(routes.client.unlimitedReadings());
-      return setIsError(true);
+    try {
+      if (!userFromStore || !activeOffer) return;
+      const currentProduct = getCurrentProduct(activeOffer?.productKey);
+      if (!currentProduct) return;
+      setIsLoading(true);
+      const { _id, key } = currentProduct;
+      const paymentInfo = {
+        productId: _id,
+        key,
+      };
+      const paymentIntent = await createSinglePayment(
+        userFromStore,
+        paymentInfo,
+        tokenFromStore,
+        userFromStore.email,
+        userFromStore.profile.full_name,
+        userFromStore.profile.birthday,
+        returnUrl,
+        api
+      );
+      setPaymentIntent(paymentIntent);
+      if ("payment" in paymentIntent) {
+        if (paymentIntent.payment.status === "paid")
+          return navigate(routes.client.unlimitedReadings());
+        return setIsError(true);
+      }
+    } catch (error) {
+      setIsError(true);
+    } finally {
+      setIsLoading(false);
     }
   };
 
diff --git a/src/components/pages/AdditionalPurchases/pages/UnlimitedReadings/index.tsx b/src/components/pages/AdditionalPurchases/pages/UnlimitedReadings/index.tsx
index f60f3dc..7d638a7 100644
--- a/src/components/pages/AdditionalPurchases/pages/UnlimitedReadings/index.tsx
+++ b/src/components/pages/AdditionalPurchases/pages/UnlimitedReadings/index.tsx
@@ -16,9 +16,7 @@ import { selectors } from "@/store";
 import { useCallback, useState } from "react";
 import { createSinglePayment } from "@/services/singlePayment";
 import Loader, { LoaderColor } from "@/components/Loader";
-import {
-  ResponsePost,
-} from "@/api/resources/SinglePayment";
+import { ResponsePost } from "@/api/resources/SinglePayment";
 import Modal from "@/components/Modal";
 import { getPriceCentsToDollars } from "@/services/price";
 import PaymentForm from "@/components/pages/SinglePaymentPage/PaymentForm";
@@ -40,9 +38,7 @@ function UnlimitedReadingsPage() {
   const api = useApi();
   const tokenFromStore = useSelector(selectors.selectToken);
   const [isLoading, setIsLoading] = useState(false);
-  const [paymentIntent, setPaymentIntent] = useState<
-    ResponsePost | null
-  >(null);
+  const [paymentIntent, setPaymentIntent] = useState<ResponsePost | null>(null);
   const [isError, setIsError] = useState(false);
   const returnUrl = `${window.location.protocol}//${
     window.location.host
@@ -60,29 +56,34 @@ function UnlimitedReadingsPage() {
   );
 
   const handleClick = async () => {
-    if (!userFromStore || !currentProduct) return;
-    setIsLoading(true);
-    const { _id, key } = currentProduct;
-    const paymentInfo = {
-      productId: _id,
-      key,
-    };
-    const paymentIntent = await createSinglePayment(
-      userFromStore,
-      paymentInfo,
-      tokenFromStore,
-      userFromStore.email,
-      userFromStore.profile.full_name,
-      userFromStore.profile.birthday,
-      returnUrl,
-      api
-    );
-    setPaymentIntent(paymentIntent);
-    setIsLoading(false);
-    if ("payment" in paymentIntent) {
-      if (paymentIntent.payment.status === "paid")
-        return navigate(routes.client.addConsultation());
-      return setIsError(true);
+    try {
+      if (!userFromStore || !currentProduct) return;
+      setIsLoading(true);
+      const { _id, key } = currentProduct;
+      const paymentInfo = {
+        productId: _id,
+        key,
+      };
+      const paymentIntent = await createSinglePayment(
+        userFromStore,
+        paymentInfo,
+        tokenFromStore,
+        userFromStore.email,
+        userFromStore.profile.full_name,
+        userFromStore.profile.birthday,
+        returnUrl,
+        api
+      );
+      setPaymentIntent(paymentIntent);
+      if ("payment" in paymentIntent) {
+        if (paymentIntent.payment.status === "paid")
+          return navigate(routes.client.addConsultation());
+        return setIsError(true);
+      }
+    } catch (error) {
+      setIsError(true);
+    } finally {
+      setIsLoading(false);
     }
   };
 
diff --git a/src/routes.ts b/src/routes.ts
index 2f0c89b..3cf0252 100755
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -225,6 +225,8 @@ const routes = {
       [apiHost, prefix, "user", "subscription_receipts", "status.json"].join(
         "/"
       ),
+    subscriptionStatusNew: () =>
+      [dApiHost, "users", "subscription", "status"].join("/"),
     subscriptionReceipts: () =>
       [apiHost, prefix, "user", "subscription_receipts.json"].join("/"),
     subscriptionReceipt: (id: string) =>
