Develop

src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx

@@ -1,4 +1,4 @@
-import styles from "./styles.module.css";
+import styles from "./styles.module.scss";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { actions, selectors } from "@/store";
@@ -17,12 +17,14 @@ import Loader from "@/components/Loader";
 import metricService, {
   EGoals,
   EMetrics,
+  useMetricABFlags,
 } from "@/services/metric/metricService";
 import PersonalVideo from "../TrialPayment/components/PersonalVideo";
 import Toast from "../../components/Toast";
 import BlurComponent from "@/components/BlurComponent";
 import { useTranslations } from "@/hooks/translations";
 import { addCurrency, ELocalesPlacement } from "@/locales";
+import DiscountExpires from "../TrialPayment/components/DiscountExpires";
 
 enum EDisplayOptionButton {
   "alwaysVisible" = "alwaysVisible",
@@ -51,6 +53,9 @@ function TrialChoicePage() {
   });
   const arrowLeft = useSelector(selectors.selectTrialChoiceArrowOptions)?.left;
 
+  const { flags } = useMetricABFlags();
+  const isShowTimer = flags?.showTimerTrial?.[0] === "show";
+
   const getPrice = useCallback(
     (product: IPaywallProduct) => {
       if (!product?.trialPrice) {
@@ -109,6 +114,16 @@ function TrialChoicePage() {
     return () => clearTimeout(timeOut);
   }, [visibleToast]);
 
+  const getFirstParagraphMargin = useCallback(() => {
+    if (isShowTimer) {
+      return "12px";
+    }
+    if (videoUrl.length) {
+      return "calc((100% + 84px) / 16* 9 + 16px)";
+    }
+    return "60px";
+  }, [isShowTimer, videoUrl.length]);
+
   return (
     <section
       className={`${styles.page} page`}
@@ -137,12 +152,20 @@ function TrialChoicePage() {
       )}
       {!isLoading && (
         <>
+          {isShowTimer && (
+            <DiscountExpires
+              className={styles["discount-expires"]}
+              style={{
+                marginTop: !videoUrl.length
+                  ? "60px"
+                  : "calc((100% + 84px) / 16* 9 + 16px)",
+              }}
+            />
+          )}
           <p
             className={styles.text}
             style={{
-              marginTop: !videoUrl.length
+              marginTop: getFirstParagraphMargin(),
-                ? "60px"
-                : "calc((100% + 84px) / 16* 9 + 16px)",
             }}
           >
             {getText("text.0", {

src/components/pages/ABDesign/v1/pages/TrialChoice/styles.module.scss

@@ -34,7 +34,7 @@
 }
 
 .blue {
-  color: #1C38EA;
+  color: #1c38ea;
 }
 
 .auxiliary-text {
@@ -81,11 +81,11 @@
 }
 
 .price-item-active.male {
-  background-color: #85B6FF;
+  background-color: #85b6ff;
 }
 
 .price-item-active.female {
-  background-color: #D1ACF2;
+  background-color: #d1acf2;
 }
 
 .arrow-image {
@@ -102,11 +102,11 @@
 }
 
 .emails-container.female {
-  background-color: #D6BBEE;
+  background-color: #d6bbee;
 }
 
 .emails-container.male {
-  background-color: #85B6FF;
+  background-color: #85b6ff;
 }
 
 .emails-title {
@@ -183,4 +183,22 @@
   z-index: 30;
   margin-top: 0 !important;
   border-radius: 0 !important;
-}
+}
+
+.discount-expires {
+  flex-direction: row !important;
+  gap: 12px;
+  font-size: 1.5rem;
+
+  & > h6 {
+    font-size: 17px;
+  }
+
+  & > div > p,
+  & > div > div > span:first-child {
+    font-size: 20px;
+  }
+  & > div > div > span:last-child {
+    font-size: 10px;
+  }
+}

src/components/pages/ABDesign/v1/pages/TrialPayment/components/DiscountExpires/index.tsx

@@ -1,10 +1,12 @@
-import { useEffect, useMemo, useState } from "react";
+import { HTMLAttributes, useEffect, useMemo, useState } from "react";
 import styles from "./styles.module.css";
 import Title from "@/components/Title";
 import { useTranslations } from "@/hooks/translations";
 import { ELocalesPlacement } from "@/locales";
 
-function DiscountExpires() {
+type TDiscountExpiresProps = HTMLAttributes<HTMLDivElement>;
+
+function DiscountExpires({ className = "", ...props }: TDiscountExpiresProps) {
   const { translate } = useTranslations(ELocalesPlacement.V1);
   const [currentDate, setCurrentDate] = useState(new Date());
   const endDate = useMemo(
@@ -39,7 +41,7 @@ function DiscountExpires() {
   };
 
   return (
-    <div className={styles["discount-expires"]}>
+    <div {...props} className={`${styles["discount-expires"]} ${className}`}>
       <Title variant="h6" className={styles.title}>
         {translate("/trial-payment.discount_expires")}
       </Title>

src/hooks/paywall/usePaywall.tsx

@@ -6,7 +6,11 @@ import { useDispatch, useSelector } from "react-redux";
 import parse from "html-react-parser";
 import { defaultPaywalls } from "./defaultPaywalls";
 import locales from "@/locales/locales";
-import { ELocalesPlacement, language } from "@/locales";
+import {
+  ELocalesPlacement,
+  getDefaultLocaleByLanguage,
+  language,
+} from "@/locales";
 import { useTranslations } from "@/hooks/translations";
 import { Currency } from "@/components/PaymentTable";
 
@@ -108,7 +112,7 @@ export function usePaywall({
       const property = properties.find((property) => property.key === key);
       if (!property) return "";
       let text = property.value;
-      if (locale in locales) {
+      if (getDefaultLocaleByLanguage(locale) in locales) {
         text = `${paywall?.key.replaceAll(".", "_")}.${key.replaceAll(
           ".",
           "_"
@@ -151,7 +155,6 @@ export function usePaywall({
         return parse(element);
       }
       if (text && replacement?.length) {
-        if (text.includes("text_2")) console.log(text);
         return replacement.reduce((acc, _replacement) => {
           return acc.replace(_replacement.target, _replacement.replacement);
         }, translate(text));

src/services/metric/metricService.ts

@@ -130,7 +130,7 @@ const initMetricAB = () => {
 }
 
 export const useMetricABFlags = () => {
-    return useExperiments<typeof EFlags>({
+    return useExperiments<typeof EFlags & { showTimerTrial: "show" | "hide" }>({
         clientId: `metrika.${metricCounterNumber}`
     })
 }