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",
}}
>
-
+
{getText("text.0", { replacementSelector: "b", color: "#1C38EA", @@ -119,15 +140,17 @@ function TrialChoicePage() { />
{email}
-{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) {
{partnerZodiacSign.length ? partnerZodiacSign : "-"}
+{partnerZodiacSign?.length ? partnerZodiacSign : "-"}