Merge branch 'questionnaire' into 'main'

feat: some edits

See merge request witapp/aura-webapp!31

src/components/Answer/index.tsx

@@ -6,6 +6,7 @@ interface IAnswerProps {
   answer: IAnswer;
   type?: "multiply" | "single" | "only-text-single";
   active?: boolean;
+  disabled?: boolean;
   onClick: () => void;
 }
 
@@ -14,13 +15,14 @@ function Answer({
   type = "single",
   active,
   classNameContainer = "",
+  disabled = false,
   onClick,
 }: IAnswerProps) {
   return (
     <div
       className={`${styles.container} ${
         active ? styles.active : ""
-      } ${classNameContainer}`}
+      } ${classNameContainer} ${disabled ? styles.disabled : ""}`}
       onClick={onClick}
     >
       {type !== "only-text-single" && (

src/components/Answer/styles.module.css

@@ -19,6 +19,10 @@
   background: rgb(234, 238, 247);
 }
 
+.container.disabled {
+  opacity: 0.5;
+}
+
 .container.active {
   background: linear-gradient(
     165.54deg,

src/components/EmailEnterPage/index.tsx

@@ -152,7 +152,7 @@ function EmailEnterPage(): JSX.Element {
   return (
     <section className="page">
       <Title variant="h2" className={styles.title}>
-        Enter your email to see how you can find your perfect partner
+        Enter your email
       </Title>
       <p className={styles["not-share"]}>{t("we_dont_share")}</p>
       <NameInput

src/components/EmailEnterPage/styles.module.css

@@ -1,5 +1,5 @@
 .title {
-  font-size: 18px;
+  font-size: 20px;
   line-height: 28px;
   font-weight: 700;
   color: #333333;

src/components/PlacePicker/index.tsx

@@ -4,10 +4,17 @@ interface IPlacePickerProps {
   name: string;
   value: string;
   maxLength: number;
+  isDisabled?: boolean;
   onChange: (value: string) => void;
 }
 
-function PlacePicker({ name, value, maxLength, onChange }: IPlacePickerProps) {
+function PlacePicker({
+  name,
+  value,
+  maxLength,
+  isDisabled = false,
+  onChange,
+}: IPlacePickerProps) {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const place = e.target.value;
     onChange(place);
@@ -20,6 +27,7 @@ function PlacePicker({ name, value, maxLength, onChange }: IPlacePickerProps) {
         name={name}
         type="text"
         placeholder="Enter city of birth"
+        disabled={isDisabled}
         maxLength={maxLength}
         value={value}
         onChange={handleChange}

src/components/PlacePicker/styles.module.css

@@ -12,3 +12,7 @@
   line-height: 24px;
   font-size: 16px;
 }
+
+.full-address:disabled {
+  opacity: 0.5;
+}

src/components/pages/Questionnaire/CustomAnswers/BirthPlace/index.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import PlacePicker from "@/components/PlacePicker";
+import { useState } from "react";
 
 interface IBirthPlaceCustomAnswerProps {
   affiliation?: "self" | "partner";
@@ -23,39 +24,57 @@ function BirthPlaceCustomAnswer({
       ? questionnaire.birthPlace
       : questionnaire.partnerBirthPlace;
 
+  const [isKnownPartnerBirthPlace, setIsKnownPartnerBirthPlace] =
+    useState(true);
+
   const handleChange = (birthPlace: string) => {
     if (affiliation === "partner") {
-      dispatch(actions.questionnaire.update({ partnerBirthPlace: birthPlace }));
-    }
-    if (affiliation === "self") {
-      dispatch(actions.questionnaire.update({ birthPlace }));
+      return dispatch(
+        actions.questionnaire.update({ partnerBirthPlace: birthPlace })
+      );
     }
+    // affiliation === "self"
+    return dispatch(actions.questionnaire.update({ birthPlace }));
   };
 
   const handleNext = () => {
-    if (affiliation === "self") {
-      navigate(routes.client.loadingInRelationship());
-    }
     if (affiliation === "partner") {
-      navigate(routes.client.relationshipAlmostThere());
+      return navigate(routes.client.relationshipAlmostThere());
     }
+    // affiliation === "self"
+    return navigate(routes.client.loadingInRelationship());
   };
 
   return (
-    <div className={styles.container}>
-      <PlacePicker
-        value={birthPlace}
-        name="birthPlace"
-        maxLength={1000}
-        onChange={handleChange}
-      />
-
-      {!!birthPlace.length && (
-        <MainButton className={styles.button} onClick={handleNext}>
-          {t("next")}
-        </MainButton>
+    <>
+      {affiliation === "partner" && (
+        <label className={styles["checkbox-container"]} htmlFor="isKnown">
+          <input
+            id="isKnown"
+            type="checkbox"
+            className={styles.checkbox}
+            checked={!isKnownPartnerBirthPlace}
+            onChange={() => setIsKnownPartnerBirthPlace((prev) => !prev)}
+          />
+          I don`t know where my partner was born
+        </label>
       )}
