diff --git a/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx index 6a66a0d..e8e6412 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx @@ -15,6 +15,7 @@ import { EPlacementKeys } from "@/api/resources/Paywall"; import { getRandomArbitrary } from "@/services/random-value"; import Loader from "@/components/Loader"; import metricService, { EGoals } from "@/services/metric/metricService"; +import PersonalVideo from "../TrialPayment/components/PersonalVideo"; function TrialChoicePage() { const dispatch = useDispatch(); @@ -29,6 +30,7 @@ function TrialChoicePage() { const { products, isLoading, getText } = usePaywall({ placementKey: EPlacementKeys["aura.placement.redesign.main"], }); + const { videoUrl } = useSelector(selectors.selectPersonalVideo); useEffect(() => { const randomDelay = getRandomArbitrary(3000, 5000); @@ -58,17 +60,36 @@ function TrialChoicePage() { ref={pageRef} style={{ backgroundColor: gender === "male" ? "#C1E5FF" : "#f7ebff", + paddingTop: !videoUrl.length ? "15px" : "0px", }} > - -
+ {!videoUrl.length && ( + <> + +
+ + )} + {!!videoUrl.length && ( + + )} {!isLoading && ( <> -

+

{getText("text.0", { replacementSelector: "b", color: "#1C38EA", @@ -119,15 +140,17 @@ function TrialChoicePage() { />

{email}

- - {getText("text.button.1", { - color: "#1C38EA", - })} - + {!isDisabled && ( + + {getText("text.button.1", { + color: "#1C38EA", + })} + + )}

{getText("text.4", { color: "#1C38EA", diff --git a/src/components/pages/ABDesign/v1/pages/TrialChoice/styles.module.css b/src/components/pages/ABDesign/v1/pages/TrialChoice/styles.module.css index b5aec72..09ab884 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialChoice/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/TrialChoice/styles.module.css @@ -5,7 +5,7 @@ min-height: 100dvh; height: fit-content; background-color: #fff0f0; - padding: 15px 42px 60px; + padding: 0 42px 126px; width: 100%; max-width: 500px; } @@ -133,10 +133,17 @@ font-size: 18px; min-height: 0; height: 50px; + position: fixed; + bottom: calc(0dvh + 16px); + width: calc(100% - 84px); } .email { font-weight: 500; + word-break: break-all; + white-space: normal; + line-height: 1.3; + text-align: center; } .loader { @@ -144,4 +151,12 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); +} + +.personal-video { + position: fixed !important; + top: 0dvh; + z-index: 30; + margin-top: 0 !important; + border-radius: 0 !important; } \ No newline at end of file diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/styles.module.css b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/styles.module.css index b6a4cf5..34ed7f6 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/styles.module.css @@ -1,5 +1,6 @@ .container { width: 100%; + max-width: 500px; margin: 24px 0 16px; position: relative; overflow: hidden; diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/WithPartnerInformation/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/WithPartnerInformation/index.tsx index 3af0731..ccd5e23 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/WithPartnerInformation/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/WithPartnerInformation/index.tsx @@ -69,7 +69,7 @@ function WithPartnerInformation(props: IWithPartnerInformationProps) {

  • Zodiac sign
    -

    {partnerZodiacSign.length ? partnerZodiacSign : "-"}

    +

    {partnerZodiacSign?.length ? partnerZodiacSign : "-"}

  • Gender
    diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx index b986db9..7220270 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx @@ -24,7 +24,6 @@ import { useDynamicSize } from "@/hooks/useDynamicSize"; import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall"; import { usePaywall } from "@/hooks/paywall/usePaywall"; import PaymentModal from "@/components/PaymentModal"; -import PersonalVideo from "./components/PersonalVideo"; import metricService, { EGoals } from "@/services/metric/metricService"; function TrialPaymentPage() { @@ -55,7 +54,6 @@ function TrialPaymentPage() { "single" | "partner" >("single"); const { subPlan } = useParams(); - const { videoUrl } = useSelector(selectors.selectPersonalVideo); useEffect(() => { if (subPlan) { @@ -137,13 +135,6 @@ function TrialPaymentPage() {
    - {!!videoUrl.length && ( - - )} {singleOrWithPartner === "partner" && (