From 5cc17824f35864826e10fc6440b617c15ddfe99f Mon Sep 17 00:00:00 2001
From: Daniil Chemerkin <dev.daminik00@gmail.com>
Date: Fri, 12 Sep 2025 15:46:08 +0000
Subject: [PATCH] AW-483-484-485-fix-bugs

---
 .../locales/compatibility-v2/en/male_en.json  |   6 ++
 public/locales/v1/en/male_en.json             |  14 +++
 .../CompatibilityV2/pages/Birthdate/index.tsx |  21 ++--
 .../pages/BirthdatePartner/index.tsx          |   6 ++
 .../CompatibilityV2/pages/DateEvent/index.tsx |   6 ++
 .../pages/TrialChoice/index.tsx               |  74 ++++++++-----
 .../pages/TrialChoice/styles.module.scss      | 100 +++++++++++++++++-
 src/components/DateTimePicker/DateInput.tsx   |  21 ++--
 src/components/DateTimePicker/DatePicker.tsx  |  19 +++-
 .../v1/components/PriceItem/index.tsx         |  11 +-
 .../v1/components/PriceItem/styles.module.css |  40 -------
 .../components/PriceItem/styles.module.scss   |  58 ++++++++++
 .../v1/components/PriceList/index.tsx         |  16 ++-
 .../v1/components/PriceList/styles.module.css |  32 ++++++
 src/hooks/ab/unleash/useUnleash.ts            |   4 +-
 src/utils/monthNames.ts                       |  49 +++++++++
 16 files changed, 385 insertions(+), 92 deletions(-)
 delete mode 100644 src/components/pages/ABDesign/v1/components/PriceItem/styles.module.css
 create mode 100644 src/components/pages/ABDesign/v1/components/PriceItem/styles.module.scss
 create mode 100644 src/utils/monthNames.ts

diff --git a/public/locales/compatibility-v2/en/male_en.json b/public/locales/compatibility-v2/en/male_en.json
index a6a9c53..0636f39 100644
--- a/public/locales/compatibility-v2/en/male_en.json
+++ b/public/locales/compatibility-v2/en/male_en.json
@@ -664,6 +664,12 @@
         "title": "Bought today: <count>",
         "description": "<count> people are buying now:"
       }