-    </div>
+      <div className={styles.container}>
+        <PlacePicker
+          value={birthPlace}
+          name="birthPlace"
+          maxLength={1000}
+          isDisabled={!isKnownPartnerBirthPlace}
+          onChange={handleChange}
+        />
+
+        {(!!birthPlace.length || !isKnownPartnerBirthPlace) && (
+          <MainButton className={styles.button} onClick={handleNext}>
+            {t("next")}
+          </MainButton>
+        )}
+      </div>
+    </>
   );
 }
 

src/components/pages/Questionnaire/CustomAnswers/BirthPlace/styles.module.css

@@ -18,3 +18,47 @@
   border-radius: 12px;
   margin-top: 26px;
 }
+
+.checkbox-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  color: #000;
+}
+
+.checkbox-container input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  margin: 0;
+  font: inherit;
+  color: currentColor;
+  width: 1.15em;
+  height: 1.15em;
+  border: 0.15em solid currentColor;
+  border-radius: 0.15em;
+  transform: translateY(-0.075em);
+
+  display: grid;
+  place-content: center;
+}
+
+.checkbox-container input[type="checkbox"]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  border-radius: 2px;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em #6939a2;
+}
+
+.checkbox-container input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+
+.checkbox-container input[type="checkbox"]:focus {
+  outline: max(2px, 0.15em) solid currentColor;
+  outline-offset: max(2px, 0.15em);
+}

src/components/pages/Questionnaire/CustomAnswers/MultipleAnswers/index.tsx

@@ -28,6 +28,15 @@ function MultiplyAnswers({ answers }: IMultiplyAnswersProps) {
         prevState.filter((item) => item !== answer.id)
       );
     }
+    if (answer.id === "none_of_these") {
+      return setSelectedAnswers([answer.id]);
+    }
+    if (
+      selectedAnswers.includes("none_of_these") &&
+      answer.id !== "none_of_these"
+    ) {
+      return;
+    }
     return setSelectedAnswers((prevState) => [...prevState, answer.id]);
   };
 
@@ -46,6 +55,10 @@ function MultiplyAnswers({ answers }: IMultiplyAnswersProps) {
         <Answer
           key={index}
           answer={answer}
+          disabled={
+            selectedAnswers.includes("none_of_these") &&
+            answer.id !== "none_of_these"
+          }
           type="multiply"
           active={selectedAnswers.includes(answer.id)}
           onClick={() => handleClick(answer)}

src/components/pages/TrialChoice/index.tsx

@@ -105,7 +105,7 @@ function TrialChoicePage() {
         See my plan
       </MainButton>
       <p className={styles["auxiliary-text"]}>
-        *Cost of trial as of February 2023
+        *Cost of trial as of February 2024
       </p>
     </section>
   );

src/components/pages/TrialPayment/components/YourReading/index.tsx

@@ -47,7 +47,7 @@ function YourReading({ gender, zodiacSign, buttonClick }: IYourReadingProps) {
             </p>
           </li>
           <li>
-            <p>Your horoscope and upcoming events for 2023</p>
+            <p>Your horoscope and upcoming events for 2024</p>
           </li>
           <li>
             <p>

src/data/reviews.ts

@@ -8,19 +8,19 @@ interface IReview {
 export const reviews: IReview[] = [
   {
     username: "ria._.panwar",
-    date: "02/17/2023",
+    date: "02/17/2024",
     text: "It was really helpful and had provided me the clarity that I needed for my current relationship situation. It gives me hope that my relationship could still be save. Thank you. Highly recommended!",
     mark: 5,
   },
   {
     username: "jp63_",
-    date: "02/17/2023",
+    date: "02/17/2024",
     text: "Amazing, absolutely amazing! The affirmations I received and nurturing advice, was worth everything ! Truly, thank you !!",
     mark: 5,
   },
   {
     username: "therealslimmazi",
-    date: "02/17/2023",
+    date: "02/17/2024",
     text: "It helps me be able to trust my self and my choices for the future by giving me reassurance with the information i get. My goals and dreams are going to happen and and now i trust myself to do as a need and wish",
     mark: 4.6,
   },