diff --git a/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx index 3603d88..54a195a 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx +++ b/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 (
+ {isShowTimer && ( + + )}

{getText("text.0", { diff --git a/src/components/pages/ABDesign/v1/pages/TrialChoice/styles.module.css b/src/components/pages/ABDesign/v1/pages/TrialChoice/styles.module.scss similarity index 87% rename from src/components/pages/ABDesign/v1/pages/TrialChoice/styles.module.css rename to src/components/pages/ABDesign/v1/pages/TrialChoice/styles.module.scss index be46a97..d9c440f 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialChoice/styles.module.css +++ b/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; -} \ No newline at end of file +} + +.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; + } +} diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/DiscountExpires/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/DiscountExpires/index.tsx index 39005f8..2788cfe 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/DiscountExpires/index.tsx +++ b/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; + +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 ( -

+
{translate("/trial-payment.discount_expires")} diff --git a/src/hooks/paywall/usePaywall.tsx b/src/hooks/paywall/usePaywall.tsx index 41228a7..f7d38dc 100644 --- a/src/hooks/paywall/usePaywall.tsx +++ b/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)); diff --git a/src/services/metric/metricService.ts b/src/services/metric/metricService.ts index f3b9fde..ab9628a 100644 --- a/src/services/metric/metricService.ts +++ b/src/services/metric/metricService.ts @@ -130,7 +130,7 @@ const initMetricAB = () => { } export const useMetricABFlags = () => { - return useExperiments({ + return useExperiments({ clientId: `metrika.${metricCounterNumber}` }) }