+    },
+    "price-descriptions": {
+      "1": "Basic",
+      "2": "Standard",
+      "3": "Popular",
+      "4": "Premium"
     }
   },
   "/scan-hand": {
diff --git a/public/locales/v1/en/male_en.json b/public/locales/v1/en/male_en.json
index 7755a0e..d388592 100644
--- a/public/locales/v1/en/male_en.json
+++ b/public/locales/v1/en/male_en.json
@@ -7,6 +7,20 @@
   "day": "Day",
   "year": "Year",
   "month": "Month",
+  "months": {
+    "january": "January",
+    "february": "February",
+    "march": "March",
+    "april": "April",
+    "may": "May",
+    "june": "June",
+    "july": "July",
+    "august": "August",
+    "september": "September",
+    "october": "October",
+    "november": "November",
+    "december": "December"
+  },
   "aura_paywall_redesign_main": {
     "text_0": "We've helped millions of people to have happier lives and better relationships, and we want to help you too.",
     "text_0_color": "millions",
diff --git a/src/components/CompatibilityV2/pages/Birthdate/index.tsx b/src/components/CompatibilityV2/pages/Birthdate/index.tsx
index 82bbf40..55999e2 100644
--- a/src/components/CompatibilityV2/pages/Birthdate/index.tsx
+++ b/src/components/CompatibilityV2/pages/Birthdate/index.tsx
@@ -14,6 +14,7 @@ import { useSession } from "@/hooks/session/useSession";
 import { ESourceAuthorization } from "@/api/resources/User";
 import { usePreloadImages } from "@/hooks/preload/images";
 import { getZodiacSignByDate, ZODIACS } from "@/services/zodiac-sign";
+import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
 
 function Birthdate() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
@@ -26,14 +27,19 @@ function Birthdate() {
   const { gender } = useSelector(selectors.selectQuestionnaire);
   const zodiacSign = getZodiacSignByDate(birthdate);
 
+  const { variant: dateMonth = "v0" } = useUnleash({
+    flag: EUnleashFlags.v2CompatibilityDateMonth,
+  });
+
   usePreloadImages(
-    !!zodiacSign?.length ?
-      [
-        `/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`
-      ] :
-      ZODIACS.map(
-        (zodiac) => `/zodiac-signs/${gender?.toLowerCase()}/${zodiac?.toLowerCase()}.svg`
-      )
+    zodiacSign?.length
+      ? [
+          `/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`,
+        ]
+      : ZODIACS.map(
+          (zodiac) =>
+            `/zodiac-signs/${gender?.toLowerCase()}/${zodiac?.toLowerCase()}.svg`
+        )
   );
 
   const handleValid = (_birthdate: string) => {
@@ -82,6 +88,7 @@ function Birthdate() {
         onValid={handleValid}
         onInvalid={() => setIsDisabled(true)}
         inputClassName="date-picker-input"
+        monthsDisplay={dateMonth === "v1" ? "name" : "number"}
       />
       <Button
         className={styles.button}
diff --git a/src/components/CompatibilityV2/pages/BirthdatePartner/index.tsx b/src/components/CompatibilityV2/pages/BirthdatePartner/index.tsx
index 288f0cb..1e64768 100644
--- a/src/components/CompatibilityV2/pages/BirthdatePartner/index.tsx
+++ b/src/components/CompatibilityV2/pages/BirthdatePartner/index.tsx
@@ -13,6 +13,7 @@ import { useSession } from "@/hooks/session/useSession";
 import { ESourceAuthorization } from "@/api/resources/User";
 import { usePreloadImages } from "@/hooks/preload/images";
 import { getZodiacSignByDate, ZODIACS } from "@/services/zodiac-sign";
+import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
 
 function BirthdatePartner() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
@@ -24,6 +25,10 @@ function BirthdatePartner() {
   const [isDisabled, setIsDisabled] = useState(true);
   const zodiacSign = getZodiacSignByDate(birthdate);
 
+  const { variant: dateMonth = "v0" } = useUnleash({
+    flag: EUnleashFlags.v2CompatibilityDateMonth,
+  });
+
   usePreloadImages(
     !!zodiacSign?.length ?
       [
@@ -64,6 +69,7 @@ function BirthdatePartner() {
         onValid={handleValid}
         onInvalid={() => setIsDisabled(true)}
         inputClassName="date-picker-input"
+        monthsDisplay={dateMonth === "v1" ? "name" : "number"}
       />
       <Button
         className={styles.button}
diff --git a/src/components/CompatibilityV2/pages/DateEvent/index.tsx b/src/components/CompatibilityV2/pages/DateEvent/index.tsx
index 2742984..503b2d0 100644
--- a/src/components/CompatibilityV2/pages/DateEvent/index.tsx
+++ b/src/components/CompatibilityV2/pages/DateEvent/index.tsx
@@ -11,6 +11,7 @@ import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 import { useSession } from "@/hooks/session/useSession";
 import { ESourceAuthorization } from "@/api/resources/User";
+import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
 
 function DateEvent() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
@@ -23,6 +24,10 @@ function DateEvent() {
   const [dateEvent, setDateEvent] = useState(dateEventFromStore);
   const [isDisabled, setIsDisabled] = useState(true);
 
+  const { variant: dateMonth = "v0" } = useUnleash({
+    flag: EUnleashFlags.v2CompatibilityDateMonth,
+  });
+
   const handleValid = (_birthdate: string) => {
     setDateEvent(_birthdate);
     setIsDisabled(_birthdate === "");
@@ -54,6 +59,7 @@ function DateEvent() {
         onInvalid={() => setIsDisabled(true)}
         inputClassName="date-picker-input"
         differenceOfMaximumAndCurrentYear={0}
+        monthsDisplay={dateMonth === "v1" ? "name" : "number"}
       />
       <Button
         className={styles.button}
diff --git a/src/components/CompatibilityV2/pages/TrialChoice/index.tsx b/src/components/CompatibilityV2/pages/TrialChoice/index.tsx
index 869f1a5..a041cca 100644
--- a/src/components/CompatibilityV2/pages/TrialChoice/index.tsx
+++ b/src/components/CompatibilityV2/pages/TrialChoice/index.tsx
@@ -116,7 +116,7 @@ function TrialChoice() {
   };
 
   const handleNext = () => {
-    if (isDisabled && trialButtonVariant === "v1") {
+    if (isDisabled && ["v1", "v2", "v3", "v4"].includes(trialButtonVariant)) {
       setIsDisabledButtonClicked(true);
 
       bottomRef.current?.scrollIntoView({
@@ -203,37 +203,48 @@ function TrialChoice() {
           <div className={`${styles["price-container"]}`}>
             <div
               className={`${styles.priceListContainer} ${
-                isDisabledButtonClicked && isDisabled
+                isDisabledButtonClicked &&
+                isDisabled &&
+                ["v1", "v2"].includes(trialButtonVariant)
                   ? styles.priceListContainerDisabled
                   : ""
               }`}
             >
-              {isDisabledButtonClicked && isDisabled && (
-                <div className={styles.priceListContainerDisabledText}>
-                  <svg
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <rect width="16" height="16" rx="8" fill="#EF4444" />
-                    <path
-                      d="M8.75 3C8.75 2.58516 8.41484 2.25 8 2.25C7.58516 2.25 7.25 2.58516 7.25 3V9C7.25 9.41484 7.58516 9.75 8 9.75C8.41484 9.75 8.75 9.41484 8.75 9V3ZM8 12.75C8.24864 12.75 8.4871 12.6512 8.66291 12.4754C8.83873 12.2996 8.9375 12.0611 8.9375 11.8125C8.9375 11.5639 8.83873 11.3254 8.66291 11.1496C8.4871 10.9738 8.24864 10.875 8 10.875C7.75136 10.875 7.5129 10.9738 7.33709 11.1496C7.16127 11.3254 7.0625 11.5639 7.0625 11.8125C7.0625 12.0611 7.16127 12.2996 7.33709 12.4754C7.5129 12.6512 7.75136 12.75 8 12.75Z"
-                      fill="white"
-                    />
-                  </svg>
+              {isDisabledButtonClicked &&
+                isDisabled &&
+                ["v1", "v2"].includes(trialButtonVariant) && (
+                  <div className={styles.priceListContainerDisabledText}>
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <rect width="16" height="16" rx="8" fill="#EF4444" />
+                      <path
+                        d="M8.75 3C8.75 2.58516 8.41484 2.25 8 2.25C7.58516 2.25 7.25 2.58516 7.25 3V9C7.25 9.41484 7.58516 9.75 8 9.75C8.41484 9.75 8.75 9.41484 8.75 9V3ZM8 12.75C8.24864 12.75 8.4871 12.6512 8.66291 12.4754C8.83873 12.2996 8.9375 12.0611 8.9375 11.8125C8.9375 11.5639 8.83873 11.3254 8.66291 11.1496C8.4871 10.9738 8.24864 10.875 8 10.875C7.75136 10.875 7.5129 10.9738 7.33709 11.1496C7.16127 11.3254 7.0625 11.5639 7.0625 11.8125C7.0625 12.0611 7.16127 12.2996 7.33709 12.4754C7.5129 12.6512 7.75136 12.75 8 12.75Z"
+                        fill="white"
+                      />
+                    </svg>
 
-                  {translate("/trial-choice.please-select")}
-                </div>
-              )}
+                    {translate("/trial-choice.please-select")}
+                  </div>
+                )}
 
               <PriceList
                 products={products}
                 activeItem={selectedPrice}
-                classNameItem={styles["price-item"]}
+                classNameItem={`${styles["price-item"]} ${
+                  styles[trialButtonVariant]
+                } ${
+                  isDisabledButtonClicked && isDisabled
+                    ? styles.priceItemDisabled
+                    : ""
+                }`}
                 classNameItemActive={`${styles["price-item-active"]}`}
                 classNamePricesContainer={styles["prices-container"]}
+                classNameDescription={styles["price-item-description"]}
                 currency={currency}
                 showArrow={true}
                 productWidthArrow={products[products.length - 1]}
@@ -253,6 +264,17 @@ function TrialChoice() {
                   </svg>
                 }
                 click={handlePriceItem}
+                displayMode={["v2", "v4"].includes(trialButtonVariant) ? "grid" : "row"}
+                pricesDescription={
+                  ["v2", "v4"].includes(trialButtonVariant)
+                    ? [
+                        translate("/trial-choice.price-descriptions.1"),
+                        translate("/trial-choice.price-descriptions.2"),
+                        translate("/trial-choice.price-descriptions.3"),
+                        translate("/trial-choice.price-descriptions.4"),
+                      ]
+                    : []
+                }
               />
             </div>
             <p className={styles["auxiliary-text"]}>
@@ -268,13 +290,17 @@ function TrialChoice() {
 
           <Button
             className={`${styles.button} ${
-              trialButtonVariant === "v1" ? styles["button-v1"] : ""
+              ["v1", "v2", "v3", "v4"].includes(trialButtonVariant)
+                ? styles["button-v1"]
+                : ""
             } ${
-              isDisabled && trialButtonVariant === "v1"
+              isDisabled && ["v1", "v2", "v3", "v4"].includes(trialButtonVariant)
                 ? styles["button-v1-disabled"]
                 : ""
             }`}
-            disabled={isDisabled && trialButtonVariant !== "v1"}
+            disabled={
+              isDisabled && !["v1", "v2", "v3", "v4"].includes(trialButtonVariant)
+            }
             onClick={handleNext}
           >
             {translate("next")}
diff --git a/src/components/CompatibilityV2/pages/TrialChoice/styles.module.scss b/src/components/CompatibilityV2/pages/TrialChoice/styles.module.scss
index 8569e2f..67cca5c 100644
--- a/src/components/CompatibilityV2/pages/TrialChoice/styles.module.scss
+++ b/src/components/CompatibilityV2/pages/TrialChoice/styles.module.scss
@@ -65,6 +65,54 @@
     color: #fb6c6c;
     border-color: #fb6c6c;
   }
+
+  &.v1,
+  &.v3 {
+    border: 1px solid #9ca3af;
+
+    &.price-item-active {
+      background: linear-gradient(90deg, #5393de 0%, #3a70b2 100%);
+      color: #fff !important;
+      border: none !important;
+    }
+
+    &:last-child {
+      border-width: 3px;
+    }
+  }
+
+  &.v2,
+  &.v4 {
+    font-weight: 700;
+    border: 2px solid #d1d5db;
+    border-radius: 12px;
+
+    &.price-item-active {
+      background: linear-gradient(90deg, #5393de 0%, #3a70b2 100%);
+      color: #fff !important;
+      border: 2px solid #3a70b2;
+
+      & > .price-item-description {
+        color: #fff;
+      }
+    }
+
+    &:last-child {
+      border-width: 4px;
+    }
+  }
+
+  &.v3,
+  &.v4 {
+    &.priceItemDisabled {
+      color: #fb6c6c;
+      border-color: #fb6c6c;
+
+      & > .price-item-description {
+        color: #fb6c6c;
+      }
+    }
+  }
 }
 
 :global(.dark-theme) .price-item {
@@ -79,6 +127,52 @@
     color: #fb6c6c;
     border-color: #fb6c6c;
   }
+
+  &.v1,
+  &.v3 {
+    border: 1px solid #9ca3af;
+
+    &.price-item-active {
+      background: linear-gradient(90deg, #5393de 0%, #3a70b2 100%);
+      color: #fff !important;
+      border: none !important;
+    }
+
+    &:last-child {
+      border-width: 3px;
+    }
+  }
+
+  &.v2,
+  &.v4 {
+    border: 2px solid #d1d5db;
+
+    &.price-item-active {
+      background: linear-gradient(90deg, #5393de 0%, #3a70b2 100%);
+      color: #fff !important;
+      border: 2px solid #3a70b2;
+
+      & > .price-item-description {
+        color: #fff;
+      }
+    }
+
+    &:last-child {
+      border-width: 4px;
+    }
+  }
+
+  &.v3,
+  &.v4 {
+    &.priceItemDisabled {
+      color: #fb6c6c;
+      border-color: #fb6c6c;
+
+      & > .price-item-description {
+        color: #fb6c6c;
+      }
+    }
+  }
 }
 
 .price-container {
@@ -118,15 +212,11 @@
     }
 
     & .price-item {
-      border: 1px solid rgba(156, 163, 175, 1);
+      // border: 1px solid rgba(156, 163, 175, 1);
       color: #000;
       background-color: #fff;
       box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1),
         0px 2px 4px 0px rgba(0, 0, 0, 0.1);
-
-      &:last-child {
-        border-width: 3px;
-      }
     }
   }
 }
diff --git a/src/components/DateTimePicker/DateInput.tsx b/src/components/DateTimePicker/DateInput.tsx
index dfdc772..278936e 100644
--- a/src/components/DateTimePicker/DateInput.tsx
+++ b/src/components/DateTimePicker/DateInput.tsx
@@ -1,4 +1,5 @@
 import { FormField } from "@/types";
+import { MonthOption } from "@/utils/monthNames";
 
 type DatePartValue = string | undefined;
 
@@ -6,7 +7,7 @@ type DateInputProps = Omit<
   FormField<DatePartValue>,
   "onValid" | "onInvalid"
 > & {
-  values: number[] | string[];
+  values: (number | string | MonthOption)[];
   onChange: (part: string) => void;
 };
 
@@ -21,8 +22,8 @@ function DateInput(props: DateInputProps): JSX.Element {
     onChange,
   } = props;
   const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const datePart = e.target.value ? parseInt(e.target.value, 10) : 0;
-    onChange(String(datePart));
+    const selectedValue = e.target.value;
+    onChange(selectedValue);
   };
   return (
     <div className={`date-picker__field ${inputClassName ?? ""}`}>
@@ -37,11 +38,15 @@ function DateInput(props: DateInputProps): JSX.Element {
         <option value="" hidden>
           {placeholder}
         </option>
-        {values.map((_value, index) => (
-          <option key={`${_value}_${index}`} value={_value}>
-            {_value}
-          </option>
-        ))}
+        {values.map((_value, index) => {
+          const optionValue = typeof _value === 'object' ? _value.value : _value;
+          const optionLabel = typeof _value === 'object' ? _value.label : _value;
+          return (
+            <option key={`${optionValue}_${index}`} value={optionValue}>
+              {optionLabel}
+            </option>
+          );
+        })}
       </select>
     </div>
   );
diff --git a/src/components/DateTimePicker/DatePicker.tsx b/src/components/DateTimePicker/DatePicker.tsx
index 792e351..fb713f8 100644
--- a/src/components/DateTimePicker/DatePicker.tsx
+++ b/src/components/DateTimePicker/DatePicker.tsx
@@ -7,14 +7,24 @@ import { stringify, getCurrentYear } from "./utils";
 import { IDate, getDateAsString } from "@/services/date";
 import { ELocalesPlacement, language } from "@/locales";
 import { getDateInputLocaleFormat } from "@/locales/localFormats";
+import { getMonthOptions } from "@/utils/monthNames";
 
 export function DatePicker(
   props: FormField<Date | IDate | string> & {
     differenceOfMaximumAndCurrentYear?: number;
+    monthsDisplay?: "number" | "name";
   }
 ): JSX.Element {
   const { translate } = useTranslations(ELocalesPlacement.V1);
-  const { name, value, inputClassName, differenceOfMaximumAndCurrentYear = 11, onValid, onInvalid } = props;
+  const {
+    name,
+    value,
+    inputClassName,
+    differenceOfMaximumAndCurrentYear = 11,
+    onValid,
+    onInvalid,
+    monthsDisplay = "number",
+  } = props;
   const date = getDateAsString(value);
   const [initYear, initMonth, initDay] = date.split("-");
   const [year, setYear] = useState(initYear);
@@ -31,12 +41,15 @@ export function DatePicker(
     return Array.from({ length: 66 }, (_, index) => {
       return currentYear - differenceOfMaximumAndCurrentYear - index;
     });
-  }, []);
+  }, [differenceOfMaximumAndCurrentYear]);
   const months = useMemo(() => {
+    if (monthsDisplay === "name") {
+      return getMonthOptions(translate);
+    }
     return Array.from({ length: 12 }, (_, index) => {
       return index + 1;
     });
-  }, []);
+  }, [translate, monthsDisplay]);
 
   const days = useMemo(() => {
     return Array.from(
diff --git a/src/components/pages/ABDesign/v1/components/PriceItem/index.tsx b/src/components/pages/ABDesign/v1/components/PriceItem/index.tsx
index a91bcc1..f0b6d24 100644
--- a/src/components/pages/ABDesign/v1/components/PriceItem/index.tsx
+++ b/src/components/pages/ABDesign/v1/components/PriceItem/index.tsx
@@ -1,5 +1,5 @@
 import { removeAfterDot, roundToWhole } from "@/services/price";
-import styles from "./styles.module.css";
+import styles from "./styles.module.scss";
 import Price, { Currency, Locale } from "@/components/PaymentTable/Price";
 import { useEffect, useRef } from "react";
 import { useDispatch } from "react-redux";
@@ -11,8 +11,10 @@ interface PriceItemProps {
   active: boolean;
   className?: string;
   classNameActive?: string;
+  classNameDescription?: string;
   currency: Currency;
   arrowElement?: React.ReactNode;
+  description?: string;
   click: (id: string) => void;
 }
 
@@ -22,8 +24,10 @@ function PriceItem({
   active,
   className = "",
   classNameActive = "",
+  classNameDescription = "",
   currency = Currency.USD,
   arrowElement,
+  description,
   click,
 }: PriceItemProps): JSX.Element {
   const dispatch = useDispatch();
@@ -65,6 +69,11 @@ function PriceItem({
       className={compatClassName()}
     >
       {removeAfterDot(_price.format())}
+      {!!description?.length && (
+        <p className={`${styles.description} ${classNameDescription}`}>
+          {description}
+        </p>
+      )}
       {arrowElement}
     </div>
   );
diff --git a/src/components/pages/ABDesign/v1/components/PriceItem/styles.module.css b/src/components/pages/ABDesign/v1/components/PriceItem/styles.module.css
deleted file mode 100644
index aa5a0f4..0000000
--- a/src/components/pages/ABDesign/v1/components/PriceItem/styles.module.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.container {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 60px;
-    height: 60px;
-    border-radius: 6px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
-}
-
-.active {
-    background-color: #D1ACF2;
-    border-color: #D1ACF2 !important;
-    color: #fff;
-}
-
-.popular {
-    border-color: #30bf52;
-}
-
-.popular:after {
-    content: 'Most Popular';
-    position: absolute;
-    width: 80px;
-    height: 20px;
-    left: -10px;
-    bottom: -25px;
-    background-color: #30bf52;
-    font-size: 9px;
-    font-weight: 500;
-    color: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 10px;
-}
\ No newline at end of file
diff --git a/src/components/pages/ABDesign/v1/components/PriceItem/styles.module.scss b/src/components/pages/ABDesign/v1/components/PriceItem/styles.module.scss
new file mode 100644
index 0000000..a71fbd5
--- /dev/null
+++ b/src/components/pages/ABDesign/v1/components/PriceItem/styles.module.scss
@@ -0,0 +1,58 @@
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 60px;
+  height: 60px;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.active {
+  background-color: #d1acf2;
+  border-color: #d1acf2 !important;
+  color: #fff;
+}
+
+.popular {
+  border-color: #30bf52;
+}
+
+.popular:after {
+  content: "Most Popular";
+  position: absolute;
+  width: 80px;
+  height: 20px;
+  left: -10px;
+  bottom: -25px;
+  background-color: #30bf52;
+  font-size: 9px;
+  font-weight: 500;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+}
+
+.description {
+  font-size: 14px;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+:global(.dark-theme) {
+  .description {
+    color: #9ca3af;
+  }
+
+  .active {
+    & > .description {
+      color: #4f8de5;
+    }
+  }
+}
diff --git a/src/components/pages/ABDesign/v1/components/PriceList/index.tsx b/src/components/pages/ABDesign/v1/components/PriceList/index.tsx
index 72c6457..b0fc162 100644
--- a/src/components/pages/ABDesign/v1/components/PriceList/index.tsx
+++ b/src/components/pages/ABDesign/v1/components/PriceList/index.tsx
@@ -12,11 +12,14 @@ interface PriceListProps {
   classNameItem?: string;
   classNameItemActive?: string;
   classNamePricesContainer?: string;
+  classNameDescription?: string;
   currency?: Currency;
   preActiveItems?: string[];
   showArrow?: boolean;
   productWidthArrow?: IFunnelPaymentVariant;
   arrowElement?: React.ReactNode;
+  displayMode?: "row" | "grid";
+  pricesDescription?: string[];
   click: () => void;
 }
 
@@ -30,11 +33,14 @@ function PriceList({
   classNameItem = "",
   classNameItemActive = "",
   classNamePricesContainer = "",
+  classNameDescription = "",
   preActiveItems = [],
   currency = Currency.USD,
   showArrow = false,
   productWidthArrow,
   arrowElement,
+  displayMode = "row",
+  pricesDescription = [],
 }: PriceListProps): JSX.Element {
   const dispatch = useDispatch();
   const [activeProductItem, setActiveProductItem] =
@@ -54,7 +60,9 @@ function PriceList({
   };
 
   return (
-    <div className={`${styles.container} ${classNamePricesContainer}`}>
+    <div
+      className={`${styles.container} ${classNamePricesContainer} ${styles[displayMode]}`}
+    >
       {products.map((product, idx) => (
         <PriceItem
           active={
@@ -64,8 +72,9 @@ function PriceList({
           key={idx}
           value={getPrice(product)}
           id={product.id}
-          className={classNameItem}
-          classNameActive={classNameItemActive}
+          className={`${classNameItem} ${styles.item} ${styles[displayMode]}`}
+          classNameActive={`${classNameItemActive} ${styles.itemActive} ${styles[displayMode]}`}
+          classNameDescription={classNameDescription}
           click={priceItemClick}
           currency={currency}
           arrowElement={
@@ -73,6 +82,7 @@ function PriceList({
               ? arrowElement
               : null
           }
+          description={pricesDescription[idx]}
         />
       ))}
     </div>
diff --git a/src/components/pages/ABDesign/v1/components/PriceList/styles.module.css b/src/components/pages/ABDesign/v1/components/PriceList/styles.module.css
index 7686405..f9e64f1 100644
--- a/src/components/pages/ABDesign/v1/components/PriceList/styles.module.css
+++ b/src/components/pages/ABDesign/v1/components/PriceList/styles.module.css
@@ -4,4 +4,36 @@
   flex-direction: row;
   justify-content: space-between;
   gap: 4px;
+
+  &.grid {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+}
+
+.item {
+  &.grid {
+    width: 162px;
+    flex-direction: column;
+    gap: 8px;
+    height: 76px;
+  }
+}
+
+@media (max-width: 380px) {
+  .item {
+    &.grid {
+      width: 142px;
+    }
+  }
+}
+
+@media (max-width: 340px) {
+  .item {
+    &.grid {
+      width: 102px;
+    }
+  }
 }
diff --git a/src/hooks/ab/unleash/useUnleash.ts b/src/hooks/ab/unleash/useUnleash.ts
index 32fb8ed..5071590 100644
--- a/src/hooks/ab/unleash/useUnleash.ts
+++ b/src/hooks/ab/unleash/useUnleash.ts
@@ -39,6 +39,7 @@ export enum EUnleashFlags {
     "v2CompatibilityReviewPage" = "v2-compatibility-review-page",
     "v2CompatibilityPathToEnteringBirthdate" = "v2-compatibility-path-to-entering-birthdate",
     "v2CompatibilityTrialChoicePath" = "v2-compatibility-trial-choice-path",
+    "v2CompatibilityDateMonth" = "v2-compatibility-date-month",
 }
 
 interface IUseUnleashProps<T extends EUnleashFlags> {
@@ -73,7 +74,7 @@ interface IVariants {
     [EUnleashFlags.compatibilityV2TrialTextPrice]: "v0" | "v1" | "v2" | "v3";
     [EUnleashFlags.compatibilityV3TrialTextPrice]: "v0" | "v1" | "v2" | "v3";
     [EUnleashFlags.compatibilityV4TrialTextPrice]: "v0" | "v1" | "v2" | "v3";
-    [EUnleashFlags.compatibilityV2TrialButton]: "v0" | "v1";
+    [EUnleashFlags.compatibilityV2TrialButton]: "v0" | "v1" | "v2" | "v3" | "v4";
     [EUnleashFlags.palmistryV1TrialTextPrice]: "v0" | "v1" | "v2" | "v3";
     [EUnleashFlags.v2CompatibilityScanResultNumbers]: 'off' | 'on';
     [EUnleashFlags.v2CompatibilityScanInstructionImage]: 'v0' | 'v1';
@@ -82,6 +83,7 @@ interface IVariants {
     [EUnleashFlags.v2CompatibilityReviewPage]: 'v0' | 'v1' | 'v2' | 'v3' | 'v4';
     [EUnleashFlags.v2CompatibilityPathToEnteringBirthdate]: 'hide' | 'show';
     [EUnleashFlags.v2CompatibilityTrialChoicePath]: 'v0' | 'v1' | 'v2' | 'v3';
+    [EUnleashFlags.v2CompatibilityDateMonth]: 'v0' | 'v1';
 }
 
 /**
diff --git a/src/utils/monthNames.ts b/src/utils/monthNames.ts
new file mode 100644
index 0000000..9d3ea38
--- /dev/null
+++ b/src/utils/monthNames.ts
@@ -0,0 +1,49 @@
+export interface MonthOption {
+  value: string;
+  label: string;
+}
+
+const monthKeys = [
+  "january",
+  "february",
+  "march",
+  "april",
+  "may",
+  "june",
+  "july",
+  "august",
+  "september",
+  "october",
+  "november",
+  "december",
+];
+
+export const getMonthOptions = (
+  translate: (key: string) => string
+): MonthOption[] => {
+  return monthKeys.map((monthKey, index) => ({
+    value: String(index + 1),
+    label: translate(`months.${monthKey}`),
+  }));
+};
+
+export const getMonthName = (
+  monthNumber: string | number,
+  translate: (key: string) => string
+): string => {
+  const index = Number(monthNumber) - 1;
+  const monthKey = monthKeys[index];
+
+  return monthKey ? translate(`months.${monthKey}`) : String(monthNumber);
+};
+
+export const getMonthNumber = (
+  monthName: string,
+  translate: (key: string) => string
+): string => {
+  const index = monthKeys.findIndex(
+    (monthKey) => translate(`months.${monthKey}`) === monthName
+  );
+
+  return index !== -1 ? String(index + 1) : monthName;
+};